iteye_16360
iteye_16360

学学网页，轻松下

根据李兴华老师的说法，98年时会弄个网页制作，可以挣到5K左右的，结果互联网泡沫的发生，导致作网页的才800左右的工资，真是变化得惊人啊，老师帮我们简单安排了两天的网页制作，现在把学到的东西粘上来，一起分享下吧。

今天所讲的知识点
A 制作网页的工具与过程
B HTML语言
C Dreamweaver的使用：文本
D Dreamweaver的使用：图片
E Dreamweaver的使用：超链接
F Dreamweaver的使用：表格
G Dreamweaver的使用：表单
H Dreamweaver的使用：框架
I Dreamweaver的使用：CSS样式


我对知识点的分析
A 制作网页的工具与过程
一、制作网页的工具
Macromedia公司提供了网页三剑客：Dreamweaver、Fireworks、Flash
Dreamweaver软件的作用是：HTML文档的编辑器
Fireworks软件的作用是：处理位图
Flash软件的作用是：制作flash动画
当然，根据编写HTML文档的方式不同，可以选择的工具也不同：
（1）直接手工编写，HTML代码：用任一款文字编辑软件
例如：Windows操作系统自带的记事本
Microsoft Office Word
EditPlus
UltraEdit等
（2）使用可视化的、专门的HTML编辑器
例如：Macromedia 公司的Dreamweaver
Microsoft公司的FrontPage
（3）由Web 服务器一方实时动态生成，主要指动态的网页中

常用的处理位图的工具有：Macromedia公司的Fireworks
Adobe公司的Photoshop
常用的处理矢量图的工具有：Illustrator


二、制作网页的过程
1、制作效果图
使用工具：Fireworks
2、实现效果图
（1）分割效果图：Fireworks
（2）合成网页：Dreamweaver

三、自学制作网页
1、下载别人做好的网页
2、用下载的这些素材进行合成（Dreamweaver），和别人的源效果对比
3、按照别人的网页效果，绘制效果图（Fireworks/Photoshop）
4、分割自己的效果图（Fireworks）
5、再次合成自己的网页（Dreamweaver）

B HTML语言
一、示例

二、HTML基本术语
1. HTML标记(Tag)或者称为标签
2. HTML元素(Element)
3. HTML属性(Attribute)
说明：
标记和元素用于指示浏览器如何组织和显示文档。
属性用来告诉浏览器如何控制或显示元素内容。
（前后包夹型）标签 + 被控制的内容 = 元素
一个元素中还可以包含另一组元素，整个HTML文件就像是一个大元素；
因为属性写在标签的括号里，所以有时也叫标签属性。

三、属性
属性值要用双引号引起来：属性= ”属性值 ”
属性值的数据类型有：
1. 长度值
长度用来定义元素在屏幕上显示的大小，如区域的宽度和高度，分为绝对值和相对值两种：
绝对值：用像素定义，单位px (pixel的缩写)
相对值：用占用相对对象的百分比表示
2. 颜色值
颜色属性值分为十六进制值和颜色名称值两种表示方式。
颜色名称值格式：定义颜色的属性=“颜色的英文名称”
十六进制值格式：定义颜色的属性=“#RRGGBB” 例如：color=“#A52A2A” 棕色
说明：
（1）HTML可以辨认日常最常用的16种颜色名字
black黑色 white白色 silver银白色 gray灰色 aqua靛色/浅绿色 red红色
fuchsia紫色 purple深紫色 green绿色 lime深绿色 teal蓝绿色 yellow黄色
nary海蓝色 blue蓝色 olive深黄色/橄榄色 maroom深红色/栗色
作为补充，IE和Netscape Navigator还可辨认140种标准颜色名称。
（2）根据色光相加原理，任何颜色都是由红(Red,R)、绿(Green,G)、蓝(Blue,B)三原色按一定比例合成。
RRGGBB：从前至后，每两位十六进制数字分别代表红、绿、蓝的颜色深度，相当于它们各自在此颜色中所占的比重。颜色值可以取00到FF范围内的十六进制数字，FF对应的十进制数为255，所以按照上面的方法可以定义多达256*256*256种。常用颜色的十六进制值：

