项目二 网页布局.

Presentation on theme: "项目二 网页布局."— Presentation transcript:

1 项目二 网页布局

2 教学目标、重点难点 掌握网页布局的的基本概念 掌握表格和单元格的属性设计 掌握表格的编辑方法 了解框架布局 掌握浮动框架的使用方法
重点与难点 表格的创建，编辑及属性的设计 Div+Css的布局 框架的创建，使用 掌握网页布局的的基本概念 掌握表格和单元格的属性设计 掌握表格的编辑方法 了解框架布局 掌握浮动框架的使用方法 知识目标

3 任务2.1 布局设计 任务2.2 表格布局 任务2.3 div+css 任务2.4 框架布局

4 任务2.1布局设计 设计网页时要组织好页面的基本元素，同时再配合一些特效，构成一个绚丽多彩的网页。网页的组成对象包括文本、图像和超级链接。内容是网站的灵魂，而文本则是构成网站灵魂的物质基础。文本与图像在网站上的运用是最广泛的，一个内容充实的网站必然会用大量的文本与图像，然后把超级链接应用到文本和图像上，才能使这些文本和图像“活”起来。

5 1、网页的版块结构 Internet中的网页由于涉及和制作的差别而千变万化，但通常由几大版块组成。

6 网页布局 网页布局是网页设计的基础，目前网页的布局主要可归为三大类型： 1．分栏式结构 2．区域分布式结构 3．无框架局限式结构

7 分栏式布局

8 区域分布式布局

9 无框架局限式布局

10 导航 导航是网页设计中不可或缺的基础元素之一。导航就如同一个网站的路标，有了它就不会在浏览网站时“迷路”。导航链接着各个页面，只要单击导航中的超级链接就能进入相应的页面。 导航设计的好坏，决定着用户是否能很方便地使用网站。导航设计应直观明确，最大限度地为用户使用考虑，尽可能使网页切换更便捷。导航的设计要符合整个网站的风格和要求，不同的网站会采用不同的导航方式。

11 2 导航 一般来说，在网页的上端或左侧设置导航栏是比较普遍的方式，如图1.9所示。网站采用上端文字作为一级导航，左侧树状结构菜单作为二级导航。

12 3 网页布局的基本结构 根据网页布局的特点，一般来说网页可以分成3个部分 1）页头
页头又可称之页眉，页眉的作业时定义页面的主题。页眉是整体设计的关键，其中又包括了LOGO、MENU和一幅Banner图片； 2）页脚 页脚和页面呼应，包括作者或公司信息和一些版权信息。 3）主体部分 根据实际显示正文，是网页的主干部分，可以分成多个模块，新闻，图文滚动，主要信息等。

13 3.1 网站LOGO 通常网站为体现其特色与内涵，涉及并制作一个LOGO图像放置在网站的左上角或其他醒目的位置。
企业网站常常使用企业的标志或者注册商标。 一个设计优秀的LOGO可以给浏览者留下深刻的印象，为网站和企业形象宣传起到十分重要的作用。

14 3.1 网站LOGO

15 3.2 导航条 导航条是网页的重要组成元素。设计的目的是将站点内的信息分类处理，然后放在网页中以帮助浏览者快速查找站内信息。
导航条的形式多种多样，包括文本导航条、图像导航条以及动画导航条等。 有些使用特殊技术（例如Flash、JavaScript、CSS）制作的导航条还可以具有下拉菜单的功能。

16 2.2 导航条

17 3.3 Banner Banner的中文意思是横幅。Banner的内容通常为网页中的广告。

18 3.3 Banner

19 3.4 内容版块 网页的内容版块是整个页面的组成部分。
设计人员可以通过该页面的栏目要求来设计不同版块，每个版块可以有一个标题内容，并且每个内容版块主要来显示不同文本信息。

20 3.5 版尾或版权版块 版尾，即页面最低端的版块。 这部分位置通常放置网页的版权信息，以及网页所有者、设计者的联系方式等。
有的网站也将网站的友情链接以及一些附属的导航条放置在这里。

