网页制作培训材料

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