网页设计与制作项目实训教程项目5

合集下载

网页设计与制作教案5

一个网站的第一个页面即网站的首页，一般默认将首页命名为
default。

普通网页命名一般遵循以下规则：
1、使用小写；
四、文字录入
在输入文字的过程中，我们可能会给文字进行换行操作，让不同内容的文字显示在不同段落。

在Dreamweaver中，有分段和分行两种换行
第四步，教师总结（10分钟）
总结本次课的内容，要求掌握新建网页的方法，并掌握页面属性的第二次课设置文本格式、插入特殊字符
四、特殊字符表达方式
、数字参考：“&#D;”，其中D为一个数值，不同的数值表示不同的©”为版权符号“©”。

、实体参考：前缀“&”和后缀“;”，中间为表示字符地名称，不同的字符有不同的名字，如“®”表示注册商标“®”。

第四步，教师总结（10分钟）
总结本次课内容，强调美观的网页是通过对网页文本进行属性设置，插入特殊字符，对文本进行编排，使网页更加合理，便于浏览。

网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第五章

标签
<table>...</table> <caption>…</captio n> <tr>...</tr> <td>...</td> <th>...</th>
功能
定义一个表格开始和结束定义表格标题，可以使用属性align，属性值 top、bottom
定义表行，一行可以由多组<td>或<th>标签组成
定义单元格，必须放在<tr>标签内定义表头单元格，是一种特殊的单元格标签，在表格中不是必须的
图5-9 生成的表格
图5-10
“标签检查器”面板
在“标签检查器”中列出了表格所有的属性，如表5-2所示。请用户根据表5-2列出的表格属性，在“标签”面板中对表格作进一步的属性设置，观察表格外观变化情况。
5.1.2 表格的基本操作
1、选择整行单元格 2、选择整列单元格 3、选择连续的多个单元格 4、选择不连续的多个单元格 5、选择表格的所有单元格
5.1.2 表格的基本操作
1）插入行
选择“修改→表格→插入行”菜单命令，即在插入点的下面出现一行。选择“插入→表格对象→在上面插入行”菜单命令，在插入点的上面插入一行。选择“插入→表格对象→在下面插入行”菜单命令，在插入点的下面插入一行。
含义
border，时显示上下左右边框表 5-2 表格的属性及含义（续） frame box，显示上下左右边框 hsides，显示上下边框 lhs，只显示左边框
rhs，只显示右边框
void，不显示边框 vsides，只显示左右边框 none，表格内部所有线框不显示

《Dreamweaver网页制作实训教程》课件第5章

的文本或图像后，可以在“属性”面板上的“链
接”编辑框中直接输入要链接到的网址或网页名
称；也可以通过单击“属性”面板上“链接”编
辑框后的文件夹图标，在弹出的“选择文件”
对话框中选择要链接到的文件。
选择目标文件所在文件夹
选择目标文件
单击“确定”按钮
2．外部超链接
外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板的“链接”编辑框中输入要链接到的网址。
5.2.3 应用“设置状态栏文本”行为
如果为自己的网页设置一些比较有个性的状态栏文本，那一定很吸引人，下面就来看看如何设置自己的状态栏文本。
行为外，读者还可以到 Adobe或其他网站去下载并安装第三方行为。
综合实训2——为“macaco”网页制作下拉菜单
5.1.4 设置热点链接
热点链接又叫图像映射，就是使用热点工具将一张图片划分成多个区域，并为这些区域分别设置链接。
5.1.5 设置命名锚记链接
要创建命名锚记链接，应首先插入命名锚记，然后创建跳转到该命名锚记的链接。
5.1.6 使用跳转菜单
我们可以把跳转菜单看作是一种超链接的集合，它以弹出式下拉菜单的形式在网页中展现出来。弹出菜单内的链接没有类型上的限制，可以是本地链接，也可以是到其他网站的链接，还可以是电子邮件链接或命名锚记链接。
2.应用行为的方法
应用行为时需要先选中要应用行为的对象，然后单击“行为”面板中的“添加行为”按钮，在打开的“动作”列表中选择效果，之后在打开的对话框中设置效果，最后指定设定的动作在什么情况下发生，也就是指定事件。
5.2.2 应用“打开浏览器窗口”行为
应用“打开浏览器窗口”行为，可实现单击目标文字或图片，打开固定大小窗口的效果。本节通过一个实例，来看看“打开浏览器窗口” 行为在网页中的具体应用。

