网页设计与制作实用教程

网页设计与制作实用教程主编：赵春利制作：李晓新2010年2月网页设计与制作实用教程第1章网页设计概述第2章HTML语言第4章添加网页元素第5章网页布局第6章制作动感网页第7章提高网页制作效率第8章站点的维护与上传第9章使用Fireworks8处理网页图像第10章使用Flash8制作网页动画第11章网站设计制作综合实例第1章网页设计概述1.1网页设计基础知识1.2网页制作工具1.3网页配色1.4网页布局类型1.5网站设计和制作流程1.6优秀网站赏析1.1网页设计基础知识1.1.1网页与网站1、网页与网站的关系网页就是通过浏览器在Internet上看到的页面，英文名称为WebPage；网站也称为站点，英文名称为WebSite，是多个网页的集合，但不是简单的集合，而是取决于该网站的内容（如网页的数量及网站的定位）。1.1网页设计基础知识2、网站的类型网站按内容进行分类，可分为门户网站、垂直网站、地方网站；而其中的垂直网站又可分为新闻网站、娱乐网站、体育网站、科技网站、汽车网站、财经网站、房产网站、游戏网站、生活服务网站和教育职业网站等。1.1网页设计基础知识根据网站是否具有交互性和远程维护功能，可以将网站分为静态网站和动态网站两大类。1.1网页设计基础知识1.1.2常用Web术语1、Web常用术语1、URL2、网页3、主页1.2网页制作工具1.2.1网页编辑工具1、FrontPage2、Dreamweaver1.2网页制作工具1.2.2网页图像与动画制作工具1、Flash2、Fireworks3、PhotoShop4、PhotoImpact5、COOL3D6、UleadGIFAnimator1.3网页配色1.3.1色彩的基础知识1、色彩的产生——光与色可视光谱1.3网页配色所示白光经三棱镜分解后的光谱1.3网页配色2、色彩的分类——彩色与无彩色彩色与无彩色1.3网页配色3、色彩的三个特性——色相、明度和纯度⑴色相⑵明度⑶纯度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、常用概念⑴色彩的对比色彩对比是指各种色彩在界面内形成的面积、形状、位置以及色相、明度、纯度之间的差异，使网页出现不同的变化和心理感受。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、网站标志Logo5、版面布局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章HTML语言2.1HTML语言基础2.2字符格式的设置2.3多媒体文件的调用2.4超链接的设置2.5表格的设置2.6表单的设置2.7框架的设置2.1HTML语言基础2.1.1HTML标签1、标签的组成⑴HTML语言中，所有的标签都必须用尖括号括起来，比如：html、head、body等。⑵大部分标签都是成对出现的，即有开始标签和结束标签，这样表示的意义在于用开始标签和结束标签来定义该标签所产生作用的范围。2.1HTML语言基础2、标签的属性标签都有相对应的属性，通过属性可以对标签的内容做更为详细的说明，所有属性都放置在开始标签的尖括号内。如：h2align=”center”HTML语言基础/h2。2.1HTML语言基础2.1.2基本标签基本的HTML文档标签如下：1、html……/html2、head……/head3、title……/title4、body……/body5、hn……/hn2.1HTML语言基础6、p……/p7、br8、pre……/pre9、!--和--10、blockquote……/blockquote11、hr2.2字符格式的设置2.2.1font标签的使用1、字体标签2、字号标签3、字体颜色标签2.2字符格式的设置2.2字符格式的设置2.2.2字符样式的设置2.2字符格式的设置2.2.3有序和无序列表标签1、ol……/ol2、ul……/ul2.2字符格式的设置2.2.4文字的对齐方式表达对齐方式用ALIGN属性，它可以应用在多种标签内，如标题标签hn、分段标签p和水平线标签hr等。2.3多媒体文件的调用2.3.1图像文件的调用1、img2、border属性3、align属性2.3多媒体文件的调用2.3.2音频文件的调用1、embed……/embed2、bgsound2.3.3视频文件的使用2.3.4移动字幕的使用2.4超链接的设置2.4.1文件之间的链接ahref=”文件名”……/a该标签的主要功能是实现文件之间的相互跳转。2.4超链接的设置2.4.2网站的链接实现由文本链接到网站的方法，类似于上面的链接过程，不同点在于必须给出站点的URL地址。2.4.3电子邮件的链接实现电子邮件的链接方法与前面讲过的链接稍有不同，在属性值中用关键字mailto:引导，并给出所访问的电子邮件地址。在浏览器窗口点击链接时，便直接进入到电子邮件软件中拟写邮件，并发送出邮件。2.4超链接的设置2.4.4图片的链接实现文本到图像的链接方法与前面讲过的链接类似，链接设置完成后，在浏览器窗口中点击链接的文字，直接看到所链接的图片。2.5表格的设置2.5.1建立表格表格范围：一定是在table……/table标签控制的范围内。表的名称：是第一个需要说明的内容。行的数目：通过增加或减少tr……/tr行标签来实现对所需行数的设置。2.5表格的设置单元格：单元格的数目，通过增加或减少td……/td和th……/th标签来实现对所需单元格数的设置。单元格的属性，可以单独设置，以体现表格样式的多样性。单元格的内容，可以是文字、图像和超链接。2.5表格的设置2.5.2表格属性的设置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建立框架的语句结构htmlheadtitle框架的基本结构/title/headframesetframeframeframe……/frameset/html2.7框架的设置2.7.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设置文本的样式4.1.7对齐方式与缩进任务6设置文本对齐方式4.2应用图像案例2使用图像制作网站首页4.2应用图像4.2.1网页中常用图像的种类1、GIF格式2、JPEG格式3、PNG4.2应用图像4.2.2插入图像任务1插入图像4.2.3设置图像的基本属性任务2设置图像的位置4.2.4编辑图像4.2.5设置鼠标经过图像任务3设置页面导航为鼠标经过图像4.3超级链接的概念和种类4.3.1超级链接的概念超级链接是指站点内不同网页之间、站点与Web之间的链接关系，它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。4.3超级链接的概念和种类超级链接由两部分组成：链接源和链接目标。链接源是文本或图像；链接目标是用户单击超级链接之后打开的网页或者下载的文件。4.3超级链接的概念和种类4.3.2超级链接的种类1、根据链接源的特点，一般把链接分为文本链接与图像链接两大类。2、如果按链接目标分类，可以将超级链接分为：⑴内部链接⑵外部链接⑶锚记链接⑷E-mail链接⑸热区链接4.3超级链接的概念和种类4.3.3相对地址与绝对地址1、URL2、绝对地址3、相对地址4.4创建各种链接案例三创建各种超级链接4.4.1创建内部链接任务1添加文本内部链接任务2添加图像内部链接4.4创建各种链接4.4.2创建外部链接任务3添加文本外部链接4.4.3创建E-mail链接任务4添加E—mail链接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添加视频文件任务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.3特殊效果表格的制作使用表格可以制作出许多特殊的布局效果，如细线效果、三维效果、圆角效果等。本节中将主要介绍使用表格来制作细线效果。5.1表格