教你制作静态网页的方法

教你制作静态网页的方法

一、网页设计基础

1、熟悉Dreamweaver 8的工作环境

2、创建新站点

创建本地站点：站点----管理站点----新建----站点（前三步也可直接从“新建站点”进入下面的设置向导对话框）----跟随向导设置直至完成

3、网页文件的基本操作

a、创建、打开和保存网页文件

创建：文件----新建----创建

打开：文件---打开----选择欲打开的文件

或者在右边的文件浮动面版中选择打开

保存：文件---保存或另存为

b. 设置网页的页面属性

修改---页面属性---然后设置（标题、背景、背景图像、文本等）

c. 设置网页对象的颜色

网页对象，如页面背景、文字、链接都经常需要设置颜色。

可在各自对应的属性面版中设置。

d. 网页文本的输入和属性设置

文本可键入、导入、粘帖

文字可设置字体、大小、颜色、格式等。

键入空格的方法：1、汉字输入法设置为全角方式，按空格键即可输入。2、属性面版格式中：预先格式化的

换行：ENTER、SHIFT+ENTER

实例练习：

1、输入以下文字

书签夹在诗集里，

落叶夹在深秋里。

喜悦夹在生活里，

追求夹在人生里。

2、第一次设置格式为“无”，字体为“华文行楷”，字体颜色为“红色”，字号为“5号”，添加项目符号。然后保存、预览。

3、第二次设置格式为“标题一”，字体为“楷体”，字体颜色为“蓝色”，字号为“5号”，添加项

目符号，对齐方式为“居中”。然后保存、预览。

比较两次设置的效果。

e. 网页图片的插入和属性设置

插入图片，在对话框中选择图片。（最好在建立站点时将欲用的图片素材复制到本地站点目录中）

插入图像占位符，在图片准备好后再加入图片。加入方法：1、双击图像占位符；2、点“属性面版”中的“指向文件”，拖到右边文件中要插入的文件处。

在图像属性面版中设置

f. 插入层

方法: 1、点击插入面版中的“描绘层”；2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层；

3、可以随意移动层的位置；

4、可在层中插入图像、文字等。

g. *插入表格,用表格定位

方法：

1、先用鼠标点至欲插入表格的位置；

2、点插入面版中的“表格”—“插入表格”；

3、确定行数、列数后确定即将表格插入到选定位置了；

4、可在表格中任何单元格里插入图像、文字等。

h. 建立超链接

方法: 1、选中要建立超链接的文字或图像；

2、点右键“创建链接”打开的窗口或在属性的链接栏里，填入链接的目标。（如：本网站另一个网页，或外部网页如https://www.360docs.net/doc/5e3779963.html,，或电子邮件如：mailto:zdhwangji@https://www.360docs.net/doc/5e3779963.html,）

3、在页面属性里修改链接的属性：修改--页面属性（链接、活动链接、访问过链接）

二、制作实例1

制作要求：（网页效果）

1、页面的背景图片为bg0100.jpg;

2、在合适的位置插入图片earth.gif;

3、在网页中输入横排带阴影的文字“欢迎访问网络工程08级3、4班主页”

4、将网页用index.htm为名保存在本地站点My site中。

操作步骤：

1、按下面操作建立站点：先新建一个文件夹My site（下面举例中是建立在桌面上）。

●选择“站点”---“新建站点”命令；

●在弹出的对话框中，在“站点名称”文本框中输入“应用实例1”，并点下一步；

●按下图选择“否，我不想使用服务器技术”，然后点“下一步”；

然后点“下一步”；

●在“您如何连接到服务器？”选项里选择“无”，然后点“下一步”；

然后点“完成”。这样就已经建立好一个新的站点了，可以在Dreamweaver界面右边的“文件”窗口里看到新建立的站点信息。

5、2、在文件夹My site下创建文件夹images，以后此站点中用到的图像文件准备全部存放

在images文件夹里；为方便，这里先把此例中需要用到的图片bg0100.jpg和earth.gif 事先存放在此images文件夹里了。

3、创建一个新网页：网页文件--- 新建--- 选“基本页”---创建；

然后在网页编辑器窗口中，选择“修改”-—“页面属性”命令，在“页面属性”对话框

