网页设计与制作-第6讲.pptVIP

制作跳转菜单 制作跳转菜单 拖动层创建运动路线 3 CSS样式表 CSS(Cascading Style Sheet)层叠样式表将对网页的布局、字体、颜色、背景和其他图文效果实现更加精确的控制。利用Dreamweaver中的CSS样式表还可以设置图像的特殊视觉效果。 CSS的基本概念 CSS(Cascading Style Sheet)层叠样式表将对网页的布局、字体、颜色、背景和其他图文效果实现更加精确的控制，使显示描述彻底独立于文档结构。 CSS的特点： 将格式和结构分离 控制页面布局 制作体积更小、下载更快的网页 可将多张网页同时更新 浏览器将成为更友好的界面 CSS的基本写法 CSS的基本写法有3种： 1、在HEAD内的实现 （STYLE /STYLE ） 2、在BODY内的实现 （在标记中引用 STYLE= ） 3、在文件外的调用 （调用外部的CSS文件STYLE.CSS） CSS的属性和值 字体属性（Font-family Font-size Font-style…） 文本属性 (Letter-spacing Text-decoration Text-align) 颜色和背景属性 (Color Background-repeat…) 边框属性(Border Border –top none dotted dash…) 鼠标光标属性(hand crosshair wait default…) 定位属性(position:absolute relative visibility … ) 区块属性(Width Height Float Clear…) 列表属性(List-Style-Type Bullet) 滤镜属性(Filter: Alpha Blur Fliph Flipv Gray Invert Xray Wave) 实例 : 背景图永远居中 样式表的应用-设置背景居中 1 新建CSS样式 选择重定义的BODY标签和”仅对该文档” 2 选择“背景”，设置背景图像、背景图片是否重复等属性 3 实例 背景图永远居中 样式表的应用-设置特殊的视觉效果 1 2 新建CSS样式 输入重定义的“img”标签并选择定义在：“仅对该文档” 选择“扩展”，设置特殊的视觉效果。在“滤镜”中选择“Xray”,设置页面中图片的特殊效果 3 原始图片效果 在样式表中设置的特殊视觉效果 CSS示例 html head titleCSS中的Xray滤镜/title style type=text/css !-- img{ filter:xray;} -- /style /head body h2强大的CSS滤镜/h2 img src=动物之爱4.jpg /body /html 在“记事本”中编写代码 在第3步中选择“alpha(opacity=50)”的视觉效果 html head titleCSS中的透明层次滤镜/title style type=text/css !-- img{ filter:alpha(opacity=50);} -- /style /head body h2强大的CSS滤镜/h2 img src=“花.jpg /body /html CSS示例 在“记事本”中编写代码 行为的应用--插入鼠标经过图象 1 2 * * 第5章 Dreamweaver 8 基础知识 层的应用 时间轴的应用 CSS样式表 行为的应用 动态网页的制作 页面制作工具--Dreamweaver Dreamweaver简介 Dreamweaver是美国Macromedia公司开发的制作网页和管理网站的所见即所得的网页编辑工具。利用Dreamweaver可以轻松的制作出充满动感的网页。 Dreamweaver的启动与关闭 开始按钮 程 序 Dreamweaver Macromedia Dreamweaver 8 的工作界面 Dreamweaver 的插入工具栏 Dreamweaver 的文档工具栏 预览 Dreamweaver 8 的“面板”组 Dreamweaver 的“属性”面板 “属性”面板是页面编辑中非常重要的一个面板，主要用于设置页面元素的属性，如文字的大小、颜色，图片的高宽，表格对齐等。选择不同的页面元素时， “属性”面板中的参数将显示与该元素相关的参数。 属性面板是根据页面上所编辑对象的不同而发生变化的。 “图像属性”面板 “文字属性”面板 “图层属性”面板 “表格属性”面板 “资源”面板 创建新文档 设置页面属性 Dreamweaver 中的对象插入 可以跳