网页设计 上海建桥学院信息技术系 矫桂娥 2009.2.

Presentation on theme: "网页设计 上海建桥学院信息技术系 矫桂娥 2009.2."— Presentation transcript:

1 网页设计 上海建桥学院信息技术系 矫桂娥 2009.2

2 网页制作工具Dreamweaver 8.1 Dreamweaver简介 8.2 站点管理 8.3 文本的制作 8.4 图像的应用
8.2 站点管理 8.3 文本的制作 8.4 图像的应用 8.5 添加多媒体对象 8.6 图层与行为 8.7 时间轴的应用 8.8 表单、框架的应用 8.9 模板和库的应用 8.10 网页特效 插件 发布等

3 8.1 Dreamweaver简介 8.1.1 Dreamweaver 的启动和主工作区 1．启动Dreamweaver
单击“开始”→“程序”→“Macromedia”→“Macromedia Dreamweaver”命令。Dreamweaver 进行一系列初始化过程后，显示起始页对话框，如图所示。在起始页对话框中可以选择“打开最近项目”、“创建新项目”或“从范例创建”。

4 8.1 Dreamweaver简介 2．Dreamweaver 的主工作区

5 8.1 Dreamweaver简介 8.1.2 Dreamweaver 8的参数设置 1．常规参数设置
选择“编辑”→“首选参数”命令，或按〈Ctrl〉+〈U〉组合键，打开“首选参数”对话框。选择“分类”列表中的“常规”选项，对话框右侧显示出相关的属性。通常设置的属性有文档选项和一些编辑选项。 图8-12 常规参数设置中更改工作区

6 8.1 Dreamweaver简介 8.1.2 Dreamweaver 8的参数设置 2．新建文档参数设置
新建文档参数设置用于建立默认的新文档类型和首选参数。选择“分类”列表中的“新建文档”选项，对话框右侧显示出相关的属性，如图8-13所示。 图8-13 新建文档参数设置

7 8.1 Dreamweaver简介 8.1.2 Dreamweaver 8的参数设置 3．站点参数设置
选择“分类”列表中的“站点”选项，对话框右侧显示出相关的属性，用于为“文件”面板设置站点首选参数，如图8-14所示。 图8-14 站点参数设置

8 8.2 站点管理 所谓站点，可以看做是一系列文档的组合，这些文档之间通过各种链接关联起来，可能拥有相似的属性，例如，描述相关的主体，采用相似的设计，或者实现相同的目的等，也可能只是毫无意义的链接。利用浏览器，就可以从一个文档跳转到另一个文档，实现对整个网站的浏览。 本地站点和远端站点 严格地说，站点也是一种文档的磁盘组织形式，它同样是由文档和文档所在的文件夹组成的。设计良好的网站通常具有科学的结构，利用不同的文件夹，将不同的网页内容分门别类地保存，这是设计网站的必要前提。结构良好的网站，不仅便于管理，也便于更新。

9 8.2 站点管理 8.2.2 建立本地站点 规划好站点结构后，应该先在Dreamweaver中定义站点，然后才能进行开发。
8.2 站点管理 建立本地站点 规划好站点结构后，应该先在Dreamweaver中定义站点，然后才能进行开发。 【例8-1】建立一个本地站点，定义站点名称和站点使用的本地根文件夹及默认的图像文件夹。本实例定义站点的名称为Sample，使用的本地文件夹为D:\myweb，默认的图像文件夹为D:\myweb\image，站点的设置如图8-15所示。站点结构如图8-16所示。 图8-15 站点设置 图8-16 站点结构

10 8.3 文本的制作 文本作为网页中最常见的页面元素，尤其是文本链接，网页制作工具都提供了许多的属性设置，以制作出符合页面整体效果的各样的文本，而不是各个网站都是一成不变的。

11 格式化文本 使用文本属性面板

12 竖排文本之一 writing-mode  语法：   writing-mode : lr-tb | tb-rl   参数：   lr-tb : 左-右，上-下 tb-rl : 上-下，右-左   说明： 设置或检索对象的内容块固有的书写方向。 当此属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。