网页设计与制作实践第5版模块1 创建站点与制作商品简介网页

【任务1-1-1】启动Dreamweaver与初识其工作界面
7
面板组： Dreamweaver 包 “文件”面板：网站是多个网页文件、图像文件、程序文件等有机联括多个面板，这些面板都有系的整体，要有效地管理这些文件及其联系，需要一个有效的工具，不同的功能，将它们叠加在 “文件”面板便是这样的工具。一起便形成了面板组。
5
Dreamweaver工作界面的布局与组成如图所示。
标题栏：显示网页的标题和网页文档的存储位置。
菜单栏： Dreamweaver 的菜单栏包含10类菜单：“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”。
“插入”面板：显示“插入”面板的方法是：选择“窗口”→“插入”，在 Dreamweaver 主界面的右侧将显示“插入”面板。
HTML5+CSS3网页设计与制作实践（项目式）（第5版）
模块1 创建站点与制作商品简介网页
制作网页之前，应该先在本地计算机磁盘上建立一个站点，使用站点对网页文档、样式表文件、网页素材进行统一管理。
1 学会新建网页文档和设置网页的页面属性
学习目标
2 学会在网页中插入空格、文本换行符和特殊字符
熟悉浏览器窗口的基本组成元素和网页的基本组成 3
浏览器是用户浏览网页的软件，支持多种具有交互性的网络服务，是人们通过网络进行交流的主要工具。目前流行的浏览器为 Chrome、Firefox等。
【任务1-1-2】认识浏览器窗口的基本组成和网页的基本组成元素 9
浏览器窗口主要由网页标题、菜单栏、命令栏、地址栏和网页窗口等部分组成。Internet Explorer（简称IE）浏览器窗口如图1所示，Chrome浏览器窗口如图2所示。

《网页设计与制作》-实训指导书

目录实训1 站点创建实训2 搜集素材实训3 用表格设计主页布局实训4 在主页制作中插入文本操作实训5 在主页制作中插入图像操作实训6 在主页制作中超级的设置实训7 制作动感网页实训8 表单制作实训9 CSS样式表的使用实训10 JavaScript技术实训11 应用行为实训12 利用框架制作“公司简介”网页实训13 利用布局表格制作“新书推介”网页实训14 模板和库的使用实训15 利用层的布局制作“技术支持”网页实训16 网页设计与管理实训17 开发综合实训实训1 站点创建实训目的为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性，掌握创建目录结构、栏目文件夹、网页文件的基本操作方法。

实训环境硬件环境：考核用机为奔腾以上兼容机，存不少于 32M ，最好 64M 或128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材。

实训课时2学时实训容创建站点：创建目录结构：创建栏目文件夹：创建网页文件：掌握设置网页的页面属性实训要求要求学生能掌握如何创建站点，正确创建目录结构及栏目文件夹，创建主页文件index.htm,并正确命名，掌握设置网页的页面属性的方法。

实训步骤1、在E盘中新建本地根文件夹，命名为bookman，并在该文件夹中新建image 文件夹以存放中所要用到的图片。

2、定义站点：设置 "站点名称"，命名为 "博客人";设置本地根文件夹,指定为E盘下的bookman文件夹;设置 "HTTP地址"为localhost。

3、创建目录结构及栏目文件夹(如下图):4、E盘下的bookman文件夹创建主页文件index.htm5、设置网页的页面属性。

《网页设计与制作》综合项目实训指导书

《网页设计与制作》综合实训指导书前言为了加强学生能力的培养，提高学生的实践操作技能，以适应社会、经济和科技的发展对职业人才的需求，向社会提供大批能够直接从事网站开发和技术服务的应用型操作人才。

特编写本指导书《网页设计与制作》是一门实践性很强的课程，网页设计与制作实训是学好网站开发、掌握网页制作基础知识的极为重要的环节，是培养学生动手能力的重要途径。

因此，加强网页设计与制作实验课程的教学具有十分重要的意义。

本指导书是在多年的教学实践经验的基础上，广泛听取了有关任课教师的意见，并结合我校网络专业实训设备的现状编写而成的。

编写中，精选实验项目与内容，力求简明扼要、通俗易懂、目的明确、原理简洁、步骤清晰、结论正确。

针对学生知识面及个人特长的不同，本指导书设计有选做内容，此部份内容主要为数据库开发及动态模块设计与程序编写等内容，以此拓展学生知识面与技能的全面性，学生可根据自身特点及时间来选择是否完成网站的动态开发部分。

