作者：黄洪杰,杨军
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网页制作基础教程(Dreamweaver CS6版)试读：
中等职业学校教学用书（计算机应用专业）网页制作基础教程（Dreamweaver CS6版）黄洪杰 杨 军 主编内容简介本书以Dreamweaver CS6 软件为依托，以建立一个网站为项目实例，系统地介绍网页的设计与制作。本教材对于文字、图像、超链接、样式、行为、AP元素、表单等网页元素的含义及应用进行了详细的讲解，并且简单介绍了Dreamweaver与Fireworks、Flash的整合应用，最后介绍了网页的管理方法和上传步骤等内容。
本书从基础知识和基本操作入手，循序渐进、直观明了地阐述各知识点，并配有大量的图片和实例，使读者在本书的指导下能够自己建立简单的网站、制作和维护网页，知道怎样设置网页的动态效果及如何应用多媒体，并且学会上传网页。
本书是中等职业学校的教材，兼顾了目前中等职业教育几种办学模式（中专、职高、技校）的特点和差异，淡化了各类中等职业学校的界限，可以作为上述几类中等职业学校的教材，也可以作为具有中等文化程度的学生、计算机爱好者和工程技术人员自学的参考教材。
本书还配有电子教学参考资料包（包括电子教案、教学指南及习题答案），详见前言。未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。版权所有，侵权必究。图书在版编目（CIP）数据网页制作基础教程：Dreamweaver CS6版／黄洪杰，杨军主编.—北京：电子工业出版社，2013.8中等职业学校教学用书·计算机应用专业ISBN 978-7-121-19277-7Ⅰ.①网… Ⅱ.①黄… ②杨… Ⅲ.①网页制作工具－中等专业学校－教材 Ⅳ.①TP393.092中国版本图书馆CIP数据核字（2012）第304007号策划编辑：关雅莉责任编辑：徐 萍 特约编辑：沈德雨印 刷：北京丰源印刷厂装 订：三河市鹏成印业有限公司出版发行：电子工业出版社 北京市海淀区万寿路173信箱 邮编 100036开 本：787×1092 1/16 印张：16.25 字数：416千字 彩插：2印 次：2013年8月第1次印刷印 数：3000册 定价：29.80元
凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888。
质量投诉请发邮件至zlts@phei.com.cn，盗版侵权举报请发邮件至dbqq@phei.com.cn。
服务热线：（010）88258888。前 言
本教材适应中等职业教育课程改革的需要，特别是面向学分制的模块式课程和综合化课程的需要，并增强课程的灵活性、适用性和实践性。本教材的体系采用项目实例教学的模式，在每个项目实例学完后能掌握部分基本知识，学会一些操作技能，最后完成一个具体的项目；通过将几章内容形成一个项目，几个子项目组合成一个大项目，并以完成项目为手段，实现教学目标。
本教材既兼顾目前中等职业教育几种办学模式（中专、职高、技校）的特点和差异，又淡化了各类中等职业学校的界限。将培养目标统一定位在“具有综合职业能力，在生产、服务、技术和管理第一线工作的高素质劳动者和中、初级专门人才”上，淡化“技术员”和“操作工人”的界限。
本教材的知识和技能体系按照由浅入深、先易后难的原则，采用双重模块结构，增强了课程的灵活性和适用性。教材设计为5个部分，分别是网页制作前的准备、网页布局与规划、网页的编辑、网页的多媒体效果、网页的管理与上传。其中前4个模块为基础模块，要求开设该课程的学校必须完成这些模块的教学；网页的管理与上传为选修模块，可以根据地区和学校的实际情况酌情选用。
本课程的参考教学时数为72学时。全书共分为10章：第1章，网站的建立；第2章，编辑网页的内容；第3章，网页的布局；第4章，使用框架；第5章，使用超链接；第6章，CSS与行为；第7章，制作多媒体网页；第8章，使用表单；第9章，图像和动画的制作与优化；第10章，网站的管理与上传。其中第2、3、5、6、8章为本书的重点。
本教材由黄洪杰、杨军主编，王钰、周新、钱力等老师参加了本书的编写工作。
编者意在奉献给读者一本实用并具有特色的教材，但由于水平有限，难免有不妥之处，敬请广大师生和读者批评指正。
为方便教学，本书还配有电子教案、教学指南及习题答案（电子教学参考资料包） ，请有此需要的教师登录华信教育资源网（www.hxedu.com.cn）下载，或与电子工业出版社联系（E-mail：ve@phei.com.cn） ，我们将免费提供。第1章 网站的建立项目1 掌握网页概念和网页制作工具
我们正处在一个互联网的时代，计算机自不必说，手机、电视机、MP4播放器、PSP游戏机……无一例外都加入了网络功能。而因特网的最基本应用——网页浏览，也时时刻刻出现在我们面前。
在因特网上安一个家，成为许多人的梦想，而要实现这个梦想并不难，只需要一点点创意，一点点耐心，一点点美工知识，然后熟练掌握本书介绍的软件即可，一切就是这么简单。
本书介绍的软件是Adobe公司的Dreamweaver。这款软件连同Flash、Fireworks一起被称为“网络三剑客” ，一直是网页制作者最关注的产品。即使软件巨头微软公司也不得不承认自己旗下的产品FrontPage无法与之抗衡，从而宣布停止对FrontPage的开发和更新，也成就了Dreamweaver的一枝独秀。
在使用Dreamweaver之前，必须先搞清楚几个概念，这些概念在后面的学习中会经常用到，混淆了它们会给学习带来很大的麻烦。子项目1 网页、超链接与网站
当我们在因特网上浏览的时候，见到的每一个页面都可以称为网页，那什么是网页呢？简单地说，网页就是把文字、图形、图像、声音、动画、视频等多种媒体形式的信息，以及分布在因特网上的各种相关信息相互链接起来而构成的一种信息表达方式。
网页采用超文本来表达信息，这种形式直接改变了我们的阅读习惯。
我们平常阅读书籍，内容采用的都是一种线性结构，也就是说，只有看完第一章，才能看第二章，否则内容的衔接就会出现问题。而因特网采用了一种网状的结构，浏览者可以根据自己的喜好随时改变阅读的顺序。这种形式就是超文本，改变顺序的就是超链接。
实际上，在一些词典及大百科全书中，早已采用了这种链接式的信息表达方式。例如，在一些大百科全书中，对“虎”字的解释可能是这样的：
这里面的“第104页” 、 “第201页” 、 “第316页” 、 “第276页”分别用来标明“动物” 、 “猫科动物” 、 “哺乳动物” 、 “亚洲”等词的内容在大百科全书中的位置。读者在阅读时，只要到上述页码查阅相关信息，就可以全面了解“虎”这个字的含义了。也就是说，读者在读到这一页时，可以选择接着读下一页的内容，也可以读第104页、第201页、第276页或者第316页的内容，不同的读者会选择不同的阅读顺序，实际的阅读顺序因人而异，这样就更好地满足了阅读人的需求。
超链接这种非线性的联系方式，使得网页信息量呈爆炸状分散和衍生，让人们可以非常方便地查找到自己需要的信息。而正是千千万万个网页组成了色彩斑斓的因特网世界，成就了迅速占领媒体世界的传奇。
下面我们来看一下一个特殊的网页——主页。在浏览器中输入网址后，看到的第一个网页我们称其为“主页” 。主页就像一本书的目录，它的名字一般叫作index.htm或者index.asp。index是索引的意思，也就是说，主页是进入其他网页的索引页。在主页中能够找到打开其他网页的超链接。而通过单击主页上的超级链接，就可以打开这个网站中的其他网页。
一般情况下，要想直接打开一个网页，必须在浏览器地址栏输入该网页的详细地址，如图1.1.1所示，输入详细网址“http://www.weather.com.cn/news/1699985.shtml” ，才能看到关于台风的最新消息。图1.1.1 输入网页地址打开相应网页
只有主页例外，只需要输入网站的地址，主页便被打开了，而不必输入主页的文件名，如图1.1.2所示。所以主页名称不能随便更改。主页的重要性不言而喻，设计一个好的主页能够吸引浏览者的注意，加深浏览者的印象，提升网页的知名度。正是由于主页在所有网页中的特殊作用，因此也有人将个人网站称为个人主页。图1.1.2 打开网站主页时不必输入主页文件名
虽然网页是在因特网上浏览的主体，但它要完整、生动地展现出来还需要一些程序和文件的支持。例如，在网页中出现一段Flash动画，就需要相关的Flash播放程序的支持。而一些具备查询功能的网页，显然也离不开后台数据库的大量数据作为支撑。网页、支持网页各种效果的程序文件、数据文件，甚至说明文档的集合，就组成了网站。
现在，人们已经不满足于仅仅在因特网上浏览，而是通过各种手段，加入因特网的大家庭，向他人展示自己的爱好、才能等个性化的东西。其中，最明显的例子莫过于博客和微博的兴起。不论普通的网民，还是影视界、体育界、文化界的明星，都纷纷建立自己的博客和微博，表达自己对生活、对世界的看法。如图1.1.3所示就是演员姚晨的微博。图1.1.3 演员姚晨的微博
博客和微博虽然具有简单、可操作性强等优点，但往往受到服务商的功能限制，甚至不能随意更改文字和图片的位置。程式化的模板给人一种千篇一律的感觉。要想充分展示自己的个性魅力，发掘自己的能力，还是要使用专业的网页制作软件，建立一个属于自己的网站，按照自己的想法设计网页。
在本书中，网站的建设是通过制作网页来完成的，网页之间通过超链接连接起来，掌握这些技能就可以制作出一个简单的网站，进而加入到Internet的大家庭中。子项目2 HTML
1．什么是HTML
早期制作主页需要熟练掌握HTML，也就是Hyper Text Markup Language（超文本标识语言） 。它只需要在一个简单的文本编辑器（如记事本）中单独输入一些特定的代码，然后通过浏览器进行解释、执行，就能成为大家平常看到的样子。
HTML作为超文本标记语言，用来描述某个事物应该如何合理地显示在计算机屏幕上。也可以这么说，HTML就是以特殊的标记形式将网页存储为通常的文本文件。所以，我们能够用文本文件编辑软件打开或编辑HTML文件。而要把HTML文件以网页的形式显示出来，就必须借助于IE等浏览器软件。
图1.1.4所示是网站“hao123”的主页在浏览器中的样子，而图1.1.5所示是将该网页保存下来后在记事本中打开的样子，从右端的滚动条可以看出这个文件的内容有多大。
除了用于控制文本如何在浏览器内显示外，HTML还包括很多不同的组件。例如，我们可以随心所欲地在网页上添加对象、建立项目列表、创建表格，以及表单等。而它最大的功能就是：在世界范围内，通过超级链接，使当前网页与因特网上的其他网页连接起来。图1.1.4 网站“hao123”的主页在浏览器中的样子图1.1.5 网站“hao123”的主页在记事本中的样子
2．HTML的特点与缺点
初次打开HTML文件，会觉得非常复杂。但只要认真观察，就能很容易发现各语句之间的规律。例如，要在网页上实现“欢迎参观我的主页”这句话为黑体18号字并居中显示，相应的HTML语句为：
句首的
做一做
用记事本编辑一个文件，在IE浏览器中显示出来，如图1.1.6所示。图1.1.6 html文件显示效果
显而易见，用HTML来编辑网页存在以下几个缺点：（1）在输入语句时，常常需要反复输入一些相同的格式，浪费大量时间和精力。（2）在编辑器中无法准确地知道主页在浏览器中显示的样子，所以往往需要反复调试，非常烦琐。（3）无法对多个网页进行管理，无法确知网页中的链接是否正确。子项目3 静态网页与动态网页
网页可以分为静态网页和动态网页，区分它们的标准是网站所使用的服务技术，与网页上是否有动态效果无关。也就是说，静态网页上可以有一些动态的效果，动态网页上也可以只是有一些简单的文字和图片。
在浏览静态网页时，该网页是在网站所在的服务器上真实存在的。当我们在浏览器上输入网页的网址时，网站服务器就将该网页下载到浏览器中并打开，供浏览者浏览。如图1.1.7所示，在浏览器的地址栏可以看到扩展名为html的网页文件文件名。图1.1.7 静态网页
在浏览动态网页时，那个网页可能并不是真实存在的，或者不是完整存在的。而仅仅是一个模板，网页中的一些内容来自数据库等信息源，由相关的网页程序来控制那些信息显示在模板的什么位置。如图1.1.8所示，在浏览器的地址栏看不到具体的网页文件文件名。
支持动态网页的技术又分为客户端动态技术和服务器动态技术。客户端动态技术在显示网页内容时并不与网站服务器产生交互，而是将显示脚本程序嵌在网页文件中，服务器接收浏览器的请求发送网页后，脚本程序会自动在计算机上运行并将结果显示在浏览器中。例如，网页中常见的JavaScript、DHTML、Flash就是客户端动态技术。而服务器动态技术在显示网页内容的过程中需要服务器和客户端的共同配合，服务器会根据客户端发来的参数运行相关程序，产生页面，然后再把已经形成的网页发送到客户端的浏览器上。例如，常见的ASP网页和PHP网页使用的就是服务器动态技术。图1.1.8 动态网页
简单地说，使用客户端动态技术的网页内容是在浏览者的计算机中组合而成的，而使用服务器动态技术的网页内容是在服务器中组合而成的。采用服务器动态技术可以保证在不同的计算机上显示的网页一模一样，不会因为显示器尺寸等原因发生偏差。有时候，我们使用一台配置很高的计算机浏览一些网页时常常打不开，而打开其他网页速度却很快，往往是因为该网页采用了服务器动态技术，由于浏览者太多、负载过大等原因形成网络阻塞造成的。
目前网络中的网页大都采用动态网页技术，这极大地降低了网站的维护成本。但使用服务器动态技术往往需要后台数据库的支持，要涉及数据库操作等相关知识，对初学者提出了更高的要求。而无论哪一个使用动态技术的网站都是以静态技术为基础的，所以我们在本书的操作中主要以静态网页为主，网页中所涉及的动态技术也都采用客户端动态技术的形式。子项目4 网页制作工具
显然，制作网页并不容易，动态网页尤其复杂。于是人们希望有一种软件来改变这种状况，再也不必和难记、难懂的代码打交道，一切都得到简化，只需要像在Word中一样进行排版，由计算机来完成网页与代码之间的转换就行了。
网页制作软件可以实现网页制作者与HTML的分离，我们只需在编辑器中输入文本或图片，网页制作软件将帮助我们将这些文本或图片转换成相应的HTML代码。而且我们在编辑器中见到的效果，与在浏览器中见到的网页基本相同。
在众多网页制作软件中，FrontPage曾经以操作简单而获得初学者的青睐。图1.1.9所示的是一个正在使用FrontPage软件编辑的主页，在编辑器中一点也看不出HTML的影子，就像在Word中编辑文本一样。或者，可以这样说，只要你能够熟练地使用Word，那么FrontPage的使用方法你已经掌握一半了。图1.1.9 使用FrontPage编辑的主页
但FrontPage也具有体积庞大，冗余代码比较多，插入Flash动画等插件比较麻烦等缺点。微软公司在2006年放弃了对FrontPage系列软件的更新，FrontPage已经走进历史。而它的替代产品Microsoft Expression Web并没有得到广大网页制作者的支持，现在的网页制作软件是Dreamweaver一枝独秀。
Dreamweaver原本是Macromedia公司的产品，后被Adobe公司收购。该软件除了本身具有的强大功能以外，还得益于其他相应软件的有力支持。它和该公司的另外两个产品Flash（动画制作工具） 、Fireworks（图像编辑工具）一起被称为“网络三剑客” 。
和其他网页制作软件相比，Dreamweaver是一款更专业的网页制作工具，拥有更广泛的网页制作者群。它主要有以下优点：（1）不生成冗余代码。可视化的网页编辑器一般都会生成大量的冗余代码，FrontPage就有这个问题。而Dreamweaver在使用时完全不生成冗余代码，减小了网页文件的体积。（2）强大的动态页面支持。Dreamweaver能在使用者不懂JavaScript的情况下，给网页加入丰富的动态效果。Dreamweaver还可以精确地对层进行定位，生成动感十足的动态层效果。（3）优秀的网站管理功能。在已定义的本地站点中改变文件的名称、位置，Dreamweaver会自动更新相应的超级链接。（4）便于扩展。使用者可以给Dreamweaver安装各种插件，使其功能更强大。若有兴趣，还可以自己给Dreamweaver制作插件，使Dreamweaver更适应个人的需求。
Dreamweaver操作界面如图1.1.10所示。图1.1.10 Dreamweaver操作界面
本书即以Dreamweaver CS6为依托，详细介绍网页的制作方法。由于该软件采用了浮动面板等设计风格，与我们通常使用的Office工具栏略有不同，因此在学习的过程中要多加练习，认真体会，争取在短时间内能够灵活使用该软件，为以后的网页制作打好基础。项目2 使用Dreamweaver建立网站子项目1 Dreamweaver的操作环境
下面在Dreamweaver中建立一个空的网页，通过这一操作项目，了解Dreamweaver的操作环境。
以Windows 7为例，单击任务栏上的“开始”按钮，打开“开始”菜单；将鼠标指针指向“开始”菜单中的“所有程序” ，打开“程序”菜单；再单击子菜单中的“Adobe Dreamweaver CS6” ，如图1.2.1所示，启动Dreamweaver。
第一次启动Dreamweaver时，屏幕上会出现一个软件版本和版权信息的画面，如图1.2.2所示。然后显示的是Dreamweaver的工作窗口，如图1.2.3所示。图1.2.1 启动Dreamweaver图1.2.2 Dreamweaver的提示窗口图1.2.3 Dreamweaver的工作窗口
首先映入眼帘的是Dreamweaver的起始页—欢迎屏幕，这是为方便网页制作者而设计的。在这个起始页，可以非常方便地打开、新建或者从模板中创建网站和网页。如果不喜欢这个起始页，可以选中下方的“不再显示” ，将它关闭。这时会弹出一个警告对话框，提示用户如何再将这个欢迎屏幕打开，单击“确定”按钮可以将该对话框关闭，如图1.2.4所示。图1.2.4 警告对话框
在欢迎屏幕中间的“新建”区域单击“HTML” ，可以看到Dreamweaver建立了一个空白的网页。此时，其工作界面也清晰地展示在屏幕上。
如图1.2.5所示，Dreamweaver的操作环境由标题菜单栏、文档工具栏、文档编辑区、状态栏、属性面板、面板组等组成。图1.2.5 Dreamweaver的操作环境
1．标题菜单栏
如图1.2.6所示，标题菜单栏由标题栏和菜单栏组成，默认情况下两者会合并在一行，这样可以节省更大的空间给文档编辑区域。当窗口过窄时，标题栏和菜单栏会分开成两行显示。菜单栏部分共有10个菜单项，包含了Dreamweaver的所有操作命令，使用它们可以完成所有的操作。标题栏主要由工作区切换器、 “布局” 、 “Dreamweaver扩展”和“站点”管理器组成，使用它们可以更快捷地完成某种操作。图1.2.6 标题菜单栏
2．文档工具栏
如图1.2.7所示，文档工具栏上有几种视图之间快速切换的按钮，也包含文档标题、文件管理、浏览器验证等命令按钮。在该工具栏的上方是打开文档的文件名。图1.2.7 文档工具栏
3．文档编辑区
文档编辑区是用于创建和编辑网页文档的主要操作区域，该区域默认在“设计”视图下打开，初始状态下显示为空白，如果切换到“代码”视图（在文档工具栏单击“代码”按钮） ，会看到代码编辑状态，输入HTML语句也可以编辑网页的内容，如图1.2.8所示。图1.2.8 “代码”视图下的文档编辑区
4．状态栏
如图1.2.9所示，状态栏显示当前文档的相关信息，由标签选择器、选取工具、手形工具、缩放工具等组成，同时还显示当前窗口的大小、网页下载时间及文档编码等。图1.2.9 状态栏
5．属性面板
属性面板位于操作窗口的下端，当我们在Dreamweaver编辑区中选择文字、表格、图片等元素时，属性面板显示的内容也会发生相应的改变。这保证了在制作网页的过程中，无论使用哪个元素，都可以在固定的位置找到对该元素进行设置的面板。
在右侧的面板组中展开“插入”面板，单击 “常用”选项卡下的“表格”按钮，然后在弹出的对话框中单击确定按钮，随便插入一个表格。这时可以发现整个表格处于被选中的状态，而属性面板也变成如图1.2.10所示的样子。图1.2.10 插入表格时属性面板显示的内容
在表格的任意单元格中单击鼠标，属性面板又会变成如图1.2.11所示的样子。图1.2.11 光标在单元格中属性面板的显示内容
6．面板组
窗口的右边是面板组，如果觉得浮动面板组占的区域过大，网页的显示区域太小，可以单击浮动面板右上方的按钮，浮动面板会变成图标的形式，此时该按钮变成，如图1.2.12所示。单击可再次展开浮动面板组。图1.2.12 浮动面板组变成图标
浮动面板组的每一个面板都采用了展开与折叠功能。单击面板名称可以展开面板，如图1.2.13所示；单击可以将面板折叠起来，如图1.2.14所示。
试读结束[说明：试读内容隐藏了图片]