13 竖排文本之二 layout-flow   语法： layout-flow : horizontal | vertical-ideographic   参数：  horizontal : 　对象中的内容自左边流入。下一行在前一行下面。 vertical-ideographic : 　对象中的内容自上而下流入，下一行在前一行左面。   说明： 设置或检索对象内文本的流动和方向。 当此属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。

14 <marquee></marquee>
滚动文本 <marquee></marquee> 属性： align 设定<marquee>标签内容的对齐方式 absbottom：绝对底部对齐（与g、p等字母的最下端对齐） absmiddle：绝对中央对齐 baseline：底线对齐 bottom：底部对齐（默认） left：左对齐 middle：中间对齐 right：右对齐 texttop：顶线对齐 top：顶部对齐

15 滚动文本 属性： behavior 设定滚动的方式： alternate： 表示在两端之间来回滚动。 scroll： 表示由一端滚动到另一端，会重复。 slide： 表示由一端滚动到另一端，不会重复。 bgcolor 设定活动字幕的背景颜色，背景颜色可用RGB、16进制值的格式或颜色名称来设定。 direction 设定活动字幕的滚动方向

16 滚动文本 属性： height 设定活动字幕的高度 (像素或者百分比) width 设定活动字幕的宽度 hspace 设定活动字幕里所在的位置距离父容器水平边框的距离 vspace 设定活动字幕里所在的位置距离父容器垂直边框的距离

17 滚动文本 属性： loop 设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1 scrollamount 设定活动字幕的滚动速度 scrolldelay 设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒） 值大了会有一步一停顿的效果

18 onmouseout=“this.start()” ：用来设置鼠标移出该区域时继续滚动
滚动文本 事件： onmouseout=“this.start()” ：用来设置鼠标移出该区域时继续滚动 onmouseover="this.stop()"：用来设置鼠标移入该区域时停止滚动

19 执行【插入】->【HTML】->【特殊字符】命令，插入需要的特殊字符。

20 图像和文本一样，均是构成网页的基本元素之一，但图像比文本能更加直观、生动的体现网站。无论是商业网站还是个人网站，都应该是图文并茂的网页。
8.4 图像的应用 图像和文本一样，均是构成网页的基本元素之一，但图像比文本能更加直观、生动的体现网站。无论是商业网站还是个人网站，都应该是图文并茂的网页。 网页中使用的图像格式：JPEG/JPG、GIF、PNG。 网页中使用图像，要注意图像的大小和数量。图像文件太大、太多会影响下载速度。

21 修改：图像属性面板，修改和编辑不完全符合网页要求的图像 实例：
插入图像 方法：【插入】->【图像】命令 修改：图像属性面板，修改和编辑不完全符合网页要求的图像 实例：

22 图像映像是指已被分为热区的图像，当用户单击某个热区时，会发生某种操作，比如打开链接网页等。
图像映射 图像映像是指已被分为热区的图像，当用户单击某个热区时，会发生某种操作，比如打开链接网页等。 实例：上述例子的改进

23 图像占位符是临时图像，网站排版布局中经常用到的功能，不在浏览器中显示的，在发布站点之前，应用合适的图像替换。
可以使用fireworks进行创建。

24 由“原始图像”和“鼠标经过图像”组成，页面载入时，先显示“原始图像”，当鼠标经过图像时，自动显示“鼠标经过图像”。离开后，又恢复原样。

25 方法：【插入】->【图像对象】->【导航条】
导航条的制作 方法：【插入】->【图像对象】->【导航条】

26 方法：【命令】->【创建网站相册】
网站相册的制作 方法：【命令】->【创建网站相册】

27 表格用来清晰的显示列表数据，还用来进行网页的定位，制作特殊的效果。

28 表格

29 表格

30 表格 制作不同的表格： 普通表格 立体表格 细线表格 单线表格 导入表格式数据： 执行【文件】->【导入表格式数据】命令或 【插入】->【表格对象】->【导入表格式数据】命 令，显示“导入表格式数据”对话框。

31 表格 注意事项： 表格填充和间距的含义？ 不设置与设置为0效果相同吗 ？

