网页设计与制作实验指导书.docx

网页设计与制作实验指导书.docx

《网页设计与制作实验指导书.docx》由会员分享，可在线阅读，更多相关《网页设计与制作实验指导书.docx（39页珍藏版）》请在冰豆网上搜索。

网页设计与制作实验指导书

网页设计与制作

实验指导书

主编教师：

李显萍

吉林省经济管理干部学院国际商务系

2007年9月

实验一　网页设计基础实验

一、实验目的

1．掌握商务网站设计的基本原则、网站及网页的基本风格与基本构图特点；

2．熟悉页面排版，掌握网页布局的方法。

二、实验内容

1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。

2．在网上找出下列版面布局的结构形式：

⑴．“T”结构布局

⑵．“口”型（“国”字型）布局

⑶．“三”型布局

⑷．对称对比布局

⑸．POP布局

3．找出使用大色块和抽象线条构图风格的网站（至少各2个）；

4．使用电脑中的图片工具（Photoshop）把不同图片转换为.JPG或.GIF格式，比较两种图片格式的区别。

三、实验步骤与要求

按“实验内容”中1～4完成网上的操作，完成实验报告，在实验报告中要求记录如下内容：

⑴．所访问各商务网站的风格及特点；

⑵．各种版面布局网站的域名和所采用的版面布局形式；

⑶．使用大色块和抽象线条构图风格网站的域名和所采用的构图形式；

⑷．10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、存成doc文件和html文件，上传到教师机D：

\zuoye目录下

实验二建立站点（2学时）

一、实验目的：

（1）熟悉DreamWeaverMX的界面及其操作

（2）熟悉使用DreamWeaverMX建立站点，理解本地站点和远程站点的概念

二、实验内容

本实验的内容主要是制作一个“我最喜欢的歌曲”的站点，它包括一个用来描写自己喜欢的歌曲的介绍的简单主页和若干介绍单个歌曲的网页。

三、实验步骤与要求

实验前认真预习，熟练掌握有关概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

（1）打开DreamWeaverMX，熟悉整个界面，尝试打开、关闭各种面板、视图、工具栏。

使用参数设置把常用的快捷图标添加到状态栏。

（2）规划站点（导航结构请遵循本实验的要求），然后新建站点，将站点所在文件夹命名为自己名字的汉语拼音，设计站点的结构。

（3）在站点中添加若干个网页，将其中的一个命名为index.htm并设置为主页。

（4）打开站点管理器，熟悉站点管理的界面，了解网站地图。

（5）将各个网页依次打开，进行编辑，页面中要有文字、图片、背景等网页元素。

（6）浏览各个网页的实际效果。

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点文件夹上传到教师机D:

\zuoye目录下

实验三创建简单网页实例一（4学时）

一、实验目的：

（1）熟悉基本网元素及其操作

（2）熟悉使用页面属性

二、实验内容

本实验的内容主要是制作一个“长春悠游网”网站的主页文件，它包括文本、图像、水平线以及日期和时间，效果如下图所示。

三、实验步骤与要求

实验前认真预习，熟练掌握有关概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

（1）建立一个本地站点

（2）在站点中建立一个网页文件index.htm并打开进行编辑。

（3）输入书中全部的文字内容。

（4）将“长春欢迎你”设置滚动效果的文字。

（5）对文字进行排版。

（6）插入水平线，并设置水平线的颜色。

（7）插入导航条

（8）插入图片

（9）插入日期和时间

（10）打开页面属性对话框

（11）设置网页的背景图像。

（12）浏览各个网页的实际效果。

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点进行备份留下节课使用

3、将站点文件夹上传到教师机D:

\zuoye目录下

实验四创建网页超链接（2学时）

一、实验目的：

（1）超链接的基本定义及基各种超链接的创建和编辑操作

二、实验内容

本实验的内容主要是利用上次实验的内容制作超级链接，包括文本、图像、热区以及锚点链接。

三、实验步骤与要求

实验前认真预习，熟练掌握有关概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

（1）在上一次建立的站点中添加网页文件jingyuetan.htm网页文件。

（2）打开jingyuetan.htm文件利用以前学过的知识进行编辑，制作一个网页备用。

