网页设计与网站建设课件

1、网页设计与网站建设,第四章 综合案例,完成一个网站的设计与制作,目录,4.1 网站设计的基本流程 4.2 网站规划 4.3 网站整体设计 4.4 模板与库 4.5 行为,3,学习交流PPT,4.1 网站设计的基本流程,4,学习交流PPT,4.2 网站的规划,网站需求分析 网站的风格定位 网站的内容组织,5,学习交流PPT,4.2.1 网站的需求分析,需求分析的任务： 1、用户类型面对不同的用户类型，网站需要满足的用户需求也不同。2、明确用户需求,确定网站要实现的功能向客户调研、市场调研、“角色互换”思考 3、用户的潜在需求 “角色互换”思考 只有准确把握用户需求，才能做出用户真正喜欢的网站。,

2、6,学习交流PPT,需求分析案例,7,学习交流PPT,实战1,以小组为单位，共同确定一个网站主题，进行网站需求分析，做好分析记录，完成需求分析报告。 要求： 以小组为单位，共同确定一个网站主题； 2、小组两两组合，一组作为客户方，提出制作要求，另一组作为制作方，进行需求分析记录。 客户方和制作方角色互换，完成另一组的需求分析报告。 小组成员之间要团结协作。小组之间要增强沟通。分别完成作为客户方和制作方的任务。,8,学习交流PPT,4.2.2 网站整体风格定位,风格定位是指站点内容与整体形式给浏览者的综合感受； 风格定位目的：以特色的形式体现特色的内容。 原则： 建立在有价值的内容之上 独特而不

3、怪异,9,学习交流PPT,举例：,生动活泼 、有趣味的、适合于玩乐性质的网站 时尚、前卫适合于化妆品、服装品牌等网站 清新、阳光适合于学生类的网站 专业、严肃适合于科技科研类的网站 平易近人、具有亲和力适合于门户信息类网站,10,学习交流PPT,4.2.3 网站内容组织,栏目规划 作用：提纲挈领、点题主题、以及网站导航 实质：是对网站内容的高度提炼。 方法：用最简练的语言提炼出网站中每一个部分的内容，清晰地告诉浏览者网站在说什么，有哪些信息和功能。 归根结底，成功的栏目规划，还是基于对用户需求的理解。对于用户和需求理解得越准确，越深入，网站的栏目也就越具吸引力，能够留住越多的潜在客户。,11,

