《网站建设与网页设计》实验指导书.docx

《网站建设与网页设计》实验指导书.docx

《《网站建设与网页设计》实验指导书.docx》由会员分享，可在线阅读，更多相关《《网站建设与网页设计》实验指导书.docx（20页珍藏版）》请在冰豆网上搜索。

《网站建设与网页设计》实验指导书

实验一熟悉HTML语言

一、实验名称

熟悉HTML语言

二、实验目的

1．掌握常用的HTML语言标记；

2．会使用文本编辑器和Dreamweaver建立HTML文档，制作简单网页。

3．学习将其它格式的文档转换成HTML格式的文档

三、实验类型及学时

验证性实验、2学时

四、实验内容

1、用文本编辑器（如记事本）做出以下图1-1的页面效果。

图1-1第一个网页效果图

要求：

要有标题“我的第一个网页”，页面中有文字：

“我的个人主页”，文字格式为标题h2。

文字的前面空一行，后面一根标尺线，标尺线颜色是红色，宽度占整个页面的80%，大小为2。

页面背景颜色代码为“#f0ffFF”。

完成后保存为.HTML格式，并浏览效果。

2、在以上基础上增加代码，达到如下图1-2的效果：

图1-2进一步完善后的效果图

要求：

设置如效果图中所示的三行文字，字体大小为5,颜色是蓝色，宋体。

3、掌握Dreamweaver8的基本操作，并完成上面所有用记事本写的HTML

4、用记事本和Dreamweaver8分别练习设置几种物理字体和逻辑字体。

物理字体：

明确指明了字体的类型，无论是何种浏览器，遇到这些表示文字的标签时，都用相同的方式进行显示

文字加粗，文字为斜体，文字加下划线。

文字添加删除线

逻辑字体：

并不能像物理字体那样明确知道字体的显示方式，这些标签并不指明字体如何显示，而是让Web浏览器自行决定显示方式，不同的浏览器解释的效果可能就不一样.

文字加粗文字为斜体

要求：

用上面介绍的物理字体显示以下效果。

并练习用逻辑字体设置加粗和斜体。

图1-3文字设置

5、分别用记事本和Dreamweaver8设置会移动的文字。

（1）基本语法：

...

（2）文字移动属性的设置

方向#=left或right

练习：

分别设置文字从左向右移和从右向左移。

方式#=scroll：

一个方向不停地移动slide：

移动一次就停止。

Alternate：

来回移动。

练习：

请分别设置以上三种效果。

循环#=次数；若未指定则循环不止（infinite）

练习：

配合上面“方式”中的属性，设置移动的次数。

速度时间用数值表示

练习：

文字的移动速度设置

延时移动过程中每移一次停顿的时间

练习：

配合“速度”练习设置本属性。

（3）其它方式：

可设置对齐方式，文字底色、移动面积等。

6、简单的多窗口页面

基本语法

...

...

（1）示例：

纵向排列多个窗口的设置，页面效果如图1-4,如下列代码：

—各窗口的尺寸位置-->

图1-4框架集应用

请参考上述代码，设计横向排列的三个窗口，并分别指向A.html、B.html和C.html三个文件。

提示：

横向排列的属性为：

rows。

（2）示例：

页面效果如图1-5,代码如下:

---省略部分代码----

---省略部分代码----

图1-5框架集应用

参照上述代码设计如图1-6所示页面：

图1-6框架集应用

实验二文本、图像及超链接的应用

一、实验名称

文本、图像及超链接的应用

二、实验目的

1．掌握文本布局的基本方法；

2．掌握图像的一些基本应用。

3．学习使用超链接。

三、实验类型及学时

验证性实验、2学时

四、实验内容

1、用文本编辑器（如记事本）或Dreamweaver做出以下的页面效果。

（1）文本行的控制

段（Paragraph）（可以看作是空行）#=left,center,right

换行

请设计如图2-1所页面效果：

要求段1文字居中，段2靠左，第三行进行换行显示。

第四行文字居中。

图2-1文本设置

（2）列表

无序列表：

• ...

有序列表：

1. ...

定制列表元素：

#=disk（实心圆）,circle（圆圈）,square（正方形）

定制有序列表中的序号：

#=A,a,I,i,1

定制有序列表的的起始值：

#=number

用上述语法设计如图2-2，2-3所示的页面效果：

图2-2图2-3

2、图像

（1）链入图象的基本语法

#=图象的URL

#=在浏览器尚未完全读入图象时，在图象位置显示的文字。

（2）图象和文字的对齐

#=top,middle,bottom

（3）图象在页面中的对齐/布局（FloatingImage）

#=left,right,middle

（4）图像的提示信息；双引号填入提示内容。

（5）设置页面背景图像

定义背景图像。

设计如图2-4所示的页面效果图：

要求先给页面背景插入一张图片，再插入两张图片，第一行文字与图片顶端对齐，当鼠标放在第一张笑脸上时，有提示内容。

