网页设计教程.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,1,第,1,章,网页设计基础,教学目的和要求,:,掌握,Web,站点的有关概念、术语及其基本工作原理，掌握网站的命名规则和文件、文件夹的命名规范、网站页面布局格式与规范及网页修饰与创意原则，了解网站建设的基本流程和常用工具和编程语言，能够进行网站需求分析，了解网站的业务背景，能根据网站业务背景的不同确定网站功能，并能够根据网站内容进行页面规划和结构布局。,2,第,1,章,网页设计基础,主要内容,:,网页设计的几个基本概念,网站基础,网站设计,网页规划和步骤,了解常用网页制作工具和网页编程语言,前几界学生作品的正反面案例分析,重点内容,:,文件、文件夹的命名规范，文件目录结构与链接结构，页面规划和结构布局,难点内容,:,页面布局格式与规范及网页修饰与创意原则，能据网站业务背景的不同确定网站功能，并能够根据网站内容进行页面规划和结构布局,.,计划学时,:,4,学时,3,1.1,网页设计的几个基本概念,1,、,什么是网页？,一个网页是,存储在某与互联网相连计算机中的,一个文件,，通过网址（,URL,）来识别和存取。在浏览器中输入网页网址，通过浏览器解释网页文件，用户就可以浏览该网页。,2,、网页的分类,通常网页文件以,htm,、,html,、,asp,、,aspx,、,PHP,、,JSP,等为扩展名。不同的扩展名分别代表不同类型的网页文件。,按表现形式可分为,静态网页和动态网页,。,返回目录,4,静态网页与动态网页,静态网页：,指网页显示后（或显示期间），浏览器与服务器不再发生信息的交互。无法做进行查询、留言、聊天、电子商务等操作，,并不是不动的网页,，,如,FLASH,动画。,动态网页,指浏览器端和服务器端,可以进行信息交流,的网页，即服务器可以根据浏览者的请求做出相应动作和回复。常见的动态网页类型有,ASP,、,ASPX,、,PHP,和,CGI,等等，其中以,ASP,动态网页技术较成熟且易学。,返回目录,5,网站与网页,3,、什么是网站,网站是互联网上一块固定的面向全世界发布消息的地方。它由域名（即网站地址）和网站空间构成。,可以将,网站喻为一个摊位或地盘,。如果一个企业上了互联网，表示进入了世界上最大的市场，此时也只不过是一个看客；而如果企业建立了自已的网站，它就在市场中拥有了,一个“摊位”，,可以宣传和展示自已产品。,4,、网站与网页的关系,网站是网页、图片等文件的集合体，是网页通过超级链接的形式组成的。,返回目录,6,5,、网站的逻辑结构,1,服务器部分,包括计算机硬件、操作系统、,WWW,程序、电子邮件程序等。,2,网络接入部分和网络安全系统,包括 路由,器、调制设备和网络安全系统 。,3,数据存贮部分和中间件,数据存贮存系统要,有海量存贮能力，高速搜索能力，有效的数据采,集、制作和发布能力。中间件介于服务器系统和,数据存贮系统之间。,4,研发和维护部分,此部分贯穿于网站从建立,到消亡的全过程，需要专人负责。,返回目录,7,1.2,网站基础,从,网站功能,考虑，网站系统可以划分为以下方向：,1,辅助政府部门进行国家管理。,2,为新闻和宣传提供平台。,3,为商业活动提供交易平台。,4,为科研和学术交流服务。,5,没有任何商业目标的公益性网站和个人爱好网站。,返回目录,1,、定位网站系统,8,1.2,网站基础,网站的类别比较繁杂，从,信息流转和提供服务的方式,出发，可以分为以下几类：,1,门户类网站,2,信息发布类网站,3,电子商务类网站,4,资源服务类网站,5,娱乐游戏类网站,6,远程教育和医疗诊断类网站,等等,返回目录,2,、定位网站的类别,9,1.2,网站基础,准确的,形象定位,对于提高网站的点击率至关重要。,网站形象是指它主要侧重的内容和功能,。,人们感兴趣的,网站内容,通常有：,（,1,）新闻（包括时事新闻、体育新闻、财经新闻、娱乐新闻等）。（,2,）求职、招聘、交友、征婚信息。,（,3,）计算机软件和硬件信息。（,4,）科教医疗信息。,（,5,）金融证券信息。（,6,）商贸信息和各类广告。,（,7,）休闲、旅行、娱乐信息。,（,8,）电子书籍和影视。,返回目录,3,、定位网站的形象,10,定位网站的形象,人们感兴趣的,网站功能,通常有：,（,1,）搜索引擎和信息查询。,（,2,）电子邮件和免费电子信箱。,（,3,）免费个人主页空间。,（,4,）软件的上传与下载。,（,5,）网上聊天室、新闻组、,BBS,、发送短信。,（,6,）实时股票信息和网上股票交易服务。,（,7,）网上游戏娱乐。,（,8,）网上商务活动、网上购物、网上结算。,等等,返回目录,11,1.2,网站基础,网站费用包括,建站费用和运作费用,：,1,域名费用,域名分级别，不同级别收费不同。,2,服务器硬件设备费用,一个网站的硬件至少,包括计算机和网络接入设备，这笔费用应根据网,站规模而定，不必过分铺张。,3,系统软件费用和开发维护费用,4,网站的市场推销费用和经营费用,要提高自,己的市场份额，应加强宣传并提高服务质量。,返回目录,4,、了解网站费用,12,站点结构图（,SITE MAP,）,导航栏（,NAVIGATION BAR,）,联系方式页面（,CONTACT PAGE,）,反馈表（,FEEDBACK FORMS,）,引人入胜的内容（,COMPELLING CONTENT,）,常见问题解答（,FAQs,）,精美的图片（,GOOD GRAPHICS,）,搜索工具（,SEARCHING MECHANISMS,）,新闻页面（,NEWS PAGE,）,相关站点链接（,RELEVANT LINKS,）,1.2,网站基础,返回目录,按照国内外传统制作网站的要求，一个标准的网站应该包括以下,10,项内容：,5,、网站的基本内容,13,1.2,网站设计基础,申请域名,域名是网站在因特网上的门牌号码，也可看作网站在因特网上的商标。域名的命名基于,IP,地址层次化的命名方式，,可由,26,个英文字母、,10,个阿拉伯数字、减号和下划线组成,，,用圆点分隔,成几节，字母不区分大小写。域名应选择简短、有意义、容易记的单词。域名有惟一性。域名可以进行交易，买卖或过户。,域名分级别，从右向左依次为最高级（也称顶级）、次高级等，最左边为主机名。基本结构为：,计算机主机名,.,机构名,.,网络名,.,最高层域名,顶级域名有,2,类：,机构域和地理域。机构性域名由三个字母组成，地理性域名由两个字母组成。,返回目录,6,、申请域名,14,1.2,网站基础,1,专线接入,花费较大但优势明显，提供的服务内容多。,2,服务器托管,将,Web,服务器由其他网络公司托管，费用比第一种接入方式低得多，但需要远程维护，技术要求高。,3,虚拟主机,租用某些,ISP,的剩余磁盘空间，这些空间一般允许个人网站免费使用，节省了购买服务器的费用，但需要远程管理，受到的限制也比较多。,返回目录,7,、接入,Internet,的方式,15,1.2,网站基础,选择服务器要综合考虑各方面因素，如：价格、性能、安全性、可扩展性。,1,单从价格出发,，应首先考虑,PC,服务器，,PC,服务器又分,工作组级、部门级和企业级,三档，价格各不相同，可根据网站规模确定使用何种级别的,PC,服务器。,2,单从性能与安全出发,，,Unix,服务器占有一定优势，是高端系统的首选。,3,如果选择,PC,服务器,，操作系统一般为：,Windows NT,或,Windows 2000,或,Linux,。如果选择小型机为服务器设备，一般使用,Unix,为平台。,大网络一般使用,Unix,，小网络使用,Windows,返回目录,8,、网站服务器设备,16,1,、网站设计的主要任务：,网站平面构建设计（服务器端）,以浏览器为客户端的,Web,应用程序开发,系统测试,网站发布,2,、网站设计的主要阶段：,用户需求分析及变更（前期调研）,网站业务流程分析,系统分析及总体设计（撰写网站设计策划书）,界面设计、交互设计和程序开发,系统测试和文档编写,客户培训、技术支持和售后服务,1.3,网站设计,设计任务和开发过程,返回目录,17,客户提出要求,同客户讨论设计细节,按客户提出,的要求和资料,进行整体规划,和页面设计,将策划书提交客户审阅,不同意,同意,签定,合同并申,请域名和网,页空间,进行网站的版面,编排和页面制作,网站功能,检查测试,不合格,合格,向客户提,交完成稿,不满意,修改,设计,满意,设计完成并为客,户在各大搜索引,擎上注册,1.3,网站设计,网站设计工作流程,18,1.3,网站设计,定位网站的主题,3,、网站主题的选择：（按功能和结构形式）,门户网站,国内网络公司经营的网站：,新浪（,）搜狐（,）、网易（,）等,国外投资的网站,：如：中文雅虎、香港的,TOM,、中华网等,国内传统媒体办的网站,：人民网（,）新华网（,www.xinhua.org,）等,普及型网站,企业网站、大学网站、政府网站以及数量众多的个人网站,电子商务类网站,媒体信息服务类网站,办公事务管理网站,（办公内部）,商务管理网站,（企业内部）,返回目录,19,1.3,网站设计,定位网站的主题,返回目录,网站主题的选择：（按内容形式）,主题要小而精,定位要小，内容要精。,调查结果显示，网络上的“主题站”比“万全站“更受人们的喜爱。,题材不要太滥或者目标太高,“太滥”,是指到处可见、人人都有的题材，例如，软件下载、免费信息。,“目标太高”,是指在这一题材上已经有非常优秀、知名度很高的站点，要超越是很难的。,20,1.3,网站设计,定位网站的名称,4,、网站名称的选择,名称要正气,指合理、合法、合情，不能用反动的、色情的、迷信的、危害社会安全的词句。,名称要简洁、易记,对于中文网站，网站名称最好用中文，,不要用英文或者中英文混合型名称,。网站的名称的字数一般控制在,6,个字（最好是,4,个字）以内，例如，“,阁”。,名称要有特色,较好的网站名称应该是能体现一定的,内涵、韵味,，并给浏览者更多的,视觉冲击和空间想象力,。,返回目录,21,1.3,网站设计,定位网站的,CI,形象,5,、,CI,（,Corporate Identity,）形象,指通过视觉来统一企业或个人的形象,1.,网站有代表性的人物、动画、花草，可以用它们作为设计的蓝本，加以卡通化和艺术化。,2.,网站是关于专业性的内容，可以以本专业有代表的物品作为标志。例如：中国银行的铜板标志、奔驰汽车的方向盘标志。,3.,用自己网站的英文名称或字母组合做标志。,我校的网站标记,（,1,）网站标志（,logo,）的设计,返回目录,22,网站标志（,Logo,）,23,1.3,网站设计,定位网站的,CI,形象,色彩是网站给浏览者的第一印象，不同的色彩搭配会产生不同的效果，并可能影响到访问者情绪。,一般不宜超过,3,种色彩。,可以运用到网站的标志、标题、主菜单、图片和主色块上。,设计网站的标准色彩的原则：,标准色彩,：能体现网站形象和延伸内涵的色彩,。,返回目录,（,2,）设计网站的标准色彩,24,1.3,网站设计,定位网站的,CI,形象,色彩的选择与含义,：（基本色）,红色,：代表热情、奔放、喜悦、庆典,黑色,：代表严肃、夜晚、沉着、恐怖；,黄色,：代表高贵、富有,白色,：代表纯洁、简单,蓝色,：代表天空、清爽,绿色,：代表植物、生命、生机,灰色,：代表阴暗、消极,紫色,：代表浪漫、爱情,棕色,：代表土地,返回目录,色彩本身是无任何含义，有的话也只是人赋予它的。但色彩确实可以在不知不觉间影响人的心理，左右人的情绪，所以就有人给各种色彩都加上特定的含义,。,25,不同主题的网站所应用的色彩是不同的。对于网页设计者来说，色彩的心理作用尤其重要。,通常的选择是：重要内容的文字用非彩色（黑色），边框、背 景、图片用彩色。,网页色彩搭配的原理：,注意色彩的鲜明性（引人注目）,注意色彩的独特性（使印象深刻）,注意色彩的合适性（色彩与内容气氛协调）,注意色彩的联想性。（色彩与网页内涵关联）,例如：绿色可以使人产生优雅、舒适的气氛，黄绿色有青春、旺盛的视觉意境，而黑色则含有幽静、阴森的意境。,返回目录,1.3,网站设计,定位网站的,CI,形象,网页色彩搭配,26,1.3,网站设计,定位网站的,CI,形象,返回目录,网页色彩搭配技巧,1.,用一种色彩,指先选定一种色彩，然后调整透明度或者饱和度，产生新的色彩。这样的页面色彩统一，有层次感。,2.,用两种色彩,选定一种色彩，然后选择它的对比色。,3.,用一个色系,就是用一个感觉的色彩，例如，淡蓝、淡黄、淡绿或黄、淡黄、棕黄等。,4.,用黑色和一种彩色,27,网页色彩搭配注意点,1,、不要将所有颜色都用到，尽量控制在,3,种色彩以内。背景色不要太过复杂，以免减慢网页打开的速度，,建议主页的色彩运用,应体现在站点标志、导航栏、按钮、边框，,非正文文字上。,2,、背景和前文的对比要尽量大，绝对不要用花纹繁复的图案作背景。,3.,色彩的搭配考虑不是单纯的颜色运用，还要考虑诸多因素，如：社会背景、心理需求、访问者类别等等。,1.3,网站设计,定位网站的,CI,形象,28,1.3,网站设计,定位网站的,CI,形象,我们在设计网站时，需要尽量在页面中使用看上去比较淡雅、简洁的色彩；比如背景尽量少用灰暗、深沉的色彩（除非特殊需要），并且根页面的主题来选择主色调！,返回目录,网站的性质。,网站的访客。,对比度是否合适。,色彩是否统一。,设计网站的标准色彩的注意事项：,29,1.3,网站设计,定位网站的,CI,形象,标准字体：,一般网页默认的字体是中文“宋体”和英文”,Times New Roman“,。若需要体现“与众不同”和特有的风格，可选择特别的字体。,（,3,）设计网站的标准字体,1.,不要使用超过,3,种以上的字体（包括在网页的统一界面中）。,2.,文字的颜色要注意与整体协调一致。,3.,标题以,H1H3,字号为佳。,网站的标准字体的设计原则,：,4.,要注意：,使用非默认字体时，最好采用图片的形式。因为浏览者的计算机中可以没有安装特别字体。,返回目录,30,宣传标语,是网站的精神和目标，可用一句话甚至一个词加以高度概括，类似生活中的广告金句。例如，,Intel,的“给你一颗奔腾的心”。,（,4,）设计网站的宣传标语,31,（,5,）,确定网站的栏目和版块,将网站功能细分为若干的栏目和版块，确定网站的栏目结构和链接结构。,返回目录,1.3,网站设计,确定网站的栏目和版块,设计网站的栏目与版块划分：,要紧扣主题。将主题按一定的方法分类并将它们作为网站的主栏目。,注意：,主题栏目在总栏目中要占绝对优势，使网站显得专业、主题突出。各版块之间要保持相对独立性。,32,2,、设定一个最近更新或网站指南栏目。为照顾常来的访客，设置“最近更新”栏目，更有人性化。若主页内容庞大（超过,15MB,），层次较多，又没设置站内的搜索引擎，则更有必要设置“本站指南”栏目。,3,、设定一个可以双向交流的栏目，例如，论坛，留言本、邮件列表等，让浏览者留下他们的信息。调查表明，设置双向交流栏目的站点比简单地留一个“,Email me“,的站点更具有亲和力。,4,、设立一个下载栏目或常见问题回答栏目。,5,、对于辅助内容，例如，网站介绍、版权信息等不必放在主栏目里，以免冲淡主题。,33,1.3,网站设计,确定网站的栏目和版块,设计网站的栏目所需要注意的几点要求：,尽可能将网站,最有价值的内容,列在栏目上。,尽可能删除与,主题无关,的栏目。,尽可能,方便访问者,的浏览和查询。,返回目录,34,网站目录结构的基本规则,：,不要将所有文件都存放在根目录下,（,6,）确定网站的目录结构和链接结构,清晰的目录结构有利于站点的维护，而网站的链接结构是指页面之间相互链接的拓扑结构。好的链接结构有利于提高效率。,按栏目内容建立子目录,容易造成文件管理混乱和上传速度慢，影响工作效率,子目录的建立，首先是按主菜单栏目（主栏目）建立,在每个子目录下都建立独立的,Images,目录,返回目录,1.3,网站设计,确定网站的目录结构和链接结构,35,网站主目录,板块,1,子目录,板块,n,子目录,主页,images,子页,1,images,子页,n,其他目录,子页,1,images,子页,n,其他目录,36,其他注意事项：,目录的层次不要太深，建议不要超过三层；,不要使用中文目录名及文件名；,可能对网址的正确显示造成困难,不要使用过长的目录名；太长的目录名不便记忆,尽量使用意义明确的目录名；尽量做到“见名知意”。,一般使用简单的英文单词或汉语拼音以其缩写形式,37,网站链接结构的基本形式,：,树状链接结构（一对一）,类似与,DOS,的目录结构，一级级进入，一级级退出。,条理清晰，访问者能明确知道自己在什么位置。,浏览效率低，如果要从一个栏目的子页面到另一个栏目的子页面，必须回到首页再进行。,主 页,页面,1,页面,2,页面,3,页面,4,页面,5,页面,6,页面,7,一级标题,二级标题,返回目录,1.3,网站设计,确定网站的目录结构和链接结构,38,星状链接结构（一对多）,优点：浏览方便,缺点：容易使浏览者失去自己的位置，易“迷路”,在实际应用中，往往我们需要将这两种结构混合起来使用。总的目标是希望浏览者既可以方便快速地达到自己需要的页面，又可以清楚地知道自己的位置。,返回目录,1.3,网站设计,确定网站的目录结构和链接结构,39,随着网络技术的发展，网站的链接结构设计已经不仅仅局限于可以方便浏览，而更加注重其个性化和相关性。,链接结构设计，在实际网页设计中是非常重要的一环。采用什么样的链接结构将直接影响版面的布局。,例如：,主菜单、主菜单放在什么位置,?,是否每页都需要放置，是否需要用分帧框架，是否需要加入返回首页的链接等,。在确定链接结构后，再开始考虑链接效果和形式，,是采用下拉表单还是用,DHTML,动态菜单等。,40,（,7,）版面布局,版面布局基本规则：,平衡、对比、疏密度、比例、凝视、图片说明,（,1,）“,T”,型布局,这种布局形式，一般指页面顶部为横条（网站标志,+,广告条），下方为多列的结构，如最简单的是左半部分为主菜单，右半部分显示内容。,优点,：页面结构清晰，主次分明，强调次序，给人稳重、可信。,缺点,：规矩呆板，如果细节和色彩搭配上不注意，很容易让人“看之无味”。,返回目录,1.3,网站设计,版面布局,41,返回目录,1.3,网站设计,版面布局,“T”,型布局,42,（,2,）,“国”型布局,也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的最多的一种结构类型。,优点,：充分利用版面，版面充实，信息量大。,缺点,：页面拥挤，不够灵活。,返回目录,1.3,网站设计,版面布局,43,1.3,网站设计,版面布局,“,同”、“国”字型结构布局,(,型结构布局,),44,45,（,3,）,POP,布局,POP,引自广告语，就是指页面布局像一张,宣传海报,，以一张,精美图片,作为页面的,设计中心,，在适当位置放置主菜单。,优点,：讲究平衡和有韵律，能达到强调、动感、高注目性的效果，漂亮吸引人；,缺点,：速度慢。,返回目录,1.3,网站设计,版面布局,46,（,4,）对比性布局,这种布局形式，利用色彩、色调等技巧来表现，在内容上也可以涉及古与今、新与旧、贫与富等的对比。,优 点,：视觉冲击力强；,缺 点,：将两部分有机的结合比较困难，一般用于设计型网站。,返回目录,1.3,网站设计,版面布局,47,往往上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接,（,5,）拐角型布局,48,49,这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。,（,6,）标题正文型布局,50,51,这是一种左右分别为两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。我们见到的大部分的,大型论坛,都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。,（,7,）左右框架型,布局,52,53,与上面类似，区别仅仅在于是一种上下分为两页的框架。,（,8,）,上下框架型布局,54,55,上面两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于,“,拐角型,”,结构的，只是采用了框架结构。,（,9,）综合框架型布局,56,这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个,“,进入,”,的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。,（,10,）封面型布局,57,58,其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的,Flash,，与封面型不同的是，由于,Flash,强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。,（,10,）,Flash,型,59,60,61,即上面几种类型的结合与变化，比如在视觉上很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。,（,11,）变化型,62,版面布局设计的步骤：,草案,以粗陋的线条勾画出创意的轮廓,粗略布局,安排模块的放置，注意突出重点、平衡协调,定案,注意设计的平衡和韵律，采用适当的对比和空白效果，突出重点，以达到强调次序，使网站赏心悦目、内容丰富、表达直观。,返回目录,1.3,网站设计,版面布局,63,版面布局设计的注意点：,页面尺寸,像素点数，也指一个网页文档在显示器上显示的屏数。与显示器的分辨率有关。页面长度最好不要超过三屏，否则给人以冗长的感觉。,选择合适的造型形状,保持页面的平衡,平衡是指以页面中心为支点，页面的上下左右在分量上应给人以匀称的感觉。平衡又分为对称平衡（庄重、稳定）和非对称平衡（活泼、乐趣）,。,重点要突出，增加表现力,页面风格应一致或接近,减轻用户的认知负担，并利用浏览器的缓存能力，提高系统的效率,64,（,8,）网站风格,网站风格由诸多因素所组成，是一个“整体形象”。,“整体形象”指站点的,CI,（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义和站点荣誉等诸多因素。,网站的风格应该具有一定的独特性，人性化，要让浏览者明确分辨出这是某个网站所独有的。,与众不同,要肯定风格是建立在有价值的内容之上的,要彻底搞清楚自己希望网站能给人的印象是什么,要在明确自己的网站印象后，开始努力建立和加强这种印象，风格不是一次定位的，而是在实践中不断强化、调整、修饰的,风格必须建立的人的基础之上,返回目录,1.3,网站设计,确定网站的整体风格和创意设计,65,对网站进行分析定位之后，接下来就是制作网页了，然而，如何对确定的主题和结构中的文件加以规划和创意，如何提高网页的视觉吸引力，有效地传达信息、给人以审美感受，就成为了摆在我们面前的一个非常重要的问题。,网页上有各种功能组件和媒体信息。最常见的,功能组件,包括网站标志、导航栏、广告条等，而色彩、文本、图片和动画则是网页最基本的,信息形式和表现手段,。,1.4,网页规划和步骤,网页基本元素,返回目录,66,网页设计的关键任务,就是围绕主题如何将已有的网页基本元素以网页的形式展现出来。更通俗地说就是如何布局、安置素材，故其前期工作素材的准备尤其重要。,67,1.4,网页,规划和步骤,网,页,制作步骤,网页制作一般分为如下步骤：,1,网,站规划：,将主题拆分为若干子主题，为每个子主题制作目录及必要的空网页文件。,2,主页规划：,为主页划分区域，合理安排网站名称、网站标志、公共导航等必要内容，并在主页上为每个子主题建立带描述性文字的超链接。,3,设计主页、子主题网页,。,返回目录,68,网页上最常见的功能组件,1.,网站的标志,(LOGO),：通常位于主页面的左上角。,2.,导航栏：,直观地表示网页具体内容，引导浏览者顺利访问网页。导航栏要放在明显位置，它有一排、两排、多排、图片导航和框架快捷导航等。,3.,广告条,：又称广告栏。一般位于网页顶部、导航栏的上方，与左上角的网站标志相邻。广告条中图形无需太繁杂，文字尽量使用粗体字，广告语要精练，朗朗上口。,4.,搜索引擎：,方便用户以最快方式找到所需信息。一般位于导航栏下方。,5.,注册与登录区,：用户在此注册会员或以会员身份登录。一般放在页面主内容区的左上方或者右上方。,6.,主内容区：,网页中要呈现给用户的主要内容。占据页面最突出的位置和最大的空间。,7.,友情链接：,用户可以通过这些链接进入其他网站。是一种互相宣传的方式。一般位于页面右侧或者下方。,1.4,网页规划和步骤,网页基本元素,返回目录,69,网页最基本的信息形式和表现手段,包含文字、,按钮、,图像、超链接、表格、表单、事件与行为、动画、框架、音频、视频、交互等,1,、,按钮,：网页上的任何一个板块内容都可以设计成按钮的形式，在制作时要注意网页整体协调。,按钮上的文字要清楚，图案色彩要简单,。,2,、,文本,：网页中最多的内容通常是文本，可以根据自已的需要设置文字的颜色、字体、字号等内容。,3,、,图像,：是表现、美化网页的最佳元素。但图像也不宜太多，否则会让人觉得杂乱，也影响网速。,4,、,表格,：一般用来控制网页的布局。如使用较多的横竖分明的网页布局。,5,、,表单,：用来收集信息或实现一些交互作用的表。,6,、,多媒体及特殊效果：,为了吸引浏览者，常设置一些动画或声音，使得页面图、文、声并茂，以增加点击率。,1.4,网页规划和步骤,网页基本元素,返回目录,70,1.4,网页,规划和步骤,网页文件规划,网页文件规划需要多方位考虑设计者和浏览者的需要，使网页文件最大限度地实现设计者的目标并为浏览者提供,方便快捷和最直观有效,的信息服务。,网页文件规划要遵循三个基本原则,：,内容、速度和页面美观,，其中,内容最重要,。,返回目录,总体设计：,设计出总体框架图,。网页主题鲜明、结构合理，不能堆砌；将丰富的内容和多样的形式组织在一个统一的结构中，达到,形式和内容的统一、协调；,力求布局合理，美观大方；,网页设计标准，保持风格一致。,71,1.4,网页,规划和步骤,网页框架,网页框架,指网页文件系统的组织结构，合理的框架可以让,Web,页面井井有条，在实际管理中减少不必要的错误。,一个页面一个主题，避免大主题。,把大主题分成几个子主题，用主页把所有页面联起来，在主页中加入指向其他页面的链接，并附带简短描述性文字，将读者带入不同主题的领域。在每个页面加入超链接，方便读者按自己意愿阅读。,返回目录,72,1.4,网页,规划和步骤,网页文件规划,1,规划主（首）页,严格来说，,主页（,Home Page,）,和,网页（,Web page,）,是两个不同概念，,主页是指登陆到网站后看到的第一个页面。,主机上默认首页名称是固定的，不能随便起,，要符合远程服务器的要求，通常为,index.htm,、,index.html,、,default.htm,、,default.html,或,default.aspx,，也可为其他扩展名,。,主页的一个重要功能是导航，一般没有实质性的具体内容,，有，也只是什么？,利用超链接指引用户查询保存在网址或其他位置的信息，但超链接层数不能太多。,返回目录,73,“,好的开始是成功的一半”,，首页的设计和制作是绝对需要重视和花心思的，一般首页设计和制作占整个制作时间的,40%,。,1.,确定首页的功能模块,首页的内容模块是指需要在首页上实现的内容和功能。,例如：网站名称，主菜单，新闻，搜索，友情链接，邮件列表、计数器（,count),、版权（,copyright),等。,选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计时需要首先确定的。,2.,设计首页的版面,设计版面的最好方法是：找一张白纸，一支笔，先将理想中的草图勾画出来，然后再用网页制作软件实现。,3.,技术细节的处理：例如，如何设置字体和链接颜色等。,返回目录,首页设计,74,包括主页在内的所有页面都应该,简洁清晰，以最少的元素表达最多的信息,。,整体风格基本一致,。,75,1.4,网页规划和步骤,网页文件规划,2,设计网页的色彩,视觉冲击是网站给人的第一印象，好的色彩搭配能体现网站形象，延伸网站内涵，还能直接影响访问者的情绪。通常，网站的主要,色彩不要超过,3,种,，,用于网站标志、标题、主菜单和主色块,，显得整体统一。其他色彩可作为点缀和衬托，不能喧宾夺主。,3,设计网站标志,(logo),、准备网页素材,网站标志就如同,商品的,商标,一样，是站点特色和内涵的集中体现，好的标志能让人看见,logo,就联想到拥有该标志的网站。标志可以是汉字、英文字母、动物或人物的符号、图案等。,返回目录,76,1.4,网页规划和步骤,网页文件规划,4,设计网页的图形和背景,图形是,WWW,网站的特色之一，具有醒目、吸引人和传达信息形象的作用。适当运用图形可以为网页增色，应用不当也会带来反效果。,由于图形的传输远没有文字传输快，要充分,考虑图形文件的大小和传输速率,。背景也是如此，虽能使页面美观，但却耗费传输时间,。,返回目录,77,1.4,网页规划和步骤,网页文件规划,5,网页文本,文本通常是网页的主要内容，也是网站经常更新的部分。,网站成功与否，内容很关键,。网页上文字的字体、颜色等属性要与页面整体风格匹配，并贯穿整个网站建设，,尽量不用闪烁文字,。,6,联系方式,提供联系方式使访问者与自己联系或发表意见，是网页文件规划中不可缺少的，通常应提供电子信箱、电话号码、传真、通信地址等。,返回目录,78,1.4,网页规划和步骤,网页文件规划,7.,留言本,留言本可以方便自己与网页访问者交流，访问者对网站的评价可以写在留言本里，回答问题也可以在留言本里进行。,8,计数器和聊天室,如果想知道网站的访问次数，还可以在主页上为网站设置一个计数器。也可,申请免费聊天室程序,，链接添加到主页中,。,9,、目录结构,返回目录,79,1.4,网页规划和步骤,网页创意设计,网页创意设计的基本原则：,意义：在于能大大提高网页的视觉吸引力，有利于信息的有效,传达，并能给人以一定的审美感受。,网页创意设计的意义、功能和目的：,依据信息内容的意义和结构进行情节化、理性化的统调布局和,必要的图像符号化处理,；,重视“形象思维”的情感象征意义的传达,，以有别于知识性思考与,形式审美结构的营造。,功能：引人注目，提高网页的视觉吸引力，,增加读者的浏览和,持续阅读的兴趣,。,目的：使得布局新颖别致，视觉流畅通顺，形态清晰悦目，使,网页所提供的信息能得到更明确而有效的传达。,不要刻意追求与众不同,返回目录,80,网页创意设计的构成要素及其作用：,分 类,基 本 要 素,创 意 设 计,作 用,内,容,的,构,成,网页名称,使用较大的字型；,用活字或书写字或独特的美术字,富有美感，以表现独特的信息风格,标 题,主标题，放置在显著位置,子标题以菜单方式出现,吸引浏览者视线，,导引信息正文,正 文,字群聚集，字体统一，每行最好在,2030,个中文字，空白适度,降低读者阅读时的视力疲劳,标 语,具有韵味的意义完整的句子,传递网站风格、理念、品位格调及定位,造,型,的,构,成,标 志,图案化徽标，力求造型简单单纯,具有一定的象征意义，有较强的视觉传达效果,文字插图,一个界面不要超过三种字体,清晰悦目，直观明确,图 标,可视化造型风格的标签或符号,帮助浏览者发现信息,动 画,各种造型变化及形式效果变化的图形,增添视觉趣味，突出风格和主题,背 景,色彩灰度肌理、抽象连续图案做底纹,感观效果,1.4,网页规划和步骤,网页创意设计,返回目录,81,网页创意设计的原理和准则：,原理,：,使各要素的构成与视觉的关联与配置，使各要素和谐统一，,相辅相成，在构成上成为具有活力的有机组合；使各要素保,持合理的秩序性，创造一种统一的视觉效果，从而有效的传,达信息。,原则,：,内容与形式表现必须统一和有序；,必须考虑网页上各构成要素之间的视觉流程，突出主题；,注意保护网页在视觉上的相对均衡性；,突出主题要素，,“从这里开始看起”,；,注意网页设计中的空白处理，“谋篇布局”、“计白数黑”；,注意整体的对比因素，强化页面的整体吸引力；,在视觉上着力强调网页的重点；,注意提高网页信息内容的视读性；,创造一定的韵律感。,阅读时轻松而富于韵味,1.4,网页规划和步骤,网页创意设计,返回目录,82,1.5,网页制作工具,网页制作应用软件,目前比较流行的用于,Web,页面制作的,应用软件,有以下几种：,1,FrontPage,2,Dreamweaver,3,Fireworks,4,Flash,5,Photoshop,返回目录,83,1.5,网页制作工具,网页编程语言,要提高网页制作技术，除了掌握网页设计软件的,使用，还应了解掌握必要的,Web,页面开发语言,，下面介,绍几个流行的,Web,页面开发语言,:,1,HTML,（,Hypertext Marked Language,）语言,两点不足：标记集不可扩展；数据和表现形式分不开,2,XML,（,Extensible Markup Language,）语言,弥补,HTML,不足，显示和转换在客户端进行。,3,VRML,（,Virtual Reality Modeling Language,）语言,又称,3D Web,，,Internet,中建立三维图形和,Virtual,世界。,4,ASP,（,Active Server Pages,）语言,微软开发的动态,Web,页面脚本语言，,object-oriented,，对平台的依赖性较强。,返回目录,84,5,PHP,（,Hypertext Preprocessor,）语言,程序代码与,C,语言相似，能跨平台使用，具有自由软件特性。,6,Java,语言,Java Applet,与平台无关，安全性高。,7,JavaScript,语言,Netscape,（网景）提出，跨平台、面向对象、嵌入式，有核心、客户端、服务器端三种形式。,8,JSP,（,Java Server Pages,）语言,类似,ASP,，以,Java,为主。,9.ASP.NET,85,本 章 小 结,网站与网页,网站基础知识,网站规划与构建：,网页规划和步骤,网页文件规划要遵循三个基本原则：,内容、速度和页面美观。,网页框架指网页文件系统的组织结构。,网页制作工具：分为应用软件和主流编程技术两大类。,返回目录,86,网站设计基本原则,1,明确主题,2,抓住用户,3,4,个,33,种颜色、,3,种字体、三级目录、,3,次点击等。对于小型网站，主页上任何一条信息点击次数不超过,3,次，被称为,3,次点击规则，对于大型网站，可使用导航和工具条来改善操作。,4,优化网站与网页架构,5,避免使用特殊字体，尽量减少图片,6,避免长文本和错别字,返回目录,87,从哪些方面评价一个网站,文件、目录结构；,网站主题、名称；,网站的,CI,形象，如：颜色、字体、,Logo,、广告条、栏目；,版面布局；,链接结构；,内容；,修饰；,创意。,88,课后思考与作业,试从网站的主题、结构、风格、布局、创意等方面规划并设计一个你感兴趣网站,.,返回目录,试应用本章知识分析你感兴趣的两个网站,指出其优缺点？,