面布局.ppt

《面布局.ppt》由会员分享，可在线阅读，更多相关《面布局.ppt（44页珍藏版）》请在三一文库上搜索。

1、19:14,华东师范大学计算中心,1,5.3 页面布局,1. 用表格实现页面布局 2. 用框架布局页面 3. 层的使用 4. 页面布局原则 5. 网页浏览原理及发布,19:14,华东师范大学计算中心,2,2. 用框架布局页面,框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分（其他框架）不同的HTML文档 框架集是一个HTML文件，它定义一组框架的布局和属性，包括框架的数量、框架的大小、框架的位置以及框架中初始页面的统一资源定位符（URL） 框架集网页文件本身不显示在浏览器中，框架集网页只是向浏览器说明如何显示一组框架，以及这些框架中应该显示哪些文档 为了使布局更多样，框架集可以嵌

2、套,19:14,华东师范大学计算中心,3,框架的概念,分割Web页面，每一部分是一个独立页面 漫游 链接点与目标页面 框架集合 组合了集合中所有页面信息的一个单独页面，具有与服务器通信的信息，使集合中的页面显示出来。,19:14,华东师范大学计算中心,4,框架集网页示例,19:14,华东师范大学计算中心,5,框架集HTML标记, 、,19:14,华东师范大学计算中心,6,创建框架集网页,在创建框架集网页时 各框架中网页文件可能已经存在（需要在创建框架集网页完成后，对各框架分别指定其对应的网页文件） 也可以一同创建（创建时自动指定了各框架分别对应的网页文件） 菜单【文件】【新建】，弹出【新建文档

3、】对话框,19:14,华东师范大学计算中心,7,在弹出的【新建文档】对话框中选择【常用】选项卡，【类别】为框架集，选择与设计最接近的一种框架集类型,19:14,华东师范大学计算中心,8,单击【创建】按钮后，会弹出【框架标签辅助功能属性】对话框，在其中设置各框架标题。 注意其中框架名，在指定超级链接的目标时，可能会用到。,19:14,华东师范大学计算中心,9,保存框架网页,在浏览器中浏览框架集网页前，需要先保存框架集文件及要在其中显示的所有网页文档 选中框架集，选择菜单【文件】【保存框架集】或【框架集另存为】，保存框架集文件 将光标置于某一框架页面，选择菜单【文件】【保存框架】或【框架另存为】，

4、保存该框架文件 选择菜单【文件】【保存全部】，将保存与该框架集关联的所有文件,19:14,华东师范大学计算中心,10,修改框架布局,拖曳框架边框线 【修改】【框架页】菜单命令 拆分上、下、左、右框架,19:14,华东师范大学计算中心,11,编辑框架,删除框架 将光标移至框架边框，将框架边框拖离页面或拖曳到父框架的边框上，即可删除。 如果该框架中指定的网页文件也不再需要，可通过【文件】面板将该网页文件一同删除。,19:14,华东师范大学计算中心,12,编辑框架,设置框架集属性 菜单【窗口】【框架】，调出【框架】面板 较细的边框包围的部分是框架，较粗边框包围的是框架集，在【框架】面板中点击较粗边框

5、即可选中框架集 选中后，在【属性检查器】中可以详细设置框架集的各种属性,19:14,华东师范大学计算中心,13,编辑框架,设置框架属性 使用类似选中框架集的方法选中框架；也可以在【文档窗口】中，用Alt键鼠标单击框架中网页，选中框架 选中框架后，使用【属性检查器】详细设置框架的各属性,19:14,华东师范大学计算中心,14,框架中的链接设置,某框架中超链接所指向的网页文件，能在另一框架中显示，需要设置超链接的链接目标 选中需要创建链接的文本或对象 在【属性检查器】中输入其所指向的【链接】，【目标】弹出式菜单中选择链接目标在其中显示的方式,19:14,华东师范大学计算中心,15,框架中的链接设置

