学习情境四

《网页设计》学习情境四：商务网站前台设计

商务网站前台设计任务书

【任务设计】

根据素材设计网站。以模板和库布局页面结构，使用CSS样式表格式化网页元素。

1、创建站点

2、设计包含表单元素的页面

3、添加页面超链接内容

4、使用属性面板和html标签设置页面各个对象的属性

5、预览页面

【任务准备】

开发环境的配置，包括Win2000 、HTML、Dreamweaver 【任务指导】

1、创建站点

2、设计网页布局

3、添加页面表单元素

4、添加页面超链接内容

5、使用属性面板和html标签设置页面各个对象的属性

6、预览网页效果

7、样式文件内容参考：

【任务分配】

分角色进行，按组完成该项目。要求在项目中分为不同角色完成下列任务：

1、完成总体设计任务

要求完成项目规划设计

2、完成概要设计任务

要求完成项目目标、开发及运行环境的配置

3、完成详细设计任务

要求完成集成环境的面板配置，新项目的创建，并测试功能。

学生用页

1.资讯

任务分配：

该学习情境完成商务网站前台设计的功能实现，具体详细内容见任务书知识要求：

?掌握网站规划步骤

?熟练设计包含表单元素的网页

?熟练使用CSS样式表控制网页对象格式

?熟练掌握文本、图片、动画、声音等多媒体对象的插入和属性的设置

?创建项目并测试

2.设计及实施

2.1总体设计

(1)项目规划

(2)开发环境配置

2.2详细设计任务并设施

（1）详细设计

（2）具体实施

①.开发环境配置

②.运行环境配置

3.系统功能测试（1）部分测试①.自我测试

②.相互测试

（2）系统整体测试①.自我测试

②.相互测试

“商务网站前台设计”学习指导

结构良好、内容丰富的网页，表达了一个网站提供的各种信息。为了使网页内容的格式更多样式、页面效果更充满变化和吸引力，并且能与用户进行互动，Dreamweaver提供了相关功能来满足用户的需求。利用系统提供的工具和面板，通过行为的使用，时间轴的使用，表单的使用，层结构的使用实现常见的动态互动式效果。

本章的主要内容有：

●层的使用

●时间轴的使用

●行为编辑

●表单编辑

1创建层

层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。

1.1创建层

1、创建普通层

a) 插入层

选择菜单栏-插入-布局对象-层命令，即可将层插入到页面中去。如图1-1所示：

图1-1插入层

使用这种方法插入层，层的位置由光标所在的位置决定，光标放置在什么位置，层就在什么位置出现。选中层会出现六个小手柄，拖动小手柄可以改变层的大小。

（2）拖放层

打开快捷栏的“布局”选项，单击“绘制层”按钮，单击鼠标左键，并且按住不放，拖动图标到文档窗口中，然后释放鼠标，这是层就会出现在页面中了。如图1-2所示：

图1-2布局工具栏

（3）绘制层

打开快捷栏的“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标猴层就会出现在页面中。

2、创建嵌套层

创建嵌套层就是在一个层内插入另外的层。

方法一：将光标放才某层内，选择菜单栏-插入-布局对象-层命令，即可在改层内插入一个层。如图1-3所示：

图1-3创建嵌套层

方法二：打开层面板，从中选择需要嵌套的层，此时按住Ctrl键同时拖动改层到另外一个层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。如图1-4所示：

图1-4层面板

1.2 设置层的属性

选中要设置的层，就可以在属性面板中设置层的属性了。如图1-5所示：

图1-5层属性面板

层编号：给层命名，以便在“层”面板和JavaScript 代码中标识该层。

左、上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。

宽、高：指定层的宽度和高度。如果层的内容超过指定大小，层的底边缘（按照在设计视图中的显示）会延伸以容纳这些内容。（如果“溢出”属性没有设置为“可见”，那么当层在浏览器中出现时，底边缘将不会延伸。

Z轴：设置层的层次属性。在浏览器中，编号较大的层出现在编号较小的层的前面。值可以为正，也可以为负。当更改层的堆叠顺序时，使用“层”面板要比输入特定的z 轴值更为简便可见性：在“可见性”下拉列表中，设置层的可见性。使用教本语言如JavaScrip可以控制层的动态显示和隐藏。有四个选项：

