html网页设计期末大作业_网页设计平时作业3

1、准备网页内容

因为页面布局要用到的表格在后面的章节才能讲到，在这里先避开这部分内容，直接将已做好的网页复制到Myfoodball站点中作为足球新闻页news.html。

步骤

①启动Dreamweaver CS6，打开“文件”面板，选中站点myfootball。

②将“平时作业3”里 的images文件夹及news.html文档复制到站点的news文件夹下，取代原来已创建的news.html文档。

2、创建超链接

(1)创建内部链接

步骤

①选中如图所示的news.html页面中的文字“首页”之后，直接在“属性”面板中单击“链接”文本框右侧的文件夹图标，通过浏览选择一个文件。这里选择index.html，如图所示。

②从“目标”下拉框中，选择文档打开的位置。若要使所链接的文档出现在当前窗口或框架以外的位置，可从“属性”面板的“目标”下拉框中选择一个选项，这里选择_blank。

③用同样的方法，可创建“我与足球”、“明星照片”的链接，分别为“..\aboutme\me.html”和"..\photo\photo.html"文件。

(2)创建外部链接

步骤

①将光标定位在网页中心的某个新闻条目上(呈蓝色字体)，查看其“属性”面板中的“链接”文本框中的外部链接地址，发现与内部链接不同的是，外部链接地址是http://开头的，称之为绝对地址。

②选中页面最下方的“世界杯新闻”块的条目，直接在“属性”面板的“链接”文本框中输入外部的链接地址，如https://sports.qq.com/，如图所示。还可以通过选择“插入”菜单的“超级链接”命令(或在“插入”面板中单击按钮)，在“超级链接”对话框中设置各种链接，如图。

③从“属性”面板的“目标”下拉菜单中设置这个链接的目标窗口为_blank。

(3)创建E-mail链接

步骤

①选择网页中文本“联系我们”，右击，在弹出的快捷菜单中选择“剪切”命令，将文本放到剪贴板上。

②选择“插入”面板组中的“常用-电子邮件链接按钮”，打开如图所示对话框。在“文本”框中输入或粘贴链接文本“联系我们”，在E-mail中输入电子邮件地址。

③单击“确定”按钮，完成E-mail链接的创建。

(4)创建锚点链接

第一步：创建命名锚记，也就是在文档中设置位置标记，并给该位置一个名称，以便引用。

步骤

①将光标定位在标题“足球综合新闻”处，选择“插入”面板组中的“常用-命名锚记按钮”。

②在弹出的“命名锚记”对话框中输入该锚记的名称zh(注意分大小写)，如图所示，然后单击“确定”按钮，名为zh的锚点即被插入到文档中的相应位置。

③依次创建页面中标题的命名锚记如下。

④创建命名锚记后，在页面上相应位置就做上了标记，如图所示。

第二步：链接锚点，即将相应文字或图片的超链接指向当前页面中的锚记上。

步骤

①选择要创建链接的文本或图像，这里在页面的左侧放置了9个相应条目的链接按钮图片，选中“综合新闻”图片。

②在“属性”面板的“链接”文本框中，输入#号和锚记名称，即#zh，表示链接到当前文档的锚记位置，如图所示，也可以在“浏览”对话框中，选中要链接的文件名后加#和锚记名称，链接到某一文档的某一位置。

③再一次选中“英超新闻”、“意甲新闻”、“德甲新闻”、“西甲新闻”、“法甲新闻”、“冠军杯新闻”、“联盟杯新闻”、“世界杯新闻”按钮，分别链接到前面已创建好的命名锚记上。

(5)创建下载链接

步骤

①将供下载的资源放在一个文件夹中，并压缩为.rar文件或.zip文件，如a1.rar，将制作好的文件复制到创建好的网站中。例如将压缩后的a1.rar文件复制到站点文件夹news内。

②选中页面上方导航栏中的链接文本“资源下载”，在“属性”面板中设定链接的文件为刚才复制到站点中的a1.rar文件，如图。

③在浏览时单击“资源下载”命令，会弹出如图所示的“下载文件”对话框，在此可以选择将链接的文件打开或保存的位置。

(6)创建空链接

在news.html页面上方横向的导航栏中，有到自身页面“足球新闻”的链接，将其制作成空链接，可以使其既具有链接的外观，却又不会跳转到其他任何位置上去。链接的方法为选中要制作空链接的文本“足球新闻”，在“属性”面板的“链接”文本框中输入“#”或输入“JavaScript:;”即可，如图所示。

3、创建“跳转菜单”

在页面左侧下方的友情链接中，插入一个跳转菜单，即文档中的下拉式菜单，在其中列出链接地址，单击其选项可以跳转到相应的页面，如图所示。

步骤

①选择“插入”面板组的“表单”类别中的“跳转菜单”按钮。

②在弹出的如图所示的“插入跳转菜单”对话框中，设置“文本”为要在菜单列表中出现的文本，在“选择时，转到URL”文本框中，通过浏览找到要打开的文件，或在文本框中输入文件的路径。单击“添加项”按钮添加一个菜单项，如此设置多个菜单项。这时如果选定一个菜单项，然后单击“移除项”按钮可将其删除。

③如果在“插入跳转菜单”对话框中“选项”下的“菜单之后插入前往按钮”复选框，可添加一个“前往”按钮。

④单击“确定”按钮后，一个标准的跳转菜单就实现了。

⑤设置完成后，如果希望编辑跳转菜单的选项，可以选中跳转菜单后，单击其“属性”面板中的“列表值”按钮进行修改，如图所示。

4、创建“图像地图”

可以对整个图像创建超链接，也可以对它的某一个局部创建超链接(成为热区)，即创建“图像地图”。

步骤

①在页面中选择友情链接下方的图像，在“属性”面板中选择使用热区工具(矩形、椭圆、多边形)在图像上划分热区，如图所示。

②选择椭圆工具，并将鼠标指针拖至图像上，松开鼠标时弹出信息提示框，如图所示，单击确定创建一个圆形热区。

③在“属性”面板中会出现的对话框中，为绘制的热点区域设置不同的链接地址https://sports.qq.com/ 和替代文字“腾讯体育”，如图所示。

④选择矩形工具，可创建一个矩形热区。选择多边形工具，在各个顶点上单击，然后单击选择工具封闭此形状，可创建不规则形状的热区。

⑤按F12键浏览网页，当鼠标指向热区时，鼠标变为“小手”形状，单击后可以访问不同的链接地址。

5、保存文件

至此，本案例已基本完成，现在需要将网页保存，由于本页面是从站点页面中打开的，因此，此时保存只需单击“文件”菜单下的“保存”命令即可。

此案例摘自葛艳玲《网页设计基础教程》