网站建设网页的排版布局.ppt
《网站建设网页的排版布局.ppt》由会员分享，可在线阅读，更多相关《网站建设网页的排版布局.ppt（39页珍藏版）》请在三一办公上搜索。
1、05模块 网页的排版布局,在进行网站设计时，需要对网站的版面与布局进行一个整体的规划，这就是网站的排版布局。本模块主要讲解页面的基本构成、常见的页面结构、页面布局设计的基本流程和常用网页布局方法等内容，其中常用网页布局方法是本章的重点。,能力目标1能使用表格布局网页。2能使用框架布局网页。3能熟练使用CSS+DIV布局网页。知识目标1页面的基本构成。2常见的页面结构类型。3页面布局设计流程。4常见页面布局方法。,知识1页面的基本构成,互联网上的网页多种多样，内容千差万别，组成各异。但是，一般的网页都包含标题、网站标志、页眉、导航栏、内容板块和页脚等部分。1网页的标题每个网页都有一个标题，用于指
2、示网页的主要内容。网页的标题显示在浏览器窗口的标题栏中。在设计网页时，应该给网页指定一个有一定意义的标题，使浏览者在看到网页标题就能了解网页包含的大体内容。,2站标站标就是网站的标志，也叫网站Logo，是一个网站的特色和内涵的集中体现。它是一个站点的象征，一般放在网站首页的左上角或显眼位置，访问者能明显地看到它。一个好的站标，可以给浏览者留下深刻的印象，在网站的推广和宣传中起到事半功倍的效果。例如新浪用字母Sina和大眼睛作为标志。站标设计追求的是以简洁、符号化的视觉艺术形象把网站的形象和理念长留于人们心中。,3页眉页眉指页面的上部，通常位于水平放置的导航栏上面。有些网页的页眉比较明显，有些页
3、面则没有明确的划分，有点甚至没有页眉。通常，页面左边放置站标，右边安排网站的宗旨或广告语，或者放置商业广告。页眉是浏览者打开页面时首先看到的地方，在商业网站中通常将页眉作为广告位出租。,4导航栏导航栏是用户在规划好站点结构、开始设计主页时必须考虑的一项内容。导航栏的作用就是让浏览者在浏览站点时，不会因为迷路而中止对站点的访问。事实上，导航栏就是一组超链接，这组超链接的目标就是本站点的主页以及其他重要页面。在设计站点中的诸页面时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易地转向站点的其他主要网页。,5内容板块内容板块是页面的主体，往往根据内容的多少划分为几个栏目。每个栏目
4、中放置内容标题作为连接或内容摘要，具体内容包括文字、图像和动画等。页面的内容才是浏览者关注的根本目标。只有拥有丰富的内容，才能吸引众多的浏览者。因此，对内容板块应该合理安排、精心设计。6页脚页脚是指页面的底部，通常放置版权信息、联系方法，有时也把导航栏、友情链接安排在这里。,知识2常见的网页结构类型,1“同”字型布局“同”字型布局（又叫“国”字型布局）的结构特点是：页面顶部为水平放置的主导航栏，其下大体上分为左中右三栏，左边一般放置内容导航、二级栏目或热点内容等；右边一般放置站点图片链接、动画广告、搜索引擎、友情链接和注册登录信息等；中间为主要内容板块。,“中国人民大学”首页,这种结构布局是互
5、联网上最常见的布局，其优点是：页面结构清晰、直观、平衡均衡和主次分明。缺点是版次过于呆板、僵化，往往给人一种“单调乏味”的感觉。因此，采用这种布局结构时，必须在设计过程中更加注重色彩的搭配和细节的处理，调节页面的整体韵律，弥补它的不足。,2“匡”字型布局“匡”字型布局（又叫“拐角型”布局）是把“同”字型布局右边的内容移到底部而成，它们的结构特点和优缺点也大体相同。如北京交通大学首页就属于这种布局，如图5-3所示。,3.“吕”字型布局“吕”字型布局的特点是把页面分为上下两大块，其中每一块都具有同字型结构的特点。这种结构在设计技术上采用上下两个表格进行页面元素的定位，两个表格之间往往插入条幅广告。
6、这种布局能够容纳大量信息，目前各大型门户网站的二级模块通常都是采用“吕”字型的布局。如“新浪体育”、“网易新闻”和“搜狐财经”等网页。,4自由式布局自由式布局打破上述结构的“规规矩矩”，尽情挥洒。页面布局就像一张宣传海报，极具创意。这种页面常常以一幅精美的图片作为设计中心，导航栏则作为次要的设计元素，自由摆布，起到点缀、修饰和均衡的作用。一些时尚网站常常采用这种布局，如艺术设计、时装服饰和化妆品等站点。这种布局的优点是漂亮、现代、轻松和明快，极具美感，给人以美的享受。,知识3页面布局设计,1构思构图在真正开始页面布局设计之前，都要对页面的整体布局进行认真的构思。在这个阶段，可以借鉴他人的布局经
7、验，参考他人的布局结构，吸取别人的精华，融入到自己的整体构思中。要充分发挥艺术想象力，锐意创新、大胆突破，结合现有的网页素材考虑，进行整合创作。构思结果一定要有自己的独特创意，并要考虑技术实现的可行性。有时候，尽管构思巧妙，见解独到，但用现在的计算机技术和网络技术却不能实现，创意也就变成了空想。,2绘制草图网页布局设计就像写文章一样，要事先打草稿绘制草图。新建页面就像一张白纸，没有任何表格和框架，没有约定俗成的条条框框的约束，可以尽可能地发挥你的想象力，将想到的“景象”画上。绘制草图就是把头脑中构思的页面布局轮廓具体化的过程，可以在纸上绘画，也可以用软件在计算机上绘制。,某某网上商城草图,3草
8、图细化和方案确定草图细化和方案确定就是在绘制出来的轮廓草图上，具体摆布页面元素，包括网站的站标、导航栏、栏目标题、广告、图片和搜索引擎等。按照平面设计的规律做出平面的基本样式。这一步可以用一些图像处理软件（如Photoshop、PageMaker和Illustrator等）在计算机上完成。在具体布局页面元素时，可以借鉴平面构图的一些基本原则，如平衡、呼应、对比和疏密等。这个阶段的设计结果仍然是草图，但是已经是一个布局完善的设计方案了，除了文字内容之外，其他所有内容应该基本接近将来网页的实际效果。这个方案供客户和技术开发人员讨论确定最后方案时参考。,4量化描述量化描述就是确定各种页面元素的具体尺
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 网站 建设 网页 排版 布局
三一办公所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
链接地址：https://www.31ppt.com/p-5386209.html