- 1、本文档共18页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
第7章 使用Div+CSS布局网页 Web标准概述 认识Div Div+CSS布局简介 使用Spry布局对象 7.1 Web标准概述 7.1.2 Web标准的构成 2.表现 3.行为 7.2 认识Div 7.2.1 Div简介 7.2.2 创建Div 7.2.3 选择Div 7.3 Div+CSS布局简介 7.3.2 绝对定位与相对定位 2.相对定位 7.3.3 浮动定位 7.4 使用Spry布局对象 7.4.2 Spry选项卡式面板 7.4.3 Spry折叠式 7.4.4 Spry可折叠面板 综合实例—用Div+CSS制作手机网站首页 * * 7.1.1 什么是Web标准 Web标准是由W3C(World Wide Web Consortium)和其他标准化组织制定的一套规范,包括HTML、JavaScript及CSS等一系列标准,其目的在于创建一个统一的用于Web表现层的技术标准,以便能通过不同浏览器或终端设备(计算机、手机等)向用户展示信息内容。 1.结构 结构技术用于对网页中用到的信息(文本、图像、动画等)进行分类和整理,目前用于结构化设计的Web标准技术主要是HTML(第1章中已做了简单介绍)。 表现技术用于对已被结构化的信息进行显示上的控制,包括位置、颜色、字体、大小等形式控制。目前用于表现设计的Web标准技术就是CSS。W3C创建CSS的目的是用CSS来控制整个网页的布局,与HTML所实现的结构完全分离。简单来说就是表现与内容完全分离,使站点的维护更加容易。这也正是“Div+CSS”布局的一大特点。 行为是指对整个文档的一个模型定义和交互行为的编写。目前用于行为设计的Web标准技术主要有下面两个。 DOM(Document Object Model):文档对象模型,相当于浏览器与内容结构之间的一个接口。它定义了访问和处理HTML文档的标准方法,把网页和脚本以及其他的编程语言联系了起来。 ECMAScript(JavaScript的扩展脚本语言):由CMA(Computer Manufacturers Association)制定的脚本语言(JavaScript),用于实现网页对象的交互操作。 Div全称Division,意为“区分”,它是用来定义网页内容中逻辑区域的标签。我们可以通过手动插入div标签并对它们应用CSS样式来创建网页布局。 Div是用来为HTML文档中的块内容设置结构和背景属性的元素。它相当于一个容器,由起始标签Div和结束标签/Div之间的所有内容构成。在它里面可以内嵌表格(table)、文本(text)等HTML代码。其中所包含的元素特性由Div标签的属性来控制,或使用样式表格式化这个块来控制。 Div标签与表格、图像等网页对象的插入方法类似,所不同的是,在插入Div标签的同时可以为其设置样式。 要对Div执行某项操作,首先需要将其选中。在Dreamweaver CS4中选择Div的方法有两种。 将鼠标光标移至Div周围的任意边框上,当边框显示为红色实线时单击鼠标左键可将其选中。 将插入点置于Div中,然后单击“标签选择器”中相应的div标签,同样可将其选中 7.3.1 Div+CSS布局的优缺点 “Div+CSS”布局虽然是目前比较流行的网页布局方式,但业界对它的评价却褒贬不一。本节我们就从它所具有的优势和存在的问题两方面入手,来对它做一个公正的评价。 1.绝对定位 绝对定位在CSS中的写法是“position:absolute;”。其表达的意思是参照浏览器的左上角,配合top、right、bottom、left(上、右、下、左)值来定位元素,如下CSS代码: #lay{ position:absolute; left:5px; top:5px; } 相对定位在CSS中的写法是“position:relative;”,其表达的意思是以父级对象(它所在的容器)的坐标原点为坐标原点。无父级则以body的坐标原点为坐标原点,配合上、右、下、左(简称TRBL)进行定位,当父级内有padding等CSS属性时,当前级的坐标原点则参照父级内容区的坐标原点进行定位。 浮动定位在CSS中用“float”属性来表示。当“float”值为“none”时,表示对象不浮动;为“left”时,表示对象向左浮动;为“right”时,表示对象向右浮动。 7.4.1 Spry菜单栏 Spry菜单栏是一系列导航菜单按钮,当光标指向某个按钮时可以弹出项目的子菜单。使用Spry菜单栏可以在有限的空间内显示大量的导航信息。 Spry选项卡式面板是一系列可以在收缩的空间内存储内容的面板。浏览者可以单击相应面板标签在各个面板之间切换。定位插入点后,单击“插入”面板中的“Spry选项
您可能关注的文档
- 会计电算化软件的技术规范与系统设计原则.pdf
- 会计电算化题2.pdf
- 会计的定义和作用.pdf
- 会计的素质教育.pdf
- 会计盈余管理探析.pdf
- 会计科目r 分类详解.doc
- 会计科目一.doc
- 会计科目与账户上课用.ppt
- 会计科目中英对照表.doc
- 会计科目基本和会计准则要求的科目一致的.doc
- 第12课 大一统王朝的巩固 课件(20张ppt).pptx
- 第17课 君主立宪制的英国 课件.pptx
- 第6课 戊戌变法 课件(22张ppt).pptx
- 第三章 物态变化 第2节_熔化和凝固_课件 (共46张ppt) 人教版(2024) 八年级上册.pptx
- 第三章 物态变化 第5节_跨学科实践:探索厨房中的物态变化问题_课件 (共28张ppt) 人教版(2024) 八年级上册.pptx
- 2025年山东省中考英语一轮复习外研版九年级上册.教材核心考点精讲精练(61页,含答案).docx
- 2025年山东省中考英语一轮复习(鲁教版)教材核心讲练六年级上册(24页,含答案).docx
- 第12课近代战争与西方文化的扩张 课件(共48张ppt)1.pptx
- 第11课 西汉建立和“文景之治” 课件(共17张ppt)1.pptx
- 唱歌 跳绳课件(共15张ppt内嵌音频)人音版(简谱)(2024)音乐一年级上册第三单元 快乐的一天1.pptx
文档评论(0)