网页制作培训.doc

《网页制作培训.doc》由会员分享，可在线阅读，更多相关《网页制作培训.doc（20页珍藏版）》请在金锄头文库上搜索。

1、网页制作培训教程一、参考教材网页制作DreamweaverNIT证书考试指定教材以及本教程所附的实验案例。二、培训目标掌握网页制作的基本概念、操作步骤和Web服务器的简单配置，能按要求制作出一个简单的网站，且发布到网上。三、培训学时与方式810个学时，机房上课，以案例贯穿基本概念与操作步骤，教师一边教，学生一边练。四、培训大纲（范围）1、 熟悉Dreamweaver MX 2004的工作环境。2、 掌握网站创建的方法和学习制作一个简单网页。3、 掌握使用表格布局网页的方法。4、 掌握在网页中编辑文本、插入特殊元素、设置网页背景音乐的方法。5、 掌握在网页中插入图像并设置图像格式的方法。6、 掌

2、握网页中超链接的设置方法。7、 掌握掌握利用Web服务器IIS在局域网中发布网站和在互联网上发布网站的方法。五、使用的软件 网页制作采用Dreamweaver MX 2004中文版，网站的发布采用IIS （Internet Information Server，互联网信息服务）5.0以上版本均可。培训前须安装好这两个工具。案例一：创建网站及制作一个网页实验目的：掌握网站创建的方法和学习制作一个简单网页实验要求：按要求创建“园林建筑艺术”，并制作简单网页实验学时：2。任务1 创建“园林建筑艺术”网站任务说明：创建“园林建筑艺术”网站，网站结构如图1所示：园林建筑艺术Index.html皇家园林颐

3、和园yiheyuan.html园林的特点tedian.html园林的定义dingyi.html私家园林图片tupian.html私家园林拙政园zhuozhengyuan.html图1 园林建筑艺术网站结构步骤1：启动Dreamweaver MX （1） 在本地磁盘中新建一个文件夹，如E:yuanlin；（2） 启动Dreamweaver MX。步骤2：创建本地站点（1） 执行“站点|管理站点”命令，打开“管理站点”对话框，选择“新建”按钮中的“站点”命令，弹出“站点定义”窗口；图2 站点总结（2） 输入站点名称“园林建筑艺术”；（3） 单击“下一步”按钮进入“站点定义的第2个窗口，设置服务器技

4、术，选择“否，我不想使用服务器技术”单选按钮；（4） 单击“下一步”按钮进入“站点定义”的第3个窗口，设置站点文件位置。选择“编辑我的计算机上的本地副本，完成后再上伟到服务器”单选按钮，设置文件存储位置为E盘“yuanlin”（5） 单击“下一步”按钮进入“站点定义”的第4个窗口，设置远程服务器的连接方式。单击“您如何连接到远程服务器”文本框右侧的下箭头，从下拉列表中选择“无”。（6） 单击“下一步”按钮进入“站点定义”的最后一个窗口：“总结”窗口，如图2所示。步骤3：创建网页文件和素材文件夹（1） 创建主页图3 站点中的网页和素材文件夹 在“文件”选项卡中选中“园林建筑艺术”站点， 鼠标右键

5、单击，从弹出的捷菜单中选择“新建文件”命令，在当前站点中新建了一个网页文件，然后把默认的网页文件名称更改为index.html。（2） 用同样的方法创建其余5个网页文件：dingyi.html、tedian.htm、yiheyuan.html、zhuozhengyuan.html和tupina.html （3） 创建图片素材文件夹。仍然选中“园林建筑艺术”站点，单击鼠标右键，从弹出的捷菜单中选择“新建文件夹”命令，在当前站点中新建了一个文件夹，并重命名为images，完成后的效果见图3。 步骤4：创建站点结构（1） 把index.html文件设置为站点的首页。单击“文件”面板中“文件”选项卡中

6、的“展开/折叠”按钮，把“文件”面板展开为独立窗口，选择index.html文件，执行“站点|设成首页”命令，设置index.html文件为站点的首页；（2） 在此窗口中单击“站点地图”按钮，从弹出的快捷菜单中选择“地图和文件”命令；（3） 制作网站的导航结构。在左窗口选中index.html网页，出现该文件的连接标记，将连接标记拖拽到右侧“本地文件”窗口中的文件dingyi.html上，松开鼠标，就会把dingyi.html文件链接到index.html网页中，并显示在“站点地图”窗口中index.html的下面；（4） 用同样方法链接tedian.html、yiheyuan.html、zh

7、uozhengyuan.html到主页的下面，链接tupian.html到zhuozhengyuan.html的下层，最终效果如图4。 图4 站点地图中创建了站点的导航结构任务2 制作简单的网页任务说明：制作dingyi.html网页，效果如图5所示。图5 dingyi.html 网页效果步骤1：设置页面属性（1） 在“文件”面板中的站点文件列表中双击dingyi.html，进入该网页的编辑环境。（2） 执行“修改|页面属性”命令，弹出“页面属性”对话框。（3） 设置网页的背景图像：在“外观”选项区中，单击“背景图像”右侧的“浏览”按钮，在弹出的“选择图像源文件”对话框中，选择“dreamwe

8、aver样例素材/images”中的dingyi-bg.jpg图像。确定选取操作后，屏幕弹出提示对话框，提示将选择的图像文件复制到本地根文件夹中，单击“是”按钮。弹出“复制文件为”对话框，选择站点的本地根文件夹“yuanlin”的images子文件夹。单击“打开”按钮，返回“页面属性”对话框。这时在“背景图像”文本框中显示出设置的背景图像的路径。（4） 设置网页的标题。单击分类框中的“标题编码”选项，在“标题”文本框中输入该网页的标题： “园林的定义”。单击“确定”按钮完成页面属性的设置。步骤2：添加文本图6 dingyi.html 网页效果（1） 完成了步骤1后的dingyihtm如图6所示

