页面布局.ppt

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

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

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

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

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

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

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

7、文件名index.htm保存在网站中，图片全都按原名保存在网站的images文件夹中；（2）按样张设置上框架页面标题为Title，所有文字属性：黑体、粗斜体、大小50、藏青色、居中，设置左下框架页面标题为：分类，所有文字属性：黑体、粗体、大小24、藏青色、居中，设置右下框架页面标题为：封面，所有文字属性：楷体，粗体，大小40，红色，居中，并插入图片gift.gif和hy.gif，将hy.gif的大小设置为150*150，所有框架中的页面均设置背景图片：paper.jpg；（3）将左下框架中“办公用品”与“自己的姓名bg.htm”（15表格.ppt中要求创建）创建超级链接，并要求链接结果在右下框

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

9、排版的功能层还具有隐藏和显示功能很多设计网页动态效果时，也使用了层,01:53,华东师范大学计算中心,19,层的基本操作,层的创建 绘制层在【插入】工具栏选择【布局】选项卡，选择【标准】设计模式，使用【绘制层】按钮在【文档窗口】的【设计】视图中绘制层如果连续创建多个层，可以按住Ctrl键，同时拖曳鼠标来绘制层，只要不松开Ctrl键，就可以继续绘制新的层插入层菜单【插入】【布局对象】【层】，将在“文档窗口”中插入一个新层,01:53,华东师范大学计算中心,20,层的基本操作,层的选择 在【文档窗口】的【设计】视图中，将光标移至层的边框上，单击左键即可选中层菜单【窗口】【层】，调出【层】面板，在其

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

11、心,23,层的常用属性设置,选中层后，在【属性检查器】中可以精确指定其常用属性 层编号：用于指定一个名称，以便在【层】面板和 JavaScript 代码中标识该层层位置：【左】（左侧）和【上】（顶部）指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置宽和高：用来指定层的宽度和高度,01:53,华东师范大学计算中心,24,层的常用属性设置,Z轴：确定层的堆叠顺序。在浏览器中，编号较大的层能遮盖编号较小的层可见性：用来指定该层是否可见背景图像：指定层的背景图像背景颜色：指定层的背景颜色类：用来指定使用的CSS样式溢出：控制当层的内容超过层的指定大小时如何在浏览器中显示层剪辑：用以指定层的显

12、示区域，在剪辑以外的部分将被隐藏,01:53,华东师范大学计算中心,25,变化的图像举例,注意鼠标位置：鼠标移入时，显示girl图像，鼠标移出时，显示ecnu图像,01:53,华东师范大学计算中心,26,变化的图像举例,新建网页绘制层Layer1在Layer1中插入素材图片ecnu.gif设置层Layer1位置：左60px，右39px设置层Layer1大小：宽86px，高92px绘制层Layer2在Layer2中插入素材图片girl.gif,01:53,华东师范大学计算中心,27,变化的图像举例,设置层Layer2位置、大小与Layer1相同设置层Layer2隐藏不可见打开【窗口】菜单，调出【

13、行为】面板,对Layer1设置动作选中Layer1，在【行为】面板中，点击“添加行为”按钮，选择“显示-隐藏层”命令设置层Layer1隐藏、层Layer2显示。确定后，在【行为】面板中，修改行为事件为“onMouseOver”,01:53,华东师范大学计算中心,28,变化的图像举例,对Layer2设置动作选中Layer2，在【行为】面板中，点击“添加行为”按钮，选择“显示-隐藏层”命令设置层Layer2隐藏、层Layer1显示确定后，在【行为】面板中，修改行为事件为“onMouseOut”F12在浏览器中浏览，观察效果：鼠标移入时，显示girl图像，鼠标移出时，显示ecnu图像,01:53,华

14、东师范大学计算中心,29,4.网页布局规划,网页布局涉及的基本内容页面大小,根据显示器分辨率选择，一定要适应当前主流分辨率 整体造型及配色方案,使用相应的造型及配色方案，可以给用户协调一致的感觉页眉，通常定义网站标题、网站标志及广告等 页脚，通常包含网站设计信息、网站开发者信息及版权等文本，文本是网页的主体 图片的使用Flash动画，体积较小、画质清晰等优点，适合于网页 其他多媒体的使用,01:53,华东师范大学计算中心,30,网页布局的常用技术层叠样式表（CSS），能精确指定某些标签的外观等属性，也可以自定义某种样式以供页面元素使用。借助CSS技术，可以非常方便的统一网站所有页面的风格。当一

15、个文件包含了所有的样式信息时，样式表还可以减少下载的时间表格布局，使用表格可以非常方便的实现文字对齐、图文混排等布局问题。目前，大多数网站都使用了表格布局框架布局，框架布局将不同对象放置在不同页面中加以处理层布局，层就像是一个容器，各对象放置在层中布局。层不仅具有表格的平面布局功能，而且还可以在垂直方向上相互重叠，具有空间排版的功能,01:53,华东师范大学计算中心,31,使用CSS样式控制站点风格,层叠样式表(Cascading Style Sheets，CSS)是一系列格式设置规则，用来控制Web页面内容的外观使用CSS，可以将页面内容与表现形式分开页面内容（即 HTML代码）驻留在页面文

