网页设计与制作实用教程.ppt

1、网页设计与制作实用教程,主编：赵春利 制作：李晓新 2010年2月,网页设计与制作实用教程,第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、网页与网站的关系

2、 网页就是通过浏览器在 Internet上看到的页面，英文名称为 Web Page；网站也称为站点，英文名称为 Web Site，是多个网页的集合，但不是简单的集合，而是取决于该网站的内容（如网页的数量及网站的定位）。,1.1 网页设计基础知识,2、网站的类型 网站按内容进行分类，可分为门户网站、垂直网站、地方网站；而其中的垂直网站又可分为新闻网站、娱乐网站、体育网站、科技网站、汽车网站、财经网站、房产网站、游戏网站、生活服务网站和教育职业网站等。,1.1 网页设计基础知识,根据网站是否具有交互性和远程维护功能，可以将网站分为静态网站和动态网站两大类。,1.1 网页设计基础知识,1.1.2 常

3、用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、色彩的三个特性色

4、相、明度和纯度 色相 明度 纯度,1.3 网页配色,4、色彩的混合 三原色 正混合 负混合 中性混合,1.3 网页配色,5、色相环,12色相环,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、常

5、用概念 色彩的对比 色彩对比是指各种色彩在界面内形成的面积、形状、位置以及色相、明度、纯度之间的差异，使网页出现不同的变化和心理感受。,1.3 网页配色, 色彩的调和 两种或两种以上色彩和谐搭配在一起，会产生调和、统一的效果，是人们追求视觉得到统一、舒适、达到心理平衡的手段。,1.3 网页配色,1.3.3 色彩在网页设计中的基本应用 1、前提：以网站的内容为基础 2、寻找搭配方案的技巧和经验 3、颜色与文本,1.3 网页配色,具体搭配实例分析 1、儿童类网站,1.3 网页配色,2、男性特征的网站,1.3 网页配色,3、体现华丽高贵特色的网站,1.3 网页配色,4、青年人网站,1.3 网页配色,

6、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 网站设计和

7、制作流程,1.5.3 提出网站设计方案 1、主题栏目的设置 2、目录结构设计 3、颜色搭配 4、网站标志Logo 5、版面布局 6、图像的运用,1.5 网站设计和制作流程,1.5.4 制作和上传网站 1、制作网站 2、上传与测试 3、后期维护,1.6 优秀网站赏析,1.6.1 时尚娱乐类网站赏析,1.6 优秀网站赏析,1.6 优秀网站赏析,1.6 优秀网站赏析,1.6 优秀网站赏析,1.6 优秀网站赏析,1.6.2 信息类网站赏析,1.6 优秀网站赏析,1.6 优秀网站赏析,1.6 优秀网站赏析,1.6.3 商务类网站赏析,1.6 优秀网站赏析,1.6 优秀网站赏析,1.6 优秀网站赏析,第2

8、章 HTML语言,2.1 HTML语言基础 2.2 字符格式的设置 2.3 多媒体文件的调用 2.4 超链接的设置 2.5 表格的设置 2.6 表单的设置 2.7 框架的设置,2.1 HTML语言基础,2.1.1 HTML标签 1、标签的组成 HTML语言中，所有的标签都必须用尖括号括起来，比如：、等。 大部分标签都是成对出现的，即有开始标签和结束标签，这样表示的意义在于用开始标签和结束标签来定义该标签所产生作用的范围。,2.1 HTML语言基础,2、标签的属性 标签都有相对应的属性，通过属性可以对标签的内容做更为详细的说明，所有属性都放置在开始标签的尖括号内。如： HTML语言基础。,2.1

