网站前台设计

第3章网站开发技术----网站前台设计网站建设与管理案例教程返回目录2教学任务制定网站前台建设方案。主要包括网站主题与风格、网站栏目和版块、目录结构和链接结构、版面布局。网站建设与管理案例教程返回目录3网站前台设计定位网站主题与风格网站栏目和版块的设计网站目录结构的设计版面布局网站的形象设计网页设计的原则网站技术规范网站建设与管理案例教程返回目录41.1定位网站主题网站类型目的定位政府网站主要宣传自己的施政纲领咨询服务、树立政府形象学校网站在线教育、传播知识、开展学术交流、招生就业教学服务、学校品牌形象宣传企业网站宣传产品和品牌形象，挖掘商机产品宣传、销售服务、企业文化等个人网站展示个性风采创建相互沟通的桥梁网站建设与管理案例教程返回目录51.1定位网站主题网站主题定位的原则主题定位要小，内容要精题材要根据网站设计者的兴趣和爱好确定，要找擅长的。比如：音乐网、编程爱好者等题材定位不要“太高”或者“太广”网站名称要有特色易记、合法网站建设与管理案例教程返回目录61.2树立网站的风格风格指站点的整体形象给浏览者的综合感受整体形象主要包括：站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等给人的感受是平易近人的、生动活泼的、庄严肃穆的……网站建设与管理案例教程返回目录71.2树立网站的风格如何树立站点的风格网站的内容要有价值网站的配色要合理，并且合乎内容需求网站要具有一定的个性：活泼、诚恳、奔放……与其他站点相比，要有自己的特色或不一样的地方网站建设与管理案例教程返回目录81.2树立网站的风格确定风格首先要建立有价值的内容。你需要彻底搞清楚自己希望站点给人的印象是什么。在明确自己的网站印象后，开始努力建立和加强这种印象。树立网站风格步骤网站建设与管理案例教程返回目录91.2树立网站的风格建立和加强风格印象–1.将标志logo尽可能的出现在每个页面上。在页眉，页脚或背景。–2.突出标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。–3.突出标准字体。在关键的标题，菜单，图片里使用统一的标准字体。–4.想一条朗朗上口宣传标语。把它做在banner里，或放在醒目的位置–5.使用统一的语气和人称。–6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。–7.创造一个特有的符号或图标。比如在一句链接前的一个点，可以使用,.。☆※○◇□△→等等。–8.用自己设计的花边，线条，点–9.展示你网站的荣誉和成功作品。网站建设与管理案例教程返回目录101.3进行创意设计创意是指站点的整体创意，(因为这个创意而产生这个站点，或者相同的内容，推出的创意不同)创意思考的过程分五阶段1.准备期--研究所搜集的资料，根据旧经验，启发新创意；2.孵化期--将资料咀嚼消化，使意识自由发展，任意结合；3.启示期--意识发展并结合，产生创意；4.验证期--将产生的创意讨论修正；5.形成期--设计制作网页，将创意具体化。网站建设与管理案例教程返回目录111.3进行创意设计创意思考的途径最常用的是联想，这里提供了网站创意的25种联想线索：1.把它颠倒2.把它缩小3.把颜色换一下4.使它更长5.使它闪动6.把它放进音乐里7.结合文字音乐图画8.使它成为年轻的9.使它重复10.使它变成立体11.参加竞赛12.参加打赌13.变更一部分14.分裂它15.使它罗曼蒂克16.使它速度加快17.增加香味18.使它看起来流行19.使它对称20.将它向儿童诉求21.价格更低22.给它起个绰号23.把它打包24.免费提供25.以上各项延伸组合网站建设与管理案例教程返回目录122、网站栏目和版块的设计网站栏目要紧扣主题（分主栏目，要有侧重点）至少设一个可经常更新的栏目设定一个可以双向交流的栏目（留言板、论坛等）设一个下载或常见问题回答栏目网站栏目安排要注意的问题在组织网站栏目和内容时，要将最好的，最吸引人的内容放在最突出的位置。网站建设与管理案例教程返回目录133.1网站的目录结构（物理结构）网站的目录是指你建立网站时创建的目录目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。网站建设与管理案例教程返回目录143.1网站的目录结构（物理结构）不要将所有文件都存放在根目录下网站物理结构设计的原则不要使用中文目录、目录名要意义明确不要使用中文目录、目录名要意义明确不要使用中文目录、目录名要意义明确子目录的建立，首先按主栏目建立目录的层次不要太深，不要超过3层在每个主目录下都建立独立的Images目录不要使用中文目录、目录名要意义明确网站建设与管理案例教程返回目录153.1网站的目录结构建立目录结构的一些建议:–不要将所有文件都存放在根目录下，否则会造成：文件管理混乱上传速度慢–按栏目内容建立子目录子目录的建立，首先按主菜单栏目建立其他的次要栏目，需要经常更新的可以建立独立的子目录。不太更新的可合并放在一个目录下。所有的程序一般都存放在特定目录下。–在每个主目录下都建立独立的images（图片）目录–目录的层次不要太深，不要超过3层。网站建设与管理案例教程返回目录163.1网站的目录结构其他注意事项:–1.不要使用中文目录。使用中文目录可能对网址的正确显示造成困难。–2.不要使用过长的目录。尽管服务器支持长文件名，但是太长的目录名不便于记忆。–3.尽量使用意义明确的目录。例如可以用Flash,Dhtml,Javascript来建立目录，也可以用1，2，3建立目录，但明显前者更明确，更便于记忆和管理。网站建设与管理案例教程返回目录173.1网站的目录结构网站的目录结构设计的方法：按网站的栏目和层次关系来设计例如：主页文件及相关资料放在根目录各主栏目及相关放在一级目录主栏目下的各自栏目及相关放在二级目录………在各目录中按文件的属性再分下一级目录。比如images、media、js等。好处：方便维护和管理网站建设与管理案例教程返回目录183.2网站的链接结构（逻辑结构）网站的网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。用最少的链接，使得浏览最有效率。网站建设与管理案例教程返回目录193.2网站的链接结构建立网站的链接结构有两种基本方式：–1.树状链接结构(一对一)。首页链接指向一级页面，一级页面链接指向二级页面。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。–2.星状链接结构(一对多)。类似网络服务器的链接，每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。网站建设与管理案例教程返回目录203.2网站的链接结构链接结构树状链接结构星状链接结构主页一级页面二级页面优点：条理清楚缺点：浏览效率低各页面之间有链接优点：访问页面方便缺点：链接太多，层次不清楚用混合结构：首页和一级页面之间采用星状链接一级和二级页面之间采用树状链接网站建设与管理案例教程返回目录213.2网站的链接结构在实际的网站设计中，总是将这两种结构混合起来使用；浏览者既可以方便快速的达到自己需要的页面，又可以清晰的知道自己的位置，解决办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。首页财经新闻页娱乐新闻页体育新闻页[财经新闻1，财经新闻2，……][娱乐新闻1，娱乐新闻2，……][体育新闻1，体育新闻2，……]二级页面一级页面网站建设与管理案例教程返回目录223.2网站的链接结构–注意:以上我们都是用的三级页面举例。若站点内容庞大，分类明细，需要超过三级页面，则建议在页面里显示导航条，可以帮助浏览者明确自己所处的位置。–即为经常看到许多网站页面顶部的，类似这样:“您现在的位置是:首页-财经新闻-股市信息-深圳股-深发展”网站建设与管理案例教程返回目录23网站目录结构的设计---物理结构网站物理结构设计的方法：按网站的栏目和层次关系来设计例如：主页文件及相关资料放在根目录各主栏目及相关放在一级目录主栏目下的各自栏目及相关放在二级目录。。。在各目录中按文件的属性再分下一级目录。比如images、media、js等。好处：方便维护和管理网站建设与管理案例教程返回目录244.1版面布局设计草案粗略布局版面布局步骤制定方案深入优化网站建设与管理案例教程返回目录254.2版面布局常用的版面布局形式“T”结构布局“国”字型布局“标题”型布局POP布局对称对比布局框架网页布局网站建设与管理案例教程返回目录264.2版面布局设计要求–整洁大方：各种元素的运用应适度–突出重点：突出主体内容–平衡对称：页面的上下左右应给人以任意匀称的感觉–风格一致：样式统一，配色合理网站建设与管理案例教程返回目录274.2版面布局1）使用表格进行布局2）使用框架进行布局3）使用图层进行布局4）使用布局视图进行页面布局–布局模式–绘制布局表格和布局单元格–编辑布局表格和布局单元格–使用网格–内容添加，制作主页网站建设与管理案例教程返回目录285、网站形象设计网站标志设计标准色彩设计标准字体设计宣传标语设计网站建设与管理案例教程返回目录296、网页设计的原则控制页面的总规模分解大型表格少用图片来叙述内容标记图像大小重用图像选择合适的格式减少图像的数目使用javascript少用个背景音乐网站建设与管理案例教程返回目录307.1网站技术规范文件命名规范（网页文件及目录、图片命名）目录结构规范网页尺寸规范形象设计规范（标志、标准色和标准字）内容编辑规范（正文、标题、内容）导航规范网站建设与管理案例教程返回目录317.2网页文件命名规范每个目录中应该包含一个缺省的html文件，文件名统一用index.html文件名统一用小写英文字母、数字和下划线组合多个同类型文件使用英文字母加数字命名，字母和数字之间用”_”分隔。如news_01.html。网站建设与管理案例教程返回目录327.3图片命名规范名称分为头尾两部分，用下划线隔开头部分表示此图片的大致性质。如menu尾部分用来表示图片的具体含义。如menu_aboutus.gifmenu_job.gifJs的命名原则以功能的命名。如广告条ad.js网站建设与管理案例教程返回目录337.4目录结构规范目录的命名以小写字母和下划线组成根目录一般只存放index.htm以及其他系统文件每个主要栏目设一个相应的独立目录根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片所有js、asp、php等脚本存放在根目录下的scripts目录中所有的CGI程序存放在根目录的cgi-bin目录所有CSS文件存放在根目录下的style目录中所有Flash、AVI等文件放在根目录下的media目录中