第3讲网页设计基础

1、3/6/2022.1网站建设网站建设授课教师：宁艳授课教师：宁艳Tel: QQ: 765482378E-mail: 网站建设 宁艳 第三讲第三讲 网页设计基础网页设计基础网站建设 宁艳 网页设计基础知识网页设计基础知识v在网站设计上，主页的设计是一个网站成功与在网站设计上，主页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览站点有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站者继续点击进入，是否能够吸引浏览者留在站点上，全凭主页设计的点上，全凭主页设计的功力功力了。所以，主

2、了。所以，主页的设计和制作是绝对要重视和花心思的。一页的设计和制作是绝对要重视和花心思的。一般主页设计和制作占整个制作时间的般主页设计和制作占整个制作时间的40%。宁可多花些时间在早期，以免出现全部做好以宁可多花些时间在早期，以免出现全部做好以后再修改，那将是最浪费精力的事。后再修改，那将是最浪费精力的事。网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计的一般步骤：主页设计的一般步骤： 确定主页的功能模块确定主页的功能模块 设计主页的版面设计主页的版面 处理技术上的细节处理技术上的细节网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计的一般步骤：确定主页的功能模块主页设计的一

3、般步骤：确定主页的功能模块 主页的内容模块是指你需要在主页上实现的主要内主页的内容模块是指你需要在主页上实现的主要内容和功能。容和功能。 一般的站点都需要这样一些模块：一般的站点都需要这样一些模块： 网站名称网站名称 （logo）、广告条）、广告条 （banner）、）、 主菜单主菜单 （menu）、新闻）、新闻 （whats new）、搜索）、搜索 （search）、）、 友情链接友情链接 （links）、邮件列表）、邮件列表 （maillist）、计数器）、计数器 （count）、版权）、版权 （copyright）。）。网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计的一般步骤

4、：设计主页的版面主页设计的一般步骤：设计主页的版面 设计网页的第一步是设计版面布局设计网页的第一步是设计版面布局 版面版面是指浏览器看到的完整页面。是指浏览器看到的完整页面。布局布局，就是以最适合，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。浏览的方式将图片和文字排放在页面的不同位置。 版面设计版面设计就是组版元素在版面上的计划和安排。优秀的就是组版元素在版面上的计划和安排。优秀的版面设计，都表现出其各构成因素间和谐的比例关系。版面设计，都表现出其各构成因素间和谐的比例关系。 网页版面设计网页版面设计，必须首先从版面结构入手，从整体布局，必须首先从版面结构入手，从整体布局做起。而形

5、成版面结构基本条件，是正文、标题、图片做起。而形成版面结构基本条件，是正文、标题、图片质和量的关系，字体的变化，文字量的合理搭配，图片质和量的关系，字体的变化，文字量的合理搭配，图片的恰当配备，其他特殊效果等等。的恰当配备，其他特殊效果等等。 网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计的一般步骤：设计主页的版面主页设计的一般步骤：设计主页的版面 设计版面应该遵循的原则是：形式为内容服务设计版面应该遵循的原则是：形式为内容服务 一般的步骤是：一般的步骤是： 草案：尽可能的发挥你的想象力，将你想到的草案：尽可能的发挥你的想象力，将你想到的景象景象画上画上去。这属于创造阶段，不讲究细

6、腻工整，不必考虑细节功去。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。能，只以粗陋的线条勾画出创意的轮廓即可。 粗略布局：在草案的基础上，将你确定需要放置的功能粗略布局：在草案的基础上，将你确定需要放置的功能模块安排到页面上。注意，必须遵循突出重点、平衡谐调模块安排到页面上。注意，必须遵循突出重点、平衡谐调的原则。的原则。 定案：将粗略布局精细化，具体化。定案：将粗略布局精细化，具体化。网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计的一般步骤：设计主页的版面主页设计的一般步骤：设计主页的版面 布局一般遵循的原则：布局一般遵循的原则： （1）

7、正常平衡：亦称）正常平衡：亦称“匀称匀称”。多指左右、上下对照形。多指左右、上下对照形式，主要强调秩序，能达到安定、诚实、信赖的效果。式，主要强调秩序，能达到安定、诚实、信赖的效果。 （2）异常平衡：即非对照形式，但也要平衡和韵律，当）异常平衡：即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、高注目性的效然都是不均整的，此种布局能达到强调性、高注目性的效果。果。 (1) (2)网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计的一般步骤：设计主页的版面主页设计的一般步骤：设计主页的版面 布局一般遵循的原则：布局一般遵循的原则： （3）对比：所谓对比，不仅利用色彩

