作者：王刚,夏毓彦
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网站制作、发布与维护技术实战试读：
内容简介
本书针对学习开发网站的读者，详细介绍了网站从策划到编码，再到发布与管理的整个开发过程，一步步帮助读者走进网站开发的大门。
本书重点讲解网站制作主流技术，包括网页的规划、站点的建立、各种资源文件的创建、JavaScrip基本使用方法、网页结构布局、HTML5和CSS3最新设计技术、导航和表单的制作方法、在网页中插入音频和视频、简单的PHP和MySQL动态网站技术、域名和空间申请，以及网站的测试与发布。
本书适合网站开发人员、网站维护管理人员、网站设计人员、网站站长学习，也适合高校和培训学校作为相关专业的网站开发课程教学参考书使用。前 言
随着互联网技术的迅速发展，Web 1.0和Web 2.0的时代已经离我们远去。一些互联网巨头纷纷用自己的实际行动迎接HTML 5和CSS 3技术的到来，所有主流的浏览器都已经开始支持HTML 5和CSS 3技术的很多特性。网页的代码变得越来越整洁，对搜索引擎的支持也越来越好，甚至在移动设备端，浏览器对HTML 5也提供了很好的支持。
本书针对初学者，全程介绍了网站制作、发布和维护的过程。本书共分为21章。第1～3章介绍网站的规划与准备工作，在读者对网站制作有一个整体认识之后，开始介绍如何创建站点，以及网站制作开发工具的使用方法。第4～5章逐步介绍网页中文本、图像和超链接的使用方法，因为这些内容都是每个网页中必不可少的元素。接下来介绍如何使用表格和列表展示数据，以及它们的特殊用法。第6～9章介绍CSS样式的基础知识、结合div元素布局网页结构以及制作网站导航菜单功能的方法。表单作为用户与网站交互的窗口，也进行了详细的介绍。第10～11章介绍JavaScript基础知识以及如何创建交互式网页。第12～14章介绍HTML 5和CSS 3的新功能，包括新的标签元素、音频与视频的操作方法，以及CSS 3中各种选择器的灵活使用技巧。第15章对响应式Web设计进行了简要的介绍。第16～18章开始详细介绍PHP基础知识以及MySQL数据库的使用方法，指导读者创建动态网站。第19章和20章分别介绍了域名和空间的相关知识，以及网站测试、上传和维护的方法。最后，第21章介绍了搜索引擎优化的一些知识，帮助读者提高网站的曝光率。
本书适合以下读者对象：
● 希望自己动手制作网站的初学者
● 有志于从事网站开发的专业人士
● 各种类型网站的站长
● 高校和培训机构相关专业的师生
本书配套的源代码及素材从如下网址（注意数字和字母大小写）下载：
http://pan.baidu.com/s/1bpyw6OB
如果下载有问题，请发送电子邮件至booksaga@163.com进行咨询，邮件主题设置为“网站代码”。编者2016年10月第1章规划与准备
网站建设初期的首要工作是网站策划，其重点在于对网站的设计、建设、推广和运营等各个方面进行整体的规划。不同行业的公司对于网站规划的具体要求也不一样，但一般都会确定网站的定位、类型、结构、版式和布局，以及是否使用动态布局等。1.1网页制作基础
网页是构成网站的基本元素，不同类型的网站由不同类型的网页组成，无论是哪种类型的网页，都是由文字、图片、动画、音频、视频等信息组成，网站的建立不能一蹴而就，需要经过详细的制作流程。1.1.1 网页与网站
网页通常是指一个单独的页面，也就是我们在浏览器中看到的效果，但它仅限于一个网页文件。而网站由多个网页共同组成，各个网页之间通过超链接等方式连接在一起，组成网站的各个页面。网页肯定是指一个页面，即使这个页面中内嵌了其他的页面，它仍然称之为一个页面，但是网站一定是多个页面的集合，各个页面之间具有内在的关联。最简单的情况下，如果一个网站中只有一个页面，我们也可以将其称为网站。1.1.2 网站的类型
互联网上有很多的网站，按照网站主体性质的不同，可将这些网站分为以下几类：1．个人网站
个人网站是以满足个人兴趣爱好为目的而开发制作的网站，这类网站往往具有十分鲜明的个人特色。例如图1.1就是一个非常独特的个人网站。图1.12．企业类网站
企业类网站是企业在互联网上进行宣传的重要窗口，用户可以在互联网上搜索关键字查找到企业的网站，从而了解到最新资讯。例如图1.2是海尔集团的网站首页。图1.23．机构类网站
机构类网站通常都是为政府或组织创建的网站，这类网站主要以形象宣传和服务为主。例如图1.3为北京大学网站首页。图1.34．娱乐休闲类网站
娱乐休闲类网站又可以分为电影网站、游戏网站、交友网站、社区论坛、手机短信网站等，这些网站为我们提供了丰富的娱乐休闲项目。随着互联网技术的高速发展，以后也许还会出现更多类型的娱乐休闲类网站。例如图1.4是国内比较有名的一个游戏网站首页。图1.45．门户类网站
互联网上的信息非常多，为了大家上网方便，有些人将这些信息进行整合、分类，然后制作成网站，这类网站综合了各个领域的资源，我们可以在这类网站上非常方便地找到自己感兴趣的资源，这样的网站就是门户类网站，国内比较知名的门户类网站有新浪、网易、搜狐等，比如图1.5是网易首页。图1.56．行业信息类网站
随着互联网的发展、网民人数的增多及网上不同兴趣群体的形成，门户网站已经明显不能满足不同群体的需要。一批能够满足某一特定领域的网上人群及其特定需要的网站应运而生，这就是行业信息类网站，比如图1.6是58同城网站首页。图1.67．购物类网站
随着互联网的普及和人们生活水平的提高，网上购物已经成为一种时尚，它正在悄然改变着人们的生活习惯。购物网站上丰富的商品、低廉的价格、优质的服务已经让越来越多的人离不开它，比如图1.7是京东商城的首页。图1.71.1.3 网页的基本构成
从上面列举的各种类型的网站效果可以看出，要构建一个绚丽多彩的网页，不仅需要文本、图像和超链接，还需要灵活运用这些元素。通过合理的布局，让文本、图像和超链接融合为网站的灵魂，使用标题、段落、样式、字体颜色、背景等元素让整个页面看起来更有层次感。另外，为了达到一些特殊的效果，还可以使用动画、音频、视频等元素，甚至通过CSS样式完成一些特殊的效果，比如动画效果的导航等。1.1.4 网站开发与制作流程
网站开发需要同时具备程序员、设计师和客户3个要素才能完成。程序员是网站开发的主力军，不但要具备深厚的程序设计功底，还需要具有良好的沟通能力。设计师负责网站整体的界面设计，不但要精通Photoshop、CorelDRAW、IIIustator、AutoCAD、3ds Max等图像处理软件，还需要熟悉Dreamweaver和Flash等制作软件，需要具备一定的审美观。客户是我们网站交付的对象，负责提供网站发布的内容、决定页面的色彩以及确定排版方式。
网站的制作流程可以分为以下几个步骤：目标需求分析。网站建设初期，需要与客户确定需求，从而确定网站的内容与风格，以及应该使用的文字内容、图片、动画、音频、视频等元素，确定网站排版与各模块功能等尽量详细的需求，并形成项目计划书与客户确认。制作网页。需求分析结束后，就可以开始制作网页了。此时应该首先确定网站的定位，确定网站是一个个人网站、企业类网站或者门户类网站等。只有确定了网站的类型，才能进一步确定网站的框架导航，这个过程需要程序员与设计师进行详细的讨论，包括网站各个栏目的内容，实现的方式以及如何应用按钮、图像、超链接等元素。网站排版要灵活，网站LOGO与网站色彩设置需要与客户进行沟通确认。网站测试。网站开发完整后，要在本地服务器上进行系统的测试，测试通过后，通过FTP上传至网络服务器，进行网络测试。上线运行。上线运行是交付网站的一个重要阶段，在上线运行期间，要密切注意网站的运行效果。网站推广。网站上线后，为了提高网站的影响力，需要通过各种方式对网站进行推广，如注册搜索引擎、与其他网站交换广告条、SEO优化和媒体推广等。1.2网站策划
网站策划是网站建设初期的首要工作，其重点在于对网站的设计、建设、推广和运营等各个方面进行整体的策划，并提供完善的解决方案。不同的公司对于网站策划的具体要求也不一样，但一般都会确定网站的定位、类型、结构、板式与布局，以及是否使用动态布局等。1.2.1 网站的定位
网站的定位主要考虑到网站的主题以及用户群体两个方面。目前的网站有很多，按照不同的标准，网站又可以分为很多类型，要精确把握网站的主题定位，就需要考虑当前的市场规模、用户需求以及竞争情况和潜在的对手等等，明确了这些问题，再来思考我们网站的主题定位就不再那么困难了。网站的内容与网站的用户定位息息相关，在网站策划中，只有确定了什么样的网站用户，才能精准的把握网站的内容。1.2.2 确定网站类型
目前互联网上的网站很多，按照不同的标准可以将其划分为不同的类型，每一个网站都会有一个对应的类型。例如，前面介绍的网站按照主体性质的不同，可以分为个人网站、企业类网站、机构类网站、门户类网站、购物类网站等等。如果按照建设类型来分，可以分为自助建站和定制建站两种类型。自助建站只需要懂得如何操作电脑，就可以轻松地在几分钟内建立起一个网站，甚至还可以定制一些功能，内容比较丰富，但是不能自由迁移网站。定制建站则需要专业的网站建设团队根据你的要求，定制出一套符合你需要的系统，整个建设周期比较长，而且费用较高，但是可以自由迁移网站。
从实际情况出发，确定要建立一个什么类型的网站，需要自助建站还是定制建站，综合权衡利弊，选择适合自己的方式开始创建网站。1.2.3 规划网站结构
规划网站结构的中心思想就是组织网站的内容和设计结构。网站定位确定后，就可以确定网站的内容，接下来就是对网站进行规划，以确保文件内容调理清晰、结构合理，这样不仅可以很好地体现设计者的意图，也可以增强网站的可维护性与可扩展性。
至于网站应该呈现什么样的内容，应该从网站设计者和网站浏览者两个角度进行考虑，从设计者的角度考虑，纵观网站的所有内容，进一步细化网站内容分类，合理组合和展示内容；从浏览者的角度考虑，根据网站风格快速定位浏览者需要的信息，并为浏览者提供最有效的信息服务。1.2.4 确定版式与布局
网站的版式是网站的整体形象，也是网站给浏览者的第一印象。例如，同样内容的一个网站，可以是个性另类的，也可以是专业严肃的，这主要取决于站点的版面布局、浏览方式、交互性、文字、内容价格等诸多因素。1．页面尺寸
网站的页面尺寸会直接影响到浏览者的浏览体验。因为客观条件的影响，同一个网页在不同的分辨率下显示的效果也会有所差异，为了获得更好的浏览体验，网站设计者应该充分考虑到用户浏览器分辨率对网页的影响，使用适应浏览者的分辨率尺寸，而不是固定的页面尺寸。2．整体形象
网站的风格也就是网站的整体形象，通过网站的色彩、技术、文字、布局、交互方式可以概括出一个网站的个性，可以是粗狂豪放的，也可以是墨守成规的。3．网页布局
网页布局在网站建设中的作用越来越重要，随着技术的不断发展，浏览者已经不再满足简单的文字与图片堆叠式的布局，更多交互式的新的布局方式越来越受到人们的欢迎。4．网页配色
在网站策划中，对于网页配色这种非常主观的问题，需要有一个判断标准。网页设计者可以提供一些类似的网站进行分析，并征集合作人员的意见，与客户反复进行沟通确认，最终确定配色方案。1.2.5 决定是否使用动态页面
静态页面和动态页面在网站建设中都会用到，至于哪些页面需要使用静态页面，哪些页面需要使用动态页面，这主要取决于网站的功能需求和网站内容的多少。如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。1.3网站受众分析
网站受众分析并非凭空想象出来的，它是根据必要的市场调查，从大量的数据中对网站受众群体进行分析，进而从不同方面提升访问者的满意度。1.3.1 必要的市场调查
市场调查可以被定义为收集和分析有关特定产品和服务的数据的过程。通过调查了解需求，比如受众群体希望网站上更多的呈现一些什么信息，什么样的信息才能吸引他们更多的关注，不同的受众群体会因为他们的年龄或社会地位而关注不同的内容，这就需要一份切合实际的市场调查，以便确定网站的目标群体。1.3.2 如何提高访问者满意度
网站的访问者是网站存在的意义，为了提高网站访问者的满意度，可以通过以下几种方式：（1）多途径收集用户反馈信息。（2）深入研究用户心理。（3）内容和服务的不断创新。（4）竞争对手的优势分析。（5）用户的售后服务是否到位。1.4搜集素材
一个完整的网站需要包含文字、图片，甚至是音频视频等很多素材，有些素材可以自己创作，有些素材可以从其他网站上下载和加工。为了便于管理这些素材，可以将搜集到的素材按照类别整理到不同的文件夹，为网站的创建做好准备。1.4.1 网站内容需求
网站的内容由网站的定位来决定，定位明确了，网站的内容就有了方向。网站的内容并非全部必须是原创，可以是客户提供的一些信息，如公司简介、产品介绍，还可以是其他网站一些文章的引用，但需要得到许可才行。无论怎样，对于网站来说，它的内容必须能够给用户提供有价值的信息，这样才能受到用户的青睐。当然，就个人站点来说，原创的内容应该更多一些，这样也有利于搜索引擎的收录和网站的推广。1.4.2 绘制草图
网站草图设计主要分为3个部分：网站首页、目录页以及内容页的草图设计。网站首页是网站的门面，它应该最能直观的反应出网站的主要内容。首页中的导航应该尽量简洁一些，网站中最终的内容都应该在导航中能够快速的展示。根据网站类型的不同，首页中各个栏目的内容也应该突出重点，去除一些可有可无的信息，这样才可以把用户留在自己的网站上。目录页的设计主要以简单、实用为主，根据网站的定位，向用户展示尽可能多的主题信息，这样用户才可以有更多的选择。内容页的设计需要根据不同的主题来确定，不同主题的网站在内容页的展示上有很大的差别。例如，诗歌网站的内容页应该是一篇文章，而购物网站的内容页应该是相关商品的详细介绍。1.4.3 搜集文本与图片
文本与图片是网站承载的主要内容。文本可以通过手工录入，也可以从其他文档摘录或者通过扫描仪等设备获取，还可以从互联网上搜索。图片的搜集也有很多途径，例如通过照相设备采集、通过扫描仪扫描，或者通过互联网搜索的方式下载，如果有特殊需要，还可以通过一些绘图软件制作图片。无论是通过哪种途径获取文本与图片，都应当尊重知识产权，不能盗用他人的文章或图片，如需引用，需要得到他人的许可。1.4.4 组织网站内容
网站的内容大致可以分为两种，一种是网站给用户展示的信息，另一种是用户与网站的交互信息。向用户展示的信息按照内容将最主要的部分展示在最能吸引用户眼球的地方，一些特别的信息可以用粗体、颜色或一些动画效果展示，如打折促销商品可以用一个降价的图标显示。而与用户交互的信息往往会受到某些用户的青睐，这些信息可以展示在网页的侧栏，这样既可以显示当前网站备受其他人关注，还可以告诉用户其他人在这个网站上都做了些什么事情，引导用户做更多的操作。1.4.5 建立站点地图
站点地图上面放置了网站上所有页面的链接，它是整个网站的结构图，可以帮助用户了解整个网站的内容，还可以为搜索引擎提供帮助，有利于搜索引擎抓取网页。
如果网站的内容很多，用户在浏览网站的时候可能会迷失。如果网站页面总数超过了100个，就需要挑选出最重要的页面放在站点地图中，如产品分类页面、网站内容的关键页面、访问量最大的几个页面以及帮助页面等。1.5选用合适的工具
Web技术发展到今天，要建立一个网站，可供我们选择的工具有很多，其中包括网页编辑器、图像处理软件和浏览器等。1.5.1 选择合适的网页编辑器
最简单的网页编辑器就是记事本，我们可以使用记事本打开所有的网页，也可以使用记事本编写所有的网页代码，但是为了提高工作效率，以及帮助一些初学者提高编程能力，我们需要选择一款合适的文本编辑器和一款专业的HTML编辑器。1．选择一款文本编辑器
文本编辑器是用于编写普通文本的软件，当然也可以用于编写网页程序。目前可供选择的文本编辑器有很多，如Notepad++、PsPad、Komodo、Coda、Vim、UltraEdit、NoteTab、EditPlus等。这些文本编辑器各有各的优点，有的可以对文本的语法进行着色，有的可以自动完成拼写，根据个人的具体使用习惯，可以选择一款合适的文本编辑器。2．选择一款专业HTML编辑器
对于简单的页面，我们可以使用文本编辑器完成页面的制作，但是对于专业的网站来说，要提高开发效率，就需要使用专业的HTML编辑器。目前可以选择的HTML编辑器有Amaya、Dreamweaver、Frontpage、Microsoft Expression Web、CoffeeCup HTML Editor、CKEditor等，本教程将使用Dreamweaver为大家讲解网站的制作方法。1.5.2 选择合适的图像处理软件
在制作网站时，有时候需要我们自己对一些图片进行处理，这时候就需要借助一些图像处理软件，比如Photoshop、CorelDRAW、Fireworks等。对于不同的需求，需要使用不同的图像处理软件对图像进行处理，比如要裁剪一副图片，就需要使用Photoshop。1.5.3 选择合适的浏览器
同样一个网站在不同的浏览器中可能呈现不同的效果，这主要是因为目前可供选择的浏览器可能具有不同的引擎，他们对相同的HTML页面代码有着不同的解析方法。另外，不同的浏览器在安全性和实用性等诸多方面都会有所差别。目前主流的浏览器包括IE、Mozilla Firefox、Chrome、Opera等，为了更好的讲解HTML的相关功能，本教程将使用多种浏览器进行讲解。第2章创建本地站点
Dreamweaver可以用来快速编辑页面，也可以用来创建站点及其结构。在本地编辑完成的web页面可以直接在Dreamweaver中保存到站点并预览页面效果。2.1Dreamweaver使用基础
Dreamweaver是美国Macromedia公司开发的一款用于开发和管理网页的专业编辑器，使用该软件可以快速编写网页，并对网站进行管理。本节主要介绍Dreamweaver的一些基本使用方法。2.1.1 Dreamweaver桌面的基本结构
Dreamweaver经过多个版本的更新，目前的最新版本是Dreamweaver CC，打开该软件后，你会看到如图2.1所示的界面。图2.1
单击该界面中的HTML图标即可创建一个HTML页面，效果如图2.2所示。图2.2
Dreamweaver桌面的左上角是一排功能菜单按钮，通过这些菜单可以完成Dreamweaver中的所有功能操作，例如信件文件操作、代码管理、格式设置、属性设置、站点管理等。
桌面的左下角区域是属性区域，当用户在文档窗口中输入不同的内容时，属性区域会根据当前鼠标光标所在位置显示当前对象的属性。
中间的空白区域就是文档窗口，新建文档以“Untitled-”加数字序号命名，文档名称下面有3个按钮，分别用于切换代码视图、拆分视图和设计视图。例如，在代码视图中编写一段代码，这段代码用于插入一幅图片，当切换到拆分视图时，当前窗口会被分割成两个部分，一部分用于显示代码，另一部分用于显示代码呈现的效果，所以此时既可以看到代码，也可以看到插入的图片，当切换到设计视图时，用户只能看到当前页面的HTML代码效果。
桌面的右侧是一个快捷面板，在这个面版本中包含了“插入”“文件”“CSS设计器”和“CSS过滤效果”几个选项板，每个选项板中都对应有相关的操作，用于提高HTML页面的制作效率，用户还可以根据自己的需要自定义面板内容。2.1.2 文档的基本操作
在Dreamweaver中对文档的操作主要是通过“文件”菜单来完成的，其中包括文档的新建、打开、编辑、关闭、保存、另存、导入和导出等操作。当用户启动Dreamweaver软件时，系统会自动为用户创建一个HTML文档并打开这个文档，用户可以直接在文档窗口中对当前的HTML文档进行编辑，还可以插入或粘贴从其他途径获取的HTML内容。如图2.3所示为代码视图效果。图2.3
在设计视图中，用户还可以通过“查看”菜单控制网格与标尺的显示和隐藏，如果有需要还可以设置网格的颜色和行距，以及设置标尺的单位是像素、英寸或厘米。需要注意的是，在设计视图中看到的网页效果并非是网页在浏览器中的最终效果，只有通过在浏览器中预览才能得到网页的最终效果。如图2.4所示为设计视图效果，图2.5所示为浏览器中页面的显示效果。图2.4图2.52.1.3 源代码的格式化和净化
在代码视图中，Dreamweaver有一套自己的代码格式标准。如果HTML页面中的代码比较多，不利于阅读，可以通过“命令”菜单，选择“应用源格式”命令对当前HTML页面中的代码进行格式化操作，格式化后的代码具有对称的代码结构，非常有利用阅读。如图2.6所示为格式化操作之前的代码效果，图2.7所示为格式化操作之后的代码效果。图2.6图2.7
所谓净化HTML代码，实际上就是对HTML源代码的一种净化。很多通过网页制作工具生成的文档中存在大量无用代码和错误代码，这些代码不仅冗余，还浪费下载时间，浏览器在解析这些代码时还可能出错，所以使用Dreamweaver的“命令”菜单，选择“清理HTML”功能，不仅可以修复这些问题，还可以提高代码质量。例如，在图2.8所示的代码中，被选中的H3标记中没有任何内容，属于冗余的代码，使用源代码净化就可以非常轻松地清理类似这样的标记，而且该功能还可以指定清除特定的标记。图2.82.1.4 使用历史面板
Dreamweaver的历史面板中记录了在文档窗口中操作的历史，包括输入的文本、插入的对象、编辑和删除的内容等，这些操作全部保留在历史面板中，用户可以撤销一个或多个步骤，恢复文档之前的操作。2.2建立站点
在Dreamweaver中建立站点，是进行网站开发的一个关键步骤。这里所讲的建立站点，其实就是在Dreamweaver中定义站点、策划站点结构、部署开发环境。使用Dreamweaver创建站点的操作非常简单，详细操作步骤如下：新建站点。在快捷面板中选择“文件”面板，点击该面板中的“管理站点”链接，如图2.9所示。在打开的“站点管理”对话框中点击“创建站点”按钮，如图2.10所示。图2.9图2.10在打开的“站点设置对象 我的测试站点”对话框中重新设置站点的名称和站点文件夹的路径，并保存所有的设置，如图2.11所示。图2.11在面板中选中定义的站点，右键单击站点名称，在弹出的快捷菜单中选中新建文件夹，新建“Images”“Js”和“CSS”3个文件夹，这3个文件夹将分别用于存放图片、JavaScript代码和CSS样式表，如图2.12所示。并非所有的站点结构都是这3个文件夹，根据不同的网站结构和内容，可以创建更加精细的管理结构。图2.12
通过以上几步简单的操作一个本地站点就创建完成了。2.3复制和修改站点
在菜单栏中选择“站点”→“管理站点”命令，打开“管理站点”对话框，如图2.13所示。该对话框中列举了当前所有的站点，选中一个站点名称后，单击列表下面的“复制”按钮，以当前选中的站点复制一个新的站点。如果要修改选中的站点，可以单击列表下面的“编辑”按钮，打开“站点设置对象”对话框，对站点进行编辑。图2.14
试读结束[说明：试读内容隐藏了图片]