中南民族大学管理学院

学生实验报告

课程名称： 网页制作与网站建设

年　 级：　　 2014　　

专　 业： 信息管理与信息系统

指导教师：　 杨 单　

实验地点： 16号实验楼218/222

学 号：　　201421074039 　　

姓 名：　　 唐 子 璇 　　

2014学年至2015学年度第 2 学期

目 录

实验一 HTML基本操作

实验二 Dreamweaver基本操作

实验三 网页布局操作

实验四 CSS基本操作

实验五 模板和库文件应用

实验六 网页特效应用

实验（一） HTML基本操作

实验时间：　　　2015.04.23　　

实验目的：

1. 掌握网页的基本HTML结构。

2. 熟悉常用HTML标记的使用方法。

实验内容：

1、基本HTML结构 

    

 静夜思 楷体">  

2、标记的使用

（1）”red”> 设置背景颜色

”red”> 设置文本颜色

”red”> 设置超链接颜色

”red”> 设置已使用的超链接的颜色

（2）输入标题

标题标记,其中n为标题的等级，共分为6个等级的标题，n越小，标题字号就越大。

一级标题

（3）划分段落

left（左对齐） center（居中） right（右对齐）

例如： ”center”>

（4）
回车换行

当在

（5）插入图片

”picname”> 

图片链接 ”URL”>”picname”> 

（6）创建外部链接 

结构：超链接标记、属性Href及其值、显示在网页

上作为链接的文字。

格式：”URL”>显示的文字 

1、链接目标位于HTML文档所在文件夹的子文件夹中，使用

相对路径地址来指向该目标：  

”bbs\login.html”>登录 

2、使用绝对路径来指向目标： 

”/c:\my\login.html”>登录 

实验步骤

打开文本编辑器“记事本”中输入HTML代码,建立一个具有基本结构标记的HTML文件，然后另存为.html文件，并在浏览器中运行。

实验结果分析

成功完成了自己的第一个最简单的网页

指导教师批阅：

1、 实验态度：不认真（　），较认真（　），认真（　）

2、 实验目的：不明确（　），较明确（　），明确（　）

3、 实验内容：不完整（　），较完整（　），完整（　）

4、 实验步骤：混乱（　），较清晰（　），清晰（　）

5、 实验结果：错误（　），基本正确（　），正确（　）

6、 实验结果分析：无（　），不充分（　），较充分（　），充分（　）

7、 其它补充：

总评成绩：

评阅教师（签字）：

评阅时间：

实验（二） Dreamweaver基本操作　　

实验时间：　　2015.04.30　　　

实验目的

1.熟悉Dreamweaver操作界面，文档和本地站点的创建； 2.练习使用Dreamweaver编辑网页；

实验内容

1.站点设置  

 1）执行“站点＼管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。    

2）在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。

3）在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。  

 4）在“管理站点”对话框中单击“完成”按钮，站点创建完毕。

2.页面图像设置  

3. 1) 在“页面属性”对话框中设置页面的背景图像。 2)  在页面

文档中单击

经过鼠标插入图像。  

3.表格制作   

1)   在文档中，单击表格“”按钮，在对话框中将“单元格间距”设置为“1”。 

2)   选中插入的表格，将“背景颜色”设置为“黑色”（#0000000）。  

3)   在表格中选中所有的单元格，在“属性”面版中将“背景颜色”设置为“白色”（#ffffff）。  

4)保存页面，按下“f12”键预览。

  4.创建锚点链接   

 1)   在页面中插入1行4列的表格，并在各单元格中输入导航文字。  

 2)   分别选中各单元格的文字，单击“”按钮，在弹出的“超级链接”对话框上的“链接”文本框

分别输入“#01”“#02”“#03”“#04”。  

 3)   在文档中输入文字并设置锚记名称“01”，按下“ enter”键换行，输入一篇文章。   

4)   在文章的结尾处换行，输入文字并设置锚记名称“02”，按下“ enter”键换行，输入一篇文章。  

 5)   同样的方法在页面下文分别输入文字和命名锚记为“03”和“04”，并输入文章。 

 6) 保存页面，按下“f12”键预览。

实验结果分析

这几天对Dreamweaver的学习已经基本掌握了他的一些简单的操作，可以创建一个 简单的网页，适当的加一些文字链接、图片链接、邮件链接和一些超链接等。通过视频的学习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。

指导教师批阅：

1、 实验态度：不认真（　），较认真（　），认真（　）

2、 实验目的：不明确（　），较明确（　），明确（　）

3、 实验内容：不完整（　），较完整（　），完整（　）

4、 实验步骤：混乱（　），较清晰（　），清晰（　）

5、 实验结果：错误（　），基本正确（　），正确（　）

