第11章 网页设计.pptVIP

第11章网页设计 本章学习重点 网站设计的基本方法Dreamweaver的特点Dreamweaver中插入多种媒体的方法 包括文字 图像 声音 flash等等超级链接的设置Dreamweaver中表格的基本操作Dreamweaver中布局表格的使用技巧Dreamweaver中框架的操作Dreamweaver的层 行为 时间轴的概念Dreamweaver中表单元素的添加方法 11 1网站设计方法简介 1 明确的网站主题2 清晰的网站结构3 风格独特的网站形象4 有力的网站宣传 11 2Dreamweaver简介 Dreamweaver是美国Macromedia公司开发的集网页制作和管理网站于一体的所见即所得网页编辑器 它是一套针对专业网页设计师特别开发的视觉化网页开发工具 利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页 11 2 1Dreamweaver的特点 1 操作简单2 多媒体处理功能强3 灵活轻便4 建站方便 11 2 2Dreamweaver的安装 1 系统要求2 安装步骤 Dreamweaver工作区 2 站点布局 网站设计初始需要设计人员对网站的主题进行规划 网站必须主题鲜明 有层次感 一般的网站中的网页设计不多于三层 这样 用户可以方便地从主页中快速的找到连接网站中的其他网页的途径 2 站点布局 1 设置主页 2 查看站点地图 11 2 4站点的应用与管理 在Dreamweaver中包括两种站点 远程站点 服务器上组成Web站点的文件 用于个使用者进行网上浏览 本地站点 与远程站点上的文件对应的本地磁盘上的文件 在最常见的Dreamweaver工作流程中 用户在本地磁盘上编辑文件 然后将它们上传到远程站点 11 2 4站点的应用与管理 1 创建站点 11 3 1新建并保存网页 1 新建网页2 打开网页3 保存网页 11 3 2设置页标题 11 3 3添加文字及格式设置 1 添加文字 1 添加文本文档 2 添加Word或Excel文档 2 文字颜色设置 3 设置或更改字体 11 3 4添加图像 Web页中通常使用的图形文件格式只有三种 即GIF JPEG和PNG1 插入图像占位符 11 3 4添加图像 2 替换占位符 插入图像3 直接插入图像 11 3 4添加图像 4 调整图像调整图像常常是对图像进行重新取样 裁剪 亮度 对比度调整 锐化等等 这些操作往往可以通过属性窗口中的按钮快速完成 11 3 5设置超级链接 1 创建链接在一个文档中可以创建几种类型的链接 其类型和创建步骤如下 1 链接到其它文档 11 3 5设置超级链接 2 命名锚记链接 11 3 5设置超级链接 3 电子邮件链接 11 3 5设置超级链接 4 空链接和脚本链接此类链接使用户能够在对象上附加行为 或者创建执行JavaScript代码的链接 2 链接的字体显示 3 为图片设置超级链接 图像地图是指已被分为多个区域 或称 热点 的图像 当用户单击某个热点时 会发生某种操作 例如 打开一个新文件 11 3 6插入flash 1 创建和插入Flash按钮 2 插入Flash文本对象 3 插入Flash影片 1 在 文档 窗口的 设计 视图中 将插入点放置在需要插入影片的地方 2 在 插入 栏的 常用 类别中 选择 媒体 然后单击 插入Flash 图标 或者选择 插入 媒体 Flash 3 在显示的对话框中 选择需要加入的Flash文件 swf Flash占位符随即出现在 文档 窗口中 4 在 文档 窗口中 单击Flash占位符以选择要预览的Flash影片 4 插入Flash元素 使用Dreamweaver 设计者可以在文档中插入Flash元素 Flash元素使设计者可以快速 方便地使用预置元素构建丰富的Internet应用程序 11 3 7表格的应用 1 插入表格 3 拆分和合并单元格 1 合并操作 2 拆分单元格 4 布局模式 1 切换到 布局 模式 2 绘制布局表格 3 绘制布局单元格 11 3 8框架在网页上的应用 框架提供将一个浏览器窗口划分为多个区域 每个区域都可以显示不同HTML文档的方法 使用框架的最常见的情况就是 一个框架显示包含导航控件的文档 而另一个框架显示含有内容的文档 1 创建框架 1 创建框架 2 设计框架集 图11 35框架面板图11 36拆分后的框架面板 2 具有控制链接的框架内容的设置 2 具有控制链接的框架内容的设置 在目标的下拉列表框中有以下四个固有选项 其含义是 blank在新的浏览器窗口中打开链接的文档 同时保持当前窗口不变 parent在显示链接的框架的父框架集中打开链接的文档 同时替换整个框架集 self在当前框架中打开链接 同时替换该框架中的内容 top在当前浏览器窗口中打开链接的文档 同时替换所有框架 11 3 9层的概念 在Dreamweaver中可以使用层来设计页面的布局 可以将层前后放置 隐藏某些层而显示其它层 或者在屏幕上用鼠标或行为等移动层 例如可以在一个层中放置背景图像 然后在该层的前面放置第二个层 它包含带有透明背景的文本 2 使用 层 面板 通过 层 面板可以管理文档中的层 使用 层 面板可防止重叠 更改层的可见性 将层嵌套或堆叠 以及选择一个或多个层 3 对齐层 使用层对齐命令可按最后一个选定层的边框来对齐一个或多个层 4 在层和表格之间转换 1 层转换为表格 2 表转换为层 11 3 10利用行为制作动态效果 行为是Dreamweaver中内置的JavaScript程序库 使用行为可以使网页制作人员不用编写脚本程序而实现一些动作 例如 播放声音 打开浏览器窗口 弹出消息框 控制Flash播放等等 1 播放声音 2 打开浏览器窗口 3 弹出消息框 4 控制Shockwave或Flash 11 3 11使用时间轴制作DHTML 时间轴 是Dreamweaver中的特殊功能 常常用于在网页上显示漂浮的图片信息 这种漂浮的图片往往很显眼 这种漂浮的图片就可以用 时间轴 功能现实 时间轴 只能对 层 发生作用 所以 如果要产生动画效果 首先要创建层 再将图像 文本等内容插入到层中 然后通过移动层来移动这些元素 使用时间轴的步骤为 图11 49时间轴面板 图11 50时间轴提示框 图11 51加入关键帧后的时间轴面板 图11 52图层漂浮路线 11 3 12使用样式表CSS 现代网页制作的复杂效果离不开CSS技术 采用CSS技术可以有效的对页面的布局 字体 颜色 背景和其他效果实现更加精确的控制 它不仅可以做出美观工整令浏览者赏心悦目的网页 还能给网页添加许多特殊的效果 创建CSS样式表的过程就是对各种CSS属性的设置过程 这些属性分为 类型 背景 区块 方框 边框 列表 定位 扩展等等八个部分 1 创建新的CSS样式表 1 新建CSS样式 图11 54编辑样式表对话框 图11 55新建CSS样式表对话框 弹出式菜单中提供的选择器 它们的含义是 a link 未访问的链接a visited 已访问的链接a active 激活时 链接获得焦点时 的链接a hover 鼠标移到链接上时 2 使用CSS改变超级链接的显示效果 图11 56a的CSS样式定义对话框 图11 57新建CSS样式表对话框 图11 58CSS样式定义对话框 11 3 13表单的使用 表单是一种可以使用户将本身的信息交给Web服务器的一种页面元素 加入表单后 访问者可以使用诸如文本域 列表框 复选框以及单选按钮之类的表单对象输入信息 然后单击确认或提交按钮提交这些信息 11 3 13表单的使用 1 文本字段 2 隐藏域 3 按钮 4 复选框 5 单选按钮 6 列表 菜单 7 跳