《网页制作实用教程 教学课件 ppt 作者 张淑清 第4章 网页元素的定位——表格、框架与层 》由会员分享，可在线阅读，更多相关《网页制作实用教程 教学课件 ppt 作者 张淑清 第4章 网页元素的定位——表格、框架与层 （37页珍藏版）》请在金锄头文库上搜索。
1、第4章 网页元素的定位表格、框架与层,教学内容： 表格的创建与编辑、表格布局的应用、框架页的制作、层的应用。 教学重点和难点： 掌握表格及布局表格的应用。,4.1页面规划概述,制作页面的第一步是版面布局。就是在一定范围内合理安排、布置图像、文字等网页元素的位置，将他们按轻重缓急的秩序陈列出来，以达到装饰、美化页面的效果。 4.1.1布局的样式 网页的布局样式分类： 1“同”字型 也称“国”字型或“口”字型结构布局，此种布局的最上边是网站的标题及横幅广告，左右分列两条内容，中间是主要部分，最下边的是版权区 。该布局的优点是充分利用版面，信息量大，与其它页面的链接多，切换方便。缺点是页面拥挤，不够
2、灵活。 如图：,2“T”字型结构布局 也称“拐角型” 结构布局，该页面顶部是标题及横幅广告，左侧通常放导航链接，右侧大部分空间用来显示网页的内容。此种布局的优点是页面结构清晰，主次分明，栏目扩充便利。缺点是规矩呆板，如果细节色彩上不加注意，很容易落入“看之无味”的感觉。如图：,3标题正文型 这种类型最上面是标题或类似的一些东西，下面是正文。 4左右框架型 这是一种左右分割屏幕的框架结构，一般在左面是导航链接，最上面有时会有一个小的标题或标志，右面通常显示左边的链接内容。优点是结构清晰，自由活泼，可显示较多的文字、图像。缺点是将两部分有机的结合比较困难，不适合数据巨大的网站。,5上下框架型 上下
3、框架型与左右框架型类似，区别仅在于这里采用上下分割。 6综合框架型 综合框架型是前述两种结构的结合，是相对复杂的一种框架结构，较为常见的是类似于“T”型结构，只是采用了框架结构。 7封面型 也称“pop型”或自由型布局，通常以一张精美图片作为页面的设计中心，菜单栏目自由地摆放在页面上。其优点是页面令人赏心悦目，缺点是显示速度慢，文字信息量少，只适合以图像为主要内容的站点。 8Flash型 这种结构与封面型类似，只是这里采用了目前流行的Flash设计，与封面型不同的是，页面所表达的信息因Flash的强大功能而更为丰富，页面上不仅可以有文字、图像，还可以加入动画、视频与音频效果。 9变化型 变化型
4、是上面几种类型的综合与演变。,4.1.2 布局的选择 如何选择布局，要看情况而定：如果内容非常多，就可以考虑“国字型”或“拐角型”；如果内容不算太多，只是说明性的东西较多，则可以考虑标题正文型。如果是一个企业网站或个人主页想展示企业形象或个人风采，封面型或Flash型是首选。综合变化型，是实用与创意才思的巧妙结合。,4.1.3 布局的过程 布局类型确定后，接下来就需要根据内容来调整页面的结构： 1设定页面的尺寸 页面尺寸和显示器大小及分辨率有关，而且浏览器窗口也要占去一定的空间，剩下的才是页面显示范围。一般分辨率在800600的情况下，页面的显示尺寸为780428像素；分辨率在1024768的
5、情况下，页面的显示尺寸为1007600。,2放置功能模块 选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的。常见的模块有：网站名称/标志(logo), 广告条(banner), 主菜单(menu),新闻(whats new), 搜索(search), 友情链接(links)，邮件列表(maillist)，计数器(count), 版权(copyright)等 3布局细化与调整 是指调整各功能模块上所加入的对象在各个方向上的相对大小。,4.1.4 布局的工具 Dreamweaver 8提供了四种方法用于规划和设计页面：表格、布局视图、层和框架。 表格：用于页面的布局多于作
6、为数据列表的使用。许 多大型网站的页面都应用到了表格的定位。 层：将需要定位的网页元素放入层，通过拖动层实现网页元素的定位。多用于运动元素的定位，与时间轴、行为结合，产生页面特效。 布局视图：源自表格布局操作，简化了使用表格进行网页布局的过程，避免了用表格布局时经常出现的一些如定位不准、不易调整等问题，是初学者构建页面最简单的方法。 框架：是另一种重要的网页元素定位方法，是实现在浏览器窗口中显示多个Web文件的网页技术。框架常用于导航页设计。,4.2 表格布局,一般情况下网页元素主要通过表格进行定位。在Dreamweaver 8中，表格分为两种形态：表格标准模式和表格布局模式。 4.2.1表格
7、与布局表格的基本操作 1表格标准视图 （1）创建表格 方法： 选择菜单“插入 | 表格”命令 在常用工具栏中单击“表格”按钮，利用打开的“表格”对话框来插入表格,（2）表格属性 了解或修改表格的属性，必须先选定表格。 选定整个表格，可执行下列操作之一： 光标移动到表格的左上角或表格边缘，单击，至表格四周出现控制手柄。 单击表格区域任一位置，再单击文档窗左下角的标签选择器中的标签。 （3）表格元素属性 要了解或修改表格元素的属性，必须先选定表格元素。选定表格元素有下列图解所示的操作方法 ： 用箭头选定表行或表列 拖动鼠标选定表行或表列 按下Ctrl键的同时用鼠标单击单元格，可以选择不连续的单元格
8、；单击单元格或单击标记选择器标记可选择表行或表格单元格,2表格布局视图 （1）绘制布局表格与布局单元格 使用布局视图，必须切换到布局视图中，操作是：选择菜单命令“插入 | 布局对象”，或在布局工具栏中单击“布局”按钮。 这时，就可以创建布局表格，然后在布局表格内添加布局单元格。 布局表格与布局单元格的绘制方法：在布局模式下，单击“绘制表格/单元格”按钮，在页面上出现 “+”形光标指针，即可拖动鼠标绘制表格，,（2）选择布局表格与布局单元格 执行以下操作之一： 将光标移动到布局单元格的边框外，当单元格改变时，单击，此时布局单元格周围出现8个控制点，表明布局单元格被选中。要选择绘制的布局表格，用鼠
9、标单击布局表格的灰色区域。 按Ctrl键的同时用鼠标单击要选择的布局单元格或布局表格。 单击标签选择器的、标签。,（3）将内容添加到布局单元格中 在添加内容之前，必须先创建布局单元格。然后 单击要添加内容的单元格，然后键入文本或插入其他 内容。 若要将文本添加到布局单元格，可执行以下操作： 将插入点放置在要添加文本的布局单元格中。 在单元格中键入文本；或者粘贴从其他文档复制的文本。 若要将图像添加到布局单元格中，可执行以下操作： 将插入点放置在要添加图像的布局单元格中。 单击“插入”面板“常用”分类中的 （插入图像）按钮；或选择菜单命令“插入 | 图像”。 在弹出的“选择图像”对话框中，选择一
10、个图像文件。,（4）清除单元格高度 一旦创建了布局单元格，Dreamweaver 8将自动指定单元格的高度，而在单元格插入了内容之后，可能不再需要指定的高度，可以从表格中清除单元格高度。 清除单元格高度，请执行以下操作之一： 在布局表格上单击标尺上的向下箭头，从弹出的菜单中选择“清除所有高度”选项。 选中布局表格，然后在布局属性面板中单击 （清除行高）按钮。,（5）移动和调整布局单元格和布局表格 移动布局表格或布局单元格，可执行以下操作方法之 一： 拖动布局表格标签或当鼠标光标为空心箭头时拖动表格边线。 选中布局表格或布局单元格，鼠标移至其边框上，当鼠标光标为空心箭头时按住鼠标左键拖动。 选中
11、布局表格或布局单元格，按键盘方向键，每次移动距离为1个像素；若按住Shft+方向键，则每次移动距离为10个像素。 调整布局表格和布局单元格尺寸的方法是： 选中布局表格或布局单元格，鼠标移至边或角控点上，按照箭头的方向调整其尺寸。,（6）设置布局宽度 在布局模式中，有固定宽度和自动伸展两种类型的宽度。固定宽度显示的是具体宽度像数值；自动伸展宽度与文档窗口大小有关，显示的是波浪线。两种模式可以相互转换 。 在默认情况下，布局按固定宽度显示。 （7）间隔图像 间隔图像实际就是透明的GIF图像。用于控制自动伸展表格中的间距，大小为1像素。 间隔图像可以在每个列中手动插入和删除。 添加间隔图像的方法是：
12、 鼠标指向列下面的三角符号。 单击，出现下拉式菜单。 选择“添加间隔图像”项。,（8）设置格式 选定布局单元格后，可以从“属性”面板中设置单元格以下属性： “固定”：设定单元格宽度的具体像素值。 “自动伸展”：设置布局单元格的宽度为自动伸缩模式。 “高”：设置单元格高度的具体像素值。 “背景颜色”：设置单元格的背景颜色。 “水平”：设置单元格的水平对齐方式。 “垂直”：设置单元格的垂直对齐方式。 “不换行”：设置单元格的内容在一行显示。 “类”：为选中对象加入CSS样式。,选定布局表格后，可以从“属性”面板中设置布局表格以下属性： “固定”：设置表格宽度的具体像素值。 “自动伸展”：设置布局表
13、格的宽度为自动伸缩模式。 “高”：设置表格高度的具体像素值。 “背景颜色”：设置表格的背景颜色。 “填充”：设置单元格的内部空间，单位为像素。 “间距”：设置单元格之间的空间，单位为像素。 ：删除行高。 ：使单元格宽度一致。 ：删除所有间隔图像。 ：删除嵌套。 类：加入CSS样式,4.2.3 表格的应用技巧 1使用表格还是单元格 在网页中使用表格，特别是嵌套表格，其代价是降低页面的下载速度，因此一般情况下不使用嵌套表格，而是使用单元格来代替表格。单元格之间有一个配合问题，修改一个单元格的属性，很可能会牵扯到其它的单元格。所以，需要综合考虑。 2使用百分比还是像素 一般，网页最外层表格，通常用像
14、素作为度量单位，而嵌套表格，则百分比和像素都可以。,3使用一个大表格还是多个横向表格 版面布局时可使用多个横向表格，这样可以做到下载一层，就马上显示一层，提高下载速度，免去浏览者等待之苦。,4.3框架布局,4.3.1什么是框架 框架是网页制作中另一种重要的布局方法，其主要用于在一个浏览器窗口中显示多个HTML文档，通过构建这些文档之间的相互关系，实现文档导航、文档浏览以及文档操作等目的。 一个框架Web页由框架集、组内各框架、各框架内的网页等组成。,4.3.2框架的基本操作 创建框架集 在Dreamweaver 8中常用创建框架集方法有： 使用“文件 | 新建”命令创建框架集 在“插入”面板的
15、“布局”选项中，单击框架按钮，然后在弹出的下拉菜单中，选择需要的框架；或者拖动所需要的按钮到文档窗口中来创建框架。 在“文档”窗口中，确定要插入框架的位置，然后单击菜单命令“插入 | HTML | 框架”，在弹出的子菜单中选择需要的框架格式。 单击菜单命令“修改 | 框架集”，在弹出的子菜单中，选择需要的框架格式。 【提示】 在创建框架前，为了使框架边框在文档窗口中可见，可单击菜单命令“查看 | 可视化助理 | 框架边框”,2拆分和删除框架 按住Alt键任意拖曳一条框架边框，即可垂直或水平分割文档或已有的框架，即拆分出新的框架。 任意拖曳框架边框离开页面或拖动到其他框架的边框上，即可删除此框架
16、。 3选取框架 使用“框架面板”可方便地对框架和框架集进行选取。“框架面板”的打开方法是：单击菜单命令“窗口 | 框架”（或按Shift+F2键）。 选取框架集的方法：在框架面板上，单击最外边线，可选中整个框架集。或直接单击文档窗口的任意框架边线，也可选取框架集。选中的框架在文档窗中出现虚线。 选取框架的方法：在“框架”面板上，单击要选取框架的内部任一位置（注意不要单击边线），同样被选取的框架在文档窗中出现虚线。,4设置框架集属性 选中框架集后，可进行以下属性的设置： “边框”:设置文档在浏览器中被浏览时是否显示框架边框。可选项： “是”显示， “否”不显示， “默认”由用户的浏览器决定是否显示。 “边框宽度”：输入一个数字以指定当前框架集的边框宽度。输入0，指定无边框。 “边框颜色”：输入颜色的十六进制值，或使用拾色器为边框选择颜色。 “（行/列）值”：用来输入选定框架行或框架列的宽度。 “单位”：指定所选择的行或列是以像素为单位的固定大小，还是显示为浏览器窗口的百分比，还是扩展或缩小