中设置各项参数；

在“标题”文本框中输入“实例1”；

4、用index.htm为名保存文件到本地站点My site中，保存并按F12预览网页。

5、选择“插入”—“布局对象”—“层”命令，或单击工具栏中“布局”选项卡中的“绘制层”按钮，在工作区合适的位置上插入图片定位用的层Layer1，并将光标定位在层中。

6、“插入”--“图像”命令，或“常用”选项卡的“图像”按钮，在打开的对话框中选择文件earth.gif插入层中（若跳出“图像标签辅助功能属性”对话框，里面“替换文本”可填写“地球”或其他，或者不填），然后调整层及图像的位置至合适处；保存并按F12预览网页，若图像位置不合适，则调整到合适位置。

7、在网页合适位置插入第二个层Layer2，在层中输入文字“欢迎访问网络工程08级3、4班主页”，并设置文字属性中的字体、大小等，颜色为黑色；然后保存并按F12预览，若文字属性及位置不合适，则调整到合适为止。

8、选中层中的文字，将其复制到剪贴板中；在网页合适位置处插入第三个层Layer3, 并将文字粘贴到层Layer3中，将Layer3中的文字颜色改为白色，并适当调整层Layer3，使两个层中的黑白重叠文字产生阴影效果。然后保存并按F12预览，若效果不满意，则调整到满意为止。

三、制作实例2

要求：（网页效果）

1、网页名为exa.htm，网页的背景图片为bg0040.gif，网页保存在My site文件夹中；

2、在网页的顶部区域输入标题文字“人生的伴侣.知识的源泉”，用HTM样式“标题1”将其格式化，预览页面效果；

3、在网页的中部区域插入导航条，导航条的6个按钮对应的图片是a1.gif, a2.gif, a3.gif, …..f2.gif, f3.gif, f4.gif（共有24个），每个按钮可以链接一个My site文件夹中的HTML 文件。

4、在网页的合适位置上插入图片t4_1.gif, t4-2.gif, t4-3.gif。

5、在网页的底部区域插入图片wyfy.jpg，并为该图片建立电子邮件链接；

6、预览页面效果后，修改保存网页文件。

操作步骤：

先将要用到的图片素材复制到My site文件夹里的images文件夹。

1、新建一个网页，并将新网页取名为exa.htm，保存在My site文件夹中；在网页编辑器窗口中，选择“修改”--“页面属性”命令，在“页面属性”对话框中设置标题为”应用实例2”, 背景图片为bg0040.gif；

2、在网页的顶部区域合适的位置上输入标题文字“人生的伴侣.知识的源泉”，并选中这些文字。在属性面板中，选择格式中“标题1”；

3、在网页的中部区域合适的位置插入光标，选择菜单“插入”—“图像对象”—“导航条”命令，此时的网页编辑窗口中，会弹出“插入导航条”对话框。

在“项目名称”文本框中设置第1个按钮的名称为a；在下面按钮4个状态的文本框中分别输入images文件夹中的a1.gif, a2.gif, a3.gif, a4.gif 4个文件的路径和名称；在“按下时，前往的URL”文本框中输入该按钮链接的对象名称和路径（因此实例站点中只有index.htm 和exa2.htm两个网页文件，所以这里先填入index.htm来看看效果）。

选中“预先载入图象”和“使用表格”选项；选择“插入”下拉列表框中的水平方向设置导航条；

4、点“插入导航条”对话框最上面的“+”后，重复步骤3，可设置其他5个按钮（这里为简便，后五个按钮只对“状态图像”进行设置，其他三种图像不再设置了），设置完成后，

效果如下：

5、在网页合适的位置上插入3个用于图片定位的层，并在不同的层中插入images文件夹中的图片文件tu1.gif, tu2.gif, tu3.gif；

6、在网页的底部区域插入带图片wyfy.jpg的层，选中图片，在图片“属性”面板的“链接”文本框中，输入mailto:+EMAIL地址，建立电子邮件链接；

7、保存并预览网页，调整各方面属性及位置直至满意。最终效果如下：

在预览中尝试点击“科学技术”按钮和“我要发言”图片。

四、制作实例3: 用表格布局定位应用实例

要求：页面效果

