web技术与开发设计.ppt

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