6、 实验结果分析：无（　），不充分（　），较充分（　），充分（　）

7、 其它补充：

总评成绩：

评阅教师（签字）：

评阅时间：

实验（三） 网页布局操作

实验时间：　　　　2015.05.07　

实验目的

1、掌握表格的基本使用方法和表格的编辑处理；

 2、掌握表格布局页面的方法；

 3、掌握层的操作及参数设置；

 4、掌握层布局页面的方法；

 5、掌握框架布局页面的方法。

实验内容

1.完成书上例子，熟悉使用布局模式创建页面以及布局表格和布局单元格的操作方式，熟悉框架和层的运用。

2.完成课上所讲练习“水果世界”

3.利用框架完成以下页面的设计

4.利用层完成以下页面的设计

5.完成课堂所讲利用层来实现拼图游戏

实验步骤

在老师指导下，完成各项任务。

实验结果分析

尝试了网页布局这一种新的框架布局页面的方法。

指导教师批阅：

1、 实验态度：不认真（　），较认真（　），认真（　）

2、 实验目的：不明确（　），较明确（　），明确（　）

3、 实验内容：不完整（　），较完整（　），完整（　）

4、 实验步骤：混乱（　），较清晰（　），清晰（　）

5、 实验结果：错误（　），基本正确（　），正确（　）

6、 实验结果分析：无（　），不充分（　），较充分（　），充分（　）

7、 其它补充：

总评成绩：

评阅教师（签字）：

评阅时间：

实验（四） CSS基本操作

实验时间：　　2015.05.14　　　

实验目的

熟练掌握css的常用属性，并应用在设计中。使得网页设计内容更加丰富

实验内容

1) 了解CSS的属性 

2) 使用不同的方法（HTML属性，JavaScript，CSS）为页面底版设置颜色 3) 在不同位置设置CSS（直接写在控件中，另外设置样式表），取得相同的结果 4) 修改控件中字体的尺寸和颜色 

5) 利用CSS设置菜单（展开和隐藏效果）

实验步骤

1. 用html设置页面底板颜色：  

 ”>页面颜色为红色  

2、用JavaScript设置页面底板颜色：      

  

”javascript”> 

         document.bgColor = “FF0000”; 

页面颜色为红色  

3、用CSS设置页面底板颜色：      

 

”background-color: #ff0000;”>页面颜色为红色 

 4、在不同位置设置css； （1）在控件中： 

 

”background-color: #ff0000;”>CSS直接写在控件属性中 