21 任务说明 开始制作网页前，必须在纸上或专门的软件中先画好网页的结构草图，这样既方便网页设计人员与客户协商修改网页结构，又便于网站风格的统一。
Photoshop是设计行业的“全能型选手”，在网页设计行业有很好的表现。使用Photoshop可以轻松创建网站图像、动态图像、按钮等，还可以通过切片及相关存储功能输出完整的网页框架及链接。

22 【预备知识】 1、使用切片 “切片工具”通常是在设计Web页中用来分割页面的工具，
就像在Dreamweaver中绘制表格一样，在ps中我们同样可以使 用“切片工具”直接在图像上绘制切片线条，或使用图层来设 计图形并创建基于图层的切片。   虽然在网络上很多图片都进行了切割，但在正常显示状态下，我们完全不能直接看出哪些图片被切割过，而哪些是完整的。因此，切片无疑是一种巧妙的、“鱼与熊掌兼得”的解决方案。要确定哪些图片被切割过，可以在网页中的文本区域往图片区域拖曳，如果图片分小块变暗变蓝，则该图片是被切割过的

23 2编辑切片 选择切片   点击一下默认为“起点”，再次点击默认为“终点”，右击如图2-5所示，出现的编辑框可以改变切片大小。使用该工具框选图像进行分布，如图所示切成多片，每一片右上角都会显示切片标签。  移动切片 选中切片后，可以拖动鼠标移动，也可以使用方向键或属性面板的位置值移动 温馨提示：如果想把一个图片平均分成几等份时，这个操作只要右击“切片分割”就好了，可以选择水平和垂直，将图片平均分割，不再需要一步步切割了。

24 3导出切片 Photoshop中的网页设计工具可以帮助我们设计和优化单个网页图形或整个页面布局。通过使用切片工具可将图形或页面划分为若干相互紧密衔接的部分，并对每个部分应用不同的压缩和交互设置。 文件--存储为Web和设备所用格式，对话框可让我们在存储为一些网页兼容的格式之前，预览不同的优化设置并调整颜色调板、透明度和品质设置。当然对图像切割的最大好处就是提高图像的下载速度，减轻网络的负担。另外，分多块下载的图像，在视觉上，也会给观众以“进行中..”的感觉，在心理上给人以下载速度快的错觉。 存储时，在 “保存类型”中选择“HTML和图像”，可以直接保存成网页。首页和内容页的切片可以放在同一个站点下的IMAGE文件夹下面,但是如果素材图片多时,最好另起一个文件夹单独保存,以便制作和修改的方便

25 注意事项： 切片最重要的是区分出网页中哪些是图像区域，哪些是文本区域，并创建图文并茂的网站界面；
切片最重要的是区分出网页中哪些是图像区域，哪些是文本区域，并创建图文并茂的网站界面；  切片前,先要仔细对设计进行分析,考虑要因设计制宜；  切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。  对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来  在DW中进行编辑时，少用图片，如果能用背景颜色代替的就使用背景颜色 能使用图案的也尽可能使用图案平铺来形成背景  切片时,可不断放大缩小设计观察精准度,可以根据辅助线进行切片； 切片后,要对导出的切片进行审核是否符合要求,比如大小颜色图片质量透明背景与否等,如果不合适,要重新对切片进行优化输出或者重新切片。

26 【实施步骤】： 打开PS软件。使用绘图工具进行设计图片或者打开原本准备好的一张图片，可以把图片直接拉到PS中，也可以用菜单栏上的文件工具来打开文件。 把图片乱放到合适的大小，然后选择【裁剪工具】，工具栏上的一把像小刀一样的工具，选择“切片工具”。 图2- 6 首页设计 然后把图片切成多块，适当调整大小尽量保持图片的完整性，由于背景图片是渐进效果图，切成细条。 图2-7 首页切割 提示：1、切片的时候，尽量保证所有切片和被切片的图片尺寸一致，切片之间不要重叠 2、按Ctrl+R先调出标尺，为了做到精确的等分，可以采用：视图--新建参考线，在对话框中准确输入参考线的位置 ，这时可以把文档放大，以便参考线更准确。  3、  使用切片工具，首先为上面的圆边和下面的圆边做切片。  选择文件→存储为WEB和设备所用格式，这是一种专门为网页制作人设置的格式。 图2-8存储为Web和设备所用格式   选择“HTML和图像”格式，保存。 图2-9存储格式 打开dreamweaver，看到已经打开制作好的网页了。如果把图片放到相册空间里，把图片代码替代成图片空间里的代码，就可以把代码复制到网站上，或者网店里都可以浏览。