8、、色调等技巧来作表现，）对比：所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。在内容上也可涉及古与今、新与旧、贫与富等对比。 （4）凝视：所谓凝视是利用页面中人物视线，使浏览者仿照）凝视：所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。跟随的心理，以达到注视页面的效果，一般多用明星凝视状。 (3) (4)网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计的一般步骤：设计主页的版面主页设计的一般步骤：设计主页的版面 布局一般遵循的原则：布局一般遵循的原则： （5）空白有两种作用，一方面对其他网站表示

9、突出卓越，另）空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体现网页的一方面也表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。格调十分有效。 （6）尽量用图片解说：此法对不能用语言说服、或用语言无）尽量用图片解说：此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览法表达的情感，特别有效。图片解说的内容，可以传达给浏览者更多的心理因素。者更多的心理因素。 (5) (6)网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计：色彩的运用主页设计：色彩的运用 网页色彩搭配的原则网页色彩搭配的原则 色彩的

10、鲜明性。网页的色彩要鲜艳，容易引人注目。色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。 色彩的独特性。要有与众不同的色彩，使得给人的印象强色彩的独特性。要有与众不同的色彩，使得给人的印象强 烈。烈。 色彩的合适性。就是说色彩和所表达的内容气氛相适合。色彩的合适性。就是说色彩和所表达的内容气氛相适合。 如用粉色体现女性站点的柔性。如用粉色体现女性站点的柔性。 色彩的联想性。不同色彩会产生不同的联想，蓝色想到天色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和网页空，黑色想到黑夜，红色想到喜事等，选择色彩要和网页的内涵相关联。的内涵相关联。 网站建设

11、宁艳 网页设计基础知识网页设计基础知识v主页设计：色彩的运用主页设计：色彩的运用 网页色彩搭配的技巧网页色彩搭配的技巧 用一种色彩：先选定一种色彩，然后调整透明度或者饱和用一种色彩：先选定一种色彩，然后调整透明度或者饱和度，使色彩变淡或加深，产生新的色彩，用于网页。这样度，使色彩变淡或加深，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。的页面看起来色彩统一，有层次感。 用两种色彩：先选定一种色彩，然后选择它的对比色。如用两种色彩：先选定一种色彩，然后选择它的对比色。如主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花哨。不花哨

12、。网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计：色彩的运用主页设计：色彩的运用 网页色彩搭配的技巧网页色彩搭配的技巧 用一个色系：简单的说就是用一个感觉的色彩，例如淡蓝，用一个色系：简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。淡黄，淡绿；或者土黄，土灰，土蓝。 用黑色和一种彩色。用黑色和一种彩色。网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计：色彩的运用主页设计：色彩的运用 网页色彩搭配的忌讳网页色彩搭配的忌讳 不要将所有颜色都用到，尽量控制在三种色彩不要将所有颜色都用到，尽量控制在三种色彩以内。以内。 背景和前文的对比尽量要大，背景和前

13、文的对比尽量要大，(尽量不要用花纹尽量不要用花纹繁复的图案作背景繁复的图案作背景)，以便突出主要文字内容。，以便突出主要文字内容。 网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计：色彩的运用（案例）主页设计：色彩的运用（案例）福克斯新闻网福克斯新闻网（白色调为主，加上蓝色与红色，强调新闻真实与权威）（白色调为主，加上蓝色与红色，强调新闻真实与权威）网站建设 宁艳 网页设计基础知识网页设计基础知识v主页设计：色彩的运用（案例）主页设计：色彩的运用（案例）“百事可乐百事可乐”网站网站（蓝色为主，（蓝色为主， 突出新潮中的精彩）突出新潮中的精彩）网站建设 宁艳 网页设计基础知识网页设计基

14、础知识v主页设计：色彩的运用（案例）主页设计：色彩的运用（案例）“阿迪达斯阿迪达斯”网站网站（黑色为主，加浅灰和淡蓝，强调运动着的凝重与飘逸）（黑色为主，加浅灰和淡蓝，强调运动着的凝重与飘逸）网站建设 宁艳 网页设计基础知识网页设计基础知识“Nike”网站网站 （淡灰为主，色彩鲜艳（淡灰为主，色彩鲜艳的图片为辅，突出自由的图片为辅，突出自由随意的运动主题随意的运动主题 ）“可口可乐可口可乐”网站网站 （红色为主，突出（红色为主，突出 喜庆和兴奋的心情）喜庆和兴奋的心情）网站建设 宁艳 网页设计基础知识网页设计基础知识“索尼索尼”网站网站 （主调是灰色，配上橙（主调是灰色，配上橙色的点缀，强调高

