网站设计与制作上机3.docx

网站设计与制作上机3.docx

《网站设计与制作上机3.docx》由会员分享，可在线阅读，更多相关《网站设计与制作上机3.docx（10页珍藏版）》请在冰豆网上搜索。

网站设计与制作上机3

实验九HTML基础（九）

实验要求：

HTML框架

实验任务：

1、垂直分类

2、水平分栏

3、框架的一些知识

框架

使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。

这样的HTML文档被称为框架页面，它们是相互独立的。

使用框架的不利因素有：

∙网站开发者需要关心更多HTML文档的情况。

∙打印整个页面变得困难。

frameset标签

∙标签定义了如何将窗口拆分成框架。

∙每个frameset标签定义了一组行和列。

∙行/列的值指明了每个行/列在屏幕上所占的大小。

frame标签

∙标签定义了每个框架中放入什么文件。

下面这个例子中，有一个两列的分栏。

第一个被设置成窗口宽度的25％，第二个被设置成窗口宽度的75％。

页面“frame_a.htm”被放在第一个分栏中，“frame_b.htm”被放在第二个分栏中。

4、混合框架：

5、使用了noresize="noresize"的框架：

实验十HTML基础（十）

实验要求：

HTML列表，HTML支持有序、无序和自定义列表。

实验任务：

1、一个无序列表：

AnUnorderedList:

• Coffee
• Tea
• Milk

2、有序列表

AnOrderedList:

1. Coffee
2. Tea
3. Milk

3、列表的一些知识

无序列表

无序列表是一个项目的序列。

各项目前加有标记（通常是黑色的实心小圆圈）。

无序列表以

标签开始。

每个列表项目以

• 开始。

  • Coffee
  • Milk

  在浏览器中显示如下：

  ∙Coffee

  ∙Milk

  无序列表的项目中可以加入段落、换行、图像，链接，其他的列表等等。

  有序列表

  有序列表也是一个项目的序列。

  各项目前加有数字作标记。

  有序列表以

  标签开始。

  每个列表项目以

  1. 开始。

     1. Coffee
     2. Milk

     在浏览器中显示如下：

     1.Coffee

     2.Milk

     有序列表的项目中可以加入段落、换行、图像，链接，其他的列表等等。

     自定义列表

     自定义列表不是一个项目的序列，它是一系列条目和它们的解释。

     有序列表以

     标签开始，自定义列表条目以

     开始，自定义列表的定义以

     开始。

     Coffee

     Blackhotdrink

     Milk

     Whitecolddrink

     在浏览器中显示如下：

     Coffee

     Blackhotdrink

     Milk

     Whitecolddrink

     自定义列表的定义（标签

     ）中可以加入段落、换行、图像，链接，其他的列表等等。

     4、有序列表的不同类型

     Numberedlist:

     1. Apples
     2. Bananas
     3. Lemons
     4. Oranges

     Letterslist:

     Apples

     Bananas

     Lemons

     Oranges

  Lowercaseletterslist:

• Apples
• Bananas
• Lemons
• Oranges

Romannumberslist:

• Apples
• Bananas
• Lemons
• Oranges

LowercaseRomannumberslist:

• Apples
• Bananas
• Lemons
• Oranges

5、无序列表的不同类型

Discbulletslist:

• Apples
• Bananas
• Lemons
• Oranges

Circlebulletslist:

Squarebulletslist:

6、嵌套列表

AnestedList:

• Coffee
• Tea

  • Blacktea
  • Greentea

• Milk

实验十一HTML基础

实验要求：

其它常用HTML标签：

等。

实验任务：

1、会移动的文字（Marquee）

基本语法

...

会移动的文字！

文字移动属性的设置

方向#=left,right

从右向左移！

从左向右移！

方式#=scroll,slide,alternate

一圈一圈绕着走！

只走一次就歇了！

来回走！

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

只走3趟！

只走3趟！

只走3趟！

速度

走得好快哟！

外观（Layout）设置

对齐方式（Align）#=top,middle,bottom

会移动的文字！

底色

#=rrggbb16进制数码，或者是下列预定义色彩：

Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,

Fuchsia,White,Green,Purple,Silver,Yellow,Aqua

会移动的文字！

面积

会移动的文字！

空白（Margins）

********************************************

hi,

会移动的文字！

大家好！

实验十二熟悉DW软件环境、配置站点

实验要求：

掌握网页制作软件的使用，掌握使用站点管理器建立站点的方法。

实验任务：

1、通过对网页制作软件Dreamweaver的使用，熟悉该软件的基本编辑环境。

2、通过站点管理器，设置一个完整站点，包括根文件夹的路径、默认图片文件夹的路径的设置。

实验十三超链接制作

教学要求：

掌握制作超级链接的方法。

实验任务：

（1）在Dreamweaver中，针对一副图片制作图象的热区，当点击图象不同区域时跳转到不同的网页。

（2）在一个网页中实现三个锚点的制作。

实验十四行为动作

教学要求：

掌握使用行为动作的方法。

实验任务：

在Dreamweaver中，利用行为动作设计：

（1）单击图象时实现图象跳转到其他网页。

（2）鼠标移动到图象上方时实现图象的翻转。

实验十五动画制作

教学要求：

掌握使用时间轴和图层技术的方法。

实验任务：

在Dreamweaver中，利用时间轴和图层技术设计一个广告页面（包含漂浮的图象或文字，展开的画卷，以及幻灯片播放似的图象）。