《初中教师DreamWeaver网页制作Div+CSS技术培训》由会员分享，可在线阅读，更多相关《初中教师DreamWeaver网页制作Div+CSS技术培训（24页珍藏版）》请在金锄头文库上搜索。
1、DreamWeaver网页制作Div+CSS技术培训,网页制作的一些基本知识,Html基础知识Htm html xhtml dhtml asp php jsp相关软件开发工具：Frontpage dreamweaver辅助工具：photoshop firework测试软件： iis apche 小工具,初学者的学习思路,看改仿 创,设计 布局 色调 代码,网页设计的一般原则,规划明确条理清晰实时备注色调统一,Dreamweaver cs3,工作界面文件管理定义与管理本地站点网页文本的编排与设置用表格设计页面布局添加图像与媒体内容,CSS基础知识,什么是div+css文档类型 语言编码 html
2、标签 css样式 Css语法 css盒模型组成,1、什么是div+css,DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。用div盒模型结构给各部分内容划分到不同的区块，然后用css来定义盒模型的位置、大小、边框、内外边距、排列方式等。CSS是英语CascadingStyleSheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。在我们用table布局时，都曾接触和应用到css。
3、,Div元素是用来为html文档内大块（block-level）的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 简单地说，div 用于搭建网站结构（框架）、css 用于创建网站表现（样式/美化），实质即使用xhtml对网站进行标准化重构，使用css将表现与内容分离，便于网站维护，简化html页面代码，可以获得一个较优秀的网站结构便于日后维护、协同工作和搜索引擎蜘蛛抓取。,当然不是所有的网页都需要用div布局，例如数据页面、报表之类的页面的时候还是会用table，
4、web 标准里并没有说要摒弃table。所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Table的替代品，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。,2、文档类型,当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想
5、不到的问题。,3、语言编码,接下来我们还会发现这样一句话：它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。,4、html标签,html标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。成对的标签： .单一的标签：.还需说明一点的是按xhtml规范，标签必须用小写。,,5、css样式,加载css样式有以下
6、四种外部样式 内部样式 行内样式 导入样式 这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。h2 color:#f00;这种形式是内部样式表，它是以和结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。内部样式这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。,6、CSS语法,如图所示，CSS语法由如下三部分构成，选择器：可以是ID、CLASS或标签；属性和值是用来定义这个物件的某一个特性。 如一张桌子的
7、长120cm，宽60cm，套用css的格式为: 桌子长:120cm;宽:60cm; 这样是不是容易理解。,6.1 ID和CLASS选择器,id只能在页面中对应一个元素，就像我们的身份证号一样，每个人的都不一样；class为类，可以对应多个元素，比如说一年级三班的学生，它所对应的可能是10个20个学生。id的优先级高于class，比如说今天三班的学生上体育课，小明留下来打扫卫生。那么三班的学生上体育课这是一个类，而小明打扫卫生这是个id，虽然小明也是三班的学生，但id高于class，所以小明执行打扫卫生的任务。,6.2 css优先级,id优先级高于class 后面的样式覆盖前面的 指定的高于继承
8、 行内样式高于内部或外部样式,总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的,7、css盒模型组成,8、Css练习,页面布局Html列表导航菜单主体内容综合练习,8.1常见页面布局,8.2 Html列表,ul无序和ol有序列表 改变项目符号样式或用图片定义项目符号 横向图文列表 浮动后父容器高度自适应 IE6的双倍边距bug,8.3 导航菜单,横向列表菜单纵向列表菜单 用图片美化的横向导航 css Sprites,8.4 主体内容,字体设置首行缩进(em)首字下沉段落调整图文混排,8.5 综合练习,小型网站的首页制作,HTML 教程 W3C CSS 验证服务http:/jigsaw.w3.org/css-validator/,
