Html设计实验报告.docx

Html设计实验报告.docx

《Html设计实验报告.docx》由会员分享，可在线阅读，更多相关《Html设计实验报告.docx（58页珍藏版）》请在冰豆网上搜索。

Html设计实验报告

山东信息职业技术学院

《网页设计》实验报告

（2010—2011学年第二学期）

班级：

姓名:

学号:

指导老师：

实验一认识DreamweaverCS3

一、实验目的

1、熟悉DreamweaverCS3环境。

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、认真写实验总结，实验步骤。

五、实验总结

DreamweaverCS3创建网站的步骤?

实验二网页基础练习

一、实验目的

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

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

二、实验环境

计算机

三、实验内容

1、打开“记事本”，输入课本P5图1.3所示代码，保存为以.htm或。

html为扩展名的web文件,双击该文件，观察显示效果。

（注意标题栏的显示内容和正文部分的对齐方式）

2、启动DreamweaverCS3，切换到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、练习在DreamweaverCS3中新建网页、打开网页、预览网页以及保存网页的方法

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、〈P〉标记与
标记的区别是什么？

3、align属性的属性值有哪几个？

这个属性可用于哪几个标记？

实验四列表制作

一、实验目的：

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

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

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

二、实验环境

计算机

三、实验内容

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

htm

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

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

第一行：

“欢迎来到web世界!

"

第二行：

“网上生活从此开始!

”（换行使用〈br>标记）

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、熟悉DreamweaverCS3的编辑环境。

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、超链接标记〈a>中的属性有哪几个?

分别代表什么含义？

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

3、利用表格，完成如下的页面制作：

三、实验要求

1、做好预习，要有预习报告；

2、记录实验实验步骤,回答提出的问题;

3、实验报告要包括实验步骤，遇到的问题，实验总结。

四、实验总结

1、表格创建的HTML标记有哪几个？

2、实验过程中问题记录。

实验七利用表格布局网页

一、实验目的

1、掌握表格设置方法.

2、掌握表格布局方法.

二、实验环境

计算机

三、实验内容

1、“天籁音乐网”案例分析:

①在网页中插入表格,不显示边框只用来布局；②在单元格内插入文字、图片，设置丰富的效果；③通过拆分单元格或者插入嵌套表格来细化某些单元格内部的布局。

效果图:

四、实验步骤

1、主要操作步骤：

（1）启动Dreamweaver，选择“文件”→“新建”命令，选择“空白页"类别中的HTML选项,单击“创建”按钮,新建了一个空白文档。

（2）选择“修改”→“页面属性”命令，在“分类”中选择“外观”选项，设置一种背景颜色，然后选择“标题/编码”类别,在“标题”文本框中输入“天籁音乐网”，完成后单击“确定”按钮。

（3）在文档的第一行输入“天籁音乐网”,选中文字在“属性”面板中设置格式为“标题1"，字体为“宋体"，颜色为FFFF00（黄色），“居中对齐"方式.

（4）按Enter键换行，在第二行中插入一条分隔线，可以选择“插入记录”→HTML→“水平线"选项，完成后如图1所示。

图1插入标题与分割线

（5）在第三行插入一个4行1列的表格，单击“插入”面板“常用”类别下的“表格”按钮

在弹出的“表格"对话框中设置行数为4,列数为1,表格宽度为778像素，其余都为默认值，单击“确定”按钮.选中插入的表格,在表格的“属性”面板上设置“对齐"方式为“居中对齐”，完成后如图2所示。

图2插入表格

（6）光标定位在第一行单元格内，选择“插入记录”→“图像对象"→“鼠标经过图像”命令，在弹出的“插入鼠标经过对象”对话框中，单击“原始图像”文本框右边的“浏览”按钮,选择images文件夹中的banner2s.jpg图片。

同样的方法设置“鼠标经过图像"为banner5s。

jpg图片，在“替换文本”文本框中输入“欢迎来到天籁音乐网!

"，如图3所示，完成后单击“确定”按钮。

将图片设置为“居中对齐"方式，效果如图4所示。

图3“插入鼠标经过图像”对话框

图4“插入鼠标经过图像”后的效果

图5拆分第二行单元格

（7）光标定位在第二行单元格内，在单元格“属性"面板

上单击“拆分单元格为行或列”按钮

在弹出的“拆分

单元格”对话框设置将单元格拆分成3列,如图5所示。

（8）在拆分的3个单元格内输入文字，效果如图6所示，拖动单元格的边框线调节每个单元格的宽度使它能容纳输入的内容。

图6编辑第二行文本内容

（9）光标定位在第三行单元格内,单击“插入”面板“常用”类别下的“表格”按钮

在弹出的“表格”对话框中设置行数为2，列数为6，表格宽度为778像素，其他为默认值。

插入的表格效果如图7所示。

图7第三行中插入嵌套表格

（10）在嵌套表格中,选中第一行前5个单元格，单击单元格“属性”面板上“合并所选单元格，使用跨度”按钮

，在合并后的单元格内输入文本“热门专辑"并设置格式.在第一行第6个单元格内输入“更多”，选中文字在“属性”面板的“链接”文本框中输入“＃”（空链接），“右对齐"方式.单击“插入”面板“常用”类别下的“图像”按钮

分别在第二行的6个单元格内插入图片，图片是images文件夹中的zj1、zj2、zj3、zj4、zj5和zj6,效果如图8所示.

图8编辑嵌套表格中的内容

（11）光标定位到第四行单元格，与第三行一样插入一个2行6列的表格，将第一行的6个单元格合并为1个单元格并输入文字“分类搜索”；第二行1～6单元格内分别输入“歌手”、“歌曲”、“专辑”、“歌词"、MV和“排行榜”，在文字“属性”面板上设置链接为“＃”，“居中对齐”方式，效果如图9所示.