4、学习交流PPT,实战2：确定网站风格，规划网站栏目,要求： 1、风格定位：独特、不能雷同、不能模仿 2、栏目规划：详细、全面,12,学习交流PPT,4.3 网站整体设计,4.3.1整体设计的要素 4.3.2页面布局 4.3.3首页及导航系统设计,13,学习交流PPT,整体设计目的与众不同 Logo 色彩(重点、难点） 字体 标语,4.3.1 设计的要素,14,学习交流PPT,1、优秀logo欣赏四大门户网站,15,学习交流PPT,2、色彩设计,色彩是人的视觉最敏感的东西，网页色彩处理得好，可以锦上添花，达到事半功倍的效果 但，色彩搭配一直以来是个很模糊的事情，就是我们常说的凭“感觉”，而且每个

5、人对于色彩的感觉都是不一样的。 色彩设计的总原则“总体协调，局部对比”,16,学习交流PPT,（1）色彩搭配原理：,鲜明性色彩要鲜艳，容易引人注目 独特性要有与众不同的色彩，便得大家对你的网站印象强烈 合适性色彩和要表达的内容气氛适合，如用粉色体现女性站点的柔性 联想性不同色彩会产生不同的联想，蓝色想到天空、黑色想到黑夜、红色想到喜事,17,学习交流PPT,（2）色彩搭配技巧：,设计三种颜色：主色调、对比色、点睛色 用一种色彩先选定一种色彩，然后调整透明度或者饱和度（变淡或加深），产生新的色彩，这样的页面看起来色彩统一，有层次感。 用两种色彩先选定一种色彩，然后选择它的对比色）。可使整个页面色

6、彩丰富但不花稍 用一个色系即一个感觉的色彩，如淡蓝、淡黄、淡绿；或土黄、土灰、土蓝。 用黑色和一种彩色比如大红的字体配黑色的边框感觉很“跳” 推荐网站：(禅意花园),18,学习交流PPT,一种颜色的渐变,19,学习交流PPT,两种颜色,20,学习交流PPT,同类色,21,学习交流PPT,黑色和绿色,22,学习交流PPT,（3）注意事项：,尽量控制在3种色彩以内，太多则让人眼花缭乱。 标准色彩即主色用于网站的标志、标题、主菜单、和主色块。其它色彩只是作为缀和衬托，绝不能喧宾夺主。 背景和前文的对比尽量要大，以便突出主要文字内容，绝对不要用花纹繁复的图案作背景。 相关课程色彩构成,23,学习交流P

7、PT,（4）常用配色方案：,24,学习交流PPT,25,学习交流PPT,26,学习交流PPT,27,学习交流PPT,3、字体设计,设计网站的标准字体，用于标志、标题、主菜单 如果不是常用字体，为了保证所有浏览器都能正确显示，需要用图像制作,28,学习交流PPT,4、网站的宣传标语,宣传标语体现网站的目标、理念、宗旨等“真诚到永远”，“给你一颗奔腾的心”，“只粘目光不粘尘”，勤奋学习，知行合一 宣传标语写在logo中，也可以用横幅广告（banner）来体现,29,学习交流PPT,请为你的网站进行整体设计（按顺序） 色彩方案(4种) 标准字体 logo 宣传标语，及包含网站主题及标语的banner

8、 并说明设计思路，说明你是如何突出网站风格的,实战3：,30,学习交流PPT,如果用一句话来描述你的站点，应该是（） 有创意、有实力、有美感、有冲击力 想到你的站点，可以想到的颜色是（） 热情的红色、幻想的天蓝色， 想到你的站点，可以联想的画面是（） 杂货店、书店、 如果网站是一个人，他拥有的个性是（） 活泼可爱的儿童、思想成熟的中年人、 作为站长，你希望给人的印象是（） 敬业、认真负责、有深度、直爽、 用一种动物做比喻，你的站点是（） 兔子（聪明敏感）、狮子（自信威武）、 浏览者觉得你和其他网站不同（） 可以信赖、信息最多、交流方便,测试一下自已的设计吧,31,学习交流PPT,4.3.2 网

9、页布局与制作,布局就是指以最适合用户浏览的方式将图片和文字排放在页面的不同位置。 把网页看成是由很多个小块组合而成。 网页布局就是这些小块的摆放 常见的布局形式 T型布局 同字、国字型、“口”型布局 POP布局,32,学习交流PPT,一、“T”结构布局(2列结构)：,页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局 因为菜单条背景较深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。 这是网页设计中用的最广泛的一种布局方式。 优点是页面结构清晰，主次分明。 缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。,33,学习交流PPT,二、同字/国字型/口型布局,

10、特点：最上面是水平放置的横幅广告和主导航栏，接下来是网站的主要内容，左右分裂2小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息。 典型的政府网站的首页形式。 【举例】作业中的环球教育在线、人大青年网,34,学习交流PPT,三、“三”型布局,用横幅广告将网页从上到下一条条分开 优点：设计简单，内容依次排列,35,学习交流PPT,三、POP型、封面型、flash型布局（1列）,指页面布局象一张宣传海报，以一张精美图片、或者flash动画作为页面的设计中心。常用于时尚类站点。 优点显而易见：漂亮吸引人。 缺点就是速度慢。作为版面布局还是值得借鉴的。,36,学习交流PPT,五、

11、什么样的布局是最好的？,如果栏目非常多，就要考虑用“国字型” ； 如果栏目不算太多而一些说明性的东西比较多，则可以考虑T型； 如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选； Flash型灵活性更好，好的Flash大大丰富了网页，但是它不适合表达过多的文字信息。,37,学习交流PPT,“T”布局左右两列采用黄金分割 “国”/“同”/“口”型布局的上、中、下分割同样不能平分，一般来讲中间占大约百分之六十。而上面占百分之三十，下面占百分之十。即下面是上面的三分之一，上面是中间的三分一。 “国”/“同”/“口”型布局的左、中、右分割左占百分之四十，中右各占百分之三十。或是

12、左右占百份之三十，中间占百分之四十。也可以进行532、622、442、的分配。 无论是上、下还是左、右都要尽量避免平分的局面。,六、各部分的分割比例,38,学习交流PPT,39,学习交流PPT,40,学习交流PPT,41,学习交流PPT,实战：设计网站各级页面的布局,首页 二级页面,42,学习交流PPT,4.3.3导航系统,网站中的导航系统就是网页上各种导航条的总称，用户通过导航系统中的各种导航元素，可以快速查询到自己所需要的信息。 导航的类型 全局导航 局部导航 路径导航 快捷导航 相关导航,43,学习交流PPT,1、全局导航,全局导航，即网站的主要导航 出现在网站的每一个页面上 并且要有一

13、致的外观和位置 扮演着对用户最基本的访问方向性指引。,44,学习交流PPT,45,学习交流PPT,2、局部导航,使用户在一个内容领域里按层次浏览 全局导航的延伸，指向同级或下级页面,46,学习交流PPT,47,学习交流PPT,3、其它导航,路径导航 路径导航显示了用户浏览页面的所属栏目及路径，帮助用户访问该页面的上下级栏目，从而更完整地了解网站信息。 快捷导航 对于网站的老用户而言，需要快捷地到达所需栏目，快捷导航为这些用户提供直观的栏目链接，减少用户的点击次数和时间，提升浏览效率。 相关导航 为了增加用户的停留时间，网站策划者需要充分考虑浏览者的需求，为页面设置相关导航，让浏览者可以方便地去

14、到所关注的相关页面，从而增进对企业的了解，提升合作机率。 基本原则：快进快出,48,学习交流PPT,有关导航栏的位置,导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目 一般来讲，导航栏要在“第一屏”能显示出来 横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。,49,学习交流PPT,实战：设计网站的导航,类型 主导航 局部导航 要求 内容、风格 位置,50,学习交流PPT,4.3.4首页设计,首页是指一个网站的

15、主索引页，是令访客了解网站概貌并引导其阅读重点内容的向导。 首页设计要求： 标题明了通常位于页面的上端或中央。 表明信息在“第一屏”的“视觉中心”主要栏目的内容或简要介绍,51,学习交流PPT,关于第一屏,所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。 第一屏有多“大”呢？其实这是未知的，根据屏幕的尺寸决定 在1024*768的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为1000px*600px,52,学习交流PPT,视觉中心,在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是视觉中心点。,53,学习

16、交流PPT,举例,54,学习交流PPT,55,学习交流PPT,首页设计要注意的问题,主题明确 尽可能缩短下载时间 合理设计你网站结构，并为你的网站添加进去相应的导航栏,56,学习交流PPT,特别提示,建立在丰富的有价值的内容基础之上 必须搞清楚自己给人的印象是什么，对象是谁 确定印象后，努力实现和加强这种印象 Logo出现在每个页面上 对一个网站来说，要突出色彩,57,学习交流PPT,实战：设计首页,用图像软件设计自己的首页,58,学习交流PPT,4.4 模板与库,什么是模板 一种文档，扩展名为.dwt 模板的编辑方式与.html文件完全相同 根据模板可以批量生成html文件 当编辑了模板后，

17、相应的html文件可以自动更新 模板的创建方法 “文件”菜单中的“新建”“空模板” “文件”菜单中“另存为模板” 模板的作用 可以使网站和网页具有统一的结构和外观,59,学习交流PPT,实战：创建模板,60,学习交流PPT,4.4 模板与库,什么是库 库是一种Dreamweaver 文件，扩展名为.lib。 Dreamweaver 将库项目存储在每个站点的本地根文件夹下的 Library 文件夹中。每个站点都有自己的库。 库中可以存放包括图像、表格、声音和使用 Adobe Flash 创建的文件。 每当编辑某个库项目时，可以自动更新所有使用该项目的页面。 库的创建方法 “资料”面板“库”面板右下角“新建库项目” 选择html中的已有内容，再“新建库项目” 库的作用 定义需要多次重复使用的内容块 简化操作,61,学习交流PPT,实践：库的创建,62,学习交流PPT,4.5 行为,什么是行为 行为是对象、事件和由该事件触发的动作的组合。 对象是产生行为的主体。网页中的很多元素都可