27 任务2.2 表格布局

28 【任务说明】 根据金苹果幼儿园首页为例，介绍如何用表格布局，为使读者更容易理解，我们可以将此页面分成3部分，页头区，主体区和页尾区

29 页头

30 内容

31 【预备知识】 在表格中横向为行，纵向为列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。表格的边线叫做边框。

32 表格编辑 所谓表格就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为行与列的交叉区域称为，网页中的元素通常都被放置在这些单元格中，以使其“各安其位 此处显示了表格的宽度。如果只显示一个“▼”符号，表示未明确设置表格宽度 此处表示未明确设置单元格的宽度

33 插入表格 在Dreamweaver中创建表格的方法非常简单。确定插入点后，单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格。

34 选择表格和单元格 在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。
要选择某个单元格，可首先将插入点放置在该单元格内，然后按【Ctrl＋A】组合键或单击“标签选择器”中对应的“<td>”标签。 要选择某行或某列，可将光标置于该行左侧或该列顶部，当光标形状变为黑色箭头 或 时单击鼠标。

35 设置表格和单元格的属性 选中表格后，使用属性面板可以修改表格的行、列、宽、高，以及填充、间距等。
在单元格中单击，属性面板中将显示相应单元格的属性。

36 合并与拆分单元格 所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。 拖动鼠标选中要合并的单元格 单击“合并所选单元格，使用跨度”按钮

37 2.拆分单元格表示将一个单元格拆分成多个单元格，下面继续在前面的文档中操作，也就是将前面合并的单元格拆分开来，具体操作如下。
在要拆分的单元格中单击 打开“拆分单元格”对话框，设置各项参数后单击“确定”按钮 单击“拆分单元格为行或列”按钮

38 添加或删除行和列 在使用表格布局网页时，往往需要在创建好的表格中添加或删除行和列。
在要添加行或列的单元格中单击鼠标右键，在弹出的快捷菜单中选择“表格”>“插入行或列”菜单 在打开的“插入行或列”对话框中设置各项后单击“确定”按钮

39 格式化表格 在使用表格显示数据信息时，为便于浏览者阅读，往往需要为单元格设置不同的背景颜色。常用的方法如下。
选中表格后，选择“命令”>“格式化表格”菜单 在“格式化表格”对话框中设置各项后，单击“确定”按钮

40 表格标签 HTML小常识： < table >…</table>表格 <tr>…</tr>行
<td>…</td>单元格 属性 值 描述 align Left，center，right 不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。 bgcolor rgb(x,x,x)，#xxxxxx colorname 规定表格的背景颜色。 border pixels 规定表格边框的宽度。 cellpadding Pixels，% 规定单元边沿与其内容之间的空白。 cellspacing 规定单元格之间的空白。 width %，pixels 规定表格的宽度。

41 【实施步骤】 步骤1、修改页面属性如图：修改标题、字体大小：12px,背景图片，重复：repeat-x， 步骤2、插入表格，
步骤3、鼠标定位第一行，修改单元格属性如图，修改---编辑标签，td 步骤4、定位第二行，设置单元格标签，背景：，插入1*5表格，输入文本 <table width="928" border="0" align="center" cellpadding="0" cellspacing="0" background="image/top.jpg"> 步骤5、定位第三行，插入1*2表格，左面单元格内插入2*1表格id:left，分别为上下单元格添加背景图片：left-head.jpg， left-con.jpg,右面单元格插入背景图片：index_07.jpg，插入10*1表格，id:right，在第二行输入文本，调整单元格位置。 步骤6、定位第四行，插入背景图片：bottom.jpg，属性设置：水平：居住对齐，垂直：居中，输入文本

42 课堂练习 用表格布局校园网首页

43 任务2.3 div+css

44 任务说明 DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。