图9第四行嵌套表格并输入内容

（12）按Ctrl＋S快捷键保存文件,命名为index.html,按F12键在浏览器中预览最终效果。

五、实验要求

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

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

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

实验八创建框架网页

一、实验目的：

1.掌握利用框架进行页面布局.

2.掌握在框架中打开网页

二、实验环境

计算机

三、实验内容

1.制作精美散文框架页面

思路要求：

先制作主体框架页面，再制作框架各区域页面，最后设置链接和背景图片。

效果图：

四、实验步骤

1、主要操作步骤：

（1）启动AdobeDreamweaver，在E盘创建一个名称为myweb的站点，站点文件夹的名称为myweb，单击“文件”菜单栏的“新建”按钮，在弹出的“新建文档”对话框中新建一个基本页HTML文档。

（2）单击“插入记录"→HTML→“框架"→“上方及左侧嵌套”命令，如图1所示,建立框架页面。

图1选择框架类型

（3）向框架各区域输入文字，上方框架内输入“精美散文”，左方框架内输入散文名，如图2所示.

图2给框架添加内容

（4）单击“修改”→“页面属性”选项，在弹出的“页面属性”对话框内选择“背景图像"文本框,给框架各区域添加背景图像，如图3所示。

图3给框架各区域添加背景图像

（5）单击水平框架分隔线，在“属性”面板中设置分隔线属性，如图4所示。

图4设置水平分隔线属性

（6）单击垂直分隔线,在“属性”面板内设置分隔线属性，如图5所示。

图5设置“垂直分隔线”属性

（7）将4篇散文复制粘贴到站点文件夹（素材库里有素材）,给各散文名添加链接,链接页面打开的目标页面为mainFrame，如图6所示。

（8）单击“保存全部”命令，在弹出的“另存为”对话框中，给框架命名为index。

html，页面分别命名为kuangjia1.html、kuangjia2.html，kuangjia3。

html。

此时站点内文件如图7所示。

图6给散文名添加链接

图7站点文件

（9）预览index.html页面。

五、实验要求

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

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

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

六、实验总结

实验过程问题记录

实验九表单的创建

一、实验目的

1、熟悉表单的类型

2、掌握插入表单的方法

3、掌握插入表单对象的方法

二、实验环境

计算机

三、实验内容:

1。

制作个人资料填写表单

制作思路：

制作标题表格，插入表单，向表单中添加内容表格。

左边输入要求用户填写的项目；中间是文本域、复选框、列表/菜单等表单元素;右边是填写过程中应该注意的事项；最下面是文本区域和提交重置按钮。

设置表格的版式使其看起来更加美观。

效果图如下：

四、实验要求

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

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

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

五、实验总结实验过程问题记录

实验十多媒体元素的应用

一、实验目的

1、熟练掌握插入flash动画、按钮、文本的用法。

2、掌握插入shockwave影片的方法。

3、掌握插入音频、视频文件的方法

二、实验环境

计算机

三、实验内容

1、练习制作一个动物世界的网页，主要练习插入Flash动画、Flash按钮、插入shockwave影片。

制作思路如下：

1）在网页的顶部插入banner。

swf。

2）在banner.swf的下面插入6个Flash按钮。

3）在网页下部表格中间的单元格中插入dongwu.dcr.

4）在“属性”面板中设置其宽度为“400”像素,高度为“300”像素.

2、制作一个飘落雪花页面,要求插入飘落雪花的FLASH动画，并将FLASH动画背景设置为透明色，FLASH动画资料另附。

步骤如下：

1）使用1。

jpg图像作为单元格的背景

2）在该单元格中插入“xue。

swf”Flash动画

3）在“属性"面板中设置Flash动画的大小4）代码视图输入“〈paramname="wmode"value=”tranparent”〉”，使Flash动画透明。

效果如下图

3、“视听在线”网页案例

四、实验步骤：

3、主要操作步骤：

（1）启动Dreamweaver，选择“文件”→“新建”，选择“空白页”类别中的HTML选项，单击“创建”按钮，新建了一个空白文档.

（2）选择“修改”→“页面属性”命令，选择背景图像为images/bg.jpg，输入标题为“视听在线"，完成后单击“确定”按钮。

（3）在文档的第一行输入“视听在线"，选中文字在“属性"面板中设置格式为“标题1”，字体为“楷体"，“居中对齐”方式，效果如图1所示.

图1插入标题文字

（4）在文档第二行插入一个11行5列的表格,单击“插入"面板的“常用”类别下的“表格”按钮

，在弹出的“表格”对话框中设置行数为11,列数为5,表格宽度为778像素，边框粗细为2，单击“确定"按钮。

然后选中表格，在表格的“属性”面板上设置“对齐”方式为“居中对齐”，完成后如图2所示。

图2插入表格

（5）调整表格各列的宽度，然后将第一行1、2单元格及4、5单元格分别合并。

在各单元格内输入文字并设置相应的格式，完成效果如图3所示.

图3在表格中编辑文本

（6）在表格第一列的2～11行中分别插入images文件夹中的1。

gif至0。

gif共10幅数字图片，第四列同第一列，图片大小为40×40像素，“居中对齐”,完成后效果如图4所示。

图4在表格中插入图片

（7）创建“歌曲欣赏”子页面。

选择“文件”→“新建"命令,选择“空白页”类别中的HTML选定，单击“创建”按钮，新建了一个空白文档。

然后在“页面属性"中选择“背景图像"为images/bg2.jpg，“标题”文本框中输入歌曲名称。

（8）在“歌曲欣赏”子页面第一行输入歌曲名称作为标题;第二行选择“插入记录”→“媒体”→“插件”命令,在弹出的“选择文件”对话框中选择要插入的声音文件，单击“