当前位置：文档之家› Html设计实验报告分析

Html设计实验报告分析

《网页设计》实验报告（2010—2011学年第二学期）

班级：

姓名：

学号：

指导老师：

实验一认识Dreamweaver CS3

一、实验目的

1、熟悉Dreamweaver CS3环境。

2、了解HTML文件结构。

二、实验环境

计算机

三、实验内容

创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。下面介绍一下这两种方式的具体操作步骤。

1．使用向导建立站点

使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。

①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。

②选择“站点”菜单中的“新建站点”命令。

③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。

起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字？”文本框中输入站点名字，如travel。若已申请域名则可以在“您的站点的HTTP地址（URL）是什么？”文本框中填入申请的域名地址。如图所示。

设置站点名和URL地址

（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。

选择是否使用服务器技术

（4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置？”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。

（5）单击“下一步”按钮，在“您如何连接到远程服务器？”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。

（6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。

站点创建完成后将在“文件”面板中显示出站点的结构和文件。

2．使用高级设置建立站点

使用高级设置建立站点的第一步同前，在如图所示的“站点定义为”对话框中切换到“高级”选项卡，如图所示。在左边的分类中选择“本地信息”选项，然后分别设置“站点名称”、“本地根文件夹”、“默认图像文件夹”、“HTTP地址”等信息。若有需要还可以在左边的分类中选择其他项目进行设置，完成以后单击“确定”按钮，即可创建站点。

对于已经创建好的站点，可以执行编辑、复制、删除、导出和导入等操作。

1．编辑站点

如果要重新设置站点的属性，可以执行以下步骤：

（1）单击“站点”→“管理站点”选项。（2）从站点列表中选择要编辑的站点名称，单击“编辑”按钮。可以参考前面创建站点的方法重新设置站点属性。（3）编辑完毕后，单击“确定”按钮，返回到“管理站点”对话框，单击“完成”按钮。

2．复制站点

如果要创建多个结构相同或相似的站点，可以利用站点的复制功能，具体步骤如下：

（1）单击“站点”→“管理站点”选项。

（2）从列表中选择要复制的站点名称，单击“复制”按钮。

（3）若要对复制的站点进行编辑，可以从站点列表中选中新复制的站点，单击“编辑”按钮，

编辑完成返回到“管理站点”对话框，单击“完成”按钮。

3．删除站点

如果某个站点在Dreamweaver中不再需要编辑了可以删除该站点，具体步骤如下：（1）单击“站点”→“管理站点”选项。

（2）从列表中选择要删除的站点名称，单击“删除”按钮。

（3）在弹出的提示对话框中，单击“是”按钮，即可删除选定的站点。

四、实验要求

1、认真预习，写出操作步骤。

2、遵守机房纪录，填好设备档案。

3、认真写实验总结，实验步骤。

五、实验总结

Dreamweaver CS3创建网站的步骤？

实验二网页基础练习

一、实验目的

1、掌握html文件的基本结构

2、熟练使用head元素、body元素的各个属性

二、实验环境

计算机

三、实验内容

1、打开“记事本”，输入课本P5图1.3所示代码，保存为以.htm或.html为扩展名的web文件，双击该文件，观察显示效果。（注意标题栏的显示内容和正文部分的对齐方式）

2、启动Dreamweaver CS3,切换到HTML视图下,完成课本第一章中出现的所有HTML 源文件,然后切换到预览视图下观察效果。

3、练习使用向导建立本地站点；练习在“文件”面板中新建目录及文件的操作。完成第一章中的练习2和练习3

4、登录网站,单击申请空间链接，按其要求认真填写相关注册信息，完成个人免费空间的申请。（记住自己申请成功的用户名和密码）并利用ftp工具上传所做网页，然后进行测试。

四、实验要求

1、认真预习，写出操作步骤。

2、遵守机房纪录，填好设备档案。

3、认真写实验总结，实验步骤。

五、实验总结

1、HTML文件的基本结构是？

2、如何通过HTML代码实现设置网页的背景颜色？

实验三文本格式练习

一、实验目的

1、掌握html文件的基本结构

2、熟练使用P、BR、HR、Hn等标记符的基本用法

3、掌握align属性的用法

4、掌握font标记符的用法

二、实验环境

计算机

三、实验内容

1、练习在Dreamweaver CS3中新建网页、打开网页、预览网页以及保存网页的方法

2、练习文字的输入，普通文字的输入，特殊文字的输入并写出其过程。

