DW+CSS讲义.ppt

1、2020/10/14,2020/10/14,DW+HTML+CSS,Version1.0,2010年4月,2020/10/14,2,Overview,课程介绍 课程内容 几点建议 参考资料,2020/10/14,3,课程介绍,课程目标 预备知识 目标听众 日程表 词汇表,2020/10/14,4,课程目标,熟练掌握HTML标签 熟练掌握CSS样式表 熟练掌握Dreamweaver编辑工具 熟悉网页切图及布局方式,2020/10/14,5,了解HTML标签了 了解CSS样式表 使用过Dreamweaver工具,预备知识,2020/10/14,6,网页设计制作人员 网站编辑 其他人员,目标听众,2

2、020/10/14,7,共计：3课时 详细安排,日程表,2020/10/14,8,CSS-层叠样式表 DW-dreamweaver-网页布局工具软件 PS-photoshop-图像处理工具软件 FW-fireworks-图像处理工具软件,词汇表,2020/10/14,9,HTML-常用标签,课程内容,:定义文档类型 ：定义HTML文档 :定义页面主体内容 -:定义标题 ：换行 :水平线 ：注释,：链接 ：定义资源引用 ：定义表单 ：定义输入域 ：文本框 ：按钮 ：选择项,2020/10/14,10,HTML-常用标签,课程内容,：无序列表 ：有序列表 ：列表项 ：图像 ：表格 ：行 ：列或单元

3、格,：定义样式 ：区块 ：头 ：标题 ：元信息,2020/10/14,11,CSS样式表,课程内容,1-什么是样式表,是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。,2020/10/14,12,课程内容,2-在页面中插入样式表的三种方式,链入外部样式表文件 你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下： title of article,CSS样式表,2020/10/14,13,课程内容,2-在页面中插入样式表的三种方式,定义内部样式块对象 (Embedding a Style Block) 你可以在你的HTML文档的和标记之间插

4、入一个.块对象。示例如下： ,CSS样式表,2020/10/14,14,课程内容,2-在页面中插入样式表的三种方式,内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： 这一行被增加了左右边距,CSS样式表,2020/10/14,15,CSS样式-语法,课程内容,选择符属性：值； 选择符可以是 标签、自定义的名称、或是组合 例如： TR属性：值； TRback-color：#000000 .text属性：值； #text属性：值； #text a属性：值；,2020/10/14,16,CSS样式-3种样式,课程内容,1、

5、重定义标签：HTML本身有一个样式，但是由于当前样式不能满足用户的需求，需要对它重新进行设定样式。 对象：HTML标签符号 例子： Tr 属性：值；,2、自定义标签：自行定义某个对象的样式 .text属性：值； 称为class样式 在页面应用方法： 例：stetwetwet #text属性：值； 称ID样式 在页面应用方法： 例：stetwetwet,课程内容,CSS样式-3种样式,课程内容,CSS样式-3种样式,3、伪类（链接）分为两种。第一种：默认链接第二种：自定义链接 第一种： a:link属性：值； 打开页面，鼠标不作任何所呈现的状态 a:visited属性：值； 鼠标点击过后的状态

6、a:hover属性：值； 鼠标放上去的状态 a:active属性：值；鼠标点下去但还没松开那一刻状态,课程内容,CSS样式-3种样式,第二种： :link属性：值； :visited属性：值； :hover属性：值； :active属性：值；,课程内容,页面布局-50种方式-固定宽度,课程内容,页面布局-50种方式-固定宽度,课程内容,页面布局-50种方式-自适应,课程内容,页面布局-50种方式-自适应,课程内容,页面布局-2种布局方式,第一种：表格+CSS 第二种：DIV+CSS 两者都可以通过DW实现，DW是一种可视化的HTML编辑 软件，对于不熟悉程序代码的人员来说，非常方便，也很 实用。,课程内容,Dreamweav