(1) 创建新网页名称为shu.htm, 网页的背景图片为本bg0040.gif, 网页文件保存在My site 文件夹中.

(2) 在网页中插入7行6列的表格, 按照页面效果对网页中单元格进行合并调整，在表格上方合适位置的单元格里插入Flash文件shu.swt，在表格左边合适位置的单元格里分别插入图片文件t5-1.gif, t5-3. gif, t5-4. gif, t5-6. gif. 每个图片与My site 文件夹中的一个HTML文件或某一外部网站建立超链接,被链接的HTML文件在新窗口中打开，在表格右边合适位置的单元格中,插入逐帧动画文件shu-1.gif.

(3) 预览页面效果后,保存网页文件.

操作步骤：.

(1) 新建一个页面,选择[修改]|[页面属性]命令,在[页面属性]对话框中设置背景图片为

bg0040.gif, 并将网页取名为shu.htm保存在My site 文件夹中.

(2) “插入”---“表格”, 在弹出的“表格”对话框中设置7行6列，表格宽度设为

800像素，然后确定，则网页中插入了一个7行6列的表格。

(3) 选定第一行，然后点右键，在菜单中选“表格”—“合并单元格”；选定第五列的

三、四、五行，然后点右键，在菜单中选“表格”—“合并单元格”；

(4) 在表格中的第一行单元格中插入光标，选择菜单中“插入”—“媒体”—“Flash”，此时可在表格顶部的单元格中,插入Flash文件shu.swf。

若希望动画是透明的，则在属性中将“参数”设置入下图：

(5) 在表格的第三行第二列、第四行第三列、第五行第二列、第六行第三列和第三行第

五列的单元格中中分别插入光标，插入图像文件shu1.gif, shu3.gif, shu5.gif, shu6.gif, shu-1.gif。将图像shu1.gif链接到exa.html页面（在下面图像shu1.gif的属性面板中“链接”项填入“exa.html”），将图像shu5.gif链接到一个外部的网站（比如链接到百度，在属性“链接”项中填入https://www.360docs.net/doc/5e3779963.html,）。

按F12键预览页面后，保存文件。下面是预览效果图：

五、制作实例4: 框架集的使用

要求：页面效果

操作步骤：

1、新建站点名为“框架集应用”的站点；

2、“文件”--- “新建”--- 选“框架集”--- 选“左侧固定”--- “创建”，然后在弹出的

“框架标签辅助功能属性”对话框中按“确定”。

3、“文件”--- “保存全部”：将框架集页面保存为index.htm，左侧框架页面保存为

leftFrame.htm，右侧框架页面保存为rightFrame.htm。

4、在下面属性窗口中按如下进行设置，然后保存并按F12预览；

5、这里补充一点：建立了框架集页面之后，任何时候，在菜单“窗口”中选中“框架”，

在右下侧会出现“框架”窗口，点击里面不同部分则可激活相应的框架页面；

6、接下来，在左侧框架页面中用表格定位的方法插入三个竖排的图片作为导航按钮，效果

如下：

7、新建一个基本页面，在页面里输入“科学技术”，保存页面为kxjs.htm；

8、在mainFrame.htm页面中，鼠标点中“科学技术”图片，在下面的图片属性中设置其链

接属性如下：

9、保存并预览，在预览页面中，点击左侧的“科学技术”图片，可见到kxjs.htm页面会在

右侧的框架页中显示（如下图效果）。

提示：在以后需要修改框架各部分页面尺寸时，如果找不到框架边框，可通过“菜单”—“查看”---“可视化助理”--- 选中“框架边框”，即可使框架边框显示。

六、其他一些应用

1、插入声音：例如插入MP3

(1) 在右边“标签”窗口中点“行为”---“+”---“播放声音”；

（2）打开对话框中选择要插入的MP3文件后确定：

（3）打开“代码”编辑窗口，将HTML代码中的自动播放控制由“false”改为“true”：

修改后：

2、插入视频：

(1) “插入”----“媒体”-----“ActiveX”-----弹出窗口“确定”，双击页面编辑窗口中产生的图标，在打开的“选择Netscape插件文件”对话框中，选择要插入的视频文件，然后确定；把图标大小调整到合适。

(2) 保存文件并预览。