网页设计与制作教程 第4版 教学课件 ppt 作者 刘瑞新第12章 使用Div布局页面.pptVIP

机械工业出版社同名教材 配套电子教案 Div布局基础 实训 第12章 使用Div布局页面 12.1.1 Div布局页面的优点 采用Div+CSS布局方式的优点如下： ? 缩减了页面代码，提高了页面的浏览速度。 ? 缩短了网站的改版时间，设计者只要简单地修改CSS文件就可以轻松地改版网站。 ? 强大的字体控制和排版能力，使设计者能够更好的控制页面布局。 ? 表现和内容相分离，设计者将设计部分剥离出来放在一个独立样式文件中，减少了网页无效的可能。 ? 方便搜索引擎的搜索，使用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到用户的内容。 ? 用户可以将许多网页的风格格式同时更新。 12.1 Div布局基础 12.1.1 Div布局页面的优点 Div的英文全称为Division，意为“区分”。Div标签是用来定义Web页面的内容中的逻辑区域的标签，用户可以通过手动插入Div标签并对它们应用CSS定位样式来创建页面布局。 使用Div标签的方法与使用其他HTML标签的方法一样。 例如： DivVery excellent webmaster club /Div 如果单独使用Div标签而不加任何CSS样式，那么它在网页中的效果和使用段落标签p…/p是一样的。 Div本身就是容器，用户不但可以嵌入表格，还可以嵌入文本和其它HTML代码。 12.1.2 Div标签 12.1.3 案例一：制作曙光大学心理咨询栏目的曙光博客页面 【案例综述】使用Div+CSS技术制作曙光大学心理咨询栏目的曙光博客页面。 【案例展示】页面包括3个部分：顶部部分，包括了Logo、菜单和一幅Banner广告图片；内容部分，包括侧边栏、主体内容；底部部分，包括一些版权信息，实例效果如图12-4所示。 12.1.2 Div标签 12.2.1 实训一：制作“爱家美食”网站美食美文页面 【实训综述】使用Div+CSS技术制作制作“爱家美食”网站美食美文页面 【实训展示】页面包括3个部分：顶部部分，包括了Logo、菜单和分隔图片；内容部分，包括主体内容和右侧导航区域；底部部分，包括一些版权信息，实例效果如图12-20所示。 12.2 实训 12.2.2 实训二：制作“爱家美食”网站电影美食页面 【实训综述】使用Div+CSS技术制作“爱家美食”网站电影美食页面。 【实训展示】页面左侧为主题图片展示区域；页面右侧为美食与电影的图文介绍区域如图12-22所示。 12.2 实训 1．比较传统表格布局与Div+CSS布局方式的区别。 2．使用Div+CSS技术制作如图12-23所示的页面。其中，页面顶部区域包括广告Banner图片、网站常用链接以及导航按钮；页面主体内容区域包括左侧的4个栏目区域和右侧的网站公告区域及站内搜索区域；页面底部区域包括版权信息。 3．使用Div+CSS技术制作如图12-24所示的页面。 12.3 习题