dreamweaver cs5 css教程,网页设计与制作——Dreamweaver CS5标准教程第12章 CSS+Div布局.pptx...

第12章 CSS+Div布局;1. 盒子模型2. 布局技术3. “上中下”布局4. “左中右”布局;12.1.1盒子结构网页中元素都占据一定的空间，除了元素内容之外还包括元素周围的空间，一般地把元素和它周围空间所形成的矩形区域称为盒子(box)。从布局的角度看，网页是由很多盒子组成，根据需要将诸多盒子在网页中进行排列和分布，就形成了网页布局。;12.1.1盒子结构模型的结构由4个部分组成，content(内容)、padding(内边距或填充)、border(边框)和margin(外边距)。;12.1.2盒子属性在CSS样式中，将盒子???型的内边距、边框和外边距，按top、bottom、left、right的4个方向，分别进行定义和设置。;12.1.2盒子属性例如，在网页中创建一个层，ID标识为apDiv1，并在其中插入一个图像，代码如下：;12.1.2盒子属性;12.2.1

标签

一个块状容器类标签，即在

和

之间可以容纳各种HTML元素，同时也构成一个独立的矩形区域。无论在页面中使用多少个标签，

标签之间仅存在并列关系和内嵌关系。;12.2.1

标签;12.2.1

标签;12.2.2 position定位属性position(定位)属性包括了4种属性值：static，relative，absolute和fixed.Static静态定位为默认值，网页元素遵循HTML的标准定位规则，即网页各种元素按照“前后相继”的顺序进行排列和分布。Relative相对定位，网页元素也遵循HTML的标准定位规则，但需要为网页元素相对于原始的标准位置设置一定的偏移距离。;Absolute绝对定位方式，网页元素不再遵循HTML的标准定位规则，脱离了“前后相继”的定位关系，以该元素的上级元素为基准设置偏移量进行定位。Fixed固定定位与绝对定位类似，也脱离了“前后相继”的定位规则，但元素的定位是以浏览器窗口为基准进行。;12.2.3 浮动方式Float属性包含3个属性值：Left控制网页元素向左浮动，Right控制网页元素向浮右动，None没有浮动。Clear属性包括3个属性值：left清除向左浮动，right清除向浮右动，none没有清除。Clear属性与Float属性配合使用，清除各种浮动。;12.2.3 浮动方式无浮动;12.2.3 浮动方式;12.2.3 浮动方式左右浮动;12.2.3 浮动方式;12.2.3 浮动方式全部左浮动;12.2.3 浮动方式;12.2.3 浮动方式使用左清除;12.2.3 浮动方式;12.3.1课堂案例-网页设计大赛案例学习目标：学习“上中下”布局的方法。案例知识要点：在【插入】面板【布局】选项卡中，使用【插入Div标签】按钮创建网页布局结构；在【CSS样式】面板中，使用【新建CSS规则】按钮创建

标签的ID样式，并采用缺省的【position】和【float】属性，完成“上中下”的布局。素材所在位置：光盘/案例素材/ch12/课堂案例-网页设计大赛。案例布局要求如图12-9所示，案例效果如图12-10所示。;12.3.2 在Dreamweaver中插入

标签在【插入Div标签】对话框中，各个选项含义如下：【ID】：为

标签设置网页中的唯一标识。【类】：可以在下拉框中为

标签选择一个已经存在的类样式。【新建CSS规则】：为

标签新建一个以ID标识为名称的样式。【插入】：其各种选项决定了

标签之间是并列关系还是嵌入关系，其选项包括：;“在插入点”表示在插入点插入一个

标签，嵌入已经存在的

标签中，如果插入点前有内容，那么换行插入。“在选定内容旁换行”表示在该文字所在行插入一个

标签，嵌入已经存在的

标签中，保留原内容。“在标签之前”表示插入一个

标签，与指定的

标签形成并列关系。“在标签之后”表示插入一个

标签，与指定的

标签形成并列关系。;“在开始标签之前”表示在

dreamweaver cs5 css教程,网页设计与制作——Dreamweaver CS5标准教程第12章 CSS+Div布局.pptx...相关推荐

dw网页设计期末设计一个网页_《网页设计与制作Dreamweaver》期末考试试题
<网页设计与制作Dreamweaver>期末考试试题 1<网页设计与制作>期末考试试题一.单项选择题(每个题只有一个的答案是正确的.每题 3 分,共 60 分)1.目前在 In ...
网页制作 css样式,网页设计与制作-CSS样式.ppt
网页设计与制作-CSS样式第四章CSS样式 4．1 CSS样式的定义和使用 4.1.1什么是CSS CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展 ...
HTML+CSS+JS网页设计与制作期末大作业：网站——宏源山庄
宏源山庄网站主要包括首页.山庄简介.新闻资讯.特色美食.山庄环境.人才招聘.联系我们等七个页面适合学生作业. 目录部分效果图展示 index.html页面 about.html页面 news.htm ...
web前端期末大作业：青岛旅游网页主题网站设计——青岛民俗4页 HTML+CSS 民俗网页设计与制作 web网页设计实例作业 html实训大作业
计算机一级网页制作教程视频教程,0626 网页设计与制作31讲,教学视频,湖南铁道职业技术学院陈承欢...
主教材 Dreamweaver CS3 ISBN:978-7-04-027314-4 主编:陈承欢高等教育出版社主教材网页设计与制作任务驱动式教程 ISBN:978-7-04-037271-7 ...
c语言课程网页设计HTML,清华大学出版社-图书详情-《网页设计与制作案例教程（HTML+CSS+Dreamweaver）》...
本教材是学习网页设计与制作的基础教程,全书精选多类流行网站作为案例进行分析讲解,重点突出了商业案例的职业氛围,使读者在领略网页制作基本知识的基础上,掌握网页实际制作的方法和技巧,包括多种形式的主页.栏 ...
dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)
Dreamweaver网页设计与制作(HTML+CSS+JavaScript) 编辑锁定讨论上传视频本词条缺少信息栏,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! <Dream ...
HTML5期末大作业：210套 Dreamweaver网页设计与制作 HTML+CSS+JavaScript【建议收藏】
HTML5期末大作业:Dreamweaver网页设计与制作210例临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板 ...
网页设计作业,网页制作作业HTML5+CSS大作业——汽车专题网页设计(1页) dreamweaver作业静态HTML网页设计模板
HTML5+CSS大作业--汽车专题网页设计(1页) dreamweaver作业静态HTML网页设计模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. ...

dreamweaver cs5 css教程,网页设计与制作——Dreamweaver CS5标准教程第12章 CSS+Div布局.pptx...

dreamweaver cs5 css教程,网页设计与制作——Dreamweaver CS5标准教程第12章 CSS+Div布局.pptx...相关推荐

最新文章

热门文章