网页设计与网站建设2021/8/61第四章 综合案例完成一个网站的设计与制作2021/8/62目录o4.1 网站设计的基本流程o4.2 网站规划o4.3 网站整体设计o4.4 模板与库o4.5 行为2021/8/63设计维护规划实现发布4.1 网站设计的基本流程2021/8/644.2 网站的规划o网站需求分析o网站的风格定位o网站的内容组织2021/8/654.2.1 网站的需求分析o需求分析的任务：1、用户类型面对不同的用户类型，网站需要满足的用户需求也不同。2、明确用户需求,确定网站要实现的功能向客户调研、市场调研、“角色互换”思考 3、用户的潜在需求 “角色互换”思考只有准确把握用户需求，才能做出用户真正喜欢的网站。只有准确把握用户需求，才能做出用户真正喜欢的网站。2021/8/66需求分析案例2021/8/67实战1以小组为单位，共同确定一个网站主题，进行网站需求分析，做好分析记录，完成需求分析报告。要求：n以小组为单位，共同确定一个网站主题；n2、小组两两组合，一组作为客户方，提出制作要求，另一组作为制作方，进行需求分析记录。n客户方和制作方角色互换，完成另一组的需求分析报告。n小组成员之间要团结协作。小组之间要增强沟通。分别完成作为客户方和制作方的任务。 2021/8/684.2.2 网站整体风格定位o风格定位是指站点内容与整体形式给浏览者的综合感受；o风格定位目的：以特色的形式体现特色的内容。o原则：n建立在有价值的内容之上n独特而不怪异2021/8/69举例：o生动活泼 、有趣味的、适合于玩乐性质的网站o时尚、前卫适合于化妆品、服装品牌等网站o清新、阳光适合于学生类的网站o专业、严肃适合于科技科研类的网站o平易近人、具有亲和力适合于门户信息类网站 2021/8/6104.2.3 网站内容组织栏目规划o作用：提纲挈领、点题主题、以及网站导航o实质：是对网站内容的高度提炼。o方法：用最简练的语言提炼出网站中每一个部分的内容，清晰地告诉浏览者网站在说什么，有哪些信息和功能。归根结底，成功的栏目规划，还是基于对用户需求的理归根结底，成功的栏目规划，还是基于对用户需求的理解。对于用户和需求理解得越准确，越深入，网站的栏解。对于用户和需求理解得越准确，越深入，网站的栏目也就越具吸引力，能够留住越多的潜在客户。目也就越具吸引力，能够留住越多的潜在客户。2021/8/611实战2：确定网站风格，规划网站栏目要求：o1、风格定位：独特、不能雷同、不能模仿o2、栏目规划：详细、全面 2021/8/6124.3 网站整体设计4.3.1整体设计的要素4.3.2页面布局4.3.3首页及导航系统设计2021/8/613整体设计目的整体设计目的与众不同与众不同 nLogon色彩(重点、难点）n字体n标语4.3.1 设计的要素2021/8/6141、优秀logo欣赏四大门户网站2021/8/6152、色彩设计o色彩是人的视觉最敏感的东西，网页色彩处理得好，可以锦上添花，达到事半功倍的效果o但，色彩搭配一直以来是个很模糊的事情，就是我们常说的凭“感觉”，而且每个人对于色彩的感觉都是不一样的。o色彩设计的总原则“总体协调，局部对比总体协调，局部对比”2021/8/616（1）色彩搭配原理：o鲜明性色彩要鲜艳，容易引人注目o独特性要有与众不同的色彩，便得大家对你的网站印象强烈o合适性色彩和要表达的内容气氛适合，如用粉色体现女性站点的柔性o联想性不同色彩会产生不同的联想，蓝色想到天空、黑色想到黑夜、红色想到喜事2021/8/617（2）色彩搭配技巧：o设计三种颜色：主色调、对比色、点睛色o用一种色彩用一种色彩先选定一种色彩，然后调整透明度或者饱和度（变淡或加深），产生新的色彩，这样的页面看起来色彩统一，有层次感。o用两种色彩用两种色彩先选定一种色彩，然后选择它的对比色）。可使整个页面色彩丰富但不花稍o用一个色系用一个色系即一个感觉的色彩，如淡蓝、淡黄、淡绿；或土黄、土灰、土蓝。o用黑色和一种彩色用黑色和一种彩色比如大红的字体配黑色的边框感觉很“跳”推荐网站：http:/www.csszengarden.com(禅意花园)2021/8/618一种颜色的渐变2021/8/619两种颜色2021/8/620同类色2021/8/621黑色和绿色2021/8/622（3）注意事项：o尽量控制在3 3种色彩种色彩以内，太多则让人眼花缭乱。o标准色彩标准色彩即主色用于网站的标志、标题、主菜单、和主色块。其它色彩只是作为缀和衬托，绝不能喧宾夺主。o背景和前文的对比尽量要大对比尽量要大，以便突出主要文字内容，绝对不要用花纹繁复的图案作背景。o相关课程色彩构成相关课程色彩构成2021/8/623（4）常用配色方案：2021/8/6242021/8/6252021/8/6262021/8/6273、字体设计o设计网站的标准字体，用于标志、标题、主菜单o如果不是常用字体，为了保证所有浏览器都能正确显示，需要用图像制作2021/8/6284、网站的宣传标语o宣传标语体现网站的目标、理念、宗旨等“真诚到永远”，“给你一颗奔腾的心”，“只粘目光不粘尘”，勤奋学习，知行合一 o宣传标语写在logo中，也可以用横幅广告（banner）来体现2021/8/629o请为你的网站进行整体设计（按顺序）n色彩方案(4种)n标准字体nlogon宣传标语，及包含网站主题及标语的bannero并说明设计思路，说明你是如何突出网站风格的实战3：2021/8/630o如果用一句话来描述你的站点，应该是（）n有创意、有实力、有美感、有冲击力o想到你的站点，可以想到的颜色是（）n热情的红色、幻想的天蓝色，o想到你的站点，可以联想的画面是（）n杂货店、书店、o如果网站是一个人，他拥有的个性是（）n活泼可爱的儿童、思想成熟的中年人、o作为站长，你希望给人的印象是（）n敬业、认真负责、有深度、直爽、o用一种动物做比喻，你的站点是（）n兔子（聪明敏感）、狮子（自信威武）、o浏览者觉得你和其他网站不同（）n可以信赖、信息最多、交流方便测试一下自已的设计吧2021/8/6314.3.2 网页布局与制作o布局就是指以最适合最适合用户浏览的方式将图片和文字排放在页面的不同位置。n把网页看成是由很多个小块组合而成。n网页布局就是这些小块的摆放o常见的布局形式nT型布局n同字、国字型、“口”型布局nPOP布局2021/8/632一、“T”结构布局(2列结构)：o页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局o因为菜单条背景较深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。o这是网页设计中用的最广泛的一种布局方式。o优点是页面结构清晰，主次分明。o缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。2021/8/633二、同字/国字型/口型布局o特点：最上面是水平放置的横幅广告和主导航栏，接下来是网站的主要内容，左右分裂2小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息。o典型的政府网站的首页形式。【举例】作业中的环球教育在线、人大青年网2021/8/634三、“三”型布局o用横幅广告将网页从上到下一条条分开o优点：设计简单，内容依次排列2021/8/635三、POP型、封面型、flash型布局（1列）o指页面布局象一张宣传海报，以一张精美图片、或者flash动画作为页面的设计中心。常用于时尚类站点。o优点显而易见：漂亮吸引人。o缺点就是速度慢。作为版面布局还是值得借鉴的。 2021/8/636五、什么样的布局是最好的？ o如果栏目非常多，就要考虑用“国字型” ；o如果栏目不算太多而一些说明性的东西比较多，则可以考虑T型；o如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；oFlash型灵活性更好，好的Flash大大丰富了网页，但是它不适合表达过多的文字信息。 2021/8/637o“T”布局左右两列采用黄金分割o“国”/“同”/“口”型布局的上、中、下分割同样不能平分，一般来讲中间占大约百分之六十。而上面占百分之三十，下面占百分之十。即下面是上面的三分之一，上面是中间的三分一。o“国”/“同”/“口”型布局的左、中、右分割左占百分之四十，中右各占百分之三十。或是左右占百份之三十，中间占百分之四十。也可以进行532、622、442、的分配。无论是上、下还是左、右都要尽量避免平分的局面。六、各部分的分割比例2021/8/6382021/8/6392021/8/6402021/8/641实战：设计网站各级页面的布局o首页o二级页面2021/8/6424.3.3导航系统o网站中的导航系统就是网页上各种导航条的总称，用户通过导航系统中的各种导航元素，可以快速查询到自己所需要的信息。o导航的类型n全局导航n局部导航n路径导航n快捷导航n相关导航2021/8/6431、全局导航o全局导航，即网站的主要导航o出现在网站的每一个页面上o并且要有一致的外观和位置o扮演着对用户最基本的访问方向性指引。 2021/8/6442021/8/6452、局部导航o使用户在一个内容领域里按层次浏览o全局导航的延伸，指向同级或下级页面2021/8/6462021/8/6473、其它导航o路径导航 路径导航显示了用户浏览页面的所属栏目及路径，帮助用户访问该页面的上下级栏目，从而更完整地了解网站信息。o快捷导航 对于网站的老用户而言，需要快捷地到达所需栏目，快捷导航为这些用户提供直观的栏目链接，减少用户的点击次数和时间，提升浏览效率。 o相关导航 为了增加用户的停留时间，网站策划者需要充分考虑浏览者的需求，为页面设置相关导航，让浏览者可以方便地去到所关注的相关页面，从而增进对企业的了解，提升合作机率。 基本原则：快进快出基本原则：快进快出2021/8/648有关导航栏的位置 o导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目o一般来讲，导航栏要在“第一屏”能显示出来o横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。 2021/8/649实战：设计网站的导航o类型n主导航n局部导航o要求n内容、风格n位置2021/8/6504.3.4首页设计o首页是指一个网站的主索引页，是令访客了解网站概貌并引导其阅读重点内容的向导。o首页设计要求：n标题明了通常位于页面的上端或中央。n表明信息在“第一屏”的“视觉中心”主要栏目的内容或简要介绍2021/8/651关于第一屏 o所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。o第一屏有多“大”呢？其实这是未知的，根据屏幕的尺寸决定n在1024*768的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为1000px*600px2021/8/652视觉中心在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是视觉中心点。 2021/8/653举例2021/8/6542021/8/655首页设计要注意的问题o主题明确o尽可能缩短下载时间o合理设计你网站结构，并为你的网站添加进去相应的导航栏2021/8/656特别提示o建立在丰富的有价值的内容基础之上o必须搞清楚自己给人的印象是什么，对象是谁o确定印象后，努力实现和加强这种印象oLogo出现在每个页面上o对一个网站来说，要突出色彩2021/8/657实战：设计首页o用图像软件设计自己的首页2021/8/6584.4 模板与库o什么是模板n一种文档，扩展名为.dwtn模板的编辑方式与.html文件完全相同n根据模板可以批量生成html文件n当编辑了模板后，相应的html文件可以自动更新o模板的创建方法n“文件”菜单中的“新建”“空模板”n“文件”菜单中“另存为模板”o模板的作用n可以使网站和网页具有统一的结构和外观2021/8/659实战：创建模板2021/8/6604.4 模板与库o什么是库n库是一种Dreamweaver 文件，扩展名为.lib。 nDreamweaver 将库项目存储在每个站点的本地根文件夹下的 Library 文件夹中。每个站点都有自己的库。 n库中可以存放包括图像、表格、声音和使用 Adobe Flash 创建的文件。 n每当编辑某个库项目时，可以自动更新所有使用该项目的页面。 o库的创建方法n“资料”面板“库”面板右下角“新建库项目”n选择html中的已有内容，再“新建库项目”o库的作用n定义需要多次重复使用的内容块n简化操作2021/8/661实践：库的创建2021/8/6624.5 行为o什么是行为n行为是对象、事件和由该事件触发的动作的组合。o对象是产生行为的主体。网页中的很多元素都可以成为对象。例如：整个HTML文档、插入的一个图片、一段文字、一个媒体文件等。o事件是触发动态效果的条件，是指我们对网页进行的某种操作。网页事件分为不同的种类。有的与鼠标有关，有的与键盘有关，有的和网页相关。o动作是预先编写好的JavaScript脚本程序，这些代码执行特定的任务。2021/8/663本章小结o创建网站的一般流程n规划设计实现发布维护o需求分析的任务n明确网站的功能及用户群o整体设计的任务n设计logo、网页配色方案、页面布局o模板与库的作用n使用网站具有统一的风格、简化操作o行为的作用n添加动态效果2021/8/664