网页制作实用教程 教学课件 作者 张淑清第4章 网页元素的定位——表格、框架与层 .ppt

《网页制作实用教程 教学课件 作者 张淑清第4章 网页元素的定位——表格、框架与层 .ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第4章网页元素的定位——表格、框架与层教学内容：表格的创建与编辑、表格布局的应用、框架页的制作、层的应用。教学重点和难点：掌握表格及布局表格的应用。4.1页面规划概述制作页面的第一步是版面布局。就是在一定范围内合理安排、布置图像、文字等网页元素的位置，将他们按轻重缓急的秩序陈列出来，以达到装饰、美化页面的效果。4.1.1布局的样式网页的布局样式分类：1．“同”字型也称“国”字型或“口”字型结构布局，此种布局的最上边是网站的标题及横幅广告，左右分列两条内容，中间是主要部分，最下边的是版权区。该布局的优点是充分利用

2、版面，信息量大，与其它页面的链接多，切换方便。缺点是页面拥挤，不够灵活。如图：2．“T”字型结构布局也称“拐角型”结构布局，该页面顶部是标题及横幅广告，左侧通常放导航链接，右侧大部分空间用来显示网页的内容。此种布局的优点是页面结构清晰，主次分明，栏目扩充便利。缺点是规矩呆板，如果细节色彩上不加注意，很容易落入“看之无味”的感觉。如图：3．标题正文型这种类型最上面是标题或类似的一些东西，下面是正文。4．左右框架型这是一种左右分割屏幕的框架结构，一般在左面是导航链接，最上面有时会有一个小的标题或标志，右面通常显示左

3、边的链接内容。优点是结构清晰，自由活泼，可显示较多的文字、图像。缺点是将两部分有机的结合比较困难，不适合数据巨大的网站。5．上下框架型上下框架型与左右框架型类似，区别仅在于这里采用上下分割。6．综合框架型综合框架型是前述两种结构的结合，是相对复杂的一种框架结构，较为常见的是类似于“T”型结构，只是采用了框架结构。7．封面型也称“pop型”或自由型布局，通常以一张精美图片作为页面的设计中心，菜单栏目自由地摆放在页面上。其优点是页面令人赏心悦目，缺点是显示速度慢，文字信息量少，只适合以图像为主要内容的站点。8．Fl

4、ash型这种结构与封面型类似，只是这里采用了目前流行的Flash设计，与封面型不同的是，页面所表达的信息因Flash的强大功能而更为丰富，页面上不仅可以有文字、图像，还可以加入动画、视频与音频效果。9．变化型变化型是上面几种类型的综合与演变。4.1.2布局的选择如何选择布局，要看情况而定：如果内容非常多，就可以考虑“国字型”或“拐角型”；如果内容不算太多，只是说明性的东西较多，则可以考虑标题正文型。如果是一个企业网站或个人主页想展示企业形象或个人风采，封面型或Flash型是首选。综合变化型，是实用与创意才思的巧

5、妙结合。4.1.3布局的过程布局类型确定后，接下来就需要根据内容来调整页面的结构：1．设定页面的尺寸页面尺寸和显示器大小及分辨率有关，而且浏览器窗口也要占去一定的空间，剩下的才是页面显示范围。一般分辨率在800×600的情况下，页面的显示尺寸为780×428像素；分辨率在1024×768的情况下，页面的显示尺寸为1007×600。2．放置功能模块选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的。常见的模块有：网站名称/标志(logo),广告条(banner),主菜单(menu),新闻(

6、what‘snew),搜索(search),友情链接(links)，邮件列表(maillist)，计数器(count),版权(copyright)等3．布局细化与调整是指调整各功能模块上所加入的对象在各个方向上的相对大小。4.1.4布局的工具Dreamweaver8提供了四种方法用于规划和设计页面：表格、布局视图、层和框架。表格：用于页面的布局多于作为数据列表的使用。许多大型网站的页面都应用到了表格的定位。层：将需要定位的网页元素放入层，通过拖动层实现网页元素的定位。多用于运动元素的定位，与时间轴、行为结合，产

7、生页面特效。布局视图：源自表格布局操作，简化了使用表格进行网页布局的过程，避免了用表格布局时经常出现的一些如定位不准、不易调整等问题，是初学者构建页面最简单的方法。框架：是另一种重要的网页元素定位方法，是实现在浏览器窗口中显示多个Web文件的网页技术。框架常用于导航页设计。4.2表格布局一般情况下网页元素主要通过表格进行定位。在Dreamweaver8中，表格分为两种形态：表格标准模式和表格布局模式。4.2.1表格与布局表格的基本操作1．表格标准视图（1）创建表格方法：①选择菜单“插入

8、表格”命令②在常用工具栏

9、中单击“表格”按钮，利用打开的“表格”对话框来插入表格（2）表格属性了解或修改表格的属性，必须先选定表格。选定整个表格，可执行下列操作之一：光标移动到表格的左上角或表格边缘，单击，至表格四周出现控制手柄。单击表格区域任一位置，再单击文档窗左下角的标签选择器中的