教你制作静态网页的办法欧阳家百（2021.03.07）一、网页设计基础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、点右键“创建链接”掀开的窗口或在属性的链接栏里，填入链接的目标。
（如：本网站另一个网页，或外部网页如http://www.谷歌.com，或电子邮件如：mailto:zdhwangji@）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, t42.gif, t43.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，在表格左边合适位置的单位格里辨别拔出图片文件t51.gif,t53.gif,t54. gif,t56. gif. 每个图片与My site 文件夹中的一个HTML文件或某一外部网站建立超链接,被链接的HTML文件在新窗口中掀开，在表格右边合适位置的单位格中,拔出逐帧动画文件shu1.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, shu1.gif。
将图像shu1.gif 链接到exa.html页面（在下面图像shu1.gif的属性面板中“链接”项填入“exa.html”），将图像shu5.gif链接到一个外部的网站（比方链接到百度，在属性“链接”项中填入http://www.百度.com）。
按F12键预览页面后，保管文件。
下面是预览效果图：五、制作实例4: 框架集的使用要求：页面效果操纵步调：1、新建站点名为“框架集应用”的站点；2、“文件” “新建” 选“框架集” 选“左侧固定” “创建”，然后在弹出的“框架标签帮助功能属性”对话框中按“确定”。
3、“文件” “保管全部”：将框架集页面保管为index.htm，左侧框架页面保管为leftFrame.htm，右侧框架页面保管为rightFrame.htm。