《网页设计与制作》PPT课件.ppt

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

1、第六章网站的总体设计一、网站的形象设计与CI策划二、网站的目录结构和链接结构三、版面布局与首页设计四、网页的色彩搭配五、建站简述所谓CI，是借用的广告术语。(CI是英文corporateidentity的缩写)，意思是通过视觉来统一企业的形象。现实生活中的CI策划比比皆是，杰出的例子如：可口可乐公司，全球统一的标志，色彩和产品包装，给我们的印象极为深刻。更多的例子如SONY,三菱，麦当劳等等。一、网站的形象设计与CI策划首先你需要设计制作一个网站的标志(logo)。就如同商标一样，logo是你站点特色和内涵的集中体现，看见logo就让大家联想起你的站点。1.LOGO是

2、与其它网站链接以及让其它网站链接的标志和门户。2.LOGO是网站形象的重要体现。3、LOGO的国际标准规范1、设计网站的标志(logo)网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站型象和延伸内涵的色彩。例如：IBM的深蓝色，肯得基的红色条型，windows视窗标志上的红蓝黄绿色块，都使我们觉得很贴切，很和谐。2、设计网站的标准色彩。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。标准色彩要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于

3、其它色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。一般来说，适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般我们网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，我们可以根据需要选择一些特别字体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。目前常见的中文字体有二三十种，常见的英文字体有近百种，网络上还有许多专用英文艺术字体下载。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的PC里没有安装你的特别字体。3.

4、设计网站的标准字体。1.网站的目录结构二、网站的目录结构和链接结构●不要将所有文件都存放在根目录下。●按栏目内容建立子目录。●在每个主目录下都建立独立的images目录。●目录的层次不要太深。　　目录的层次建议不要超过3层。原因很简单，维护管理方便。我们研究网站的链接结构的目的在于：用最少的链接，使得浏览最有效率。一般的，建立网站的链接结构有两种基本方式：2.网站的链接结构1)树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明

5、确知道自己在什么位置，不会"迷"路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。2.星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。这两种基本结构都只是理想方式，在实际的网站设计中，总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速的达到自己需要的页面，又可以清晰的知道自己的位置。所以，最好的办法是：首页和一级页面之间用星状链接结构，一级和二级

6、页面之间用树状链接结构举个例子。一个新闻站点的页面结构如下：一级页面二级页面 财经新闻页--[财经新闻1，财经新闻2...]/

7、首页--娱乐新闻页--[娱乐新闻1，娱乐新闻2...]

8、IT新闻页--[IT新闻1，IT新闻2...]有站点为了免去返回一级页面的麻烦，将二级页面直接用新开窗口(POPupwindows)打开，浏览结束后关闭即可。以上我们都是用的三级页面举例。如果您的站点内容庞大，分类明细，需要超过三级页面，那么建议你在页面里显示导航条，可以帮助浏览者明确自己所处的位置。就是您经常看到许多网站页面顶部的，类似这样：“您现在的位置是：首页->财经新闻->

9、股市信息->深圳股->深发展”三、版面布局与首页设计草案建议您用一张白纸和一支铅笔，当然用作图软件photoshop等也可以。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。常用到的版面布局形式：T”结构布局。所谓“T”结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次