第1讲网页设计概33汇编.ppt

第1讲 网页设计概述;1.1网页中的基本概念;;;;;;;;;1.2页面组成元素;;2．BANNER BANNER一般翻译为网幅广告、旗帜广告和横幅广告等。BANNER通常为一幅表现商家广告内容的图片，放置在广告商的页面上，是互联网广告中最基本的广告形式。横幅广告的标准尺寸是468*60像素，而弹出窗口广告一般为360*300像素。BANNER可以是使用GIF格式的图像文件，可以使用静态图形，也可用多帧图像拼接为动画图像。;;;;;;;;1.3网站规划与网页设计;1.3.1网站的策划;1.3.2网页版面布局设计;页面布局设计;2．绘制草图 网页布局设计就像写文章一样，要事先打草稿——绘制草图。新建页面就像一张白纸，没有任何表格和框架，没有约定俗成的条条框框的约束，可以尽可能地发挥你的想象力，将想到的“景象”画上。绘制草图就是把头脑中构思的页面布局轮廓具体化的过程，可以在纸上绘画，也可以用软件在计算机上绘制。 ;某某网上商城草图;3．草图细化和方案确定 草图细化和方案确定就是在绘制出来的轮廓草图上，具体摆布页面元素，包括网站的站标、导航栏、栏目标题、广告、图片和搜索引擎等。按照平面设计的规律做出平面的基本样式。这一步可以用一些图像处理软件（如Photoshop、PageMaker和Illustrator等）在计算机上完成。在具体布局页面元素时，可以借鉴平面构图的一些基本原则，如平衡、呼应、对比和疏密等。这个阶段的设计结果仍然是草图，但是已经是一个布局完善的设计方案了，除了文字内容之外，其他所有内容应该基本接近将来网页的实际效果。这个方案供客户和技术开发人员讨论确定最后方案时参考。 ;4．量化描述 量化描述就是确定各种页面元素的具体尺寸。主要包括下面几个方面。 (1)网页的外形尺寸。 (2)图形图像的尺寸。 (3)字体大小。 (4)色彩代码。 (5)网页的文件大小。 ;5．方案实施 根据上述步骤确定的最终方案用网页编辑软件（如Dreamweaver或Frontpage）和图像处理软件（如Photoshop和Fireworks）进行布局设计。 ;常见的网页结构类型 ;“中国人民大学”首页 ;这种结构布局是互联网上最常见的布局，其优点是：页面结构清晰、直观、平衡均衡和主次分明。缺点是版次过于呆板、僵化，往往给人一种“单调乏味”的感觉。因此，采用这种布局结构时，必须在设计过程中更加注重色彩的搭配和细节的处理，调节页面的整体韵律，弥补它的不足。 ;(2)“匡”字型布局 “匡”字型布局（又叫“拐角型”布局）是把“同”字型布局右边的内容移到底部而成，它们的结构特点和优缺点也大体相同。如北京交通大学首页就属于这种布局。 ;(3)“吕”字型布局 “吕”字型布局的特点是把页面分为上下两大块，其中每一块都具有同字型结构的特点。这种结构在设计技术上采用上下两个表格进行页面元素的定位，两个表格之间往往插入条幅广告。这种布局能够容纳大量信息，目前各大型门户网站的二级模块通常都是采用“吕”字型的布局。如“新浪体育”、“网易新闻”和“搜狐财经”等网页。 ;(4)自由式布局 自由式布局打破上述结构的“规规矩矩”，尽情挥洒。页面布局就像一张宣传海报，极具创意。这种页面常常以一幅精美的图片作为设计中心，导航栏则作为次要的设计元素，自由摆布，起到点缀、修饰和均衡的作用。一些时尚网站常常采用这种布局，如艺术设计、时装服饰和化妆品等站点。这种布局的优点是漂亮、现代、轻松和明快，极具美感，给人以美的享受。 ;1.4网页的色彩搭配及应用;1.4.1网页色彩搭配的原理;1.4.2网页色彩搭配的技巧;;1.4.3网页色彩选择标准;;1.5网页的设计原则;1．内容第一、形式第二 2．重点信息要醒目突出 3．网页文件的命名原则 4．设置合理的网站目录 5．确保链接的有效性 6．流畅的访问速度 7．清晰的导航结构 8．良好的兼容性 9．慎用多媒体元素 10．真实有效的客服信息;1.6小结