静态网页设计与制作2.ppt

,第四讲 给网页添加多媒体元素(P108),1. 插入FLASH 2. 插入视频、音频,网页中的动态元素?,动态元素使网页更加丰富、更具观赏性。我们可以通过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 播放器传送）,提示：swf swt格式的文件可使用flash（adobe flash player）播放器进行播放。而fla只能在flash编辑窗口中进行播放。Flv格式需要插入到网页中，在浏览器中打开网页才能播放。,插入FLASH动画,方法：插入 媒体 SWF,和插入图片一样，当选择的swf文件不在你的站点下，系统会自动提醒你是否把swf文件拷贝到你的站点下面，这个时候就点“确定”。,插入的flash动画以flash内容占位符的形式显示在编辑窗口中，不会显示Flash的实际内容。,累进式下载视频: 在浏览器接收到第一段视频期间,在短暂延迟后会开始播放视频.在播放期间将继续下载视频.累进式下载FLV文件可以宿主在任何标准的Web服务器上。 流视频： 视频立即开始播放，并且提供了超过累进式下载的优点，比如搜寻能力，这意味着视频播放头可以移动到任何位置，并在那个位置立即开始播放。不流式FLV文件必须宿主在使用Flash Media Server的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.html b.html,它们处于同一级或是同一个文件夹中，我们在定义这个路径关系时，就只用在a.html的连接框里填写b.html。,路径：（P163）, 站点根目录相对路径 （它的参照物是站点的根目录，不建议大家使用）。 比如：D：mysitehelphelp.html要链接到D：mysitecompanyjieshao .html页面，就写/company/jieshao.html WEB设计师遵循的规则：为站点内资源使用相对路径链接，而站点外资源使用绝对路径。,路径：（P163）,文件相对路径的写法：,站点根目录,在这里以contents.html为源端点来进行相对路径的分析：,文档相对路径的写法,网页链接分类：,内部链接 外部链接 锚链接 E-MAIL链接 链接目标窗口 图像的超级链接、热点,网页链接的分类：,内部连接（在一个网站内部的链接。如，首页到子页的链接）,外部连接（和网站以外的站点相链接。如，友情链接）,我的博客（首页）,主页面,关于我的页面,我的作品页面,留言版页面,我的博客（首页）,新浪网,腾讯网,内部连接,外部连接,小明的博客首页,小光的博客首页,网页链接的分类：,文本链接（文字链接）： 创建成功后，鼠标放到文字上，变成手的形状。 注意：在dreamweaver中创建的文本链接默认有下划线，如要去掉，可选择“页面属性”命令分类框中的“链接”来设定。 音乐、视频下载链接的添加(以link文件夹为例),图像链接与热点： 一种与文本超链接基本相同，选择图片，然后在“属性”面板的“链接”文本框中输入目标端点网页路径。 另一种是在同一张图像上创建多个热点区域，然后分别选中这些热点区域，在“属性”面板“链接”文本框输入路径。 小图链接大图链接的添加 提醒：一张图片只能创建普通连接或是热点连接之一。如果一张图上同时创建了两种连接，那普通链接无效，只有热点链接生效。,连接的目标窗口,目标的设置： _blank 新开一个窗口打开文件 _parent在父级窗口打开（框架网页比较常用） _self 在本窗口中打开 _top 在浏览器的整个窗口中打开，忽略任何框架）, Email链接: (P158） 书写方式：选中文本后在“链接”框内填写邮件地址，但是在邮件地址前要加上：“mailto:”,锚链接：链接是从一个页面链接到另一个页面，而锚点的含义是链接到当前页面的某个部分，即单击源端点对象后可跳转到页面的指定位置（即命令锚记处）。 锚链接的创建分为 创建命名锚记 和 创建连接 两部分。 （/cn/activation/faq.html） （以文件夹maoji2为例）,网页链接的分类：,“插入/锚记命名” 或者 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/Fir