[电脑基础知识]网页设计与制作 第九章讲稿.pptVIP

《网页设计与制作教程》 作者：孟显勇 北京理工大学出版社 第九章 DIV+CSS布局 DIV+CSS设计模式是网页重构技术的核心，是目前流行的网站前端设计模式，DIV+CSS不仅是一种文件结构，而且融入了样式定义和网页交互行为等设计内容。 主要技术包括DIV、HTML和Javascript，DIV定义页面结构，CSS定义页面样式，Javascript实现页面交互行为。 9.1 DIV+CSS基本思想 DIV+CSS是将网站的结构、表现、行为分离的一种设计思想或模式，也就是常说的“三层结构”，也就是实现网页内容和形式的分离。 DIV称为层，在HTML语言中用标签DIV来定义一个层，通过层的属性来控制层的样式、位置和行为。 将文字、图像、视频等页面对象嵌入层，以层为整体控制层内对象的显示、隐藏和移动，实现页面布局效果。? CSS层叠样式表单用于定义DIV样式，CSS样式表可以对字体、颜色、位置、背景等页面属性实现精确的控制，通过修改CSS样式表就可以修改所有引用样式表的所有页面的样式。 9.1.1 DIV+CSS优点 DIV+CSS设计成为目前流行的网站设计模式，主要具有以下优点： DIV+CSS实现的结构化代码使结构与样式分离，便于网站维护。 可以将整个站点的页面风格受控于一个CSS样式表，可以通过修改CSS样式表修改整个站点内页面，实现统一的样式控制。 DIV+CSS使结构与样式分离明显减少了HTML代码，网页变得更小巧，可以明显提高页面执行效率。 9.1.1 DIV+CSS优点 DIV+CSS结构清晰，将页面代码和CSS样式表分离，容易被有哪些信誉好的足球投注网站引擎检索，优化了SEO。 有哪些信誉好的足球投注网站引擎只需要对页面主要内容进行分析，消除了对复杂样式代码的分析。 DIV+CSS具有强大的外观样式控制能力，可以有效的对字体和排版进行控制，明显优于HTML的字体标签FONT，页面字体样式和布局更加美观。 9.1.1 DIV+CSS优点 布局比表格更加灵活，结构清晰，重构性好。 DIV+CSS定义样式更加灵活，对于不同的版本，只需要提供不同样式定义文件，不需要设计更多的页面版式。 DIV+CSS与Javascript脚本结合可以制作交互性更好的网页，并具有良好的浏览器兼容性。 9.2 导航条设计 使用Dreamweaver可以制作DIV+CSS模式的弹出式导航条。 9.2 导航条设计 首先建立导航栏，点击插入栏的【布局】→【标准模式】，选择绘制图层按钮，建立如图9-1所示的导航栏层布局。并将图像navbg.png设置为每个导航栏目的背景图，在每个导航栏目里添加导航栏目名称，例如，第一导航栏“企业简介”。 9.2 导航条设计 9.2 导航条设计 选中文字“企业简介”，选择插入栏的【布局】，选择插入Div标签按钮，弹出插入Div标签对话框，如图9-2所示，定义Div名字为：layer5。 9.2 导航条设计 9.2 导航条设计 然后创建弹出式菜单，建立导航栏目“产品展示”的子菜单项，使用绘制图层按钮，在导航栏“产品展示”下方绘制层，在层里嵌入一个4行1列的表格，在表格每行里添加子菜单项，如图9-5所示。 9.2 导航条设计 9.2 导航条设计 第一步，将子菜单层设置为隐藏，选择子菜单层，打开属性面板，将【可见性】设置为hidden，子菜单隐藏。 9.2 导航条设计 第二步，在代码视图中选中子菜单项，子菜单出现在设计视图中，然后在设计视图选中子菜单项，打开【窗口】→【行为】，打开行为面板，点击添加行为按钮，选择【显示-隐藏层】，选择子菜单所在的层，设置为显示，并设置触发事件为“onMouseOver”，完成定义。 9.2 导航条设计 第三步，在设计视图中选中子菜单项所在层，然后点击添加行为按钮，选择【显示-隐藏层】，选择子菜单所在的层，设置为隐藏，并设置触发事件为“onMouseOut”，完成定义。这样就完成弹出菜单的制作，当打开页面时显示主菜单，当鼠标移到产品展示时，显示子菜单，当移走鼠标时子菜单消失。 9.2 导航条设计 程序【例9-1】使用Dreamweaver设计实现了一个弹出式菜单，结合DIV+CSS模式设计菜单样式和菜单布局，应用Dreamweaver行为实现菜单的动态效果。 9.3 内容设计 DIV+CSS设计模式成为目前主流的网页设计模式，可以实现页面布局的结构和样式分离。使用DIV来设计页面的布局，CSS来定义每个DIV的样式，可以达到表格布局同样的页面效果，但大大降低了网页文件的代码量，可以提高网页浏览速度，降低带宽成本。 9.3.1 页面DIV结构 设计页面布局首先要构思页面的主要结构，然后将每个主要组成部分设计成为DIV层。一般页面分为：页头、页面主体、边栏和页脚，可以将结构转换成DIV结构图，如图9-6所示。DIV结构中mainpag