第二行图片居页面的右边，文字位置不变。

图2-4定义背景图像

3、超链接

（1）建立超链接基本语法

添加超链接的文字

链接地址：

http:

//，ftp:

//，mailto：

，File：

，Gopher：

//（gopher协议）,News：

（usernet新闻组协议），Telnet：

（使用Telnet的互动会话）。

常用的有前面三个。

（2）增加提示信息

添加超链接的文字

（3）被链接文件载入位置

添加超链接的文字

#:

有4种表示形式

_blank:

将被链接文档载入到新的未命名的浏览器窗口

_parent:

将被链接文档载入到父框架集或包含链接的框架窗口中

_self：

将被链接文档载入到与该链接相同的框架或窗口中（这个载入位置是默认的）

_top：

将被链接文档载入到整个浏览器窗口并删除所有框架。

设计如图2-5所页面。

要求：

第一个链接进入一个internet网站，并在一个新浏览器窗口打开，第二个链接进入你所设计的任意一个页面文件，当把鼠标放到超链接的文字上时有提示文字。

图2-5超链接应用

（4）锚点设计基本语法：

添加超链接的文字

页面中的文字

注意：

#号不可缺少，且相链接的两个锚点名要一致。

设计如图2-6所示的页面效果：

图2-6锚点设置

（5）电子邮件链接基本语法

邮箱地址>网页中显示的文本

练习：

设置一个链接，打开链接地址发邮件。

Windows默认打开的的outlook.

（6）图片添加链接

练习：

设置一个链接，当点击图片时进入一个Internet网址，或指向一个页面文件。

实验三网页排版与布局

一、实验名称

网页排版与布局

二、实验目的

1．学会应用表格进行网页排版与布局；

2．熟练掌握表格的基本语法。

三、实验类型及学时

验证性实验、4学时

四、实验内容

1、表格的基本语法

-定义表行

-定义表头

-定义表元（表格的具体数据）

（1）

align属性：

left,center,right表格的三种对齐方式。

width、height:

表格的宽度和高度

border:

表格的边框，若无border，表格是无边框的。

可对border设置，表示边框的大小。

bgcolor：

表格背景颜色。

background:

表格背景图片。

Cellspacing:

表格单元格之间的距离。

即外边距

Cellpadding:

单元格式边框与单元格内的数据之间的距离。

即内边距。

（2）表行的常用属性

align：

left,center,right。

行水平对齐方式，可控制表格单元格中的数据的水平对齐方式。

valign：

top,middle,bottom。

行垂直对齐方式，可控制表格单元格中的数据的垂直对齐方式。

Height:

行的高度属性。

（3）表单元格属性--------表头的属性与它相同。

Colspans：

跨多列进行单元格合并。

Rowspans:

跨多行进行单元格合并。

（4）表格的嵌套

表格可以嵌套，在表格里面再建立表格。

如以下代码：

外层表格单元格外层表格单元格

嵌套表格嵌套表格

嵌套表格嵌套表格

外层表格单元格

图3-1表格的使用

2、练习：

按照上面的语法在记事本或Dreamweaver8中设计如图3-2所示的表格。

图3-2表格的使用

要求：

表格在页面中的对齐方式为居中对齐，背景色为：

#FFCC99，表格有border属性，但不设置值，表格的宽度为占整个页面的40%，表格中单元格的间距为2。

所有表格中的数据都是水平、垂直居中。

提示：

多列、多行合并，在单元格标签或表头标签中进行设置，第一行的合并数为4，左下角的列合并数为3.

3、综合设计：

图3-3是北京希望电子出版社网站的首页栏目模块划分图。

说明：

栏目区是一个表格，导航区是一个表格，网页的主题部分是一个1*3的辅助表格，版权区是一个表格，而注册/登录区、链接区等都是辅助表格中的嵌套表格。

要求：

按照这个网页模板的划分，把这个网站的首页所有表格都设计出来，且布局要合理。

只需要把表格设计出来就行，里面的任何内容及表单、控件等都不需要设计。

提示：

先从栏目区开始设计，分析栏目区时，要设计好表格有几行，几列，有没有多列或多行的合并。

每个表中的单元格要计算好它的长宽。

图3-3网站首页模块划分

实验四表单的设计

一、实验名称

表单的设计

二、实验目的

1．掌握表单的基本语法；

2．掌握常用的HTML控件的使用。

3．能够应用表单设计友好的界面。

三、实验类型及学时

验证性实验、2学时

四、实验内容

1、表单的基本语法

*表示：

get或post

...

Form表单的常用属性

action:

表单提交后发送到url的地址。

Method:

用来定义提交表单信息的方式，可取值为post或get.

Name:

表单名称,表单名称的定义是为了脚本语言等对它进行控制。

2、HTML控件

（1）type类型不同，也有不同的属性。

