网页制作教学案例.doc

网页制作培训教程 一、参考教材 《网页制作Dreamweaver》NIT证书考试指定教材以及本教程所附的实验案例。 二、培训目标 掌握网页制作的基本概念、操作步骤和Web服务器的简单配置，能按要求制作出一个简单的网站，且发布到网上。 三、培训学时与方式 8－10个学时，机房上课，以案例贯穿基本概念与操作步骤，教师一边教，学生一边练。 四、培训大纲（范围） 熟悉Dreamweaver MX 2004的工作环境。 掌握网站创建的方法和学习制作一个简单网页。 掌握使用表格布局网页的方法。 掌握在网页中编辑文本、插入特殊元素、设置网页背景音乐的方法。 掌握在网页中插入图像并设置图像格式的方法。 掌握网页中超链接的设置方法。 掌握掌握利用Web服务器IIS在局域网中发布网站和在互联网上发布网站的方法。 五、使用的软件 网页制作采用Dreamweaver MX 2004中文版，网站的发布采用IIS （Internet Information Server，互联网信息服务）输入站点名称“园林建筑艺术”； 单击“下一步”按钮进入“站点定义的第2个窗口，设置服务器技术，选择“否，我不想使用服务器技术”单选按钮； 单击“下一步”按钮进入“站点定义”的第3个窗口，设置站点文件位置。选择“编辑我的计算机上的本地副本，完成后再上伟到服务器”单选按钮，设置文件存储位置为E盘“yuanlin” 单击“下一步”按钮进入“站点定义”的第4个窗口，设置远程服务器的连接方式。单击“您如何连接到远程服务器”文本框右侧的下箭头，从下拉列表中选择“无”。 单击“下一步”按钮进入“站点定义”的最后一个窗口：“总结”窗口，如图2所示。 步骤3：创建网页文件和素材文件夹 创建主页 在主窗口右侧的“文件”选项卡中选中“园林建筑艺术”站点， 鼠标右键单击，从弹出的捷菜单中选择“新建文件”命令，在当前站点中新建了一个网页文件，然后把默认的网页文件名称更改为index.html。 用同样的方法创建其余5个网页文件：dingyi.html、tedian.htm、yiheyuan.html、zhuozhengyuan.html和tupina.html 创建图片素材文件夹。仍然选中“园林建筑艺术”站点，单击鼠标右键，从弹出的捷菜单中选择“新建文件夹”命令，在当前站点中新建了一个文件夹，并重命名为images，完成后的效果见图3。 步骤4：创建站点结构 把index.html文件设置为站点的首页。单击“文件”面板中“文件”选项卡中的“展开/折叠”按钮，把“文件”面板展开为独立窗口，选择index.html文件，执行“站点|设成首页”命令，设置index.html文件为站点的首页； 在此窗口中单击“站点地图”按钮，从弹出的快捷菜单中选择“地图和文件”命令； 制作网站的导航结构。在左窗口选中index.html网页，出现该文件的连接标记，将连接标记拖拽到右侧“本地文件”窗口中的文件dingyi.html上，松开鼠标，就会把dingyi.html文件链接到index.html网页中，并显示在“站点地图”窗口中index.html的下面； 用同样方法链接tedian.html、yiheyuan.html、zhuozhengyuan.html到主页的下面，链接tupian.html到zhuozhengyuan.html的下层，最终效果如图4。 任务2 制作简单的网页 任务说明：制作dingyi.html网页，效果如图5所示。 步骤1：设置页面属性 在“文件”面板中的站点文件列表中双击dingyi.html，进入该网页的设计编辑环境。 执行“修改|页面属性”命令，弹出“页面属性”对话框。 设置网页的背景图像： ①在“外观”选项区中，单击“背景图像”右侧的“浏览”按钮，在弹出的“选择图像源文件”对话框中，选择“dreamweaver样例素材/images”中的dingyi-bg.jpg图像。 ②确定选取操作后，屏幕弹出提示对话框，提示将选择的图像文件复制到本地根文件夹中，单击“是”按钮。 ③弹出“复制文件为”对话框，选择站点的本地根文件夹“yuanlin”的images子文件夹。 ④单击“打开”按钮，返回“页面属性”对话框。这时在“背景图像”文本框中显示出设置的背景图像的路径。 设置网页的标题。单击分类框中的“标题／编码”选项，在“标题”文本框中输入该网页的标题： “园林的定义”。单击“确定”按钮完成页面属性的设置。 步骤2：添加文本 完成了步骤1后的dingyi．htm如图6所示，在页面的左上角有插入光标。 输入标题文本。在插入光标处用键盘直接输入“园林的定义”，然后回车，插入光标跳转到下一行。 复制、粘贴网页中的文字： ① 打开“dreamweaver