15、科技色的点缀，强调高科技产品主题）产品主题）“柯达柯达”网站网站 （白色背景，配以灰色（白色背景，配以灰色和黃色，突出公司一贯和黃色，突出公司一贯形象，快乐和迅速）形象，快乐和迅速） 网站建设 宁艳 网页设计基础知识网页设计基础知识“尼康尼康”网站网站 （白色背景，黑色中加（白色背景，黑色中加上黄色，令网站特别抢上黄色，令网站特别抢眼。突出公司雄厚的背眼。突出公司雄厚的背景与高科技下的新概念）景与高科技下的新概念）“肯德鸡肯德鸡”网站网站（红色和米色调为主，（红色和米色调为主，充满欢乐气氛，兼有刺充满欢乐气氛，兼有刺激食欲之意）激食欲之意）网站建设 宁艳 网页设计基础知识网页设计基础知识v主页

16、设计：字体的使用主页设计：字体的使用 网页设计中字体使用原则，仅供参考：网页设计中字体使用原则，仅供参考： 不要使用超过不要使用超过3种以上的字体。字体太多则显得杂乱，没种以上的字体。字体太多则显得杂乱，没有主题。有主题。 不要用太大的字。因为版面是宝贵，有限的，粗陋的大字不要用太大的字。因为版面是宝贵，有限的，粗陋的大字体不能带给访问者更多信息。体不能带给访问者更多信息。 不要使用不停闪烁的文字。想让浏览者多停留一会儿的话，不要使用不停闪烁的文字。想让浏览者多停留一会儿的话，就不要使用闪烁的文字。就不要使用闪烁的文字。 原则上标题的字体较正文大，颜色也应有所区别。原则上标题的字体较正文大，颜

17、色也应有所区别。网站建设 宁艳 网页设计基础知识网页设计基础知识v网页设计与制作常用工具网页设计与制作常用工具 网页设计网页设计/美化工具：美化工具： Photoshop Fireworks Flash网站建设 宁艳 网页设计基础知识网页设计基础知识v网页美化工具网页美化工具PhotoshopPhotoshop PhotoshopPhotoshop是由是由AdobeAdobe公司开发的图形处理软件，它公司开发的图形处理软件，它是目前公认的是目前公认的PCPC机上最好的通用平面美术设计软件机上最好的通用平面美术设计软件 功能完善、性能稳定、使用方便，所以在几乎所有功能完善、性能稳定、使用方便，所

18、以在几乎所有的广告、出版、软件公司，的广告、出版、软件公司，PhotoshopPhotoshop都是首选的都是首选的平面制作工具平面制作工具网站建设 宁艳 网页设计基础知识网页设计基础知识v网页美化工具网页美化工具FireworksFireworks FireworksFireworks是由是由MacromediaMacromedia公司开发的图形处理工公司开发的图形处理工具，是第一套专门为制作网页图形而设计的软件，具，是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。同时也是专业的网页图形设计及制作的解决方案。 作为一款为网络设计而开发的图像处理软件，作为一

19、款为网络设计而开发的图像处理软件，FireworksFireworks还能够自动切割图像、生成光标动态感还能够自动切割图像、生成光标动态感应的应的JavaScriptJavaScript程序等等，而且程序等等，而且FireworksFireworks具有强具有强大的动画功能和一个相当完美的大的动画功能和一个相当完美的 网络图像生成器。网络图像生成器。网站建设 宁艳 网页设计基础知识网页设计基础知识v网页美化工具网页美化工具FlashFlash FlashFlash是是MacromediaMacromedia公司开发的矢量图形编辑和动公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画

20、设计工具，画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。融合在一起，以制作出高品质的网页动态效果。 FlashFlash广泛应用于网页动画制作、教学动画演示、广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。网上购物、在线游戏等的制作中。网站建设 宁艳 网页设计基础知识网页设计基础知识v网页设计与制作常用工具网页设计与制作常用工具 网页制作工具：网页制作工具： 超文本标识语言（超文本标识语言（HTML） FrontPage Dreamweaver网站建设 宁艳 网页设计基础知识网页设计基础知识v网页制作工具网页制作工具超文本标识语言（超文本标识语言（HTMLHTML） HTMLHTML（Hypertext Markup LanguageHypertext Markup Language）是一种专门）是一种专门用于用于WebWeb页制作的编程语言，用来描述超文本各个页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。与别的文本或图像的链接点。 HTMLHTML文档由文本、格