1 / 36

网页版面布局设计

网页版面布局设计. 吕少平 4233120@qq.com. 网页基本元素有那些？ 网页字体大小正常多大？. 一、网页字体的设置. 一般字体默认的大小是 12pt( 镑 ) 。 9pt 是公认的字号。绝大多数网页都用它。 11pt 也好看。 如何设定文字的大小？. 方法是用 CSS 层叠样式表，如果做一个完整的网站，网页文字需要统一的风格，则建议使用外部样式文件。. 设计中字体的使用原则：不要使用超过 3 种以上的字体；不要用太大的；不要使用不停闪烁的文字；标题的字体较正文大，颜色有所区别。 。. 二、网页布局. 1 、页面尺寸

thaddeus-farrell
Télécharger la présentation

网页版面布局设计

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页版面布局设计 吕少平 4233120@qq.com

  2. 网页基本元素有那些？网页字体大小正常多大？网页基本元素有那些？网页字体大小正常多大？

  3. 一、网页字体的设置 • 一般字体默认的大小是12pt(镑)。9pt是公认的字号。绝大多数网页都用它。11pt也好看。 • 如何设定文字的大小？

  4. 方法是用CSS层叠样式表，如果做一个完整的网站，网页文字需要统一的风格，则建议使用外部样式文件。方法是用CSS层叠样式表，如果做一个完整的网站，网页文字需要统一的风格，则建议使用外部样式文件。

  5. 设计中字体的使用原则：不要使用超过3种以上的字体；不要用太大的；不要使用不停闪烁的文字；标题的字体较正文大，颜色有所区别。。

  6. 二、网页布局 1、页面尺寸 • 一般分辨率在分辨率在1024×768的情况下，页面的显示尺寸为1007×600象素； • 800×600的情况下，页面的显示尺寸为780×428个象素； • 640×480的情况下，页面的显示尺寸为620×311个象素。 • 在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。正常拖动页面不要超过三屏高。

  7. 2、整体造型 什么是造型？造型就是创造出来的物体形象。显示器和浏览器都是矩形，但对于页面的造型可以从矩形、圆形、三角形、菱形等方面考虑。

  8. 对于不同的形状，它们所代表的意义是不同的。对于不同的形状，它们所代表的意义是不同的。 1）矩形代表着正式，规则，你注意到很多ICP和政府部门的网页都是以矩形为整体造型； 2）圆形则代表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型； 3）三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型； 4）菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状代表着不同意义，但目前的网页制作多数是结合多种图形加以设计，在这其中某一种图形的构图比例可能占得多一些。

  9. 3、页头： 页头又可称之为页眉，页眉的作用是定义页面的主题。比如站点的名称多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头常放置站点名称的图片和公司标志以及旗帜广告。

  10. 4、页脚 页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。

  11. 5、文本： 文本在页面中出现都数以行或者块(段落)的形式，它们的摆放位置决定着整个页面布局的可视性。 6、图片 图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。 7、多媒体 除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着宽带网的兴起，它们在网页布局上也将变得更重要。

  12. ■网页布局的方法 网页布局的方法有两种： • 第一种为纸上布局； • 第二种为软件布局

  13. 纸上布局法 许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计软件里边设计布局边添加内容。这种不打草稿的方法很难让你设计出优秀的网页来。所以在开始制作网页时，应该先在纸上画出你页面的布局草图来。

  14. 软件布局法 如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这项工作。可利用的软件如Photoshop。Photoshop所具有的对图像的编辑功能在设计网页布局的设计上更是得心应手。不像用纸来设计布局，利用Photoshop可以方便地使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法表现的布局意念。（个性网页常用）

  15. 网页布局类型 1）“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，如我们学校（www.nhxx.org）即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 • www.foshan.gov.cn

  16. 2)拐角型：

  17. 3)标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。如我们的学校网站内容等。3)标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。如我们的学校网站内容等。

  18. 4）左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。4）左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

  19. 5）上下框架型：上下分为两页的框架。 6）综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。 7）封面型：这种类型基本上是出现在一些网站的首页，这种类型大部分出现在企业网站和个人主页。 8）Flash型：其实这与封面型结构是类似的。 9）变化型：即上面几种类型的结合与变化，比如学校网站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

  20. 四）常见表格布局网页的方法 封面型

  21. 封面企业网站类型的表格布局

  22. 拐角型布局

  23. 拐角型的表格布局

  24. 小结 • 制作网页常用表格进行布局 • 国字型、拐角型、标题正方最常用。

  25. 祝全体师生工作学习开心快乐

More Related