45 【预备知识】 <div>标签 （一）标签定义
<div>（Division）元素在文档内定义了一个区域，<div>元素包括文本、表格、表单、图像、插件等各种页面内容，甚至在<div>元素内还可以包含<div>元素。 如果要使<div>标签显示特定的效果，或者在某个位置上显示HTML内容，就要为<div>标签定义CSS样式。 使用<div>标签的方法为： <div>HTML内容</div> 如果单独使用<div>标签，而不加任何CSS样式，那么它的效果和使用<p>标签是一样的。 （二）标签编辑 1. 将鼠标放在要插入<div>标签的位置上，然后点击“插入”菜单，选择“布局对象”命令，在弹出的子菜单中选择“Div 标签”项。 或者在“插入”面板中选择“布局”项，点击“插入 Div 标签”图标，如下图所示：

46 2. 点击图标后，打开“插入 Div 标签”对话框，
如下图所示： 3. 在“插入 Div 标签”对话框中，可以进行以下操作： 插入：在插入点——在光标放置的位置上插入<div>标签；在开始标签之后——在<body>标签的后面插入<div>标签；在结束标签之前——在</body>结束标签的前面插入<div>标签。 类：选择一个类。可以参考“CSS样式表教程：类选择器”。 ID：选择一个ID。可以参考“CSS样式表教程：id选择器”。 “新建 CSS 规则”按钮：点击此按钮，会打开“新建 CSS 规则”对话框，在对话框中可以新建CSS规则。 提示：使用“新建 CSS 规则”，可以添加<div>标签的类和ID。 4. 在对话框中设置好各项以后，或者不进行设置，单击“确定”按钮，即可将<div>标签插入到文档中。 5. 在文档的“设计”视图中点击<div>标签框线，选中<div>标签，

47 6. 可以打开<div>标签“属性”面板，
Div ID：选择一个ID。可以参考“CSS样式表教程：id选择器”。 类：选择一个类。可以参考“CSS样式表教程：类选择器”。 “CSS面板”按钮：在弹出的窗口中可以创建新的CSS规则或者添加附加样式表。

48 二、CSS的简介 1、Css定义 CSS是层叠样式表（Cascading Style Sheet）的简称，它提供了对网页布局和设计的创造性控制。利用CSS： CSS样式表提供了比HTML多得多的格式化选择。 可以通过引人注目的标题、下落的大写字母，以及边框来装饰文本。 可以精确地排列图片，创建列和横幅。 使用动态翻转效果可以高亮突出显示文本链接。 使用CSS样式表，可以简化网页代码，减少代码上传的数量。而使用HTML时，则需要更多的代码才能获得几乎相同的视觉效果，比如213行纯HTML代码仅相当于71行CSS版的HTML代码。 浏览器会在缓存中保存第一次下载的外部样式表，以便重复使用，大大加快了网页的下载和显示速度。 CSS将网页设计样式的过程变得简单而高效。只需修改CSS样式表文件就可以改变整个站点的风格。对于较大的网站非常有用。

49 2、CSS的作用 CSS样式只是一种规则，它描述了对网页的特定部分如何设定格式。样式表就是这样一组预先设计好的样式。 CSS与HTML共同起作用，但CSS不是HTML： HTML把信息组织到标题、段落、无序列表等元素中，给文档提供结构。 CSS则与浏览器一起，将HTML变得更加美观。 因此，CSS就是用来改变HTML的所有展现效果的。 一旦创建好样式，就可以把它应用到标题、文本、图片、或者其它的网页元素上了。

50 CSS 样式面板 打开 CSS 样式面板的步骤如下：
1. 选择“窗口”菜单，点击“CSS样式”项。或者按 Shift+F11。打开“CSS 样式”面板。如下图所示：

51 2. 单击属性检查器中的“CSS”按钮。如下图所示：

52 Dreamweaver CS5创建新的 CSS 样式表
在“CSS样式”面板中，点击面板右下角的“新建 CSS 规则”按钮，如下图所示：

53 弹出“新建 CSS 规则”对话框。如下图所示：
或者：点击“格式”菜单，选择“CSS 样式”中的“新建”项，也可以打开“新建 CSS 规则”对话框。 或者： 首先，在“文档”窗口中选择文本，然后从 CSS 属性检查器（“窗口”>“属性”）的“目标规则”弹出菜单中选择“新建 CSS 规则”，最后单击“编辑规则”按钮，或者从属性检查器中选择一个选项（例如单击“粗体”按钮）以启动一个新规则。如下图所示：