32 网页中除了包括文本和图像，还需要声音、视频、flash等多媒体对象，以丰富网站的内容，增强效果性。
8.5 添加多媒体对象 网页中除了包括文本和图像，还需要声音、视频、flash等多媒体对象，以丰富网站的内容，增强效果性。 音频格式：midi音乐、wav音乐、au格式、aiff格式、 mp3等 视频格式：RealMedia、Windows Media、QuickTime 等等。

33 添加音视频 添加背景音乐 音视频标记 内嵌音视频播放插件

34 IE中的背景音乐 添加音视频 <bgsound src=“声音文件地址” loop=“播放次数”>
Loop=“-1|infinite|整数值”

35 添加音视频 音视频标记 格式：<a href=“音视频文件地址”>热点</a> 实例

36 内嵌音视频播放插件 添加音视频 在浏览器中弹出控制面板进行音乐/视频的播放 格式： <embed src=”音频文件地址” />
其他的属性： autostart=“true”|“false”　 自动播放，默认值是false loop=“true“|”false“|整数值 重复播放与否或次数，无限次重复设定值为"true"

37 添加音视频 starttime=“分:秒”  开始播放的时间 endtime=“分:秒”　 结束播放的时间 volume=“0-100” 　   音乐音量的大小 width|height=“整数” 　面板的宽度/高度 align="top|center|bottom|baseline|left|right|texttop|middle|absmiddle|absbottom"  面板和旁边文字的对齐方式

38 添加音视频 controls=“console|smallconsole|playbutton|pausebutton|stopbutton|volumelever” 定制面板，默认值是console hidden=“true“|”false”　　默认值是false EnableContextMenu=“true“|”false”　是否响应右键菜单

39 8.6 图层与行为 图层可以放置在页面的任意位置，使用图层可以以像素为单位来精确定位页面元素。可以自由移动，响应事件，控制显示等，配合时间轴的使用，可同时移动一个或多个图层，从而轻松制作出动态效果。 行为是指某个事件发生时浏览器执行的动作。因此，行为（Behavior）是由事件（Event）和动作（Action）组成的，利用行为可以创建一些交互。

40 Z轴：设置多个图层的层次，值越大，表示图层越往上面靠 可见性：设置图层是否可见 溢出：visible，默认的，所有的内容都显示
8.6 图层与行为 图层属性： Z轴：设置多个图层的层次，值越大，表示图层越往上面靠 可见性：设置图层是否可见 溢出：visible，默认的，所有的内容都显示 hidden，不显示超出的部分 scroll，显示滚动条（右方和下方） auto，只有内容超出时，才显示滚动条 剪辑：设置图层的边界

41 8.6 图层与行为 图层的基本操作： 创建 选择 激活 移动 复制 图层面板 表格与图层的互相转换 制作阴影效果

42 8.6 图层与行为 行为是事件和由该事件触发的动作的组合。使用Dreamweaver内置的行为，可不需要编写任何代码，利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能。 行为的基本元素是事件和动作。事件是浏览器产生的有效信息，即用户对网页所做的事情。动作是浏览器会检查当事件产生时，是否有一些JavaScript代码需要调用，如果有，就执行这段代码。

43 8.6 图层与行为 行为的使用方法 显示隐藏图层 拖动层 打开浏览器窗口 等等

44 8.6 图层与行为 onMouseOver 鼠标在网页元素上方时； onMouseDown 鼠标在网页元素上方按下时； onMouseOut 鼠标从网页元素上方离开时； onClick 鼠标左键在网页元素上方单击时； onload 当载入时，一般指网页载入时。

45 通过时间轴来实现网页中的运动网页元素。 8.7 时间轴的应用（*）
动画的基本原理：使层中的内容在一定的时间内，按照设计好的路线显示在页面中。在页面上显示的每一个层称为一帧，整个时间轴就是由许多的帧构成，这些帧在页面中的连续播放构成时间轴动画。

46 时间轴是通过改变层的位置、大小、可见性和叠放顺序等属性来创建动画。
8.7 时间轴的应用 （*） 时间轴是通过改变层的位置、大小、可见性和叠放顺序等属性来创建动画。 只有图像和图层才可以添加到时间轴.

47 8.7 时间轴的应用 （*） 时间轴的使用： 控制时间轴的播放和停止等 时间轴制作图像幻灯片效果 时间轴制作路径动画

