静态网页设计与制作.ppt

第四讲给网页添加多媒体元素 P108 1 插入FLASH2 插入视频 音频 网页中的动态元素 动态元素使网页更加丰富 更具观赏性 我们可以通过Dreamweaver给网页插入各种动态元素 动态元素包含 Flash动画 shockwave动画 ActiveX控件及Applet等等 Flash动画是使用最多的一种动态元素 它是高质量的矢量动画 目前已经成为Internet上矢量动画的标准 其优点 表现力强 极强的视听感受 体积小 被世界绝大多数浏览器支持 如用Flash制作的Logo Banner 宣传广告 FlashMTV等 国外很多网站直接采用Flash制作 媒体的来源 1 网络下载2 从素材库导入3 自己制作 Flash的文件类型 1 Fla Flash的源文件 可用Flash软件直接编辑 2 Swf Flash的电影文件 是压缩过的Flash文件 通常所指的Flash动画就是该格式的文件 3 Swt Flash的库文件 相当于模版 通过参数设置可创建swf文件 4 Flv 是一种视频文件 用于通过Flash播放器传送 提示 swfswt格式的文件可使用flash adobeflashplayer 播放器进行播放 而fla只能在flash编辑窗口中进行播放 Flv格式需要插入到网页中 在浏览器中打开网页才能播放 插入FLASH动画 方法 插入 媒体 SWF 和插入图片一样 当选择的swf文件不在你的站点下 系统会自动提醒你是否把swf文件拷贝到你的站点下面 这个时候就点 确定 插入的flash动画以flash内容占位符的形式显示在编辑窗口中 不会显示Flash的实际内容 累进式下载视频 在浏览器接收到第一段视频期间 在短暂延迟后会开始播放视频 在播放期间将继续下载视频 累进式下载FLV文件可以宿主在任何标准的Web服务器上 流视频 视频立即开始播放 并且提供了超过累进式下载的优点 比如搜寻能力 这意味着视频播放头可以移动到任何位置 并在那个位置立即开始播放 不流式FLV文件必须宿主在使用FlashMediaServer的Web主机上 方法 插入 媒体 FLV 添加背景音乐 添加后 网页文件会变大 使用一定注意网页大小 使用标签的方式 插入 标签 打开 标签选择器 展开 html标签 页面元素 在网页中插入声音文件可使浏览者有一种愉悦的感觉 声音格式有很多种形式 如mp3 wma wav midi ra ram rm等 p124 A B C loop的值 1 为无限循环 0 为不循环 添加音频元素 网页设计与网站策划 第五讲网页中的链接 1 插入滚动文字2 网页中的链接 插入滚动文字及控制滚动文字 我们无法通过DreamweaverCS5的可视化来制作滚动效果 只能用HTML代码来实现 专用于实现滚动 控制滚动文字 滚动方向 滚动延迟 以毫秒为单位 滚动速度 3是中速 onmouseover this stop 当鼠标在上面时 onmouseout this start 当鼠标离开时 网页中的链接 什么是超级链接 P144 在网页制作的过程中 要将网站内 外的网页有机地联系在一起需要创建超级链接来实现 在浏览网页时 单击某些文本或图像就可以打开其他页面 这些文本与图像就是创建超级链接的文本和图像 超级链接可以是文本 图像或是其他元素 flash HTML超级链接由锚记元素以及一个或多个属性组成 通常在屏幕左下角的细条 状态栏 中显示链接的目的地 属性 超级链接引用 统一资源定位器 URL 属性 值 新浏览器窗口 绝对 absolute 路径 完全的路径 完整 包括服务器规范在内的完全路径 通常用http 来表示的 优点 同链接的源点无关 只要网站地址不变更 无论文件在站点中如何移动 都可以正常实现跳转 缺点 1 不利于测试 2 不利于站点的移植 文档相对 relative 路径 不完整 以当前文件和你要连接的文件它们之间存在的路径关系 比如a htmlb html 它们处于同一级或是同一个文件夹中 我们在定义这个路径关系时 就只用在a html的连接框里填写b html 路径 P163 站点根目录相对路径 它的参照物是站点的根目录 不建议大家使用 比如 D mysite help help html要链接到D mysite company jieshao html页面 就写 company jieshao htmlWEB设计师遵循的规则 为站点内资源使用相对路径链接 而站点外资源使用绝对路径 路径 P163 文件相对路径的写法 站点根目录 在这里以contents html为源端点来进行相对路径的分析 文档相对路径的写法 网页链接分类 内部链接外部链接锚链接E MAIL链接链接目标窗口图像的超级链接 热点 网页链接的分类 内部连接 在一个网站内部的链接 如 首页到子页的链接 外部连接 和网站以外的站点相链接 如 友情链接 我的博客 首页 主页面 关于我的页面 我的作品页面 留言版页面 我的博客 首页 新浪网 腾讯网 内部连接 外部连接 小明的博客首页 小光的博客首页 网页链接的分类 文本链接 文字链接 创建成功后 鼠标放到文字上 变成手的形状 注意 在dreamweaver中创建的文本链接默认有下划线 如要去掉 可选择 页面属性 命令分类框中的 链接 来设定 音乐 视频下载链接的添加 以link文件夹为例 图像链接与热点 一种与文本超链接基本相同 选择图片 然后在 属性 面板的 链接 文本框中输入目标端点网页路径 另一种是在同一张图像上创建多个热点区域 然后分别选中这些热点区域 在 属性 面板 链接 文本框输入路径 小图链接大图链接的添加提醒 一张图片只能创建普通连接或是热点连接之一 如果一张图上同时创建了两种连接 那普通链接无效 只有热点链接生效 连接的目标窗口 目标的设置 blank新开一个窗口打开文件 parent在父级窗口打开 框架网页比较常用 self在本窗口中打开 top在浏览器的整个窗口中打开 忽略任何框架 Email链接 P158 书写方式 选中文本后在 链接 框内填写邮件地址 但是在邮件地址前要加上 mailto 锚链接 链接是从一个页面链接到另一个页面 而锚点的含义是链接到当前页面的某个部分 即单击源端点对象后可跳转到页面的指定位置 即命令锚记处 锚链接的创建分为创建命名锚记和创建连接两部分 网页链接的分类 插入 锚记命名 或者Ctrl Alt A 如 创建的命名锚记为 top 那它所对应的连接就是 top 打开maoji1文件夹进行练习 脚本链接 列举脚本链接来制作关闭窗口这个功能 网页链接的分类 书写方式 选中文本后 在 链接 框内填写 javascript window close 第六讲表格的运用 1 表格在网页制作的运用2 表格的绘制 表格的应用 新增表格表格的属性设置设定整体表格属性设定行 列 单元格属性 选择行选择列选择多个单元格选择不相邻的单元格 A 制作首页页面 以图片为主的页面 目标 学会使用Dreamweaver调整方法 以及插入切片的方法 练习 为提供的图片进行切片插入切片并调整表格的操作 将其制作成一个完整的页面 切片技巧 大面积的色块单独切成一块 尽可能的保持在水平线上的整齐 表格在网页制作中的运用 A 制作首页页面 以图片为主的页面 将1所示的切片工具选中 然后点选2所示的图片 在3所示的地方选择色值 如果色彩单一可以选择尽量小的色值位 为什么要这样 答案 这样会大大减小文件的大小 同时又能比较好的保持图片的色彩 设置好后点OK输出文件 这里的文件包括了一个htm和images文件夹 怎么来优化切片 B 制作内页页面目标 学会使用Dreamweaver的表格排版方法 练习 制作一个以 我的音乐网站 为主题的页面 要求使用表格进行排版 C 制作复杂内页页面目标 学会使用Dreamweaver的表格排版方法 提示 整个表格不要用一个大表格 而是应该根据页面的需求 用多个表格来构成 好处 这样的页面排布最后上传到服务器上进行页面下载时 速度是最快的 表格会一部分一部分由上至下的显示出来 表格的绘制 比传统的插入形式更直观 绘制表格绘制单元格 针对表格较小的时候使用 绘制表格的时候使用 布局 总结 利用表格制作网页的方法 1 当在制作以图像为主的首页时 建议大家用PS Fireworks进