1、 教你制作静态网页的方法一、网页设计基础1、熟悉 Dreamweaver 8 的工作环境2、创建新站点创建本地站点：站点-管理站点- 新建- 站点（前三步也可直接从“新建站点”进入下面的设置向导对话框）- 跟随向导设置直至完成3、网页文件的基本操作a、创建、打开和保存网页文件创建：文件-新建-创建打开：文件- 打开 -选择欲打开的文件或者在右边的文件浮动面版中选择打开保存：文件- 保存或另存为b. 设置网页的页面属性修改-页面属性- 然后设置（标题、背景、背景图像、文本等）c. 设置网页对象的颜色网页对象，如页面背景、文字、链接都经常需要设置颜色。可在各自对应的属性面版中设置。d. 网页文本的
2、输入和属性设置文本可键入、导入、粘帖文字可设置字体、大小、颜色、格式等。键入空格的方法：1、汉字输入法设置为全角方式，按空格键即可输入。2、属性面版格式中：预先格式化的换行：ENTER、SHIFT+ENTER实例练习：1、输入以下文字书签夹在诗集里，落叶夹在深秋里。喜悦夹在生活里，追求夹在人生里。2、第一次设置格式为“无”，字体为“华文行楷” ，字体颜色为 “红色” ，字号为“5 号”，添加项目符号。然后保存、预览。3、第二次设置格式为“标题一”，字体为“楷体” ，字体颜色为 “蓝色” ，字号为“5 号”，添加项目符号，对齐方式为“居中”。然后保存、预览。比较两次设置的效果。e. 网页图片的插
3、入和属性设置插入图片，在对话框中选择图片。 （最好在建立站点时将欲用的图片素材复制到本地站点目录中）插入图像占位符，在图片准备好后再加入图片。加入方法：1、双击图像占位符；2、点“属性面版”中的“ 指向文件 ”，拖到右边文件中要插入的文件处。在图像属性面版中设置f. 插入层方法: 1、点击插入面版中的“描绘层” ；2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层；3、可以随意移动层的位置；4、可在层中插入图像、文字等。g. *插入表格,用表格定位方法：1、 先用鼠标点至欲插入表格的位置；2、 点插入面版中的“表格”“插入表格” ；3、 确定行数、列数后确定即将表格插入到选定位置了；4、 可在
4、表格中任何单元格里插入图像、文字等。h. 建立超链接方法: 1、选中要建立超链接的文字或图像；2、点右键“创建链接”打开的窗口或在属性的链接栏里，填入链接的目标。 （如： 本网站另一个网页，或外部网页如 http:/，或电子邮件如：mailto:）3、在页面属性里修改链接的属性： 修改-页面属性（链接、活动链接、访问过链接）二、制作实例 1制作要求：（网页 效果）1、 页面的背景图片为 bg0100.jpg;2、 在合适的位置插入图片 earth.gif;3、 在网页中输入横排带阴影的文字“欢迎访问网络工程 08 级 3、4 班主页”4、 将网页用 index.htm 为名保存在本地站点 My
5、 site 中。操作步骤：1、按下面操作建立站点：先新建一个文件夹 My site（下面举例中是建立在桌面上） 。 选择“站点”-“新建站点 ”命令； 在弹出的对话框中，在“站点名称”文本框中输入“应用实例 1”，并点下一步； 按下图选择“否，我不想使用服务器技术” ，然后点“下一步” ； 按下图选择“编辑我的计算机上的本地副本， ” ，并选择文件存放的目录路径，然后点“下一步” ； 在“您如何连接到服务器？”选项里选择“无” ，然后点“下一步” ； 然后点“完成” 。这样就已经建立好一个新的站点了，可以在 Dreamweaver 界面右边的“文件”窗口里看到新建立的站点信息。5、 2、在文件
6、夹 My site 下创建文件夹 images，以后此站点中用到的图像文件准备全部存放在 images 文件夹里；为方便，这里先把此例中需要用到的图片 bg0100.jpg 和earth.gif 事先存放在此 images 文件夹里了。3、创建一个新网页：网页文件- 新建- 选“基本页” -创建；然后在网页编辑器窗口中，选择“修改”-“页面属性”命令，在“页面属性”对话框中设置各项参数； 在“标题”文本框中输入“实例 1”；4、用 index.htm 为名保存文件到本地站点 My site 中，保存并按 F12 预览网页。5、选择“插入”“布局对象”“层”命令，或单击工具栏中 “布局”选项卡中
7、的“绘制层”按钮，在工作区合适的位置上插入图片定位用的层 Layer1，并将光标定位在层中。6、 “插入”-“图像”命令，或 “常用”选项卡的“图像”按钮，在打开的对话框中选择文件 earth.gif 插入层中（若跳出“图像标签辅助功能属性”对话框，里面“替换文本”可填写“地球”或其他，或者不填） ，然后调整层及图像的位置至合适处；保存并按 F12 预览网页，若图像位置不合适，则调整到合适位置。7、在网页合适位置插入第二个层 Layer2，在层中输入文字 “欢迎访问网络工程 08 级3、4 班主页” ，并设置文字属性中的字体、大小等，颜色为黑色；然后保存并按 F12 预览，若文字属性及位置不合
8、适，则调整到合适为止。8、选中层中的文字，将其复制到剪贴板中；在网页合适位置处插入第三个层 Layer3, 并将文字粘贴到层 Layer3 中，将 Layer3 中的文字颜色改为白色，并适当调整层 Layer3，使两个层中的黑白重叠文字产生阴影效果。然后保存并按 F12 预览，若效果不满意，则调整到满意为止。三、制作实例 2要求：（网页 效果）1、网页名为 exa.htm，网页的背景图片为 bg0040.gif，网页保存在 My site 文件夹中；2、在网页的顶部区域输入标题文字“人生的伴侣.知识的源泉” ，用 HTM 样式“标题 1”将其格式化，预览页面效果；3、在网页的中部区域插入导航条
9、，导航条的 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 文件夹中；在网页
10、编辑器窗口中，选择“修改”-“页面属性”命令，在“页面属性 ”对话框中设置标题为”应用实例2”, 背景图片为 bg0040.gif；2、在网页的顶部区域合适的位置上输入标题文字“人生的伴侣.知识的源泉” ，并选中这些文字。在属性面板中，选择格式中“标题 1”；3、在网页的中部区域合适的位置插入光标，选择菜单“插入”“图像对象”“导航条”命令，此时的网页编辑窗口中，会弹出“插入导航条”对话框。在“项目名称”文本框中设置第 1 个按钮的名称为 a；在下面按钮 4 个状态的文本框中分别输入 images 文件夹中的 a1.gif, a2.gif, a3.gif, a4.gif 4 个文件的路径和名称
11、；在“按下时，前往的 URL”文本框中输入该按钮链接的对象名称和路径（因此实例站点中只有 index.htm和 exa2.htm 两个网页文件，所以这里先填入 index.htm 来看看效果） 。选中“预先载入图象”和“使用表格”选项；选择“插入”下拉列表框中的水平方向设置导航条；4、点“插入导航条”对话框最上面的“+”后，重复步骤 3，可设置其他 5 个按钮（这里为简便，后五个按钮只对“状态图像”进行设置，其他三种图像不再设置了） ，设置完成后，效果如下：5、在网页合适的位置上插入 3 个用于图片定位的层，并在不同的层中插入 images 文件夹中的图片文件 tu1.gif, tu2.gif
12、, tu3.gif；6、在网页的底部区域插入带图片 wyfy.jpg 的层，选中图片，在图片“属性”面板的“链接”文本框中，输入 mailto:+EMAIL 地址，建立电子邮件链接；7、保存并预览网页，调整各方面属性及位置直至满意。最终效果如下：在预览中尝试点击“科学技术”按钮和“我要发言”图片。四、制作实例 3: 用表格布局定位应用实例要求：页面 效果(1) 创建新网页名称为 shu.htm, 网页的背景图片为本 bg0040.gif, 网页文件保存在 My site 文件夹中.(2) 在网页中插入 7 行 6 列的表格, 按照页面效果对网页中单元格进行合并调整，在表格上方合适位置的单元格里
13、插入 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) “插入
14、”-“表格”, 在弹出的“表格”对话框中设置 7 行 6 列，表格宽度设为800 像素，然后确定，则网页中插入了一个 7 行 6 列的表格。(3) 选定第一行，然后点右键，在菜单中选“表格”“合并单元格” ；选定第五列的三、四、五行，然后点右键，在菜单中选“表格”“合并单元格” ；(4) 在表格中的第一行单元格中插入光标，选择菜单中“ 插入”“媒体”“Flash” ，此时可在表格顶部的单元格中,插入 Flash 文件 shu.swf。若希望动画是透明的，则在属性中将“参数”设置入下图：(5) 在表格的第三行第二列、第四行第三列、第五行第二列、第六行第三列和第三行第五列的单元格中中分别插入光标，
15、插入图像文件 shu1.gif, shu3.gif, shu5.gif, shu6.gif, shu-1.gif。将图像 shu1.gif 链接到 exa.html 页面（在下面图像 shu1.gif 的属性面板中“链接”项填入“exa.html” ） ，将图像 shu5.gif 链接到一个外部的网站（比如链接到百度，在属性“链接”项中填入 http:/） 。按 F12 键预览页面后，保存文件。下面是预览效果图：五、制作实例 4: 框架集的使用要求：页面效果操作步骤：1、 新建站点名为 “框架集应用”的站点；2、 “文件”- “新建”- 选“框架集”- 选“左侧固定”- “创建” ，然后在弹出
16、的“框架标签辅助功能属性”对话框中按“确定” 。3、 “文件”- “保存全部”：将框架集页面保存为 index.htm，左侧框架页面保存为leftFrame.htm，右侧框架页面保存为 rightFrame.htm。4、 在下面属性窗口中按如下进行设置，然后保存并按 F12 预览；5、 这里补充一点：建立了框架集页面之后，任何时候，在菜单“窗口”中选中“框架” ，在右下侧会出现“框架”窗口，点击里面不同部分则可激活相应的框架页面；6、 接下来，在左侧框架页面中用表格定位的方法插入三个竖排的图片作为导航按钮，效果如下：7、 新建一个基本页面，在页面里输入“科学技术” ，保存页面为 kxjs.ht
17、m；8、 在 mainFrame.htm 页面中，鼠标点中 “科学技术”图片，在下面的图片属性中设置其链接属性如下：9、 保存并预览，在预览页面中，点击左侧的“科学技术”图片，可见到 kxjs.htm 页面会在右侧的框架页中显示（如下图效果） 。提示：在以后需要修改框架各部分页面尺寸时，如果找不到框架边框，可通过“菜单”“查看”- “可视化助理 ”- 选中“框架边框” ，即可使框架边框显示。六、其他一些应用1、插入声音：例如插入 MP3(1) 在右边“标签”窗口中点“行为”-“+”-“播放声音 ”；（2） 打开对话框中选择要插入的 MP3 文件后确定：（3）打开“代码”编辑窗口，将 HTML 代码中的自动播放控制由“false”改为“true”：修改后：（4）保存文件并按 F12 预览，即可自动播放了。2、插入视频：(1) “插入”-“媒体”-“ActiveX”-弹出窗口“确定” ，双击页面编辑窗口中产生的图标，在打开的“选择 Netscape 插件文件”对话框中，选择要插入的视频文件，然后确定；把图标大小调整到合适。(2) 保存文件并预览。
