《课设计网页布局》PPT课件.ppt

《《课设计网页布局》PPT课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、设计网页布局教学目标：1、认识网页布局的重要性及常用布局方法。2、掌握网页布局的整体造型，并能适合的应用到网页设计中。教学内容：网页结构布局知识教学重点、难点：表格布局网页、表格嵌套知识一、概述在我们还没有动手做网页时，网页就像一张白纸，而通过你们的想法，在这张白纸上把文字、图片等组织起来，这样就形成了网页就像我们的手抄报，但网页更丰富，会有声音、动画、视频等。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。二、页面设计相关知识1、页面尺寸页面尺寸是主要是由于我们显示器的分辨率有关，因为我们的网页没办法突破这个显示器分辨

2、率的限制。首先浏览器的菜单等已经占用了屏幕的空间，所以网页页面范围比分辨率还要小；另一个原因，技术的发展，现在普遍使用17寸液晶显示器或19寸液晶显示器，以致网页的页面要适应1024*768这种分辨率，乃至更多种。受这些限制，一般来说，我们比较注重页面宽度的限制，也就是说网页页面在水平方向一般不设置宽度超出分辨率开成滚动条，但又要适应常用的两种分辨率，所以普遍宽度设在900-1000之间。两我们常用垂直滚动来添加页面内容，但也不是说高度没有限制，而是常用高度不要超出页面三个屏。更多的内容，通常使用链接到另一个页面。网页设计标准尺寸:1、800*60

3、0下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。2、整体造型整体造型可以说是页面的整体布局，一个页面就是一个整体，内容是相互搭配，相互接合。在通常的情况下，我们网页的整体造型受显示器的矩形形状影响，页面整体布局也是以矩形为主，但如果创意比较好，可以充分运用其它形状以及它们的组合；矩形、圆形、三角形、菱形等。矩形：代表着正式、规则，很多ICP和政府网页都是以矩形为整体造型；圆形：带着柔和、团结

4、、温暖、安全等，很多时常站点喜欢以圆形为页面整体造型；三角形：代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形：代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。3、页头页头又称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜

5、广告。4、文本文本在页面中出现都是以行或者块（段落）出现，它们的摆放位置决定了整个页面布局的可视性。5、图片图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。6、多媒体除了文本和图片，还有声音、动画、视频等其它媒体。随着动态网页的兴起，它们在网页布局上也变得更加重要。7、页脚页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。三、布局步骤进行网页设计，不要急着在Dreamweaver直接进行布局，应该先画好草图，就像建筑楼房，先要有工程图

6、纸一样。所以进行网页设计前，可以参考以下步骤：1、草案：新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，根据网页的需求和你自己的想像设计，就像是排版，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出轮廓即可。（可以考虑用白纸和铅笔来设计，当然如果需要更好的效果，如对颜色等的设计，可以利用软件时行布局，如Photoshop,FireWork等平面设计软件。）2、定案：在草案的基础上，将你确定需要放置的功能模块安排到页面上。主要包含网站标志，主菜单，新闻，搜索，友情链接，广告条，邮件列表，计数器，版权信息等。注意，这里我们必须遵循突出重

7、点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后再考虑次要模块的排放。四、布局类型网页布局大致可分“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。我们在下面逐一看看各种布局类型。1、“国”字型：也可以称为”同“字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。如：

8、高州师范学院、茂名教育局、广东石油化工学院2、拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广