48 8.7 时间轴的应用 （*） 时间轴添加行为： 改变图层的可见性 图层的交换显示 图层的叠放次序 图层的大小设置 控制影片的播放

49 拼图游戏的制作： Ps中切图 大面积的色块单独切成一块 尽可能的保持在水平线上的整齐 生成的html文件一般不直接运用
8.7 时间轴的应用 （*） 拼图游戏的制作： Ps中切图 大面积的色块单独切成一块 尽可能的保持在水平线上的整齐 生成的html文件一般不直接运用 布局时，如果用表格，注意边框、单元格间距和单元格间距的设定。 充分运用表格的align,valign 属性。

50 表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象。在Internet中，表单被广泛应用于各种信息的搜集与反馈。
8.8 表单、框架的应用 表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象。在Internet中，表单被广泛应用于各种信息的搜集与反馈。 “检查表单”行为检查指定文本域的内容，以确保用户输入了正确的数据类型。使用OnBlur事件或者OnSubmit事件。

51 表单中的图像域：代替“提交”按钮 设置图像域为“重置”按钮的方法： 8.8 表单、框架的应用
1. <input type=“image” src=“reset.gif” onclick=“javascript:document.forms[‘form1（表单名称）'].reset(); return false;" /> 2. <img src=“reset.gif” alt=“Reset” onclick=“javascript:document.forms[‘form2（表单名称） '].reset();" style="cursor:pointer;" /> 3.实际上，“提交”功能为：submit （表单名称）

52 表单中的文件域：选择文件 字段集：将它所包围的元素用线框衬托出来 跳转菜单的制作： 表单中的表单域也可以使用css样式。
8.8 表单、框架的应用 表单中的文件域：选择文件 字段集：将它所包围的元素用线框衬托出来 跳转菜单的制作： 表单中的表单域也可以使用css样式。

53 8.8 表单、框架的应用 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由框架集（Frameset）和单个框架（Frame）组成。框架集是在一个文档内定义一组框架结构的HTML网页。框架集定义了一个网页中显示的框架集数、框架集的大小、载入框架的网页源和其他可定义的属性等。单个框架是指在网页上定义的一个区域。 （表单名称）

54 Dreamweaver预定义了多种类型的框架结构。 框架面板
8.8 表单、框架的应用 框架类型 Dreamweaver预定义了多种类型的框架结构。 框架面板 在操作框架的过程中，框架面板是非常有用的。使用框架面板可以进行选取、观察、修改框架等基本操作。 框架布局实例

55 8.9 模板和库的应用 模板是网页编辑软件生成具有相似结构和外观的一种网页制作功能。 从模板创建的新页面将保持和原来模板的联系，除非被明确地隔离或分开。一旦把模板应用于一组网页，就可以通过编辑该模板来改变这一组网页中的共享信息。 模板是由两类区域组成的：锁定区域和可编辑区域。当第一次创建模板时，所有的区域都是锁定的。定义模板过程的一部分就是指定和命名可编辑的区域：惟一可以被改变的地方。 当然，模板可以进行修改，以便标记附加的编辑区域，或者重新锁定可编辑区域。

56 模板文件必须创建在指定的站点中，保存在本站点的Templates文件夹中，模板文件的扩展名为.dwt。
8.9 模板和库的应用 模板文件必须创建在指定的站点中，保存在本站点的Templates文件夹中，模板文件的扩展名为.dwt。

57 模板区域类型： 8.9 模板和库的应用 可编辑区域：可以做任何的编辑
可选区域：可将其设置为在基于模板的文件中显示或隐藏。当要为在文件中显示的内容设置条件时，即可使用可选区域。 重复区域： 根据需要在基于模板的页面中复制任意次数的模板部分。重复区域通常用于表格，也可以为其他页面元素定义重复区域。 可编辑可选区域：可选区域的一种，可以设置显示或隐藏所选区域，并且可以编辑该区域中的内容。

58

59

60