6、,目标选项的含义 _blank：总在新的浏览器中打开链接文档 _parent：在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集 _self：在当前框架中打开链接，同时替换该框架中内容 _top：在当前浏览器窗口中打开链接的文档，同时替换所有的框架 各框架名：在指定框架名的框架中打开链接的文档，同时替换原框架中内容,19:14,华东师范大学计算中心,16,练习,建立如样张所示的网页，具体要求： （1）新建如样张所示的框架页面，页面标题为：网上超市，设置上框架初始高度为80像素，在浏览时可调整高度，初始页面为sh.htm，下方左框架初始页面为zuo.htm，宽度设置为160象素，看不

7、到滚动条，下方右框架初始页面为you.htm，可能会看到滚动条，整个页面以文件名index.htm保存在网站中，图片全都按原名保存在网站的images文件夹中； （2）按样张设置上框架页面标题为Title，所有文字属性：黑体、粗斜体、大小50、藏青色、居中，设置左下框架页面标题为：分类，所有文字属性：黑体、粗体、大小24、藏青色、居中，设置右下框架页面标题为：封面，所有文字属性：楷体，粗体，大小40，红色，居中，并插入图片gift.gif和hy.gif，将hy.gif的大小设置为150*150，所有框架中的页面均设置背景图片：paper.jpg； （3）将左下框架中“办公用品”与“自己的姓名b

8、g.htm”（15表格.ppt中要求创建）创建超级链接，并要求链接结果在右下框架中显示，将“各种食品”与“自己姓名dc.htm” （16表单.ppt中要求创建）创建超级链接，并能在新窗口中打开，将“封面”与you.htm创建超级链接，并能在右下框架中显示结果，单击“征求意见”后，能给自己的邮箱发送电子邮件；打开“自己的姓名bg.htm” ，将文字“返回”与index.htm创建超级链接，保存修改结果。,19:14,华东师范大学计算中心,17,样张,19:14,华东师范大学计算中心,18,3. 层的使用,层对应的HTML标签为 可以把层看作是一个容器，各对象放置在层中布局，通过层可以将网页中的对

9、象布局到任意位置 层不仅具有表格的平面布局功能，而且还可以在垂直方向上相互重叠，具有空间排版的功能 层还具有隐藏和显示功能 很多设计网页动态效果时，也使用了层,19:14,华东师范大学计算中心,19,层的基本操作,层的创建 绘制层 在【插入】工具栏选择【布局】选项卡，选择【标准】设计模式，使用【绘制层】按钮在【文档窗口】的【设计】视图中绘制层 如果连续创建多个层，可以按住Ctrl键，同时拖曳鼠标来绘制层，只要不松开Ctrl键，就可以继续绘制新的层 插入层 菜单【插入】【布局对象】【层】，将在“文档窗口”中插入一个新层,19:14,华东师范大学计算中心,20,层的基本操作,层的选择 在【文档窗口

10、】的【设计】视图中，将光标移至层的边框上，单击左键即可选中层 菜单【窗口】【层】，调出【层】面板，在其中方便的选择层 用Shift键可以选择多个层,19:14,华东师范大学计算中心,21,层的基本操作,调整层大小 【文档窗口】的【设计】视图中，选中层并将光标移至层边框，直接拖曳调整 如果需要精确指定层大小，可以选中层后，在【属性检查器】中直接输入大小 如果需要同时指定多个层大小，可以选中多个层后，在【属性检查器】中直接输入大小即可同时改变多个层大小,19:14,华东师范大学计算中心,22,层的基本操作,移动层 方法类似调整层大小（直接拖曳、精确指定） 对齐层 选择需要对齐的层（选择时要注意最后

11、选择对齐的基准层） 然后打开菜单【修改】【排列顺序】，在弹出菜单中选择一个对齐选项,19:14,华东师范大学计算中心,23,层的常用属性设置,选中层后，在【属性检查器】中可以精确指定其常用属性 层编号：用于指定一个名称，以便在【层】面板和 JavaScript 代码中标识该层 层位置：【左】（左侧）和【上】（顶部）指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置 宽和高：用来指定层的宽度和高度,19:14,华东师范大学计算中心,24,层的常用属性设置,Z轴：确定层的堆叠顺序。在浏览器中，编号较大的层能遮盖编号较小的层 可见性：用来指定该层是否可见 背景图像：指定层的背景图像 背景颜色

