网页设计- 任务六 布局技术之二—Div+CSS.ppt

1、项目三 布局技术,网页设计,Dreamweaver CS3 项目教程,项目三 布局技术,任务六 布局技术之二Div+CSS,技能目标 能够利用DreamweaverCS3预设的CSS布局创建页面。 能够理解Div+CSS所体现的表现和内容相分离特性。 知识目标 理解CSS盒子模式。 熟练掌握Div的创建与设置方法。 掌握CSS规则设置方法。,项目三 布局技术,3.1.1 使用Div+CSS搭建页面 3.1.2 问题探究Div+CSS布局认识表格 3.1.3 知识拓展使用预设CSS布局创建页面,任务六 布局技术之二Div+CSS,项目三 布局技术,任务六 Div+CSS 构建任务,工作流程 在站

2、点中新建一个页面并保存。 插入一个Div并设置相关CSS规则，使之成为外部容器。 根据事先拟好的布局草图，定制四个Div标签并分别设置相关CSS规则。 在各Div窗口中插入相应页面元素。 检查整个布局效果并加以调整，保存并预览布局效果。,项目三 布局技术,任务六 Div+CSS 构建任务,网页预览效果,项目三 布局技术,任务六 Div+CSS 问题探究,Div标签一般用来定义网页上的一个特定区域，将文字、图片和表格等各种网页元素放在此区域里，再用CSS对该标签定义的区域进行定位和样式的设置。CSS样式表不但是定义页面样式的良好工具，同时它所具有的精确定位对象的控制能力又使其成为不可多得的网页布

3、局工具，为了提高设计效率，可以事先定义好布局所需的CSS样式规则，然后在“插入Div标签”中应用。使用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器 。,项目三 布局技术,任务六 Div+CSS 问题探究,CSS的盒子模式 要利用CSS进行网页布局，需要借助HTML的一个标签元素Div，也就是目前比较流行的Div+CSS来布局网页结构。需要接触到的知识点就是CSS的盒子模式，这也是Div排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，而改用CSS排版后，通过CSS定义的大小不一的盒子和盒子嵌套来编排网页。,项目三 布局技术,任务六 Div+CSS 问题

4、探究,CSS的盒子模式 利用CSS进行网页布局，需要借助HTML的一个标签元素Div，通过CSS定义的大小不一的Div和Div嵌套来编排页面结构，也就是目前比较流行的Div+CSS来布局网页结构。,项目三 布局技术,任务六 Div+CSS 问题探究,CSS的盒子模式 之所以称CSS为盒子模式，主要是因为CSS盒子模式具备的四种属性：内容(content)、填充(padding)、边框(border)、边界(margin)，与日常生活中所见的盒子类似。内容是盒子里装的东西；填充则是防止盒子里的东西（贵重的）损坏而添加的抗震辅料；边框就是盒子本体；边界则期望盒子摆放时留足一定空隙保持通风，同时便于

5、取出。在设计网页时，利用CSS的强控制能力，灵活控制这四种属性，使网页区块分明、代码易读、强化代码重用，实现页面复杂布局的控制效果 。,项目三 布局技术,任务六 Div+CSS 问题探究,Div+CSS布局设计思路 用Div来定义语义结构； 用CSS来美化网页，如加入背景、线条边框、对齐属性等； 在这个CSS定义的盒子内加上内容，如文字、图片等。,项目三 布局技术,任务六 Div+CSS 问题探究,典型的版面实例 该实例采用分栏结构，即页头、导航栏、内容、版权四部分组成。,Div+CSS排版结果图,项目三 布局技术,任务六 Div+CSS 问题探究,Div+CSS标准的优点 符合W3C标准。微

6、软等公司均为W3C支持者，这样可以保证您的网站不会因为将来网络应用的升级而被淘汰。 结构清晰，容易被搜索引擎搜索到，天生优化了seo搜索引擎(搜索引擎)； 提高易用性，可以一次设计，随处发布。支持浏览器的向后兼容，几乎在所有的浏览器上都可以使用。 表现和内容相分离。这也用CSS布局的特色所在，网页由内容构成，而将网页设计部分剥离出来放在一个独立样式文件中，代码变得更简洁，使页面和样式的更新变得更加方便，提高了网页下载速度。 Table布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起。而Div更能体现样式和结构相分离，结构的重构性强。,项目三 布局技术,任务六 Div+CSS 知识拓展

7、,预设CSS布局创建页面 Dreamweaver CS3提供了30 多个定制的CSS布局来创建CSS布局页面；也可以创建自己的CSS 布局，并将它们添加到配置文件夹中，就能在“新建文档”对话框中显示自定义的布局选项。CSS布局可以在下列浏览器中正确呈现：Firefox（Windows和Macintosh）1.0、1.5 和 2.0；Internet Explorer (Windows) 5.5、6.0、7.0；Opera（Windows 和 Macintosh）8.0、9.0；以及 Safari 2.0。,项目三 布局技术,任务六 Div+CSS 知识拓展,预设CSS布局创建页面 选择“文件/

8、新建”，弹出“新建文档”对话框，如图所示。选择“空白页”类别选择“页面类型”下的“HTML”页面类型从 32种不同布局中选择需要的CSS 布局。,图 新建文档对话框,项目三 布局技术,任务六 Div+CSS 知识拓展,预设CSS布局创建页面 在对话框右边的“预览”窗口显示该布局，并给出所选布局的简短说明。 从“文档类型”弹出菜单中选择文档类型。从“布局CSS位置”弹出菜单中选择布局 CSS 的位置。 单击“创建”按钮，一张已定制好的CSS布局新页面就自动生成了，如图所示。此时可根据规划设计放置不同网页元素即可。,图 新建定制CSS布局文档,项目三 布局技术,任务六 Div+CSS 知识拓展,预设CSS布局创建页面 向选项列表添加自定义 CSS 布局 如果希望自定义 CSS 布局能够与Dreamweaver 提供的其它布局一样出现在预设布局选项列表中，必须保证自定义的HTML布局文件扩展名为.htm，且将此页面添加到Adobe Dreamweaver CS3ConfigurationBuiltInLayouts 文件夹中。 将自定义的布局预览图像（例如.gif或.png文件）也添加到 Adobe Dreamweaver CS3ConfigurationBuiltInLa