（3）在index.htm文件中选择“净月潭国家森林公园”，利用属性面板将其链接到jingyuetan.htm上。

（4）浏览各个网页的实际效果。

（5）在jingyuetan.htm文件中顶部插入一个锚点top。

（6）在jingyuetan.htm文件最下部输入“返回页首”在属性面板上设置成锚点链接。

（7）浏览各个网页的实际效果。

（8）选择index.htm中的图片，利用热区工具画出热区，并设置超链接到jingyuetan.htm文件。

（9）浏览各个网页的实际效果。

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点文件夹上传到教师机D:

\zuoye目录下

实验五利用表格布局页（4学时）

一、实验目的：

（1）利用表格进行文本的整齐排列和自由的图文混排

（2）在整个表格内使用背景图像和色彩。

二、实验内容

本实验的内容主要是利用表格进行网页的定位练习

1.建立一个本地站点,包括2-3个网页

2.制作两个利用表格定位的网页其中一个为下图中的网页，另一个可以自由发挥

3.设置超链接将站点中的网页链接起来。

三、实验步骤与要求

实验前认真预习，熟练掌握有关概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师，并保存设计结果。

（1）建立一个本地站点

（2）在站点中建立一个网页文件index.htm并打开进行编辑。

（3）最外层的表格宽度为700像素，嵌套的表格宽度为100%，整体上分为上下两个表格。

（4）上表格为2行1列的表格如图一所示。

图一布局表格一

（5）下表格为4行3列的表格如图二所示。

图二布局表格二

（6）将下表格的单元格进行合并，调整为如图三所示

图三布局表格三

（7）在下表格的左侧嵌套7行1列的表格，在下表格的右侧上边单元格内嵌套1行1列的表格，在右侧下边单元格嵌套2行4列的表格。

如图四所示。

图四布局表格四

（8）在左侧嵌套的表格最下面一个单元格嵌套5行2列表格并合并如图五所示。

图五布局表格五

（9）上表格的第二行和下表格右侧第二行制作水平线，将单元格的高度设为“2”；下表第二列制作垂直线，宽度值勤为“2。

”

（10）向表格内添加图像和文字，将所有表格的边框值设置为“0”。

（11）浏览网页的实际效果。

（12）设计另一个自由发挥的网页。

（13）用超链接将两者链接起来

（14）浏览网页的实际效果，并测试超链接的有效性。

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点进行备份留下节课使用

3、将站点文件夹上传到教师机D:

\zuoye目录下

实验六框架网页的创建（2学时）

一、实验目的：

（1）框架网页的创建和编辑操作

（2）目标框架的设定

二、实验内容

本实验的内容主要是利用框架结构来建立网页，并设置目标框架。

1.建立一个本地站点,包括2-3个网页

2.用框架结构为网页布局,其中一个网页为下图,其他网页自由发挥.

3.设置网页间的超链接,并设置目标框架.

三、实验步骤与要求

实验前认真预习，熟练掌握有关框架网页的基础概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

（1）新建一个空白文档，创建一个“上方及左侧嵌套”，右侧下方框架为主框架（mainFrame）。

（2）保存框架及框架集

（3）在顶部框架中插入图像

（4）左侧框架中设置页面属性背景图像。

（5）在左侧框架中插入7行1列无边框架和背景表格。

（6）在表格中插入导航图像按钮。

（7）在右侧框架中插入文字、图像等网页元素。

（8）制作两个网页分别命名为dianyin.html和jingyue.html，保存在同一站点内。

（9）为左侧导航按钮制作超链接，设置链接目标为“mainFrame”。

（10）单击菜单栏“文件”|“保存全部”

（11）预览网页并检测超链接是否在指定框架内打开。

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点文件夹上传到教师机D：

\zuoye目录下

实验七表单网页的创建（2学时）

一、实验目的：

（1）熟悉表单的各元素

（2）创建表单网页实例

二、实验内容

本实验的内容主要是熟练表单的基本操作，并制作表单网页。

1.建立一个本地站点,包括2-3个网页

2.其中一个网页为表单网如下图,其他网页为中含中表单项目自由发挥制作.

3.设置超链接将站点中的网页链接起来。

表单网页一

表单网页二

三、实验步骤与要求

实验前认真预习，熟练掌握有关概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师。

