电子文档交易市场
安卓APP | ios版本
电子文档交易市场
安卓APP | ios版本

网页设计与制作 教学课件 ppt 作者 朱金华 第3章 页面布局

55页
  • 卖家[上传人]:E****
  • 文档编号:89472926
  • 上传时间:2019-05-25
  • 文档格式:PPTX
  • 文档大小:929.77KB
  • / 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

      5、avigation这两个区块是水平方向排列,所以需要使用浮动(Float)方法才能将其实现。两个区块的宽度和高度也是需要确定的,其CSS代码如下。 #content float:left;width:590px;height:400px; #nav float:right;width:200px;height:400px;,3.3 DIV+CSS布局设计方法,content和nav元素设置的浮动属性会使后面的footer区块也排到了同一行,因此需要设置clear属性来清除前面设置的浮动所带来的影响,CSS代码如下: #footerclear:both;,3.4 中间自适应宽度三栏页面布局,制作步骤如下: 1. 使用Dreamweaver制作的准备工作 (1)新建站点(修改首选项参数)。 (2)新建网页文件和外部CSS文件(首页文件名为index.html ;外部CSS文件style.css )。 (3)定义初始化的CSS:* margin:0px;padding:0px;,3.4 中间自适应宽度三栏页面布局,2. 新建布局区块,3.4 中间自适应宽度三栏页面布局,此时设计视图显示为:,

      6、3.4 中间自适应宽度三栏页面布局,3. 设置各区块的基本样式 根据DIV标签的区块属性,这6个区块是从上到下依次排列的,只是宽度、高度不同而已。为了将left、content和right三个区块水平方向并排,需要设置float属性。,3.4 中间自适应宽度三栏页面布局,此时,浏览器里预览的效果是,left、content、right和footer都水平并排了,而且footer的位置在content和right的中间。为了让footer回归下面的位置,需要使用clear清除刚才设置的float。,3.4中间自适应宽度三栏页面布局,现在,在浏览器中看到的效果基本上是我们设想的布局了。但我们在content中增加很多内容时,发现content的宽度又撑满了浏览器窗口,导致各区块又没有实现水平并排,left、content、right三个区块又回到了原来的上中下的实际显示效果。,3.4 中间自适应宽度三栏页面布局,解决方法之一是我们可以考虑设置content的左边距和右边距(略大于left和right的宽度),给left和right两个区块留下了位置。 但浏览器中看到的效果,左右是留下了空间

      7、,但left、content和right仍然是上、中、下的位置。我们可以去掉content的float试试。,3.4 中间自适应宽度三栏页面布局,此时,left和content已经并排了,但right还在下面,这是因为content已经没有了float,我们应该在网页文件index.html中把right区块和content区块的位置交换,使content区块在页面流中自动填补left区块和right区块由于左右浮动后留下的中间区域。,3.4 中间自适应宽度三栏页面布局,现在终于正常了,为了较容易区分各区块的范围,我们可以为各区块加上背景颜色或边框线。 注意,不能在各区块的四周都加边框线,否则在两区块相邻位置会出现双线,看起来像粗线。,3.4 中间自适应宽度三栏页面布局,所以,我们可以: 在#header和#nav中增加“border-bottom:1px solid #ccc;”; 在#footer中增加“border-top:1px solid #ccc;”; 在#left中增加“border-right:1px solid #ccc;”; 在#right中增加“border-le

      8、ft:1px solid #ccc;”。,3.5 固定宽度布局,本节重点介绍如何使用CSS+DIV创建固定宽度布局,对于包含很多大图片和其他元素的内容,由于它们在流式布局中不能很好地表现,因此固定宽度布局是处理这种内容的最好方法 。 1. 一列固定宽度 一列布局是所有布局的基础,也是最简单的布局形式。一列固定宽度是常见的网页布局方式,多用于封面型的主页设计中,标题正文型也属于这种。,3.5 固定宽度布局,2. 两列固定宽度 两列固定宽度非常简单,可参考前面“DIV+CSS布局设计方法”小节中的例子,这种布局也很常见,比如个人博客多采用这种布局形式。,3.5 固定宽度布局,3. 三列固定宽度居中 三列固定宽度居中,可以采用将所有区块放入一个大的容器container中的方式,只需要设置container左右边距为自动就可以实现居中了。下面介绍以“中间自适应宽度三栏页面布局”小节示例为基础修改成“三列固定宽度居中”的方法。,3.5 固定宽度布局,首先添加container容器,将content区块恢复到left和right区块之间,示例HTML代码如下。 头部区块 水平导航区块 左边固定宽

      9、度栏 中间固定宽度栏 右边固定宽度栏 页脚版权区块 ,3.5 固定宽度布局,然后,在样式表中为content添加float和width属性,添加container的margin属性为左右自动(即容器水平居中显示)。最后为footer添加clear属性以清除footer的float属性,示例CSS代码如下。 #container width:800px;margin:0px auto; border-left:1px solid #ccc;border-right:1px solid #ccc; #content width:390px;float:left;height:400px; #footer clear:both;border-top:1px solid #ccc;border-bottom:1px solid #ccc;,3.6 HTML5的文档结构元素,HTML5引入了多个新的元素用来更加细致地描述页面及文档结构,包括header、nav、section、article、aside和footer,这些元素可以让文档页面更加具有意义、更加易读,也可以让搜索引擎更好地理解页面的内容和各个部分之间的关系。 如图3-2所示非常清晰地表述了各个元素对应的文档内容关系。,3.6 HTML5的文档结构元素,需要注意的是,这些元素的布局和呈现方式并不是由其自身定义,而是由CSS来呈现,就像是呈现元素,但元素没有语义,而这几个元素有语义。,图3-2 HTML5 的结构元素使用,3.6 HTML5的文档结构元素,1. 文章语义(article、header、footer)元素 根据WHATWG(The Web Hypertext Application Technology Working Group)给出的定义,article元素表示在文档、页面、应用程序或网站中自我包含的部分,也就是指在页面中用来表示一套结构完整且独立的内容部分,原则上讲是独立分布和重复使用的。比如论坛的一个帖子、杂志或报纸中的一篇文章、一篇博客、用户提交的一个评论内容,以及页面上可用于互动的一个widget(微件)模块等。,3.6 HTML5的文档结构元素,article元素可以被嵌套使用,内层的内容原则上要与外层内容相关联

      《网页设计与制作 教学课件 ppt 作者 朱金华 第3章 页面布局》由会员E****分享,可在线阅读,更多相关《网页设计与制作 教学课件 ppt 作者 朱金华 第3章 页面布局》请在金锄头文库上搜索。

      点击阅读更多内容
    最新标签
    发车时刻表 长途客运 入党志愿书填写模板精品 庆祝建党101周年多体裁诗歌朗诵素材汇编10篇唯一微庆祝 智能家居系统本科论文 心得感悟 雁楠中学 20230513224122 2022 公安主题党日 部编版四年级第三单元综合性学习课件 机关事务中心2022年全面依法治区工作总结及来年工作安排 入党积极分子自我推荐 世界水日ppt 关于构建更高水平的全民健身公共服务体系的意见 空气单元分析 哈里德课件 2022年乡村振兴驻村工作计划 空气教材分析 五年级下册科学教材分析 退役军人事务局季度工作总结 集装箱房合同 2021年财务报表 2022年继续教育公需课 2022年公需课 2022年日历每月一张 名词性从句在写作中的应用 局域网技术与局域网组建 施工网格 薪资体系 运维实施方案 硫酸安全技术 柔韧训练 既有居住建筑节能改造技术规程 建筑工地疫情防控 大型工程技术风险 磷酸二氢钾 2022年小学三年级语文下册教学总结例文 少儿美术-小花 2022年环保倡议书模板六篇 2022年监理辞职报告精选 2022年畅想未来记叙文精品 企业信息化建设与管理课程实验指导书范本 草房子读后感-第1篇 小数乘整数教学PPT课件人教版五年级数学上册 2022年教师个人工作计划范本-工作计划 国学小名士经典诵读电视大赛观后感诵读经典传承美德 医疗质量管理制度 2 2022年小学体育教师学期工作总结 2022年家长会心得体会集合15篇
    关于金锄头网 - 版权申诉 - 免责声明 - 诚邀英才 - 联系我们
    手机版 | 川公网安备 51140202000112号 | 经营许可证(蜀ICP备13022795号)
    ©2008-2016 by Sichuan Goldhoe Inc. All Rights Reserved.