第4章-网页布局-表格.doc

《第4章-网页布局-表格.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章网页的版面设计和布局第4章网页的版面设计和布局 在确定了网站的主题和结构之后，就可以开始着手网页的制作了。为了提高网页的视觉吸引力，有效地传达信息，给人以审美的感受，在制作网页之前，进行网页的设计和布局就显得尤为重要。网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计原则。但是，由于表现形式、运行方式和社会功能的不同，网页设计和布局又有其自身的规律。本章将探讨如何对网页的版面进行设计和布局。4.1网页的版面设计一个成功的网页版面首先需要优秀的设计，然后辅以优秀的制作。设计是网页的核心和灵魂，一个相同的设计方案可以有多种制作表现的方式。网页的主

2、要目的不仅是向人们传递它的信息，同时也向获取这些信息的人们传递着自己蕴含的文化。例如：众所周知的新浪网、网易、谷歌等网站的页面设计都非常朴实，没有太多花哨的效果，但它们的页面只需要看一眼就能够让人马上识别它是谁，就是因为它们不仅向访问者传达了网页的信息，更显示出自己独特的风格。网页版面的设计，是技术与艺术的结合，内容与形式的统一。设计布局合理、美观大方的页面是每个网页设计者的目标。目前，网页排版布局常用的技术一般有以下几种：1．使用CSS控制整体格式 使用CSS（Cascading StyleSheets，层叠样式表）布局技术能完全精确的定位文本和图片。它最大的特点是可以使网页的表现和版面结

3、构相脱离，大量减少网页中重复使用的HTML代码，从而减小网页的体积，这对于在网上传输非常有利。同时CSS可以使用外接*.CSS文件的方法使一次性修改大批量的网页成为可能，这就意味着用户可以经常改变网站的界面（包括文字、色彩、背景图片等），而每次只需要上传一个体积很小的CSS文件就行了。目前，CSS运用的好坏也是判断一个网站优秀与否的重要指标。2. 使用表格定位 利用表格工具，用户可以通过绘制并重新安排页面结构来快速地设计页面。使用表格来定位文字和图片，制作直观，而且效果也不错。但值得注意的是，当页面很大的时候，一定不要在整个网页上用一个大的表格嵌套很多小表格，用户最好先将页面分用几个小表格。

4、这样，在用户浏览网页的时候收到多少表格显示多少表格，浏览者可以在等待的时候先看收到的部分。但是如果觉得分别显示页面会破坏整体的美感，那就选用大表格吧。3．选择使用框架 框架（Frame）也叫帧页，是制作网页时较为常用的一种技术。该技术可以把浏览器窗口划分为几个小窗口，每一个窗口都显示一个网页的内容，并分别设置大小、有无滚动条等信息。这样就方便了设计网站的结构，可以在上方的框架里放置网站的LOGO，在左边的框架里显示导航栏，而在下方的框架里安置版权信息。当然这只是一个比较公式化的设计，每个人可以根据自己的实际需要和创意来做安排。而且浏览时，可以指定链接的网页在哪个框架里显示，从而避免了网页上相

5、同内容的重复下载。4.使用模板在完成了所有的构思以后，可以先做一个模板第4章网页的版面设计和布局网页，在这个网页里包括了所有网页的公共元素，如：LOGO、导航栏、更新时间、推荐栏目、外接的CSS样式表的链接、加入收藏夹、返回首页、站点地图、E-mail地址、滚动的状态栏、广告条、版权信息等等。之后，用户就可以基于模板创建新的页面，然后在模板更改时自动更新这些页面的布局。4.2用表格布局网页表格在网页设计中占据着重要的地位。它是处理数据时最常用的一种形式。同时，表格也是Dreamweaver对文本和图形进行页面布局时强有力的工具。能否熟练地运用表格将直接影响到网页作品外观的好坏，因此学习运用表

6、格也是学习制作网页的一个重要内容。通过表格可以精确地控制各网页元素在网页中的位置,通过在表格中放置相应的图片或其他内容，即可有效地组合成符合设计效果的页面，使得网页中的元素得以方便地固定在设计的位置上。表格由一行或多行组成；每行又由一个或多个单元格组成。当选定了表格或表格中有插入点时,Dreamweaver会显示表格宽度和每个表格列的列宽,宽度旁边是表格标题菜单与列标题菜单的箭头。使用这些菜单可以快速访问与表格相关的常用命令,用户可以启用或禁用宽度和菜单。图4-1显示表格宽度和表格列宽度4.2.1创建表格利用Dreamweaver创建新表格时，可执行下述具体步骤。1）在“文档”窗口的“设计”

7、视图中，将插入点放在需要创建表格的位置。2）执行下列操作之一：方法一：选择主窗口“插入”菜单中的“表格”命令。方法二：在“插入”面板的“常用”类别中，单击“表格”按钮。方法三：按组合键Ctrl+Alt+T。3）在弹出的“表格”对话框中设置“表格”的属性,如图4-9所示,然后单击“确定”创建表格。第4章网页的版面设计和布局图4-2表格设置对话框“表格”对话框中各主要选项的功能如下：(1)“行数”：用来设置生成表