实验一、网页制作软件认识及静态页面制作

实验一、网页制作软件认识及静态页面制作

一、 实验目的：

1) 熟悉常用的网页标记语言html；

2) 了解记事本编辑网页的方法；

3) 掌握Dreamweaver制作网页的一般方法；

4) 掌握通过网络学习标记语言的能力。

二、 实验类型：

验证型

三、 实验内容：（每个小实验的文件分别应在同一目录下，不要放在桌面或我的文档中）

1. 为网页设计标题和背景

(1) 打开记事本输入下面代码：（书例3-2）

(2)

保存文件为“3-2.html”如图所示：

(3)

使用浏览器打开3-2.html观察网页效果。

思考：背景图片是否加入，如没有，如何使背景图片(图片自定)显示；网页标题中的内容是由什么标记设定的，本例文字颜色是如何设定的。

2. 使用Dreamweaver创建图文并茂的网页（图片文件在课件中下载）。

(1) 打开Dreamweaver新建html页面如图所示：

(2) 图所示：(3)

在【插入记录】菜单中选择【表格】菜单，弹出表格对话框，插入两行表格。如

单击表格对话框的确定按钮结果如图所示：

(4)

通过鼠标拖拉表格上的黑色方框调整表格外框大小，通过拖拉表格边线调表格宽

度后如下图所示：

(5)

选择表格第二行，单击右键弹出如图所示的菜单，选择分拆单元格:

(6)

按照弹出的对话框设置如下图所示：

(7)

点击确定按钮后，再调整两列列宽。如下图所示：

(8)

选择第一行输入文字，选中文字后在下方的属性对话框中设置文字格式为“标题

1”、字体为“华文行楷”（如没有可选择编辑字体列表加入）、行居中，单元格背景为青绿如图所示：

(9)

在表格第二行加入如图所示文字，选中文字后点右键，在弹出的菜单中选择列表

中的项目列表，然后设置字体为黑体，大小颜色等如图中属性对话框所示：

(10) 选中表格第二行第二列，在菜单上选择【插入记录】中的【图像】，在弹出的对话框中选择图片文件“aa.jpg”（该文件可在课件中下载）如图所示：

(11) 点击确定按钮输入替换文字为“个人照片”，如图所示：

(12) 点击确定按钮，完成图片的插入。如图所示：

(13) 保存页面文件到指定文件夹。名称为“示例.html”

(14) 建立一个新页面，名称为“学习情况.html”内容如下：

(15) 打开“示例.html”文件，选中文字“学习情况”点右键选择属性，在属性对话框中链接框中选择“学习情况.html”文件（框边的文件夹图标可选）目标框为“_blank”，如图所示建立超链接。

(16) 选择文字“学校主页”点右键，在属性框中的链接框中输入学校网址

(17) 在页面下方添加文字如图所示（注意：空格的输入是Ctrl+Shift+空格键），选择“zhaojw”文字，在菜单中选择【插入记录】中的【电子邮件链接】，在弹出的对话框中输入电子邮件地址，点击确定后，如图所示：

(18) 保存文件，然后点击如图所示的预览按钮，测试网页。

(19) 在Dreamweaver打开“示例.html”文件，在工具栏中选择点击“代码”出现代码窗口，如图所示：

(20) 思考并找出那些代码完成文字修饰，那些完成表格，那些完成列表，那些完成超链接。自己不懂的代码如何知道其含义?

3. 掌握通过网络学习标记语言的能力。

(1) 代码窗中复制“cellpadding”在百度里搜一下。如图：

(2) 点击相关的第一条或其他条学习其功能：

4.

思考总结：

该实验你掌握了那些内容，请总结。

5. 课后作业：

创建一个属于自己的个人网页，包含个性化的布局，图文并茂，有个人信息，使用超链接。做完后上传到教师存储空间中的学生作业中的动态网页中。（要求所有文件打包，文件名为学号+姓名+XX,XX是实验号。如实验一，实验二等）。