网页设计与制作 教学课件 ppt 作者 朱金华 第3章 页面布局
55页1、第3章 页面布局,教学目标,1.了解表格布局。 2. 理解DIV与SPAN。 3. 掌握DIV+CSS布局设计方法。 4. 掌握中间自适应宽度三栏页面布局。 5. 掌握固定宽度页面布局。 6. 理解HTML5文档结构元素。,教学内容,3.1 表格布局 3.2 DIV与SPAN 3.3 DIV+CSS布局设计方法 3.4 中间自适应宽度三栏页面布局 3.5 固定宽度布局 3.6 HTML5的文档结构元素,教学重点和难点,重点:页面布局技术、HTML5文档结构元素。 难点:固定宽度页面布局、中间自适应宽度三栏页 面布局。,导入:,新浪、搜狐、网易的页面布局。,博客的页面布局。,3.1 表格布局,传统TABLE布局方式利用了HTML中table表格元素具有的无边框特性。将网页中的各个元素按版式划分放入表格的各个单元格中,从而实现复杂的排版组合。 利用表格搭建页面时,应先规划好页面中各元素的具体位置,通过表格将这些区域划分出来,在单元格中插入元素后,再仔细调整各单元格的大小、位置,使页面各个元素的所在位置与实际需要相符。同时灵活利用表格的背景、框线等属性设置,准确定位页面元素的排版技术,创建布
2、局合理、美观的网页效果。,3.1 表格布局,进行表格属性的设置时,外层表格一般水平居中;宽度根据个人设计可以在950-1000px之间;表格边距与间距设置为0px;一般的外观还是用CSS来实现。 如果需要嵌套表格,嵌套层数越少越好;最外层表格的宽度和高度一般使用像素值,嵌套表格一般使用百分比。 对于非表格式数据呈现的网页整体布局,我们不推荐使用。,3.2 DIV与SPAN,(1)div标记的使用 在写HTML文件时,要定义区域间不同样式时,可以使用标记达到这个效果,除此以外,通过设置的z-index属性还可以设置层次的效果。 (2)标记的使用 标记主要用来定义网页上的区域,通常用于比较大范围的设置,而标记被用来组合文档中的行内元素。 基本语法: 或者 语法说明: 如果不对span应用样式,那么span元素中的文本与其他文本不会有任何视觉上的差异,只有对它应用样式时,它才会产生视觉上的变化。,3.2 DIV与SPAN,(3)与的区别 基本上与标记在网页上的使用,都可以用来产生区域范围,以定义不同的文字段落,且区域间彼此是独立的。不过,两者在使用上还是有一些差异。 区域内是否换行:标记区域
3、内的对象与区域外的上下文会自动换行,而标记区域内的对象与区域外的对象不会自动换行。 标记相互包含:与标记可以同时在网页上使用,一般在使用上建议用标记包含标记;但最好不包含标记,否则会造成标记的区域不完整,而形成断行的现象。,3.3 DIV+CSS布局设计方法,DIV+CSS布局是一种最近最流行的排版理念。 设计步骤: 将页面使用整体划分几个板块。 对各个板块进行CSS定位。 在各个板块中添加相应的内容。,3.3 DIV+CSS布局设计方法,使用DIV+CSS布局主要有以下三大优势: (1)表现和内容分离,便于站点重构页面。将网页结构与表现分离,代码简洁,利于搜索,方便后期维护和修改,重构时主要也是重新定义样式而已。 (2)结构清晰,对搜索引擎更加友好。 (3)便于Web项目开发分工协作。程序员和页面设计者可以充分发挥自己的长处。,3.3 DIV+CSS布局设计方法,简单DIV+CSS布局设计方法: 1. 将页面用DIV分块 在利用CSS布局页面时,首先要有一个整体的规划,包括整个页面分成哪些模块,各个模块之间的父子关系等。例如,如图3-1所示的页面由顶部横幅(Banner)、主体内容(
4、Content)、右侧导航(Navigation)和页脚(Footer)几个部分组成,各个部分分别用自己的id来标识。,3.3 DIV+CSS布局设计方法,图3-1 简单布局框架,3.3 DIV+CSS布局设计方法,HTML代码如下:,3.3 DIV+CSS布局设计方法,2. 设计各块的位置 确定好页面的内容后,即可根据页面布局类型使用CSS进行定位。container是一个容器,主要用来设置水平居中效果和容器宽度,CSS代码如下: #container margin:0 auto;width:800px;,3.4 中间自适应宽度三栏页面布局,我们经常还看到水平方向满屏的网页,一般都是采用自适应宽度制作,完全自适应的制作还是较为简单的,所以我们今天制作一种相对复杂一点的混合布局方法,即左右均为固定宽度、中间栏自适应。,3.3 DIV+CSS布局设计方法,banner区块(banner一般是放在头部区域,这个区块一般命名为header)至少需要设置高度样式,而宽度会自动继承父元素container的宽度,其CSS代码如下。 #header height:60px; 由于content和n
《网页设计与制作 教学课件 ppt 作者 朱金华 第3章 页面布局》由会员E****分享,可在线阅读,更多相关《网页设计与制作 教学课件 ppt 作者 朱金华 第3章 页面布局》请在金锄头文库上搜索。
逍遥游复习 知识点整理
近现代法德关系史 高三展示课3稿
当代大学生人生信仰及追求的调查研究
长相思 纳兰性德-ppt课件
课件:危机意识 一
英语ppt演讲关于阿甘正传
发达国家基础教育改革的动向与趋势 修改版
中国民间美术 课件.ppt
生物质发电技术与系统 课程ppt 第1章 生物质发电技术现状及发展趋势 2学时 -----2016
现代信号处理思考题 含答案
执业药师继续教育 抑郁症的药物治疗 100分
小学生的成长档案模板不用修改 万能型
增订六版 现代汉语 上册 第二章文字 思考与练习答案
国家财政ppt课件
加拿大英语介绍
六年级统计图的选择课件
中学生成长档案ppt
中国现代文学史期末复习整理
lohi和hihilo训练对女子赛艇运动员运动能力影响的比较研究
风雨贾平凹阅读答案
2024-03-21 39页
2024-03-21 41页
2024-03-21 40页
2024-03-21 34页
2024-03-21 33页
2024-03-21 35页
2024-03-21 21页
2024-03-21 45页
2024-03-21 33页
2024-02-20 85页