61 “文件|新建”or“插入|模板对象”or“资源面板” 编辑模板 应用模板 更新网页 “修改|模板” 资源面板的使用
8.9 模板和库的应用 创建模板：新建模板和改造为模板 “文件|新建”or“插入|模板对象”or“资源面板” 编辑模板 应用模板 更新网页 “修改|模板” 资源面板的使用

62 8.9 模板和库的应用 网站中广泛使用的诸如版权信息、公司地址、标题和页面页脚等的网页元素，需要重复或是经常更新，可以把这些元素保存为库项目。库是用来 存放库项目的。 在Dreamweaver文档中，可以将任何元素创建为库项目，其扩展名为.lbi。所有的库项目都被默认保存在当前站点的Library文件夹中。 利用库同样可以实现对文档风格的维护。但是库项目是对网页的部分元素起作用，而不同于模板的对整个网页起作用。

63 8.10 网页特效、插件、发布 网页中除了添加前面介绍的静态的网页元素，还可以通过JavaScript等脚本制作一些网页特效，穿插在网页中，以得到独特的、完善的网页效果。 插件（又称为扩展）可以帮助网页实现更多的功能，减少网页制作者的工作量。 MXP(Macromedia Extension Package)文件是用来封装插件的包，还包括插件相关文档和一系列演示文件。 插件管理器解压插件包的软件。根据mxp的信息，自动选择安装到相应的软件和目录中。

64 8.10 网页特效、插件、发布 插件的应用： 无边框窗口 滚动状态条 国家、语言、时间列表 层过渡、特效 打字效果 阻止右键

65 一些重要的网页链接： 8.10 网页特效、插件、发布
前进链接：javascript:history.go(1) 或者javascript:history.forward(1) 后退链接：javascript:history.go(-1) 或者javascript:history.back(1) 打印链接：javascript:window.print() 收藏链接：javascript:window.external.AddFavorite(" 关闭窗口：javascript:window.close()

66 设为首页： <a onclick="this.style.behavior='url (#default#homepage)';this.setHomePage (' href="#">设为首页</a>

67 8.10 网页特效、插件、发布 在完成了本地站点所有页面的设计之后，必须进行必要的测试工作，当网站能够稳定地工作后，就可以将站点上传到远程Web服务器上，使之成为真正的站点，这就是站点的发布。

68 8.10 网页特效、插件、发布 本地站点的测试工作包括：  站点浏览器的兼容性检查  站点的链接检查；
选择“文件”→“检查页”→“检查目标浏览器”  站点的链接检查； 选择“文件”→“检查页”→“链接”  在浏览器里预览整个站点中的所有页面，检查可能存在的其他问题。

69 8.10 网页特效、插件、发布 网页的上传一般是通过FTP软件工具连接Internet服务器进行上传的。FTP软件很多，有CutFtp、LeapFtp等，也可以使用Dreamweaver的站点管理器上传网页。 Dreamweaver内置了FTP上传功能，可以通过FTP实现在本地站点和远程站点之间的文件传输。

70 8.10 网页特效、插件、发布 上传的主要环节： 设置远程站点 选择“站点”→“管理站点”命令。 连接服务器
必须建立本地站点和Internet服务器的真正连接，才能真正构建远程站点。 文件的上传和下载 在设置本地站点信息和远程站点信息后，就可以进行站点间文件的上传及下载操作。

71 8.10 网页特效、插件、发布 网站的推广宣传 1.登录搜索引擎 2.登录网站导航站点 3.交换链接 4.付费广告
5.在专业论坛上发表文章、消息 6.发布邮件

72 习题8 1．简答Dreamweaver文档编辑所包括的3种视图及特点。 2．本地站点和远端站点的区别是什么？举例建立一个本地站点。
3．在本地站点中创建一个首页文件index.htm和一个存放图像的文件夹image。自己定义首页文件的标题、背景色和页面字体。 4．使用网页的基本元素设计一个简单的以美食为主题的网页。 5．简答超链接3种路径的区别和适用场合。 6．使用图像和超链接制作一个手机展示的页面，主页面显示手机的缩略图，单击缩略图后打开一个新页面，使用表格和放大的图片介绍选择手机的性能指标，如图8-76所示。 7．设计一个包含内嵌视频、使用超链接的声音和视频的页面。 8．使用表格制作一个学生课程表的页面。