（1）建立一个本地站点

（2）在站点中建立一个网页文件index.htm并打开进行编辑。

（3）绘制布局表格

（4）在表格中插入相应的表单元素。

（5）对网页内容进行排版。

（6）浏览网页的实际效果。

（7）在站点中建立一个网页文件liuyan.htm并打开进行编辑。

（8）绘制布局表格

（9）在表格中插入相应的表单元素。

（10）对网页内容进行排版。

（11）浏览网页的实际效果。

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点文件夹上传到教师机D：

\zuoye目录下

实验八简单的CSS样式使用（4学时）

一、实验目的：

（1）利用CSS定义鼠标的形状。

（2）利用CSS滤镜增加页面效果。

二、实验内容

利用CSS定义鼠标的形状，利用CSS滤镜增加页面效果。

三、实验步骤与要求

实验前认真预习，熟练掌握有关概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师。

（一）鼠标样式的设置

（1）建立一个本地站点

（2）在站点中建立一个网页文件index.htm并打开进行编辑。

（3）新建一个网页并在网页中插入一幅图像，如图8.1所示，保存文档。

图8.1网页示例一

2．在CSS样式面板中，单击

按钮，打开“新建CSS规则”对话框，如图8.2所示。

图8.2新建样式表对话框

3．输入CSS样式的名称“.shubiao”，“选择器类型”选择“类”选项，“定义在”选择“仅对该文档”。

4．点击“确定”，打开“.shubiao的CSS规则定义”对话框，切换到“扩展”分类，如图8.3。

图8.3CSS规则定义对话框

5．在“视觉效果”的“光标”的下拉列表中选择“help”，单击“确定”按钮，样式建立完成。

6．选中图像，执行以下操作之一：

·在CSS面板中，右击.shubiao样式，在弹出的快捷菜单中选择“套用”命令。

·在“属性检查器”的“类”的下拉列表中选择“shubiao”。

7．保存网页，在浏览器中鼠标指向图像测试效果如图8.4所示。

图8.4改变鼠标效果示例

（二）ＣＳＳ滤镜的使用

1．新建一个网页并在网页中插入两幅相同的图像，如图8.5所示，保存文档。

图8.5网页示例

2．在CSS样式面板中，单击

按钮，打开“新建CSS规则”对话框。

如图8.6所示。

图8.6新建CSS规则对话框

3．名称中输入“.blur”，“选择器类型”选择“类”，“定义在”选择“仅对该文档”。

4．设置完成后，单击“确定”按钮，打开“.blur的CSS规则定义”对话框，切换到“扩展”分类，如图8.7所示。

5．在“滤镜”中选择Blur滤镜，参数设置如下：

Blur（Add=true,Direction=135,Strength=20）。

Add：

设置图片是否被改变成印象派的模糊效果。

有两个值：

true（默认）和false。

Direction：

指定模糊方向。

0——垂直向下；45——垂直向右；90——向右；135——向下偏右；180、225、270、315分别是垂直向下、向下偏左、向左、向上偏左。

Strength：

指定有多少像素的宽度将受到模糊影响。

值只能使用整数来指定，默认是5像素。

6．设置完成后，单击“确定”，创建的CSS样式出现在CSS面板。

7．选中文档中的右侧图像，执行以下操作之一：

·在CSS面板中，右击.blur样式，在弹出的快捷菜单中选择“套用”命令。

·在属性检查器的“类”的下拉列表中选择“blur”。

8．保存并在浏览器中预览网页，效果如图8.8所示。

图8.7.blur的CSS规则定义对话框

图8.8应用blur滤镜的效果图

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点文件夹上传到教师机D：

\zuoye目录下

实验九　时间轴动画制作（2学时）

一、实验目的

1．掌握时间轴和层的基本理论

2．熟悉层面板，利用时间轴制作层动画。

二、实验内容

使用层和时间轴制作动画：

1.建立一个本地站点,包括2-3个网页

2、在网页上添加如下的时间轴动画

（1）层的曲线运动

（2）录制层路径

三、实验步骤与要求

1．层的曲线运动

（1）新建一个文档并保存。

（2）在文档中插入一个层，在“属性检查器”中命名层编号为fish，并在层中插入一幅图像。