本指导书适用于计算机网络三年制（或四年制、五年制）专业教学使用。

由于编者时间仓促，水平有限，对指导书中存在的缺点和错误，望大家给予指正，在此深表感谢！编者二零一一年五月十日目录实训课程概述 (4)项目一：设计与制作“博爱”助学网站。

(7)项目二：设计与制作“华医”中医健康网站。

(12)项目三：设计与制作世博会志愿者网站 (17)项目四：设计与制作传统节日网站 (22)项目五：设计与制作环保网站 (27)项目六：设计与制作音乐网站 (33)项目七：设计与制作台湾旅游网站 (38)项目八：设计与制作图书网站 (43)项目九：设计与制作军事新闻网站 (48)项目十：设计与制作科技公司网站 (53)项目十一：设计与制作健身俱乐部网站 (58)项目十二：设计与制作婚礼策划公司网站 (63)项目十三：设计与制作奶茶网站 (69)项目十四：设计与制作植物园网站 (75)项目十五：设计与制作快餐连锁店网站 (81)项目十六：设计与制作青年旅舍网站 (86)项目十七：设计与制作鞋业有限公司网站 (91)项目十八：设计与制作摄影公司网站 (96)项目十九：设计与制作中国杏仁网站 (102)项目二十：设计与制作李小龙截拳道网站 (108)实训课程概述项目一：设计与制作“博爱”助学网站。

《网页设计与制作实训》项目指导书

《网页设计与制作实训》指导书一、实训目的与要求网页设计与制作是实践性很强的课程，学生必须通过不断上机实习以及使用它来解决实际的问题，才能更好地掌握。

因此，在本学期特设置此课程设计，集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识，按照网站制作的流程，完成一个相对具体、综合的网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的目的。

二、实训内容1.实例实训让学生在机房实际操作，按照给定的实例完成实例中站点的创建和设计制作。

2.自建站点实训让学生自行选择站点的主题，从规划站点到上传文件一步一步完成整个站点的创建、调试和上传工作。

3.总结对学生的全部作品进行考核，并选择典型的案例对实训的结果进行考核。

三、实训材料准备1.软件准备Dreamweaver MX中文版/英文版、PhotoShop6.0以上版本、Fireworks MX以上版本、FlashMX2004 中文版。

2.硬件准备网络条件：与因特网连接的局域网。

教师用机：Windows2000 Server版。

学生用机：Windows2000 Professional版。

四、考核办法1.见《网页设计与制作实训》项目描述书目录实训一基本知识回顾 (1)实训二实训作品的站点规划 (4)实训三整体布局设计 (5)实训四搜集和创建资源 (8)实训五页面素材设计 (9)实训六样式设计 (10)实训七特效设计 (11)实训八首页模板设计 (12)实训九二级页面模板设计 (13)实训十各页面的细化、测试和上传作品 (14)实训十一总结 (16)附录一网站规划书书写格式 (17)附录二搭建本地站点 (19)附录三CUTEFTP使用说明 (22)实训一基本知识回顾一、实训目的和要求温习一学期的课程重点难点，使学生对一学期Dreamweaver MX 各方面的操作知识系统的由“片”的认识转向“面”的认识。

二、实训内容Dreamweaver MX的基本操作：站点、表格、图像、链接、框架等。

电子教案-《Dreamweaver网页设计与制作(第二版)》-A06-3954(示例)项目五

课程教案项目效果【任务一】布局主页 index.html——表格的基本应用所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在XHTML语言中以<tr>标签开始，</tr>标签结束），垂直的多个单元格称为列（以<td>标签开始，</td>标签结束），如图5—1所示。

行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。

（一）插入表格Dreamweaver CS3提供了非常完善的表格编辑功能，首先介绍如何在网页文档中插入表格。

步骤 1 首先在文档页面上要插入表格的位置单击，以确定插入点位置。

步骤 2 单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格，如图所示。

下面简单介绍一下“表格”对话框中几个重要选项的意义。

●表格宽度（Width）：设置表格宽度值，否则，其宽度将随其中的内容而改变。

●在Dreamweaver中，最常使用的单位是像素和百分比。

像素使用0或大于0的整数表示；百分比是相对于浏览器而言的，使用 0 或百分比表示。

●边框粗细（Border）：是指整个表格边框的粗细，标准单位是像素。

整个表格外部的边框叫外边框，表格内部单元格周围的边框叫内边框。

