1、北京联合大学应用文理学院网络中心 培训材料 2005 年 3月- 1 -网页制作培训材料第一步：打开网页制作工具 Dreamweaver MX 20042第二步：打开新闻发布空白网页模板 2第三步：编写新闻 31. 编写标题 32. 编写正文 4（1）插入表格 4（2）插入正文 5（3）插入图片 6第四步：保存网页 8第五步：浏览网页 9第六步：修改网页 101. 使用 Dreamweaver MX 2004 打开需要修改的网页文件 102. 对网页进行修改 .103. 保存新文件 .11目前较为流行的制作网页的工具是 Dreamweaver，当前的最新版本为：Dreamweaver MX 2
2、004。下面就以我们学院的一个学院新闻页面为例，向大家介绍如何制作网页。北京联合大学应用文理学院网络中心 培训材料 2005 年 3月- 2 -第一步：打开网页制作工具 Dreamweaver MX 2004第二步：打开新闻发布空白网页模板 首先，从菜单项“文件”中选择“打开” 。 随后，从“打开”对话框中选择打开“moban.htm”文件。moban.htm 文件是为方便新闻的发布而制作的无新闻内容的空白模板文件，每次有新闻需要发布时，只需打开此文件在空白部分编写新闻即可。北京联合大学应用文理学院网络中心 培训材料 2005 年 3月- 3 -打开后的文件如下：第三步：编写新闻1. 编写标题
3、用鼠标单击模板的空白部分，从 WORD 文档中将新闻标题拷贝至空白处或直接在空白处编写新闻标题。空白部分北京联合大学应用文理学院网络中心 培训材料 2005 年 3月- 4 -完成后选中整个标题，通过下方的属性面板设定标题字体的位置、字体、字体大小、颜色等相关属性。此处设定位置为“居中”显示，字体为“宋体”加“粗体” ，字体大小为“4 号” ，字体颜色为“砖红” （#990000） 。2. 编写正文如果新闻中没有图片，则可以在标题后按回车并将新闻正文直接从 WORD 文档中拷贝过来即可。也可在标题下面的空白部分直接编写新闻正文。如果新闻中有图片，则为了将图片与正文对齐，需要使用表格。我们以学院
4、关于“非典”的新闻为例，说明如何编写包含图片的新闻。（1）插入表格 首先，从菜单项“插入”中选择“表格” 。如下图所示：北京联合大学应用文理学院网络中心 培训材料 2005 年 3月- 5 - 随后，在弹出的“表格”对话框中设定表格的行、列、表格宽度、边框粗细等信息。选择“确定”后，表格插入完成。如下图所示：（2）插入正文在表格最左边的单元格中插入正文部分，即：将 WORD 文档中的新闻主体拷贝至表北京联合大学应用文理学院网络中心 培训材料 2005 年 3月- 6 -格最左边的单元格内，或者直接在单元格内编写新闻。（3）插入图片依次将相关的两幅图片分别插入表格右侧的两个单元格内。操作步骤如下
5、： 首先，用鼠标单击第一个单元格，再从菜单项“插入”中选择“图像” 。如下所示： 随后，从“选择图像源文件”对话框中选择需要的图片文件。北京联合大学应用文理学院网络中心 培训材料 2005 年 3月- 7 -图片插入完成后，如下所示：与设定字体属性的操作过程相似，用鼠标选中图片后，可以通过下方的属性面板设定图片的宽、高、边框、对齐方式等信息。北京联合大学应用文理学院网络中心 培训材料 2005 年 3月- 8 - 最后，用相同的方法将第二副图片也插入到表格中。至此，一个学院新闻网页就制作完成了。第四步：保存网页 首先，选择菜单项“文件”中的“另存为” ，如下图所示： 随后，在弹出的“另存为”对
6、话框中，在“保存在”后选择保存网页的目录，此例中将网页保存到“网页制作培训”文件夹内。并将网页名称填入“文件名”处，此例中文件名为：“wangye1.htm” 。填写完毕后选择“保存” ，完成网页的保存。北京联合大学应用文理学院网络中心 培训材料 2005 年 3月- 9 -说明：为方便日后编辑新文件，应保留旧有的空白模板文件（moban.htm） ，以便重复使用。因此，完成新闻编辑后，生成的新文档应使用“另存为”命令建成新文件；如使用“保存”命令，则旧有的空白模板文件将会被刚编辑完成的新文件所取代。第五步：浏览网页网页保存完成后，从相应目录选择网页文件，此例为“网页制作培训wangye1.h
7、tm” 。用鼠标双击文件名后可在浏览器中看到制作完成的网页。北京联合大学应用文理学院网络中心 培训材料 2005 年 3月- 10 -第六步：修改网页网页制作完成后，经常会发现网页中有需要修改的地方，如何进行修改呢？1. 使用 Dreamweaver MX 2004 打开需要修改的网页文件2. 对网页进行修改（1）修改标题完成网页后，如发现标题“居中”显示并不理想，认为“居左”显示应该更好，则： 首先，用鼠标选中标题。 随后，在字体属性面板中将原来选中的“居中” ，改为“居左”。修改后的页面如下：（2）修改正文如发现正文中有需要添加或修改的内容，请直接在文档内参照 WORD 文档的编写方法修改即可。（3）修改图片如需要变换已插入的图片，步骤如下： 点击需要变换的图片，然后按键盘上的“删除（Delete） ”键，删除旧图片。 按照前面介绍的插入图片的方法，插入新图片。修改后的网页如下：北京联合大学应用文理学院网络中心 培训材料 2005 年 3月- 11 -3. 保存新文件修改完成后，从菜单项“文件”中选择“保存”即可。由于是在已保存的文档内编辑，不存在重复使用空白模板的问题，因此，此处保存文件时，不使用“另存为”命令。