54 2. 在“新建 CSS 规则”对话框中，可以指定要创建的CSS规则的选择器类型。
在图 4 的“选择器名称”文本框中输入样式的名称，如：.p1，然后单击“确定”按钮，就弹出了“.p1 的 CSS 规则定义”对话框，如下图所示：

55 选择器类型 在“选择器类型”中选择“类（可应用于任何 HTML 元素）”项，可以创建一个用class属性声明的应用于任何HTML元素的类选择器。然后在“选择器名称”文本框中输入类名称。类名称必须以句点（.）开头，能够包含任何字母和数字（如：.blue）。 在“选择器类型”中选择“ID（仅应用于一个 HTML 元素）”项，可以创建一个用id属性声明的仅应用于一个HTML元素的id选择器。然后在“选择器名称”文本框中输入ID号。ID必须以井号（#）开头，能够包含任何字母和数字（如：#one）。 在“选择器类型”中选择“标签（重新定义 HTML 元素）”项，可以重新定义特定HTML标签的默认格式。然后在“选择器名称”文本框中输入HTML标签或从弹出菜单中选择一个标签。 在“选择器类型”中选择“复合内容（基于选择的内容）”项，可以定义同时影响两个或多个标签、类或ID的复合规则。如，如果输入div p，则<div>标签内的所有<p>元素都将受此规则影响。

56 类型属性： 样式：将“正常”、“斜体”或“偏斜体”指定为字体样式。默认配置是“正常”。两种浏览器都支持样式属性。
行高：配置文本所在行的高度。选择“正常”自动计算字体大小的行高，或输入一个确切的值并选择一种度量单位。比较直观的写法用百分比，例如180%是指行高等于文字大小的1.8倍。相对应的CSS属性是”line-height”。 修饰：向文本中添加下划线、上划线或删除线，或使文本闪烁。正常文本的默认配置是“无”。链接的默认配置是“下划线”。将链接配置设为无时，能够通过定义一个特别的类删除链接中的下划线。这些效果能够同时存在，将效果前的复选框选定即可。相对应的CSS属性是”text-decoration”。。 粗细：对字体应用特定或相对的粗体量。“正常”等于 400；“粗体”等于 700。相对应的CSS属性是”font-weight”。 变量：配置文本的小型大写字母变量。DW MX 2004不在“文档”窗口中显示该属性。大小写：将选定内容中的每个单词的首字母大写或将文本配置为全部大写或小写。 颜色：配置文本颜色。两种浏览器都支持颜色属性。

57 背 景 属 性: 能够对网页中的任何元素应用背景属性 背景颜色：配置元素的背景颜色。两种浏览器都支持背景颜色属性。
背景图像：配置元素的背景图像。两种浏览器都支持背景图像属性。 重复：定义是否重复连同怎样重复背景图像。两种浏览器都支持重复属性。 “不重复”在元素开始处显示一次图像。 “重复”在元素的后面水平和垂直平铺图像。 “横向重复”和“纵向重复”分别显示图像水平带区和垂直带区。图像被剪辑以适合元素的边界。 附件：确定背景图像是固定在他的原始位置还是随内容一起滚动。注意，某些浏览器可能将“固定”选项视为“滚动”。 水平位置：和垂直位置指定背景图像相对于元素的初始位置。这能够用于将背景图像和页面中央垂直和水平对齐。假如附件属性为“固定”，则位置相对于“文档”窗口而不是元素。

58 区 块 属 性 能够定义标签和属性的间距和对齐配置。
单词间距：配置单词的间距。若要配置特定的值，请在弹出式菜单中选择“值”，然后输入一个数值。在第二个弹出式菜单中，选择度量单位。 字母间距：增加或减小字母或字符的间距。若要减少字符间距，请指定一个负值（例如 -4）。字母间距配置覆盖对齐的文本配置。 垂直对齐：指定应用他的元素的垂直对齐方式。仅当应用于 <img> 标签时， 文本对齐：配置元素中的文本对齐方式。 文本缩进：指定第一行文本缩进的程度。 空格：确定怎样处理元素中的空白。从下面三个选项中选择：“正常”收缩空白；“保留”的处理方式即保留任何空白，包括空格、制表符和回车；“不换行”指定仅当碰到 <br >标签时文本才换行。 显示：指定是否显示连同怎样显示元素。“无”关闭他被指定给的元素的显示。