●单元格边距（Cell padding）：也叫单元格填充，是指单元格内部的文本或图像与单元格边框之间的距离，标准单位是像素。

●单元格间距（Cell spacing）：是指相邻单元格之间的距离，标准单位是像素。

（二）选择表格和单元格在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。

当表格外框显示为黑色粗实线时，就表示该表格被选中，另外，还可以通过“标签选择器”选择表格。

具体做法是：在表格内部任意处单击鼠标，然后在“标签选择器”中单击对应的“<table>”标签，该表格便处于选中状态。

《网页设计与制作》综合实训指导书.doc

《网页设计与制作》综合实训指导书1.1实训意义网页设计与制作综合实训是教学过程中重要的实践性教学环节。

它是根据专业教学计划的要求，在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。

因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。

1.2实训目的1．通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。

1)掌握规划网站的内容结构、目录结构、链接结构的方法。

2)熟练掌握网页制作软件Dreamweaver CS4的基本操作和使用技能。

3)掌握页面的整体控制和头部内容设置的方法。

4)熟练掌握网页页面布局的各种方法。

5)熟练掌握在网页中输入、设置标题和正文文字的方法。

6)熟练掌握用Photoshop制作和处理网页的图片素材，用Flash制作动画的方法。

7)熟练掌握在网页中插入图像、flash动画、背景音乐的方法。

8)掌握建立各种形式超级链接的方法。

9)掌握表单网页制作方法。

10)掌握网页特效的制作方法。

11)掌握网站测试的方法。

2．训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、网页特效等。

3．培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。

4．培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。

5．训练和培养团队协作精神和共同开发网站的综合能力。

1.3实训要求1．动手制作网页之前：1)必须认真做好网站的需求分析，包括市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。

2)规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。

网页设计与制作项目五

任务1 利用Flash CS6绘制简单图形
1 2 3 4
5
新建图形元件绘制树叶图形
给绘制好的树叶上色创建树叶组图形元件创建树枝并合成树形状
任务2 制作基本动画
(一)形状补间动画的概念
在Flash的“时间轴”面板上，在一个时间点(关键帧)绘制一个形状，然后在另一个时间点(关键帧)更改该形状或绘制另一个形状， Flash根据两者之间帧的值或形状来创建的动画被称为形状补间动画。这是Flash制作动画的一般方法。
网页设计与制作
项目五利用Flash CS6制作网页动画
1 利用Flash CS6绘制简单图形
2
制作基本动画
3
设计网站的动态按钮
4
在Flash中插入音频和视频
5
利用Flash发布和保存作品
任务1 利用Flash CS6绘制简单图形
在Flash中，每一个画面称为一个帧。一个Flash动画包括许多独立的帧，每一个帧都与前一个帧略有不同。其中，关键帧定义了动画在哪儿发生改变。例如，何时移动或旋转对象、改变对象大小、增加对象、减少对象等。每一个关键帧都包含了任意数量的符号和图形。
立了一个形状补间动画后，单击时间帧，弹出“属性”面板，如图所示。
形状补间动画的“属性”面板
任务2 制作基本动画
创建新文档
输入文字并打散
测试并保存动画
任务2 制作基本动画
形状提示的作用添加形状提示的方法添加形状提示的技巧
任务2 制作基本动画
(一)动作补间动画的概念 (二)构成动作补间动画的元素 (三)形状补间动画和动作补间动画的区别 (四)创建动作补间动画的方法 (五)认识动作补间动画的“属性”面板
任务2 制作基本动画

《网页设计与制作》课程实验实训指导书

《网页设计与制作》课程实验实训指导书课程编码：060303 课程名称：网页设计与制作课程学分：4 计划课时：68，理论：26 实践： 42课程类别：理论课理论实践一体√实践适用专业：计算机网络技术、计算机应用技术、信息管理、动漫设计与制作先修课程：网页动画设计与制作、图形图像处理后继课程：程序设计制订人：审核人：批准人：负责人：7《网页设计与制作》课程实验实训指导书一、课程基本信息课程编码：060303 课程名称：网页设计与制作课程学分：4 计划课时：68，理论：26 实践： 42课程类别：理论课理论实践一体√实践适用专业：计算机网络技术、计算机应用技术、信息管理、动漫设计与制作先修课程：网页动画设计与制作、图形图像处理后继课程：程序设计制订人：审核人：批准人：负责人：二、课程任务和目的该课程是计算机网络技术、计算机应用技术专业的核心课程，也是动漫设计、信息管理专业的必修课程，它的目标是从职业技术教育的特点出发，培养学生实际动手制作网页与管理网站的能力，使学生具备网页设计与制作、网站规划与维护的实践技能，以便形成良好的计算机网页制作与网站管理职业素养。

