网页设计及制作教程.ppt

网页设计与制作实用教程 主编：赵春利 主讲：李正建 2011年3月 网页设计与制作实用教程 第1章 网页设计概述 第2章 HTML语言 第4章 添加网页元素 第5章 网页布局 第6章 制作动感网页 第7章 提高网页制作效率 第8章 站点的维护与上传 第9章 使用Fireworks8处理网页图像 第10章 使用Flash 8制作网页动画 第11章 网站设计制作综合实例 第1章 网页设计概述 1.1 网页设计基础知识 1.2 网页制作工具 1.3 网页配色 1.4 网页布局类型 1.5 网站设计和制作流程 1.6 优秀网站赏析 1.1 网页设计基础知识 1.1.1 网页与网站 1、网页与网站的关系 网页就是通过浏览器在 Internet上看到的页面，英文名称为 Web Page；网站也称为站点，英文名称为 Web Site，是多个网页的集合，但不是简单的集合，而是取决于该网站的内容（如网页的数量及网站的定位）。 1.1 网页设计基础知识 2、网站的类型 网站按内容进行分类，可分为门户网站、垂直网站、地方网站；而其中的垂直网站又可分为新闻网站、娱乐网站、体育网站、科技网站、汽车网站、财经网站、房产网站、游戏网站、生活服务网站和教育职业网站等。 1.1 网页设计基础知识 根据网站是否具有交互性和远程维护功能，可以将网站分为静态网站和动态网站两大类。 1.1 网页设计基础知识 1.1.2 常用Web术语 1、Web常用术语 1、URL 2、网页 3、主页 1.2 网页制作工具 1.2.1 网页编辑工具 1、FrontPage 2、Dreamweaver 1.2 网页制作工具 1.2.2 网页图像与动画制作工具 1、Flash 2、Fireworks 3、PhotoShop 4、PhotoImpact 5、COOL3D 6、Ulead GIF Animator 1.3 网页配色 1.3.1 色彩的基础知识 1、色彩的产生——光与色 1.3 网页配色 1.3 网页配色 2、色彩的分类——彩色与无彩色 1.3 网页配色 3、色彩的三个特性——色相、明度和纯度 ⑴ 色相 ⑵ 明度 ⑶ 纯度 1.3 网页配色 4、色彩的混合 ⑴ 三原色 ⑵ 正混合 ⑶ 负混合 ⑷ 中性混合 1.3 网页配色 5、色相环 1.3 网页配色 6、色彩的心理感觉：不同的颜色会给浏览者不同的心理感受。 7、近似色 1.3 网页配色 8、互补色 1.3 网页配色 9、分离补色 1.3 网页配色 10、组色 1.3 网页配色 11、暖色 1.3 网页配色 12、冷色 1.3 网页配色 13、RGB模式——显示器的色彩模式 1.3 网页配色 14、CMYK模式——印刷的混色原理 1.3 网页配色 1.3.2 网页配色方案 1、基本色、辅助色和强调色 1.3 网页配色 2、常用概念 ⑴ 色彩的对比 色彩对比是指各种色彩在界面内形成的面积、形状、位置以及色相、明度、纯度之间的差异，使网页出现不同的变化和心理感受。 1.3 网页配色 ⑵ 色彩的调和 两种或两种以上色彩和谐搭配在一起，会产生调和、统一的效果，是人们追求视觉得到统一、舒适、达到心理平衡的手段。 1.3 网页配色 1.3.3 色彩在网页设计中的基本应用 1、前提：以网站的内容为基础 2、寻找搭配方案的技巧和经验 3、颜色与文本 1.3 网页配色 具体搭配实例分析 1、儿童类网站 1.3 网页配色 2、男性特征的网站 1.3 网页配色 3、体现华丽高贵特色的网站 1.3 网页配色 4、青年人网站 1.3 网页配色 5、服装服饰类 1.3 网页配色 经验与技巧 1、忌“花”：色彩不要过多 2、冷暖搭配要谨慎 3、网站各界面色彩统一 4、不要用“花” 背景 1.4 网页布局类型 1、“国”字型 2、拐角型 3、标题正文型 4、左右框架型 1.4 网页布局类型 5、上下框架型 6、综合框架型 7、封面型 8、Flash型 9、变化型 1.5 网站设计和制作流程 1.5.1 进行需求调查和分析 1、确定参与人员 2、编写完整的需求调查记录文档 3、用户调查内容 4、市场调研内容 5、编写《网站需求说明书》 1.5 网站设计和制作流程 1.5.2 确定网站的主题内容 1、确定网站主题 2、搜集材料 1.5 网站设计和制作流程 1.5.3 提出网站设计方案 1、主题栏目的设置 2、目录结构设计 3、颜色搭配 4、网站标志Logo 5、版面布局