网站设计.ppt

《网站设计.ppt》由会员分享，可在线阅读，更多相关《网站设计.ppt（47页珍藏版）》请在三一办公上搜索。

1、第2章 网站设计,2009年7月,JSP动态网页设计,2,本阶段的工作任务,网站建设在本阶段的工作任务包括：,2009年7月,JSP动态网页设计,3,2.1设计网站的功能模块-知识储备,目前许多企业发布新闻的方式大多是采用静态的HTML页面，每次更新新闻信息时需要做一个页面，然后用FTP上传至服务器，再修改页面链接，使新增的新闻页面能正常显示。但这样的维护方式非常麻烦。建立新闻类别网站系统可以大大减轻网站更新维护的工作量，通过新闻信息的后台维护程序，网站管理员只需要在浏览器上录入新闻文字就可以快速实现新闻更新，从而大大加快了信息的传播速度，时时保持网站的活动力和影响力。,2009年7月,JSP

2、动态网页设计,4,2.1.1 任务描述,设计新闻类别网站的功能模块,任务,2009年7月,JSP动态网页设计,5,2.1.2 任务实现,1,2,新闻类别网站前台功能设计,新闻类别网站后台功能设计,设计新闻类别网站的功能模块的步骤,2009年7月,JSP动态网页设计,6,2.1.2 任务实现前台功能设计,前台为浏览者提供浏览网站新闻的平台。这部分功能设计主要是网站前台版面的设计，包括网站栏目的划分、色彩的搭配、框架的设计、网站风格创意的体现等等。这些内容具体请参考本章后面的知识。,新闻类别网站前台功能设计,2009年7月,JSP动态网页设计,7,2.1.2 任务实现后台功能设计,后台功能设计从以

3、下几个模块来实现：用户管理模块栏目模块专题模块新闻模块友情链接模块系统日志管理模块系统配置管理,新闻类别网站后台功能设计,2009年7月,JSP动态网页设计,8,2.1.3 相关知识拓展,定位了网站主题，确立了网站的CI形象、风格和创意等，收集了相关的素材，接下来是否该进入实质性的设计制作阶段呢？答案是：不能。经验告诉我们，建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰；也好比造一座高楼，首先要设计好框架图纸，才能使楼房结构合理。因此，在动手制作网页前，一定要设计好网站的功能模块，考虑好栏目划分与未来的设计细节。,网站的功能模块,2009年7月,JSP动态网页设计,9,

4、栏目的实质是一个网站的大纲索引，能够将网站的主体明确显示出来。在制定网站栏目的时候，要仔细考虑，合理安排。要尽可能删除与网站主题无关的栏目，尽可能将网站最有价值的内容明显地列在首页栏目上，尽可能方便访问者的浏览和查询。,2.1.4 经验总结,1,设置版块时要注意各版块既要保持相对的独立性，又要保持相互关联，并且各版块的内容要围绕网站主题，不要脱离主题。,2,2009年7月,JSP动态网页设计,10,2.2设计网站的版面-知识储备,版面设计,草案设计,粗略布局设计,定案设计,2009年7月,JSP动态网页设计,11,2.2.1 任务描述,设计新闻类别网站的版面。,任务,2009年7月,JSP动态

5、网页设计,12,2.2.2 任务实现,2009年7月,JSP动态网页设计,13,2.2.2 任务实现-草案设计,2009年7月,JSP动态网页设计,14,2.2.2 任务实现-粗略布局,2009年7月,JSP动态网页设计,15,2.2.2 任务实现-定案,2009年7月,JSP动态网页设计,16,2.2.3 相关知识拓展(1),2.“口”型布局,4.对称对比布局,1.“T”型结构布局,3.“三”型布局,5.POP布局,几种常见的版面布局,2009年7月,JSP动态网页设计,17,2.2.3 相关知识拓展(2),版面异常平衡,版面凝视,版面正常平衡,版面对比,版面空白,版面设计的原则,版面尽量用

