网页制作工作手册.docx

网页制作工作手册.docx

《网页制作工作手册.docx》由会员分享，可在线阅读，更多相关《网页制作工作手册.docx（30页珍藏版）》请在冰豆网上搜索。

网页制作工作手册

网页制作工作手册

○2005-11-02

一.FrontPage、Dreamweaver软件基本操作说明：

1.FrontPage中菜单工具（T）下面的站点设置（W）中数据库可以通过数据库的验证。

2.网页中的首页最好以Index.html命名！

3.FrontPage中Web组件的应用：

（1）动态悬停按钮：

点击菜单中的插入（I）选择组件（O）下面的悬停按钮（H）

（2）字幕：

点击菜单中的插入（I）选择组件（O）下面的悬停按钮（M）

（3）横幅广告管理器：

点击菜单中的插入（I）选择组件（O）下面的横幅广告管理器（N）

（4）站点计数器：

点击菜单中的插入（I）选择组件（O）下面的站点计数器（C）

4.FrontPage中插入标签的时候，只有在HTML页面的时候才可以！

5.Dreamweaver中输出到Explore预览的快捷键是F12.（请在保存后预览！

）

6.Dreamweaver中对于某个控件进行编辑的快捷键是Ctrl+F5.

7.Dreamweaver中修改软件的快捷键：

编辑（E）下面的快捷键（V）!

例如:

可以将编辑（E）下面的显示代码提示（H）的快捷键从Ctrl+Space改为Ctrl+,

8.Dreamweaver中行为的设置：

（在Dreamweaver中右边工具栏中的Tag里页面）

点击加号：

（1）ShowEventsfor表示：

选择希望兼容的版本。

（2）PopupMessage表示谈出提示信息的行为设置。

设置完毕后：

在点击onload，可以设置触发的条件。

9.Dreamweaver中*.css文件的设置及使用说明。

（以shen.css为例）

[1]建立shen.css文件方法：

在Dreamweaver右上方Design的设计页面中选择CSSStyles中的ApplyStyles。

右击鼠标选择NewCssStyles。

在弹出的对话框中，name属性填入shen1（格式一）,type属性中选择MakeCustomStyle。

Define属性中选择（NewStyleSheetFile）。

点击确认，在弹出的对话框中，保存为shen.css。

此时在中就自动插入了

[2]在shen.css文件中可以创建几个类（格式），如果想在shen.css文件中再建立格式二（shen2）、格式三（shen3）。

方法同前，只是再Define一项中选择shen.css

[3]应用：

方法一：

直接右键点击Design的设计页面中选择CSSStyles中ApplyStyles中需要应用的类，选择Apply。

这时在网页中则会自动插入 

方法二：

在属性页中直接添加class="类名1"

[4]*.css文件内部说明：

Ⅰ.超连接的设置如若type属性中选择UsecssSelector。

则可以选择由程序自己提供四个类。

（1）a:

visited属性：

设置访问过的超连接的样式。

（2）a:

active属性：

用来设置当鼠标按下超连接时的式样。

（3）a:

link属性：

用来设置超连接的初始样式。

（4）a:

hover属性：

用来设置当鼠标放在超连接上面的时候的式样。

以上四个属性的顺序也必须是a:

visited再前，a:

hover在后，a:

active属性在两者之间。

a:

link位置任意。

Ⅱ.在一个*.css内部共有8个属性页：

（1）Type属性页：

Font:

文本的字体。

Color属性:

表示文本的颜色。

text-decoration属性:

none则无下划线。

（2）Background属性页：

BackgroundColor属性:

设置背景的颜色

（3）Block属性页：

（4）Box属性页：

Padding属性:

字与上边框距离的设置。

（5）Border属性页：

边框的设置Style:

边框类型。

Width：

边框宽度。

Color：

边框颜色。

（6）List属性页：

（7）Positioning属性页：

（8）Extensions属性页：

cursor:

可以设置鼠标的形状。

Ⅲ.设置超连接的样式:

在Head中插入：

--a{color:

#ffffff;font-size:

9pt;text-decoration:

none}此处颜色为初始颜色。

a:

hover{color:

#33FF55;text-decoration:

underlineoverline}-->鼠标放在超连接上颜色及样式。

二.HTML基本语法说明：

1.基本格式:

文件说明区

文件正文区

其中：

Title用于标记一个Html文档的标题，只在窗口显示。

Body的属性有bicolor背景颜色text文本颜色

link文档中链接的颜色

vlink已看过的链接颜色

alink当前文档中正在激活的链接的颜色

background整个页面的背景图案。

如：

background="BG.GIF"

2.Meta标签的设置：

Meta标签分两大部分：

Http-Equiv变量和Name变量。

[1]Http-Equiv变量：

可以取的值为：

（1）Expires（期限）：

设定网页的到期时间。

（2）Refresh（刷新）：

定时让网页连接到其它网页。

（3）Content-Type：

显示字符集的设定

[2]Name变量：

可取值

（1）Keywords（关键字）：

本网页的关键字是什么。

（2）Description（主要内容）：

告诉搜索引擎本网页的主要内容。

Content的值与name的取值相联系，设置关键字或主要内容。

3.标记（其没有结束标记。

用于定义一个基地址。

）

例如：

则yaoyan.gif的绝对地址是inerc/yaoyan.gif

4.标题级标记：

H1:

黑体，极大字体，居中。

前后各留一到两行空格。

H2:

黑体，大字体，左对齐。

前后各留一到两行空格。

H3:

斜体，大字体，左边界略缩进。

前后各留一到两行空格。

H4:

黑体，普通字体，比三级标题更为缩进。

前后各留一行空格。

H5:

斜体，普通字体，比四级标题更为缩进。

前后各留一行空格。

H6:

黑体，缩进到与普通文本对齐，比五级标题更为缩进。

前后各留一行空格。

基本格式为：

（以H1为例）…（＃可取值为left,center,right）

5.字符修饰标记：

以下标记都需结束标记。

:

加粗字体，以黑体显示。

:

斜体

等宽字体。

带下划线。

:

带删除线。

用比普通字体大的字体显示

用比普通字体小的字体显示。

_:

下标

^上标

用来标识文本字体的大小和颜色。

其有属性：

（该属性已不再推荐使用）

FACE：

字体Size:

：

字号（1～7）Color：

字体颜色

6.属性name与id:

id的值必须是唯一的.此外,这个特性与name特性享用同一个命名空间.

当同一控件既有id，又有name的时候，两者都可以引用。

7.Class属性的设置：

对一组与类相关的或作为类的子元素的集合提供风格。

在中插入

在中插入文本内容

则文本内容的背景色是绿色。

8.绝对位置以及层数的设置：

[1]利用和来实现。

如：

absolute;left:

0;top:

0;z-index:

-1">

[2]利用