教你制作静态网页的方法.docx

教你制作静态网页的方法.docx

《教你制作静态网页的方法.docx》由会员分享，可在线阅读，更多相关《教你制作静态网页的方法.docx（8页珍藏版）》请在冰豆网上搜索。

教你制作静态网页的方法

教你制作静态网页的方法之马矢奏春创作

时间：

二O二一年七月二十九日

一、网页设计基础

1、熟悉Dreamweaver8的工作环境

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、点右键“创立链接”翻开的窗口或在属性的链接栏里,填入链接的目标.（如：

本网站另一个网页,或外部网页如http:

//www.谷歌.com,或电子邮件如：

mailto:

zdhwangji@）

3、在页面属性里修改链接的属性：

修改--页面属性（链接、活动链接、访问过链接）

二、制作实例1

制作要求：

（网页效果）

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

2、在合适的位置拔出图片earth.gif;

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

4、将网页用index.htm为名保管在本地站点Mysite中.

把持步伐：

1、按下面把持建立站点：

先新建一个文件夹Mysite（下面举例中是建立在桌面上）.

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

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

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

●按下图选择“编纂我的计算机上的本地副本,……”,并选择文件寄存的目录路径,然后点“下一步”；

●在“您如何连接到服务器？

”选项里选择“无”,然后点“下一步”；

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

5、2、在文件夹Mysite下创立文件夹images,以后此站点中用到的图像文件准备全部寄存在images文件夹里；为方便,这里先把此例中需要用到的图片bg0100.jpg和earth.gif事先寄存在此images文件夹里了.

3、创立一个新网页：

网页文件---新建---选“基本页”---创立；

然后在网页编纂器窗口中,选择“修改”-—“页面属性”命令,在“页面属性”对话框中设置各项参数；

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

4、用index.htm为名保管文件到本地站点Mysite中,保管并按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,网页保管在Mysite文件夹中；

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

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

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

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

6、预览页面效果后,修改保管网页文件.

把持步伐：

先将要用到的图片素材复制到Mysite文件夹里的images文件夹.

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

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

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

在“项目名称”文本框中设置第1个按钮的名称为a；在下面按钮4个状态的文本框中分别输入images文件夹中的a1.gif,a2.gif,a3.gif,a4.gif4个文件的路径和名称；在“按下时,前往的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,网页文件保管在Mysite文件夹中.

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

（3）预览页面效果后,保管网页文件.

把持步伐：

.

（1）新建一个页面,选择[修改]|[页面属性]命令,在[页面属性]对话框中设置布景图片为bg0040.gif,并将网页取名为shu.htm保管在Mysite文件夹中.

（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链接到一个外部的网站（比如链接到XX,在属性“链接”项中填入http:

//www.XX.com）.

按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”：

修改后：

（4）保管文件并按F12预览,即可自动播放了.

2、拔出视频：

（1）“拔出”----“媒体”-----“ActiveX”-----弹出窗口“确定”,双击页面编纂窗口中发生的图标,在翻开的“选择Netscape插件文件”对话框中,选择要拔出的视频文件,然后确定；把图标年夜小调整到合适.

（2）保管文件并预览.

时间：

二O二一年七月二十九日