结合网页制作工具,运用HTML语言编写多页面个人网站,要求用到图片、表格、列表、动画,能够熟练使用超级链接,并能理解网页中html语句的含义。要求学生制作个人网站,并能够在规定的时间内压缩上传到网络课程平台上。
认真完成作业压缩后上传。
网页制作素材、软件以及实验指导下载地址为“课程内容”中第3章的“辅助资源”里。
实验指导
第二节制作简单网页
【相关知识】
1. 网页就是在浏览器上看到的一个一个的页面。它们都是用HTML的文件格式来表示
的。
2. 在页面属性中,可以对网页的标题、背景颜色等进行设置。
3. 在HTML文档中,文件头
和标签之间的内容在网页中是看不到的。可以在文件头信息中插入META、关键字、说明等。META元素用于描述网页文件自身的信息。在搜索引擎中,检索信息都是通过输入关键字来实现的。
4. 在历史面板中,按照操作的顺序记录了使用者在文档窗口中的所有操作。使用历史
面板可以非常方便地撤销以前的操作或再次执行某些操作。
【实验3.2】
一、实验目的和要求
1. 熟悉Dreamweaver工作环境。
2. 掌握创建网页文档的方法。
3. 掌握页面属性设置的方法。
4. 掌握在页面中插入和编辑文本的方法。
5. 掌握在页面中创建项目列表的方法。
二、实验内容
1. 新建一个网页文档,并保存在指定位置。
2. 为网页文档设置标题、背景颜色等页面属性。
3. 在网页文档中插入文本,并设置文本的字体、颜色、字号等属性。
4. 创建项目列表。
5. 在文档中添加特殊网页元素:日期时间、空格和水平线等。
6. 插入META、关键字、说明等文件头信息。
7. 使用历史面板执行操作的撤销和重播等。
三、实验步骤
1. 新建一个网页文档
启动Dreamweaver。单击【文件】→【新建】菜单命令,新建一个网页文档。
2. 设置页面属性
(1)单击【修改】→【页面属性】菜单命令,打开【页面属性】对话框。
(2)在【分类】列表框中选择【外观】,设置页面【字体】为“宋体”;字体【大小】为“中”;【文本颜色】为“#0033FF”;【背景颜色】为“#FFFFCC”。如图3-6所示。
图3-6 【页面属性】对话框
(3)在【分类】列表框中选择【标题/编码】选项,设置【标题】为“我的第一个网页”。(4)单击【确定】按钮。
3. 格式化文本
(1)在文档的第1行输入“网页制作课程介绍”。
(2)选中所有文字,在属性面板的【字体】下拉列表中选择“黑体”;在【大小】下拉列表中选择“大”;单击【居中对齐】按钮。
(3)如果字体下拉列表中没有“黑体”,则单击【字体】下拉列表中的【编辑字体列表】选项,打开【编辑字体列表】对话框。如图3-7所示。
图3-7 【编辑字体列表】对话框
(4)在对话框的【可用字体】列表中选中“黑体”,单击按钮,将“黑体”添加到【选择的字体】列表中。单击【确定】按钮,将“黑体”添加到字体下拉列表中。
4. 创建项目列表
(1)在文档的第2行输入“网页布局软件Dreamweaver”。第3行输入“图像处理软件Fireworks”。第4行输入“动画制作软件Flash”
(2)选中第2-4行所有文字,在属性面板中单击【项目列表】按钮。创建项目列表。
5. 添加特殊网页元素
(1)将光标放在第1行末尾处,单击【插入】→【日期】菜单命令,打开【插入日期】对话框。如图3-8所示。在对话框的【星期格式】下拉列表中选择“星期四,”;在【日期格式】列表中选择“1974年3月7日”;在【时间格式】下拉列表中选择“10:18 PM”;
选中【储存时自动更新】复选项。单击【确定】按钮。插入当前系统日期和时间,并且在文档每次修改后都会自动更新插入的日期和时间。
图3-8 【插入日期】对话框
(2)将光标放在第1行末尾处,单击回车键,将光标放在第2行起始处。
(3)单击【插入】→【HTML】→【水平线】菜单命令,在文档中插入一条水平线。
(4)选中该水平线,在属性面板中,设置水平线的【宽】为“700像素”;【高】为“5像素”;在【对齐】下拉列表中选择“居中对齐”;设置【阴影】复选项为不选中。
6. 使用颜色面板
在网页设计中,很多场合都需要使用颜色面板设置颜色,对颜色面板的操作方法是相同的。这里以设置文本的颜色为例进行说明。
(1)选中文本,在属性面板中,单击【文本颜色】按钮,打开颜色面板,如图3-9所示。
图3-9 颜色面板
(2)选取一种颜色。如果颜色面板中没有符合需要的颜色,可以单击颜色面板上的【系统颜色拾取器】按钮,打开【颜色拾取器】面板,自己拾取一种颜色。
7. 插入文件头信息
(1)单击【插入】→【HTML】→【文件头标签】→【META】菜单命令,打开【META】对话框。在对话框的【属性】下拉列表中选择“名称”;设置【值】为“Content-Type”;
设置【内容】为“text/html;charset=gb2312”。单击【确定】按钮,即可设置META元素。如图3-10所示。
图3-10 【META】对话框
(2)单击【插入】→【HTML】→【文件头标签】→【关键字】菜单命令,打开【关键字】对话框。在文本框中输入关键字。多个关键字之间用逗号分隔。单击【确定】按钮,即可插入关键字,实现按关键字对网站信息的搜索。如图3-11所示。
图3-11 【关键字】对话框
(3)单击【插入】→【HTML】→【文件头标签】→【说明】菜单命令,打开【说明】对话框。在文本框中输入说明文字。单击【确定】按钮,即可插入说明。
(4)单击【插入】→【HTML】→【文件头标签】→【刷新】菜单命令,打开【刷新】对话框。设置【延迟】为“500秒”;在【操作】处选中“刷新此文档”。单击【确定】按钮,即可实现对页面的自动定时刷新。如图3-12所示。
图3-12 【刷新】对话框
8. 使用历史面板
(1)单击【窗口】→【历史记录】菜单命令,打开【历史记录】面板。拖动【历史记录】面板上的滑块,可以撤销若干操作。回到操作前的状态。
(2)按住【Shift】键,单击【历史记录】面板上的多个记录。单击【历史记录】面
板右上角的按钮,弹出快捷菜单。选择【重播步骤】菜单命令,可以再次执行这些操作。
(3)单击【历史记录】面板右上角的按钮,弹出快捷菜单。选择【清空历史记录】菜单命令,可以清空所有历史记录。
9. 保存网页文档
单击【查看】→【工具栏】→【标准】菜单命令,添加标准工具栏。在标准工具栏上单击【保存】按钮。文件命名为index.html,将网页文档保存。
10. 预览网页
单击【F12】,或者单击【文件】→【在浏览器中预览】→【IExplore 6.0】菜单命令,在浏览器中打开网页,可以预览设计效果。
【操作技巧与注意事项】
1. 在设置页面属性时,一般将左右边距都设置为“0”。使得页面不会有太多空白区。
2. 文件头信息还包括基础和链接等。它们在网页中是不可见的。
【思考题】
1. 简述设置网页的背景图像的步骤。
2. 如何在网页文档中插入日期和时间?
3. 如何在网页文档中插入文件头信息?
第三节超链接和导航条
【相关知识】
1. URL(Uniform Resource Locators)的中文全称是“统一资源定位器”。它的功能是
提供一种在Internet上查找任何信息的标准方法。
2. 超链接是网页中由一个地方跳转到另一个地方、网页、网站或文件的指针。
3. 绝对路径提供链接目标端点所需的完整的URL地址,包括使用的协议类型。
4. 相对路径是目标端点与源端点之间的相对位置,它的参考点是源端点,与协议类型、
网址和根目录的位置无关。
5. 基于根目录的路径可以看作是一个基于本网站的根目录的相对路径,通常用一个“/”
表示根目录。不管源端点在哪个文件中,都可以使用正确的路径链接到指定的位置。
【实验3.3-1】
一、实验目的和要求
1. 掌握创建文本超链接的方法。
2. 掌握创建图像超链接的方法。
3. 掌握创建电子邮件超链接的方法。
4. 掌握创建锚记超链接的方法。
5. 掌握设置超链接属性的方法。
二、实验内容
1. 新建一个网页文档。创建文本超链接。
2. 插入一个图像,并为其创建图像超链接。
3. 使用工具按钮创建电子邮件超链接。
4. 在文档中创建和编辑锚记,并创建锚记超链接。
5. 为所创建的超链接设置属性。
三、实验步骤
1. 新建一个网页文档
启动Dreamweaver。单击【文件】→【新建】菜单命令,新建一个网页文档。
2. 创建文本超链接
(1)在网页中输入“文本超链接”。选中这些文字。
(2)打开属性面板,执行以下操作之一:
在【链接】选项处直接输入链接的URL。
单击【链接】选项后面的【浏览】按钮,打开【选择文件】对话框,选中
要链接的文件。
直接拖动【链接】选项后面的【指向文件】按钮到站点中要链接的文件上。
(3)在属性面板的【目标】下拉列表中选择“_blank”,在新的浏览器窗口中打开目标网页。
3. 创建图像超链接
(1)在网页中单击【插入】→【图像】菜单命令,选择一幅图像,插入到网页中,并将其选中。
(2)打开属性面板,执行以下操作之一:
在【链接】选项处直接输入链接的URL。
单击【链接】选项后面的【浏览】按钮,打开【选择文件】对话框,选中要链接的文件。
直接拖动【链接】选项后面的【指向文件】按钮到站点中要链接的文件上。
(3)在属性面板的【目标】下拉列表中选择“_blank”;在【替换文本】处输入“图像超链接”。
4. 创建电子邮件超链接
(1)单击工具栏中的【电子邮件链接】按钮,或者单击【插入】→【电子邮件链接】菜单命令。打开【电子邮件链接】对话框。
(2)在对话框的【文本】处输入链接提示文字“联系我们”;在【E-Mail】文本框中输入E-Mail地址“web@https://www.doczj.com/doc/a87087513.html,”。如图3-13所示。
图3-13 【电子邮件链接】对话框
(3)在属性面板的【目标】下拉列表中选择“_blank”。
5. 创建锚记超链接
(1)在网页中,将插入点放置到要创建锚记的位置上。
(2)单击工具栏中的【命名锚记】按钮,或者单击【插入】→【命名锚记】菜单命令。打开【命名锚记】对话框,如图3-14所示。在【锚记名称】文本框中输入锚记名称“anchor”。单击【确定】按钮,在文档中出现一个锚标记。
图3-14 【命名锚记】对话框
(3)选中要创建链接的文本,在属性面板的【链接】文本框中输入锚记的超链接地址。
如果锚记在当前文档中,则输入“#anchor”;如果锚记不在当前文档中,则输入链接文档的URL+“#anchor”。
6. 设置超链接的属性
(1)单击【修改】→【页面属性】菜单命令,打开【页面属性】对话框。
(2)在【分类】列表中选中【链接】选项。在【链接字体】下拉列表中选择“黑体”;
在【大小】下拉列表中选择“中”;设置【链接颜色】为“#0033FF”;设置【已访问链接】颜色为“#999999”;在【下划线样式】下拉列表中选择“始终无下划线”。如图3-15所示。
图3-15 【页面属性】下的【链接】对话框
(3)单击【确定】按钮。设置完毕。
7. 保存、预览
将文档保存为“link.html”。单击【F12】键在浏览器中预览。
【实验3.3-2】
一、实验目的和要求
掌握检查链接的方法。
二、实验内容
打开实验3.3-1制作的网页“link.html”。设置检查范围,检查其中的所有链接是否正确。
1. 打开网页
单击【文件】→【打开】菜单命令,打开实验3.3-1制作的网页“link.html”。
2. 检查链接
(1)执行以下操作之一,打开【链接检查器】面板。
单击【站点】→【检查站点范围的链接】菜单命令。
打开【文件】浮动面板,选中站点。单击鼠标右键,弹出快捷菜单,选择【检查链接】→【整个本地站点】菜单命令。
(2)在【链接检查器】面板上单击【检查链接】按钮,在弹出的快捷菜单中选择“检查整个当前本地站点的链接”。如图3-16所示。
图3-16 【检查链接】按钮的快捷菜单
(3)在【链接检查器】面板上,选中【显示】下拉列表中的【断掉的链接】选项,在【链接检查器】面板上立刻可以显示检查结果。如图3-17所示。双击【断掉的链接】列表中的文件,立刻将该文件打开,这时可以直接修改链接URL地址。
图3-17 【链接检查器】面板
【实验3.3-3】
一、实验目的和要求
掌握制作导航条的方法。
二、实验内容
新建一个网页文档。在网页上插入和修改导航条。保存文档,并预览网页。
1. 新建一个网页文档
启动Dreamweaver。单击【文件】→【新建】菜单命令,新建一个网页文档。
2. 插入导航条
(1)制作5个大小、风格相同的关于“新闻资讯”、“公司简介”、“产品项目”、“合作伙伴”、“招聘信息”的图片。每个图片还要制作出四种不同的效果,为原始图像、鼠标经过图像、按下图像和按下时鼠标经过图像四种状态服务。
(2)将光标放在网页上要插入导航条的位置上,单击【插入】→【图像对象】→【导航条】菜单命令,或者单击工具栏中的【图像】按钮,在弹出的快捷菜单中选择【导航条】菜单命令,打开【插入导航条】对话框。
(3)单击【确定】按钮,添加导航条项目,输入如表3-1所示的导航条数据。其中图像文件可以单击【浏览】按钮进行选择。
(4)单击【确定】按钮,在网页上插入一个导航条。
3. 修改导航条
(1)选中导航条,单击【修改】→【导航条】菜单命令,打开【修改导航条】对话框。(2)对导航条的内容进行编辑。
4. 保存、预览
将文档保存。单击【F12】键在浏览器中预览。
【操作技巧与注意事项】
1. 创建超链接最重要的是正确地设置其URL。设置时注意选择合适的路径类型。
2. 在插入导航条时,必须输入【状态图像】。
3. 在属性面板中,【目标】选项决定目标网页在哪个浏览器窗口中打开。选项的含义如下:
“_blank”表示在新的未命名浏览器窗口中打开目标网页。
“_parent”表示在父框架集或包含该链接的框架窗口中打开目标网页。
“_self”表示在与该链接相同的浏览器窗口中打开目标网页。
“_top”表示在整个浏览器窗口中打开目标网页,并删除所有框架。
1、在HTML中,()标记不可出现在
和标记符之间。(C) (A)