6、图片解说,2009年7月,JSP动态网页设计,18,2.2.4 经验总结,在网站的版面布局上要注意加强各对象展现的视觉效果，加强文案的可视度和可读性，整体网站形成一个统一的感觉，要不时地更新网站，保持网站新鲜的内容和独特的个性。,2009年7月,JSP动态网页设计,19,2.3设计网站的页面框架-知识储备,Fireworks是一个强大的网页图形设计工具，可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图像，下拉菜单等，设计完成以后，若设计结果要在网页中使用，可以将它输出为html文件，还能输出为可以在Photoshop,Illustrator和Flas

7、h等软件中编辑的格式，从而实现与网页的无缝连接，为用户一体化的网络设计方案提供支持。,2009年7月,JSP动态网页设计,20,2.3.1 任务描述,利用Adobe Fireworks CS3进行新闻类别网站页面框架的设计。,任务,2009年7月,JSP动态网页设计,21,2.3.2 任务实现,利用Adobe Fireworks CS3进行新闻类别网站页面框架的设计的具体操作步骤,2009年7月,JSP动态网页设计,22,2.3.2 任务实现-(1),2009年7月,JSP动态网页设计,23,2.3.2 任务实现-(2),2009年7月,JSP动态网页设计,24,2.3.2 任务实现-(3),

8、2009年7月,JSP动态网页设计,25,2.3.3 相关知识拓展(1),色彩的基本知识,2009年7月,JSP动态网页设计,26,2.3.3 相关知识拓展(2),一种最具凉爽、清新、专业的色彩。若与白色混合，能体现柔顺、淡雅、浪漫的气氛。,能产生中庸、平凡、温和、谦让、中立和高雅的感觉。,介于冷暖两种色彩的中间，能表现出和睦、宁静、健康、安全的感觉。若与金黄、淡白搭配，可以产生优雅、舒适的气氛。,能表示出快乐、希望、智慧和轻快的个性，它的明亮度最高。,一种激奋的色彩，能产生刺激效果，使人产生冲动、愤怒、热情、活力的感觉。,色彩与心理不同的颜色会给浏览者带来不同的心理感受。,2009年7月,J

9、SP动态网页设计,27,2.3.3 相关知识拓展(3),一般在刚开始学习网页制作时，由于技术和知识的缺乏，只能制作出简单的网页，色彩比较单一，这时的用色可以称为“单色”；有了一定的网页制作基础和材料后,又会将收集到的认为是最好的图片、最满意的色彩堆砌在网页上，造成网站色彩杂乱、没有个性和风格，这时的用色可以称为“五彩缤纷”；随着网页制作经验的积累，设计者会重新定位自己的网站，选择适合自己的色彩，使网站设计走向成功，这时的用色可以称为“标准色”；当设计理念和制作技术达到顶峰时，又会返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点，这时的用色又称为“单色”。,网页色彩掌握的过程,2009年

10、7月,JSP动态网页设计,28,2.3.4 经验总结(1),选用一种色彩作为网站主色调,选用对比色作为网站主色调,选用一个色系的色彩作为网站主色调,A,C,B,几种常见的配色方案,选用黑色和另一种彩色作为网站主色调,D,2009年7月,JSP动态网页设计,29,2.3.4 经验总结(2),一些不合理的搭配方案：（1）忌讳使用颜色对比过于强烈的搭配色做网站主色。（2）网站配色要简洁，不要试图将所有颜色都用到，主色要尽量控制在三种色彩之内。（3）网页背景和前景的对比要明显，尽量少用花纹复杂的背景图片，避免喧宾夺主，以便突出显示文字内容。,2009年7月,JSP动态网页设计,30,2.4设计网站的首

11、页-知识储备（1）,确定网站的功能模块,设计网站的版面,进行具体的界面设计,处理设计技术上的细节,设计首页的一般步骤,2009年7月,JSP动态网页设计,31,2.4.1 任务描述,利用Adobe Fireworks CS3进行新闻类别网站的网站首页的设计,任务,2009年7月,JSP动态网页设计,32,2.4.2 任务实现,利用Adobe Fireworks CS3进行新闻类别网站首页设计的具体操作步骤,完成 其他版块的设计制作,2009年7月,JSP动态网页设计,33,2.4.2 任务实现-(1),2009年7月,JSP动态网页设计,34,2.4.2 任务实现-(2),2009年7月,JS

