网页元素的定位——表格、框架与层.ppt

网页元素的定位——表格、框架与层 教学内容： 表格的创建与编辑、表格布局的应用、框架页的制作、层的应用。 教学重点和难点： 掌握表格及布局表格的应用。 4.1页面规划概述 制作页面的第一步是版面布局。就是在一定范围内合理安排、布置图像、文字等网页元素的位置，将他们按轻重缓急的秩序陈列出来，以达到装饰、美化页面的效果。 4.1.1布局的样式 网页的布局样式分类： 1．“同”字型 也称“国”字型或“口”字型结构布局，此种布局的最上边是网站的标题及横幅广告，左右分列两条内容，中间是主要部分，最下边的是版权区 。该布局的优点是充分利用版面，信息量大，与其它页面的链接多，切换方便。缺点是页面拥挤，不够灵活。 如图： 2．“T”字型结构布局 也称“拐角型” 结构布局，该页面顶部是标题及横幅广告，左侧通常放导航链接，右侧大部分空间用来显示网页的内容。此种布局的优点是页面结构清晰，主次分明，栏目扩充便利。缺点是规矩呆板，如果细节色彩上不加注意，很容易落入“看之无味”的感觉。如图： 3．标题正文型 这种类型最上面是标题或类似的一些东西，下面是正文。 4．左右框架型 这是一种左右分割屏幕的框架结构，一般在左面是导航链接，最上面有时会有一个小的标题或标志，右面通常显示左边的链接内容。优点是结构清晰，自由活泼，可显示较多的文字、图像。缺点是将两部分有机的结合比较困难，不适合数据巨大的网站。 5．上下框架型 上下框架型与左右框架型类似，区别仅在于这里采用上下分割。 6．综合框架型 综合框架型是前述两种结构的结合，是相对复杂的一种框架结构，较为常见的是类似于“T”型结构，只是采用了框架结构。 7．封面型 也称“pop型”或自由型布局，通常以一张精美图片作为页面的设计中心，菜单栏目自由地摆放在页面上。其优点是页面令人赏心悦目，缺点是显示速度慢，文字信息量少，只适合以图像为主要内容的站点。 8．Flash型 这种结构与封面型类似，只是这里采用了目前流行的Flash设计，与封面型不同的是，页面所表达的信息因Flash的强大功能而更为丰富，页面上不仅可以有文字、图像，还可以加入动画、视频与音频效果。 9．变化型 变化型是上面几种类型的综合与演变。 4.1.2 布局的选择 如何选择布局，要看情况而定：如果内容非常多，就可以考虑“国字型”或“拐角型”；如果内容不算太多，只是说明性的东西较多，则可以考虑标题正文型。如果是一个企业网站或个人主页想展示企业形象或个人风采，封面型或Flash型是首选。综合变化型，是实用与创意才思的巧妙结合。 4.1.3 布局的过程 布局类型确定后，接下来就需要根据内容来调整页面的结构： 1．设定页面的尺寸 页面尺寸和显示器大小及分辨率有关，而且浏览器窗口也要占去一定的空间，剩下的才是页面显示范围。一般分辨率在800×600的情况下，页面的显示尺寸为780×428像素；分辨率在1024×768的情况下，页面的显示尺寸为1007×600。 2．放置功能模块 选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的。常见的模块有：网站名称/标志(logo), 广告条(banner), 主菜单(menu),新闻(what‘s new), 搜索(search), 友情链接(links)，邮件列表(maillist)，计数器(count), 版权(copyright)等 3．布局细化与调整 是指调整各功能模块上所加入的对象在各个方向上的相对大小。 4.1.4 布局的工具 Dreamweaver 8提供了四种方法用于规划和设计页面：表格、布局视图、层和框架。 表格：用于页面的布局多于作为数据列表的使用。许 多大型网站的页面都应用到了表格的定位。 层：将需要定位的网页元素放入层，通过拖动层实现网页元素的定位。多用于运动元素的定位，与时间轴、行为结合，产生页面特效。 布局视图：源自表格布局操作，简化了使用表格进行网页布局的过程，避免了用表格布局时经常出现的一些如定位不准、不易调整等问题，是初学者构建页面最简单的方法。 框架：是另一种重要的网页元素定位方法，是实现在浏览器窗口中显示多个Web文件的网页技术。框架常用于导航页设计。 4.2 表格布局 一般情况下网页元素主要通过表格进行定位。在Dreamweaver 8中，表格分为两种形态：表格标准模式和表格布局模式。 4.2.1表格与布局表格的基本操作 1．表格标准视图 （1）创建表格 方法： ①选择菜单“插入 | 表格”命令 ②在常用工具栏中单击“表格”按钮，利用打开的“表格”对话框来插入表格 （2）表