#表示控件的类型，有这些：

text：

文本框，passsoword:

密码框，button:

普通按钮，reset：

重置按钮，submit：

提交按钮，radio：

单选框，checkbox：

复选框，file:

文件域，image:

图像域，hidden:

隐藏域。

（2）文本区域内容：

文本区域

（3）列表框（SelectableMenu）

...用来设置数据选项

2、根据上面的HTML语法知识，设计如图4-1所示页面：

图4-1设计表单

实验五层、行为和时间轴

一、实验名称

层、行为和时间轴

二、实验目的

1．掌握层、行为和时间轴的基本概念；

2．掌握层、行为和时间轴的基本语法。

3．能够熟练使用Dreamweaver8利用层、行为和时间轴设计友好的界面。

三、实验类型及学时

验证性实验、2学时

四、实验内容

1、用Dreamweaver进行层的操作

（1）创建层：

把Dreamweaver切换到“设计”面板，依次点击菜单中的插入----布局对象----层，即创建了一个层。

选中层，点击菜单上的“窗口”-----“属性”，即可对层的属性进行修改。

点击菜单上的“窗口”-----“层”，即在右边打开层的控制面板，可对层进行控制。

（2）插入对象和调整层的大小。

选中层，可在属性中“背景图像”中选择所要插入的图像。

选中层，层四周出现8个小方块，可选中它进行拉伸以调整层的大小。

（3）多个层操作

当建立了多个层时，可全部选中它们（按住shift键不放，鼠标进行占选），进行对齐方式操作。

选择菜单上的“修改”----排列顺序，即可对选中的层进行对齐操作。

打开右边的层控制面板，可调整层的堆放顺序，层名称旁边的“z”表示，层的堆放顺序，数字越大表示越在上面，可拖动图层调整其堆放顺序。

还有一个“眼睛”图标，表示图层的可见性，可点击它进行设置。

练习：

任意建立几个层进行练习。

2、行为

（1）启动行为面板菜单-----窗口----行为

（2）创建行为

首先选中要创建行为的对象（比如图片、超链接、表单等），在右边的行为控制面板里，选择图标“

”，添加行为事件。

如果是点击显示层的话，就选择“显示-隐藏层”命令。

设计图5-1页面效果。

要求：

建立两个层，两个链接。

当鼠标放在“教材介绍”超链接上时，显示教材的介绍，当鼠标移走时，介绍内容消失。

当鼠标放在“目录”超链接上时，显示目录内容，移走时，目录内容消失。

提示：

用到了行为里的两个事件：

onMouserOver（鼠标在***的上面）和onMouseOut（鼠标移走）。

在选择了行为控制面板的“

”图标后，选择“显示-隐藏层”命令。

即可得到所要的效果。

图5-1行为与层的应用

3、时间轴

（1）打开时间轴

菜单----时间轴或Alt+f9组合键。

（2）按如下图5-2所示设计一只蝴蝶的飞行路径。

说明：

建立一个层，层加载一张背景图片。

建立时间轴。

建立时间轴与层之间的关系。

方法：

可用鼠标选中层，将其拖至时间轴。

然后添加关键帧，在每一个关键帧的位置上选中层并移动，以此来改变飞行路径。

再在“行为频道”上添加行为，使在飞行过程触发事件，方法与前面添加行为的方法一样。

图5-2时间轴的应用

实验六CSS样式

一、实验名称

CSS样式

二、实验目的

1．掌握CSS的语法定义形式；

2．会使用文本编辑器和Dreamweaver建立HTML文档，制作简单网页。

3．学习将其它格式的文档转换成HTML格式的文档

三、实验类型及学时

验证性实验、2学时

四、实验内容

1、CSS定义的基本语法

selector{property:

value}

selector:

有四种形式（标签选择器、id选择器、class选择器和伪类选择器）

property和value:

CSS所控制对象的样式属性，value是其对应的值。

它们之间用冒号分开。

2、CSS的三种样式

行间样式：

将CSS样式编码写在HTML标签中

内部样式：

定义在HTML的一个固定位置，如标签内，其格式：

selector{property:

value}

外部样式：

定义成单独的.css文件，在调用文件中进行引用，格式为：

3根据以上基本知识，用HTML语言设计如下的页面。

图6-1CSS应用

要求：

首先通过CSS样式给页面背景加载一幅图片。

古诗在页面上居中显示，“古诗题目”字体为楷体，加粗，大小为45px，居中。

“作者”字体为隶书，加粗斜体，大小30px，靠左。

四句古诗都加下划线，字体为宋体，大小35px，第一、三句诗为一种颜色，第二四句诗又为另一种颜色，颜色自选。

这些设置都在CSS中进行，要建立.css类型的文件，并在HtML文件中，通过标签进行引用。

4、DIV+CSS的页面布局

DIV+CSS是进行排版布局的另一种方法。

标签语法：