《前端网页设计 教学课件 ppt 作者 杜黎强第10次课》由会员分享，可在线阅读，更多相关《前端网页设计 教学课件 ppt 作者 杜黎强第10次课（16页珍藏版）》请在金锄头文库上搜索。
1、第9次课教学内容回顾,教学导入,教学实施,技能演示 任务实施 完成本次课堂记录文件：项目1-任务2(2)任务实施记录总结页,第10次课教学内容及实施环节,项目实施：任务2 “班级”网站规划-子任务2 设计班级网站首页内容,第9次课教学回顾,各组班级网站首页布局设计展示,分发本次课所用文件,项目1-任务2(2)任务实施记录总结页 项目1-任务2制作首页-考核评价表.doc 项目1-任务3-子任务1任务实施准备页(制作_次页).doc,技能演示： 一、实例网站首页布局分析,所有的设计首先是构思与规划，以实例班级网站首页为 例，首页界面截图如下:,回答问题: 根据界面截图来分析页 面的布局，大致分为
2、几 个区域? 1.页眉：包括了Logo、Menu和Banner图片； 2.内容：可分为侧边栏、主体内容； 3.页脚：包括一些版权信息等。,技能演示： 一、实例网站首页布局分析,经过分析，可以清楚地看到实例网站首页布局如下：,Container区块层,实例网站首页分区布局结构图如下：,根据首页布局结构图，可以完成页面布局CSS样式分析，注意样式层的嵌套关系,CSS样式层,各区块是怎样嵌套的？,body /*文档主体*/ #container /*页面层容器*/ #Header /*页面头部*/ #PageBody /*页面主体*/ #Sidebar /*侧边栏*/ #MainBody /*主体内
3、容*/ #Footer /*页面底部*/,根据首页页面布局及CSS样式层的嵌套关系，可以写出页面布局的样式层结构：,页面布局分析完成后，可以编辑HTML文档代码和CSS文件,1.创建“CSS+DIV布局”的空白XHTML网页文档： 无标题文档 此文档为XHTML的页面布局结构，将其命名为index.htm，再创 建一个样式表文档命名为css.css，来设置布局区域的各种样式格式,技能演示： 二、创建首页整体网页布局结构HTML文件与CSS样式文件,根据下图使用DW完成实例班级网站首页整体结构设计,使用“设计视图”菜单命令完成 使用“代码视图”编辑代码完成,技能演示： 二、创建首页整体网页布局结
4、构HTML文件与CSS样式文件,页面整体结构 1 代码视图：标记中添加DIV的基本结构代码如下：,设计视图：使用“插入”菜单“Div标签”命令设计界面如下：,设计视图浏览界面,技能演示： 二、创建首页整体网页布局结构HTML文件与CSS样式文件,首页整体网页布局结构HTML文件代码视图与设计视图,2.创建css.css文件，编辑CSS代码 实例班级网站首页布局结构文件CSS样式文件： 文件保存，用浏览器打开，可以看到此XHTML文档基本结构，即首页页面的框架。,技能演示： 二、创建首页整体网页布局结构HTML文件与CSS样式文件,任务实施：设计网站首页内容,第3步骤：根据实例网站首页布局及内容分析 完成本组班级网站首页内容设计,课后作业,完成本次课项目1-任务2(2)任务实施记录总结页、任务2制作首 页-考核评价表.doc、项目1-任务3-子任务1任务实施准备页(制作 _次页).doc 上传: FTP:/192.168.60.1/up/ 第5周作业 注意：作业文件夹一定要按命名规则命名,