（2）另外设置样式表：    Style-name{ 

      Background-color:#00FF00 } 

5、修改控件中字体的尺寸和颜色： 

 

姓名：”textfield” value=”杨晓玉”>  

实验结果分析

利用css来设置使得编辑更加简单，不会有繁琐的代码，使得设置更加方便     用div+css也有许多好处使得设计简单方便，节省资源 

实验设计的效果与每一部分的属性设计关系很大，要熟练掌握设计步骤与过程才能达到所要求的效果。

指导教师批阅：

1、 实验态度：不认真（　），较认真（　），认真（　）

2、 实验目的：不明确（　），较明确（　），明确（　）

3、 实验内容：不完整（　），较完整（　），完整（　）

4、 实验步骤：混乱（　），较清晰（　），清晰（　）

5、 实验结果：错误（　），基本正确（　），正确（　）

6、 实验结果分析：无（　），不充分（　），较充分（　），充分（　）

7、 其它补充：

总评成绩：

评阅教师（签字）：

评阅时间：

实验（五） 模板和库文件应用

实验时间：　　　　2015.05.21　

实验目的

能够熟练的在 DW 中制作模板和库文件

实验内容

1、制作模板可编辑区域  2、制作模板可编辑的可选区域    3、制作模板可选区域    4、制作库文件

实验步骤

第一个实验 制作模板可编辑区域

   第一步：建立一个普通页面，并把它另存为模板，如下图。我们给新建的模板起个“ dd1 ”的名称。

   第二步：点击“保存”将生成“ dd1.dwt ”模板页，注意它的扩展名为“ .dwt ”。而且站点内将自动生成“ Templates ”文件夹，用来放置模板文件。  

   第三步：选中我们要加入可编辑区域的表格，这里我们选择中间淡蓝色区域，所以我们点中下面的“ table ”标签。

   第四步：选中 常用选项卡→模板→可编辑区域

第五步：我们给这个可编辑区域起个“ a1 ”的名称，点击“确定”

第二个实验： 制作模板可编辑的可选区域

  第一步：将光标放入要成为可编辑的可选区域单元格内选中文本，

 第二步：选中 常用选项卡→模板→可编辑的可选区域第三步：在弹出的对话框中输入可编辑的可选区域名称，这里我们是“ c1 ”

   第四步：点击确定

第三个实验： 制作模板可选区域

   第一步：选中要设定为可选区域的部分，这里点下的“ ”标签来选中“宝马”单元格。

   第二步：选中 常用选项卡→模板→可选区域

第三步：在弹出的窗口中，给可选区域取名，这里我们是“ d1 ”

   第四步：按照上述方法分别建立“ d2 ”“ d3 ”“ d4 ”三个可选区域。

   第一步：用 dd3 建立的第一个页面中，把可编辑的可选区域 C1 里的“车的世界”改成“德国车”

   第二步：选中“修改”菜单中的“模板属性”

   第三步：将弹出的窗口修改 、第四个实验： 制作库文件

   第一步：在“资源”里找到“库”（最后一个图标）然后建立如下图“ Untitled3 ”的库文件。

第二步：将光标放在要放入库文件的表格中，再点击库面板下面的“插入”那么库文件就被放到相应的页面中了。

实验结果分析

模板和库文件都是提高我们做页面效率的非常好的工具，大家通过这四个实验对它们有一定的了解了，希望大家要多多练习，才能达到熟练的程度。

指导教师批阅：

1、 实验态度：不认真（　），较认真（　），认真（　）

2、 实验目的：不明确（　），较明确（　），明确（　）

3、 实验内容：不完整（　），较完整（　），完整（　）

4、 实验步骤：混乱（　），较清晰（　），清晰（　）

5、 实验结果：错误（　），基本正确（　），正确（　）

6、 实验结果分析：无（　），不充分（　），较充分（　），充分（　）

7、 其它补充：

总评成绩：

评阅教师（签字）：

评阅时间：

实验（六） 网页特效应用

实验时间：　　　2015.05.28　　

实验目的

1、理解JavaScript语言的交互性和动态性

2、掌握如何利用JavaScript语言制作网页特效

实验内容

1、利用JavaScript制作文字颜色变换特效

２、利用JavaScript制作网页背景颜色变换特效

３、利用JavaScript制作图片淡入淡出特效

４、利用JavaScript制作文字跟随鼠标特效

实验步骤

实验内容一：用JavaScript制作文字颜色变换特效

步骤1：准备JavaScript代码

步骤2：编辑要实现特效的网页源代码

步骤3：将JavaScript代码插入到网页源代码中的适当位置步骤4：浏览实现文字颜色变换特效的网页

步骤5：增加文字颜色种类

（turquoise,coral,orange,lime,violet）

步骤6：随机显示文字颜色（Math.round(Math.random()*10)）步骤7：增加文字的跑马灯效果

实验内容二：用JavaScript制作网页背景颜色变换特效

步骤1：准备JavaScript代码步骤2：编辑要实现特效的网页源代码

步骤3：将JavaScript代码插入到网页源代码中的适当位置步骤4：在标签中加入onload事件步骤5：浏览实现背景色变换特效的网页步骤6：控制背景颜色变换速度步骤7：随机显示背景颜色

实验内容三：用JavaScript制作图片淡入淡出特效

步骤1：准备JavaScript代码步骤2：编辑要实现特效的网页源代码步骤3：将JavaScript代码插入到网页源代码中的适当位置步骤4：在标签中加入alpha滤镜步骤5：在标签中加入onload事件步骤6：控制图片透明度直到完全消失

步骤7：当鼠标移动到图片上方时，启动图片淡入淡出特效

实验内容四：用JavaScript制作文字跟随鼠标特效

步骤1：准备JavaScript代码步骤2：编辑要实现特效的网页源代码步骤3：将部分JavaScript代码插入到网页

之间

步骤4：其余部分插入到网页之间步骤5：在标签中加入onload事件

步骤6：控制跟随鼠标的文字大小和颜色步骤7：控制跟随鼠标的文字间距

实验结果分析

通过这次实验课的学习，理解了JavaScript语言的交互性和动态性，掌握了如何利用JavaScript制作网页特效，使我们制作的网页“动”静结合，“变”化莫测。

指导教师批阅：

8、 实验态度：不认真（　），较认真（　），认真（　）

9、 实验目的：不明确（　），较明确（　），明确（　）

10、 实验内容：不完整（　），较完整（　），完整（　）

11、 实验步骤：混乱（　），较清晰（　），清晰（　）

12、 实验结果：错误（　），基本正确（　），正确（　）

13、 实验结果分析：无（　），不充分（　），较充分（　），充分（　）

14、 其它补充：

总评成绩：

评阅教师（签字）：

评阅时间：

本文来源：https://www.2haoxitong.net/k/doc/9da9d871ba0d4a7302763ac9.html