DW+CSS讲义.ppt

1、2023-4-29DW+HTML+CSSVersion1.02010年年4月月2023-4-292Overviewo 课程介绍o 课程内容o 几点建议o 参考资料 2023-4-293课程介绍课程介绍o 课程目标o 预备知识o 目标听众o 日程表o 词汇表2023-4-294课程目标课程目标o 熟练掌握HTML标签o 熟练掌握CSS样式表o 熟练掌握Dreamweaver编辑工具o 熟悉网页切图及布局方式2023-4-295o 了解HTML标签了o 了解CSS样式表o 使用过Dreamweaver工具预备知识预备知识2023-4-296o 网页设计制作人员o 网站编辑o 其他人员目标听众目标听

2、众2023-4-297o 共计：3课时o 详细安排课程介绍课程介绍 课程内容课程内容建议建议问题问题&反馈反馈Total:hours日程表日程表2023-4-298o CSS-层叠样式表o DW-dreamweaver-网页布局工具软件o PS-photoshop-图像处理工具软件o FW-fireworks-图像处理工具软件词汇表词汇表2023-4-299o HTML-常用标签课程内容课程内容:定义文档类型：定义HTML文档:定义页面主体内容-:定义标题：换行:水平线：注释：链接：定义资源引用：定义表单：定义输入域：文本框：按钮：选择项2023-4-2910o HTML-常用标签课程内容课程

3、内容：无序列表：有序列表：列表项：图像：表格：行：列或单元格：定义样式：区块：头：标题：元信息2023-4-2911o CSS样式表课程内容课程内容1-什么是样式表是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。2023-4-2912课程内容课程内容2-在页面中插入样式表的三种方式链入外部样式表文件链入外部样式表文件你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：title of articleo CSS样式表2023-4-2913课程内容课程内容2-在页面中插入样式表的三种方式定义内部样式块对象定义内部样式块对象(Embedding

4、 a Style Block)你可以在你的HTML文档的和标记之间插入一个.块对象。示例如下：o CSS样式表2023-4-2914课程内容课程内容2-在页面中插入样式表的三种方式内联定义内联定义(Inline Styles)内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：这一行被增加了左右边距o CSS样式表2023-4-2915o CSS样式-语法课程内容课程内容选择符属性：值；选择符可以是 标签、自定义的名称、或是组合例如：TR属性：值；TRback-color：#000000.text属性：值；#text属性：值；#text a属性：值；2023-4

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

6、ed属性：值；鼠标点击过后的状态 a:hover属性：值；鼠标放上去的状态a:active属性：值；鼠标点下去但还没松开那一刻状态课程内容课程内容o CSS样式-3种样式第二种：a.name:link属性：值；a.name:visited属性：值；a.name:hover属性：值；a.name:active属性：值；课程内容课程内容o 页面布局-50种方式-固定宽度课程内容课程内容o 页面布局-50种方式-固定宽度课程内容课程内容o 页面布局-50种方式-自适应课程内容课程内容o 页面布局-50种方式-自适应课程内容课程内容o 页面布局-2种布局方式第一种：表格+CSS第二种：DIV+CSS两者都可以通过DW实现，DW是一种可视化的HTML编辑软件，对于不熟悉程序代码的人员来说，非常方便，也很实用。课程内容课程内容o Dreamweaver-5步整合站点1、新建一个站点2、创建页面文件和样式表文件3、切图4、页面布局5、建立模板页，制作静态页面2023-4-2926Question?THANK YOU