9、 HTML语言基础,2.1.2 基本标签 基本的HTML文档标签如下： 1、 2、 3、 4、 5、,2.1 HTML语言基础,6、 7、 8、 9、 10、 11、,2.2 字符格式的设置,2.2.1 font标签的使用 1、字体标签 2、字号标签 3、字体颜色标签,2.2 字符格式的设置,2.2 字符格式的设置,2.2.2 字符样式的设置,2.2 字符格式的设置,2.2.3 有序和无序列表标签 1、 2、,2.2 字符格式的设置,2.2.4 文字的对齐方式 表达对齐方式用ALIGN属性，它可以应用在多种标签内，如标题标签hn、分段标签p和水平线标签hr等。,2.3 多媒体文件的调用,2.3

10、.1 图像文件的调用 1、 2、border属性 3、align属性,2.3 多媒体文件的调用,2.3.2 音频文件的调用 1、 2、 2.3.3 视频文件的使用 2.3.4 移动字幕的使用,2.4 超链接的设置,2.4.1 文件之间的链接 该标签的主要功能是实现文件之间的相互跳转。,2.4 超链接的设置,2.4.2 网站的链接 实现由文本链接到网站的方法，类似于上面的链接过程，不同点在于必须给出站点的URL地址。 2.4.3 电子邮件的链接 实现电子邮件的链接方法与前面讲过的链接稍有不同，在属性值中用关键字mailto:引导，并给出所访问的电子邮件地址。在浏览器窗口点击链接时，便直接进入到电

11、子邮件软件中拟写邮件，并发送出邮件。,2.4 超链接的设置,2.4.4 图片的链接 实现文本到图像的链接方法与前面讲过的链接类似，链接设置完成后，在浏览器窗口中点击链接的文字，直接看到所链接的图片。,2.5 表格的设置,2.5.1 建立表格 表格范围：一定是在标签控制的范围内。 表的名称：是第一个需要说明的内容。 行的数目：通过增加或减少行标签来实现对所需行数的设置。,2.5 表格的设置,单元格：单元格的数目，通过增加或减少和标签来实现对所需单元格数的设置。单元格的属性，可以单独设置，以体现表格样式的多样性。单元格的内容，可以是文字、图像和超链接。,2.5 表格的设置,2.5.2 表格属性的设

12、置,2.6 表单的设置,2.6.1 建立表单,最基本的表单,2.6 表单的设置,2.6.2 表单控件的使用 1、文本框 文本框属性 密码框属性,2.6 表单的设置,2、按钮 按钮控件通常有三类，即提交、重置和用户自定义按钮。 3、单选框 单选框的功能是在一组选项中，一次只能选中一个选项。,2.6 表单的设置,4、多选框 多选框的功能是在一组选项中，一次可以选中多个选项。 5、下拉列表 下拉列表提供了多种可选项，使用户可以在众多的选择中充分进行选择，而不用用户用手进行繁琐的填写工作。 6、滚动文本框,2.7 框架的设置,2.7.1 建立框架的语句结构 框架的基本结构 ,2.7 框架的设置,2.7

13、.2 设置框架属性 1、框架集属性的设置 2、单个框架属性的设置,第4章 添加网页元素,4.1 应用文本 4.2 应用图像 4.3 超级链接的概念和种类 4.4 创建各种链接 4.5 添加多媒体元素,4.1 应用文本,案例一 应用文本制作网站首页,4.1 应用文本,4.1.1 输入文本 任务1 网页中输入文本 4.1.2 修改字号 任务2 修改输入文本字号,4.1 应用文本,4.1.3 修改文字颜色 任务3 设置文本颜色 4.1.4 自定义文字颜色 4.1.5 在dreamweaver8中添加基本字体 任务4 为网页中文本指定字体组合,4.1 应用文本,4.1.6 设置粗体斜体样式 任务5 设

14、置文本的样式 4.1.7 对齐方式与缩进 任务6 设置文本对齐方式,4.2 应用图像,案例2 使用图像制作网站首页,4.2 应用图像,4.2.1 网页中常用图像的种类 1、GIF格式 2、JPEG格式 3、PNG,4.2 应用图像,4.2.2 插入图像 任务1 插入图像 4.2.3 设置图像的基本属性 任务2 设置图像的位置 4.2.4 编辑图像 4.2.5 设置鼠标经过图像 任务3 设置页面导航为鼠标经过图像,4.3 超级链接的概念和种类,4.3.1 超级链接的概念 超级链接是指站点内不同网页之间、站点与Web之间的链接关系，它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。