学生毕业后可胜任网站管理员、网页设计师、网页美工师等工作岗位，并可不断提升岗位工作能力。

它要以计算机基础、网页动画设计与制作、图形图像处理课程的学习为基础，也是进一步学习程序设计课程的基础。

三、实验实训项目内容与学时分配（表格可根据内容调整宽度和增加行数）序号项目名称实验（实训）名称实验（实训）内容学时实验类型实验要求1 项目一个人网站的设计与制作实训一认识与策划个人网站1. 确定网站主题2．确定网站风格3．规划网站内容2设计型必修实训二创建站点并制作网页1．建立文件夹2．建设站点3. 制作子页4. 制作首页5. 制作网页图片素材4综合型必修实训三创建网站相册、创建超链接1. 创建网站相册2. 创建首页中的文字链接3. 创建电子邮件链接2综合型必修2 项目二电子商实训一认识与策划电子商务类策划电子商务类网站 1设计型必修务网站设计与制作网站实训二首页的布局设计1. 创建站点2. 绘制布局单元格3. 使用表格进行布局的细化1综合型必修实训三制作网站Logo与页面图片1. 制作网站Logo2. 制作顶部导航图片3. 制作菜单导航图片4. 制作顶部广告图片5. 制作左边小图标6. 制作书籍图片4综合型必修实训四制作首页制作首页 2综合型必修实训五添加CSS样式表添加CSS样式表 2综合型必修3 项目三学校类网站设计与制作实训一认识与策划学校类网站1. 确定网站风格特色2. 划分网站所要包含的项目3. 绘制网站的结构图4. 绘制首页布局草图2设计型必修实训二建立站点与布局首页1. 创建站点2. 首页整体布局3. 设置网页的页眉和导航栏4. 设置网页的连接区5. 设置网页的主内容区6. 设置网页的页脚7. 设置网页的CSS样式4综合型必修实训三使用库元素创建网页1. 库元素的创建2. 库元素的使用3. 库元素的编辑2综合型必修实训四制作导航栏所连接的网页1. 创建“本系介绍”网页2. 创建其他导航栏所要链接的网页3. 编辑库元素在导航栏部分的超链接2综合型必修实训五使用模板创建网页1. 模板的创建2. 设置可编辑区域3. 应用模板4. 更新模板内容2综合型必修4 项目四企业类网站设计与制作实训一认识与策划企业网站策划企业网站 1 实训二切割页面效果图1. 创建站点2. 页面布局3. 添加首页的部分元素1 实训三制作网页Banner1. 利用Flash制作网页Banner2. 在页面中插入Banner2 实训四制作留 1. 调整留言板页面 2言板 2. 利用表单制作留言板3. 利用表单制作首页部分内容实训五使用内嵌框架1. 制作新闻文本页面2. 制作新闻页面2实训六使用网页特效1. 将新闻制作成滚动字幕2. 以跟随滚动条滚动的对联广告形式显示联系方式3. 状态栏显示滚动欢迎词2实训七网站的测试与发布1. 申请域名2. 上传网站3. 维护网站4. 添加网页搜索关键字和说明信息5. 推广网站2合计学时42注：1.实验设置要注意内容更新，体系设计科学合理，实验项目名称要准确规范。

《网页设计与制作》实训项目大纲及实训方案.doc

本实训项目的目的与任务是使学生根据问题的要求，构思一个主题，并运用网页制作工具，制作和发布网页，并对此进行更新和维护，掌握网站发布的工作流程，了解域名申请、空间申请的方法，能在校园网及英特网上发布网页。

实训学时数：125（5周）课外学时数：100适用方向：办公自动化、电子商务执笔者：王平露编写日期：2006年4月一、实训教学的目的与任务本实训项目的目的与任务是使学生根据问题的要求，构思一个主题，并运用网页制作工具，制作和发布网页，并对此进行更新和维护，掌握网站发布的工作流程，了解域名申请、空间申请的方法，能在校园网及英特网上发布网页。