12、P动态网页设计,35,2.4.2 任务实现-(3),2009年7月,JSP动态网页设计,36,2.4.2 任务实现-(4),2009年7月,JSP动态网页设计,37,2.4.3 相关知识拓展(1),框架元素：用于规划页面布局，每个框架里可以显示一个网页，框架的应用突破了原来浏览器只能显示一张网页的限制，应用了框架的网页能同时显示多个页面。,图像元素：比文本更直观，更具吸引力的网页元素。,空白元素：空白元素用来分开页面上的各元素。一个没有空白区的页面，给浏览者的感觉是页面很拥挤，容易引起阅读心理紧张，导致对这样的页面有一种厌烦抵触的感觉。,边距元素：控制网页所显示的内容距浏览器窗口边界的距离，类

13、似于WORD文档的上下左右边界。,列表元素：列表在网页占有极其重要的地位，规定了多种列表元素，可根据文本内容的特征选择不同的列表进行展示。,2009年7月,JSP动态网页设计,38,2.4.3 相关知识拓展(2),每一个页面都应该是相对独立的、完整的。只有照顾了整个页面空间的分配，空白才能表现出一定的活力，利用空白可以使页面布局生动活泼、松紧有度，使浏览者浏览页面时感觉到舒适、轻松和简洁。网页空白可以使用表格和透明GIF图像来实现。使用表格定位页面内容时，可以设置不填充内容的空白单元格来产生页面空白，达到页面布局松紧有度的效果。,“空白”元素,2009年7月,JSP动态网页设计,39,2.4.

14、3 相关知识拓展(3),在设计页面布局时，设计人员在纸面上画出页面布局的草图，将设想落实到纸面上，观看设计效果。人们经常会在瞬间产生一个好的灵感和想法，但这种想法若不及时记录下来很快又会从头脑中消失。因此当有了好的灵感和想法时应该立即用纸笔记录下来，以备以后用到页面设计当中。,纸面布局法,使用图形工具软件设计页面布局草图，可以使用比较熟悉的图形软件如Photoshop、Fireworks等。使用这些图形工具可以方便地设计页面布局和颜色，比纸面布局法更能查看页面布局的整体效果和真实效果，使用图形工具和层更容易修改和查看各种无法用纸张实现的效果。,软件布局法,2009年7月,JSP动态网页设计,4

15、0,2.4.4 经验总结,首页的设计是一个网站成功与否的关键。人们往往看到网站第一页就对站点产生一个整体的感觉。能不能促使浏览者继续点击进入，能否吸引浏览者多花时间驻留在站点上，全凭首页设计的“功力”了。所以，首页的设计和制作是绝对要重视和花心思的。一般首页设计和制作要占整个网站制作时间的40%。记住,宁可多花些时间在整体设计、框架制作和首页设计上，避免网站全部做好以后再修改，那将是最浪费精力、浪费时间、浪费金钱的事。,2009年7月,JSP动态网页设计,41,2.5网站其他页面的设计,2.5.1 任务描述,利用Adobe Fireworks CS3进行新闻类别网站其它功能页面的设计,任务,2

16、009年7月,JSP动态网页设计,42,2.5.2 任务实现,利用Adobe Fireworks CS3进行新闻类别网站其它功能页面设计的具体操作步骤,2009年7月,JSP动态网页设计,43,2.5.2 任务实现-(1),2009年7月,JSP动态网页设计,44,2.5.2 任务实现-(2),2009年7月,JSP动态网页设计,45,2.5.3 相关知识拓展,表格页面布局,透明GIF页面布局,层叠样式表页面布局,框架页面布局,Flash页面布局,页面布局技术,2009年7月,JSP动态网页设计,46,2.5.4 经验总结,整体网站拥有一致的设计风格是很重要的，其中网站首页的设计是重中之重，在首页的风格和样式确定后，其他页面的设计都要遵循这种风格，使网站整体看起来和谐统一。,2.6 实训,按照本章的讲解过程，利用Adobe Fireworks CS3或其它做图软件完成新闻类别网站的框架设计工作，并设计网站首页和各主要页面。,工作任务,