网站设计

第 2章 网站设计 2009年 7月 2 本阶段的工作任务 网站建设在本阶段的工作任务包括： 设计网站的功能模块 设计网站的版面 设计网站的页面框架 设计网站的首页 网站其他页面的设计 2009年 7月 3 网站 维护方式 目前许多企业发布新闻的方式大多是采用静态的次更新新闻信息时需要做一个页面，然后用 修改页面链接，使新增的新闻页面能正常显示。但这样的维护方式非常麻烦。建立新闻类别网站系统可以大大减轻网站更新维护的工作量，通过新闻信息的后台维护程序，网站管理员只需要在浏览器上录入新闻文字就可以快速实现新闻更新，从而大大加快了信息的传播速度，时时保持网站的活动力和影响力。 2009年 7月 4 务描述 设计新闻类别网站的功能模块 任务 2009年 7月 5 务实现 1 2 新闻类别网站前台功能设计 新闻类别网站后台功能设计 设计新闻类别网站的功能模块 的步骤 2009年 7月 6 务实现 前台功能设计 前台为浏览者提供浏览网站新闻的平台。这部分功能设计主要是网站前台版面的设计，包括网站栏目的划分、色彩的搭配、框架的设计、网站风格创意的体现等等。这些内容具体请参考本章后面的知识。 新闻类别网站前台功能设计 2009年 7月 7 务实现 后台功能设计 后台功能设计从以下几个模块来实现： 用户管理模块 栏目模块 专题模块 新闻模块 友情链接模块 系统日志管理模块 系统配置管理 新闻类别网站后台功能设计 2009年 7月 8 关知识拓展 定位了网站主题，确立了网站的 格和创意等，收集了相关的素材，接下来是否该进入实质性的设计制作阶段呢？答案是：不能。经验告诉我们，建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰；也好比造一座高楼，首先要设计好框架图纸，才能使楼房结构合理。 因此，在动手制作网页前，一定要设计好网站的功能模块，考虑好栏目划分与未来的设计细节。 网站的功能模块 2009年 7月 9 栏目的实质是一个网站的大纲索引，能够将网站的主体明确显示出来。在制定网站栏目的时候，要仔细考虑，合理安排。要尽可能删除与网站主题无关的栏目，尽可能将网站最有价值的内容明显地列在首页栏目上，尽可能方便访问者的浏览和查询。 验总结 1 设置版块时要注意各版块既要保持相对的独立性 ， 又要保持相互关联 ， 并且各版块的内容要围绕网站主题 ，不要脱离主题 。 2 2009年 7月 10 1 2 3 4 版面设计 草案 设计 粗略布局 设计 定案 设计 2009年 7月 11 务描述 设计 新闻类别网站 的版面。 任务 2009年 7月 12 务实现 1 草案 设计 2 粗略布局 3 定案 2009年 7月 13 务实现 草案设计 新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，设计者可以尽可能的发挥想象力，将想到的“景象”画上去 (建议准备一张白纸和一支铅笔，如果用 图工具等也可以 )。这是页面的构造阶段，不必讲究绘画的细腻工整，不必考虑页面细节功能，只需以粗陋的线条勾画出网站版面的轮廓即可。尽可能多画几张，比较比较，最后选定一个满意的作为继续创作的草案。 2009年 7月 14 务实现 粗略布局 在草案的基础上，继续将网站的功能模块安排到页面上。要安排的内容包括网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、计数器、版权信息等。安排时必须遵循突出重点、平衡谐调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的排放。 2009年 7月 15 务实现 定案 将粗略布局精细化、具体化。 这就要体现仁者见仁，智者见智的功力了，不同的设计者能创作出具有不同创意的版面布局。 2009年 7月 16 关知识拓展 (1) 1 3 5 4 2 2. “口”型布局 1. “ T”型结构布局 3. “三”型布局 5. 几种常见的版面布局 2009年 7月 17 关知识拓展 (2) 1 3 5 4 2 版面异常平衡 版面凝视 版面正常平衡 版面对比 版面空白 版面设计的原则 6 版面尽量用图片解说 2009年 7月 18 验总结 在网站的版面布局上要注意加强各对象展现的视觉效果，加强文案的可视度和可读性，整体网站形成一个统一的感觉，要不时地更新网站，保持网站新鲜的内容和独特的个性。 2009年 7月 19 计网站的页面框架 以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图像，下拉菜单等，设计完成以后，若设计结果要在网页中使用，可以将它输出为 能输出为可以在 而实现与网页的无缝连接，为用户一体化的网络设计方案提供支持。 2009年 7月 20 务描述 利用 闻类别网站页面框架的设计 。 任务 2009年 7月 21 务实现 1 2 3 新建设计页面 设计网站页面的背景 设计网站的头部、导航和尾部 利用 闻类别网站页面框架的设计 的具体操作步骤 2009年 7月 22 务实现 -(1) 新建设计页面 打开浏览器，最大化后截取1024 768分辨率下浏览器满屏的视图作为页面设计的基本框架。 打开 建一页面，将截取的图像置入 删除浏览器主区域中的内容，形成一个只有浏览器框架的图像。 用辅助线和标尺把大概范围划分出来 ,注意这里的划分 ,正好是在 770和1000之内的地方 ,因为新闻类别网站是在 1024 768的分辨率下运行的。 2009年 7月 23 务实现 -(2) 设计网站页面背景 依据网站页面的整体风格和创意及相关的设计原则，对网站的整体背景进行设计，并考虑整个站点的背景使用，在此要从整个站点的角度来考虑，要尽量设计一种既简单又能便于在网页中实现的背景，即从背景大小、形状以及展开方式上来考虑。 2009年 7月 24 务实现 -(3) 设计网站的头部、导航和尾部 依据网站页面的整体风格和创意及相关的设计原则，对网站的整体背景进行设计，并考虑整个站点的背景使用，在此要从整个站点的角度来考虑，要尽量设计一种既简单又能便于在网页中实现的背景，即从背景大小、形状以及展开方式上来考虑。 2009年 7月 25 关知识拓展 (1) 颜色可以分为非彩色和彩色两类。非彩色是指黑、白、灰色，黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。彩色是指除了非彩色以外的所有色彩，如红、绿、蓝、黄等。但彩色的记忆效果是黑白色的 彩色页面较完全黑白页面更加吸引人。一般建议网站中主要内容文字用非彩色 (黑色 )，边框、背景、图片用彩色。这样页面整体不单调，浏览主要内容时也不会眼花。 色彩的基本知识 2009年 7月 26 关知识拓展 (2) 绿色 黄色 红色 灰色 蓝色 一种最具凉爽、清新、专业的色彩。若与白色混合，能体现柔顺、淡雅、浪漫的气氛。 能产生中庸、平凡、温和、谦让、中立和高雅的感觉。 介于冷暖两种色彩的中间，能表现出和睦、宁静、健康、安全的感觉。若与金黄、淡白搭配，可以产生优雅、舒适的气氛。 能表示出快乐、希望、智慧和轻快的个性，它的明亮度最高。 一种激奋的色彩，能产生刺激效果，使人产生冲动、愤怒、热情、活力的感觉。 色彩与心理 不同的颜色会给浏览者带来不同的心理感受。 2009年 7月 27 关知识拓展 (3) 一般在刚开始学习网页制作时，由于技术和知识的缺乏，只能制作出简单的网页，色彩比较单一，这时的用色可以称为“单色”；有了一定的网页制作基础和材料后 ,又会将收集到的认为是最好的图片、最满意的色彩堆砌在网页上，造成网站色彩杂乱、没有个性和风格，这时的用色可以称为“五彩缤纷”；随着网页制作经验的积累，设计者会重新定位自己的网站，选择适合自己的色彩，使网站设计走向成功，这时的用色可以称为“标准色”；当设计理念和制作技术达到顶峰时，又会返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点，这时的用色又称为“单色”。 网页色彩掌握的过程 2009年 7月 28 验总结 (1) 选用一种 色彩 作为网站主色调 选用 对比色 作为网站主色调 选用 一个色系的色彩 作为网站主色调 A C B 几种常见的配色方案 选用 黑色和另一种彩色 作为网站主色调 D 2009年 7月 29 验总结 (2) 一些不合理的搭配方案 ： （ 1）忌讳使用 颜色对比过于强烈 的搭配色做网站主色。 （ 2）网站配色要简洁，不要试图将所有颜色都用到，主 色要尽量控制在三种色彩之内。 （ 3）网页背景和前景的对比要明显，尽量 少用花纹复杂的背景图片 ，避免喧宾夺主，以便突出显示文字内容。 2009年 7月 30 计网站的首页 1） 1 2 3 4 确定网站的功能模块 设计网站的版面 进行具体的界面设计 处理设计技术上的细节 设计首页的一般步骤 2009年 7月 31 务描述 利用 闻类别网站的网站首页的设计 任务 2009年 7月 32 务实现 利用 闻类别网站 首页 设计 的具体操作步骤 完成 其他版块的设计制作 1 2 3 制作列表框架 实现 “新闻图片”版块 完成 “最新新闻”版块的设计制作 4 2009年 7月 33 务实现 -(1) 制作列表框架 新建一个矩形，单击【矩形圆角】文本框输入“ 25”，实现圆角效果的具体属性设置如图 2 在上步所建矩形的上方新建一个比它大一些的矩形，为了将下方的圆角切掉。 同时选中上面所建的两个矩形，进行【修改】 |【组合路径】 |【打孔】命令，为了实现更好的效果，对其设置渐变效果。 新建两个矩形，宽度和上面的一样，一个高度为 200、背景色为白色（ #另一个高度 2、背景色为红色（ #添加标题栏上的“ ”图标和相应的文字，对上述元素进行排版，至此列表框架制作完毕。 2009年 7月 34 务实现 -(2) 实现 “新闻图片”版块 打开上面制作的“列表框架”，导入一幅图片，调整其大小，实现如图所示的“新闻图片”版块。 2009年 7月 35 务实现 -(3) 完成 “最新新闻”版块的设计制作 打开上面制作的“列表框架”，添加相关的文字，调整文字的属性，最后对文字进行排版，完成 “最新新闻”版块的设计制作，如图所示。 2009年 7月 36 务实现 -(4) 完成 其他 版块的设计制作 打开 行网站首页的设计制作，这样既可以保持网站整体的风格一致，又可以准确定位相关模块的位置。 2009年 7月 37 关知识拓展 (1) 框架元素：用于规划页面布局，每个框架里可以显示一个网页，框架的应用突破了原来浏览器只能显示一张网页的限制，应用了框架的网页能同时显示多个页面。 图像元素：比文本更直观，更具吸引力的网页元素。 空白元素：空白元素用来分开页面上的各元素。一个没有空白区的页面，给浏览者的感觉是页面很拥挤，容易引起阅读心理紧张，导致对这样的页面有一种厌烦抵触的感觉。 边距元素：控制网页所显示的内容距浏览器窗口边界的距离，类似于 列表元素：列表在网页占有极其重要的地位，规定了多种列表元素，可根据文本内容的特征选择不同的列表进行展示。 页面布局元素 2009年 7月 38 关知识拓展 (2) 每一个页面都应该是相对独立的、完整的。只有照顾了整个页面空间的分配，空白才能表现出一定的活力，利用空白可以使页面布局生动活泼、松紧有度，使浏览者浏览页面时感觉到舒适、轻松和简洁。 网页空白可以使用表格和透明 用表格定位页面内容时，可以设置不填充内容的空白单元格来产生页面空白，达到页面布局松紧有度的效果。 “空白”元素 2009年 7月 39 关知识拓展 (3) 在设计页面布局时 ， 设计人员在纸面上画出页面布局的草图 ， 将设想落实到纸面上 ， 观看设计效果 。 人们经常会在瞬间产生一个好的灵感和想法 ， 但这种想法若不及时记录下来很快又会从头脑中消失 。 因此当有了好的灵感和想法时应该立即用纸笔记录下来 ， 以备以后用到页面设计当中 。 纸面布局法 使用图形工具软件设计页面布局草图 ， 可以使用比较熟悉的图形软件如 使用这些图形工具可以方便地设计页面布局和颜色 ， 比纸面布局法更能查看页面布局的整体效果和真实效果 ， 使用图形工具和层更容易修改和查看各种无法用纸张实现的效果 。 软件布局法 2009年 7月 40 验总结 首页的设计是一个网站成功与否的关键。人们往往看到网站第一页就对站点产生一个整体的感觉。能不能促使浏览者继续点击进入，能否吸引浏览者多花时间驻留在站点上，全凭首页设计的“功力”了。所以，首页的设计和制作是绝对要重视和花心思的。一般首页设计和制作要占整个网站制作时间的 40%。记住 ,宁可多花些时间在整体设计、框架制作和首页设计上，避免网站全部做好以后再修改，那将是最浪费精力、浪费时间、浪费金钱的事。 2009年 7月 41 站其他页面的设计 务描述 利用 闻类别网站其它功能页面的设计 任务 2009年 7月 42 务实现 1 2 对列表页进行设计 对内容页进行设计 利用 闻类别网站其它功能页面设计 的具体操作步骤 2009年 7月 43 务实现 -(1) 对列表页进行设计 先来划