12、：指定层的背景颜色 类：用来指定使用的CSS样式 溢出：控制当层的内容超过层的指定大小时如何在浏览器中显示层 剪辑：用以指定层的显示区域，在剪辑以外的部分将被隐藏,19:14,华东师范大学计算中心,25,变化的图像举例,注意鼠标位置：鼠标移入时，显示girl图像，鼠标移出时，显示ecnu图像,19:14,华东师范大学计算中心,26,变化的图像举例,新建网页 绘制层Layer1 在Layer1中插入素材图片ecnu.gif 设置层Layer1位置：左60px，右39px 设置层Layer1大小：宽86px，高92px 绘制层Layer2 在Layer2中插入素材图片girl.gif,19:14,

13、华东师范大学计算中心,27,变化的图像举例,设置层Layer2位置、大小与Layer1相同 设置层Layer2隐藏不可见 打开【窗口】菜单，调出【行为】面板,对Layer1设置动作 选中Layer1，在【行为】面板中，点击“添加行为”按钮，选择“显示-隐藏层”命令 设置层Layer1隐藏、层Layer2显示。 确定后，在【行为】面板中，修改行为事件为“onMouseOver”,19:14,华东师范大学计算中心,28,变化的图像举例,对Layer2设置动作 选中Layer2，在【行为】面板中，点击“添加行为”按钮，选择“显示-隐藏层”命令 设置层Layer2隐藏、层Layer1显示 确定后，在【

14、行为】面板中，修改行为事件为“onMouseOut” F12在浏览器中浏览，观察效果：鼠标移入时，显示girl图像，鼠标移出时，显示ecnu图像,19:14,华东师范大学计算中心,29,4.网页布局规划,网页布局涉及的基本内容 页面大小 ,根据显示器分辨率选择，一定要适应当前主流分辨率 整体造型及配色方案 ,使用相应的造型及配色方案，可以给用户协调一致的感觉 页眉 ，通常定义网站标题、网站标志及广告等 页脚 ，通常包含网站设计信息、网站开发者信息及版权等 文本 ，文本是网页的主体 图片的使用 Flash动画 ，体积较小、画质清晰等优点，适合于网页 其他多媒体的使用,19:14,华东师范大学计算

15、中心,30,网页布局的常用技术 层叠样式表（CSS） ，能精确指定某些标签的外观等属性，也可以自定义某种样式以供页面元素使用。借助CSS技术，可以非常方便的统一网站所有页面的风格。当一个文件包含了所有的样式信息时，样式表还可以减少下载的时间 表格布局 ，使用表格可以非常方便的实现文字对齐、图文混排等布局问题。目前，大多数网站都使用了表格布局 框架布局 ，框架布局将不同对象放置在不同页面中加以处理 层布局 ，层就像是一个容器，各对象放置在层中布局。层不仅具有表格的平面布局功能，而且还可以在垂直方向上相互重叠，具有空间排版的功能,19:14,华东师范大学计算中心,31,使用CSS样式控制站点风格,

16、层叠样式表 (Cascading Style Sheets，CSS) 是一系列格式设置规则，用来控制Web页面内容的外观 使用CSS，可以将页面内容与表现形式分开 页面内容（即 HTML代码）驻留在页面文件自身中； 用于定义表现形式的CSS样式规则可以保存在另一个文件中 外部样式表文件，通常扩展名为CSS 在本页面文档的其他部分 通常放置在文件头部,19:14,华东师范大学计算中心,32,使用CSS样式控制站点风格,借助CSS技术，可以非常方便的统一网站所有页面的风格 各网页使用统一的外部样式表文件 CSS对样式的控制能力也比HTML代码强很多，允许设置许多HTML代码无法独自控制的属性,19

17、:14,华东师范大学计算中心,33,CSS格式设置规则,CSS格式设置规则由两部分组成：选择器和声明 选择器是用于标识格式元素 声明用于具体定义元素样式,.master font-size: 25pt; ,选择器,声明,19:14,华东师范大学计算中心,34,选择器类型可分为三类 类选择器，可应用于任何HTML标签。使用类选择器的规则也被称为自定义CSS规则 标签选择器，重新定义指定标签的外观样式。使用标签选择器的规则也被称为HTML 标签样式规则 高级选择器，用于为某个标签组合或所有包含特定Id属性的标签定义格式设置 声明由两部分组成：属性和值,名为myclassstyle的类选择器,针对超