9、，在页面的左上角有插入光标。（2） 输入标题文本。在插入光标处用键盘直接输入“园林的定义”，然后回车，插入光标跳转到下一行。（3） 复制、粘贴网页中的文字： 打开“dreamweaver样例-素材”文件夹中的“文字doc” 文档，选中dingyihtml网页的文字：“根据辞海技术手段。”执行复制操作。 切换到dingyihtm网页编辑界面，执行“编辑粘贴文本”命令，将选中文字粘贴到网页中。步骤3：设置文本的格式（1）设置标题格式 执行“窗口属性”命令，打开“属性”面板。 选中标题“园林的定义”，单击属性面板中格式文本框右侧的向下箭头，打开格式下拉列表，从中选择“标题1”。 单击属性面板上的“居

10、中对齐”按钮。设置选中的段落在页面中居中对齐。（2）设置正文文本格式 添加字体。打开“属性”面板中字体下拉列表，选择“编辑字体列表”命令，在“字体列表”栏中选取“在以下列表中添加字体”项，在“可用字体”列表框中选择字体，如“华文楷体”，单击按钮，将华文楷体添加到字体列表中。 选中正文文本“根据辞海技术手段。”，打开“属性”面板上的字体下拉列表，选择字体“华文楷体”，把选中的文本设置为华文楷体。 设置文本的颜色。仍然选中操作中的文本，单击“属性”面板上的文本颜色按钮，弹出“颜色”面 板。“颜色”面板中的颜色是网络安全色，可从中选择一种颜色。要使用更多颜色，单击颜色面板右上方的颜色拾取器按钮，弹出

11、Windows系统的“颜色”面板。在Windows系统的“颜色”面板“红”、“绿”、“蓝”三个文本框中分别输入、128、128，然后单击“添加到自定义颜色”按钮，设置的颜色显示在“自定义颜色”栏中，最后单击“确定”按钮，选中的文本设置颜色完成，同时在颜色框中显示出设置的颜色和十六进制表示的颜色值。 设置文字加粗。选中操作中的文本，单击“属性”面板上加粗按钮。步骤4：设置段落格式（1） 设置段落对齐方式。选中步骤3的操作中的文本，单击“属性”面板上的“两端对齐”按钮。（2） 设置段落缩进。单击“属性”面板上的“文本缩进”按钮，设置选中的段落左、右两侧缩进一些距离。（3） 设置段落首行缩进。把光标

12、放在段落的开始，执行“插入HTML特殊字符不换行空格”命令，在光标处插入一个空格。同样的方法在光标处再插入三个空格。步骤5：保存并预览网页(1) 保存网页。执行“文件保存”命令，按原名保存网页中修改的内容。(2) 浏览网页。执行“文件在测览器中预览iexplore”命令或单击F12功能键，在IE 浏览器中打开制作的网页，查看效果。案例二：使用表格布局网页实验目的：掌握使用表格布局网页的方法。实验要求：按要求制作indexhtm网页的表格布局。实验学时：1图7 表格对话框步骤1：准备工作（1） 打开“表格布局”站点。（2） 双击“文件”面板上文件列表中的indexhtm文件，切换到该网页的编辑窗

13、口。步骤2：插入两个表格，（1） 执行“插入表格”命令，或单击“常用”插入栏上的表格图标，弹出“表格”对话框，设置表格的大小：2行5列，表格宽度700像素，表格粗细0像素。单击“确定”按钮，在页面中插入了一个 2行5列的表格，参见图7。（2）用鼠标在该表格外单击，然后按下键盘的回车键，把插入光标转到下一行，在插入光标处插入第2个表格（2行2列，表格宽度900像素，表格粗细0像素），最后的效果参见图8。图8 index.htm网页中插入了两个表格步骤3：设置两个表格的格式（1）合并单元格 使用“修改表格合并单元格”命令，将第l个表格第l行的5个单元格合并为l个单元格。 将第2个表格的第2列合并为

14、1个单元格。效果如图9所示。图9 设置了表格格式后的效果（2）设置表格居中对齐选中第一个表格，单击“属性”面板“对齐”下拉列表，从中选择“居中对齐”，如图10所示。同样的方法设置第二个表格的对齐方式为“居中对齐”。（3）调整第2个表格的高度。鼠标放在第2个表格的下边框上，当鼠标指针变为 ，按住左键向下拖动鼠标，增加表格高度。图10 表格的“属性”面板步骤4：执行“文件保存”命令，保存当前网页案例三：编辑网页实验目的：掌握在网页中编辑文本、插入特殊元素、设置网页背景音乐的方法。实验要求：按要求为index.htm网页添加文本并设置文本格式，添加背景音乐和水平线。实验学时：2。图13 设置文本格式

15、图11 复制并粘贴文字素材图12 设置段落格式步骤1：准备工作（1） 打开“表格布局”站点。（2） 双击“文件”面板上文件列表中的index.htm文件，切换到该网页的编辑窗口。步骤2：添加文本打开“dreamweaver样例-素材”文件夹中的“文字.doc”文档，复制index.htm网页的文字：“轻一推门去体会”粘贴到当前网页中第2个表格的第1列第2个单元格中，如图11所示。步骤3：设置段落格式，效果如图12所示（1） 在“石笋上苍玉泪痕”结束位置处按住Shift键的同时按下回车键，将该段文字分成两段，且两段之间没有空行。（2） 在“属性”面板上设置两个段落的对齐方式为两端对齐。（3） 使用“插入不换行空格”命令，设置两个段落首行缩进两个字符。