网页设计与制作项目实训教程 项目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>”标签，该表格便处于选中状态。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
返回
返回
5.2 知识储备
5.2.1 插入图像 5.2.2 设置图像属性 5.2.3 插入相关图像元素
返回
5.2 知识储备
5.2.1 插入图像
在网页中插入图像的操作步骤如 下：
（1）将光标定位在文档中要插 入图像的位置。
项目5 制作图文混排网页
项目描述
知识储备 实践向导
项目小结
能力拓展
退出
项目描述
图像是网页元素中的另一重要组成部分，在网页中插 入图像可以使网页更好地表现网站的主题思想，使版面变 得丰富多彩，吸引更多的浏览者。
图像文件的格式有很多种，但实际上在网页中常使用 的图像文件格式只有GIF、JPG和PNG这三种，因为这三 种图像文件都是经过压缩，因此文件比较小，利于网络上 传输与观看。
（2）弹出“插入鼠标经过图像”对话框，可以重新给 图像起一个名称。单击“原始图像”右侧“浏览”按钮， 载入一幅原始图像。单击“鼠标经过图像”右侧“浏览” 按钮，载入一幅要进行轮换的图像。
返回
如果选中“预载鼠标经过图像”复选框，在下载页面时，轮换 的图像也同时会被下载到缓存中。如果输入“替换文本”，则 当在轮换图像上暂停鼠标时，会出现该文本。“按下时，前往 的URL”右侧文本框中，如果输入网页的URL地址，单击图像时， 会进入到链接的页面。单击“确定”按钮，即完成了动态轮换 图像的设置。
对话框，选中“外观（CSS）”，设置背景图像，如图 所示。 5．单击“确定”按钮，保存页面，按【F12】显示最终 效果图。
返回
5.4 能力拓展
制作“万里长城”网页，通过制作该网页，可以掌握文本 设置、图像加载、移动、复制、删除和属性设置等基本操 作。“万里长城”网页的显示效果如图所示。
返回
命令，弹出“新建文档”对话框，设置网页标题为“庐 山”，然后输入文本，设置好文本格式，保存为5-1.html。
返回
2．插入图片 （1）将光标放在要插入图像的位置，选择菜单栏中“插
入”→“图像”命令。 （2）出现“选择图像源文件”对话框后，在“查找范围”
选择文件所在的位置，在列表中选择 “53.jpg” 文件名， 显示效果。
（5）切换到“代码”视图，可以看到图像对应的HTML代码。
返回
5.2.2 设置图像属性
如果插入到网页的图片大小不符合网页排版的要求，就需要 在Dreamweaver CS5中对图像进行缩放操作。在属性面板 中设置图像大小，在HTML文档中插入图像后，选择“设计” 视图，选中要调整大小的图像，打开图像“属性”面板，在
“边框”选项：设置图像的边框宽度。
“对齐”选项：设置图像的对齐方式。
返回
5.2.3 插入相关图像元素
1．插入“鼠标经过图像”
（1）“鼠标经过图像”可以实现图像轮换特效，给页 面增添动态效果。先准备好两幅大小相同的图片，将光 标定位到要插入轮换图像的位置。单击“插入”菜单， 选择“图像对象”选板，选择“常用”项， 单击“鼠标经过图像”按钮。
5.5 项目小结
无论是个人网站还是企业网站，图文并茂的网页 会为网页增色不少，通过图像美化后的网页能吸引 更多浏览者，恰当的图片、文字能让页面充满美感。 本项目学习插入图像的方法、设置图像的属性、设 置鼠标经过图像等内容，通过案例操作掌握图像与 文本混合编排的方法。
返回
图像“属性”面板中重新输入一个“宽”和“高”的值，就
可以改变图像的大小，使用鼠标可以进行更为直观的缩放操 作，具体步骤如下：
（1）在HTML文档中插入图像后，单击“设计”视图，然 后用鼠标单击要进行缩放的图像，在图像上会出现3个控制 句柄。
（2）将光标放在控制句柄上，出现双箭头的形状后，拖动 控制句柄，即可调整图像大小。
返回
2．插入图像占位符 图像占位符是在准备好将最终图像添加到Web 页
面之前使用的图形，通过使用图像占位符，可以在 真正创建图像之前确定图像在页面上的位置和大小。 “插入图像占位符”对话框如图所示。
返回
5.3 实践向导
任务5-1 制作图文混排网页“中国庐山”页面。 具体操作步骤如下： 1．启动Dreamweaver CS5，单击菜单“文件”→“新建”
“替换”选项：设置图像的注释文本。 “编辑”选项：启动图像 编辑器并打开选定的图像。
“地图”选项：包含“地图”文本框和“热点工具”，文本框中 可以输入图像地图的名称，热点工具可以在图片中插入热点区域。
“垂直边距”和“水平边距”选项：以像素为单位在图像的四周 添加边距。
“目标”选项：指定打开链接网页的框架或窗口。
返回
3．在页面中插入鼠标经过图像。 （1）选中文本下方位置，点击菜单“插入”→“图像对
象”→“鼠标经过图像”。 （2）弹出“插入鼠标经过图像”对话框，分别设置“原始
图像”和“鼠标经过图像”。 （3）选择插入图像，在属性面板设置对齐方式为右对齐即
可。具体效果如图所示。
返回
4．设置背景图像 选择菜单“修改”→“页面属性”，弹出“页面属性”
（2）执行下列操作，菜单方式 为单击“插入”菜单，选择“图 像”选项。面板快捷方式为在 “插入”面板的“常用”模式下， 单击“图像”按钮。
返回
（3）弹出“选择图像源文件”对话框，单击“文 件系统”单选按钮，表示从本地硬盘上选择图像 文件。在该对话框中，选择需要插入的图像。
返回
（4）单击“确定”按钮后，弹出“图像标签辅助功能属性” 对话框，替换文本处可以为空，单击“确定”即可。
（3）按住Shift键，拖动右下方控制句柄可以等比例放大、
缩小图像。
返回
图像“属性”面板常见选项说明如下：
“图像”选项：设置图像的名称或ID，一般情况可以不输入。
“宽”和“高”选项：设置图像的宽度和高度，默认单位是像素。
“源文件”选项：显示当前图片文件的地址。
“链接”选项：指定图像的超链接地址。