幻灯片 1

Download Report

Transcript 幻灯片 1 

第12章 网页制作和网站建设
2015/7/18
1
本章内容
12.1 网页基础
12.2 HTML语言
12.3 Dreamweaver CS4的使用
12.4 网站的发布和维护
2015/7/18
2
12.1 网页基础
网页是互联网上的基本文档，是用HTML或其他语
言(JavaScript、VBScript、ASP、JSP、PHP、
XML等)编写的。
网页本质上就是一个存放在互联网中某个Web服务
器上的文件。
当用户访问该网页时，存放网页的服务器把网页传
送到用户计算机，通过网页浏览器解读并展示出来。
访 问 一 个 网 站 时 ， 打 开 的 第 一 个 网 页 称 为 主 页
(Homepage)，也叫首页。
2015/7/18
3
12.1 网页基础
12.1.1 网页的分类
12.1.2 网页的基本构成
12.1.3 网页常用制作工具
12.1.4 网站制作流程
2015/7/18
4
12.1.1 网页的分类
1. 静态网页
静 态 网 页 是 指 纯 HTML 格 式 的 网 页 ， 一 般
以.htm、.html、.shtml或.xml为后缀名。访问者请
求浏览时，网页在Web服务器中不会发生动态改变。
2015/7/18
5
12.1.1 网页的分类
静态网页的特点：
(1)有固定的URL，而且URL以.htm、.html、.shtml等
常见形式为后缀，不包含“?” 。
(2)静态网页的内容保存在网站服务器上，每个静态网页
都是一个独立的文件。
(3)相对稳定，因此容易被搜索引擎检索。
(4)无数据库支持，在网站制作和维护方面工作量较大。
(5)交互性差，在网页功能实现方面相对较弱。
静态网页的浏览：浏览器向Web服务器发出访问
静态网页的请求，Web服务器接受请求后直接将
网页传到浏览器，浏览器解读HTML文件后显示。
2015/7/18
6
12.1.1 网页的分类
2. 动态网页
动态网页一般指用ASP、PHP、JSP或.NET等网络
编程语言编写的运行于服务器端的代码。
动态网页除了静态网页的元素外，还包含一些浏览
器和Web服务器交互的应用程序。
动态网页里很多信息存放在数据库中，当访问者单
击相应的链接时才动态生成网页。
常见的动态网页后缀名有.asp、.jsp、.aspx、.cgi、
.php等，访问动态网页网址中有一个标志性的“?” 。
浏览器发出动态网页请求后，服务器对代码进行编
译后生成HTML代码。
2015/7/18
7
12.1.1 网页的分类
动态网页的特点：
(1)有数据库支持，可以降低网站维护的工作量。
(2)交互性好，可以实现更多的功能，如：用户注册、在
线调查、订单管理等。
(3)动态网页并不是独立存在于服务器上的网页文件，只
有当用户请求时服务器才返回一个完整的网页。
(4)在搜索引擎检索方面不如静态网页效果好，因此网站
在进行搜索引擎推广时要做一定的技术处理才能较好
地被检索到。
2015/7/18
8
12.1.2 网页的基本构成
(1)文字：需考虑文字的内容和整体效果。
(2)图像：为了不影响网页传输速率，网页的图片不
能太大，常用的图片格式有GIF和JPEG，二者
容量较小且具有跨平台的特性，可在不同操作系
统支持的浏览器上显示。
(3)超链接：从一个网页指向另一个目的地的链接。
(4)表格：主要作用是控制网页其他元素的布局方式。
(5)动画：常用的动画格式有GIF和SWF。GIF动画
的原理就是高速连续显示多幅静态图片，SWF动
画是用Flash软件制作的矢量动画。
(6)其他元素：音频、视频、表单、脚本语言编写的
特效(如：图片滚动)等。
2015/7/18
9
12.1.3 网页常用制作工具
网页设计软件有3类：网页编辑工具
动画制作工具
图形图像处理工具
(1)网页编辑工具：FrontPage、Dreamveaver
– FrontPage：Microsoft产品。使用简单、容易上手、
功能也比较强大，缺点是兼容性不好、对动态网页
支持不好。
– Dreamveaver：Adobe产品。目前应用最为广泛，
它是一款集网页制作和管理网站于一身的所见即所
得网页编辑器，可以对HTML网页文件进行可视化编
辑，还集成了程序开发语言。
2015/7/18
10
12.1.3 网页常用制作工具
(2)动画制作工具：Flash
– Flash：交互式动画设计工具，可以将音乐、声效和
动画方便地融合在一起。采用矢量绘图技术，因此
放大后也不会失真，且容量小。
(3)图形图像处理工具：Photoshop、Fireworks、
CorelDRAW、Illustrator
– 一般网页设计中使用Photoshop和Fireworks处理
图形图像。
– Photoshop：Adobe产品。总体功能可分为图像编
辑、图像合成、校色调色及特效制作等部分。
2015/7/18
11
12.1.4 网页制作流程
(1)网站定位
明确客户要求制作一个什么样的网站。
(2)收集网站素材和策划栏目内容
可以让客户提交一份网站的栏目计划书，收集
整理网站素材、确定栏目内容后一般要起草栏
目规划书备案。
(3)提出页面设计方案
主要是美工根据前面的网站定位和栏目策划来
设计页面，包括主页和二级页面。
2015/7/18
12
12.1.4 网页制作流程
(4)制作页面
把美工设计的页面变成网页格式，通常是利用
切片工具分割图片，保存成网页格式文件。注
意区分网站中的静态页面和动态页面。
(5)程序设计
把网页串联起来，结合数据库，实现后台功能。
(6)测试发布
网页和程序整合好后，进行本地测试，主要测
试链接的有效性、浏览器中的显示效果等。之
后上传到客户的服务器中，由客户检测试用，
并根据客户反馈意见修改。
2015/7/18
13
12.2 HTML语言
HTML是构成网页文档的标记语言。
HTML文件是纯文本文件，无需编译即可运行。
HTML通过标记把文字、图片、多媒体等各种网
页元素组织形成网页。
HTML的格式非常简单，只是由文字及标记组合
而成，基本上只要明白了各种标记的用法便掌握
了HTML。
2015/7/18
14
12.2 HTML语言
12.2.1 HTML文档结构
12.2.2 文本控制
12.2.3 表格
12.2.4 超级链接
12.2.5 图像
12.2.6 表单
12.2.7 层叠样式表单
2015/7/18
15
12.2.1 HTML文档结构
HTML文件包含两部分：头信息部分和正文部分。
<>包围的是HTML语言的标记，用来控制网页中
各元素的显示状态。
HTML文件的一般结构：
<html>
<head>
头信息部分
</head>
<body>
正文部分
</body>
</html>
2015/7/18
16
12.2.1 HTML文档结构
1. <html>
<html>标签对位于HTML文档的开头和结束位置，
左标签为开始的标志，右标签为结束标志。
2. <head>
<head>标签对之间的内容定义了HTML文档的
头信息部分，包含了网页的一些基本信息。标签
对间的内容不会在浏览器的文档窗口中显示。
2015/7/18
17
12.2.1 HTML文档结构
例：
<html>
<head>
<title>
这是一个头信息的例子，这是网页标题
</title>
<bgsound src="bg.midi" loop="-1">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312-80">
<script language="JavaScript">
Document.write("Hello net.")
</script>
</head>
<body text="#0000FF" link="#003300" alink="#CC0000" vlink="#00EF00"
background="bg.gif"
bgcolor="#000000"
leftmargin=3
topmargin=2
bgproperties="fixed">
正文部分
</body>
</html>
2015/7/18
18
12.2.1 HTML文档结构
(1)<title>：网页标题，显示在浏览器窗口的标题栏。
若无<title>命令，则在浏览器的窗口标题栏显
示网页的URL。
(2)<bgsound>：单标签。指定网页的背景音乐。
– src属性：背景音乐文件的路径和文件名。
– loop属性：播放次数，-1表示循环播放。
(3)<meta>：单标签。设置文档浏览时所用的默认
语言。gb2312或gb2312-80是一个简体中文字
符集的中国国家标准。
2015/7/18
19
12.2.1 HTML文档结构
(4)<script>：标签对里面的代码是浏览器执行一些
动作的脚本代码，通常是用脚本语言编写的，
如：JavaScript、VBScript等。
– 脚本script是使用一种特定的描述性语言，依据一定
的格式编写的可执行文件，又称作宏或批处理文件。
– 脚本程序可以使用户和网页进行交互，但有些脚本
程序会被植入病毒，通过浏览器菜单“工
具”“Internet选项”“安全”，可设置脚本的禁用
和启用。
2015/7/18
20
12.2.1 HTML文档结构
3. <body>
<body>定义了HTML文档的主体部分，标签对之间
是实际要在浏览器窗口中显示的内容和其他用于控
制网页元素显示方式的标签。
–text属性：整个网页中的文字颜色。颜色取值采用十六进
制的红绿蓝(red-green-blue, RGB)值表示，即#rrggbb。
–link属性：未阅读过的超链接文本的颜色。
–alink属性：活动的超链接文本(鼠标移动到超链接上未按
下时)的颜色。
–vlink属性：访问过的超链接文本的颜色。
2015/7/18
21
12.2.1 HTML文档结构
– background属性：背景图像文件。
– bgcolor属性：背景颜色。同时设定背景图像和背景颜
色时，背景图像优先。
– leftmargin属性、topmargin属性：分别为网页显示画
面与浏览器窗口左边沿、上边沿的距离，单位为像素。
– bgproperties属性：页面背景图像的特性，值为“fixed”
表示页面背景图像为固定，不随页面的滚动而滚动。
2015/7/18
22
12.2.2 文本控制
1. 字体属性
(1)<h1>—<h6>
分别表示6种大小不同的标题字体，<h1>表示
的字体最大，<h6>表示的字体最小，标题标签
间的内容显示为黑体字。
(2)<font>
– color属性：字体颜色，用6位十六进制的数字或颜
色名表示。
如：要把文字设为红色——
<font color="#FF0000">红色字体</font>
<font color="red">红色字体</font>
– size属性：字体大小，分为7个等级，1号字体最小，
7号字体最大。
如：<font size=7>设为7号字体</font>
2015/7/18
23
12.2.2 文本控制
– face属性：字体。
如：<font face="仿宋体">仿宋体文字</font>
注：若浏览者的计算机上没有安装设置的字体，文字
将以标准字体显示。face属性允许列出多个字体，用
逗号分隔，浏览器会根据顺序使用合适的字体显示。
– 特殊的字体显示样式：
<b>粗体
<i>斜体
<sup>上标
<sub>下标
<big>大字体
<small>小字体
<u>下划线
<s>、<strike>删除线
<tt>打字机等间距字体
2015/7/18
24
12.2.2 文本控制
2. 文本布局
(1)<p>：创建一个段落。
– align属性：说明对齐方式，取值为left(左对齐)、
center(居中)、right(右对齐)。
(2)<br>：单标签，在网页中显示一个换行。
(3)<nobr>：防止浏览器将标签对中过长的内容自
动换行显示。对住址、数学算式、一行数字、
程序代码等尤为有用。
(4)<blockquote>：按缩进效果显示，与普通文本
文件中使用Tab键缩进效果一样。
2015/7/18
25
12.2.2 文本控制
(5)<center>：在页面的水平方向居中显示。
(6)<marquee>：移动显示图形和文本元素。
– direction 属 性 ： 指 定 移 动 方 向 ， 取 值 为 left 、 right 、
down、up。
– behavior 属 性 ： 指 定 移 动 行 为 ， 取 值 为 scroll 、
alternate、slide。
(7)<dl>、<dt>、<dd>
– <dl>：创建定义式列表。
– <dt>：可单标签。列表中的上层项目，即列表项目标题。
– <dd>：可单标签。列表中最下层项目，即列表项。
2015/7/18
26
12.2.2 文本控制
例：
<html>
<head>
<title>一个定义式列表</title>
</head>
<body>
<dl>
<dt>中国城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
<dt>美国城市
<dd>华盛顿
<dd>芝加哥
<dd>纽约
</dl>
</body>
<html>
2015/7/18
27
12.2.2 文本控制
(8)<ol>、<ul>、<li>
– <ol>：创建有编号列表，每个列表项前的前导记号为按
顺序自动累加的数字编号。
– <ul>：创建无编号列表，每个列表项前有一个前导记号
(Bullet，通常为一个黑圆点、空心圆点、方形黑点)。
– <li>：可单标签。创建有编号列表和无编号列表的列表项。
2015/7/18
28
12.2.2 文本控制
例：
<html>
<head>
<title>一个有编号列表+一个无编号列表</title>
</head>
<body>
<p>中国城市</p>
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ol>
<p>美国城市
<ul>
<li>华盛顿
<li>芝加哥
<li>纽约
</ul>
</body>
<html>
2015/7/18
29
12.2.3 表格
表格组成：行Rows、列Columns、单元Cell。
1. <table>：定义表格区段，其他表格命令必须置于
这个标签间。
– border属性：表格的边框线粗细。缺省为1，表示表格边
框线粗细为1像素；取值为0或无border属性表示表格没
有边框线。
– cellspacing属性：单元格间距，指表格内单元格之间的
距离，及单元格和表格上下左右边框的距离，缺省值为3。
– cellpadding属性：单元格边距，指单元格内容与单元格
边框上下左右四个方向的距离，缺省值为3。
2015/7/18
30
12.2.3 表格
– width属性：表格宽度。取值是像素或百分比。
 若width的像素值大于显示器分辨率宽度，将出现滚动条。
 实际应用中常使用百分比，则表格宽度将会随窗口显示宽