59 方框属性： 方框（又称盒子）类别能够为控制元素在页面上的放置方式的标签和属性定义配置。能够在应用填充和边距配置时将配置应用于元素的各个边，也能够使用“全部相同”配置将相同的配置应用于元素的任何边。 宽和高：配置元素的宽度和高度。宽和高定义的对象多为图片，表格，层等 浮动：配置元素浮动方式（如文本、层、表格等）。其他元素按通常的方式环绕在浮动元素的周围。 清除：不允许元素的浮动。左对齐：表示不允许左边有浮动对象。右对齐：表示不允许右边有浮动对象。两者：表示允许两边都能够有浮动对象。无：不允许有浮动对象。两种浏览器都支持“清除”属性。 填充：指定元素内容和元素边框（假如没有边框，则为边距）之间的间距。取消选择“全部相同”选项可配置元素各个边的填充。 边界：指定一个元素的边框（假如没有边框，则为填充）和另一个元素之间的间距。仅当应用于块级元素（段落、标题、列表等）时，DW MX 2004才在“文档”窗口中显示该属性。取消选择“全部相同”可配置元素各个边的边距。

60 边框属性 能够定义元素周围的边框的配置（如宽度、颜色和样式） 样式：配置边框的样式外观。 宽度：配置元素边框的粗细。 颜色：配置边框的颜色。

61 列表属性： 列表标签定义列表配置（如项目符号大小和类型） 类型：配置项目符号或编号的外观。两种浏览器都支持“类型”。
项目符号图像：能够为项目符号指定自定义图像。单击“浏览”选择图像或键入图像的路径。 位置：配置列表项文本是否换行和缩进连同文本是否换行到左边距。

62 链接外部样式表 在“CSS样式”面板中，点击面板右下角的“附加样式表”按钮，如下图所示：

63 出现“链接外部样式表”对话框，如下图所示：
添加为设置为“链接”时，点击“浏览”按钮，找到已经编写好的样式表文件，点击“确定”按钮，就会在“文件/URL”框中键入该样式表的路径，点击“预览”按钮确认样式表是否将所需要的样式应用于当前页面。如果应用的样式没有达到您预期的效果，请点击“取消”按钮删除该样式表。页面将回复到原来的外观。如果达到了您预期的效果，就点击“确定”按钮，就会链接到一个外部样式表： <link href="include/cont.css" rel="stylesheet" type="text/css" />

64 实施步骤

65 第一步：规划网主要由五个部分构成 1.Main Navigation 导航条，具有按钮特效。
Width: 760px Height: 50px 2.Header 网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px 3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content 4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on content 5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px。

66 第二步：创建html模板及文件目录等 1.创建html模板 代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>CompanyName - PageName</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="Description" /> <meta name="keywords" content="Keywords" /> <meta name="author" content="Enlighten Designs" /> <style type="text/css" "css/master.css";</style> </head> <body> </body> </html>

67 将其保存为index.html,并创建文件夹css，images，网站结构如下

68 2.创建网站的大框，即建立一个宽760px的盒子，它将包含网站的所有元素。
在html文件的<body>和</body>之间写入 <div id="page-container"> Hello world. </div> 创建css文件，命名为master.css,保存在/css/文件夹下。写入： #page-container { width: 760px; background: red; }

69 控制html的id为page-container的盒子的宽为760px， 背景为红色。表现如下
现在为了让盒子居中，写入margin: auto;，使css文件为： #page-container { width: 760px; margin: auto; background: red; } 现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入： html, body { margin: 0; padding: 0; }

70 第三步：将网站分为五个div，网页基本布局的基础
1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入： <div id="page-container"> <div id="main-nav">Main Nav</div> <div id="header">Header</div> <div id="sidebar-a">Sidebar A</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> 表现如下：

71 2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在css文件写入
#main-nav { background: red; height: 50px; } #header { background: blue; height: 150px; } #sidebar-a { background: darkgreen; } #content { background: green; } #footer { background: orange; height: 66px; }

