复旦大学精品课程《计算机网络与网页制作》课件,用APDiv作页面布局课件复习资料
合集下载
第4章APDiv、框架与网页布局-30页PPT资料
③ 利用 AP Div“属性”栏进行设置的方法：选中要调整大小的 AP Div，在其单个 AP Div“属性”栏内的 “左”文本框中输入修改的数值（单位是像素），即可调整 AP Div 的水平位置；在“上”文本框内输入修改的数 值（单位是像素），可调整 AP Div 的垂直位置。
3．AP Div“属性”栏 AP Div“属性”栏有两种：一种是单 AP Div“属性”栏，这是在选中一个 AP Div 时出现的；另一个是多 AP Div“属性”栏，这是在选中多个 AP Div 时出现的。单 AP Div“属性”栏如图 4-1-9 所示，多 AP Div“属 性”栏如图 4-1-10 所示。从图中可以看出，多 AP Div“属性”栏内除了基本的属性设置选项外，还增加了关 于文本属性的设置选项。其中各选项的作用如下：
（6）调整 AP Div 的位置可以采用如下方法：
① 鼠标拖动调整的方法：将鼠标指针移到 AP Div 的边框上，当鼠标指针变为 形状时拖动，即可移动 AP Div。
② 按键调整的方法：每按一次【→】或【←】键，可使 AP Div 向右或向左移动一个像素；每按一次【↓】 或【↑】键，可使 AP Div 向下或向上移动一个像素；如果按住【Shift】键的同时，按光标移动键，也可调整 AP Div 的位置，每次移动五个像素。
所示。单击其中的一个命令，即可获得相应的对齐效果。 例如，选中多个 AP Div，单击“修改”→“排列顺序”→“对齐下缘”命令，即可将各 AP Div 以最后选中
的 AP Div（控制柄是实心）的下边线为基准进行对齐，如图 4-1-8 所示。
图 4-1-7 “排列顺序”的下一级菜单
图 4-1-8 对齐下缘后的多个 AP Div
① 单击 AP Div 的边框线，即可选中该 AP Div。 ② 单击 AP Div 的内部，会在 AP Div 矩形的左上角产生一个双矩形状控制柄图标 ，单击该控制柄图标 ， 即可选中与它相应的 AP Div。 ③ 按住【Shift】键，分别单击要选择的各个 AP Div 的内部或边框线，即可选中多个 AP Div。 如果选中的是多个 AP Div，则只有一个 AP Div 的方形控制柄是黑色实心的，其他选中的 AP Div 的方形控 制柄是空心的，如图 4-1-6 所示。
3．AP Div“属性”栏 AP Div“属性”栏有两种：一种是单 AP Div“属性”栏，这是在选中一个 AP Div 时出现的；另一个是多 AP Div“属性”栏，这是在选中多个 AP Div 时出现的。单 AP Div“属性”栏如图 4-1-9 所示，多 AP Div“属 性”栏如图 4-1-10 所示。从图中可以看出，多 AP Div“属性”栏内除了基本的属性设置选项外，还增加了关 于文本属性的设置选项。其中各选项的作用如下：
（6）调整 AP Div 的位置可以采用如下方法：
① 鼠标拖动调整的方法：将鼠标指针移到 AP Div 的边框上，当鼠标指针变为 形状时拖动，即可移动 AP Div。
② 按键调整的方法：每按一次【→】或【←】键，可使 AP Div 向右或向左移动一个像素；每按一次【↓】 或【↑】键，可使 AP Div 向下或向上移动一个像素；如果按住【Shift】键的同时，按光标移动键，也可调整 AP Div 的位置，每次移动五个像素。
所示。单击其中的一个命令，即可获得相应的对齐效果。 例如，选中多个 AP Div，单击“修改”→“排列顺序”→“对齐下缘”命令，即可将各 AP Div 以最后选中
的 AP Div（控制柄是实心）的下边线为基准进行对齐，如图 4-1-8 所示。
图 4-1-7 “排列顺序”的下一级菜单
图 4-1-8 对齐下缘后的多个 AP Div
① 单击 AP Div 的边框线，即可选中该 AP Div。 ② 单击 AP Div 的内部，会在 AP Div 矩形的左上角产生一个双矩形状控制柄图标 ，单击该控制柄图标 ， 即可选中与它相应的 AP Div。 ③ 按住【Shift】键，分别单击要选择的各个 AP Div 的内部或边框线，即可选中多个 AP Div。 如果选中的是多个 AP Div，则只有一个 AP Div 的方形控制柄是黑色实心的，其他选中的 AP Div 的方形控 制柄是空心的，如图 4-1-6 所示。
Dreamweaver复旦教程18
5
2.为超链接添加“显示-隐藏元素”动作
添加链接
绘制AP Div后选择 菜单 插入>>图像
6
重复绘制AP Div并层叠
phone1～phone6 AP Div 分别插入图像 层叠
7
为数字链接“1”添加动作
8
设置将引发这个动作的事件
只显示phone1 AP Div，其他Div则隐藏
Chapter 18：用行为增加页面的互动
复旦大学计算机学院
计算机网络与网页制作
1
目标
行为的含义 为网页对象添加动作 选择触发动作的事件 使用行为增加页面的交互性 在页面内创建可拖-放的对象
2
效果
3
1. 什么是行为？
行为 = 事件 + 动作
“行为”面板
4
行为的本质
行为是由事件触发的动作； 事件是用户的某个操作，如打开页面、单 击鼠标、移动鼠标等； 动作是用JavaScript语言编写的函数，它具 有某项功能，如显示-隐藏页面元素、弹出 信息等； 行为的本质是建立事件与动作的关联，使 得浏览器捕获到这个事件时自动触发指定 的动作。
四个AP Div的标识依次 为answer1～4，宽度 70px，高度110px
14
添加类CSS规则.answer
面板 CSS样式>>新建CSS规则
15
把.answer规则作用于四个AP Div
在每个AP Div的“属性”面板内的“类”下 拉列表中选择“answer”
16
给每个AP Div添加手机型号文本
17
在第一排绘制四个AP Div
2.为超链接添加“显示-隐藏元素”动作
添加链接
绘制AP Div后选择 菜单 插入>>图像
6
重复绘制AP Div并层叠
phone1～phone6 AP Div 分别插入图像 层叠
7
为数字链接“1”添加动作
8
设置将引发这个动作的事件
只显示phone1 AP Div，其他Div则隐藏
Chapter 18：用行为增加页面的互动
复旦大学计算机学院
计算机网络与网页制作
1
目标
行为的含义 为网页对象添加动作 选择触发动作的事件 使用行为增加页面的交互性 在页面内创建可拖-放的对象
2
效果
3
1. 什么是行为？
行为 = 事件 + 动作
“行为”面板
4
行为的本质
行为是由事件触发的动作； 事件是用户的某个操作，如打开页面、单 击鼠标、移动鼠标等； 动作是用JavaScript语言编写的函数，它具 有某项功能，如显示-隐藏页面元素、弹出 信息等； 行为的本质是建立事件与动作的关联，使 得浏览器捕获到这个事件时自动触发指定 的动作。
四个AP Div的标识依次 为answer1～4，宽度 70px，高度110px
14
添加类CSS规则.answer
面板 CSS样式>>新建CSS规则
15
把.answer规则作用于四个AP Div
在每个AP Div的“属性”面板内的“类”下 拉列表中选择“answer”
16
给每个AP Div添加手机型号文本
17
在第一排绘制四个AP Div
复旦大学精品课程《计算机网络与网页制作》课件,用CSS设定页面格式课件复习资料
No Image
则光标所在的HTML标签内自动添加属性
style="font-family: '方正舒体'; font-size: 24px; color: #00F;新建内部样式
单击设计视图的第二段，面板 属性>>CSS
No Image
No Image
“属性”
4.4
4.5
4.6
No Image
16
任何一个途径都可以创建各种CSS规则 1. 标签CSS规则 2. 类CSS规则 3. ID CSS规则 4.复合内容CSS规则
示例分别从stylePlacesByCSS.html和stylePlacesByProperty.html开始。
4.2 在“CSS样式”面板内新建内部样式
Chapter10：用CSS设定页面样式
肖川 cxiao@
1 1
目标
层叠式样式表概述 使用CSS样式面板 使用属性面板 创建类样式与标签样式
2
效果
No Image
No Image
3
1. 层叠式样式表(CSS)
CSS样式表可以位于 （1）CSS内联于HTML标签，存在于标签内 (内联样式) HTML标签的“style”属性 （2）直接位于一个HTML文档的<head>区内 (内部样式) <style>标签内 （3）位于一个外部文件内，该外部文件可以被任意数量 的HTML页面所引用 (外部样式) .css 为后缀的的外部文件，引用页面内使用 <link> 标 签指向该外部文件
23
No Image
在网页的<style>标签内添加一条名为.redtext 的CSS规则，并且自动应用至页面的第二段。
则光标所在的HTML标签内自动添加属性
style="font-family: '方正舒体'; font-size: 24px; color: #00F;新建内部样式
单击设计视图的第二段，面板 属性>>CSS
No Image
No Image
“属性”
4.4
4.5
4.6
No Image
16
任何一个途径都可以创建各种CSS规则 1. 标签CSS规则 2. 类CSS规则 3. ID CSS规则 4.复合内容CSS规则
示例分别从stylePlacesByCSS.html和stylePlacesByProperty.html开始。
4.2 在“CSS样式”面板内新建内部样式
Chapter10：用CSS设定页面样式
肖川 cxiao@
1 1
目标
层叠式样式表概述 使用CSS样式面板 使用属性面板 创建类样式与标签样式
2
效果
No Image
No Image
3
1. 层叠式样式表(CSS)
CSS样式表可以位于 （1）CSS内联于HTML标签，存在于标签内 (内联样式) HTML标签的“style”属性 （2）直接位于一个HTML文档的<head>区内 (内部样式) <style>标签内 （3）位于一个外部文件内，该外部文件可以被任意数量 的HTML页面所引用 (外部样式) .css 为后缀的的外部文件，引用页面内使用 <link> 标 签指向该外部文件
23
No Image
在网页的<style>标签内添加一条名为.redtext 的CSS规则，并且自动应用至页面的第二段。
复旦大学精品课程《计算机网络与网页制作》因特网的安全课件精品复习资料
13
小结
病毒与木马 广告链接 因特网安全法规 案例
14
Chapter 06：Internet安全
复旦大学计算机学院
计算机网络与Байду номын сангаас页制作
肖川 cxiao@
1
目标
病毒与木马 广告链接 因特网安全法规 案例
2
6.1 病毒与木马
计算机病毒
编制者在计算机程序中插入的破坏计算机功能或者破 坏数据，影响计算机使用并且能够自我复制的一组计 算机指令或者程序代码。 破坏性
“木马”程序是目前比较流行的病毒文件，与一般的 病毒不同，它具备一般病毒的繁殖性，也并不“刻意” 地去感染其他文件。它通过将自身伪装吸引用户把木 马文件下载到用户自己主机内并诱使用户执行木马程 序，为施种木马者提供被种者电脑的所有或者部分系 统资源。 隐藏性、破坏性
3
木马
程序“后门”
后门指隐藏在系统或者程序中的秘密功能， 通常是程序设计者为了能在日后随意进入 系统而设置的。 后门早已构成系统或者程序的一部分，而 木马只是经过伪装同其他程序一起被运行。
9
什么是网络安全漏洞?
网络安全漏洞是指组成网络系统的硬件或 软件在安全方面存在的缺陷、隐患或脆弱 性。 网络安全漏洞的直接危害是非法用户可以 利用这些漏洞，中断、降低或妨碍系统的 正常工作，或未经授权而获得网络系统的 访问权，或提高其访问权。
10
为什么会存在网络安全漏洞?
（1）网络系统的复杂性 （2）网络协议的开放性 （3）操作系统的漏洞 （4）软件“后门” （5）人为因素
小结
病毒与木马 广告链接 因特网安全法规 案例
14
Chapter 06：Internet安全
复旦大学计算机学院
计算机网络与Байду номын сангаас页制作
肖川 cxiao@
1
目标
病毒与木马 广告链接 因特网安全法规 案例
2
6.1 病毒与木马
计算机病毒
编制者在计算机程序中插入的破坏计算机功能或者破 坏数据，影响计算机使用并且能够自我复制的一组计 算机指令或者程序代码。 破坏性
“木马”程序是目前比较流行的病毒文件，与一般的 病毒不同，它具备一般病毒的繁殖性，也并不“刻意” 地去感染其他文件。它通过将自身伪装吸引用户把木 马文件下载到用户自己主机内并诱使用户执行木马程 序，为施种木马者提供被种者电脑的所有或者部分系 统资源。 隐藏性、破坏性
3
木马
程序“后门”
后门指隐藏在系统或者程序中的秘密功能， 通常是程序设计者为了能在日后随意进入 系统而设置的。 后门早已构成系统或者程序的一部分，而 木马只是经过伪装同其他程序一起被运行。
9
什么是网络安全漏洞?
网络安全漏洞是指组成网络系统的硬件或 软件在安全方面存在的缺陷、隐患或脆弱 性。 网络安全漏洞的直接危害是非法用户可以 利用这些漏洞，中断、降低或妨碍系统的 正常工作，或未经授权而获得网络系统的 访问权，或提高其访问权。
10
为什么会存在网络安全漏洞?
（1）网络系统的复杂性 （2）网络协议的开放性 （3）操作系统的漏洞 （4）软件“后门” （5）人为因素
Dreamweaver复旦教程16
19
8. 添加提交按钮控件
20
设置按钮控件的属性
21
插入更多的按钮
22
23
9. 附加外部样式表
因为标签CSS规 则“input”设定 了背景色的缘故。
24
10. 修改表单域的背景色
在“CSS样式”面板内修改“input”规则的“backgroundcolor”属性值。
25
11. 设定表单元素的样式
10
插入更多的复选框
11
4. 添加单选按钮控件
定位光标，菜单 插入>>表单>>单选按钮组。
每个单选按钮具有相同 的名称。单选按钮的id 根据此名称自动生成， 但是互不相同。
12
设置每个单选按钮的属性
注意自动生成的ID属性值
13
5. 添加列表框控件
定位光标，菜单 插入>>表单>>选择(列表/菜单)。
计算机网络与网页制作 Chapter 16：构建网页表单
复旦大学计算机学院
1
目标
创建表单 添加多种表单元素 用CSS设定表单样式 验证表单
2
效果
3
1. 插入一个空的HTML表单
1) 定位光标，菜单 插入>>表单>>表单 2) 定位光标，面板 插入>>表单>>表单
“属性”面板
4
31
15. 把行为指派至不同的页面元素
先删除“验证”按钮的“检查表单”行为， 再为“发送”按钮添加“检查表单”行为。
32
16. 添加“交换图像”行为
定位光标，菜单 插入>>图像，选择蓝色的欢迎图 片。
网页制作PPT第一章
网页设计原则
01
02
03
04
简洁明了
网页设计应简洁明了，避免过 多的装饰和元素，突出核心内
容。
易于导航
网页的导航结构应清晰明了， 方便用户快速找到所需内容。
一致性
保持网页设计的一致性，使用 相同的字体、颜色、布局等，
提高用户体验。
用户体验优先
始终以用户需求为导向，设计 出符合用户习惯和期望的网页
。
边框是围绕内容和内边距的 线。
04
05
外边距是边框与其他元素之 间的空间。
04
网页布局与设计
网页布局
固定布局
整个网页的宽度和高度固定，适 合展示内容较多的网页。
流动布局
网页宽度自适应，高度根据内容多 少而变化，适合展示内容较少的网 页。
响应式布局
根据不同设备的屏幕大小和分辨率， 自动调整网页的布局和样式，确保 在不同设备上都能获得良好的用户 体验。
属性通常位于开始标签中，并且以名称/值对的形式出现，例如`<a href="https://">链接</a>`中的 `href="https://"`就是一个属性。
常见的属性包括`src`（定义元素的来源）、`class`（定义元素的类名）、 `id`（定义元素的唯一标识符）等。
发布与维护
将网页部署到服务器 上，定期更新和维护 网页内容。
02
HTML基础
HTML简介
HTML是HyperText Markup Language的缩写，中文译为超文本 标记语言，是用于创建网页的标准标 记语言。
HTML文档是由HTML元素组成的， 元素是由标签来定义的。
模块利用APDiv布局网页PPT学习教案
模块利用APDiv布局网页
会计学
1
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
利用AP Div布局网页
专业能力目标
学习目标
专业知识目标
专业素质目标
1.
掌握利用A P Div 布局对 象有效 控制页 面对象 和利用 时间轴 制作动 画的方 法
第1页/共27页
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
第21页/共27页
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
利用AP Div布局网页
综合案例实训 – 制作“某网络技术服务公司”首页 页面 页面效果 图
第22页/共27页
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
利用AP Div布局网页
课堂实践：同步模仿操作----案例01-03 综合案例实训：制作“某网络技术服务公司”
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
利用AP Div布局网页
案例03 – 在网页中添加下拉菜单效果 案例操作过程 相关知识点
第17页/共27页
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
利用AP Div布局网页
相关知识 点
①
使用Spry菜单栏
利用AP Div布局网页
专
业
能
力
目
1.
使用Dreamweaver CS3中AP Div容器和时间轴基本操作的能力
标
2.
利用Dreamweaver CS3中AP Div容器和时间轴控制网页中对象的能 力
会计学
1
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
利用AP Div布局网页
专业能力目标
学习目标
专业知识目标
专业素质目标
1.
掌握利用A P Div 布局对 象有效 控制页 面对象 和利用 时间轴 制作动 画的方 法
第1页/共27页
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
第21页/共27页
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
利用AP Div布局网页
综合案例实训 – 制作“某网络技术服务公司”首页 页面 页面效果 图
第22页/共27页
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
利用AP Div布局网页
课堂实践：同步模仿操作----案例01-03 综合案例实训：制作“某网络技术服务公司”
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
利用AP Div布局网页
案例03 – 在网页中添加下拉菜单效果 案例操作过程 相关知识点
第17页/共27页
学习情境6
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
利用AP Div布局网页
相关知识 点
①
使用Spry菜单栏
利用AP Div布局网页
专
业
能
力
目
1.
使用Dreamweaver CS3中AP Div容器和时间轴基本操作的能力
标
2.
利用Dreamweaver CS3中AP Div容器和时间轴控制网页中对象的能 力
利用AP Div布局页面
（8）【背景图像】：用来指定AP Div的背景图像。单击“浏览文件”按钮， 在弹出的“选择图像源文件”对话框中选择图像，或者直接在文本框中输入 图像的路径。 （9）【背景颜色】：用来指定AP Div的背景颜色。
:::::21世纪职业教育数字艺术规划教材:::::
4.2 AP Div属性面板
（10）【溢出】：如果AP Div里面的文字太多或图像太大，AP Div的大 小不足以全部显示的时候，就需要设置该功能，其中主要选项的含义如下。
:::::21世纪职业教育数字艺术规划教材:::::
4.2 AP Div属性面板
AP Div的属性面板主要选项含义如下： （1）【CSS-P元素】：用来指定AP Div的名称，用于识别不同的AP Div。 （2）【左】：用来指定AP Div的左边 浏览器窗口左边界的距离。 （3）【上】：用来指定AP Div的上边 浏览器窗口上边界的距离。 （4）【宽】：用来指定AP Div的宽。 （5）【高】：用来指定AP Div的高。 （6）【Z轴】：用来指定AP Div的Z轴顺序（即堆叠顺序）。
2．选择AP Div一般都有一下4种方法。 （1）将插入点放置在AP Div中，单击文档窗口左下角<div>标签，即可选择AP Div。 （2）在“AP元素”面板中单击AP Div的名称，即可选择AP Div。 （3）按住【Shift+Ctrl】组合键并单击AP Div，即可选择AP Div。 （4）按住【Shift】键，分别单击要选择的各AP Div的内部或边框线，可以选择 多个AP Div。
AP DIV的宽度。
当鼠标指针变为斜向双箭头时，按住鼠标左键斜上或斜下拖动鼠标，则可以调
整AP DIV的高度或宽度。
在【属性】面板中输入宽度和高度值来改变AP DIV的大小。
:::::21世纪职业教育数字艺术规划教材:::::
4.2 AP Div属性面板
（10）【溢出】：如果AP Div里面的文字太多或图像太大，AP Div的大 小不足以全部显示的时候，就需要设置该功能，其中主要选项的含义如下。
:::::21世纪职业教育数字艺术规划教材:::::
4.2 AP Div属性面板
AP Div的属性面板主要选项含义如下： （1）【CSS-P元素】：用来指定AP Div的名称，用于识别不同的AP Div。 （2）【左】：用来指定AP Div的左边 浏览器窗口左边界的距离。 （3）【上】：用来指定AP Div的上边 浏览器窗口上边界的距离。 （4）【宽】：用来指定AP Div的宽。 （5）【高】：用来指定AP Div的高。 （6）【Z轴】：用来指定AP Div的Z轴顺序（即堆叠顺序）。
2．选择AP Div一般都有一下4种方法。 （1）将插入点放置在AP Div中，单击文档窗口左下角<div>标签，即可选择AP Div。 （2）在“AP元素”面板中单击AP Div的名称，即可选择AP Div。 （3）按住【Shift+Ctrl】组合键并单击AP Div，即可选择AP Div。 （4）按住【Shift】键，分别单击要选择的各AP Div的内部或边框线，可以选择 多个AP Div。
AP DIV的宽度。
当鼠标指针变为斜向双箭头时，按住鼠标左键斜上或斜下拖动鼠标，则可以调
整AP DIV的高度或宽度。
在【属性】面板中输入宽度和高度值来改变AP DIV的大小。
网页制作课件ppt
提高网站流量，吸引更多 潜在客户，提高品牌知名 度和销售额。
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好，提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸，提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。 创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。 与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进 行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰 富的商品信息和购物体验。在制作电商网站时，需要 考虑如何设计出美观、实用的商品展示页面，以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的 用户体验和购物体验。在制作电商网站时， 需要考虑如何设计出易于操作和使用的界面 和功能，以及如何提供个性化的服务和支持
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好，提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸，提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。 创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。 与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进 行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰 富的商品信息和购物体验。在制作电商网站时，需要 考虑如何设计出美观、实用的商品展示页面，以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的 用户体验和购物体验。在制作电商网站时， 需要考虑如何设计出易于操作和使用的界面 和功能，以及如何提供个性化的服务和支持
复旦大学精品课程《计算机网络与网页制作》传统的因特网服务课件精品复习资料
工具栏 地 址 栏 链 接 栏
文档窗口
6 状态栏
4.2 电子邮件
电子邮件（E-mail）是Internet上应用最为广 泛的服务。 用户使用电子邮件服务，无论是收费还是 免费的邮件服务，首先必须申请。 每个信箱有一个地址，称为电子邮件地址 。 电子邮件格式：用户名@主机名
例如：cxiao@
7
电子邮件工作原理
用户代理（ UA：User Agent）：
又称为邮件阅读器。 编辑、发送、阅读和管理电子邮件。 又称为邮件服务器。 “邮局” 作用，接收用户邮件，根据地址传输， 传送到接收方的邮件服务器，并将邮件存放在 用户邮箱内。
8
传输代理（MTA：Message Transfer Agent）
Mail Server
•
邮件传输代理 MDA/MTA 要发送的 邮件队列
SMTP 用户代理
UA
Edora FocMail Outlook
发送者
SMTP Internet TCP连接
邮件传输代理 MDA/MTA
SMTP
要接收的 POP3 用户代理 邮件队列 UA
Mail Server
9
接收者
工作原理
Chapter 04：传统的Internet服务
复旦大学计算机学院
计算机网络与网页制作
肖川 cxiao@
1
目标
WWW服务 电子邮件服务 文件传输服务 电子公告牌系统 远程登录
2
4.1 WWW服务
WWW服务工作原理
采用C/S工作模式 服务器上运行WWW服务器程序 客户机运行WWW客户端程序，如WWW浏览器 http协议
文档窗口
6 状态栏
4.2 电子邮件
电子邮件（E-mail）是Internet上应用最为广 泛的服务。 用户使用电子邮件服务，无论是收费还是 免费的邮件服务，首先必须申请。 每个信箱有一个地址，称为电子邮件地址 。 电子邮件格式：用户名@主机名
例如：cxiao@
7
电子邮件工作原理
用户代理（ UA：User Agent）：
又称为邮件阅读器。 编辑、发送、阅读和管理电子邮件。 又称为邮件服务器。 “邮局” 作用，接收用户邮件，根据地址传输， 传送到接收方的邮件服务器，并将邮件存放在 用户邮箱内。
8
传输代理（MTA：Message Transfer Agent）
Mail Server
•
邮件传输代理 MDA/MTA 要发送的 邮件队列
SMTP 用户代理
UA
Edora FocMail Outlook
发送者
SMTP Internet TCP连接
邮件传输代理 MDA/MTA
SMTP
要接收的 POP3 用户代理 邮件队列 UA
Mail Server
9
接收者
工作原理
Chapter 04：传统的Internet服务
复旦大学计算机学院
计算机网络与网页制作
肖川 cxiao@
1
目标
WWW服务 电子邮件服务 文件传输服务 电子公告牌系统 远程登录
2
4.1 WWW服务
WWW服务工作原理
采用C/S工作模式 服务器上运行WWW服务器程序 客户机运行WWW客户端程序，如WWW浏览器 http协议
网页设计与制作课件第1章计算机网络概述
通信线路利用率低。
23
1.2.1 计算机网络的类型（8/9 ）
（4）树型结构
这种结构与星型结构相比降低了通信线路的成本， 但增加了网络的复杂性。网络中除最低层结点及 其连线外，任一结点或连线的故障均影响其所在 支路网络的正常工作。
24
1.2.1 计算机网络的类型（9/9）
（5）网状结构
优点：结点间路径多，阻塞可大大减少，局部的 故障不会影响整个网络的正常工作，可靠性高； 网络扩充和主机入网比较灵活、简单。
第一阶段：从单个网络ARPAnet向互联网发展的过程。 第二阶段：建成了三级结构的Internet。 第三阶段：逐渐形成了多级ISP结构的Internet。
ISP（Internet Service Provider） 就 是 一 个 进 行 商业活动的公司，因此它又常称为Internet服务提 供商。
29
1.3.3 Internet的应用
(1) 与世界范围的朋友保持联系，互通消息。 (2) 网络视频会议。 (3) 使用远程数据库或图书馆。 (4) 电子商务和电子政务。 (5) 远程医疗诊断系统。 (6) 网络电视和网络游戏。
……
30
1.4 计算机网络的体系结构
1.4.1 层次模型 1.4.2 OSI参考模型 1.4.3 TCP/IP参考模型 1.4.4 OSI参考模型和TCP/IP参考模型的比较
13
1.1.3 计算机网络的组成与功能(3/4)
3) 分组组装／拆卸设备PAD 它用于连接大量的同步和异步终端。 4) 网络控制中心NCC 它管理整个网络的运行，为网络的用户注册、登
记和记账，对网络中发生的故障进行检测。 5) 网关 它用于实现各网络之间的互联，通常也由计算机
来充当网关。 (2) 资源子网 资源子网实现全网的面向应用的数据处理和网络资源
23
1.2.1 计算机网络的类型（8/9 ）
（4）树型结构
这种结构与星型结构相比降低了通信线路的成本， 但增加了网络的复杂性。网络中除最低层结点及 其连线外，任一结点或连线的故障均影响其所在 支路网络的正常工作。
24
1.2.1 计算机网络的类型（9/9）
（5）网状结构
优点：结点间路径多，阻塞可大大减少，局部的 故障不会影响整个网络的正常工作，可靠性高； 网络扩充和主机入网比较灵活、简单。
第一阶段：从单个网络ARPAnet向互联网发展的过程。 第二阶段：建成了三级结构的Internet。 第三阶段：逐渐形成了多级ISP结构的Internet。
ISP（Internet Service Provider） 就 是 一 个 进 行 商业活动的公司，因此它又常称为Internet服务提 供商。
29
1.3.3 Internet的应用
(1) 与世界范围的朋友保持联系，互通消息。 (2) 网络视频会议。 (3) 使用远程数据库或图书馆。 (4) 电子商务和电子政务。 (5) 远程医疗诊断系统。 (6) 网络电视和网络游戏。
……
30
1.4 计算机网络的体系结构
1.4.1 层次模型 1.4.2 OSI参考模型 1.4.3 TCP/IP参考模型 1.4.4 OSI参考模型和TCP/IP参考模型的比较
13
1.1.3 计算机网络的组成与功能(3/4)
3) 分组组装／拆卸设备PAD 它用于连接大量的同步和异步终端。 4) 网络控制中心NCC 它管理整个网络的运行，为网络的用户注册、登
记和记账，对网络中发生的故障进行检测。 5) 网关 它用于实现各网络之间的互联，通常也由计算机
来充当网关。 (2) 资源子网 资源子网实现全网的面向应用的数据处理和网络资源
计算机网络与网页制作
17
网络层
应用层
18
5.6 云服务
云服务是通过云计算（ Cloud Computing ） 实现的。云计算是继上世纪八十年代大型 计算机到客户端 - 服务器端构架的大转变之 后的又一巨变。 早在上世纪六十年代，麦卡锡就提出了把 计算能力作为一种像水和电一样的公用事 业提供给用户的理念（即付即用： Pay As You Go），这是云计算思想的起源。 我们把计算能力比做水电，把网络比做水 管、电网一样的传输工具。
16
物联网的体系构架
感知层
由各种传感器构成，例如温湿度传感器、二维码标 签、射频识别 RFID 标签以及其读写器、摄像头、 GPS等感知终端。感知层是物联网识别物体、采集 信息的来源； 可由各种网络组成，如：互联网、广电网甚至某些 私有网络、计算平台等。这一层是物联网的关键层， 负责处理和传送底层感知层获取的数据； 整个物联网对于用户的接口，这一层与具体的行业 相结合，实现其具体的智能应用。
10
类Twitter型SNS
与 Twiter 类似的国内的案例也比较多，这里主 要提两个：新浪的微博和腾讯的Qing。 新浪首先是一家博客服务供应商，而腾讯也有 对应的 Qzone 作为个人博客的基础构架。随着 信息时代的发展，尤其是移动互联的发展以及 人们对于信息短平快的需求，信息也呈现出快 速消费化。 于是，博客这样的PC时代的流行的信息工具在 后PC时代即移动时代逐步变成了类Twitter新型 应用所取代。这里类Twitter型充分体现了轻量 级理念，比如：新浪的微博只能输入140 个字 符。
13
二、预处理
网络层
应用层
18
5.6 云服务
云服务是通过云计算（ Cloud Computing ） 实现的。云计算是继上世纪八十年代大型 计算机到客户端 - 服务器端构架的大转变之 后的又一巨变。 早在上世纪六十年代，麦卡锡就提出了把 计算能力作为一种像水和电一样的公用事 业提供给用户的理念（即付即用： Pay As You Go），这是云计算思想的起源。 我们把计算能力比做水电，把网络比做水 管、电网一样的传输工具。
16
物联网的体系构架
感知层
由各种传感器构成，例如温湿度传感器、二维码标 签、射频识别 RFID 标签以及其读写器、摄像头、 GPS等感知终端。感知层是物联网识别物体、采集 信息的来源； 可由各种网络组成，如：互联网、广电网甚至某些 私有网络、计算平台等。这一层是物联网的关键层， 负责处理和传送底层感知层获取的数据； 整个物联网对于用户的接口，这一层与具体的行业 相结合，实现其具体的智能应用。
10
类Twitter型SNS
与 Twiter 类似的国内的案例也比较多，这里主 要提两个：新浪的微博和腾讯的Qing。 新浪首先是一家博客服务供应商，而腾讯也有 对应的 Qzone 作为个人博客的基础构架。随着 信息时代的发展，尤其是移动互联的发展以及 人们对于信息短平快的需求，信息也呈现出快 速消费化。 于是，博客这样的PC时代的流行的信息工具在 后PC时代即移动时代逐步变成了类Twitter新型 应用所取代。这里类Twitter型充分体现了轻量 级理念，比如：新浪的微博只能输入140 个字 符。
13
二、预处理
复旦大学精品课程《计算机网络与网页制作》两类基本网络课件精品复习资料
24
VLAN间通信
VLAN是在交换机上划分的，但交换机是第 二层网络设备，无法进行VLAN间通信
使用第三层的网络设备：路由器 路由器可以转发不同VLAN间的数据包，就
像它连接了几个真实的物理网段一样
25
2.2 无线局域网
IEEE 802.11系列标准
红外线 2.4千兆赫频段
无线网络组网更加灵活 无线网络规模升级更加方便
20
CSMA/CD工作流程
21
虚拟局域网(VLAN)
由一些局域网网段构成与物理位置无关的 逻辑组
优点
安全性 网络分段 灵活性
22
VLAN的划分
基于交换机端口 基于MAC地址 基于策略
23
典型VLAN的特性
（1）每一个逻辑网段像一个独立物理网段 （2）VLAN能跨越多个交换机 （3）由主干为多个VLAN运载通信量
26
无线网络的覆盖范围
不加外接天线，在视野所及之处约250M 若有隔间之区域，则约35～50米左右
27
IEEE 802.11各标准的区别
802.11
2Mbps
802.11b
2.4GHz频段 11Mbps
802.11a
独占的频段 54Mbps
802.11g
兼容802.11b
Chapter02：两类基本网络
肖川 cxiao@
1 1
局域网 无线局域网
目标
2
2.1 局域网
传输介质 局域网优点 局域网拓扑结构 常见局域网：以太网 虚拟局域网
3
传输介质
双绞线(Twisted Pair)
同轴电缆(Coaxial Cable)
屏蔽层
铜芯线
15
VLAN间通信
VLAN是在交换机上划分的，但交换机是第 二层网络设备，无法进行VLAN间通信
使用第三层的网络设备：路由器 路由器可以转发不同VLAN间的数据包，就
像它连接了几个真实的物理网段一样
25
2.2 无线局域网
IEEE 802.11系列标准
红外线 2.4千兆赫频段
无线网络组网更加灵活 无线网络规模升级更加方便
20
CSMA/CD工作流程
21
虚拟局域网(VLAN)
由一些局域网网段构成与物理位置无关的 逻辑组
优点
安全性 网络分段 灵活性
22
VLAN的划分
基于交换机端口 基于MAC地址 基于策略
23
典型VLAN的特性
（1）每一个逻辑网段像一个独立物理网段 （2）VLAN能跨越多个交换机 （3）由主干为多个VLAN运载通信量
26
无线网络的覆盖范围
不加外接天线，在视野所及之处约250M 若有隔间之区域，则约35～50米左右
27
IEEE 802.11各标准的区别
802.11
2Mbps
802.11b
2.4GHz频段 11Mbps
802.11a
独占的频段 54Mbps
802.11g
兼容802.11b
Chapter02：两类基本网络
肖川 cxiao@
1 1
局域网 无线局域网
目标
2
2.1 局域网
传输介质 局域网优点 局域网拓扑结构 常见局域网：以太网 虚拟局域网
3
传输介质
双绞线(Twisted Pair)
同轴电缆(Coaxial Cable)
屏蔽层
铜芯线
15
复旦大学精品课程《计算机网络与网页制作》课件,使用模块化技术加速网页制作课件复习资料
17
解除某个实例与库项的关联
在页面内选中库项实例，之后在“属性” 面板单击“从源文件中分离”按钮。分离 后库项的更改不会影响到这个实例。
18
删除库项
在“资源”面板内选中库项，再单击底部 的“删除”图标。 在面板内删除库项将自动删除Library文件夹 下对应的lbi文件。 删除库项不会影响页面中已有的该库项实 例。
注意，库里的表 格没有呈现样式。
自动生成“插入 代码”的内容。
在面板内可以改 变代码片断所在 文件夹。
8
在main.html中使用新建的代码片断
在页面内定位光标，再双击面板内的代码片断。
9
库里的代码片断 并不包含CSS代 码，此表格之所 以有样式，是因 为main.html引用 了外部样式文件。
用于添加、删除或者 上下移动重复区域。
表示这个网页是 用模板category创 建的。
30
修改页面的可编辑区域
31
调整重复项的上下位置
上下移动光标所在重复区域
32
把网页从模板中分离
打开网页，菜单 修改>>模板>>从模板中分离。 分离之后，就可以修改一个基于模板的网页中可 编辑区域之外的内容；同时，你对原始模板所做 的任何改变不再会更新这个网页。
修改面板里的代码不会影响 页面上已经使用的代码片断
10
4. 库和库项
库是Dreamweaver的另一种模块化技术，每个站点有自己 的库(即站点内Library文件夹)，站点之间不能共享库。 可以把任何页面元素放入库成为库项。每个库项单独地保 存为一个文件，后缀名为.lbi。 (library item) 添加至网页的库项称为实例。 库项与其多个实例始终保持关联，修改库项会自动更新该 库项的所有实例。 通过面板 资源>>库 进行管理。
解除某个实例与库项的关联
在页面内选中库项实例，之后在“属性” 面板单击“从源文件中分离”按钮。分离 后库项的更改不会影响到这个实例。
18
删除库项
在“资源”面板内选中库项，再单击底部 的“删除”图标。 在面板内删除库项将自动删除Library文件夹 下对应的lbi文件。 删除库项不会影响页面中已有的该库项实 例。
注意，库里的表 格没有呈现样式。
自动生成“插入 代码”的内容。
在面板内可以改 变代码片断所在 文件夹。
8
在main.html中使用新建的代码片断
在页面内定位光标，再双击面板内的代码片断。
9
库里的代码片断 并不包含CSS代 码，此表格之所 以有样式，是因 为main.html引用 了外部样式文件。
用于添加、删除或者 上下移动重复区域。
表示这个网页是 用模板category创 建的。
30
修改页面的可编辑区域
31
调整重复项的上下位置
上下移动光标所在重复区域
32
把网页从模板中分离
打开网页，菜单 修改>>模板>>从模板中分离。 分离之后，就可以修改一个基于模板的网页中可 编辑区域之外的内容；同时，你对原始模板所做 的任何改变不再会更新这个网页。
修改面板里的代码不会影响 页面上已经使用的代码片断
10
4. 库和库项
库是Dreamweaver的另一种模块化技术，每个站点有自己 的库(即站点内Library文件夹)，站点之间不能共享库。 可以把任何页面元素放入库成为库项。每个库项单独地保 存为一个文件，后缀名为.lbi。 (library item) 添加至网页的库项称为实例。 库项与其多个实例始终保持关联，修改库项会自动更新该 库项的所有实例。 通过面板 资源>>库 进行管理。
复旦大学精品课程《计算机网络与网页制作》计算机网络基础课件精品复习资料
计算机网络硬件 RJ45
网络设备
网卡
网桥与交换机
NIC
路由器
传输介质
双绞线（Twisted Pair）
光纤
无线介质
RJ45
router switch
2020/3/2
23
大学计算机信息科技教程(第二版)
2020/3/2
24
大学计算机信息科技教程(第二算机信息科技教程(第二版)
计算机网络的功能
1. 数据通信是计算机网络最基本的功能 2. 资源共享是计算机网络的核心功能 3. 协同工作、分布处理 4. 提高可靠性
2020/3/2
20
大学计算机信息科技教程(第二版)
1.3 软硬件组成
计算机网络的软件
网络操作系统 网络通信协议
课件 作业 通知
2020/3/2
6
大学计算机信息科技教程(第二版)
精品课程网站
/s/302/main.htm
课件 教学视频
本课程为2013年复旦大学校级精品课程
2020/3/2
2020/3/2
29
大学计算机信息科技教程(第二版)
IP协议(IP)
IP协议将网络上所有支持IP协议的主机连接 起来。
若将每一个主机看作一个节点，那么该节 点将由一个32位的地址来标识，称之为该 主机的IP地址。
IP最重要的文档为RFC 791
http:\\\rfc.html
通过网页/，开通自己的 新浪博客，在自己的博客上发表一篇文章，并 把网页截图提交至elearning的“网络01作业”。
2020/3/2
48
大学计算机信息科技教程(第二版)
5-用AP-Div作页面布局PPT课件
适合使用Div及对应的ID CSS规则，当然也不排除 对Div使用类CSS规则。
7
.(第二版)
2. Div 与 AP Div
AP Div在设计视图内可以被随意拖动以及手工调整大小 Div在设计视图内不能拖动，也不能手工调整大小。 通过修改Div的CSS属性position的值(absolute或relative)，使
body的边距就决定了页面本身的边界。
留白指箱框的边框与其内容之间的透明区域，包 括上、下、左、右留白。亦可设置四个不同值。 留白的默认值等于0。
箱框的边框（或边界）位于箱框的边距区与留白
区之间，包括上、下、左、右边框，定义了箱框
的界线。边框默认是透明的，你可以分别设定每
个边框的宽度、颜色以及样式。
实时查看页面元素的边距、留白
单击工具栏上的“检查”按钮，之后在设计视图内移动鼠 标。
标题的上下边距默认非0； 段落的上下边距默认非0； 列表的上下边距默认非0； 列表的左留白默认非0； body的四个边距默认非0； 超链接的四边距默认为0。
40
.(第二版)
10.为页面元素添加边框
在“CSS样式”面板内双击“#main”规则
41
.(第二版)
11. 当内容超出AP Div大小时的处理
方法一：手工调整Div的高度。 方法二：把“溢出”属性设置为“auto”以
增加Div的滚动条。
42
.(第二版)
AP Div的“Z轴”属性值
同一范围内AP Div的前后位置由其“Z轴”属性值决定。具 有较大“Z轴”值的Div将位于较小“Z轴”值的Div前面。
第二版apdiv与div的主要区别1绝对定位的元素脱离了html内容的正常秩序它不考虑周围的元素如周围的文本相邻的div它总是准确地出现在为它指定的坐标上
7
.(第二版)
2. Div 与 AP Div
AP Div在设计视图内可以被随意拖动以及手工调整大小 Div在设计视图内不能拖动，也不能手工调整大小。 通过修改Div的CSS属性position的值(absolute或relative)，使
body的边距就决定了页面本身的边界。
留白指箱框的边框与其内容之间的透明区域，包 括上、下、左、右留白。亦可设置四个不同值。 留白的默认值等于0。
箱框的边框（或边界）位于箱框的边距区与留白
区之间，包括上、下、左、右边框，定义了箱框
的界线。边框默认是透明的，你可以分别设定每
个边框的宽度、颜色以及样式。
实时查看页面元素的边距、留白
单击工具栏上的“检查”按钮，之后在设计视图内移动鼠 标。
标题的上下边距默认非0； 段落的上下边距默认非0； 列表的上下边距默认非0； 列表的左留白默认非0； body的四个边距默认非0； 超链接的四边距默认为0。
40
.(第二版)
10.为页面元素添加边框
在“CSS样式”面板内双击“#main”规则
41
.(第二版)
11. 当内容超出AP Div大小时的处理
方法一：手工调整Div的高度。 方法二：把“溢出”属性设置为“auto”以
增加Div的滚动条。
42
.(第二版)
AP Div的“Z轴”属性值
同一范围内AP Div的前后位置由其“Z轴”属性值决定。具 有较大“Z轴”值的Div将位于较小“Z轴”值的Div前面。
第二版apdiv与div的主要区别1绝对定位的元素脱离了html内容的正常秩序它不考虑周围的元素如周围的文本相邻的div它总是准确地出现在为它指定的坐标上
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
27
新建类CSS样式—— .content
28
对主栏区使用.content样式
选中main AP Div，在“属性”面板的“类”下拉 列表选择“content”项
条纹区就是“留白”， 位于边框内侧。只设 置了左、右留白。
29
设置主栏区的标题样式
在“CSS样式”面板内新建规则
“留白(Padding)”默认值为0， “边距(Margin)”默认值不为0。
40
10.为页面元素添加边框
在“CSS样式”面板内双击“#main”规则
41
11. 当内容超出AP Div大小时的处理
方法一：手工调整Div的高度。 方法二：把“溢出”属性设置为“auto”以 增加Div的滚动条。
42
AP Div的“Z轴”属性值
同一范围内AP Div的前后位置由其“Z轴”属性值决定。具 有较大“Z轴”值的Div将位于较小“Z轴”值的Div前面。
当 使 用 “ 绘 制 AP Div ” 作 版 面 设 计 时 ， Dreamweaver自动地创建ID CSS规则，它设 定了应用于特定箱框的样式信息，包括位 置、宽度、高度等。 当 使 用“ 插 入 Div 标 签 ” 作 版面 设 计时 ， Dreamweaver要求你为每个箱框创建或指派 一个ID CSS规则。
CSS把页面上每个元素看作一个虚拟方框。 每个虚拟矩形框充当一个容器，用于容纳 文本、图像、媒体及表格，并在页面上占 据一定区域。 每个虚拟矩形框可设定自己的留白、边距 及边框。 箱框模型是嵌套的。浏览器窗口是最大的 箱框，而body标签对应的箱框是页面中所 有其他元素的根容器。
4
浏览器窗口 <body>
24
修改intro Div的样式
在“CSS样式”面板内双击“#intro”规则。
25
intro Div效果
条纹区就是“留白”， 位于边框内侧。
26
7. 添加主栏区
AP Div的ID 设为“ main”。从main_content.html页面复制 文本。
网页已有的标签CSS 规则(body)设置字体 为仿宋。
计算机网络与网页制作 Chapter 11：用CSS作页面布局
复旦大学计算机学院
肖川 cxiao@
1
目标
理解CSS的箱框模型 创建Div及AP Div 堆叠及重叠页面元素 设定箱框内容的样式 使用可视化助理调整页面元素位置
2
效果
3
1. CSS箱框模型
绝对定位的元素脱离了 HTML 内容的正常秩 序，它不考虑周围的元素（如周围的文本、 相邻的 Div ），它总是准确地出现在为它指 定的坐标上。AP Div的“Z轴”属性用于解 决堆叠问题。 一个被设为“相对定位”的元素会考虑相 邻HTML内容的正常秩序。
9
AP Div与Div的主要区别(2)
43
12. 用AP Div作页面布局的优缺点
优点
方便、快捷
缺点
不能快速地适应变化
44
小结
CSS箱框(或方框)模型 AP Div与Div的区别 添加AP Div 设置AP Div样式 (通常使用ID CSS规则) 往AP Div里添加内容 设置内容的样式 (通常使用复合内容CSS规则)
45
30
效果
31
设置主栏区的段落样式
在“CSS样式”面板内新建规则
32
效果
标题的下边距在“#container #main h2”规则中设为0； 段落的上边距在“#container #main p”规则中设为0； 又因为“留白”的默认值为0； 所以标题与段落之间没有空隙。
33
8. 添加侧栏区
10
AP Div
Div
11
mymenu.html示例
面板 插入>>布局>>绘制AP Div，添加一个AP Div 在这个AP Div内插入多个Div
12
13
Div默认是相对定位
14
15
3. 为页面创建一个居中的总容器
面板 插入>>布局>>插入Div标签
16
id值为 container的Div， 用作总容器。
AP Div的ID 设为“ sidebar”。从features.html页面复制文 本。
网页已有的标签CSS 规则(body)设置字体 为仿宋。
34
对侧栏区使用.content样式
选中sidebar AP Div，在“属性”面板的“类”下 拉列表选择“content”项
35
条纹区就是“留白”， 位于边框内侧。样式 只设置了左、右留白。
17
为总容器添加背景图片
在面板“CSS样式”内双击“#container”规则
18
4. 改变AP Div默认把页面作为容器的情况
一个AP Div被精确地放在你所绘制的位置，默认情况下页 面将作为其参考点，即无论在何处绘制AP Div，AP Div将 嵌套于body标签内。 改变AP Div默认把body作为容器的情况：菜单 编辑>>首选 参数
6
Div标签与页面布局
一个Div标签自身是不会产生任何显示效果的，除 非你用 CSS 规则专门为其作了设定。 Div 标签的边 距、留白、边框默认值为0。 页面内的Div标签将在页面内设定区域，之后你把 页面内容如文本、图像等直接放在这个区域内。 “绘制AP Div”功能可创建精确定位的箱框。 通常页面内不同的位置有不同的样式，因此非常 适合使用Div及对应的ID CSS规则，当然也不排除 对Div使用类CSS规则。
设置侧栏区的标题样式
在“CSS样式”面板内新建规则
36
设置侧栏区的列表样式
在“CSS样式”面板内新建规则
37
效果
38
9. 修改页面元素的边距值
body的上边距设为0。
39
实时查看页面元素的边距、留白
单击工具栏上的“检查”非0； 段落的上下边距默认非0； 列表的上下边距默认非0； 列表的左留白默认非0； body的四个边距默认非0； 超链接的四边距默认为0。
设置“首选参数”使 得新建的AP Div自动 地嵌套于绘制AP Div 时起点所在的容器。
19
5. 绘制标题区
自动创建#header CSS规则，并自动删 除原先的ID CSS规则
20
为标题区添加背景图片
在面板“CSS样式”内双击“#header”规则
21
往标题区插入图片
光标定位于标题区内，菜单 插入>>图像
22
设置标题区图片的样式
面板 CSS样式>>新建CSS规则
通过调整图像的边距 改变商标图像的位置
23
6. 添加介绍区
插入一个AP Div，将其命名为“intro”(这将自动增加一个 名为“#intro”的ID CSS规则)。之后粘贴文本。
网页已有的标签CSS 规则(body)设置字体 为仿宋。
7
2. Div 与 AP Div
AP Div在设计视图内可以被随意拖动以及手工调整大小 Div在设计视图内不能拖动，也不能手工调整大小。 通过修改 Div 的 CSS 属性 position 的值 (absolute 或 relative) ， 使得AP Div与Div可以相互转化。
8
AP Div与Div的主要区别(1)
body的边距 body的留白
body的边框
div的边距
<div>
div的边框
div的留白
h1的边距 <h1> h1的留白 h1的边框
一级标题文本
5
每个HTML标签具有的样式属性
边距指围绕箱框的透明区域，包括上、下、左、 右边距。四个边距可以设置不同值。边距的默认 值不等于0。 body的边距就决定了页面本身的边界。 留白指箱框的边框与其内容之间的透明区域，包 括上、下、左、右留白。亦可设置四个不同值。 留白的默认值等于0。 箱框的边框（或边界）位于箱框的边距区与留白 区之间，包括上、下、左、右边框，定义了箱框 的界线。边框默认是透明的，你可以分别设定每 个边框的宽度、颜色以及样式。