并将层拖到时间轴面板中，如图9.1所示。

图9.1将层拖到时间轴中

（3）选择动画条右侧端点，即右侧关键帧。

（4）在文档中将层向右侧拖拽，这时会在文档中出现一条灰色的直线，表示动画运动的路线，如图9.2所示。

图9.2拖拽最后关键帧上的层

（5）保存并在浏览器中预览，或按住播放

键，可以看到鱼向右移动，是一个直线运动的动画。

（6）若要使层的运动路线形成曲线，则需要在动画条的中间增加的关键帧，并选择此关键帧，在文档中将层向下拖拽，这样就形成了一条向下的曲线，如图9.3所示。

图9.3层的曲线运动

2．录制层路径

（1）新建一个文档，并保存。

（2）在文档中绘制一个层，在“属性检查器”中命名该层编号为“butterfly”，并在层中插入一张蝴蝶的图像。

如图9.4所示。

图9.4绘制层并插入图像

（3）将层移到起始位置，在层边框上单击鼠标右键，在快捷菜单中选择“录制层路径”的命令。

（4）在文档窗口中拖拽层，在停止位置松开鼠标，Dreamweaver8会在后台记录下层移动的路径，并在动画条上产生相应的关键帧。

如图9.5所示。

图9.5录制层的路径

（5）保存并在浏览器中预览，或按住播放

键，观看动画播放效果。

（6）若要修改层的运动路线，在动画条选择关键帧，拖动层即可。

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点进行备份留下节课使用

3、将站点文件夹上传到教师机D:

\zuoye目录下

实验十　简单的行为的应用2学时

一、实验目的

（1）添加内置的行为。

（2）设置触发行为的事件

二、实验内容

利用Dreamweaver添加内置行为和设置触发事件，为网页增加页面效果。

1.建立一个本地站点,包括2-3个网页

2.为每网页添加一种行为.

3.设置超链接将站点中的网页链接起来。

三、实验步骤与要求

实验前认真预习，熟练掌握有关行为和事件的概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师。

（一）播放声音

1．打开一个网页，选择行为的对象如某一图像，也可单击窗口下方的标签，为整个页面增加行为。

2．在行为面板上，单击“+”按钮，从下拉菜单中选择“播放声音”。

3．打开“播放声音”对话框，如图10.1所示。

图10.1播放声音对话框

4．在文本框中输入声音文件的路径和名称，也可单击“浏览”按钮，选择要播放的声音文件。

5．单击“确定”按钮。

在网页中出现如图10.2所示的占位符，此图标在浏览器将不会出现，不影响页面的美观。

图10.2播放声音图标

6．在行为面板设置事件，如设为“OnLoad”。

7．保存并在浏览器中预览网页，观看效果。

（二）设置状态栏文本

设置状态栏文本，可以设置浏览器状态栏中显示的信息。

增加“状态栏文本”行为的操作为：

1．打开一个网页，选择窗口下方的标签。

2．在行为面板上，单击“+”按钮，打开下拉菜单，从中选择“设置文本”子菜单中的“设置状态栏文本”。

3．打开“设置状态栏文本”对话框，如图10.3所示。

4．输入要显示的信息，单击“确定”按钮。

5．在行为面板设置事件，如设为“OnLoad”。

6．保存并在浏览器中测试行为，如图10.4所示。

图10.3设置状态栏文本对话框

图10.3设置状态栏文本网页

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点进行备份留下节课使用

3、将站点文件夹上传到教师机D:

\zuoye目录下

实验十一网页中多媒体的应用2学时

一、实验目的

（1）掌握在网页中插入各种音频文件的操作

（2）掌握在网页中插入Flash文件的操作

（3）掌握在网页插入视频文件的操作

二、实验内容

1.建立一个本地站点,包括2-3个网页

2.分别在网页添加如下的多媒体效果:

（1）插入音频文件

（2）插入Flash文件

（3）插入视频文件

三、实验步骤与要求

实验前认真预习，熟练掌握有关行为和事件的概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师。

（一）在网页中嵌入音频文件

1．打开要嵌入音频文件的网页，定位光标在要插入音频的位置。

如图11.1所示。

2．单击菜单栏中“插入”|“媒体”|“插件”命令，打开选择文件对话框，选择要插入的音频文件，在网页插入相应的音频文件，如图11.2所示。