72 表现如下

73 第四步：网页布局与div浮动等 1.浮动，首先让边框浮动到主要内容的右边。用css控制浮动
#sidebar-a { float: right; width: 280px; background: darkgreen; } 表现如下

74 2.往主要内容的盒子中写入一些文字。在html文件中写入
<div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. </div>

75 表现如下 但是你可以看到主要内容的盒子占据了整个page-container的宽度，我们需要将#content的右边界设为280px。以使其不和边框发生冲突。 css代码如下： #content { margin-right: 280px; background: green; }

76 同时往边框里写入一些文字。在html文件中写入：
<div id="sidebar-a"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. </div>

77 表现如下

78 这也不是我们想要的，网站的底框跑到边框的下边去了。这是由于我们将边框向右浮动，由于是浮动，所以可以理解为它位于整个盒子之上的另一层。因此，底框和内容盒子对齐了。 因此我们往css中写入：
#footer { clear: both; background: orange; height: 66px; }

79 表现如下

80 课堂练习 用div+css布局校园网首页

81 任务2.4 框架布局

82 【案例分析】 框架是一种特殊的网页布局工具，它可以将网页分成几个互不干扰的区域，通常用来制作网页中有一个区域发生变化，而其他区域不变的的网页，如网站后台管理和一些论坛网页等

83 【预备知识】 框架网关于框架和框架集 框架网页：是—种特殊的HTML网页，它可将浏览器窗口分成不同的区域，每个区域都可以显示不同的网页，而且在替换窗口中的网页文件时，各个窗口之间没有影响。一个框架结构有两部分网页文件构成：框架集（Frameset ）和框架（Frame）。 框架：是指用来分隔网页的窗格；每个框架都是浏览器中的一个区域，它可以显示与浏览器窗口中所显示内容相关的html文档，是一个独立的html页面。每个框架包括框架高度、框架宽度、滚动条和框架边框，此外还可指定框架的内边距（框架与网页正文之间的距离）。

84 框架集：是指定义一组网页布局结构与属性的html 页面，其中包含了显示在页面中框架的数目、尺寸、装入框架的页面的来源及其他可定义的属性的相关信息。框架集页面不会在浏览器中显示，只是向浏览器提供如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 框架和框架集的关系：框架集文档调用（引用）各个框架文档。改变框架文件是指改变在框架中打开的文件。

85 为了更好的理解什么是框架和框架集，详看下面的示意图。这是一个左右结构的框架，其结构是由三个网页文件组成的。首先外部的框架是一个文件，用index.htm命名。左框架为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。

86 框架网页的优点： 访问者的浏览器不需要为每个页面重新加载与导航相关的图形（即固定网页中的某些部分） 。
框架集可以将网页的内容组织到相互独立的HTML页面内，相对固定的内容（比如导航栏、标题栏）和经常变动的内容分别以不同的文件保存，将会大大提高网页设计和维护的效率。 每个框架都有自己的滚动条，访问者可以独立滚动框架。 基于上述优点，框架通常用于创建网站导航。

87 框架网页的缺点： 难以实现不同框架中个元素的精确图形对齐。 使用框架制作的网页很难被搜索引擎搜索到。 对导航测试可能很费时间
各个带有框架的页面URL不显示在浏览器中，因此可能难以将特定网页设为书签，除非使用了服务器代码，允许访问者加载特定的带框架版本。

88 创建框架集 用户可以直接创建框架集，也可以在普通页面中加载预定义的框架集。其中，直接创建框架集的方法与创建普通页面的方法相似
选择“文件”>“新建”菜单，打开“新建文档”对话框 在“类别”列表中选择“框架集”选项，右侧将显示系统预定义的框架集类型，选择其中一种，然后单击“创建”按钮

89 框架和框架集的基本操作 1．认识“框架”面板
利用“框架”面板可以对框架和框架集进行操作，选择“窗口”>“框架”菜单，可以打开“框架”面板。

90 选择框架和框架集 在文档窗口中选择框架的方法为，按住【Alt】键，然后在要选择的框架内单击，被选中的框架边线将显示为虚线。
如要选择框架集，单击该框架集上的任意边框即可，此时框架集的所有边框都呈虚线显示。 利用“框架”面板选择框架时，直接在面板中相应区域单击即可。选择框架集时，在面板中单击框架集的边框即可。

