网页设计与制作7.ppt

《网页设计与制作7.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作7.ppt（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

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

4、图片的形式形式，因为很可能浏览者的PC里没有安装你的特别字体。3.3.设计网站的标准字体。设计网站的标准字体。1.网站的目录结构二、网站的目录结构和链接结构二、网站的目录结构和链接结构不要将所有文件都存放在根目录下。按栏目内容建立子目录。在每个主目录下都建立独立的images目录。目录的层次不要太深。目录的层次建议不要超过3层。原因很简单，维护管理方便。我们研究网站的链接结构的目的在于：用最少的链接，使得浏览最有效率。一般的，建立网站的链接结构有两种基本方式：2.网站的链接结构1)树状链接结构树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构

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

6、位置。所以，最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构举个例子。一个新闻站点的页面结构如下：一级页面二级页面财经新闻页-财经新闻1，财经新闻2./|首页-娱乐新闻页-娱乐新闻1，娱乐新闻2.|IT新闻页-IT新闻1，IT新闻2.有站点为了免去返回一级页面的麻烦，将二级页面直接用新开窗口(POP up windows)打开，浏览结束后关闭即可。以上我们都是用的三级页面举例。如果您的站点内容庞大，分类明细，需要超过三级页面，那么建议你在页面里显示导航条，可以帮助浏览者明确自己所处的位置。就是您经

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

8、果类似英文字母“T”,所以我们称之为“T”形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。POP布局（自由布局）布局（自由布局）POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢。首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的“功力”了。

9、所以，首页的设计和制作是绝对要重视和花心思的。首页的制作风格也决定了整个网站将要延续的风格。一般首页设计和制作占整个制作时间相当大的比重。首页的设计首页的设计 书籍封面式首页首页的主要类型首页的主要类型有些大型网站往往有一个书籍封面式的首页，上有些大型网站往往有一个书籍封面式的首页，上面只有一个面只有一个“进入进入”的链接，点击之后才可进入的链接，点击之后才可进入到网站。这种首页设计精美、考究。到网站。这种首页设计精美、考究。期刊杂志式首页首页的主要类型首页的主要类型与书刊封面式首页相似，但在首页上有网站全部内容的目录与书刊封面式首页相似，但在首页上有网站全部内容的目录索引，图文并茂，看上去就

10、像期刊杂志的封面，即漂亮，又索引，图文并茂，看上去就像期刊杂志的封面，即漂亮，又使网站的主要内容一目了然，是一种值得推荐的形式。使网站的主要内容一目了然，是一种值得推荐的形式。报纸式首页首页的主要类型首页的主要类型许多电子商务网站、搜索引擎网站和新闻信息许多电子商务网站、搜索引擎网站和新闻信息网站更加务实，为了速度和操作的简便，往往网站更加务实，为了速度和操作的简便，往往采用报纸式的首页设计，将栏目索引、功能模采用报纸式的首页设计，将栏目索引、功能模块、具体内容一并显示在首页，看上去就像报块、具体内容一并显示在首页，看上去就像报纸的头版一样。纸的头版一样。色彩是人的视觉最敏感的东西。主页的色彩

11、处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总总体协调，局部对比体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。四、网页色彩的搭配四、网页色彩的搭配2 2、网页色彩搭配的原则、网页色彩搭配的原则1.使用单色尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。2.使用邻近色所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱

12、，易于达到页面的和谐统一。3.使用对比色对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。4.背景色的使用背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。一般网站建设步骤：一般网站建设步骤：1.1.确确定定网网站站的的建建设设目目标标，包包括括市市场场调调研研、网网站站类类型型的的选选择、发展方向的确定和估算网站建设费用和运作的费用。择、发展方向的确定和估算网站建设费用和运作的费用。2.2.熟悉网站建设的有关法律。

13、熟悉网站建设的有关法律。3.3.申请申请IPIP地址和域名。地址和域名。4.4.选择选择InternetInternet的接入方式。的接入方式。5.5.选择选择ISPISP服务商。服务商。6.6.网站的开发和安全策略的选择。网站的开发和安全策略的选择。7.7.网站的运营和维护。网站的运营和维护。五、建站简论五、建站简论1 1、网站建设步骤网站建设步骤 大多数完整的网站都有有以下六个部分：大多数完整的网站都有有以下六个部分：1 1网网络络接接入入部部分分：主主要要是是指指InternetInternet的的边边缘缘接接入入设设备备，包包括括路路由由器器、调调制制设设备备、防防火火墙墙、防防病病毒

