教你制作静态网页的方法文档格式.docx

教你制作静态网页的方法文档格式.docx

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

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）保管文件并预览.