网站设计思想ppt课件

第七章 网站的设计思想,1,网站设计与网站制作的区别在于前者是设计者的一个思考的过程，而制作只是将思考的结果表现出来。一个成功的网站首先需要经过优秀的设计，然后辅之以优秀的制作。设计是网站的核心和灵魂，一个相同的设计方案可以有多种制作表现的订式。,2,网站设计，包含的内容非常多。大体分两个方面：一方面是纯网站设计，比如：文字排版、图片制作、平向设计、三维立体设计、静态无声图文、动态有声影像等；另一方面是网页的延伸设计，包括网站的主题定位和浏览群的定位、智能交互、制作策划、形象包装、宣传营销等等，这两方面是相辅相成的。,3,一、定位网站主题和名称,设计一个站点，首先遇到的问题就是定位网站主题。所谓主题，也就是网站的题材。网络上的网站题材千奇百怪、琳琅满目，只要你想得到，就可以把它制作出来。,4,一、定位网站主题和名称,（一）主题选择,十类主题：可细分、可组合 1.网上求职 2.网上聊天/即时信息/ICQ 3.网上社区/讨论/邮件列表 4.计算机技术 5.网页/网站开发 6.娱乐网站 7.旅行 8.参考/咨询 9.家庭/教育 10.生活/时尚,5,一、定位网站主题和名称,（一）主题选择,选择主题参考建议： 1.主题要小而精 定位要小 内容精 2.题材最好是自己擅长或喜爱的 动力 3.题材不要太滥或目标太高,6,一、定位网站主题和名称,如果想制作一个包罗万象的站点，把所有你认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，没有特色，样样有却样样都很肤浅。因为你不可能有那么多的精力去维护它，网络的最大特点就是新和快，目前最热门的个人主页都是天天更新甚至几小时更新一次的。最新的调查结果也显示网络上的“主题站”比“万全站”更受人们喜爱。,1.主题要小而精 定位要小 内容精,7,一、定位网站主题和名称,比如：对编程擅长，就可以建立一个编程爱好者网站；对足球感兴趣，可以报道最新的战况、球星动态等。这样，在制作时才不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有热情，很难设计制作出杰出的柞品。,2.题材最好是自己擅长或喜爱的 动力,8,一、定位网站主题和名称,“太滥”是指到处可见，人人都有的题材，比如：软件下载，免费信息等。“目标太高是指在这一题材上已经有非常优秀、知名度很高的站点，你要超过它是很困难的，除非你下决心和有实力超过它。但是，在互联网上人们往往只记得最好的网站，第二第三名的印象则会浅得多。,3.题材不要太滥或目标太高,9,一、定位网站主题和名称,（二）名称确定 比较下列名称 电脑之家与电脑学习室 中国幼儿园与儿童天地,网站名称是否正气、响亮、易记，对网站的形象和宣传推广有很大影响。,10,一、定位网站主题和名称,（二）名称确定 一般建议： 1.要正式 合法、合理、合情 2.要易记 国内最好为中文 六字以下 3.要有特色 体现内涵,11,12,二、定位网站的CI形象,CI 借用广告术语,指的是通过视觉来统一企业的形象。 网站和实体公司一样，学要整体形象的包装和设计，即也需要CI形象。 CI的关键 标志、色彩、字体、标语,13,二、定位网站的CI形象,一个杰出的网站和实体公司一样，也需要整体形象的包装和设计。准确地说，有创意的CI设计，对网站的宣传推广有事半功倍的效果。在网站主题和名称定下来之后，需要思考的就是网站的CI形象。,14,二、定位网站的CI形象,CI策划杰出的例子: 可口可乐公司,15,16,17,18,19,20,21,22,23,二、定位网站的CI形象,对于不是广告专业的我们来说，CI是不是太难了呢?下面提供一些具体的做法和经验使大家能轻松地掌握CI设计：,24,二、定位网站的CI形象,CI设计的经验做法： 1.设计网站的标志logo 2.设计网站的标准色彩 3.设计网站的标准字体 4.设计网站的宣传标语,25,二、定位网站的CI形象,Logo是站点特色和内涵的集中体现，使人产生联想。可以是中文、英文字母也可以是符号、图案和动物或者人物等。设计创意来源于网站名称和内容。 最简单最常用的方法是用自己网站的英文名称做标志采用不同的字体或字母的变形、字母的组合等来制作标志,26,27,28,29,30,31,32,33,二、定位网站的CI形象,标准色彩 指能体现网站形象和内涵的色彩。用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。其他颜色也可用，但是只做点缀和衬托。 适合的颜色： 蓝色 黄/橙色 黑/灰白色,34,35,36,37,38,二、定位网站的CI形象,标准字体 指用于标志、标题、主菜单等特有的字体。 一般网页默认的字体是宋体，但为了体现网站的风格可选择一些特殊的字体。 体现专业可以使用粗仿宋体 体现设计精美可以用广告体 体现亲切随意可以用手写体,39,二、定位网站的CI形象,宣传标语： 网站的精神、目标，可以一句话甚至一个词来概括。类似我们生活中的广告词。,40,41,42,三、确定栏目和板块,（一）栏目设置 栏目的实质：网站的大纲索引,设置注意方面： 1.紧扣主题 2.设置最近更新或网站指南栏目 3.设定一个双向交流栏目 4.设一个下载或常见问题回答栏目,43,44,45,46,三、确定栏目和板块,（一）栏目设置,划分栏目注意几点： 1.删除与主题无关栏目 2.将网站最有价值的内容列在栏目上 3.方便访问者浏览和查询,47,三、确定栏目和版块,（二）版块设置 版块比栏目要大，板块包含自己的栏目。 如：网易分新闻、体育、财经、娱乐、教育等板块，每个版块下又有各自栏目。 设置板块要注意： 各版块要相对独立；又要有相互关联；版块内容要围绕站点主题,48,四、确定目录结构和链接结构,（一）目录结构,网站的目录是指建立网站时所创建的目录 目录结构的好坏对站点本身的上传维护，内容未来的扩充和移植有重要影响。,建立目录结构的建议： 1.不要将所有文件都存放在根目录 2.按栏目内容建立子目录 3.在每个主目录下都建立images目录 4.目录的层次不要太深,49,四、确定目录结构和链接结构,（一）目录结构,网站的目录是指建立网站时所创建的目录 目录结构的好坏对站点本身的上传维护，内容未来的扩充和移植有重要影响。,建立目录结构的建议： 1.不要将所有文件都存放在根目录 2.按栏目内容建立子目录 3.在每个主目录下都建立images目录 4.目录的层次不要太深,50,四、确定目录结构和链接结构,（二）链接结构,指的是页面之间互相链接的拓扑结构。它建立在目录结构基础上，但可以跨越目录 了解链接结构的目的： 用最少的链接，是浏览最有效,链接的基本方法： 1.树状链接结构 一对一 一级级进 入，一级级退出 优点 条理清楚，明确位置 缺点 浏览效率低,链接的基本方法： 2.星状链接结构 一对多 各页面之 间都建立链接 优点 浏览方便 缺点 链接太多，容易迷失,51,四、确定目录结构和链接结构,（二）链接结构 以上两种结构在实际网站设计中一般混合使用。首页与一级页面间用星状，一级二级页面间用树状。 网站如超过三级页面，建议在页面中显示导航条，来帮助浏览者明确位置,52,五、确定网站的整体风格和创意,（一）风格,1什么是风格 它是抽象的 整体给浏览者的综合感受 它是独特的 站点不同与其他网站的地方 它是人性的 能概括站点个性、情绪 一句话：与众不同,2如何树立风格 第一 确信风格建立在有价值内容上 第二 明确网站风格 第三 建立和加强风格,53,五、确定网站的整体风格和创意,（二）创意 创意是传达信息的一种特别方式，它是思考的结果。创意是将现有的要素重新组合。 创意的五阶段： 准备期 孵化期 启示期 验证期 形成期,54,六、首页设计,首页的设计是网站成功与否的关键。从根本上来说首页就是全站内容的目录，一个索引。 设计步骤： 1确定首页的功能模块 2设计首页的版面 3处理技术上的细节,55,七、版面布局的窍门,常用形式： “T”结构布局 结构清晰主次分明 规矩呆板 “口”型布局 充分利用版面，信息量大 页面拥挤，不灵活 “三”型布局 页面由两条色块分成四部分 对称对比布局 视觉冲击强 POP布局 显而易见，吸引人 速度慢,56,八、网页设计的通用规则,（一）网站的设计目的决定设计方案 （二）浏览者的需求第一位 （三）页面的有效性 （四）页面布局保持统一性 （五）使用表格和帧结构来设计网页 （六）谨慎使用图片 （七）学好平面设计，做好页面设计 （八）减少Java Applet和其他多媒体的使用,57,九、网页字体的设置,（一）字符集的设定 给浏览器看的，告诉浏览器该网页是以gb2312字符集制作的 gb2312是GB简体码 iso-8859-1是英文,58,九、网页字体的设置,（二）字体的使用 字体定义语句 默认是中文宋体和英文Times New Roman Windows自带40多种英文字体、5种中文 其他字体可能就显示不出，但可以用图片来解决,59,九、网页字体的设置,（三）字体样式 四种 正常体regular 斜体 Italic 粗体 Bold 粗斜体Bold Italic,60,九、网页字体的设置,（四）字体效果 overline 上划线 underline下划线 uppercase大写 none 取消超链接下划线,61,九、网页字体的设置,（五）字体大小控制 默认为12pt 12+2=14pt 1直接定义 2用CSS层叠样式表 3外部模板调用 将CCS的设定制作成单独文件，然后调用 ,62,十、网页中表格应用,表格的嵌套不是表格处理最困难的地方。表格的应用要考虑怎样的表格嵌套能使网页下载速度最快。 浏览器读取网页时，是读完整个table后在显示出来的。显示有优先，先读先显示。 1整个页面最好分成多个表格 2单一表格的结构尽量整齐 3表格嵌套层次尽量少 证明：越复杂、嵌套层次越多的表格，下 载速度越慢,63,