11229-网页设计实用教程-教学指南.doc

职业教育岗位技能培训“双证书”课程系列教材工业和信息化部IT职业技术培训教材网页设计实用教程教学指南程有娥 杨普照 主编付建玲 马恩明 副主编Publishing House of Electronics Industry北京 BEIJING前 言为了配合网页设计实用教程课程的教学，体现教材的编写特色，更好地为读者服务，编写了此教学资料。教学资料内容有三个部分：第一部分是教学指南，包括了课程性质与任务、课程内容、教学建议、教学时间分配。第二部分是电子教案，采用PowerPoint课件形式。教师可以根据不同的教学要求按需选取和重新组合。第三部分是习题答案，给出了每道习题的解答过程。限于编著者水平，教学资料中有错误或不妥之处，请读者给予批评指正。编 者2010年7月网络设计实用教程教学指南一、课程的性质与任务本教程是“职业教育岗位技能培训双证书课程体系”中“网页设计（WD）”课程的指定教材。该书以目前本应用最为广泛的网页制作软的使用方法为主线，采用任务和案例相结合的编写方式，以简明通俗的语言和生动真实的案例详细介绍了Dreamweaver、Fireworks、Flash以及Photoshop这几个在网页制作中经常用到的软件，并重点讲解各软件在网页制作中的实际操作。通过本书的学习能让读者快速地应用以上软件做好网页设计的工作，并达到各个软件综合应用的目的，而不是花费大量的时间去孤立的学习菜单和命令，从而提高工作效率，提高其网页制作的技能。二、教学提要、课程内容第1章 网页设计的准备知识本章教学提要知识要点：Internet中的基本概念；图形图像基本知识；网页的布局策划；网页色彩搭配。本章教学内容设计浏览者欣赏的网页不仅要学习相关软件的功能和技巧，更要对网页的版块规划、色彩的搭配等具有一个感性和理性的认识，有了这些设计上的理念才能更好地指导技术的运用。1.1 Internet中的基本概念Internet是迄今为止人类所拥有的信息资源最为丰富的信息库，在Internet中，想寻找所需要的信息，利用Internet中的各种分类目录和搜索工具，就可以轻松地获得；Internet也是人类迄今为止最为价廉实用的通讯工具，在Internet中，不仅可以利用电子邮件（E-mail）在瞬间将我们的信件发送到世界的各个地区，更能高质量地传送图片、声音、动画、影象等信息。随着国际互联网Internet的商业化，企业纷纷在Internet上建立自己的网站用以降低广告宣传、研究开发、市场营销、售后服务等方面的成本费用，同时显示企业形象、增强自身的竞争力，在激烈的国际市场竞争中立于不败之地。掌握TCP/IP协议的含义以及它们在数据传输过程中的主要功能。TCP/IP协议在数据传输过程中的主要功能有三个：（1）由TCP协议把需要传送的数据分成若干个数据包，并给每个数据包写上顺序号，以便接收端把数据还原成原来的格式。（2）IP协议给每个数据包写上发送主机和接收主机的地址，IP协议还具有利用路由算法进行路由选择的功能。（3）TCP还具有检查和处理数据包发送错误的功能，必要时还可以请求发送端重发。简言之，IP协议负责数据的传输，而TCP协议负责数据的可靠传输。掌握IP地址的概念。在Internet上有千百万台主机，为了区分这些主机，人们给每台主机都分配了一个专门的地址，称为IP地址。通过IP地址就可以访问到每一台主机。IP地址由4部分数字组成，每部分数字对应于8位二进制数字，各部分之间用小数点分开。如某一台主机的IP地址为：8，Internet IP地址由NIC（Internet Network Information Center）统一负责全球地址的规划、管理；同时由Inter NIC、APNIC、RIPE三大网络信息中心具体负责美国及其它地区的IP地址分配。掌握域名的概念。Internet的域名用一组简短的英文表达，入网的每台主机都具有类似下列结构的域名：主机名.单位名.机构名.国家名，如 指中央电视台；指3721网络公司。加入Internet的各级网络依照域名管理系统的命名规则对本网内的主机命名和分配网内主机号，并负责完成通信时域名到IP地址的转换。对使用者来说，一般不需要使用IP地址，而直接使用域名，Internet上的服务系统自动地转为IP类型的地址。掌握URL的概念。URL是WWW网页的地址，它从左到右由资源类型、主机域名和资源文件名组成。掌握HTML的概念。HTML是一种制作Web网页的标准语言，由于HTML非常易于掌握，因此成为WWW上的重要基础，HTML语言除了能够处理文字和图片，还能把文档中的文字和图像与其他文档链接起来，做成“超链接”，当用户单击超链接时，就可以通过该超链接的URL把与其关联的文档查找并显示出来。HTML对文件显示的具体格式进行了详细的规定和描述，例如，文档的标题、段落如何显示，在文档中如何嵌入图像、声音、动画，以及如何与其他文档进行链接等。掌握DHTML的概念。DHTML是通过各种技术的综合发展而得以实现的概念，这些技术包括Java Script , VBScript, Document Object Model (文件目标模块)，Layers和Cascading Style Sheets ( CSS样式表)等。1.2 图形图像基本知识计算机中的图像主要以两种方式表示：一种是位图图像，一种是矢量图像，习惯上将位图称为图象，矢量图称为图形。掌握位图图像的概念。一般日常见到的图片都是位图图像（Bitmap），位图图像是对每一个栅格内不同颜色的点进行描述，这些点称为像素，整个位图就是由像素矩阵构成。位图适合于表现含有大量细节（如明暗变化、场景复杂和多种颜色等）的画面，并可直接、快速地在屏幕上显示出来。位图占用存储空间较大，一般需要进行数据压缩。位图图形的一个不利条件是它们在缩放时清晰度降低并且出现锯齿，如图1-1所示。常见的位图格式有BMP、GIF、JPG、TGAT和TIFF等。掌握矢量图形的概念。矢量图形是用一组成指令集合来描述图形的内容，这些指令用来描述构成该图形的所有直线、圆、圆弧、矩形、曲线等的位置、维数和形状。在屏幕上显示矢量图形要有专门软件将描述图形的指令转换成在屏幕上显示的形状和颜色。这种程序可以产生和操作矢量图形的各个成分。使用矢量图形的一个很大的优点就是可以非常方便地对矢量图形进行移动、缩放、旋转和扭曲等变换，但并不失真。但是，用矢量图形格式表示复杂图像如人物或风景照片制作上就很困难，因此矢量图形主要用于插图、文字和可以自由缩放的徽标等图形。一般常见的矢量图形格式有ai、.cdr、.fh.、swf等。熟悉在网页制作中常用的图像格式JPEG、GIF、TIFF、BMP、PSD、PNG等。1.3 网页布局策划掌握网页的基本内容的布局策划。一般网页的基本内容包括：页面标题、网站标志、页眉、导航栏、主内容区、页脚。（1）网页标题多用来提示该页的主要内容，会出现在浏览器的标题栏中，这样可以引用访问者浏览网站。（2）一个成功的网站都有自己独特的标志，如同一个商品的商标，网站的标志应集中体现该网站的特色、内容以及其内在寓意，是对自身形象一个重要的宣传。标志一般放在页面的显要位置，如页眉中。（3）页眉指的是页面的上端，此位置的吸引注意力特别高，常用来放置网站的宗旨、宣传口号、广告等。（4）导航栏是网页设计中的重要部分，导航栏的位置对网站页面布局起着决定性的作用，导航栏的位置通常在页面的上部或左部，如果页面较长，也可在底部。在各个页面中，导航栏的位置应该是比较固定的。（5）主内容区一般是二级链接内容的标题或内容提要，布局是按网站内容的分类进行版块的划分，根据浏览者的注意力通常按从左到右、从上向下的顺序分布，通常将较重要的内容安排在页面的左上位置，次要的内容放在右下方。（6）页脚是页面的底部，通常用来标注网站的名称、地址、联系方式、版权等，也有将网站的导航栏放在此，以增强网站浏览的方便性。掌握页面的布局类型。页面的布局类型主要有下面几种：（1）“同”字型 。也可以称为“国”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。 （2）“匡”字型 。也称骨拐角型，这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。 （3）“回”字型 。是以“同”或“匡”定型布局为基础，在其页面的底部或右部添加了一个内容区块，如广告或链接等，使之成为一个较封闭的区间 。（4）“川”字型 。将页面大致分为三列，主要内容分布在3列中，可以极大地增加网站内容在首页面的显示程序，信息量大，给人畅快的感觉 。 （5）左右对称型 。这是一种左右分割页面的结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。单击左面的链接，便会在右边显示相应的内容，有一些企业网站也喜欢采用。（6）上下型 。与左右对称类似，区别仅仅在于是一种上下分为两页的框架 。（7）封面型 。这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示 。（8）自由型 。是一种自由格式型的网页布局结构，它的布局风格较为随意，完成后的页面就如同一张精美的图片或一张极具创意的广告，这种结构多用于一些较为时尚的网站，如时装、动漫等 。1.4 网页色彩搭配网页的色彩是一个网站风格的关键内容，网页的背景、文字、图标、边框、超链接等用什么样的颜色才能协调一致，这是一个很让设计者头痛的事。有些网页之所以让人感觉赏心悦目、整洁典雅，就是因为色彩运用得当。掌握色彩的三个基本属性。任何色彩都有三个属性，分别是：（1）色相：也叫色泽，是颜色的基本特征，反映颜色的基本面貌。（2）饱和度：也叫纯度，指色彩的鲜艳程度；原色是纯度最高的色彩。颜色混合的次数越多，纯度越低，反之，纯度则高。原色中混入补色，纯度会立即降低、变灰。（3）亮度：也叫明度，指色彩的亮度或明度。颜色有深浅、明暗的变化。掌握色彩的象征意义。无论有彩色的色还是非彩色，都有自己的表情特征。每一种色相，当它的纯度和明度发生变化，或者处于不同的颜色搭配关系时，颜色的表情也就随之变化了。（1）红色是强有力的色彩，是热烈、冲动的色彩，代表热情、喜悦、庆典。（2）橙色是十分活泼的光辉色彩，是暖色系中最温暖的色彩，它使我们联想到金色的秋天，丰硕的果实，因此是一种富足的、快乐而幸福的色彩。（3）黄色是亮度最高的色，在高明度下能够保持很强的纯度。黄色的灿烂、辉煌，有着太阳般的光辉，因此象征着照亮黑暗的智慧之光；黄色有着金色的光芒，因此又象征着财富和权利，它是骄傲的色彩。（4）绿色代表植物、生命、生机，显得和谐、宁静、健康，给人安全、舒适的感觉。（5）蓝色是博大的色彩，天空和大海着最辽阔的景色都呈蔚蓝色，无论深蓝色还是淡蓝色，都会使我们联想到无垠的宇宙或流动的大气，因此，蓝色也是永恒的象征。（6）紫色代表浪漫、爱情，由于具有强烈的女性化性格，在商业设计时，紫色也受到了相当的限制，除了和女性有前的商品和形象，其他类的设计不常用它为主色。（7）黑色具有高贵、稳重、科技的象征，许多科技产品用色，如电视、汽车、摄影机、音响、仪表等大多采用黑色。（8）白色代表纯洁、简单，具有高级、科技的象征，通常需要和其他色彩搭配使用，在用色时都会掺一些其他色彩，如象牙白、乳白、苹果白，在生活用品和服饰上，白色是永远流行的颜色，可以和任何色彩作搭配。（9）灰色代表阴暗、消极，具有平凡、温和、中立的感觉，属于中间色，男女皆能接受，在使用灰色时，大多利用不同的层次变化组合或配其它色彩，才不会过于素淡、沉闷、呆板。掌握色彩的性质。色彩的性质主要有下面一些：（1）色彩的鲜明性 ：网页的色彩要鲜艳，容易引人注目。 （2）色彩的独特性：要有与众不同的色彩，使得大家对你的印象强烈。（3）色彩的合适性 ：色彩和你表达的内容气氛相适合 。（4）色彩的联想性 ：不同色彩会产生不同的联想，蓝色想到天空，红色想到喜事，黑色想到黑夜等，选择色彩要和你网页的内涵相关联 。掌握网页色彩的整体规划。要规划网页的整体色彩，需要从网页的主题、性质、浏览用户等多方面来考虑。首先确定主题以后，要了解哪些色彩适合用哪类网站。如首先在确定主页的题材后，要了解哪些颜色适合哪些站点。比如一个影视的站点，基本上适用任何色彩，但用黑色或其他较深的色彩为主比较好，因为人们看电视、电影一般在黑暗的环境下观看的，网页上使用深色较符合人们的习惯。为了你的页面更美观，更舒适，为了增强你的页面的可阅读性，必须合理，恰当地运用与搭配页面各要素间的色彩。（1）背景与文字。如果一个网站用了背景颜色，必须要考虑到背景颜色的用色，与前景文字的搭配等问题。一般的网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色，让人一目了然。（2）网站标志和页眉。网站标志和页眉是宣传网站最重要的部分之一，所以这两个部分一定要在页面上最突出。怎3导航条、小标题（3）导航条、小标题是网站的指路灯。浏览者要在网页间跳转，要了解网站的结构，网站的内容，都必须通过导航或者页面中的一些小标题。所以我们可以使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站清晰明了、层次分明。（4）链接颜色设置。现代人的生活节奏相当快，不可能浪费太多的时间寻找你网站的链接上。设置了独特的链接颜色，让人感觉他的独特性，自然而然好奇心趋使他移动鼠标，点击鼠标。第2章 Dreamweaver网页设计基础本章教学提要知识要点：熟悉Dreamweaver的工作环境；构建本地站点；网页文本编辑；使用CSS样式格式化文本；定制Dreamweaver。本章教学内容Dreamweaver是一款设计开发网页和网站应用的专业HTML编辑软件。它的所见即所得的优点使网站开发变的轻松快捷。对设计师来说，在代码视图中不但可以轻松自如地编写网页代码，而且还能方便地对代码进行检查；对新手来说，即使对网页代码一窍不通，借助Dreamweaver 提供的各种菜单命令和工具也能设计出精彩绝伦的网页。文本是网页中必不可少的内容，本章实例嵖岈山景区介绍网页就是一个最简单的网页，他以纯文本的形式对嵖岈山景区进行了介绍。2.1 Dreamweaver的工作环境Dreamweaver的工作环境主要包括：菜单栏、工具栏、文档窗口、功能面板等。菜单栏在各种应用软件里功能最多，使用最频繁，它包含了一些能够实现一定功能的菜单命令。Dreamweaver包含了文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助10个分类菜单，单击这些菜单，可以打开其子菜单。Dreamweaver的菜单命令非常丰富，几乎涵盖了所有的功能操作。Dreamweaver的工具栏目主要包括“插入”工具栏、“文档”工具栏、“标准”工具栏3种。Dreamweaver的功能面板位于文档窗口的边缘，它主要结合菜单命令来执行Dreamweaver的网页设计操作。常见的功能面板有“属性”面板、“设计”面板、“文件”面板等。2.2 构建本地站点掌握创建站点的方法。在创建一个站点之前，首先要做的是对整个站点进行整体规划。否则会给后期维护带来麻烦或者整个站点的风格不统一等问题 。首先确定将要创建站点文件夹的保存位置，并创建文件夹。在Dreamweaver中选择菜单“站点”|“管理站点”命令，打开“管理站点”对话框，单击“新建”按钮，在下拉菜单中选择“站点”命令，然后在打开的对话框中对站点进行设置。掌握对站点进行管理和维护的方法。选择菜单“站点”|“管理站点”命令，在打开的“管理站点”对话框中包含“新建”、“编辑”、“复制”、“删除”、“导出”，“导入”等按钮，使用这些按钮可以方便的添加、删除、修改站点，实现对一个站点甚至多个站点的管理。掌握站点中文件的操作方法，主要包括新建文件、修改文件名、移动文件和删除文件。2.3 网页文本编辑掌握文本属性设置的方法。首先选中要设置的文本，然后可以在“属性”面板中对文本的字体、字体大小、文本颜色以及文本的对齐方式进行设置。掌握页面属性的设置方法。选择菜单“修改”|“页面属性”命令打开“页面属性”对话框，在对话框中可以对页面的外观、链接、标题、跟踪图像以及标题/编码进行设置。2.4 CSS样式CSS（Cascading Style Sheet）层叠样式表被广泛的应用到格式化网页文本、图片、表单等网页组成元素中。通过修改CSS样式表就可以改变一个甚至多个网页文件的样式，大大提高了格式化页面元素的效率。按照应用在文档中的范围，可把CSS样式分为“自定义CSS样式”、“HTML标签样式”和“CSS选择器样式”3种。其中“自定义CSS样式”可以应用到文档中的任何范围和任何文本段中。按照CSS样式定义相对于文档的位置，可分为“内部CSS样式表”、“内联样式”和“外部CSS样式表”。掌握创建CSS样式的方法。在“CSS样式” 面板中单击新建按钮，或者右击面板，在弹出的快捷菜单中选择“新建”命令，打开“新建CSS样式”对话框，选择好“选择器类型”并输入选择器名称后，单击“确定”按钮，打开“CSS规则定义”对话框，在对话框中用户可以对CSS样式进行设置。掌握样式表链接和导入的方法。在CSS样式面板中右击鼠标，选择菜单中的“附加样式表”命令，此时将出现“链接外部样式表”对话框，单击“链接外部样式表”对话框中的“浏览”按钮，出现“选择样式表文件”对话框，在该对话框中选择保存过的CSS样式表文件，单击“确定”按钮，样式表文件的路径就会加入到“链接外部样式表文件”对话框的“文件/URL”文本框中 。用户可以选择链接或导入单选按钮，然后单击确定按钮。2.5 定制Dreamweaver为了使用Dreamweaver更加得心应手，可以通过修改“首选参数”定制Dreamweaver。选择“编辑菜单”|“首选参数”命令，打开“首选参数”对话框，该对话框由分类和属性两部分组成，利用该对话框用户可以对Dreamweaver进行定制。第3章 在网页中添加图像与多媒体本章教学提要知识要点：插入图像以及设置图像属性；添加Flash和视频文件；添加音乐；本章教学内容现如今的网页设计中，图像与多媒体占了相当大的比重，页面的框架、背景、产品的广告等等都充斥着图像与多媒体。有了它们的存在，使网页的表现力更加丰富，使人们在浏览网页内容的同时又得到了美的熏陶。在这一章里将介绍如何将图像和多媒体插入到网页中，并对其进行编辑加工。图像在网页中起着至关重要的作用，它能够美化页面、传递信息，甚至还可以娱乐大众。本章实例世界杯网站就是在网页中插入图片的效果。3.1 插入图像由于图像文件由于比文本大很多，为了提高页面的下载速度，不提倡页面内使用过多的图像。如果图像较大的话，一般要使用Fireworks或者Photoshop等其他图像编辑软件将其分割，并将其分割后的小块图像分别插入到网页中，以增加图像的显示速度。目前，在网页设计中使用的图片格式有3种，分别是JPG格式、GIF格式、PNG格式。掌握插入图像的方法。将光标定位到要插入图像的位置，选择菜单中的“插入”|“图像”命令，或者单击“常用”插入栏中“图像”按钮旁边的小三角，在弹出的菜单中选择“图像”命令，打开“选择图像源文件”对话框，在对话框中选择要插入的图像，单击“确定”按钮即可。掌握图像属性的设置方法。Dreamweaver的“属性”面板提供了对这些属性的设置，单击图像，便可以显示出图像“属性”面板，在面板中用户可以对图像的名称 、大小 、源文件（文件路径和文件名）、替换文本 、边距 、对齐 、亮度 、锐化等属性进行设置。 3.2 创建翻转图像翻转图像就是当鼠标划过图像时，显示另外的一张图像。灵活运用该效果甚至可以产生简单的动画效果。在网页中通常在导航栏中或按钮中使用此效果。制作翻转图像之前需要先准备两张图像，第一张图像为正常显示状态，第二张图像为鼠标划过时显示的状态，为了更好的应用效果，两张图像的大小应该相同。选择菜单“插入”|“图像对象”|“鼠标经过图像”命令，或单击“常用”插入栏中“图像”按钮旁边的小三角，在弹出的菜单中选择“鼠标经过图像”命令打开“插入鼠标经过图像”对话框，在对话框中选择“原始图像”文件和“鼠标经过图像”文件，单击“确定”按钮。3.3 插入Flash动画因为Flash文件体积不大，画面效果丰富具有极强的表现力和感染力、音质较好、在网络中的传输速度快，因此使其成为了网络中的主流媒体。Flash的文件格式为.swf，可以嵌入网页中的Flash类型有Flash影片、Flash按钮、Flash文本。要在文档中插入Flash影片，首先将制作好的Flash影片文件复制到本地站点内，或者在插入的过程中Dreamweaver提示将此文件复制到本地站点中单击“确定”按钮亦可。将光标定位在插入Flash 动画的位置，单击“常用”插入栏中“媒体”按钮旁边的小三角，在弹出的菜单中选择“SWF”命令，或者选择菜单中的“插入”|“媒体”|“SWF”命令，打开“选择文件”对话框，在对话框中选择需要插入的Flash动画文件，单击“确定”按钮。 3.4 给网站添加背景音乐单独的声音文件嵌入网页中，主要有两种用途，一种是作为文件供用户下载使用，如.mp3格式的音乐，在大多音乐站点中都提供此种格式音乐的下载，要将此种方式的声音文件嵌入网页中，只需将一个链接指向该声音文件即可；另外一种是将声音文件作为页面的背景音乐，如将一个.mid文件嵌入到当前页面中，作为背景音乐，在Dreamweaver的代码视图中添加如下代码：其中，src是声音文件的路径，loop是声音文件循环播放次数，参数值为-1表示无限循环。3.5 插入视频电影用网络视频点播具有极强的吸引力，通过网络可以在线看免费的大片、还可以通过网络实现远程的教学等，这些都可以通过在网页文件中嵌入视频电影来实现。由于目前的网络带宽问题以及视频文件相对较大，致使视频电影在网络中的传输遇到了一定的困难，但通过视频文件进行压缩，和增加网络带宽解决了一定的问题。网页中视频文件的常见格式有.rm格式、.ram格式、.wmv格式、.asf格式、.mov格式等。其中.rm格式和.ram格式的视频文件需要RealOnePlayer播放程序或其插件的支持、.wmv格式和.asf格式的视频文件需要Windows Media Player播放程序的支持、.mov的格式则需要QickTime的支持。如果将一个.rm格式的视频电影嵌入到网页中，首先将.rm格式视频文件复制到本地站点内，或者在插入视频文件的时候，Dreamweaver会提示将该文件复制到本地站点内，单击确定亦可。接下来单击“插入”工具栏中的按钮，或者选择菜单中的“插入”|“媒体”|“插件”命令，打开选择文件对话框，选择文件后单击“确定”按钮。第4章 在网页中应用超级链接本章教学提要知识要点：文本链接；图像链接；热点链接；电子邮件链接。本章教学内容创超级链接是Internet的核心技术，也是网络用户浏览世界信息的重要渠道。通过超级链接能将世界上的网站和网页联系起来，构成一个有机的整体。超链接是构成网站最为重要的部分之一，单击网页中的超链接即可跳转到相应的网页，因此可以非常方便地从一个网页到达另一个网页。在网页中使用超链接可以使网页的表现力更加丰富，本章实例2010年世界杯网页中左下角的文本应用了文字超级链接，王牌对决图片应用了图像超级链接，巴西VS西班牙图片中则应用了图像热点超级链接，与我们互动世界杯则应用了电子邮件超级链接。4.1 了解超链接掌握绝对路径的概念。掌握相对路径的概念。掌握基于根目录路径的概念。4.2 文本超链接掌握文本链接的设置方法。为文字创建链接的基本方法有下面几种 ： （1）选中要创建超级链接的文本 ，在“属性”面板的“链接”文本框中可以直接输入要链接的文件路径和文件名，链接外部站点要输入站点的绝对路径，如果链接站点内的文件，可以直接输入相对路径。（2）选中要创建超级链接的文本 ，单击“链接”文本框后面的“浏览文件”按钮，打开“选择文件”对话框 ，在对话框中选择链接的文件。（3）选中要创建超级链接的文本，选择“插入”|“超级链接”命令，或者单击“常用”插入栏中的“超级链接”按钮，打开“超级链接”对话框 ，在对话框中用户可以对链接进行设置。设置链接之后，还应在“目标”下拉列表中还应选择打开链接的窗口，有四个选项供选择：_blank表示在新浏览器窗口中打开链接；_parent表示在上一级框架或包含此链接的框架窗口中打开链接；_self表示在当前窗口中打开链接；_top表示在整个浏览器窗口中打开链接，并移除所有框架。这里选择_blank，表示在新浏览器窗口中打开链接。4.3 图像超链接掌握图像链接的设置方法。图像链接与文本链接没有本质区别，唯一的区别就是选择的对象元素不同，因此，在设置网页文档中的图像链接时，基本按照文本链接设置方法就能创建成功。网页中对图像应用了超级链接，当鼠标指向该图像时鼠标也会变为小手状，当单击鼠标时则跳至链接设置的目标。4.4 热点超链接掌握图像热点链接的设置方法。图像热点就是在图像中设置链接的区域，一个图像可以设置多个链接。当单击这些图像的不同位置时，将分别打开不同的相关网页。其实这都是使用了Dreamweaver中的热点链接功能。热点链接在网页中经常用到，特别是电子地图上的地点链接。首先选中要制作热点链接的图片，在“属性”面板的左下方将会显示出三个制作不同形状热点的工具 ，单击热点工具按钮则可在图像上绘制热点，绘制结束后可以属性面板上的“链接”文本框中输入链接的网页地址，或者单击属性面板上的“浏览文件”按钮，打开“选择文件”对话框，在对话框中选择相应的链接文件。4.5 E-mail链接掌握E-mail链接的设置方法。使用E-mail创建超链接是众多网站制作网页的重要内容之一，也是企业或个人与浏览者相互交流信息，获取客户需求的一种重要渠道。创建E-mail链接可以是图像或文字，但在设置链接地址时，必须声明所链接的是E-mail地址。在网页中选中要创建电子邮件超链接的文本，在“链接”文本框中输入E-mail地址，如“mailto:” 。或者单击“常用”插入栏中的“电子邮件链接”按钮，或选择“插入”|“电子邮件链接”命令，打开“电子邮件链接”对话框，在对话框中也可以设置电子邮件链接。4.6 空链接空链接一般默认指向当前页面，并不会打开新的网页文件。此种链接并不常用，通常会和Javascript脚本语言配合使用，以达到一些特殊的页面效果。要创建空链接，首先将要创建空链接的对象选中，然后在“属性”面板中的“链接”文本框中输入“#”字符即可。第5章 网页中表格的应用本章教学提要知识要点：插入表格；编辑表格；表格及单元格属性的设置。本章教学内容表格在Dreamweaver 中不仅可以用来存放数据，而且另外一个重要的功能就是定位网页元素。当打开一个网站的页面，从表面上很难看到表格的痕迹，但将其用Dreamweaver打开，观看其源文件的时候会发现，几乎所有的内容都被放置在表格中，因此才会使整个页面井井有条而不至于杂乱无章。本章实例所示的大山论坛网页为表格在网页中的应用。5.1 插入表格掌握在网页中插入独立表格的方法。将鼠标定位在插入表格的位置，单击菜单中的“插入”|“表格”命令，打开“表格”对话框。在对话框中用户可以对插入的表格进行设置，最后单击“确定”按钮插入表格。掌握在网页中插入嵌套表格的方法。将鼠标定位在表格的单元格中，单击“插入”|“表格”命令，打开“表格”对话框，在对话框中设置，最后单击“确定”按钮即可插入嵌套表格。 5.2 编辑表格掌握选择表格及元素的方法。选择整个表格，可以执行以下操作之一：l 将鼠标指向表格的左上角，当鼠标变为状时，单击鼠标即可选中整个表格。l 将鼠标指向表格的右边缘或下边缘，当表格周围显示红线时单击鼠标即可选中整个表格。l 将插入点定位在表格的任意单元格中，然后选择“修改”|“表格”|“选择表格”命令，可选中单元格所在的表格。l 将插入点定位在表格的任何位置，在文档窗口的左下角状态栏选择标签。选择表格的行或列，可以执行以下操作之一：l 将光标定位在行的左边缘或者列的上端，当鼠标变为黑色箭头壮时单击鼠标即可。l 在单元格内单击，然后平行拖动或者向下拖动选择多行或多列。要选择多个单元格，可以执行以下操作之一：l 在一个单元格内单击鼠标，按住Shift键然后单击另外一个单元格，矩形区域内的所有单元格被选中。l 要选择不连续的单元格，按住Ctrl键在表格中单击要选中的单元格即可。掌握在表格中增加行与列的方法。要在表格末尾增加行或列，首先要选中表格，显示表格“属性”面板，修改“属性”面板中的“行”与“列”的值便可以增加行与列，如在已有的3行3列的表格末尾增加2行2列，只需要将表格“属性”面板中的“行”与“列”的值都修改为5即可。要在表格中插入行或列，首先要将插入光标定位在表格的单元格中，选择菜单中的“修改”|“表格”|“插入行”命令，将在所选的单元格上方插入一行，如果选择菜单中的“修改”|“表格”|“插入列”命令，将在所选的单元格边插入一列。掌握在表格中删除行或列的方法。要删除行或列，只需要将插入光标定位在要删除的行或列的任意单元格中，选择菜单中的“修改”|“表格”|“删除行”或“删除列”命令即可。另外也可以通过修改表格“属性”面板中的“行”与“列”的值来删除表格中的最后几行或几列。需要注意的是，在删除行或列的同时，其中的内容同时被删除。掌握拆分单元格的方法。单击菜单中的“修改”|“表格”|“拆分单元格”命令，或单击表格“属性”面板中的拆分单元格按钮，打开“拆分单元格”对话框，在对话框中对拆分的单元格进行设置。掌握合并单元格的方法。单击菜单中的“修改”|“表格”|“合并单元格”命令，或单击表格“属性”面板中的合并单元格按钮即可将选中的单元格合并。5.3 表格及单元格的属性设置掌握设置表格属性的方法。要对表格进行属性设置，首先单击表格的边框，选中表格，此时显示出表格“属性”面板，通过表格“属性”面板可以对表格的参数进行设置。掌握设置表格单元格的方法。在插入的表格中，单击任意单元格，将插入光标定位在单元格中，则会显示单元格“属性”面板，通过单元格“属性”面板可以对单元格的参数进行设置。第6章 网页的布局技巧本章教学提要知识要点：利用AP Div 布局页面；AP Div与表格的相互转换；应用框架创建网页。本章教学内容网页设计作为一种视觉语言，特别讲究编排和布局，按照平面设计的形式来看，整个页面可以分为几个部分，每个部分有不同的功能，也能体现不同的形式，具体看来就是上边、左边、下边、右边、中间、看似无奇，自身却有许多独特的地方。网页的内容固然很重要，但只有当网页布局和网页内容成功接合时，这种网页才是受人喜欢的。AP Div和框架在网页设计中有特殊的地位和作用，其中AP Div具有的灵活性是表格无法替代的，而框架的结构清晰也使网页内容具备了一目了然的优点。本章实例所示的北京现代物流集团公司网页就是使用AP Div布局页面的效果。6.1 应用 AP Div 布局页面掌握创建AP Div的两种方法。（1）使用“插入”工具栏。单击“插入”工具栏上的“布局”类中的绘制AP Div按钮，当鼠标指针变形为十字，便可以在文档窗口拖动鼠标绘制出AP Div。（2）使用菜单命令。选择菜单中的“插入”|“布局对象”|“AP Div”命令可以在文档中创建一个默认大小的AP Div。掌握选定AP Div的方法。选定AP Div的方法有多种，其中主要有3种。单击AP Div边框、单击AP Div标签和使用“AP 元素”面板。掌握调整AP Div大小的方法。用户可以使用拖动鼠标的方法调整AP Div的大小，在要调整大小的AP Div上单击鼠标，然后将鼠标指向层的四个角或者边框中点，当鼠标变为双向箭头状时按住鼠标左键不放拖动鼠标即可改变层的大小。另外用户还可以在AP Div属性面板的“宽”和“高”文本框中对层的大小进行具体的设置掌握调整AP Div位置的方法。用户可以使用拖动鼠标的方法调整AP Div的位置，在要调整位置的AP Div上单击鼠标，然后将鼠标指向层的边框，当鼠标变为四向箭头状时按住鼠标左键不放拖动鼠标即可改变AP Div的位置。用户还可以在AP Div属性面板的“左”和“上”文本框中具体设置AP Div的位置。掌握创建重叠 AP Div的方法。首先在“AP 元素”面板中取消防止重叠复选框的选中状态，然后才能创建重叠 AP Div。掌握AP Div对齐的方法。首先选中要对齐的AP Div，然后选择菜单中“修改”|“对齐”子菜单中的相应命令。掌握在AP Div插入对像的方法。掌握设置AP DivCSS规则的方法。创建一个AP Div后，系统会自动赋予AP Div一个CSS规则，用户可以对这个CSS规则进行修改，使其符合页面要求。掌握改变AP Div顺序的方法。改变AP Div顺序的方法有两种修改Z轴值和使用“AP Div”面板。掌握AP Div显示和隐藏的方法。通过单击AP Div边框选中当前AP Div，显示AP Div“属性”面板，修改“可见性”下拉列表中的值为“visible”即可以将AP Div设置为显示，其值设置为“hidden”则是将AP Div设置为隐藏。或者在“AP Div”面板上单击AP Div名称前的图标。6.2 AP Div与表格的相互转换由于AP Div所具有的灵活性是表格无法比拟的，因此可以通过在AP Div中添加内容，使其布局在页面中的任何位置，而且不会使其他页面元素受到影响。但由于起缺乏紧凑性，加之一些浏览器不能正常显示AP Div，因此Dreamweaver提供了AP Div与表格互相转换功能，以结合各自的优点更好的进行网页设计操作。掌握AP Div转换为表格的方法。如果要将AP Div转换为表格，可以选择菜单中的“修改”|“转换”|“AP Div到表格”命令，打开“转换AP Div为表格”对话框，在对话框中进行设置，单击“确定”按钮。掌握表格转换为AP Div的方法。将表格转换为AP Div，可以选择菜单中的“修改”|“转换”|“表格到AP Div”命令，打开“转换表格为AP Div”对话框，在此对话框中选择好“布局工具”选项，单击“确定”按钮即可。6.3 应用框架创建网页框架是网页设计中比较常用的制作技术，使用框架能将几个不同的HTML文档显示在同一个浏览器窗口中，每个框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分所显示内容无关的HTML文档。掌握创建框架网页的方法。在Dreamweaver 中选择菜单中的“文件”|“新建”命令，打开“新建文档”对话框。选择“示例中的页”，然后在“示例文件夹”列表中选择“框架页”选项，在右侧的“示例页”列表中选择一种框架结构类型，单击“创建”按钮，打开“框架标签辅助功能属性”对话框，框架命名后，单击“确定”按钮，建立框架网页文档。掌握设置框架集属性的方法。择菜单中的“窗口”|“框架”命令，打开“框架”面板，单击“框架”面板最外层的框架集边框，即可将整个框架集选中，或者用鼠标单击框架的任意一个边框也可将整个框架集选中，选中框架集后在“属性”面板中即可对框架集属性进行设置。掌握设置框架属性的方法。在“框架”面板中单击相应的框架，或按住Alt键的同时单击一个框架选中框架，此时用户可以在属性面板中对框架的属性进行设置。掌握使用链接控制框架显示内容的方法。第7章 表单网页的应用本章教学提要知识要点：插入表单；插入表单对象；表单的提交设置。本章教学内容表单是使网站实现交互功能的重要途径，使用表单，可以使用户输入信息，以便在运行中提供自定义的响应，或者只是收集最近使用情况的信息。本章将介绍插入表单的方法、如何创建表单对象以及使用表单实现交互的设置。在互联网上表单的用处非常大，例如：会员加盟注册、企业和单位填写欲购商品的信息订购商品、用户填写各项交易信息进行网上股票交易等。本章实例所示黄山导游网用户注册网页就是一个表单网页。7.1 表单掌握插入表单的方法。选择菜单中的“插入”|“表单”|“表单”命令，或单击“插入”工具栏上的“表单”类中的“表单”按钮，此时会在文档窗口中出现一个红色的虚线框，表示插入一个表单。7.2 插入表单对象掌握插入文本域的方法。掌握插入单选按钮的方法。掌握插入复选框的方法。掌握插入列表框的方法。掌握插入提交和重置按钮的方法。7.3 表单的提交设置表单信息最终将会被提交到服务器端脚本或应用程序进行处理，因此在创建完所有表单对象后，还应进行提交设置，以确认将表单信息准确的提交给服务器端的脚本或应用程序，通常使用表单“属性”面板便可以完成表单的提交设置。单在文档窗口中单击红色虚线框将表单选中，显示表单“属性”面板，在属性面板中用户可以设置表单的提交。第8章 在网页中应用行为和脚本语言本章教学提要知识要点：行为的应用；插入JavaScript脚本。本章教学内容Dreamweaver提供了一种简洁而且快捷的方式，无需编写任何代码便可以快速在HTML代码中嵌入Javascript脚本语言实现特效，这就是行为。行为主要由3部分组成，其中有对象、事件和动作。在网页中使用应用行为可以使网页的表现力更加丰富，应用Javascript脚本语言可以实现一些特效，本章实例所示的黄山导游网用户注册网页中显示的当前日期和弹出窗口就是应用Javascript脚本语言的效果。8.1 使用JavaSpcrip脚本在Dreamweaver网页中，用户可以使用JavaScript脚本实现一些特效，如果自己对JavaScript脚本语言不是很熟悉，可以借用别人的。比如用户觉得别人网站上用JavaScript制作的显示当前日期的特效适用于自己的网页，用户可以将其代码复制到自己的网页中来。掌握JavaScript脚本的使用的方法。8.2 添加行为利用“行为”面板可以对方便的添加行为，在“窗口”菜单中选中“行为”，显示“行为”面板。要为某一事件添加动作，可以单击事件将其选中，然后单击“行为”面板上的按钮，打开一个下拉菜单，在下拉菜单中选择动作即可。如果要为同一个事件添加多个动作，可以在添加完一个动作之后，继续单击按钮进行添加新的动作。如果存在一个事件关联了多个动作，此时可以通过单击按钮或按钮来调整动作响应顺序。要删除已设置好的行为，只需要在“行为”面板中单击按钮即可。第9章 模板和库在网页中的应用本章教学提要知识要点：创建与应用模板；创建与应用库项目。本章教学内容模板主要用于同一栏目中的页面制作，而库主要用于各栏目间公共内容板块的制作。一个成功的网站首先要具备自己独特的风格，才能够在茫茫的网络中脱颖而出，给人留下深刻印象。但仅凭网站中的一两个较好的页面，很难收到良好效果。因此就需要整个站点内的页面体现出统一的风格。但对于大型的网站，少则几十页，多则成百上千页。使用模板和库，在提高工作效率的同时还不失统一的风格。本章实例所示的生活网页就是应用模板和库做出的实例。9.1 创建和应用模板掌握创建一个新空白模板的方法。掌握把现有文档存为模板的方法。掌握创建可编辑区域的方法。首先在文档中选中要定义为可编辑区域的文本（或其他内容），选择菜单中的“插入”|“模板对象”|“可编辑区域”命令，或单击“插入”工具栏上的“常用”类中的模板按钮，选择下拉菜单中的“可编辑区域”命令，打开“新建可编辑区域”对话框，在文本框中可输入可编辑区域的名称，单击“确定”按钮，在单元格中插入“此处可编辑文本”标签。掌握应用模板创建新网页的方法。选择“文件”|“新建”命令，打开“新建文档”对话框。在对话框中单击“模板中的页”选项卡，选择需要的模板，单击“创建”按钮即可基于模板创建一个网页。 掌握编辑模板并更新网页的方法。打开模板页，然后对模板进行编辑，选择“文件”|“保存”命令，打开“更新模板文件”对话框，在“更新这些文件使用的模板吗？”列表中显示了应用模板制作的网页名称 ，单击“更新”按钮，打开“更新页面”对话框，进行网页更新，更新完成后在显示记录文本框中会提示“完成”字样。9.2 创建和应用库项目掌握将已有内容创建为库的方法。在设计窗口中选中要设置为库项目的对象，选择“修改”|“库”|“增加对象到库”命令，在资源面板中显示添加的库项目。掌握在网页中应用库项目的方法。在资源面板中选中库项目文件，然后单击下面的“插入”按钮，则库项目将插入在光标所在位置。掌握编辑并更新网页的方法。在资源面板中选中库项目，单击下面的“编辑”按钮 ，或者右击库项目名称，在弹出的菜单中选择“编辑”选项。此时将在设计视图中打开库项目，等待编辑。掌握将库项目从源文件中分离的方法。在网页中选中库项目，在属性面板中单击“从源文件中分离”按钮。第10章 Fireworks在网页制作中的应用本章教学提要知识要点：切片的应用；认识Excel 2003的工作界面；在工作表中