16、件自身中；用于定义表现形式的CSS样式规则可以保存在另一个文件中外部样式表文件，通常扩展名为CSS在本页面文档的其他部分通常放置在文件头部,01:53,华东师范大学计算中心,32,使用CSS样式控制站点风格,借助CSS技术，可以非常方便的统一网站所有页面的风格各网页使用统一的外部样式表文件CSS对样式的控制能力也比HTML代码强很多，允许设置许多HTML代码无法独自控制的属性,01:53,华东师范大学计算中心,33,CSS格式设置规则,CSS格式设置规则由两部分组成：选择器和声明选择器是用于标识格式元素声明用于具体定义元素样式,.masterfont-size:25pt;,选择器,声明,01:

17、53,华东师范大学计算中心,34,选择器类型可分为三类类选择器，可应用于任何HTML标签。使用类选择器的规则也被称为自定义CSS规则标签选择器，重新定义指定标签的外观样式。使用标签选择器的规则也被称为HTML 标签样式规则高级选择器，用于为某个标签组合或所有包含特定Id属性的标签定义格式设置声明由两部分组成：属性和值,名为myclassstyle的类选择器,针对超级链接的标签选择器,针对ID为table1的高级选择器,01:53,华东师范大学计算中心,35,CSS样式表存储位置,外部CSS样式表，存储在一个单独的外部CSS文件（扩展名为css）中在网页文件的头部中指定需要的外部CSS样式表文件

18、链接一个CSS样式文件可以被链接到站点中的一个或多个页面，可以方便地统一网站风格内部（或嵌入式）CSS 样式表，保存在在网页文件头部的标签内内联样式，直接定义在网页的每个具体的标签中Dreamweaver 8中不鼓励这种做法,01:53,华东师范大学计算中心,36,CSS样式冲突,将两个或更多CSS规则应用于同一对象时，这些规则可能会发生冲突并产生意外的结果浏览器按“就近原则”应用CSS规则如果应用于同一文本的两种规则的属性发生冲突，则浏览器显示最里面规则（离文本本身最近的规则）的属性如果有直接冲突，则类选择器样式的属性将覆盖标签选择器样式的属性 手动设置的HTML格式会覆盖通过CSS应用的格

19、式为使CSS规则能够控制段落格式，必须删除所有手动设置的HTML格式,01:53,华东师范大学计算中心,37,导航设计,常见导航条的设计有两种形式：横导航条与竖导航条。横导航条，一般置于网页顶部，这类导航条较常见，多用于网站的首页导航。在其基础上，又发展出下拉菜单式导航系统 竖导航条，一般置于网页左侧，多用于条目较多的网页。树型导航系统在此基础上发展而来，多用于分层列表式结构,01:53,华东师范大学计算中心,38,色彩搭配,光的三原色(RGB)HSB颜色模型。H表示色相，S代表饱和度，B代表亮度一般情况下，一个网站的标准色彩不宜超过3种，太多则让人觉得眼花缭乱,01:53,华东师范大学计算中

20、心,39,网页色彩搭配技巧,用一种颜色通过调整透明度或饱和度，产生新的颜色色彩统一，有层次感用两种互成对比色的色彩用一个色系背景色与前文的对比尽量大，也不以花纹复杂的图案作背景围绕网页的主题选颜色背景色不要太深，显得过于厚重，但黑色背景衬托亮丽文本或图案，会有另类感觉,01:53,华东师范大学计算中心,40,网页浏览原理及发布,浏览器（browser）Web服务器（Web Server）,01:53,华东师范大学计算中心,41,网站的发布需要正确的安装和配置Web服务器Windows中的Web服务器软件Internet信息服务（Internet Information Services，IIS

21、）目前很多大型网站（如网易）都提供了个人主页服务，不再需要每位用户都配置Web服务器。用户只需要将制作完成的网页传输到网站的个人目录下，即可供他人访问,01:53,华东师范大学计算中心,42,Internet信息服务1,安装完IIS后，打开【开始】菜单【控制面板】【管理工具】【Internet 信息服务】IIS中【默认Web站点】功能所使用的默认目录为C:Inetpubwwwroot将制作好的整个网站文件夹（如mywebsite）复制到其默认目录下即可或者可以在IIS中创建“虚拟目录”将其指向已经制作完成的网站文件夹,01:53,华东师范大学计算中心,43,Internet信息服务2,用户在浏

22、览器的地址栏中输入：http:/222.204.252.240/mywebsite/index.htm即可访问mywebsite网站222.204.252.240是Web服务器的IP地址index.htm文件表示需要访问的网页文件。,01:53,华东师范大学计算中心,44,作业与实验内容,作业07版教材P226,5.3.4 习题与思考07版教材P245,5.5.3习题与思考实验完成课堂PPT中的框架实验07版教材P367始实验5-2实验5-4实验5-506版实验指导P125实验18 框架网页的制作和网站的发布利用所学的布局知识，美化自己站点中的网页，并通过发布，使小组中的成员能够通过网络对其进行访问，访问小组其他成员的网站后，给自己的站点评分，将评分结果写入以自己学号姓名为文件名的txt文件中，放在站点根文件夹中。,