计算机网络与网页制作 Chapter 11:用CSS作页面布局

Slides:



Advertisements
Similar presentations
简历填写攻略. 简历投放  不要被招聘要求吓倒  不要海投,乱投  看清招聘要求再投,不要投能力相差过多的岗位,根 据招聘要求去填写简历:如需注明薪金要求  主要投放渠道:招聘会,人才网  尽量不要投同一公司的多个岗位  三大人才网站:前程无忧,中华英才网,智联招聘.
Advertisements

醫學美學之我見ー肉毒桿菌 班級:應日三乙 姓名:蔡雅卉 學號: 497E0076. 前言 現在的人,已經把 整型看做是微不足 道的事情了。即使 只是戴牙套、局部 雷射、割雙眼皮、 打美白針、肉毒桿 菌等等,都可以在 身體上做不同的改 變,而讓自己更滿 意自己的外表。
會計學 Chapter 1 基本概念 1-2 基本概念 第一節 單式簿記 第二節 會計學的定義與功用 第三節 會計學術與會計人員 第四節 企業組織 第五節 會計學基本第五節 會計學基本慣例 第六節 會計方程式 第七節 財務報表.
Chapter 5 教育發展與職業選擇. 1. 認識高職學生的生涯進路。 2. 了解個人特質與職業屬性之 間的關係。 3. 認識打工安全與勞動權益。
第四讲 课 题:在 Dreamweaver8 中使用表格布置页面 目的及要求:使用表格布置页面 教学重点:重点掌握设置表格属性的方法 教学难点:嵌套单元格设置布局表格的形式对网页进 行布局 教学课时: 2 课时 教学方法:提问与比较教学方式,激发学生兴趣; 教学内容与步骤:
5.3 页面布局 1. 用表格实现页面布局 用表格实现页面布局 2. 用框架布局页面 用框架布局页面 3. 层的使用 层的使用.
熟悉 Dreamweaver 的工作區與基本操作
11-1 保險業之定義 11-2 保險業之設立 11-3 保險業之組織 11-4 保險業之營業範圍
9-1 火災保險 9-2 海上保險 9-3 陸空保險 9-4 責任保險 9-5 保證保險 9-6 其他財產保險
讲故事训练 授课人:田轶.
第十一課 菜園 6-11.
校园信息管理系统 河北科技大学网络中心 2000/4/10.
校本选修课 第三专题 西藏问题 北京师大二附中 李文燕.
20 使用Dreamweaver构建HTML结构
導覽解說與環境教育 CHAPTER 3 解說員.
徵收苗栗市福全段147、1588及文心段10、11地號等4筆土地之
低碳生活,从小事做起 编辑人:刘瑞兴 指导老师:麦文燕 吴霞 编辑地址;岭南师范学院附属中学 编辑时间:
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
老師 製作 法律與生活.
讲 义 大家好!根据局领导的指示,在局会计科和各业务科室的安排下,我给各位简要介绍支付中心的工作职能和集中支付的业务流程。这样使我们之间沟通更融洽,便于我们为预算单位提供更优质的服务。 下面我主要从三方面介绍集中支付业务,一是网上支付系统,二是集中支付业务流程及规定等,
第十七章休閒農業之經營策略與成功之道 17 Chapter.
Chapter 2 勞工安全衛生法.
正修科技大學教學發展中心 教師教學觀摩與經驗分享 電子工程系 張法憲副教授.
中国人民公安大学经费管理办法(试行) 第一章总则 第四条:“一支笔” “一支笔”--仅指单位主要负责人。负责对本 单位的经费进行审核审批。
CSS – 進階 IDIC.
佛山科学技术学院 第8章 网页设计基础 Internet及多媒体应用.
蘇軾詞的賞析
柯奕宏(06) 王予亨(13) 郭秉逸(15) 楊雯凈(23) 顏佑瑩(32)
第一節 知覺 第二節 認知 第三節 學習 第四節 創造力
第十五章 传播学调查研究方法.
第6章 文本 文本在网络上传输速度较快,用户可以很方便地浏 览和下载文本信息,故其成为网页主要的信息载体。 整齐划一、大小适中的文本能够体现网页的视觉效 果。因而文本处理是设计精美网页的第一步。本章 将结合具体实例介绍在Dreamweaver CS4中如何插 入文本,对文本进行排版及一些文本辅助功能。
网页设计(1) 第12讲 网页技术简介 马秀麟 2014年5月 2018/9/17 制作人:马秀麟.
自然與生活科技領域 認識太陽能 蘇紋琪、石明玉.
 全能的天才畫家- 李奧納多‧達文西 (西元1452年-1519年) 指導老師:袁淑芬老師 製作人:饒佩芯.