18、级链接的标签选择器,针对ID为table1的高级选择器,19:14,华东师范大学计算中心,35,CSS样式表存储位置,外部CSS样式表，存储在一个单独的外部CSS文件（扩展名为css）中 在网页文件的头部中指定需要的外部CSS样式表文件链接 一个CSS样式文件可以被链接到站点中的一个或多个页面，可以方便地统一网站风格 内部（或嵌入式）CSS 样式表，保存在在网页文件头部的标签内 内联样式，直接定义在网页的每个具体的标签中 Dreamweaver 8中不鼓励这种做法,19:14,华东师范大学计算中心,36,CSS样式冲突,将两个或更多CSS规则应用于同一对象时，这些规则可能会发生冲突并产生意外的

19、结果 浏览器按“就近原则”应用CSS规则 如果应用于同一文本的两种规则的属性发生冲突，则浏览器显示最里面规则（离文本本身最近的规则）的属性 如果有直接冲突，则类选择器样式的属性将覆盖标签选择器样式的属性 手动设置的HTML格式会覆盖通过CSS应用的格式 为使CSS规则能够控制段落格式，必须删除所有手动设置的HTML格式,19:14,华东师范大学计算中心,37,导航设计,常见导航条的设计有两种形式：横导航条与竖导航条。 横导航条，一般置于网页顶部，这类导航条较常见，多用于网站的首页导航。在其基础上，又发展出下拉菜单式导航系统 竖导航条，一般置于网页左侧，多用于条目较多的网页。树型导航系统在此基础

20、上发展而来，多用于分层列表式结构,19:14,华东师范大学计算中心,38,色彩搭配,光的三原色 (RGB) HSB颜色模型。H表示色相，S代表饱和度，B代表亮度 一般情况下，一个网站的标准色彩不宜超过3种，太多则让人觉得眼花缭乱,19:14,华东师范大学计算中心,39,网页色彩搭配技巧,用一种颜色 通过调整透明度或饱和度，产生新的颜色 色彩统一，有层次感 用两种互成对比色的色彩 用一个色系 背景色与前文的对比尽量大，也不以花纹复杂的图案作背景 围绕网页的主题选颜色 背景色不要太深，显得过于厚重，但黑色背景衬托亮丽文本或图案，会有另类感觉,19:14,华东师范大学计算中心,40,网页浏览原理及发

21、布,浏览器（browser） Web服务器（Web Server）,19:14,华东师范大学计算中心,41,网站的发布需要正确的安装和配置Web服务器 Windows中的Web服务器软件 Internet信息服务（Internet Information Services，IIS） 目前很多大型网站（如网易）都提供了个人主页服务，不再需要每位用户都配置Web服务器。用户只需要将制作完成的网页传输到网站的个人目录下，即可供他人访问,19:14,华东师范大学计算中心,42,Internet信息服务1,安装完IIS后，打开【开始】菜单【控制面板】【管理工具】【Internet 信息服务】 IIS中【

22、默认Web站点】功能所使用的默认目录为C:Inetpubwwwroot 将制作好的整个网站文件夹（如mywebsite）复制到其默认目录下即可 或者可以在IIS中创建“虚拟目录”将其指向已经制作完成的网站文件夹,19:14,华东师范大学计算中心,43,Internet信息服务2,用户在浏览器的地址栏中输入：http:/222.204.252.240/mywebsite/index.htm即可访问mywebsite网站 222.204.252.240是Web服务器的IP地址 index.htm文件表示需要访问的网页文件。,19:14,华东师范大学计算中心,44,作业与实验内容,作业 07版教材P226, 5.3.4 习题与思考 07版教材P245, 5.5.3习题与思考 实验 完成课堂PPT中的框架实验 07版教材P367始 实验5-2 实验5-4 实验5-5 06版实验指导P125 实验18 框架网页的制作和网站的发布 利用所学的布局知识，美化自己站点中的网页，并通过发布，使小组中的成员能够通过网络对其进行访问，访问小组其他成员的网站后，给自己的站点评分，将评分结果写入以自己学号姓名为文件名的txt文件中，放在站点根文件夹中。,