91 删除框架 3. 将光标放在框架的边框上，当光标变成垂直箭头（或水平箭头）时，按住鼠标左键，将框架的边框拖出父框架或页面之外，即可将这个框架删除。

92 框架和框架集的属性设置 选中框架后，“属性”面板上将显示相应框架的属性。 显示框架源文件的保存路径 选择是否显示框架的边框
设置框架滚动条的属性

93 设置框架集属性 选中框架集，属性面板中将显示框架集的属性
该面板中各参数的含义同框架属性面板基本相同，不同的是在“行”或“列”文本框中可设置框架的行高或列宽，在“单位”下拉列表框中可选择具体单位。

94 保存框架和框架集 保存框架和框架集：一个包含n个框架的网页实际上由 n+1 个独立的html页面组成，1个框架集文件和n个包含在框架中显示的文件。这 n+1 个页面必须单独保存，才能在浏览器中正常工作。 插入的网页元素位于哪个框架，就保存在哪个框架的网页中。

95 点击“文件—保存全部”，则打开几个另存为对话框，提示保存各个部分；设计视图中的选择线（或说成阴影）也会自动的移动到对应的被保存的框架中，据此可以知道正在保存的是哪一个框架文件。
Dw先保存框架集文件，再保存框架文件。 若只保存了框架集，而未保存某个框架（即没指定该载入该框架的文档），可以直接选定该框架，然后创建链接来指向要载入的文档。类似于根据现有文档创建框架页。

96 Dreamweaver CS5设置框架链接 在Dreamweaver CS5中，要为框架网页内的文本或对象指定一个链接，可以分为两部分：指定框架的链接文件和设置链接的目标。

97 Dreamweaver CS5指定框架的链接文件
1. 在框架网页中，选择一段文本或对象。 2. 在屏幕底部的框架“属性”面板中，如下图所示： 图2- 62框架链接 在“链接”编辑框中输入文件的名字，或者点击并拖动“指向文件”图标选取链接文件，或者点击“浏览文件”图标在文件夹中选择一个文件。 至此，指定框架的链接文件就完成了。

98 Dreamweaver CS5设置链接的目标
如果已经在框架“属性”面板中设置框架名称了，框架的名字就会出现在上图圈定的菜单中。选择一个已经命名的框架使链接文档在该框架内打开。 值_blank：表示在一个新窗口中打开链接文档。 值_new：表示在一个新窗口中打开链接文档。 值_parent：表示在包含这个链接的父框架窗口中打开链接文档。 值_self：表示在包含这个链接的框架窗口中打开链接文档。 值_top：表示在整个浏览器窗口中打开链接文档。

99 浮动框架 在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记<iframe></iframe>，同样用src属性来设置框架中显示文件的路径。 格式：<iframe src="url"></iframe> 与框架不同的是，浮动框架可以包含在<body>标记中。

100

101 【实施步骤】 首先建立三个网页:top.html、skjh.html，空白页 main.html单击中“文件”菜单，选择“新建”项，打开“新建文档”对话框，在示例页中选择上方固定，如下图所示： 插入框架后，选择“文件”>“保存框架页”。将框架保存为“admin.html” 单击上下框架的边界像选中框架集，此时属性为框架集， “行”输入100，边框：是，边框宽度：10，边框颜色：#0066FF 选择 “窗口”>“框架”，打开框架面板，单击框架面板对应区域,如图 框架页topFrame，源文件：top.html，框架页mainFrame，源文件：main.html. 选择“文件”>“保存全部”,保存所有文档。 点击 “top.html”中的 “授课计划”，属性中链接：skjh.html,目标：mainFrame

102 课堂练习

103 【项目总结】 本项目主要介绍了网页建设的几种布局方式，需要注意以下几点： 制作网页时首先要用绘图工具进行设计
使用表格布局时，根据实际情况灵活使用，尽快使用嵌套，而不是拆分。 div相当于一个容器，由标签<div>始,</div>结束，在里面可以插入表格，文本等。 Css+div布局时，根据不同情况使用浮动。 框架应用有限，常用域交互网页，框架集与框架页的区别。