前端网页设计教学课件作者杜黎强编著第9次课课件幻灯片.pptVIP

第8次课教学内容回顾 教学实施 教学导入 技能演示 任务实施 完成本次课堂记录文件：项目1-任务2(1)任务实施记录总结页 第9次课教学内容及实施环节 项目实施：任务2 “班级”网站规划-子任务1 创建班级网站首页布局结构文件 第8次课教学回顾 各组班级网站站点目录结构展示 Web前端开发(小组分工) 组名 组长 组员（首页） 组员（次页） 梦之意 何雨婷 何雨婷 庄春萍、吴泽婷、张琳琳 李晓莉、梁妙如、邓婕 学渣继承者 林圳娜 林圳娜 戴巧玲、林冰琪、黄琪花、詹丹玲 growl 方浩锐 方浩锐 郑程程、林梓洁、齐睿 郭依纯、黄榕榕 无所谓 温思宇 温思宇 庄佳、蔡玉珍、朱楚铃、刘敏娜 待定 黄康顺 黄康顺 李先懿、许秋明、陈文彬 林文进、苏炳明 Nothing is impossible 蔡晓敏 蔡晓敏 巫明成、庄霖微、王钰萍 郑伶、郑宏锋 D调奢华 杨梨 杨梨 黄晶晶、邱灿鑫、林俊凯 陈琼丽、陈米米 分发本次课所用文件 项目1-任务2(1)任务实施记录总结页 技能演示：一、实例网站首页布局分析 所有的设计首先是构思与规划，以实例班级网站首页为 例，首页界面截图如下: 回答问题: 根据界面截图来分析页 面的布局，大致分为几 个区域? 1.页眉：包括了Logo、Menu和Banner图片； 2.内容：可分为侧边栏、主体内容； 3.页脚：包括一些版权信息等。 　　 技能演示：一、实例网站首页布局分析 Header区块 SideBar区块 MainBody区块 PageBody区块 Footer区块 经过分析，可以清楚地看到实例网站首页布局如下： Container区块层 Header区块层 PageBody区块层 Footer区块层 MainBody区块层 SideBar区块层 实例网站首页分区布局结构图如下： 根据首页布局结构图，可以完成页面布局CSS样式分析，注意样式层的嵌套关系 CSS样式层 各区块是怎样嵌套的？ │body?{}　 /*文档主体*/ └#container?{}　 /*页面层容器*/ ├#Header?{}　 /*页面头部*/ ├#PageBody?{}　 /*页面主体*/ │　├#Sidebar?{}　 /*侧边栏*/ │　└#MainBody?{} /*主体内容*/ └#Footer?{}　 /*页面底部*/ 根据首页页面布局及CSS样式层的嵌套关系，可以写出页面布局的样式层结构： 页面布局分析完成后，可以编辑HTML文档代码和CSS文件 1.创建“CSS+DIV布局”的空白XHTML网页文档： !DOCTYPE?html?PUBLIC?-//W3C//DTD?XHTML?1.0?Transitional//EN?/TR/xhtml1/DTD/xhtml1-transitional.dtd html?xmlns=/1999/xhtml head meta?http-equiv=Content Type?content=text/html;?charset=gb2312?/ title无标题文档/title link?href=css.css?rel=stylesheet?type=text/css?/ /head body /body /html  此文档为XHTML的页面布局结构，将其命名为index.htm，再创 建一个样式表文档命名为css.css，来设置布局区域的各种样式格式 技能演示：二、创建首页整体网页布局结构HTML文件与CSS样式文件 根据下图使用DW完成实例班级网站首页整体结构设计 使用“设计视图”菜单命令完成 使用“代码视图”编辑代码完成 技能演示：二、创建首页整体网页布局结构HTML文件与CSS样式文件 页面整体结构 1 代码视图：body…/body标记中添加DIV的基本结构代码如下： ? 设计视图：使用“插入”菜单“Div标签”命令设计界面如下： 设计视图浏览界面 技能演示：二、创建首页整体网页布局结构HTML文件与CSS样式文件 首页整体网页布局结构HTML文件代码视图与设计视图 任务实施：创建网站首页布局结构 (HTML、CSS文件创建) 第1步骤：根据实例网站首页布局分析 完成本组班级网站首页布局结构创建 (HTML文件) (要求：页面整体宽度：960px；浏览器浏览居中显示) ?2.创建css.css文件，编辑CSS代码 实例班级网站首页布局结构文件CSS样式文件：