3. URI地址值
Web上可用的每种资源 - HTML文档、图像、视频片段、程序等-是相对独立存在的，而要组合到一起都由URI进行定位实现超链接。它分为绝对定位和相对定位。
绝对定位：
一般由三部分组成：
(1)访问资源的命名机制，也就是网络应用层的协议种类；
(2)存放资源的主机名；
(3)资源自身的名称，由路径表示；
注意：最后可能会有具体文件的锚定位。
例：一个完整的绝对URI定位
http://www.zerui.com/about/zrsw.htm#a
相对定位：
根据当前文件位置，按照文件系统路径对其他网页文件进行定位；
例如：
超链接的地址的属性值：
(1) 为”googs.htm”，表示链接到当前文件所在目录中的”googs.htm”文件；
(2)为”../googs.htm”，表示链接到当前文件所在目录的上一层目录中的”googs.htm”文件；

扩充知识：
在HTML中，URI被用来：
链接到另一个文档或资源(参看A和LINK元素)。
链接到一个外部样式表或脚本(参看LINK和SCRIPT元素)。
在页内包含图像、对象或applet(参看IMAG、OBJECT、APPLET和INPUT
元素)。
建立图像映射(参看MAP和AREA元素)。
提交一个表单(参看FORM)。
建立一个框架文档(参看FRAME和IFRAME元素)。
引用一个外部参考(参看Q、BLOCKQUOTE, INS和DEL元素)。
指向一个描述文档的metadata(参看HEAD元素)。
URI、URL和URN的区别与联系

四、HTML标签
1、根据标签的的结构分类：
（1）前后包夹型：标签成对出现
基本语法：
<标签名称> -------开始标签
…(被控制的文本)
---------结束标签
（2）单枪匹马型：此种类型的标签通常不是控制显示的形态，而是独立表达一个特殊元素
基本语法： <标签名称 />
例如：
，表示换行；
，表示一条分割水平线；
为了使自己的网站能够符合XHTML标准
2、基本的结构标签
标签： …
标签： …
标签：<title> …
标签： …
注释标签：

3、其他标签

五、HTML语言规范
为了编写的HTML代码文档符合标准格式和规范，或者符合现在以及将来的XHTML语言规范，特提出以下几个注意事项：
1、空标签的写法
像这种单枪匹马型的标签没有元素，所以在XHTML中叫空标签；
我们为什么要把空标签写成<标签名 />而不是简简单单地写成<标签名>呢？
XHTML有个规则：任何标签都需要“关闭”
我们把在起始标签的最后添加"/"的方法叫做标签的自闭（或者自关闭、自终止等）

2、不可省略的空格


3、大小写的规范
HTML原来的各个版本对于标签、属性是不区分大小写的，但是为了符合XHTML标准，您应该养成良好的习惯，在制作网页的过程中所有标签、属性一律使用小写。

4、标签的书写顺序
当出现双层甚至多层标签嵌套时，要按顺序关闭标签。
例：
我被两个标签包围啦 ----- 这几个字同时以粗体和斜体显示
如果写成 ：
我被两个标签包围啦 一般的浏览器将不产生任何错误。但是这不符合XHTML标准的写法。

5、属性值用双引号
IE能够辨认双引号、单引号甚至没有单引号包含的属性值，但是从规范的角度考虑，以后所有的属性值都包含在双引号中。当属性代码里出现引号嵌套的情况时：
两层：外层必须采用单引号，里层用双引号；
多层：单、双层交替使用。

6、给属性赋值
给所有属性值赋一个值，属性的缩写被禁止。
如：
　　错误的代码：