TP02 网页布局.ppt

1、网页布局,第二讲,1、需求分析 （1）网站想实现什么目标？ （2）谁来访问？ （3）访问者需要什么？ （4）用多少时间，预算是多少，完成的质量？ （5）网站内容是什么？,网站开发流程5-1,1、时刻记住：以客户需求为导向 2、形成需求文档：网站需求规划说明书,客户,2、伪界面设计,网站开发流程5-2,美工做静态Demo，反复确认客户的需求,3、网站制作,网站开发流程5-3,应用HTML+CSS技术，根据美工效果图制作*.html页面,可选用Dreamweaver辅助工具,4、测试网页,网站开发流程5-4,1、测试网页是否满足客户需求 2、根据客户浏览器种类，测试浏览器的兼容性,5、发布网站,网

2、站开发流程5-5,发布需要申请： 1、网站空间 2、域名,Internet,常见的WEB服务器： IIS、Tomcat、Apache,域名方便访问，例如：,常用的三种页面布局技术,三种页面布局技术,框架布局： 1、优点：简洁、多窗口查看 2、缺点：分多文件保存，不利于搜索引擎搜索 3、适用场合：论坛、社区,表格布局： 1、优点：设计简单、浏览器兼容性好 2、缺点：表格嵌套导致结构冗余、整个表格下载完才开始显示数据，影响访问速度 3、适用场合：不符合W3C，逐渐淡出,DIV+CSS布局： 1、优点：符合W3C内容和结构分离的思想、层次结构简单、利用搜索引擎搜索 2、缺点：布局稍微复杂、存在浏览器

3、兼容问题 3、适用场合：主流的布局方式,三种布局技术,框架布局 表格布局 DIV+CSS布局,文件1： top.html,文件2：left.html,文件3： right.html,框架文件的特点,多个页面文件组成,主文件： index.html,创建框架网页的步骤： 创建各子窗口对应的HTML文件 创建整个框架页面文件，引用子窗口文件, ,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,引用各窗口要显示的网页文件,框架的基本结构3-1,纵向分割窗口, 如浏览器不支持框架，才显示body内的内容 ,注意： 1、框架和body不能共存 2、为了

4、兼容性，可以使用标签,窗口边框的宽度,框架的基本结构3-2,将窗口分割成上中下3部分,推荐：将窗口子文件放在单独的文件夹中用于区分,横向分割窗口, ,框架的基本结构3-3,横向分为3个窗口,框架实现多窗口页面,典型的2行2列结构, ,scrolling属性：是否显示滚动条,如何实现？,2行2列的 窗口划分,三种布局技术,框架布局 表格布局 DIV+CSS布局,行,列,单元格,表格的基本结构,特点：通常情况下，同行的高度一致、同列的宽度一致, 第1个单元格的内容 第2个单元格的内容 . 第1个单元格的内容 第2个单元格的内容 . , 定义行,基本语法, 定义列, 1行1列的单元格 1行2列的单元

5、格 1行3列的单元格 2行1列的单元格 2行2列的单元格 2行3列的单元格 ,如何创建表格,代表表格的开始，border=2 表示边框宽度为2,表格的第1行，有3条数据，代表行,表格的第2行，有3条数据，代表行,表格的跨行跨列,下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?,跨3列,跨3行, 学生成绩 语文 98 数学 95 ,如何跨列,1、colspan 属性表示跨多少列 2、该行其他单元格的内容就省略不写了, 张三 语文 98 数学 95 .代码同上.两行内容. ,如何跨行,1、rowspan 属性表示跨多少行,2、 该列单元格的内容就省略不写了, 学生成绩 张三 语文 98 数学

6、 95 .代码同上两行. ,如何跨行、跨列,colspan 跨3列,colspan 跨2行,表格布局的应用场合,表格布局,图文布局，数据规则整齐,表单布局，同样要求数据规则整齐,练习：实现以下图文布局,三种布局技术,框架布局 表格布局 DIV+CSS布局,三种布局技术,框架布局 表格布局 DIV+CSS布局 首页DIV块布局 CSS,1、划分页面结构,制作“新闻中国”首页布局3-1,根据效果图，划分为哪几个大块？,典型的3行3列结构，如何用HTML实现？,2、编写HTML内容结构,制作“新闻中国”首页布局3-2,container（顶级容器）,main（页面主体）,注意命名规范 1、各块的业界

7、习惯的命名 2、注意最外面的大块用ID，其他用class或ID均可,1、推荐加顶级容器，方便统一设置 2、中间两块放入main容器块中,3、编写CSS控制各块的布局（layout.CSS ）,制作“新闻中国”首页布局3-3,1、可用具体数值或百分比设置宽高 2、不需要设置各块坐标 3、注意使用float浮动 4、代码按块体现层次,三种布局技术,框架布局 表格布局 DIV+CSS布局 首页DIV块布局 CSS,样式表能实现内容与样式的分离，方便团队开发 css garden ,程序员写代码,美工做样式,内容与样式和谐统一的完整网页,为什么使用CSS样式表3-1,样式复用、方便网站的后期维护,为什

8、么使用CSS样式表3-2,同一网站共用同一样式，确保网站统一的风格,页面的精确控制，实现精美、复杂页面,为什么使用CSS样式表3-3,CSS的用途,1、外观美化 2、布局、定位, 选择器（即修饰对象） 对象的属性1: 属性值1; 对象的属性2: 属性值2; ,标签声明标签内为CSS,多条样式规则 1.多个属性间用分号分隔 2.用冒号声明对应属性值,li color: red; font-size: 30px; font-family: 隶书; ,选择器,样式规则,CSS基本语法,标签选择器, li color:red; font-size:28px; font-family:隶书; 重庆涉黑富

