网站前台设计(精品·公开课件).ppt

第3章 网站开发技术 ----网站前台设计 教学任务 制定网站前台建设方案。主要包括网站主题与风格、网站栏目和版块、目录结构和链接结构、版面布局。 网站前台设计 定位网站主题与风格 网站栏目和版块的设计 网站目录结构的设计 版面布局 网站的形象设计 网页设计的原则 网站技术规范 1.1定位网站主题 1.1定位网站主题 1.2 树立网站的风格 风格指站点的整体形象给浏览者的综合感受 整体形象主要包括： 站点的CI（标志，色彩，字体，标语）， 版面布局， 浏览方式， 交互性， 文字，语气，内容价值，存在意义，站点荣誉等等 1.2 树立网站的风格 如何树立站点的风格 网站的内容要有价值 网站的配色要合理，并且合乎内容需求 网站要具有一定的个性：活泼、诚恳、奔放…… 与其他站点相比，要有自己的特色或不一样的地方 1.2 树立网站的风格 1.2 树立网站的风格 建立和加强风格印象 1.将标志logo尽可能的出现在每个页面上。在页眉，页脚或背景。 2.突出标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。 3.突出标准字体。在关键的标题，菜单，图片里使用统一的标准字体。 4.想一条朗朗上口宣传标语。把它做在banner里，或放在醒目的位置 5.使用统一的语气和人称。 6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。 7.创造一个特有的符号或图标。比如在一句链接前的一个点，可以使用,.。☆※○◇□△→等等。 8.用自己设计的花边，线条，点 9.展示你网站的荣誉和成功作品。 1.3 进行创意设计 创意是指站点的整体创意，(因为这个创意而产生这个站点，或者相同的内容，推出的创意不同) 创意思考的过程分五阶段 1.准备期--研究所搜集的资料，根据旧经验，启发新创意； 2.孵化期--将资料咀嚼消化，使意识自由发展，任意结合； 3.启示期--意识发展并结合，产生创意； 4.验证期--将产生的创意讨论修正； 5.形成期--设计制作网页，将创意具体化。 1.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.以上各项延伸组合　　 2、网站栏目和版块的设计 3.1 网站的目录结构（物理结构） 网站的目录是指你建立网站时创建的目录 目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。 目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。 3.1 网站的目录结构（物理结构） 3.1 网站的目录结构 建立目录结构的一些建议: 不要将所有文件都存放在根目录下，否则会造成： 文件管理混乱 上传速度慢 按栏目内容建立子目录 子目录的建立，首先按主菜单栏目建立 其他的次要栏目，需要经常更新的可以建立独立的子目录。不太更新的可合并放在一个目录下。 所有的程序一般都存放在特定目录下。 在每个主目录下都建立独立的images（图片）目录 目录的层次不要太深，不要超过3层。 3.1 网站的目录结构 其他注意事项: 1.不要使用中文目录。使用中文目录可能对网址的正确显示造成困难。 2.不要使用过长的目录。尽管服务器支持长文件名，但是太长的目录名不便于记忆。 3.尽量使用意义明确的目录。例如可以用Flash,Dhtml,Javascript来建立目录，也可以用1，2，3建立目录，但明显前者更明确，更便于记忆和管理。 3.1 网站的目录结构 网站的目录结构设计的方法：按网站的栏目和层次关系来设计 例如：主页文件及相关资料 放在根目录 各主栏目及相关 放在一级目录 主栏目下的各自栏目及相关 放在二级目录 ……… 在各目录中按文件的属性再分下一级目录。比如images、media、js等。 好处：方便维护和管理 3.2