第 2章 网页设计知识
?网页设计中的注意事项
?网页设计的过程
?网页设计初步
2.1 网页设计中的注意事项
? 网页设计需要的知识
? 网页设计的基本原则
? 网页设计需考虑的因素
2.1.1 网页设计需要的知识
1,风格定位
2,版面编排
（ 1）主次要分明，中心要突出。如图 2-1鲜活食品网页
大小要搭配，相互要呼应。
（ 3）图文要并茂，相得要益彰。
（ 4）动静要有度，平衡要对称。如图 2-2就是动静
结合的典范、图 2-3是对称的示例、图 2-4平衡的样
板。
图 2-3
图 2-4
3,点、线、面
?（１）点的应用
?（２）直线的应用
?（３）曲线的应用
?（ 4）曲线、直线的综合应用
?（５）面的应用。线动成面
点的应用
点的应用
线的应用
曲线的应用
曲线、直线的综合应用
面的应用
4,色彩处理
? （ 1）暖色调。即红色、橙色、黄色、褐色等
色彩的搭配。这种色调的运用，可使主页呈
现温馨、和煦、热情的氛围。
? （ 2）冷色调。即青色、绿色、紫色等色彩的
搭配。这种色调的运用，可使主页呈现宁静、
清凉、高雅的氛围。
? （ 3）对比色调。即把色调完全相反的色彩搭
配在同一个空间里。例如：红与绿、黄与紫、
橙与蓝等。
色彩处理
色彩处理
5,数字图像
? 图像尺寸：
? 彩色空间：
? 位平面：
? 最大颜色数
? 图像数据容量：
? 分辨率：
? 像素深度
? 真彩色：
? 伪彩色
? 调色板
? 调配色
６,色彩的使用技巧与指针
2.1.2 网页设计的基本原则
? 统一
? 连贯
? 分割
? 对比
? 和谐
? 易读
? 易找
? 清晰
? 精选
分割
统一
和谐
易读
易找
清晰
2.1.3 网页设计需考虑的因素
? 1．设计网站的标志（ Logo）
? 2．设计网站的标准色彩
? 3．设计网站的标准字体
? 4．设计网站的宣传标语
2.2 网页设计的过程
? 网页设计的一般步骤
? 设计主题
? 总体结构的构思
? 网页的版面布局
? 网页创意
? 网页素材收集
? 网页制作
? 网页测试与发布
? 网站维护
2.2.1 网页设计的一般步骤
? 1．设计主题
? 2．网页的组织结构
? 3．资料的收集与整理
? 4．选择网页的设计方法
? 5．设计网页要注意的问题
2.2.2 设计主题
对于题材的选择，原则是：
? 1．主题要小而精。
? 2．题材最好是自己擅长或喜爱的内容。
? 3．名称要正。
? 4．名称要易记。
? 5．名称要有特色。
2.2.3 总体结构的构思
总体结构主要应考虑以下问题：
? 1,网站主题和名称的定位。
? 2,网站 CI形象的定位。
? 3,栏目和版块的确定。
? 4,网站的整体风格创意设计。
? 5,网站的层次结构和链接结构。
? 6,首页的设计。
? 7,版面布局的窍门。
? 8,色彩的搭配。
? 9,效果与速度。
2.2.3 总体结构的构思
? 10．替浏览者考虑。
? 11．细微之处下功夫。
? 12．建设完成度与推出时间。
? 13．交互性与亲和度。
? 14．考虑不同的浏览器和分辨率。
? 15．字体的设置和表格的嵌套。
? 16．新技术的运用取舍。
? 17．设计好的 banner和位置。
? 18．语句文字融入感情。
2.2.4 网页的版面布局
? 1．网页草图
? 2．粗略布局
? 3．定案
2.2.5 网页创意
创意思考的过程分五阶段,
? （ 1）准备期：究所搜集的资料，根据旧经 验，
启发新创意。
? （ 2）孵化期：将资料咀嚼消化，使意识自由发
展，任意结合。
? （ 3）启示期：意识发展并结合，产生创意。
? （ 4）验证期：将产生的假冒意讨论修正。
? （ 5）形成期：设计制作网页，将创意具体化。
? 2.2.6 网页素材收集
? 2.2.7 网页制作
? 2.2.8 网页测试与发布
? 2.2.9 网站维护
2.3 网页设计初步
? 2.3.1在 Word中建网页
? 2.3.2给网页设背景
? 2.3.3标题
? 2.3.4插入横线，把标题与正文分开
? 2.3.5做横幅 (水平滚动字 )
? 2.3.6做导航栏
? 3.7正文
?网页设计中的注意事项
?网页设计的过程
?网页设计初步
2.1 网页设计中的注意事项
? 网页设计需要的知识
? 网页设计的基本原则
? 网页设计需考虑的因素
2.1.1 网页设计需要的知识
1,风格定位
2,版面编排
（ 1）主次要分明，中心要突出。如图 2-1鲜活食品网页
大小要搭配，相互要呼应。
（ 3）图文要并茂，相得要益彰。
（ 4）动静要有度，平衡要对称。如图 2-2就是动静
结合的典范、图 2-3是对称的示例、图 2-4平衡的样
板。
图 2-3
图 2-4
3,点、线、面
?（１）点的应用
?（２）直线的应用
?（３）曲线的应用
?（ 4）曲线、直线的综合应用
?（５）面的应用。线动成面
点的应用
点的应用
线的应用
曲线的应用
曲线、直线的综合应用
面的应用
4,色彩处理
? （ 1）暖色调。即红色、橙色、黄色、褐色等
色彩的搭配。这种色调的运用，可使主页呈
现温馨、和煦、热情的氛围。
? （ 2）冷色调。即青色、绿色、紫色等色彩的
搭配。这种色调的运用，可使主页呈现宁静、
清凉、高雅的氛围。
? （ 3）对比色调。即把色调完全相反的色彩搭
配在同一个空间里。例如：红与绿、黄与紫、
橙与蓝等。
色彩处理
色彩处理
5,数字图像
? 图像尺寸：
? 彩色空间：
? 位平面：
? 最大颜色数
? 图像数据容量：
? 分辨率：
? 像素深度
? 真彩色：
? 伪彩色
? 调色板
? 调配色
６,色彩的使用技巧与指针
2.1.2 网页设计的基本原则
? 统一
? 连贯
? 分割
? 对比
? 和谐
? 易读
? 易找
? 清晰
? 精选
分割
统一
和谐
易读
易找
清晰
2.1.3 网页设计需考虑的因素
? 1．设计网站的标志（ Logo）
? 2．设计网站的标准色彩
? 3．设计网站的标准字体
? 4．设计网站的宣传标语
2.2 网页设计的过程
? 网页设计的一般步骤
? 设计主题
? 总体结构的构思
? 网页的版面布局
? 网页创意
? 网页素材收集
? 网页制作
? 网页测试与发布
? 网站维护
2.2.1 网页设计的一般步骤
? 1．设计主题
? 2．网页的组织结构
? 3．资料的收集与整理
? 4．选择网页的设计方法
? 5．设计网页要注意的问题
2.2.2 设计主题
对于题材的选择，原则是：
? 1．主题要小而精。
? 2．题材最好是自己擅长或喜爱的内容。
? 3．名称要正。
? 4．名称要易记。
? 5．名称要有特色。
2.2.3 总体结构的构思
总体结构主要应考虑以下问题：
? 1,网站主题和名称的定位。
? 2,网站 CI形象的定位。
? 3,栏目和版块的确定。
? 4,网站的整体风格创意设计。
? 5,网站的层次结构和链接结构。
? 6,首页的设计。
? 7,版面布局的窍门。
? 8,色彩的搭配。
? 9,效果与速度。
2.2.3 总体结构的构思
? 10．替浏览者考虑。
? 11．细微之处下功夫。
? 12．建设完成度与推出时间。
? 13．交互性与亲和度。
? 14．考虑不同的浏览器和分辨率。
? 15．字体的设置和表格的嵌套。
? 16．新技术的运用取舍。
? 17．设计好的 banner和位置。
? 18．语句文字融入感情。
2.2.4 网页的版面布局
? 1．网页草图
? 2．粗略布局
? 3．定案
2.2.5 网页创意
创意思考的过程分五阶段,
? （ 1）准备期：究所搜集的资料，根据旧经 验，
启发新创意。
? （ 2）孵化期：将资料咀嚼消化，使意识自由发
展，任意结合。
? （ 3）启示期：意识发展并结合，产生创意。
? （ 4）验证期：将产生的假冒意讨论修正。
? （ 5）形成期：设计制作网页，将创意具体化。
? 2.2.6 网页素材收集
? 2.2.7 网页制作
? 2.2.8 网页测试与发布
? 2.2.9 网站维护
2.3 网页设计初步
? 2.3.1在 Word中建网页
? 2.3.2给网页设背景
? 2.3.3标题
? 2.3.4插入横线，把标题与正文分开
? 2.3.5做横幅 (水平滚动字 )
? 2.3.6做导航栏
? 3.7正文