通过设计、编辑和发布网页全过程的实际训练使学生对网页整体设计流程有一个深刻的认识，并且熟练掌握网页制作工具（Dreamweaver MX）的使用，初步掌握HTML、CSS语法格式，能借助手册看懂代码，能进行简单的代码改写工作，了解客户端脚本和服务端脚本区别，了解在网页上进行简单代码的嵌入与改写，会与其他工具结合使用以便实现更高效高质量的网页效果，进一步提高办公自动化效率和水平。

二、实训项目的基本要求及考核标准基本要求：（一）网页内容要求：1、主题内容：创意突出，体现校园园区精神文明建设体现本班级大学生风貌，学习气氛浓厚，作品内容健康。

严禁发布反对政府、宣传迷信、传播色情、系统破坏、黑客教程等违法信息。

2、具体内容：标徽、标题、各链接页具体内容，站内搜索、计数器、留言系统、电子邮件地址、弹出窗口、漂浮广告、背景音乐、网页特效、友情链接、版权信息等。

（二）制作基本要求：1、至少有10个页面，链接结构应有三层，下一层必须有返回上层的按钮或链接。

有整体框架结构，导航栏，表格定位，布局合理，色彩搭配协调统一。

2、主页的文件名为：index.htm。

文件名一般用英文小写字母。

3、网页中要有文本、图像、表格、交互与链接、层与动画、表单。

4、网页主要建立站内链接，尽量少建立外部链接，至少建立一个E-mail链接至你的邮箱。

《网页设计与制作——Dreamweaver CS3》项目05 制作导航网页

操作二设置图像链接
项目五：
制作导航网页
本操作将通过图像【属性】面板来设置页眉中的图像超级链接。通过本操作的学习，应该掌握的内容主要有：
任务一任务二任务三实训小结
1.设置图像超级链接的方法
首先选中图像，然后在图像【属性】面板的【链接】文本框中输入图像的链接地址，在【目标】下拉列表中选择目标窗口的打开方式。
在主菜单中选择【插入】／【图像对像】／【导航条】命令或者在【插入】／【常用】面板中单击（导航条）按钮，打开【插入导航条】对话框进行设置即可。
网页设计与制作
Dreamweaver CS3
项目五：
制作导航网页
任务一任务二任务三实训小结
操作三设置导航条
3.修改导航条的方法
如果要对导航条进行修改，可以通过【设置导航栏图像】行为进行修改。方法是在导航条中选中其中一个按钮，打开【行为】面板，在【行为】面板的动作栏中，双击事件下方的名称，打开【设置导航栏图像】对话框，在该对话框中可以重新设置图像的源文件及所指向的URL。这个对话框和当初插入导航条的对话框是一样的，但又多了一个【高级】选项卡。如果焦点在当前的按钮，而其他的按钮同时也发生变化，那么就必须设置【变成图像文件】和【按下时，变成图像文件】这两项。由此看来，【设置导航栏图像】动作是导航条功能的一个补充和延伸，是为方便导航条创建后的修改而设立的。
网页设计与制作
（3）按下图像：按钮被单击后显现的状态。例如，当用户单击按钮时，新页面被载入且导航条仍是显示的；但被单击过的按钮会变暗或者凹陷，以表明此按钮已被按下。
（4）按下时鼠标经过图像：按钮被单击后，鼠标指针移动到被按下元素上时显现的图像。例如，按钮可能变暗或变灰，可以用这个状态暗示用户：在站点的这个部分该按钮已不能被再次单击。

网页设计与制作项目教程第2版项目5 ”优课教育“网站首页面制作

...... </ol>
定义有序列表描述具体的列表项
注意：有序列表ol和列表项li拥有一些标签属性。例如，type、start、value等，但在网页中不会使用，一般通过CSS样式属性替代，读者了解即可。
知识储备
3.定义列表
学习目标
了解定义列表，能够说出定义列表的作用和特点。
掌握定义列表的基本语法格式，能够在网页中添加定义列表。
知识储备
2.有序列表
学习目标
了解有序列表，能够说出有序列表的定义和特点。
掌握有序列表的基本语法格式，能够在网页中设置定义列表。
知识储备
2.有序列表
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列。
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
知识储备
3.定义列表
定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。
在网页设计中，定义列表常
用于实现图文混排效果。
<dt>
<dt>标签中插入图片。
<dd>标签中放入对图片
...... </ul>
定义无序列表描述具体的列表项
知识储备
1.无序列表
注意：
1.无序列表拥有type属性，用于指定不同的列表项目符号。但是HTML中不赞成使用 type属性，一般通过CSS样式属性替代。