网页制作基础知识.ppt

1、第1章 网页制作基础知识,认识网站与网页 网页制作软件和制作技术 网站建设流程,1.1 认识网站与网页,网页就是我们上网时在浏览器中看到的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。 另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页），它可以说是网站的门户，通过它不仅可以了解网站的性质和内容，还可以访问网站中的其他页面。,1.1.1 网页的本质,一般情况下，网页中除了包含网页文件（扩展名为.html、.asp等）外，还要用到图像文件（扩展名为.jpg、.gif等）、Flash动画文件（扩展名为.swf）、脚本文件（

2、扩展名为.js）、样式文件（扩展名为.css）以及视频文件（扩展名为.avi、.flv等）等。,1.1.2 网页的功能组成,从专业的角度讲，网页中的元素各有其不同的作用，可以根据功能将他们分为站标、导航条、广告条、标题栏和按钮等，如下图所示。,站标,导航条,按钮,广告条,标题栏,1站标,站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo通常采用企业的Logo。 Logo一般采用蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有很多是图文组合。,2导航条,对于一般的企业网站，如果网站内容不多，可根据网站风格灵活摆放导航条，也可以使用图片

3、或Flash动画等制作导航条。 对于像搜狐、新浪等大型网站，如果网站栏目很多，可以将导航条分为多排放置在Logo的下方或右侧。为便于查看，可为各排设置不同的底色。,导航条可以说是网站最重要的组成部分，它是一组链接到网站内主要页面的超链接组合，通过单击这些超链接，浏览者可以轻松找到网站中的各个页面，导航条也因此而得名。设计导航条时，应遵循以下原则。,3广告条,广告条又称Banner，其功能是宣传网站或替其他商品做广告。Banner的尺寸可以根据其内容或版面需要来安排。,4标题栏,此处的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，

4、大大地方便了浏览者。 标题栏可以是文字加不同颜色的背景，也可以是图片，这要根据网站的内容和规模来决定。,5按钮,按钮通常是启动某些装置或机关的开关。网页中的按钮也不例外，单击它后，网页会实现相应的操作，比如页面跳转，或数据传输等。,1.1.3 IP地址、域名与网址,1IP地址,我们知道，互联网是全世界范围内的计算机联为一体而构成的通信网络。虽然互联网上连接了不计其数的服务器与客户机，但它们并不是杂乱无章的。每一个主机在互联网上都有唯一的地址，我们称这个地址为IP地址（Internet Protocol Address）。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“61.135

5、.150.126”就是一个IP地址。,2域名,由于IP地址在使用过程中难于记忆和书写，人们又发现了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名“”，然后按回车键就可以访问搜狐网站了。,3网址,网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。,1.1.4 静态网页与动态网页,从制作技术的角度来讲，网

6、页可分为静态网页和动态网页。完全采用HTML技术制作的网页称为静态网页；使用HTML、编程语言和数据库共同完成，需要与数据库实时交互的网页称为动态网页。,1.2 网页制作软件和制作技术,1.2.1 网站管理与网页制作软件,目前用于网站管理和网页制作的软件主要是Dreamweaver，其功能全面、操作灵活、专业性强。另外，它还可以作为动态网站的开发环境。 在制作网页时，除Dreamweaver外还需要用到Fireworks、Flash、Photoshop等辅助软件。,1.2.2 HTML语言简介,1认识HTML,HTML语言是网页制作的基础，本节我们就来简单了解一下该语言。,HTML是Hyper

7、text Markup Language的首字母缩写，中文称作“超文本标记语言”。目前Internet上的绝大多数网页都遵循HTML语言（或是由HTML语言发展而来的语言）规范。,2HTML文档的基本结构,HTML语言的核心是标签（或者称为标记）。也就是说，我们在浏览网页时看到的文字、图像、动画等在HTML文档中都是用标签来描述的。一个完整的HTML文档由标签开始并由标签结束，所有的HTML代码都应写在标签与标签之间。,3HTML标签的类型与特点,实际上，学习HTML语言的过程也就是学习各种标签格式的过程。,（1）单标签 语法是： （2）双标签 “双标签”由“始标签”和“尾标签”两部分构成，必

8、须成对使用。语法是： 内容 （3）标签属性 许多单标签和双标签的始标签内可以包含一些属性。语法是：,1.2.3 数据库简介,数据库（DataBase）是以一定的组织形式存放在计算机存储介质上的相互关联的数据集合。 数据库是以表格的形式，按照行和列来表示信息。一般来说，表的每一行称为一个“记录”，每一列称为一个“字段”，字段和记录是数据库中最基本的术语。例如，一个记录某公司员工信息的数据库，通常包括姓名、年龄、学历等字段，而针对每个员工的具体数据就是一个记录。,1.3 网站建设流程,1.3.1 收集网站建设需求及素材,网站建设需求是指想要通过建设网站实现的功能和目标；素材主要包括文字资料、图片、

9、动画、声音和视频等，素材按来源可分为以下几种类型。,客户提供的素材：主要是与产品或企业相关的图像和文字，比如产品外观图像等。 网上收集的素材：主要是一些辅助性图像，这些图像的装饰性较强，比如背景图像等。 独自创作的素材：主要是整个页面中视觉面积最大、最有说服力的图像，比如广告图像、标题图片等。,1.3.2 制作网站策划书,网站策划书的内容主要包括网站要实现的功能、网站结构以及要使用的技术等。,1确定网站要实现的功能 2规划网站结构 3确定网站要应用的技术,1.3.3 网页美术设计,1网页配色,设计网页时，可根据以下原则确定网页的背景颜色和主色调，并进行颜色搭配。,（1）网页背景颜色最好选择白色

10、或黑色。 （2）可根据网站性质确定网页的主色调，并且该主色调应贯穿于网站中的所有网页。 （3）恰当地运用同类色、邻近色和对比色，可增强网页的层次感、丰富网页的色彩或突出某些重要内容（如导航条或版块标题）。,2网页版式设计,版式是设计网页时要考虑的一个重要因素。一般情况下，各种网页的布局都大同小异。例如，几乎所有网页的上部都有站标、导航条和广告条，中间是各个版块，下部为网站信息区。,站标,导航条,广告条,各个版块,网站信息区,3网页尺寸,页面尺寸是网页设计中必须要考虑的一个问题。目前，我国大部分电脑的显示器是17英寸，其分辨率通常为1024768像素。因此，为避免在浏览网页时需频繁拖动水平滚动条

11、，最好将网页宽度设置为1002像素以内。同时，由于浏览者可以利用浏览器的垂直滚动条快速上下滚动网页，因此对网页的高度没有特别要求，用户可根据需要设置。,1.3.4 美术与程序整合,在使用图像处理软件（如Photoshop、Fireworks等）设计好网页效果图后，还需要将设计好的效果图进行切割导出。 将图片导出后，就可以在Dreamweaver中组织网站内容了，包括输入文本，插入图片、动画等，如果是动态网页，要考虑与程序的整合。,1.3.5 测试和发布网站,要使别人能通过互联网访问你的网站，就需要将其上传到服务器上，并拥有一个属于自己的域名。这就需要申请虚拟空间和域名。 在将网站制作好，并申请好虚拟空间和域名后，就可以测试并发布网站了。,1.3.6 推广和维护