3、练习标题的设置，文字字体、颜色、样式、对齐的设置。将网页中文本的标题、作者、正文设置为不同的字体、大小，使其看起来具有层次感；设置所有文本居中对齐，使其看起来更加美观。效果如图

四、实验步骤

3、主要操作步骤如下：

（1）启动Dreamweaver，单击“标准”工具栏的“新建”按钮，在弹出的“新建文档”对话框中新建一个基本页HTML文档。

（2）单击“修改”→“页面属性”命令，弹出“页面属性”对话框，在“分类”下拉列表中选择“外观”选项，在“外观”选项区中的“背景图像”文本框中设置背景图片，单击“确定”按钮。

（3）在文档中输入如图1-1所示的文本。

（4）选中标题“偶遇”，在“属性”面板的“字体”下拉列表框中选择“黑体”选项，在“大小”下拉列表框中选择36，效果如图1-2所示。

图1-1 输入文本图1-2设置标题格式（5）将标题下“徐志摩”文本的字体设置为隶书，大小为18磅，如图1-3所示。

（6）选中正文文本，将其字体设置为幼圆，大小为16磅，如图1-4所示。

图1-3设置文本图1-4 设置正文文本（7）选中所有文本后在属性面板中单击“居中对齐”按钮使其居中，然后单击“颜色”按钮，在打开的“颜色”面板中选择深蓝色。

（8）保存文件，选择“文件”→“在浏览器中预览”→IExplore命令对网页进行预览，最终的效果如图所示。

五、实验要求

1、认真预习，写出操作步骤。

2、遵守机房纪录，填好设备档案。

3、认真写实验总结，实验步骤。

六、实验总结

1、在网页中如何输入多个空格？

2、

标记与
标记的区别是什么？

3、align属性的属性值有哪几个？这个属性可用于哪几个标记？

实验四列表制作

一、实验目的：

1．掌握列表创建的基本操作。

2．掌握列表标记的应用。

3．熟悉嵌套列表的代码实现。

二、实验环境

计算机

三、实验内容

1、在“记事本”中用HTML语言编写符合以下要求的webpage1.htm

标题为“网页制作练习”；

浏览器窗口用户区内有两行内容：

第一行：“欢迎来到web世界!”

第二行：“网上生活从此开始！”（换行使用
标记）

2、将webpage1.html复制一份取名为webpage2.html,并为webpage2.html这个网页设置背景色或是背景图片（使背景有水印效果），设置页面文字的颜色为紫色，在浏览器中浏览这两个文档。

3、对webpage2.htm添加标题，存为webpage3.htm

第一行以四级标题（