14、毒墙墙等等安安全全系系统统。路路由由器器决决定定着着服服务务的带宽。的带宽。2 2服服务务器器部部分分：包包括括计计算算机机硬硬件件、操操作作系系统统、WebWeb服服务务器器、EmailEmail服服务务器器、FTPFTP服服务务器器、新新闻闻组组服服务务器器等等，对对于于需需要要几几百百兆兆高高带带宽宽接接入入的的大大型型网网站站，需需要要多多台台服服务务器器组组成成群群集集系系统统提提供供均均载载服服务务，同同时时也也可可以以避避免免单单点点故故障障。有有时时还还需需要要在在多多个个广广域域网网内内做做镜镜像像站站点点，并并将同一域名解析到多个将同一域名解析到多个IPIP，将用户路由到最

15、快的站点。，将用户路由到最快的站点。3 3数数据据存存储储部部分分：丰丰富富的的资资讯讯需需要要后后台台的的大大型型数数据据存存储储系系统统来来支支持持。它它需需要要海海量量存存储储能能力力和和高高速速搜搜索索能能力力，同同时时还还要要有有数数据据的的采采集集、制作、存储和发布。制作、存储和发布。4 4中中间间件件部部分分：是是服服务务器器部部分分和和数数据据存存储储部部分分间间的的桥桥梁梁，例例如如视视频点播系统中的控制系统。频点播系统中的控制系统。5 5研发制作与维护系统。研发制作与维护系统。6 6安安全全部部分分：由由于于整整个个网网站站暴暴露露在在InternetInternet网网中

16、中，安安全全防防范范应应贯贯穿到每个组件中。穿到每个组件中。2、网站的结构网站的结构大型网站的结构大型网站的结构3、网站的安置方式：网站的安置方式：如如何何选选择择网网站站的的安安置置方方式式，应应该该按按照照网网站站的的自自身身的的特特点点选选择一种或几种，下面是几种安置方式：择一种或几种，下面是几种安置方式：1)1)专专线线接接入入（自自己己的的WebWeb服服务务器器）：对对整整个个服服务务器器和和网网站站拥拥有有控控制制权权，开开发发和和维维护护非非常常方方便便。但但费费用用高高，需需购购买买服服务务器器、路路由由器器和和软软件件，并并需需租租用用专专线线接接入入。适适用用于于上上网网

17、需需求求大大的单位。的单位。2)2)服服务务器器托托管管和和专专用用服服务务器器：将将配配置置好好的的WebWeb服服务务器器放放到到高高带带宽宽入入网网(100M(100M以以上上)的的电电信信局局或或专专门门的的数数据据中中心心，或或租租用用其其专专用用服服务务器器，通通过过拨拨号号、ISDNISDN、DDNDDN等等低低速速线线路路远远程程维维护护。优优点点是是比比专专线线接接入入的的费费用用低低得得多多，收收费费按按占占用用的的机机架架空空间间和和接接入入带带宽宽计计算算。不不需需要要购购买买路路由由器器。同同时时，ISPISP提提供供优优越越的的机机架架空空间间、网网络络安安全全防防

18、护护、UPSUPS供供电电、恒恒温温恒恒湿湿环环境境及及防防火火设设施施等等，适适用用于于中中、大大规规模模的的网网站站。但但远远程程维维护护的的难难度度较较大大。许许多多大大型型网站就是以此形式建立站点及镜像站点的。网站就是以此形式建立站点及镜像站点的。3)3)虚虚拟拟主主机机或或租租用用空空间间：在在同同一一台台计计算算机机、同同一一操操作作系系统统上上，建建立立一一台台台台虚虚拟拟的的主主机机，每每一一台台虚虚拟拟主主机机可可拥拥有有独独立立的的域域名名，可可以以共共享享一一个个IPIP地地址址，也也可可以以具具有有独独立立的的IPIP，能能提提供供完完整整的的InternetInternet服服务务（包包括括WWWWWW、FTPFTP、EmailEmail等等），缺缺点点是是不不能能支支持持高高访访问问量量，远远程程管管理理有有限限、软软件件安安装装不不方方便便。不不需需要要购购买买路由器。是中、小型企业在低投入情况下的一种很好的选择。路由器。是中、小型企业在低投入情况下的一种很好的选择。