9、豪黎强夫妇庭审答辩言辞相互矛盾 ,标签选择器：用于修饰同类HTML标签的共性风格,选择器的分类3-1, .bluecolor:blue; 重庆涉黑 发改委: 河南2个乡 ,如果希望部分li标签采用其他样式，怎么办？,类选择器(class),定义样式，注意类名有点号,选择器的分类3-2,应用类样式，其他元素也可以使用, #side_list width:200px; background:#ccc; font:bold 14px 宋体; 重庆涉黑富豪 ,ID选择器,选择器的分类3-3,如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？,“新闻中国”首页布局CSS,bodymargin:0

10、px;padding:0px; divfont:bold 36px 黑体;color:#fff; #header width:100%;height:136px; background:#ccc;color:#000; #containerclear:both;width:100%;margin:0px auto; .sidebar float:left;width:20%;height:400px;background:#666; .mainfloat:right;width:80%;height:400px; .content,.pic_newsheight:100%; .content

11、float:left;width:80%;background:red; .pic_news float:right;width:20%;background:blue; #footerwidth:100%;height:100px; background:#ccc;color:#000;,三种布局技术,框架布局 表格布局 DIV+CSS布局 首页DIV块布局 CSS 盒模型,如何控制CSS样式2-1,盒模型,元素内容 填充（也称内边距） 边框 边界（也称外边距）,网页中的所有元素可以看作一个一个的“盒子”,如何控制CSS样式2-2,样式控制思路,盒内样式修饰 盒子位置布局,盒内样式： 设置网

12、页元素的颜色、字体等外观,盒子位置布局：确定盒子所在的位置、和其他网页元素的关系,盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性,为什么需要盒子属性,盒子模型平面图,盒子模型三维立体图：注意背景色在背景图的下一层,盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 各属性又分为 四个方向,什么是盒子属性,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,margin,border,padding,可统一设置或四边分开设置 margin属性 margin mar

13、gin-top margin-right margin-bottom margin-left,margin外边距,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,margin：1px，2px，3px，4px; margin：1px，2px; margin：0px auto ; margin-left:1px;,分别代表什么含义？,border属性 border-color border-width border-style,border边框,border-top border-right border-bott

14、om border-left,border border-left ,修饰属性,四个方向,缩写形式,border,每个边都有style、color、with属性，四个边可以一次设置，也可以分别设置,border-style: none; border: 1px solid red; border-right: 5px dotted blue;,分别代表什么含义？, .textBorder border-width:1px; border-style:solid; 名字： 密码： ,细边框的样式,使用border属性修饰表单,padding属性 padding padding-top paddi

15、ng-right padding-bottom padding-left,padding内边距,padding-left : 5px; padding: 5px 10px 20px 40px padding: 5px 10px,分别代表什么含义？,四个边可以一次设置，也可以分别设置,padding,元素的实际占位（实际宽、高） 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度,元素的宽高及实际占位,height: 40px,border-width-top: 20px,margin-top: 10px,左图图片

16、的实际的高度是多少？,padding-top: 5px,总结,简述网站开发流程 说明网站各版块实现的思路 页面实际宽高和width、height关系是什么？ 如何实现版块间的空白间距？ 如何实现垂直居中？,“新闻中国”首页布局CSS,bodymargin:0px;padding:0px; divfont:bold 36px 黑体;color:#fff; #header width:100%;height:136px; background:#ccc;color:#000; #containerclear:both;width:100%;margin:0px auto; .sidebar flo

17、at:left;width:20%;height:400px;background:#666; .mainfloat:right;width:80%;height:400px; .content,.pic_newsheight:100%; .content float:left;width:80%;background:red; .pic_news float:right;width:20%;background:blue; #footerwidth:100%;height:100px; background:#ccc;color:#000;,三种布局技术,框架布局 表格布局 DIV+CSS布

18、局 首页DIV块布局 CSS 盒模型 float浮动属性,为什么需要float浮动属性,如何解决中间两块布局无法同行显示的问题？,如何实现为希望的布局？,什么是float浮动属性4-1,脱离常规文档流而表现为向右或向左浮动,默认的常规文档流：页面内容从上到下，从左到右排列。DIV块换行显示,向右浮动，脱离常规文档流,什么是float浮动属性4-2,浮动的三大显著特征,1.DIV块元素失去“块状”换行显示特征，变为行内元素,什么是float浮动属性4-3,浮动的三大显著特征,2.紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示,什么是float浮动属性4-4,浮动的三大显著特征,3.占据行内元素的空间，导致行内元素围绕显示,为什么需要clear区隔属性,第3个DIV块随窗口大小决定是否换行，如希望“强制”换行怎么办？,如何实现第3块换行显示？,什么是clear清除属性,clear作用 如果前一个元素存在左浮动或右浮动，则换行以区隔 只对块级元素有效 clear属性的取值 right left both none,练习头部局部布局,需求说明： 实现新闻首页头部header块的局部布局,完成时间：5分钟,总结,盒子属性有哪些 ？各包含哪些属性？ float属性的应用场合？有哪些取值？ clear属性的应用场合？有哪些取值？,新增的HTM