图11。

1嵌入音频文件网页示例图11。

2嵌入音频文件网页示例一

4．保存并在浏览器中预览网页，播放器没有完全显示出来，如图11.3所示。

图11.3嵌入音频网页示例二

5．返回Dreamweaver8，选择插件，在属性面板中设置高度和宽度值，调整音频插件占位符的大小，并在浏览器中测试，到播放器完全显示，浏览者可以对音频文件的播放进行控制。

如图11.4所示。

图11.4嵌入音频网页示例三

（二）插入Flash动画

1．新建并保存网页，定位光标在要插入Flash动画的位置。

2．执行以下操作之一：

•单击菜单栏中“插入”|“媒体”|“Flash”命令。

•在“插入”栏的“常用”类别中，选择“媒体”，单击“Flash”，如图11.5所示。

图11.5利用“插入”栏“常用”类别插入Flash动画

3．打开选择文件对话框，如图11.6所示。

4．选择要插入的Flash文件，如选择“huanyin.swf”。

图11.6”选择文件“对话框

5．单击“确定”按钮，则Flash动画插入了网页中，如图11.7所示。

图11.7插入网页中的Flash动画

6．选中插入的Flash动画，单击属性检查器上的“播放”按钮，播放动画观看效果，也可以在浏览器中观看效果。

（三）在网页中嵌入视频文件

嵌入音频文件的操作与嵌入音频文件的操作相同，在“选择文件”对话框，选择要嵌入的视频文件就可以了。

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点进行备份留下节课使用

3、将站点文件夹上传到教师机D:

\zuoye目录下

实验十二模板和库在网页中的应用2学时

一、实验目的

（1）掌握模板和库项目的创建操作

（2）能够应用模板和库设计网页

（3）掌握利用模板和库更新页面的方法

二、实验内容

1.建立一个本地站点,包括2-3个网页

2.在网站中创建模板和库项目

3.在网站利用模板创建网页.

4.在网页添加库项目并修改后进行更新

三、实验步骤与要求

实验前认真预习，熟练掌握有关模板和库的概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师。

（一）模板

（Ⅰ）创建空白模板

1．单击菜单栏中“窗口”|“资源”命令，打开“资源”面板。

2．单击“资源”面板左边的“模板”按钮

，显示“模板”类别

3．单击面板底部的“新建”

按钮，面板中出现一个未命名的模板

4．输入新的模板名字，则新建一个空白模板。

（Ⅱ）设计模板

打开己建立的空白模板设计如图12.1

图12.1模板网页示例

（Ⅲ）设置可编辑区域

1．打开己设计的模板文件index.dwt。

2．选择“长春介绍”。

3．单击菜单栏中“插入”|“模板对象”|“可编辑区域”命令。

4．打开新建可编辑区域对话框，如图12.2所示。

图12.2新建可编辑区域对话框

5．在“名称”文本框输入可编辑区域名称。

6．单击“确定”，退出“可编辑区域对话框”，建立的“可编辑区域”为绿色框线区域，如图12.3所示。

图12.3建立可编辑区域示例

7．用相同的操作将“长春是个具有欧洲田园城市规划特点的城市，”等文本设置为可编辑区域。

8．完成的模板页如图12.4所示。

图12.4建立可编辑区域示例

（Ⅲ）将己有网页应用模板

1．打开要应用模板的网页文件。

2．执行以下操作之一：

·单击菜单栏中“修改”|“模板”|“套用模板到页”命令。

·在“资源”面板中，选择要应用的模板，单左下角的“应用”按钮。

3．网页应用了所选模板。

（二）库

（Ⅰ）创建空白库项目

1．单击菜单栏中的“窗口”|“资源”命令，打开“资源”面板，单击左下角的库

按钮，切换到“库”类别

2．单击面板底部的“新建”

按钮，面板中出现一个未命名的库。

3．输入新的库项目名字，则新建一个空白库项目。

（Ⅱ）为库添加内容

为库添加内容的操作为：

1．在“资源”面板“库”类别中，双击要编辑的库，将库打开。

2．除了不能设置页面属性外，编辑库与编辑普通网页一样的操作是一样的。

四、说明：

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同