网站规划与网页设计.ppt

网页设计,上海建桥学院信息技术系 矫桂娥 2009.2,2,8.1 Dreamweaver简介 8.2 站点管理 8.3 文本的制作 8.4 图像的应用 8.5 添加多媒体对象 8.6 图层与行为 8.7 时间轴的应用 8.8 表单、框架的应用 8.9 模板和库的应用 8.10 网页特效 插件 发布等,网页制作工具Dreamweaver,3,8.1.1 Dreamweaver 的启动和主工作区 1启动Dreamweaver 单击“开始”“程序”“Macromedia”“Macromedia Dreamweaver”命令。Dreamweaver 进行一系列初始化过程后，显示起始页对话框，如图所示。在起始页对话框中可以选择“打开最近项目”、“创建新项目”或“从范例创建”。,8.1 Dreamweaver简介,4,2Dreamweaver 的主工作区 Dreamweaver 的主工作区由插入工具栏、文档工具栏、文档窗口、属性面板等部分组成，如图所示。,8.1 Dreamweaver简介,5,8.1.2 Dreamweaver 8的参数设置 1常规参数设置 选择“编辑”“首选参数”命令，或按Ctrl+U组合键，打开“首选参数”对话框。选择“分类”列表中的“常规”选项，对话框右侧显示出相关的属性。通常设置的属性有文档选项和一些编辑选项。,8.1 Dreamweaver简介,图8-12 常规参数设置中更改工作区,6,8.1.2 Dreamweaver 8的参数设置 2新建文档参数设置 新建文档参数设置用于建立默认的新文档类型和首选参数。选择“分类”列表中的“新建文档”选项，对话框右侧显示出相关的属性，如图8-13所示。,8.1 Dreamweaver简介,图8-13 新建文档参数设置,7,8.1.2 Dreamweaver 8的参数设置 3站点参数设置 选择“分类”列表中的“站点”选项，对话框右侧显示出相关的属性，用于为“文件”面板设置站点首选参数，如图8-14所示。,8.1 Dreamweaver简介,图8-14 站点参数设置,8,所谓站点，可以看做是一系列文档的组合，这些文档之间通过各种链接关联起来，可能拥有相似的属性，例如，描述相关的主体，采用相似的设计，或者实现相同的目的等，也可能只是毫无意义的链接。利用浏览器，就可以从一个文档跳转到另一个文档，实现对整个网站的浏览。 8.2.1 本地站点和远端站点 严格地说，站点也是一种文档的磁盘组织形式，它同样是由文档和文档所在的文件夹组成的。设计良好的网站通常具有科学的结构，利用不同的文件夹，将不同的网页内容分门别类地保存，这是设计网站的必要前提。结构良好的网站，不仅便于管理，也便于更新。,8.2 站点管理,9,8.2.2 建立本地站点 规划好站点结构后，应该先在Dreamweaver中定义站点，然后才能进行开发。 【例8-1】建立一个本地站点，定义站点名称和站点使用的本地根文件夹及默认的图像文件夹。本实例定义站点的名称为Sample，使用的本地文件夹为D:myweb，默认的图像文件夹为D:mywebimage，站点的设置如图8-15所示。站点结构如图8-16所示。,8.2 站点管理,图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, 属性： align 设定标签内容的对齐方式 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()” ：用来设置鼠标移出该区域时继续滚动 onmouseover=“this.stop()“：用来设置鼠标移入该区域时停止滚动,滚动文本,19,执行【插入】-【HTML】-【特殊字符】命令，插入需要的特殊字符。,特殊字符,20,图像和文本一样，均是构成网页的基本元素之一，但图像比文本能更加直观、生动的体现网站。无论是商业网站还是个人网站，都应该是图文并茂的网页。 网页中使用的图像格式：JPEG/JPG、GIF、PNG。 网页中使用图像，要注意图像的大小和数量。图像文件太大、太多会影响下载速度。,8.4 图像的应用,21,方法：【插入】-【图像】命令 修改：图像属性面板，修改和编辑不完全符合网页要求的图像 实例：,插入图像,22,图像映像是指已被分为热区的图像，当用户单击某个热区时，会发生某种操作，比如打开链接网页等。 实例：上述例子的改进,图像映射,23,图像占位符是临时图像，网站排版布局中经常用到的功能，不在浏览器中显示的，在发布站点之前，应用合适的图像替换。 可以使用fireworks进行创建。,图像占位符,24,由“原始图像”和“鼠标经过图像”组成，页面载入时，先显示“原始图像”，当鼠标经过图像时，自动显示“鼠标经过图像”。离开后，又恢复原样。,鼠标经过图像,25,方法：【插入】-【图像对象】-【导航条】,导航条的制作,26,方法：【命令】-【创建网站相册】,网站相册的制作,27,表格用来清晰的显示列表数据，还用来进行网页的定位，制作特殊的效果。,表格,28,表格,29,表格,30,制作不同的表格： 普通表格 立体表格 细线表格 单线表格 导入表格式数据： 执行【文件】-【导入表格式数据】命令或 【插入】-【表格对象】-【导入表格式数据】命 令，显示“导入表格式数据”对话框。,表格,31,注意事项： 表格填充和间距的含义？ 不设置与设置为0效果相同吗 ？,表格,32,网页中除了包括文本和图像，还需要声音、视频、flash等多媒体对象，以丰富网站的内容，增强效果性。 音频格式：midi音乐、wav音乐、au格式、aiff格式、 mp3等 视频格式：RealMedia、Windows Media、QuickTime 等等。,8.5 添加多媒体对象,33,添加背景音乐 音视频标记 内嵌音视频播放插件,添加音视频,34,IE中的背景音乐 Loop=“-1|infinite|整数值”,添加音视频,35,音视频标记 格式：热点 实例,添加音视频,36,内嵌音视频播放插件 在浏览器中弹出控制面板进行音乐/视频的播放 格式： 其他的属性： 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,图层可以放置在页面的任意位置，使用图层可以以像素为单位来精确定位页面元素。可以自由移动，响应事件，控制显示等，配合时间轴的使用，可同时移动一个或多个图层，从而轻松制作出动态效果。 行为是指某个事件发生时浏览器执行的动作。因此，行为（Behavior）是由事件（Event）和动作（Action）组成的，利用行为可以创建一些交互。,8.6 图层与行为,40,图层属性： Z轴：设置多个图层的层次，值越大，表示图层越往上面靠 可见性：设置图层是否可见 溢出：visible，默认的，所有的内容都显示 hidden，不显示超出的部分 scroll，显示滚动条（右方和下方） auto，只有内容超出时，才显示滚动条 剪辑：设置图层的边界,8.6 图层与行为,41,图层的基本操作： 创建 选择 激活 移动 复制 图层面板 表格与图层的互相转换,8.6 图层与行为,制作阴影效果,42,行为是事件和由该事件触发的动作的组合。使用Dreamweaver内置的行为，可不需要编写任何代码，利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能。 行为的基本元素是事件和动作。事件是浏览器产生的有效信息，即用户对网页所做的事情。动作是浏览器会检查当事件产生时，是否有一些JavaScript代码需要调用，如果有，就执行这段代码。,8.6 图层与行为,43,行为的使用方法 显示隐藏图层 拖动层 打开浏览器窗口 等等,8.6 图层与行为,44,onMouseOver 鼠标在网页元素上方时； onMouseDown 鼠标在网页元素上方按下时； onMouseOut 鼠标从网页元素上方离开时； onClick 鼠标左键在网页元素上方单击时； onload 当载入时，一般指网页载入时。,8.6 图层与行为,45,通过时间轴来实现网页中的运动网页元素。 动画的基本原理：使层中的内容在一定的时间内，按照设计好的路线显示在页面中。在页面上显示的每一个层称为一帧，整个时间轴就是由许多的帧构成，这些帧在页面中的连续播放构成时间轴动画。,8.7 时间轴的应用（*）,46,时间轴是通过改变层的位置、大小、可见性和叠放顺序等属性来创建动画。 只有图像和图层才可以添加到时间轴.,8.7 时间轴的应用 （*）,47,时间轴的使用： 控制时间轴的播放和停止等 时间轴制作图像幻灯片效果 时间轴制作路径动画,8.7 时间轴的应用 （*）,48,时间轴添加行为： 改变图层的可见性 图层的交换显示 图层的叠放次序 图层的大小设置 控制影片的播放,8.7 时间轴的应用 （*）,49,拼图游戏的制作： Ps中切图 大面积的色块单独切成一块 尽可能的保持在水平线上的整齐 生成的html文件一般不直接运用 布局时，如果用表格，注意边框、单元格间距和单元格间距的设定。 充分运用表格的align,valign 属性。,8.7 时间轴的应用 （*）,50,表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象。在Internet中，表单被广泛应用于各种信息的搜集与反馈。 “检查表单”行为检查指定文本域的内容，以确保用户输入了正确的数据类型。使用OnBlur事件或者OnSubmit事件。,8.8 表单、框架的应用,51,表单中的图像域：代替“提交”按钮 设置图像域为“重置”按钮的方法： 1. 2. 3.实际上，“提交”功能为：submit,8.8 表单、框架的应用,（表单名称）,52,表单中的文件域：选择文件 字段集：将它所包围的元素用线框衬托出来 跳转菜单的制作： 表单中的表单域也可以使用css样式。,8.8 表单、框架的应用,53,框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由框架集（Frameset）和单个框架（Frame）组成。框架集是在一个文档内定义一组框架结构的HTML网页。框架集定义了一个网页中显示的框架集数、框架集的大小、载入框架的网页源和其他可定义的属性等。单个框架是指在网页上定义的一个区域。,8.8 表单、框架的应用,（表单名称）,54,框架类型 Dreamweaver预定义了多种类型的框架结构。 框架面板 在操作框架的过程中，框架面板是非常有用的。使用框架面板可以进行选取、观察、修改框架等基本操作。 框架布局实例,8.8 表单、框架的应用,55,模板是网页编辑软件生成具有相似结构和外观的一种网页制作功能。 从模板创建的新页面将保持和原来模板的联系，除非被明确地隔离或分开。一旦把模板应用于一组网页，就可以通过编辑该模板来改变这一组网页中的共享信息。 模板是由两类区域组成的：锁定区域和可编辑区域。当第一次创建模板时，所有的区域都是锁定的。定义模板过程的一部分就是指定和命名可编辑的区域：惟一可以被改变的地方。 当然，模板可以进行修改，以便标记附加的编辑区域，或者重新锁定可编辑区域。,8.9 模板和库的应用,56,模板文件必须创建在指定的站点中，保存在本站点的Templates文件夹中，模板文件的扩展名为.dwt。,8.9 模板和库的应用,57,模板区域类型： 可编辑区域：可以做任何的编辑 可选区域：可将其设置为在基于模板的文件中显示或隐藏。当要为在文件中显示的内容设置条件时，即可使用可选区域。 重复区域： 根据需要在基于模板的页面中复制任意次数的模板部分。重复区域通常用于表格，也可以为其他页面元素定义重复区域。 可编辑可选区域：可选区域的一种，可以设置显示或隐藏所选区域，并且可以编辑该区域中的内容。,8.9 模板和库的应用,58,59,60,61,创建模板：新建模板和改造为模板 “文件|新建”or“插入|模板对象”or“资源面板” 编辑模板 应用模板 更新网页 “修改|模板” 资源面板的使用,8.9 模板和库的应用,62,网站中广泛使用的诸如版权信息、公司地址、标题和页面页脚等的网页元素，需要重复或是经常更新，可以把这些元素保存为库项目。库是用来 存放库项目的。 在Dreamweaver文档中，可以将任何元素创建为库项目，其扩展名为.lbi。所有的库项目都被默认保存在当前站点的Library文件夹中。 利用库同样可以实现对文档风格的维护。但是库项目是对网页的部分元素起作用，而不同于模板的对整个网页起作用。,8.9 模板和库的应用,63,网页中除了添加前面介绍的静态的网页元素，还可以通过JavaScript等脚本制作一些网页特效，穿插在网页中，以得到独特的、完善的网页效果。 插件（又称为扩展）可以帮助网页实现更多的功能，减少网页制作者的工作量。 MXP(Macromedia Extension Package)文件是用来封装插件的包，还包括插件相关文档和一系列演示文件。 插件管理器解压插件包的软件。根据mxp的信息，自动选择安装到相应的软件和目录中。,8.10 网页特效、插件、发布,64,插件的应用： 无边框窗口 滚动状态条 国家、语言、时间列表 层过渡、特效 打字效果 阻止右键,8.10 网页特效、插件、发布,65,一些重要的网页链接： 前进链接：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(),8.10 网页特效、插件、发布,66,设为首页： 设为首页,67,在完成了本地站点所有页面的设计之后，必须进行必要的测试工作，当网站能够稳定地工作后，就可以将站点上传到远程Web服务器上，使之成为真正的站点，这就是站点的发布。,8.10 网页特效、插