1 / 35

关于 CSS 样式

关于 CSS 样式. 层叠式样式（ C ascading S tyle S heets) 是一种比较先进的 网页控制技术 ，主要用来指定 布局、字体、颜色、背景以及其他一些图文元素的格式。 设置 CSS 样式后， 可以通过修改一个文件，改变一批网页的外观和格式， 保证在所有浏览器和平台之间相互兼容。. 创建新的 CSS 样式. “ 窗口” |“CSS 样式”. 应 用 举 例. 去除网页中超级链接的下划线 1.“ 窗口” |“CSS 样式” 2. 单击面板右上角的向下小箭头 , 弹出下拉菜单 , 从中选择“新建 CSS 样式”

cliff
Download Presentation

关于 CSS 样式

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 关于CSS样式 层叠式样式（Cascading Style Sheets)是一种比较先进的网页控制技术，主要用来指定布局、字体、颜色、背景以及其他一些图文元素的格式。设置CSS样式后，可以通过修改一个文件，改变一批网页的外观和格式，保证在所有浏览器和平台之间相互兼容。

  2. 创建新的CSS样式 “窗口”|“CSS样式”

  3. 应 用 举 例 • 去除网页中超级链接的下划线 • 1.“窗口”|“CSS样式” • 2.单击面板右上角的向下小箭头,弹出下拉菜单,从中选择“新建CSS样式” • 3.打开“新建CSS样式”对话框,具体参数 • 设置: • “类型”选择“重定义HTML标签” • “标签”选择“a” • “定义在”选择“仅对该文档”

  4. 应 用 举 例(续) • 4.单击“确定” • 5.弹出“body的CSS样式定义”对话框,具体参数设置如下: • 在“分类”选择“类型” • 选中“修饰”选项区中的“无” • 单击“确定”

  5. CSS滤镜应 用 举 例 • 模糊文字、模糊图像的制作 Blur可以让文字或图像拥有“立体效果” 语法:Blur(add=值1,direction=值2,strength=值3) 参数: • add:用来确定是否被改变成印象派的模糊效果， 是一个布尔判断。false(0)多数适用于图像， true(非零)多数适用于文本。 • direction:用来设置模糊的方向,00~3600，间隔450 • strength:用来表示有多少像素的宽度将受到模糊 影响 例：Blur(add=1,direction=135,strength=8)

  6. 阴影文字制作 • Dropshadow Dropshadow(color=值1,offx=值2,offy=值3,positive=值4） • Color:用来设置投影文字的颜色 • Offx：投影文字与原文字之间在水平方向上的偏移量 • Offy:投影文字与原文字之间在垂直方向上的偏移量 • Positive: true为任何的非透明像素建立可见的投影； false 为透明的像素建立透明的效果 例：Dropshadow(color=66FFFF,offx=3,offy=3,positive=true）

  7. CSS滤镜应 用 举 例(续) • 抖动图像制作 wave滤镜用于对图像和文字产生“抖动效果” 语法:wave(add=值1,freq=值2,lightstrength=值3, phase=值4,strength=值5) 参数: • Add:表示是否要吧对象按照波形样式打乱 • Freq:波形的频率 • Lightstrength: 对于波纹加强光影效果,范围是0~100 • Phase:设置正弦波的偏移量 • Strength:表示振幅的大小 • 例：wave(add=10,freq=3,lightstrength=100, phase=100,strength=30)

  8. CSS滤镜应 用 举 例(续) • 折射光图像制作 语法:glow(color=值,strength=值) 参数: • Color:效果的颜色值 • Strengrth:设置光晕的强度 例： glow(color=pink,strength=200)

  9. CSS滤镜应 用 举 例(续) • 制作半透明图片 Alpha设置透明度 语法:Alpha(apacity=值1,finishopacity=值2,style=值3,startx=值4,starty=值5,finishx=值6,finishy=值7) 参数: Opacity:设置透明度,范围是0~100, 0表示完全透明 Finishopacity:与opacity一起使用的选择性参数,范围是0~100 Style: 透明区域的形状特征。0代表统一形状、1代表线形、2代表放射状、3代表长方形 Startx和starty代表渐进效果的开始x和y坐标 Finishx和finishy代表渐进效果的结束x和y坐标 例：Alpha(opacity=30,finishopacity=20,style=1,startx=0,starty=0, finishx=250,finishy=180)

  10. 在Dreamweaver中插入Flash对象 • 插入Flash按扭 • 插入Flash文本 • 插入Flash动画

  11. 插 入 Flash 按 扭 “插入”|“媒体”|“Flash按钮”, 弹出”插入FLASH按钮对话框”,设置Flash按钮的属性

  12. 插 入 Flash 文 本 “插入”|“媒体” |“Flash文本” 弹出“插入FLASH文本对话框”,设置Flash文本的属性

  13. 插 入 Flash “插入”|“媒体”|“Flash”

  14. 标记语言 - HTML 超文本标记语言（HyperText Markup Language），描述 文件格式的语言，格式由浏览器解释和执行。 用标记书写 <元素>对象</元素> <元素属性=参数>对象</元素> <元素> 标记的一般格式

  15. 标记语言 HTML基本结构 标题标记 段落标记 <HTML> <HEAD> 文件头 </HEAD> <BODY> 文件体 </BODY> </HTML> 超文本链接标记 <TITLE>文件标题</TITLE> 表格类标记 列表类标记 FORM类标记 格式类标记 ……

  16. 声 音 • 为网页加入背景音乐：添加代码到<body></ body>之间 • <embed src="file:///E|/hy/sound/jingle.mid" autostart=true loop=true width＝100 height=100></embed> • Embed：嵌入文件 • Src:是声音文件的路径 • Autostart:值为true时表示自动播放，为false时表示 人工播放 • Loop：值为true时表示循环播放 • Width和height：媒体播放器的大小 • Hidden:将媒体播放器的图形隐藏。

  17. 网页相册 “命令”|“创建网页相册” 说明：必须保证 系统中已安装了fireworks

  18. 鼠标经过图象的变换 “插入”|“图像对象”|“鼠标经过图像”

  19. 插入水平线 “插入”|“HTML”|“水平线”

  20. 插入日期 “插入”|“日期”

  21. 模 板 大 型网站往往需要让许多甚至所有网页在某个固定的位置显示相同的内容。 模板是一种具有固定特征和风格的文档基础，是用户批量制作文档的工具 制作页面的共同部分，是模板最重要的功能

  22. 模板文件的扩展名为(.dwt) 例：“星座故事”模板页面制作实例。

  23. 练 习 • 去除网页中超级链接的下划线 • 模糊文字、模糊图像的制作 • 制作阴影文字 • 抖动图像制作 • 折射光图像制作 • 制作半透明图片 • 插入Flash • 制作网页相册 • 为网页添加背景音乐 • 鼠标经过图象的变换 • 水平线,日期 • 模板的使用

More Related