）显示：“欢迎来到web世界！”
第二行以一级标题(

)显示：“网上生活从这里开始！”
最后插入一条水平线。(
)
4、对webpage3.htm进行如下修改，存为webpage4.htm.在文档最后加入一行：“欢迎访问我做的第一个网页”，当浏览者单击“第一个网页”时，可打开网页webpage1.htm
5、对webpage1.htm进行如下修改：
在文档最后加入一行：“返回”二字
当浏览者单击“返回”时，可返回网页webpage4.htm
6、在网站文件夹下，建立一个子页，标题为“列表练习”，在网页中使用列表进行嵌套列表的制作。效果所下图示：
Ⅰ引言
Ⅱ第一部分
A.说明
B.例子
●案例1
●案例2
Ⅲ第二部分
Ⅳ总结
四、实验要求
1、认真预习，写出操作步骤。
2、遵守机房纪录，填好设备档案。
3、认真写实验总结，实验步骤。
五、实验总结
1、第四题创建嵌套列表的html代码？
2、写出下面各种水平线效果的html代码
1)默认水平线
2)粗为 5 像素的水平线
3)长度为100像素的水平线
4)长度为屏幕宽度 50% 的水平线
5)粗为 5 像素的实心水平线
6)红色的水平线
实验五图像和超链接的应用
一、实验目的
1、熟悉Dreamweaver CS3的编辑环境。
2、掌握如何向文档中添加图像和多媒体元素。
3、熟悉图像相关属性的设置。
二、实验环境
计算机
三、实验内容
1、练习在网页中插入图像，并且设置图像与文本的环绕，创建网页保存为1.htm
2、制作周庄网页：内容要求
（1）练习在“周庄”网页中添加图像；
（2）练习原始图像和鼠标经过图像的添加；
（3）使用表格对页面进行布局。
图1 “周庄”页面
3、课本P34页图3.2
4、课本P36页图3.4
5、创建热区超链接，效果图如下：
四、实验步骤
2、主要操作步骤如下：
（1）启动Dreamweaver，单击“标准”工具栏的“新建”按钮，在弹出的“新建文档”对话框中新建一个基本页HTML文档。
（2）单击“修改”→“页面属性”命令，弹出“页面属性”对话框，在“分类”下拉列表中选择“外观”选项，在“外观”选项区中的“背景图像”文本框中设置为beijing.jpg，单击“确定”按钮。
（3）单击“插入”→“表格”命令，弹出“表格”对话框，在“表格大小”选项组设置“行数”为2和“列数”为3，创建一个2行3列的表格，在“表格属性”面板中设置表格为“居中对齐”方式。
（4）选中表格第一行的所有单元格，在“表格属性”面板中单击“合并所选单元格，使用跨度”按钮。效果如图2所示。
（5）在窗口中编辑页面，插入文本并设置文本格式，如图3所示。
（6）将光标插入点定位到文本下方，选择“插入”→“图像对象”→“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框。
（7）单击“原始图像”文本框后的“浏览”按钮，在打开的对话框中选择1.jpg图像文件作为原始图像，用同样的方法选择2.jpg图像文件作为鼠标经过图像。
图2 建立页面布局图3 编辑页面文本
（8）设置后的“插入鼠标经过图像”对话框如图4所示，单击“确定”按钮关闭对话框。
图4 “插入鼠标经过图像”对话框
（9）将光标插入点定位到左侧表格中，选择“插入”→“图像”命令，打开“选择图像源文件”对话框，在其中选择3.jpg图像文件，单击“确定”按钮完成图像的添加。
（10）用同样的方法在相应的的位置插入图像。
（11）单击“标准”工具栏的“保存”按钮保存网页，对网页进行预览，其效果如图5所示，将光标移至中央较大的图像上，该图像发生变化，如图1
图5图像变化效果
五、实验要求
认真预习，写出操作步骤。
六、实验总结
1、在网页中插入图像的HTML代码是？
2、超链接标记中的属性有哪几个？分别代表什么含义？
3、页内链接创建的步骤。
4、电子邮件链接的格式是什么？
实验六表格基本练习
一、实验目的
1、掌握HTML代码创建表格的基本步骤；
2、熟练表格属性的设置
3、掌握Dreamweaver创建表格的方法
二、实验内容
1、新建一个文档，然后在文档中创建一个4×6列的表格。其中含有标题行和数据行。如下图：
学生情况表
学号个人信息入学信息
姓名性别年龄班级入学年月
007 东方不败不详19 200303 2003年9月008 任我行男20 200303 2003年9月
2、依照下图做出相应得表格。
1）表格的边框为3像素，边框颜色为#ffaa00。
A
B
E
C
D
2）
3）嵌套表格
课本P65 图4.9

网页设计实验报告

实验报告课程名称网络技术基础实验项目TCP/IP协议配置实验仪器计算机系别专业班级/学号学生姓名实验日期成绩指导教师

实验一 TCP/IP协议配置一、实验目的（标题黑体小四） 1.熟练掌握模板的用法。 2.掌握CSS的用法。 3.掌握网站发布的方法。二、实验内容 1. 创建和使用模板。 2. css的创建和使用。 3. 发布网站。三、实验课时 4课时四、实验步骤创建网站 1、创建一个站点，并创建 images 文件夹存放图片。将示例图片拷贝至images 目录下 2、创建 CSS 文件，名称为 style.css，将其保存至 style文件夹。 3、创建模板文件 tpl.dwt，并保存。结果如下： (1) 给 tpl.dwt 附加样式表 style.css。在 tpl.dwt 的空白处点击鼠标右键，选择“附加样式表”：选择 style.css 文件：完成后，在 tpl.dwt 的 head标签里有如下的代码： (2) 设置模板的背景颜色。打开 CSS 面板，为 style.css 新建一条 css 规则。过程如下：

将背景颜色设为#ff1e70：在 style.css 生成如下的代码： body { background-color: #ff1e70? } 3) 制作布局。插入一 2 行 2 列的表格。表格的宽度=316+634=950，其他的设置：让表格居中对齐。 (4) 消除表格两边的空隙。展开 CSS 样式表，双击 body：双击 body后，打开“body的 CSS 规则定义”对话框，按照下面的方式设置：Style.css 的代码变为： body { background-color: #ff1e70? margin: 0px? }