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

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

主编教师：李显萍

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

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目录下