度而自动调整。
– bgcolor属性：表格背景色。取值是RGB或颜色名。
– background属性：表格背景图片。取值为图片地址。
注：bgcolor与background同时设置时，background优先。
– bordercolor属性：表格边框线颜色。只有当边框线border
不为0时，此属性才起作用。
– align属性：表格对齐方式，取值left(默认)、center、right。
2015/7/18
31
12.2.3 表格
2. <tr>：可单标签。表格行。
– align属性：同一行文字水平方向的排列方式，取值
left(默认)、middle、right。
– valign属性：同一行垂直方向的排列方式，取值top、
middle(默认)、bottom、baseline。
3. <td>：可单标签。表格单元格。
–
–
–
–
–
–
rowspan属性：单元格行高。
colspan属性：单元格列宽。
align属性：水平方向的排列方式，优先于<tr>。
valign属性：垂直方向的排列方式，优先于<tr>。
bgcolor属性：单元格背景色，优先于<table>。
background属性：单元格背景图片，优先于<table>。
2015/7/18
32
12.2.3 表格
4. <th>：可单标签。定义表格列名，缺省的表头
字体为粗体且居中。
– 有三个属性：rowspan、colspan、valign。
5. <caption>：定义表格标题。
– align属性：取值为top或bottom，表示标题位于表格
正上方或正下方居中显示，缺省为top。
2015/7/18
33
12.2.3 表格
例：
<table border="1">
<tr>
<td>1行，1单元</td>
<td>1行，2单元</td>
</tr>
<tr>
<td>2行，1单元</td>
<td>2行，2单元</td>
</tr>
</table>
2015/7/18
34
12.2.4 超级链接
建立超链接的基本样式：
<a href="value">click here</a>
– href属性：指定超链接的目标，value的引号可省略。
– click here：可以是文字、图片等，以特殊方式显示。
超链接的目标可以是站外地址、同一网站内部、
同一网页不同位置。
1. 站外链接
站外链接是指单击超链接打开站外页面，通常链
接目标位置写的是一个网址或是一个绝对地址。
2015/7/18
35
12.2.4 超级链接
2. 站内链接
站内链接是从站内的一个页面链接到另一个页面，
链接目标只要写相对地址。
站内链接目标的写法一般有以下4种：
– 例1：<a href="./bbs/1.html">站内链接1</a>
链接起始文件和bbs文件夹在同一目录下。“./bbs”代
表当前目录下的bbs文件夹，“./”可省略。
– 例2：<a href="../bbs/2.html">站内链接2</a>
链接起始文件的上一层目录下有bbs文件夹，“..”表
示上一层目录。
– 例3：<a href="/admin/bbs/3.html">站内链接3</a>
根目录下有admin文件夹，第一个“/”表示根目录。
– 例4：<a href="4.html">站内链接4</a>
链接起始文件与目标文件位于同一目录下。
2015/7/18
36
12.2.4 超级链接
3. 锚点
若一个页面内容很多，可在页面不同位置设置锚
点标记，单击超链接跳转到同一页面的相应位置。
首先设置跳转目标点，即锚点：
<a name="锚点名称"></a>
– “锚点名称”由用户命名，右标签可缺省。
然后设置链接起始点，即鼠标单击的位置：
<a href="#锚点名称">click here</a>
2015/7/18
37
12.2.4 超级链接
例：
<table cellspacing="20">
<tr>
<td><a href="#m1">第一章</a></td>
<td><a href="#m2">第二章</a></td>
<td><a href="#m3">第三章</a></td>
<td><a href="#m4">第四章</a></td>
<td><a href="#m5">第五章</a></td>
<td><a href="#m6">第六章</a></td>
</tr>
</table>
<h2><a name="m1">第一章</a></h2>
这是第一章内容
<h2><a name="m2">第二章</a></h2>
这是第二章内容
<h2><a name="m3">第三章</a></h2>
这是第三章内容
<h2><a name="m4">第四章</a></h2>
这是第四章内容
<h2><a name="m5">第五章</a></h2>
这是第五章内容
<h2><a name="m6">第六章</a></h2>
这是第六章内容
2015/7/18
38
12.2.5 图像
<img>
– src属性：必选属性，指明图片的位置和名称。
– width和height属性：设定图片在网页中的显示尺寸，值可
以是像素和百分比 。
如：<img src="images/img1.jpg" width="120" height="100">
– border属性：在图片周围加上边框，设定边框线的粗细。
如：<img src="images/img1.jpg" width="120" height="100" border="2">
– alt属性：图片不能正常显示时，则显示alt属性中设置的替
代文字。
如：<img src="images/img1.jpg" width=40% alt="我是替代文字">
2015/7/18
39
12.2.6 表单
表单的功能：表单用在动态网页中，提供给用户
输入数据的界面。
表单中的数据传送到服务器后，由服务器端的
CGI(Common Gateway Interface, 通用网关界
面)程序处理。
– CGI：一套定义WWW服务器和脚本程序沟通的标准。
– 脚本程序：位于服务器端的一些可执行程序，用来接
收、处理客户端送来的信息，并可把处理结果再送回
客户端。
– CGI程序：位于服务器端符合CGI标准的脚本程序。
2015/7/18
40
12.2.6 表单
– CGI程序的典型应用
在服务器端建立一个具有各种表单格式的HTML文件，
用户在客户端使用浏览器调用这个HTML文件，并在
表单中输入相应的资料或信息，然后将表单中的内容
发送到服务器端，服务器则启动一个相应的CGI程序
对这些内容进行处理，也可将处理结果送回客户端浏
览器中。
CGI最著名的应用为BBS。
2015/7/18
41
12.2.6 表单
1. <FORM>：产生表单，标明“表单区段”。
– method属性：用户输入数据传送到服务器端的方式，
取值post、get。
– action属性：指定服务器处理表单的CGI程序。
2015/7/18
42
12.2.6 表单
2. <input>：产生输入控件。
单行文字框
选择按钮
复选框
发送按钮
2015/7/18
重置按钮
43
12.2.6 表单
– type属性：产生不同的输入控件。
 text：单行文字框(Text Box)，用户输入一般信息使用。
 radio：选择按钮(Radio Button)，产生具有单一选择