Default——选择该选项，则不指明层的可见性。

Inherit——选择该选项，可以继承父层的可见性。

Visible——选择该选项，可以显示层及其包含的内容，无论其父级层是否可见。

Hidden——选择该选项，可以隐藏层及其包含的内容，无论其父级层是否可见。

背景颜色：用来设置层的背景颜色。

背景图像——用来设置层的背景图像。

溢出——选择当层内容超过层的大小时的处理方式。有四个选项：

Visible（显示）：选择该选项，当层内容超出层的范围时，可自动增加层尺寸。

hidden（隐藏）: 选择该选项，，当层内容超出层的范围时，保持层尺寸不变，隐藏超出部分的内容。

scroll（滚动条）: 选择该选项，则层内容无论是否超出层的范围，都会自动增加滚动条。

auto（自动）: 选择该选项，，当层内容超出层的范围时，自动增加滚动条（默认）

剪辑：设置层的可视区域。通过上、下、左、右文本框设置可视区域与层边界的像素值。层经过“剪辑”后，只有指定的矩形区域才是可见的。

类：在类的下拉列表中，可以选择已经设置好的CSS样式或新建CSS样式。

注意：位置和大小的默认单位为像素(px)。也可以指定以下单位：pc (pica)、pt（点）、in（英寸）、mm（毫米）、cm（厘米）或%（父层相应值的百分比）。缩写必须紧跟在值之后，中间不留空格：

使用层制作特效我们在创建网页的时候，可以发现层可以在网页上随意改变位置，在设定层的属性的时，可以知道层有显示隐藏的功能，通过这两个特点可以实现很多令人激动的网页动态效果。

2 时间轴及创建时间轴动画

时间轴实根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。

选择菜单栏的窗口/时间轴或按快捷键Alt＋F9，则显示时间轴。如图2-1所示：

2.1 时间轴面板

图2-1时间轴面板

（1）时间轴弹出菜单：表示当前的时间轴名称。

（2）时间轴指针：在界面上显示当前位置的帧。

（3）不管时间轴在哪个位置，一直移动到第一帧。

（4）表示时间指针的当前位置。

（5）表示每秒显示的帧数。默认值时15帧。增加帧数值，则动画播放的速度将加快。

（6）自动播放：选中该项，则网页文档中应用动画后自动运行。

（7）LOOP（循环）：选中该项，则继续反复时间轴上的动画。

（8）行为通道：在指定帧中选选择要运行的行为。

（9）关键帧：可以变化的帧。

（10）图层条：意味着插入了“层”等对象。

（11）图层通道：它是用于编辑图层的空间。

2.2 创建时间轴动画

时间线只能移动分层对象，如果想移动文本或图像之类的对象，可以将其放在层中。

（1）打开html文件，把光标放到页面左上方的位置，在插入面板选择布局>绘制层，创建六个层。分别输入文字“小”、“木”、“web”、“欢”、“迎”、“你”，将图层排列在适当位置。

（2）打开时间轴。选择层1拖动到时间轴的第一行Layer1上。

（3）用同样方法把包含有其它文字的层也根据文字的顺序拖动到时间轴的第2－6行上。（4）为了减慢文字移动速度，把时间轴的帧全部扩展为25帧。（拖动圆圈标记即可）（5）在时间轴中选择第一层Layer1的第一帧，在属性面板的顶端坐标值（T）中输入（－50），这样，可以把文字放置到上侧。用同样的方法选择其余层的第一帧后，把顶端坐标值（T）统一设定为（－50）。

（6）勾选“自动播放选项”。

（7）按F12浏览效果。图2-2和2-3表示了选中第一层Layer1后时间轴第一帧和最后一帧的效果。

图2-2时间轴设置

图2-3时间轴设置

3 利用行为制作动态页面

一般说来，动态网页是通过JavaScript或基于JavaScript的DHTML代码来实现的。包含JavaScript脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业需要专门学习。

Dreamweaver提供了“行为”的机制，虽然行为也是基于JavaScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中按几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。