CHAPTER 2 綜合所得稅之架構.
Web前端开发技术与实践 第12章 布局 阮晓龙 /
100學年度土木工程系專題研究成果展 題目: 指導老師:3223 專題學生:2132、2313 前言: 成果: 圖1 圖2 方法與流程:
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
第二單元:Dreamweaver的基本操作
CSS 钟晖云 QQ:
十二年國民基本教育中等學校教師教學專業能力研習五堂課
認識我的故鄉_台中市.
基礎程式設計範例 -網頁名片.
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
活用XHTML/HTML+CSS並不難 Chapter 1 LAYOUT 版面配置.
Web Programming 網際網路程式設計
模板与库.
十 三.使用模板和库.
主讲:陶建平 华中科技大学网络与计算中心
个人网站作业3 传媒学院.
老師 製作 休閒農場.
《网页设计与制作》.
武汉纺织大学传媒学院 cm.wtu.edu.cn
精忠报国  演唱:屠洪纲 作词:陈涛 作曲:张宏光  狼烟起 江山北望  龙起卷 马长嘶 剑气如霜  心似黄河水茫茫  二十年 纵横间 谁能相抗  恨欲狂 长刀所向  多少手足忠魂埋骨它乡  何惜百死报家国  忍叹惜 更无语 血泪满眶  马蹄南去 人北望  人北望 草青黄 尘飞扬  我愿守土复开疆  堂堂中国要让四方来贺.
第12章 APDiv 对于有Dreamweaver基础的读者来说,初识APDiv或 许会感到即熟悉又陌生。熟悉于它的Div标识符, 陌生于他在CS3版本中的含义及作用。其实,APDiv 在Dreamweaver CS4中仍等同于前期版本的层,又 称为AP元素或CSS-P元素,本文以下简称AP层。 什么是层?有什么作用?前面我们学习过了表格,
微信商城系统操作说明 色卡会智能门店.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
武汉纺织大学传媒学院 cm.wtu.edu.cn
樂樂請假了 尊重的故事 資料來源:臺北縣國民小學品德教育手冊 故事來源:臺北縣國民小學品德教育手冊 網路小故事
聽聽那冷雨---重點摘要 二愛 王煜榕.
第13章 新闻发布系统的 页面美工.
網路商店裝修之二 CSS樣式編輯.
憲政與民主 應化3A 邱泓明.
第5章 Div+CSS布局技术 经济管理学院.
网页设计三合一教程 主讲教师 2019/6/2.
实例导入| 模板的编辑和创建 | 模板的应用和更新 | 使用库 | 生成站点
大綱 一.受試者之禮券/禮品所得稅規範 二.範例介紹 三.自主管理 四.財務室提醒.
古蹟知性之旅 我和新港奉天宮有個約 報告人:陳 映 竹 傅 湘 甯.
團體工作的倫理議題 CHAPTER 12. 團體工作的倫理議題 CHAPTER 12 團體工作的倫理議題 1.如果我有資格執行個別治療,那麼我也可以執行團體治療。 2.仔細而審慎地篩選團體成員,較符合專業倫理要求。 3.在團體治療開始前,讓成員能先有準備以便從團體中獲得最大利益,是非常重要的。
Presentation transcript:

计算机网络与网页制作 Chapter 11:用CSS作页面布局 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn

目标 理解CSS的箱框模型 创建Div及AP Div 堆叠及重叠页面元素 设定箱框内容的样式 使用可视化助理调整页面元素位置

效果

1. CSS箱框模型 CSS把页面上每个元素看作一个虚拟方框。 每个虚拟矩形框充当一个容器,用于容纳文本、图像、媒体及表格,并在页面上占据一定区域。 每个虚拟矩形框可设定自己的留白、边距及边框。 箱框模型是嵌套的。浏览器窗口是最大的箱框,而body标签对应的箱框是页面中所有其他元素的根容器。

一级标题文本 浏览器窗口 body的边距 body的边框 <body> body的留白 div的边距 div的边框 h1的边距 h1的边框 <h1> h1的留白 一级标题文本

每个HTML标签具有的样式属性 边距指围绕箱框的透明区域,包括上、下、左、右边距。四个边距可以设置不同值。边距的默认值不等于0。 body的边距就决定了页面本身的边界。 留白指箱框的边框与其内容之间的透明区域,包括上、下、左、右留白。亦可设置四个不同值。留白的默认值等于0。 箱框的边框(或边界)位于箱框的边距区与留白区之间,包括上、下、左、右边框,定义了箱框的界线。边框默认是透明的,你可以分别设定每个边框的宽度、颜色以及样式。

Div标签与页面布局 一个Div标签自身是不会产生任何显示效果的,除非你用CSS规则专门为其作了设定。Div标签的边距、留白、边框默认值为0。 页面内的Div标签将在页面内设定区域,之后你把页面内容如文本、图像等直接放在这个区域内。 “绘制AP Div”功能可创建精确定位的箱框。 通常页面内不同的位置有不同的样式,因此非常适合使用Div及对应的ID CSS规则,当然也不排除对Div使用类CSS规则。