结果的圆点。
 checkbox：复选框(Check Box)，产生具有多重选择
的方框，√表示选中。
 password：密码文字框(Password)，类似text单行文
字框，用于输入密码，不显示在屏幕上。
 submit：发送按钮(Submit Button)，产生一个按钮，
用户按下时即将表单中用户输入的数据送到服务器端，
供CGI程序处理。
 reset：重置按钮(Reset Button)，恢复默认值，供用
户重新输入。
2015/7/18
44
12.2.6 表单
– name属性：指定输入控件的名称，可任意取变量名。
– value属性：设定输入控件的默认值或用户输入的内
容，对于按钮则指定按钮上标示文字。
注：当按下“发送”按钮时，实际上是将name和value
的内容发送。
– maxlength属性：输入文字框的最大可输入字符数。
– size属性：输入文字框的显示宽度(以字符数计算)。
– checked属性：将选择按钮或复选框置为已选状态。
2015/7/18
45
12.2.6 表单
例：浏览器中的显示结果见上图。
<form>
姓名：<input type="text" name="txtbox">
<p>
<dl>
<dt>性别：
<dd><input type="radio" name="rd1" checked>男
<dd><input type="radio" name="rd1" checked>女
<dt>系别：
<dd><input type="radio" name="rd2">计算机工程系
<dd><input type="radio" name="rd2">电气工程系
<dd><input type="radio" name="rd2">机械工程系
<dd><input type="radio" name="rd2">机电工程系
<dd><input type="radio" name="rd2">管理工程系
</dl>
<p>个人爱好（可复选）：<br>
<input type="checkbox" name="chk">文学
<input type="checkbox" name="chk">书法
<input type="checkbox" name="chk">体育
<input type="checkbox" name="chk">音乐
<input type="checkbox" name="chk">绘画
<input type="checkbox" name="chk">收藏
<p><input type="submit" value="发送">
<input type="reset" value="重置">
</form>
2015/7/18
46
12.2.6 表单
3. <textarea>：多行文字框，产生附加滚动条的多
行文字框，供用户输入。
– name属性：指定控件名。
– rows属性：可见总行数。
– cols属性：可见总列数。
2015/7/18
47
12.2.6 表单
例：浏览器中的显示结果见上图。
<form>
<textarea name="work" rows=8 cols=35>
2010年度网络安全十大新闻事件：
1. 内鬼作乱
2. 美国政府加强网络安全建设
3. 云计算服务安全问题
4. 维基解密掀起轩然大波
5. 僵尸网络头目被逮捕
6. 黑客多贪财
7. Stuxnet恶意软件攻击核设施
8. 苹果再掀风浪
9. 安全行业掀起并购狂潮
10. 发现安全隐患 通知责任人还是公开发布?
</textarea>
</form>
2015/7/18
48
12.2.6 表单
4. <select>：定义选项区段，与<option>配合使
用以产生一个下拉列表框。
– multiple属性：列表框中的项目可复选。
– name属性：控件名称。
– size属性：列表框中可见的项目数。
5. <option>：产生选择项目，必须置于<select>
区段内，产生列表框中的一个选项。
– selected属性：将选项设为选中状态。
– value属性：用户选中该项目时，该项目显示文字可
作为默认的回传值，供CGI程序处理。
2015/7/18
49
12.2.6 表单
例：浏览器中的显示结果见上图。
<form>
<select name="city">
<option>北京市
<option>天津市
<option>上海市
<option>重庆市
</select>
</form>
2015/7/18
50
12.2.7 层叠样式表单
层叠样式表单(Cascading Style Sheets, CSS)是
用于定义各种样式的一套规范，它的原则是“先定
义后使用”，即先定义好一些样式，再把这些样式
指定给网页的某些元素。
一个网站中的所有页面风格和样式应该是统一的，
这样显得整齐和美观，所以通常设计中使用CSS
控制网站样式，达到一致性的效果。
HTML定义的是网页结构，CSS定义的是网页外
观。使用CSS会使网页格式控制变得很灵活。
CSS样式可以定义在HTML文档里，也可以单独
作为一个文件。
CSS样式可以作用于多个页面或整个站点；修改
CSS样式，涉及到的网页都会被修改，维护方便。
2015/7/18
51
12.2.7 层叠样式表单
1. CSS的工作过程
例：
<style>：定义CSS样式。
<!……> ： 命 令 间 的 内 容 为
注解，不会显示。
{}之间定义的是<h2>标题的
样式。页面中所有的<h2>标
题都会使用这种样式。
<html>
<head>
<title>CSS例1</title>
<style>
<!-h2{
font-family:黑体;
color:red;
}
-->
</style>
</head>
<body>
<h2>第一个红色黑体二级标题</h2>
<h2>第二个红色黑体二级标题</h2>
</body>
</html>
2015/7/18
52
12.2.7 层叠样式表单
2. 定义CSS
CSS样式的定义具有统一格式——
如：h2{font-family:黑体}
– h2称为选择器。
– 大括号间定义的是各种属性和属性值，属性和属性值
间用冒号隔开。
– 多个属性间用分号分开。
2015/7/18
53
12.2.7 层叠样式表单
(1)标签作为选择器
例1：h2标签就是一个选择器。
例2：CSS样式：
h2{
font-family:黑体,Arial,Helvetica;
color:red;
}
font-family属性定义了3个属性值，用逗号隔开，
表示3种字体可供浏览器按顺序选择，如果都没
有，则用默认字体显示。
2015/7/18
54
12.2.7 层叠样式表单
(2)类作为选择器
作为选择器的类的名称必须
以“.”开头，后面跟{}，里
面写属性值。
<html>
<head>
<title>类选择器例子</title>
<style>
<!-.c1{
font-family:黑体;
color:red;
}
-->
</style>
</head>
<body>
<p Class="c1">这里使用了c1定义的样式</p>
<h2 Class="c1">这里也使用了c1定义的样式</h2>
</body>
</html>
2015/7/18
55
12.2.7 层叠样式表单
3. 在HTML中使用CSS
HTML中有3种方式使用CSS：
(1)在<head>标签中定义CSS。
(2)在元素标签中定义CSS。
(3)采用链接形式调用CSS文件。
前两种方式适合用在定义单一HTML文档时，如
果有多个页面用到同样的CSS样式，则采用第3
种方式比较好。
2015/7/18
56
12.2.7 层叠样式表单
(1)在<head>标签中定义CSS
把样式定义写在注释标签中，然后放进<style>
标签，最后写在HTML文档的<head>标签中。
对于类选择器定义的CSS，在文档的<body>标
签中要调用它，必须采用Class属性：
Class="类选择器名称"
2015/7/18
57
12.2.7 层叠样式表单
(2)在元素标签中定义CSS
CSS定义放在<body>部分的各个标签中。
例：
在元素标签中定义CSS
<html>
<head>
样式和单独设置标签属
<title>元素标签中使用CSS例子</title>
性效果是一样的，因此
</head>
在实际中使用不多。
<body>
<h2 style="font-family:黑体; font-style:italic">
这是个使用了CSS样式的标题</h2>
<h2>这是个普通标题</h2>
</body>
</html>
2015/7/18
58
12.2.7 层叠样式表单
(3)采用链接形式调用CSS文件
把 CSS 样 式 单 独 保 存 成 一 个 文 件 ， 其 扩 展 名
为.css，在需要设置样式的页面中以链接的方式
调用这个文件。
采用链接形式调用外部CSS文件在<head>标签
中使用link语句：
<link rel="stylesheet" href="css 文 件 路 径 "
type="text/css"/>
2015/7/18
59
12.2.7 层叠样式表单
例：定义样式文件，保存为“css_test.css”。HTML文
件调用css_test。
样式文件：
页面文件：
<html>
.c1{
<head>
font-family:黑体;
<title>使用链接调用CSS文件的例子</title>
font-style:italic;
<link rel="stylesheet" href="css_test.css">
color:red
</head>
}
<body>
h2{
font-family:楷体_GB2312; <h2 Class="c1">这个标题使用了外部CSS文件
中定义的c1类样式</h2>
color:green
<h2>这个标题使用了外部CSS文件中定义的h2
}
样式</h2>
</body>
</html>
2015/7/18
60
12.2.7 层叠样式表单
2015/7/18
61
12.3 Dreamweaver CS4的使用
12.3.1 Dreamweaver CS4的工作环境
12.3.2 创建和管理本地站点
12.3.3 添加页面内容
12.3.4 在Dreamveaver中使用CSS
2015/7/18
62
12.3.1 Dreamweaver CS4的工作环境
Dreamweaver CS4的工作界面如图所示：
2015/7/18
63
12.3 Dreamweaver CS4的使用
(1)“文档”窗口
设计网页的主要区域，在这个窗口内编辑网页
元素，编辑的效果和浏览器中显示的效果近似。
(2)“文档”工具栏
对文档进行控制。网页制作时有3种文档视图方
式：代码、拆分和设计。
– 代码：“文档”窗口只显示HTML代码。
– 拆分：“文档”窗口分为上下两部分，上面显示HTML
代码，下面显示页面效果。
– 设计：“文档”窗口只显示页面效果，用户可进行可
视化编辑。
2015/7/18
64
12.3 Dreamweaver CS4的使用
(3)“插入”面板
向页面中插入元素，通常在“设计”视图下使用。
“插入”面板可以插入很多对象，对象分为8个类
别 ： 常 用 、 布 局 、 表 单 、 数 据 、 Spry 、
InContext Editing、文本和收藏夹。
(4)“属性”面板
显示页面中被选中对象的属性。
(5)“文件”面板
显示网站的所有文件和文件夹，可对文件或文
件夹进行新建、删除、重命名等操作。
2015/7/18
65
12.3.2 创建和管理本地站点
首先要创建一个站点，然后才能在站点下创建和
设计各个网页。
通常情况，网站制作者都是在本机上先制作好网
站，然后上传到网络服务器上。
– 本地站点：在本机上创建的站点。
– 远程站点：上传到服务器上的站点。
2015/7/18
66
12.3.2 创建和管理本地站点
1. 创建本地站点
单击菜单“站点”“新建站点”，或单击菜单“站
点”“管理站点”，在“管理站点”对话框中单击
“新建”按钮。
创建站点对话框有两个标签：基本和高级。
– “基本”方式以向导形式进行创建。
– “高级”方式以目录形式进行创建。
2015/7/18
67
12.3.2 创建和管理本地站点
“基本”方式创建站点：
(1)给站点起个名字，站点的HTTP地址一栏可不填。
(2)询问是否使用服务器技术。服务器技术指网站服
务器端组件的编程技术，一般有脚本语言(如：
JavaScript 、 VBScript) 或 动 态 服 务 器 编 程 语 言
(如：ASP、JSP等)。
(3)选择文件的操作方式，一般选择“在本地编辑完成
后再上传到服务器”；之后，指明本地文件的存放
位置。
(4)选择连接到远程服务器的方式，可以先选择“无”，
等制作完成后再上传到远程服务器。
(5)列出前面所填的站点信息(可单击“上一步”返回修
改)，单击“完成”按钮，站点建立完毕。
2015/7/18
68
12.3.2 创建和管理本地站点
2. 创建新文档
站点创建完成后，在本机上会有一个存放网站文件
的文件夹。同时在“文件”面板中可看到站点的文件。
站点列表
2015/7/18
视图选择：
“本地视图”显示本
地站点的网站文件
目录结构。
“远程视图”显示服
务器上的目录结构。
69
12.3.2 创建和管理本地站点
创建主页文件：主页文件一般放置在站点的根目
录，选择目录树最上面一行(即根目录)右键快捷
菜单中的“新建文件”，主页一般都以“index”或
“default”命名，静态主页扩展名为.htm或.html；
动态主页扩展名一般为.asp或.jsp。
2015/7/18
70
12.3.3 添加页面内容
制作网页的过程就是向创建的文档内添加网页元素
的过程，并对它们进行编辑排版。
1. 文字
在“设计”模式和“代码”模式下添加文字，在
相应位置输入即可。
对文字格式化：选中文字，在“属性”窗口中修
改。
– 导入文件内容：单击菜单“文件”“导入”，选择
要导入的文件即可将文件内容导入网页中。
2015/7/18
71
12.3.3 添加页面内容
2. 图像
网站的图片一般存放在站点下专门的文件夹中。
单击菜单“插入”“图像”，打开“选择图像源文件”
对话框，找到图片，单击“确定”即可。
图片插入后可在“属性”窗口设定图片属性。
单击菜单“修改”“图像”，可对图片进行基本的编
辑。在实际网页制作中，通常使用专业图像编辑软
件处理图片，如：Photoshop、Fireworks等。
图像占位符：插入相同尺寸的临时代替图像符号。
单击菜单“插入”“图像对象”“图像占位符”。
2015/7/18
72
12.3.3 添加页面内容
3. 表格
单击菜单“插入”“表格”，在弹出的表格设置对
话框中，设置行列数、表格宽度、边框粗细、单
元格边距、单元格间距，选择表格样式，输入整
个表格的标题等。
2015/7/18
73
12.3.3 添加页面内容
4. 超链接
(1)文字超链接
选中文字，在“属性”窗口中写入链接的目的地址。
– 方法一：单击文件夹图标打开对话框选择链接目的文件。
– 方法二：鼠标直接按住“指向文件”图标，拖曳到“文件”
面板中目的文件上放开。
2015/7/18
指向文件
74
12.3.3 添加页面内容
(2)图像超链接
整幅图片超链接：和文字链接操作相同。
图片热点超链接：选择图片中的一部分建立超链
接，使用图像“属性”窗口中下面部分的热点工具
划定热点区域。
2015/7/18
75
12.3.3 添加页面内容
(3)锚记链接
第一步：在链接目的处，打开菜单“插入”“命名
锚记”插入锚记并命名，如：“m2”。
第二步：选中需要设置链接的文本，在“属性”面
板中“链接”一栏输入“#”和锚记名称，如：“#m2”。
2015/7/18
76
12.3.3 添加页面内容
锚记链接举例：
2015/7/18
77
12.3.4 在Dreamweaver中使用CSS
1. 创建样式表
启 动Dreamweaver ，打开某站点的 index.htm
文 件 ， 可 看 到 右 侧 CSS 面 板 是 空 的 ， 这 说 明
index.htm文件目前没有应用样式表。
– 打开CSS面板的方法：菜单“窗口”“CSS样式”。
2015/7/18
78
12.3.4 在Dreamweaver中使用CSS
 创建样式表：