行为是事件与动作的彼此结合。例如，当鼠标移动到网页的图片上方时，图片高亮显示，此时的鼠标移动称为时间，图片的变化称为动作，一般的行为都是要有事件来激活动作。动作时由预先写好的能够执行某种任务的JavaScript代码组成，而事件是由浏览器前用户的操作相关，如单击鼠标、鼠标上滚等。

3.1 了解行为

“行为”可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化(前面介绍过的轮替图像)，就导致发生了一个动作。与行为相关的有三个重要的部分——对象、事件和动作。

1、对象(Object)

对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。

2、事件(Event)

事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。

3.、动作(Action)

行为通过动作来完成动态效果，如：图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JavaScript代码，在Dreamweaver中使用Dreamweaver内置的行为往页面中添加JavaScript 代码，就不必自己编写。

4、事件与动作

将事件和动作组合起来就构成了行为，例如，将onClick行为事件与一段JavaScript代码相关联，单击鼠标时就可以执行相应的JavaScript代码(动作)。一个事件可以同多个动作相关联(1：n)，即发生事件时可以执行多个动作。为了实现需要的效果，我们还可以指定和修改动作发生的顺序。

Dreamweaver内置了许多行为动作，好象是一个现成的JavaScript库。除此之外，第三方厂商提供了更多的行为库，下载并在Dreamweaver中安装行为库中的文件，可以获得更多的可操作行为。如果您很熟悉JavaScript语言，也可以自行设计新动作，添加到Dreamweaver中。

3.2 应用行为

1、行为面板

在Dreamwaever中，对行为的添加和控制主要通过“行为”面板来实现。选择“窗口-行为”命令，打开行为面板。如图3-1所示：

图3-1行为面板

在行为面板上可以进行如下操作：

单击“+”按钮，打开动作菜单，添加行为；单击“-”按钮，删除行为。

添加行为时，从动作菜单中选择一个行为项。

单击事件列右方的三角，打开事件菜单，可以选择事件。

单击"向上"箭头或向下箭头，可将动作项向前移或向后移，改变动作执行的顺序。

2、创建行为

一般创建行为有三个步骤：选择对象、添加动作、调整事件。

我们通过一个“打开浏览器窗口”实例说明如何创建行为。我们需要的效果是，在网页上单击一幅小图像，打开一个新窗口显示放大的图像。

（1）打开html文件，选中图片。

（2）单击行为面板上的"+"按钮，打开动作菜单。从动作菜单中选择“打开浏览器”命令，在弹出的对话框中设置参数。

在“要显示的URL”文本框中，单击“浏览按钮”选择在新窗口中载入的目标的URL地址(可以是网页也可以是图像)。

窗口宽度设为400px，窗口高度设为300px。

窗口名称为“放大图片”。

（3）当我们添加行为时，系统自动为我们选择了事件onClick(单击鼠标)，现在，我们单击行为面板上的事件菜单按钮，打开事件菜单，重新选择一个触发行为的事件。把onClick(单击鼠标)的事件改为onMouseOver(鼠标滑过)，如图3-2所示：

图3-1行为面板事件设置

（4）按F12键预览打开新窗口的效果。

3.3行为的应用

1、“播放声音”实例

利用播放声音的动作，可以在网页中播放声音文件，如背景音乐，或单击某个按钮(文字或图片)播放一段声音。

（1）给网页添加背景音乐

打开html文件，单击编辑窗口状态栏上的标记，选中整个网页。

打开行为面板，单击"+"按钮，在菜单中选择“播放声音”。

在弹出的菜单中输入音乐文件的路径，单击“确定”。

把事件调整为onLoad(载入页面后)。

（2）给图片添加声音，方法同上。

2、设置状态行文本

浏览器下端的状态行通常显示当前状态的提示信息，利用“设置状态栏文本”行为，可以重新设置状态行信息。

选中要附加行为的对象，如网页的标记，或一个链接。

单击行为面板上的"+"按钮，在打开的动作菜单。

选择“设置文本”-“设置状态文本”命令，在打开的“信息”对话框中输入需要的文本。

按F12键，可以看到打开网页后，浏览器下端的状态行上有了新输入的信息。

3、网页中的变色按钮

新建html文件，插入一个1行2列的表格，做如下设置：