作者：文琦詹增荣主编
出版社：职业教育出版分社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
DreamweaverCS5网页设计与制作教程试读：
前言
在Internet飞速发展的今天，网站已逐步成为各行各业展示自我的平台。因此，网页制作技术的地位得到大大提升，而熟练掌握网页制作工具能使网页开发变得事半功倍。Dreamweaver是由Macromedia公司开发的一款所见即所得的网页编辑器，和二维动画设计软件Flash，专业网页图像设计软件Fireworks，并称为“网页三剑客”。因此，熟练掌握该软件的使用，既可以制作出较为精美的网页，也可以帮助学生更快地转向其他相关专业领域，如网站开发等。
网页设计与制作是一门操作性和实践性很强的课程，为了帮助教师比较生动地讲授这门课程，使学生能够熟练掌握网页制作的基础知识、实用技能和相关操作，我们结合多年实际的教学经验，共同编写了这本《Dreamweaver CS5网页设计与制作教程》教材。
本书以 Dreamweaver CS5 软件作为网页制作工具，介绍了设计网页的方法与技术，包括网站的规划及布局、XHTML与Dreamweaver代码视图、文本与图像的应用、超链接的应用、表格的应用、多媒体的应用、表单的应用、CSS的应用、层的应用、模板的使用及网站发布与管理等内容。本书主要采用以任务为驱动的方式，基本按照“任务目的——操作步骤——相关概念及操作”这一思路进行编排，通过一系列的“任务”诱发，让学生在实践中学习，在学习中实践，既培养学生制作网站的动手操作能力，又加强其对网页制作理论知识点的理解。编写中，选择的任务与知识点力求简明扼要、由浅入深、通俗易懂、目的明确、原理简洁、步骤清晰。
本书每章的任务也可以供学生上机操作时使用。本书配备了教材任务中相关的素材，任课教师可到人民邮电出版社教学服务与资源网（www.ptpedu.com.cn）免费下载使用。本书的参考学时为48学时，其中实践环节约为16学时。相关教学设计如下表所示。以任务驱动的教学目标续表
本书由电子科技大学中山学院的文琦、广州番禺职业技术学院的詹增荣、广州体育职业学院的程丹、漯河职业技术学院的黄华和江西生物科技职业学院的高俊共同编写。在本书的编写中，我们参阅了大量的国内外文献资料。在此，谨向资料的作者和提供者表示谢忱。
由于编者水平有限，书中难免存在错误和不妥之处，敬请广大读者批评指正。编者2013年7月第1章网站概述
互联网的发展，引发了前所未有的信息革命和产业革命。互联网已经成为经济发展的重要引擎、社会运行的重要基础设施和国际竞争的重要领域，深刻影响着世界经济、政治、文化的发展。于是，网络不再属于少数“精英”，而开始属于多数“菜鸟”。据中国互联网信息中心发布的数据，截止到2010年12月底，我国互联网网民总数达4.57亿人，其中手机网民总数为3.03亿人，而网站数量为191万，网页数量达到了600亿。无论是企业、公司，还是政府机构等都在积极地行动，建立网站展示自己。1.1 网站与网页的概述
网络最大的特点是资源共享。浏览者登录网站后，可轻松利用网络资源。浏览者只需要打开电脑，单击浏览器，输入网站网址，网站的信息就会呈现在眼前。接着，浏览者只要在相关信息处单击鼠标就可以获取有用信息，如查看新闻，天气或者娱乐休闲等。图1-1中的网站是国内访问量排名较前的网站。图1-1 热门网站首页
仍有很多网民，虽然他们的网龄很长，但可能根本不知道“网址”、“网站”等概念，也可能不了解网页与网站又有何区别等。比如，人们记住的是“百度”，能够在地址栏中输入“baidu”进入百度网站，但可能仍不明白“.com”、“www”的意思。1.1.1 网页的基本元素
网站的基本元素是网页，一个网站包含多个网页。构成网页的基本元素包括标题、网站LOGO、页眉、页脚、主体内容、功能区、导航区以及广告栏等。
1．标题
每个网页都会有标题，它是对网页主要内容的高度概括，一般出现在浏览器的标题栏，而非网页中，如图1-2所示。
2．网站LOGO
LOGO是网站的标志，它是网站对外宣传自身形象的工具，是一个网站最为吸引人、最容易被人记住的标志。它高度反映了网站的文化内涵和内容定位。网站LOGO的设计一般在网站制作初期进行，设计者从网站的长远发展角度出发，设计出最能代表网站，能长时间使用的LOGO。LOGO被放置在网站中醒目的位置，目的是要使其突出，容易被人识别与记忆，如图1-2所示。目前，大部分LOGO的设计是文字加字母的形式。
3．页眉
页眉一般出现在网页的最上端，但并是所有的网页都有页眉部分。页眉处于页面最明显的位置，所以可能比较容易引起浏览者的注意，很多网站都在页眉中设置宣传本网站的内容，如网站宗旨、网站LOGO等，也可以放置Banner广告条，如图1-3所示。图1-2 标题和LOGO图1-3 导航栏、页眉和页脚
4．主体内容
网页中最核心的元素为主体内容，主体内容可以包含网页所要传达的所有信息，也可以由下一级页面的标题等制作的超链接构成。主体内容借助超链接，能更好地概括几个页面所表达的内容，而且通过这种方式，能包含海量的信息。特别地，首页的主体内容更是能在一个页面中高度概括整个网站的内容，如图1-4所示。图1-4 页面的主体内容等元素
主体内容一般由文本、图片、超链接等元素构成。为了丰富网站，吸引浏览者的目光，网站的主体内容中还加入了视频、音频、Flash等多媒体元素，使得整个页面看上去更有动态效果。主体内容的内容分布则根据人们的阅读习惯（由上至下、由左至右）而安排。
5．页脚
网页的最底端部分被称为页脚，页脚部分通常用来介绍网站所有者的信息或者联络方式，如地址、联系方式、版权信息等。其中页脚的部分内容被设计成超链接，目的是引导浏览者进一步了解详细的内容。某些网站在页脚部分除上述内容外，还增加了导航内容，这种方式在首页内容过多的情况下很适用。好处是浏览者不必滑动滚动条，即可直接选择栏目，易用性强，如图 1-3所示。
6．功能区
功能区是网站主要功能的集中表现。一般位于网页的右上方或右侧。功能区包括：搜索、用户名注册、登录网站等内容。有些网站如http://123.sogou.com/，使用了IP定位功能，能够定位浏览者所在地，然后在功能区显示当地的天气、新闻等个性化信息。
7．导航栏
导航栏的目的是能够快速跳转到相应的页面，这对于浏览者浏览页面有很大的帮助。导航栏的位置不固定，可以位于页面左侧、右侧、顶部和底部。一般网站使用的导航栏都是单一的，但是也有一些网站为了使网页更便于浏览者操作，增加可访问性，往往会采用多导航技术，如当当网站采用了左侧导航与顶部导航相结合的方式。但是无论采用几个导航栏，同一网站中的每个页面的导航栏位置都大致相同，从而保持网站风格的一致性。图1-3的页面在顶部设计了一个导航栏。
8．广告区
广告区是网站实现盈利或自我展示的区域，一般位于网页的页眉、右侧和底部，如图1-4所示。广告区内容以文本、图像、Flash动画为主，通过吸引浏览者单击链接的方式达到广告效果。1.1.2 网页布局
当浏览者单击鼠标在网海中遨游，一张张精彩的网页会呈现在浏览者的眼前。那么，什么因素会影响网页的精彩？色彩的搭配、文字的变化、图片的处理等，这些当然都是不可忽略的因素，但除了这些之外，还有一个非常重要的因素——网页的布局。将网页的元素安排在网页适当的位置，就形成了网页的整体布局。表1-1列举了常见的几种网页布局。表1-1 常见的网页布局
当然，进行网页布局时不能千篇一律，布局设计主要是根据网站内容和建站目的等基本要素而决定的。布局的过程要做到不是仅仅简单地将各种元素堆积在网页，而是为网页建立秩序。在进行网页布局时，可以先在纸上形成版式草图，如图1-5所示，然后选择最佳方案作为网站布局，继而对该方案进行细化，形成网站最终的布局图，如图1-6所示。设计者根据最终的布局图可以更快捷地插入页面元素，设计页面效果。图1-5 页面布局构思草图图1-6 细化后的布局方案图1.1.3 色彩搭配
网站的整体视觉效果在网站布局方案确定之后就形成了雏形，因为网站的信息已经做了较为合理的安排。接下来要考虑如何吸引浏览者对网站的注意，而让浏览者能花更多的时间停留在该网站上，这就涉及了影响网站的整体视觉效果的另一个因素——网页的色彩搭配。网页的色彩搭配决定了浏览者对该网站的第一印象，因此，设计网页需要在色彩的使用上深思熟虑，不仅要与网站风格匹配，而且还要突出网站的个性。如图 1-7 中的页面虽然色彩活跃，但搭配恰当。图1-7 网页欣赏
对色彩进行搭配前，需要了解以下关于色彩的知识。
① 色彩。
红、黄、蓝三种色彩可以调和其他的色彩，因此把它们称为三原色。网页中的色彩表达即是用这三种颜色的数值表示，例如：红色是 RGB(255,0,0)，十六进制的表示方法为(FF0000)。我们经常看到的“bgColor=#FF0000”就是指背景色为红色。
颜色分非彩色和彩色两类。非彩色是指黑，白，灰三种系统色，彩色是指除了非彩色以外的所有色彩。根据专业的研究机构研究表明：彩色的记忆效果是黑白的 3.5 倍。也就是说，在一般情况下，彩色页面与完全黑白页面比较，彩色页面更加能吸引人。
任何色彩都有饱和度和透明度的属性，属性的变化会产生不同的色相，所以至少可以制作几百万种色彩。
② 色调。暖色调——可使主页呈现温馨、和煦、热情的氛围。该色调代表：红色、橙色、黄色等色彩的搭配。冷色调——可使主页呈现宁静、清凉、高雅的氛围。该色调代表：青色、绿色、紫色等色彩的搭配。对比色调——把色调完全相反的色彩搭配在一空间里。如：红与绿、橙与蓝可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。
③ 色彩的心理感觉。
不同的颜色会给浏览者带来不同的心理感受，每种色彩在饱和度、透明度上略微变化就会产生不同的感觉。表1-2列举了一些常用颜色给人带来的感觉。表1-2 色彩的含义
网页采用的色彩除了要考虑颜色给人带来的感观效果之外，还要考虑网页中的色彩搭配。色彩搭配可从以下几个方面考虑。色彩的鲜明性。网页的色彩要鲜艳，这样更容易引人注目。色彩的独特性。要有与众不同的色彩，使得浏览者对网站的印象深刻。色彩的合适性。色彩与网站所表达的内容相匹配。色彩的联想性。不同色彩可能会有不同的联想，选择的色彩要和网页的内涵有一定的关联。
总之，网页应用色彩应遵循的原则是“总体协调，局部对比”。特别地，网页颜色尽量控制在三种色彩以内，不需要把所有的颜色都用到；同时，背景颜色和网页文字的颜色对比尽量要大，但也不可用花纹繁复的图案作背景，这样不便突出文字内容。网页色彩处理得好的话可以使页面锦上添花，达到事半功倍的效果。1.2 任务1——认识网页与网站1.2.1 任务与目的
1．任务
打开任何一网站，如www.sina.com.cn，观察整个网站的组成元素及网页的布局等。
2．目的
了解网站所涉及的基本知识，如网页与网站的关系、IP地址等。1.2.2 相关概念介绍
1．网页
网页（Web Page）是网站的某一个页面。它是一个纯文本文件，以超文本和超媒体为技术，采用 HTML、CSS、XML 等语言来描述组成页面的各种元素，通过浏览器向浏览者呈现网页的各种内容。网页存放在Internet中的某台计算机中，通常的扩展名有.htm、.html、.jsp、.asp、.aspx等。
2．网站
网站（WebSite）是指在互联网上，根据一定规则所组织的一组具有共同内容的网页文件集合，访问某个网站（或站点）实际上访问的是提供这种服务的一台或多台计算机。网站的网页文件以文件夹的形式存储在服务器中，如图1-8为某个网站对应的文件夹，文件夹中包括网站所需的各种文件。图1-8 网站文件夹
3．HTML与XHTML
HTML（HyperText Mark-up Language）也称超文本标记语言，它是构成网页文档的主要语言。通过HTML标签，可以将文字、图形、动画、声音、表格、链接等组织在网页里。单击浏览器的“查看”菜单的“查看源文件”命令可查看该页面的HTML代码，如图1-9所示，左边窗口是页面的最终效果，右边是利用记事本显示的页面对应的HTML代码。图1-9 页面及相应的HTML代码
XHTML（Extensible HyperText Markup Language）也称为可扩展超文本标记语言。HTML是一种基本的Web网页设计语言，但由于它的可扩展性和灵活性差，可能无法适应未来网络应用的更多需求，而XHTML是在HTML的基础上进行优化和改进的语言。XHTML 相对于HTML更严谨，它是基于XML的标记语言，同时它在实现HTML向XML过渡时期中扮演着重要的角色。
4．浏览器的作用
浏览器是Web服务的客户端程序，常用的浏览器有IE、Firefox、Opera、360浏览器、腾讯TT等。浏览器主要通过HTTP协议与网页服务器交互并获取网页，浏览器负责解释网页中HTML代码等，然后将内容显示给浏览者。
5．IP、域名及DNS、URLIP
尽管互联网上连接了无数的服务器和计算机，但每一个主机都有唯一的地址，作为该主机在互联网上的唯一标志，通常称之为IP地址。
IP地址通常用4个十进制数表示，每个数字的大小范围在0～255之间，数字之间用“.”分隔，如新浪服务器其中的一个IP地址为66.77.9.79。域名及DNS
域名（Domain）的作用是为了摆脱 IP 数字的单调和难记的缺点，通过形象的文字来代表该主机，这些形象的文字就是主机的域名。域名用“.”将各级域名分隔，如百度的域名www.baidu.com，其中com是其顶级域名，baidu是其二级域名，www是其三级域名。
DNS（Domain Name System）也称为域名系统。它是一个命名系统，包括按命名规则产生的域名管理和域名与IP地址的对应方法。在Internet上几乎每个子域都存在域名服务器，该服务器会包含该子域的全体域名和IP信息，通过DNS系统，能将该子域中所定义的域名与所包含的IP地址进行有效的转换。URL
Internet上所有的资源都有一个唯一的URL地址，一般将URL地址称为网址。URL的完整格式如下：协议://主机名（或IP地址）：端口号/路径名/文件名，如http://tieba.baidu.com/i/198484445。
协议：指定在Internet上使用的传输协议，最常用的是HTTP协议，它也是目前WWW中应用最广的协议。
主机名：是指存放资源的服务器的域名或 IP 地址。特别地，某些服务器主机需要用户名与密码才能访问。
端口号：它是一个整数，如果端口省略表示采用默认端口，否则需要增加端口号。所有的传输协议都有默认的端口号，如HTTP的默认端口为80。
路径名：由零个或多个“/”符号隔开的字符串，一般用来表示主机上的文件地址。
文件名：表示访问的文件名称。
6．网站分类
目前，常见的网页有静态网页和动态网页两种。静态网页指基本上全部使用HTML语言制作的网页，通常以.htm、.html、.shtml、.xml等形式为后缀。这类页面的内容是固定不变的，页面的交互性差，功能受到很大的限制，而且后期维护比较困难。动态网页采用动态网页技术与HTML进行有机的结合，使静态的HTML网页变成动态。动态网页具有更好的交互性等特点，文件的扩展名通常为.aspx、.jsp、.php等。
而网站根据用途的不同，又可以分为以下几种：门户网站
这类网站是一种综合性网站，涉及的内容包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容，具有论坛、搜索等功能。国内较著名的门户网站有搜狐（www.sohu.com）、网易（www.163.com）等。个人网站
个人网站具有较强个性化特征，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的，如博客等。专业网站
这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（www.rongshuxia.com）即是一个专业文学网站。职能网站
职能网站具有专门的功能，如政府职能网站等。电子商务网站也属于这类网站，如阿里巴巴（china.alibaba.com）、当当网（www.dangdang.com）等。1.3 任务2——站点的建立1.3.1 任务与目的
1．任务
打开网页编辑工具Dreamweaver CS5；创建本地站点，通过“站点向导”进行站点定义，并向站点添加文件和文件夹；关闭Dreamweaver CS5。
2．目的
了解网页编辑工具Dreamweaver CS5，掌握其工作界面；掌握站点的创建和管理方法。1.3.2 操作步骤
要维护一个网站，首先需要在本地磁盘上制作修改网站的文件，然后把这个文件上传到互联网的Web服务器上，从而实现网站文件的更新。
1．Dreamweaver CS5的启动
Dreamweaver CS5安装成功后，启动Dreamweaver CS5（后简称DW）主要的方法有两种：（1）从“程序”项启动。单击任务栏中的“开始”按钮，选择“程序”菜单→Adobe Dreamweaver CS5项，启动DW。（2）通过桌面快捷方式启动。用户可以在桌面上为DW建立快捷图标，双击快捷图标，也会启动DW。
2．设置站点
设置 Dreamweaver 站点是一种组织所有与某Web 站点关联的文档的方法。网站设计者可在“站点设置”对话框中为 Dreamweaver 站点指定设置。
站点既可以是本地的站点，也可以是远程的站点。
定义一个本地站点。
新建本地站点，主要有3种方式。
① 启动DW，在启动窗口中单击菜单栏的“站点”菜单，选择“新建站点”命令，如图1-10所示。
② 单击“站点”菜单中的“管理站点”，单击“新建”按钮，如图1-11所示。
③ 单击“欢迎”屏幕中的“新建”→“Dreamweaver站点”命令，如图1-10所示。
试读结束[说明：试读内容隐藏了图片]