(1)单击CSS面板的“新建CSS规则”按钮，打开创
建样式表对话框。
– 选择创建样式的选择器，选择器类型包括标签、类、
ID和复合内容。
– 输入选择器名称，以“.”开头。
– 选择样式表“仅限该文档”还是“新建样式表文件”。
前者指样式嵌入当前文档中，只作用于当前文档；
后者指把样式表作为一个外部文件保存，以链接的
形式作用于文档，并且可被多个文档链接使用。
(2)单击“确定”按钮，弹出设置样式属性对话框。
可设置样式的很多属性，如字体属性、背景属
性、字间距、行间距等。
2015/7/18
79
12.3.4 在Dreamweaver中使用CSS
在CSS面板中可见创建的样式，如下图所示。
– 因为选择了“仅限该文档”，所以样式处于style中。
– 可重新设置或添加样式的属性。
– 代码窗口的<head>标签中也添加了<style>标签，其
中包括样式表内容。
– “属性”面板的“类”属性也添加了新建的样式。
2015/7/18
80
12.3.4 在Dreamweaver中使用CSS
2015/7/18
81
12.3.4 在Dreamweaver中使用CSS
2. 使用样式表
在网页中使用
已创建样式表：
把光标在需应
用样式的地方
单击，然后在
“属性”窗口的
“类”中选择所
需样式即可。
2015/7/18
82
12.3.4 在Dreamweaver中使用CSS
使用外部独立的CSS文件：
– 单击“属性”面板中的“类”，选择“附加样式表”，在弹
出的对话框中找到相应的CSS文件，然后选择“链接”。
– 链接CSS文件后，如下图所示——
 <head>标签中会自动添加语句：