2. Div 与 AP Div AP Div在设计视图内可以被随意拖动以及手工调整大小 Div在设计视图内不能拖动,也不能手工调整大小。 通过修改Div的CSS属性position的值(absolute或relative),使得AP Div与Div可以相互转化。

AP Div与Div的主要区别(1) 绝对定位的元素脱离了HTML内容的正常秩序,它不考虑周围的元素(如周围的文本、相邻的Div),它总是准确地出现在为它指定的坐标上。AP Div的“Z轴”属性用于解决堆叠问题。 一个被设为“相对定位”的元素会考虑相邻HTML内容的正常秩序。

AP Div与Div的主要区别(2) 当使用“绘制AP Div”作版面设计时,Dreamweaver自动地创建ID CSS规则,它设定了应用于特定箱框的样式信息,包括位置、宽度、高度等。 当使用“插入Div标签”作版面设计时,Dreamweaver要求你为每个箱框创建或指派一个ID CSS规则。

AP Div Div

mymenu.html示例 面板 插入>>布局>>绘制AP Div,添加一个AP Div 在这个AP Div内插入多个Div

Div默认是相对定位

3. 为页面创建一个居中的总容器 面板 插入>>布局>>插入Div标签

id值为 container的Div,用作总容器。

为总容器添加背景图片 在面板“CSS样式”内双击“#container”规则

4. 改变AP Div默认把页面作为容器的情况 一个AP Div被精确地放在你所绘制的位置,默认情况下页面将作为其参考点,即无论在何处绘制AP Div,AP Div将嵌套于body标签内。 改变AP Div默认把body作为容器的情况:菜单 编辑>>首选参数 设置“首选参数”使得新建的AP Div自动地嵌套于绘制AP Div时起点所在的容器。

5. 绘制标题区 自动创建#header CSS规则,并自动删除原先的ID CSS规则

为标题区添加背景图片 在面板“CSS样式”内双击“#header”规则

往标题区插入图片 光标定位于标题区内,菜单 插入>>图像

设置标题区图片的样式 面板 CSS样式>>新建CSS规则 通过调整图像的边距改变商标图像的位置

6. 添加介绍区 插入一个AP Div,将其命名为“intro”(这将自动增加一个名为“#intro”的ID CSS规则)。之后粘贴文本。 网页已有的标签CSS规则(body)设置字体为仿宋。

修改intro Div的样式 在“CSS样式”面板内双击“#intro”规则。

intro Div效果 条纹区就是“留白”,位于边框内侧。

7. 添加主栏区 AP Div的ID 设为“ main”。从main_content.html页面复制文本。 网页已有的标签CSS规则(body)设置字体为仿宋。

新建类CSS样式—— .content

对主栏区使用.content样式 选中main AP Div,在“属性”面板的“类”下拉列表选择“content”项 条纹区就是“留白”,位于边框内侧。只设置了左、右留白。

设置主栏区的标题样式 在“CSS样式”面板内新建规则 “留白(Padding)”默认值为0,“边距(Margin)”默认值不为0。

效果

设置主栏区的段落样式 在“CSS样式”面板内新建规则

效果 标题的下边距在“#container #main h2”规则中设为0; 段落的上边距在“#container #main p”规则中设为0; 又因为“留白”的默认值为0; 所以标题与段落之间没有空隙。

8. 添加侧栏区 AP Div的ID 设为“ sidebar”。从features.html页面复制文本。 网页已有的标签CSS规则(body)设置字体为仿宋。

对侧栏区使用.content样式 选中sidebar AP Div,在“属性”面板的“类”下拉列表选择“content”项 条纹区就是“留白”,位于边框内侧。样式只设置了左、右留白。

设置侧栏区的标题样式 在“CSS样式”面板内新建规则

设置侧栏区的列表样式 在“CSS样式”面板内新建规则

效果

9. 修改页面元素的边距值 body的上边距设为0。

实时查看页面元素的边距、留白 单击工具栏上的“检查”按钮,之后在设计视图内移动鼠标。 标题的上下边距默认非0; 段落的上下边距默认非0; 列表的上下边距默认非0; 列表的左留白默认非0; body的四个边距默认非0; 超链接的四边距默认为0。

10.为页面元素添加边框 在“CSS样式”面板内双击“#main”规则

11. 当内容超出AP Div大小时的处理 方法一:手工调整Div的高度。 方法二:把“溢出”属性设置为“auto”以增加Div的滚动条。

AP Div的“Z轴”属性值 同一范围内AP Div的前后位置由其“Z轴”属性值决定。具有较大“Z轴”值的Div将位于较小“Z轴”值的Div前面。

12. 用AP Div作页面布局的优缺点 优点 方便、快捷 缺点 不能快速地适应变化

小结 CSS箱框(或方框)模型 AP Div与Div的区别 添加AP Div 设置AP Div样式 (通常使用ID CSS规则)