15、,4.3 超级链接的概念和种类,超级链接由两部分组成：链接源和链接目标。链接源是文本或图像；链接目标是用户单击超级链接之后打开的网页或者下载的文件。,4.3 超级链接的概念和种类,4.3.2 超级链接的种类 1、根据链接源的特点，一般把链接分为文本链接与图像链接两大类。 2、如果按链接目标分类，可以将超级链接分为： 内部链接 外部链接 锚记链接 E-mail链接 热区链接,4.3 超级链接的概念和种类,4.3.3 相对地址与绝对地址 1、URL 2、绝对地址 3、相对地址,4.4 创建各种链接,案例三 创建各种超级链接 4.4.1 创建内部链接 任务1 添加文本内部链接 任务2 添加图像内部链

16、接,4.4 创建各种链接,4.4.2 创建外部链接 任务3 添加文本外部链接 4.4.3 创建E-mail链接 任务4 添加Email链接 4.4.4 创建锚记链接,4.4 创建各种链接,案例四 长文档网页中添加锚记 任务1 添加页面内部锚记链接 任务2 添加页面间的锚记链接,4.4 创建各种链接,4.4.5 创建热区链接 案例五 地图引导分支网站 任务1 添加站点内部图像热区链接 任务2 添加站点外部热区链接 4.4.6 创建其他类型的链接 任务3 添加下载链接,4.5 添加多媒体元素,案例六 视频在线网站制作 4.5.1 添加滚动文本 任务1 在“视频在线”网页中添加滚动文本 4.5.2

17、添加视频文件 任务2 在“视频在线”网页中添加视频文件,第5章 网页布局,5.1 表格布局 5.2 框架布局 5.3 层布局,5.1 表格布局,5.1.1 表格的基本操作 在本节中将制作一个课程表,通过制作该课程表，来熟悉Dreamweaver中表格的基本操作。,5.1 表格布局,5.1 表格布局,5.1.2 使用表格进行版面布局 表格在网页制作中最重要的应用是进行页面的布局设计。在本节中将使用表格进行版面布局来制作一个比较简单的XXXX科技发展有限公司的首页，如图所示。通过制作该页面，掌握在Dreamweaver中使用表格进行版面布局的相关操作。,5.1 表格布局,5.1 表格布局,5.1.

18、3 特殊效果表格的制作 使用表格可以制作出许多特殊的布局效果，如细线效果、三维效果、圆角效果等。本节中将主要介绍使用表格来制作细线效果。,5.1 表格布局,在很多网页中，经常可以看到各种细线的布局效果，使页面简洁明快、条理清楚。这些细线效果可以使用图像的方式生成，也可以使用表格来制作。使用表格实现的细线效果，占用空间小，下载速度快，因此更为实用。细线效果大致可以分为两类，一是细线表格，二是各种横竖分隔线。,5.1 表格布局,5.1.4 布局模式 为了简化使用表格进行版面布局设计的过程，Dreamweaver提供了一个专门用于进行版面布局的工具布局模式。使用这个工具，可以方便地在网页中直接绘制表格和单元格，并可以根据需要自由定位和移动单元格，使版面布局变得更加灵活轻松快捷。,5.1 表格布局,在默认情况下，打开文档窗口时显示的是标准模式。在标准模式下，插入面板中的布局按钮是不可用的，要使用这些按钮必须切换到布局模式。,5.2 框架布局,5.2.1 什么是框架 框架可以将浏览器窗口划分为若干个区域，每个区域都可以装载不同的HTML文档，从而获得一种特殊的布局效果。,5.2 框架布局,5.2.2 框架的基本操作,使用框架布局的网页,5.2 框架布局,5.2.3 页内框架 框架集文件是将整个浏览器划分为多个不同的