<link href="css_test.css" rel="stylesheet" type="text/css" />
 CSS面板中能看到外部CSS文件。
 “属性”面板中能看到CSS文件中的样式，直接选择
即可使用。
2015/7/18
83
12.3.4 在Dreamweaver中使用CSS
2015/7/18
84
12.4 网站的发布和维护
网站系统制作完成以后，还需进行一系列工作：
全面、完整的本地测试。
为网站申请域名和空间。
把本地网站上传到WWW服务器上发布。
严格的在线测试。
维护、管理和更新网站。
2015/7/18
85
12.4 网站的发布和维护
12.4.1 网站发布前的准备
12.4.2 上传网站
12.4.3 网站的推广
12.4.4 网站的更新、管理和维护
12.4.5 网站评估
2015/7/18
86
12.4.1 网站发布前的准备
1. 申请域名
(1)域名的注册规范
26个英文字母“A”-“Z”(不区分大小写)、10个数
字“0”-“9”、英文连字符“-”。
– 注册含有“CHINA”、“CHINESE”等的域名须经国家
有关部门(部级以上单位)正式批准。
– 其他国家或地区名、外国地名、国际组织名不得使用。
– 县级及以上行政区划名称的全称或缩写须相关县级及
以上人民政府正式批准。
– 行业名称或商品的通用名称不得使用。
– 他人已在中国注册过的企业名称或商标名称不得使用。
2015/7/18
87
12.4.1 网站发布前的准备
(2)域名的设计原则
域名的设计包括域名主体的设计和域名后缀的选择。
如 ： 淘 宝 网 的 域 名 (taobao.com) 分 为 域 名 主 体
(taobao)和域名后缀(com)两部分。
域名主体的设计要与网站的性质、用途相一致。
域名后缀分为顶级域名和二级域名。
– 顶级域名：即通常说的国际域名。
– 二级域名：地理级域名，共243个国家和地区的代码。
2015/7/18
88
12.4.1 网站发布前的准备
(3)域名的注册方法
查询所需域名是否已被注册，查询网站：
– 中国互联网络信息中心(CNNIC, www.cnnic.net.cn)数据库
– 国际互联网络信息中心(InterNIC, www.internic.net)数据库
–国内负责域名申请事务的公司网站，如：万网
(http://www.net.cn)、新网(http://www.xinnet.com)等。
填写域名申请表。注册国内域名和国际域名分别通过
CNNIC和InterNIC授权代理进行。
– 注册国际域名需提交企业营业执照复印件、盖章的申请表等
文件资料，个人或企业都可注册。
– 国内域名只有企业可以注册。
2015/7/18
89
12.4.1 网站发布前的准备
2. 申请网站空间
 网站空间选择一般有4种形式：
(1)自己购买或单独租用服务器
(2)采用一些ISP(Internet
Service Provider, 互联
适用于一些大型网站，如门户。
网服务提供商)提供的虚拟主机形式(即收费空间)
对稳定性要求很高，网站流量
也很大。费用高。
(3)采用一些网站提供的免费空间
适用于更多的普通网站。购买时
主要看访问速度、空间大小、稳
(4)动态域名解析方案：利用动态域名解析软件，
适用于一些小网站，如个人
定程度以及服务内容。
将自己的计算机设置成服务器。
网站，访问流量不是很大，
对稳定性要求也不高。
适用于初学者。
2015/7/18
90
12.4.1 网站发布前的准备
 动态域名解析方案配置的基本步骤：
(1)找到一个提供动态域名解析服务的网站注册并申请
免费的二级域名。
– 国内比较典型的两款动态域名解析软件：
广州网域科技公司提供的“花生壳”(http://www.oray.cn)
青岛每步科技公司提供的“每步”(http://www.meibu.com)
(2)下载动态解析客户端软件，安装并配置好。
(3)配置本地计算机的IIS(Internet Information Server,
互联网信息服务)。
2015/7/18
91
12.4.1 网站发布前的准备
3. 本地测试
(1)网页正确性测试
– 在浏览器中打开网页，逐页测试，保证每一页的显
示内容无错误。
– 超链接的正确性，Dreamweaver中的“链接检查器”
面板可以进行详细链接管理。
(2)网页兼容性测试：测试网页在不同操作系统和
浏览器中的显示效果。
– 使用目前较主流的操作系统(如：Windows、Linux)
和浏览器进行浏览。
– 测试在同一浏览器中不同分辨率下的显示效果。常
用分辨率为800*600、1024*768、1280*800。
2015/7/18
92
12.4.1 网站发布前的准备
(3)程序及数据库测试
对动态网页程序，在当前设计开发环境中建立
本地服务器环境(如：使用IIS)，并测试程序是否
能正确执行和使用。
2015/7/18
93
12.4.2 上传网站
1. 使用Dreamweaver上传
(1)单击菜单“站点”“管理站点”，打开管理站点窗口。
(2)双击要上传的站点，打开站点定义对话框。
(3)选择左边分类的“远程信息”，在访问下拉列表框中
选择“FTP”选项，设置FTP各项参数，这些参数在
申请网站空间时服务商已提供。单击“确定”按钮，
返回“文件”面板。
(4)按下“连接到远端主机”按钮，开始连接远程主机。
(5)连接成功后，选中要上传的文件(可多选)，单击“上
传”按钮进行上传。
2015/7/18
94
12.4.2 上传网站
2. 使用浏览器上传
(1)在浏览器地址栏输入从服务提供商处获取的远
程FTP地址，在弹出的对话框中输入用户名和密
码，进入FTP服务器。
(2)“复制”本地文件，“粘贴”到FTP服务器上即可。
注：此方法不支持断点续传。
3. 使用FTP工具上传
使用支持断点续传的专用FTP工具上传，常用
的工具软件有LeapFTP、CuteFTP等。
2015/7/18
95
12.4.3 网站的推广
网站的推广主要解决两个问题：
①提高网站的知名度和访问量。
②尽可能挽留住浏览过网站的访问者。
1. 传统媒介推广
通过广播电视、报纸杂志、户外广告和其他一些
印刷品以广告方式进行推广。
2015/7/18
96
12.4.3 网站的推广
2. 搜索引擎推广
概念：利用搜索引擎、分类目录等具有在线检索信
息功能的网络工具进行推广。
方法：首先要保证网站被搜索引擎收录，可到搜索
引擎中注册需要推广的网站地址。
– 如 ： 在 百 度 中 注 册 网 址。打开百度网站收 录入口页面
(http://www.baidu.com/search/url_submit.html) ， 输
入要注册推广的网址和验证码，单击“提交网站”即可。提
交后，若网站合法，百度会在一段时间后收录。
– 常用搜索引擎网站收录入口：
 Google：http://www.google.com/addurl
 Yahoo：http://search.help.cn.yahoo.com/h4_4.html
 搜狗：http://www.sogou.com/docs/help/webmasters.htm#01
2015/7/18
97
12.4.3 网站的推广
3. 资源合作推广
概念：利用网站资源与合作伙伴合作，实现资源
共享。
方法：最常见的方法就是交换链接。
– 分别在双方的网站上放置对方网站的Logo或网站名
称并设置对方网站的超链接。
作用：获得访问量；在搜索引擎排名中增加优势；
增加访问者的可信度。
2015/7/18
98
12.4.3 网站的推广
4. 服务附加推广
概念：为用户提供有价值的免费服务或信息的同
时，附加上一定的推广信息。
方法：常用工具包括免费电子书、免费软件、免
费Flash作品、免费贺卡、免费邮箱、免费即时
聊天工具、电影字幕翻译、制作聊天搞笑图片等。
5. 其他推广方式
论坛推广：在很多论坛上注册几十个帐号——把
签名设为自己的网站；发表热门内容或有争议性
的标题内容；自己顶自己帖子；使用灌水机软件
灌水(需注意更换马甲)。
使用QQ等聊天工具的群功能。
2015/7/18
99
12.4.3 网站的推广
6. 有一定强迫性的推广方式
修改用户浏览器默认首页设置。
自动加入收藏夹。
在用户计算机上安装病毒程序等。
2015/7/18
100
12.4.4 网站的更新、管理和维护
网站更新、管理和维护的主要任务有：
(1)改善组织结构和导航。
(2)验证和更改超链接：保证有效性。
(3)网站内容的更新。
(4)网站设计技术的升级。
如：从静态图片到动画、从静态页面到动态网
站等，应美观和实用双重进步。
(5)服务器维护和升级。
2015/7/18
101
12.4.5 网站评估
网站评估就是估算一个网站的价值。
网站评估除了考虑传统评估因素之外，还要考虑
网站的运作模式。
评估网站时考虑的因素：
(1)收入源：实际收入来源，包括出售的产品或服务、会
员费、佣金收入和广告收入。
(2)运营成本：包括服务器成本、职工成本、其他开支等。
(3)资产：网站硬件、软件、品牌等。
(4)访问量。
2015/7/18
102
THE End