欢迎来到天天文库
浏览记录
ID:61905852
大小:208.00 KB
页数:10页
时间:2021-03-26
《第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)“行数”:用来设置生成表
此文档下载收益归作者所有