web技术与开发设计.ppt

Web 开发与技术设计 第二讲 网站设计（一） 网站设计 网站设计，包含的内容非常多。大体分 两个方面： n一方面是纯网站本身的设计，比如文字 排版、图片制作、平面设计、三维立体 设计、静态无声图文、动态有声影像等 ； n另一方面是网站的延伸设计，包括网站 的主题定位和浏览群的定位、智能交互 、制作策划、形象包装、宣传营销等等 。 提纲 n定位你的网站主题和名称 n网站的形象设计与CI 策划 n网站的栏目和版块 n网站的目录结构和链接结构 n网站的整体风格与创意设计 n版面布局与首页的设计 n色彩的搭配 n网页中的字体、插图处理、动画与广告 n考虑不同的浏览器和分辨率 定位网站主题 所谓主题也就是你的网站的题材。网络上的网站题材千奇 百怪,琳琅满目。只要你想的到，就可以把它制作出来。 n第1类：网上求职 n第2类：网上聊天即时信息 / ICQ n第3类：网上社区讨论 / 邮件列表 n第4类：计算机技术 n第5类：网页 / 网站开发 n第6类：娱乐网站 n第7类：旅行 n第8类：参考 / 资讯 n第9类：家庭 / 教育 n第10类：生活 / 时尚 一些常见的题材 古典音乐免费软件红楼梦古今佳句名言 科幻小说金庸客栈美容美发游戏排行榜 国画画廊象棋世家能吃是福GIF动画库 陶艺园地漫画天地中国足球摄影俱乐部 中华佛义幽默轻松体育博览中国古典诗词 流行情报电子贺卡旅游天地Windows技巧 电影世界软件宝库国旗大展网页研习室 影视偶像天文星空爱情占星电脑杂志 Midi金曲少年园地宠物猫武器博物馆 游戏天堂儿歌专集热带鱼硬件开讲 PS王国健康资讯女性主义媒体大师 集邮天天花店破解资源影像合成 骇客资讯免费大全Java小屋病毒字典 网上教室超频天堂股市信息超级图书馆 题材选择的建议 n主题要小而精。定位要小，内容要精。 n题材最好是你自己擅长或者喜爱的内容 。兴趣是制作网站的动力，没有热情， 很难设计制作出杰出的作品。 n题材不要太滥或者目标太高。“太滥” 是指到处可见，人人都有的题材； “ 目标太高”是指在这一题材上已经有非 常优秀，知名度很高的站点，你要超过 它是很困难的。 网站名称的建议 n名称要正。这个“正”其实就是要合法， 和理，和情。 n名称要易记。除非特定需要，网站名称最 好用中文名称，不要使用英文或者中英文 混合型名称。另外，网站名称的字数应该 控制在六个字（最好四个字）以内。 n名称要有特色。如果能体现一定的内涵， 给浏览者更多的视觉冲击和空间想象力， 则为上品。如：网页陶吧，天籁绝音。 网站的形象设计与CI策划 通过网站发布的信息大体可分为两个方面。一方面是 具体的实用信息。主要是由文字数据和图形图像组成 ，有些网站还可以使用动画、声音等多媒体技术,它 们通过网站本身的栏目设置体现出来，比如文字内容 、图片、动画、动态有声影像等；另一方面是广义的 信息。包括网站的CI设计、网站主题定位和网民群体 的定位，以及网页的制作策划形象、包装、宣传、营 销等等。它主要是通过视觉语言来树立网站的社会形 象，从而达到广告宣传的效果。如果说实用信息的文 字数据及图形图像是由业务部门提供的话，广义信息 则是由管理部门提供的，甚至需要借助广告策划的眼 光进行全面的CI设计才可能有一个好的方案。 CI 所谓CI，是广告业的一个术语，是英文 Corporate Identity的缩写。意思是通 过视觉来统一企业的形象，即通过视觉 语言的运用来树立形象传播信息，从而 达到让全社会认识、了解、接受的目的 。在现实生活中，通过CI策划为我们所 熟悉的企业和产品比比皆是。如可口可 乐公司采用全球统一的标志和色彩对产 品进行统一的包装，给广大消费者印象 极为深刻。 设计网站的标志（logo） 就如同商标一样，logo是一个站点特色 和内涵的集中体现，看见logo就能让大 家联想起站点。标志图形的设计创意来 自网站的名称和内容，标志可以是中文 英文字母，可以是符号图案，可以是动 物或者人物等等。 网站标志设计创意 n选用有代表性 的人物、动物 、花草。可以 用它们作为设 计的蓝本，加 以卡通化和艺 术化。 网站标志设计创意 n网站有专业性的，可 以以本专业有代表性 的物品作为标志。 网站标志设计创意 n最常用和最简单的方式是用自己网站名 称的英文字母作标志。采用不同的字体 、字母的变形组合可以很容易制作好自 己的标志。 选择网站的标准色彩 网站给人的第一印象来自视觉的 色彩感受，确定网站的标准色彩 是网站建设重要的一步。美术设 计将这项工作称为定色调、定调 子。不同的色彩及色彩的搭配产 生不同的效果，它不但关系到网 站内容的传达，而且会影响到网 上浏览者的情绪。 Intel公司用蔚蓝色作本企业的标准色。蔚蓝色是海洋的颜色，富 于现代气息，其网站以蓝色为主色调 可口可乐公司用红色作本企业的标准色，可口可乐公司的红色是与 徽标同时出现的，早已为大众熟知。标准色也成为公司的无形资产 本。 可口可乐公司用红色作本企业的标准色，可口可乐公司的红色是与 徽标同时出现的，早已为大众熟知。标准色也成为公司的无形资产 本。 我国著 名的IT 企业 联想集 团以 蓝色 为标 准色， 它的网 站也突 出了蓝 色色调 。 我国著名的IT 企业联 想集团以蓝色为标 准色 ，它的网站也突出了蓝色色调。 中国建设银行的网站也突出了蓝色色调。 奥迪公司的网页以灰色为主，疏体设计，显得宽敞舒展 奔驰汽车公司的主页简约而华贵十分耐看 选择网站的标准色彩 一般来说，网站的标准色彩只能 是一种，具体应用时可以标准色 为中心，利用它的明度变化产生 不同的色彩。标准色彩要广泛运 用于网站的标志、标题、主菜单 和背景色块，给人以整体统一的 感觉。其它色彩只是作为对比和 衬托，绝不能喧宾夺主。 选择网站的标准色彩 并不是所有的色彩都适合于作为网页 标准色的，网上常见的颜色有：绿、 蓝、黄、橙色及黑、白、灰色。红色 自身太艳，尤其是在RGB 色彩模式下 ，红色使上网浏览者的眼睛容易疲劳 ，不适于大面积的使用。只有一些女 性生活主题的站点，如化妆品、服装 、交友站点以粉红色为基调，给人以 温馨柔和的印象。 确定色彩的方法 在PhotoShop 里打开Color Picker 的窗口 ，选择好所需 的颜色后分别 记下右侧RGB 色彩模式的数 值和16 进制 的HTML 语言 的色彩编码。 以后使用标准 色时直接输入 数值，由数值 产生色彩 选择网站的标准字体 中文站点网页默认的字体是宋体。这里 的所谓标准字体是指网站用于标志、标 题、主菜单的特有字体，网站美术设计 师为了体现站点的“与众不同”和特有 风格，可以根据设计的需要选择一些特 别字体。需要说明的是，使用各种特别 字体只能用图形图像的形式出现在网 页中，因为很可能浏览者的计算机字 库里没有安装你所选择的特别字体， 那么你所设计制作的网页便不能被显 示出来。 少年 儿童 站点 可以 用活 泼的 字体 ，看 起来 天真 可爱 。 传统艺术站点可以用篆字、隶书 ，以此衬托出深厚的文化底蕴； 有些站 点用传 统书法 作站名 的标题 字，则 需要将 书法作 品扫描 处理后 作为图 像置放 到网页 上去。 构思网站的广告词 现代社会是一个信息激增生活节奏加快 的社会，人们没有时间、没有耐心留意 那些无关紧要的东西。因而传达广告信 息时往往要求高度精炼、明确、简洁。 网站由于它自身的条件所限，更需要简 洁精炼的句子传达信息。网站设计者应 努力用一句话、一个词来高度概括网站 的性质特点和网站的目标，创造出类似 实际生活中的广告金语来，在最短的时 间内传达出最丰富的内涵。 小结 标志、色彩、字体和广告语四个方 面是一个网站树立CI 形象的关键 。确切地说是网站的表面工作，设 计并完成这四项工作，网站的整体 形象就有一个基本的轮廓，有了一 个统一的面目，并且具有了一定的 专业性，与许多业余的网站设计有 了一个质的区别。 如何规划网站栏目和板块 建立一个网站好比写一篇文章，首先要 拟好提纲，文章才能主题明确，层次清 晰；也好比造一座高楼，首先要设计好 框架图纸，才能使楼房结构合理。 初学者最容易犯的错误就是：确定题材 后立刻开始制作。当一页一页制作完毕 后才发现：网站结构不清晰，目录庞杂 ，内容东一块西一块。结果不但浏览者 看得糊涂，自己扩充和维护网站也相当 困难。 如何规划网站栏目和板块 在动手制作网页前，一定要考虑 好以下三方面： n确定栏目和版块 n确定网站的目录结构和链接结构 n确定网站的整体风格创意设计 确定网站的栏目和版块 一个网站的主题内容及素材确定之后， 站点的设计者就应该收集和组织大量的 相关的资料内容来充实、丰富它。在大 量的信息素材面前，如果网站没有一个 合理的、符合网络技术特点、同时符合 网民浏览习惯的板块和栏目设置，恐怕 再好的内容也会“养在闺中人未识”。 没有机会与网民见面，自己也达不到设 立网站的初衷。 举个例子 有一个以提供动画素材为主题的站点， 它的主栏目是：关于站长，本站导航， 动画宝库，本站论坛，本站留言本，联 系站长。首页上还写着本站网址、版权 申明、将本站设为首页、将本站加入收 藏等字样。最主要的，最吸引人的动画 素材在主栏目里占1/6，在首页上一字 没提。那么即使这个站点的确有大量的 ，精美的动画素材，也很难吸引浏览者 继续挖掘。 网站栏目的设置的原则 n重点突出 n方便用户 网站栏目的实质是一个网站内容的大纲 索引。就好比一本书的目录，集中了各 个章节的名称及页码。索引应该引导浏 览者寻找网站里最主要的东西，在设置 栏目的时候，要仔细考虑内容的轻重缓 急，合理安排、突出重点 。 栏目设置的具体做法 n细致地划分主要内容栏目 n开门见山地列出主要内容 n首页设置超级链接和搜索引擎 n设定双向交流的栏目 n设置信息下载和咨询服务栏目 n方便实用的网站指南 细致地划分主要内容栏目 将主要内容 信息按一定 的方法分类 ，并为它们 设立专门的 栏目。主题 栏目个数在 总栏目中占 绝对优势， 这样的网站 专业主题突 出，容易给 人留下深刻 印象，并且 过目不忘 。 开门见山地列出主要内容 网页的阅读方式与图书不同，网页的内容一般 分为几个层次，上下呈线性分布结构，所以处 于线性末端的内容需要鼠标点击几次才会找得 到。如果它与另一条线型末端的内容之间没有 链接的话，浏览者只有沿原路退回去才能浏览 到它，也就是通常所说的“藏得太深”。由于 这个原因，网站的主要内容一定要放在首页或 一二级栏目中，如果因信息内容结构问题不得 不放在较深的位置上，一定设法将它在首页安 排超级连接，同时在其他网页放置多个超级连 接，以便使浏览者很容易地找到它。 首页设置超级链接和搜索引擎 网站的栏目分层设置，使网站的内 容安排得有条理，结构关系清楚， 但也会把重要内容放得太深。解决 问题的办法是：在保持网站栏目结 构的前提下，把最重要的内容链接 到首页。如果网站的内容庞大，层 次较多，最好设置搜索引擎，并且 设置本站导航栏目，可以帮助初访 者快速找到他们想要的内容。 设置搜索 引擎，并 且设置本 站指南栏 目，可以 帮助初访 者快速找 到他们想 要的内容 。 设定双向交流的栏目 所谓交流栏目，是指论坛、留言本、邮 件列表等，可以让浏览者有机会发表他 们的意见，参与网站的活动。网络的最 大优势之一是为人们提供相互沟通的手 段，设立双向交流栏目比简单的留一个E -mail 更具有亲和力,更能发挥出网络技术 的优势，也使网站显得更为正规可信。 济南大学Web主站留言板 济南大学信息科学与工程学院Web主站留言板 济南大学“信控在线”网站升华论坛 设置信息下载和咨询服务栏目 n设置一 个资料 下载栏 目，会 大大方 便用户 使用信 息的需 求,得 到用户 的好评 。 设置信息下载和咨询服务栏目 n设立一个 咨询服务 栏目，将 一些大家 都关心的 、有代表 性的问题 汇编起来 ，既方便 了网民， 也可以及 时得到有 关信息的 反馈意见 。 方便实用的网站指南 网站指南应该将网站的主要栏目及 其层次关系以表格的样式列出来， 就像一本书的目录一样，将书的章 、节、段的标题收录在一起，以列 表的方式显示它的结构关系，并标 明页码，供读者查询。网站指南比 书的目录更有其方便之处，它可以 把每一个栏目名称都做成一个链接 ，通过链接，直接显示该页面。 可口 可乐 公司 中国 网站 的站 点地 图 划分栏目需要注意 n尽可能删除与主题无关的栏目 n尽可能将网站最有价值的内容 列在栏目上 n尽可能方便访问者的浏览和查 询 版块设置 设置版块应该注意 n各版块要有相对独立性 n各版块要有相互关联 n版块的内容要围绕站点主题。 版块比栏目的概念要大一些，每个版块都有自己的栏目。 网站的目录结构和链接结构 n设计目录结构的原则是方便网 站的管理与维护 n设计链接结构的原则是方便浏 览者的阅读。 网站的目录结构 网站的目录是指建立网站时创建的路 径，它们通常是一个个的文件夹。如 在用Frontpage 建立网站时，都默认 建立了根目录和Images子目录。目录 的结构是一个容易忽略的问题，目前 我国许多网站都未经认真规划，随意 创建子目录。目录结构的好坏对浏览 者来说并没有什么太大的感觉，但是 对于站点本身的上传维护，内容信息 未来的扩充和移植有着重要的影响。 建立目录结构应注意的问题 n合理安排文件的目录，不要将所有文件 都存放在根目录下 n按栏目内容建立子目录 n在每个一级目录或二级目录下都建立独 立的Images 目录 n目录的层次不要太多 n不要使用中文目录 n使用意义明确的目录文件名 网站的链接结构 网站的链接结构是指页面之间相互链 接关系。如果把这种关系画成示意图 表，就好比一个拓扑结构图。它建立 在目录结构基础之上，但可以跨越目 录。形象的说，每个页面都是一个固 定点，链接则是在两个固定点之间的 连线，一个点可以和一个点连接，也 可以和多个点连接。更重要的是，这 些点并不是分布在一个平面上，而是 存在于一个立体的空间中。 链接结构的原则 我们研究网站的链接结构的目 的在于：用最少的链接，使浏 览最有效率。 安排链接结构的原则，一是要 符合浏览者的思维习惯和浏览 习惯，二是要将网站中最重要 的信息有最多的机会与浏览者 见面。 链接结构的两种基本建立方式 。 n树状链接结构 首页链接指向一级页面，一级页面链接 指向二级页面。这样的链接结构，页面 在被浏览时，一级一级地进入，一级一 级地退出。优点是：条理清晰，访问者 明确知道自己在什么位置，不会迷路； 缺点是：浏览效率低，因为从一个栏目 下的子页面到另一个栏目下的子页面， 必须返回首页后才能再进入。内容较少 的个人站点可以采用这种链接结构。 树状链接结构 链接结构的两种基本建立方式 。 n星状链接结构 类似网络服务器的链接，在每个网页设置一 个共同的链接枢纽，使所有的页面都可通过 枢纽保持链接，也就是说链接枢纽是所有页 面的入口。它的优点是：浏览方便，