网站规划与建设教案.docVIP

《网站规划与建设》教案 项目单元 1 简单网页制作 教学目标 1.掌握Dreamweaver MX启动和退出的方法； 2.熟悉Dreamweaver MX的网页编辑器、站点管理器和各种使用面板； 3.掌握本地站点的使用方法； 4.熟悉制作一个简单网页的过程。 重点难点 1.如何建立一个本地站点； 2.在站点中对文件进行剪切、粘贴、复制、删除、重命名操作； 教学方法 案例驱动，讲练结合。通过对Dreamweaver MX软件的初识，使我们掌握该软件的基本基本启动、编辑和退 出；通过对一个简单网页的制作过程的描述，使我们了解建立一个网页的最基本的方法。 教学过程 一、问题引出 Dreamweaver MX是Macromedia公司最新发布的集网页设计、代码开发、网站创建和管理于一体的软件， 不仅可以轻松设计网站前台的页面，而且也可以方便的实现网站后台的各种复杂功能。一个网站主页可以 看成是一系列相关文档的集合，浏览者通过浏览器程序从一个页面跳转到另外一个网页，从而完成对整个 网站的主页的访问。那么究竟该如何创建一个最基本的网页呢？我们通过一个例子一起来研究一下网页的 基本制作方法。 二、解决方法 1.用不同的方法启动和退出Dreamweaver MX。 2.用快件捷键打开和关闭面板、【属性】面板以及【代码】浮动面板组。 3.建立网站的基本站点。 4.制作简单网页。 三、完成过程 1.启动和退出Dreamweaver MX。 选择Windows资源管理器的【开始】︱【程序】︱Macromedia︱Dreamweaver MX命令，或单击Windows桌 面上Dreamweaver MX的快捷图标，即可启动Dreamweaver MX。 2.选择【站点】︱【新建站点】命令，选择【高级】选项卡，在【站点名称】文本框中输入“我的站点” 。 电子商务网站建设与维护 ? 3.单击【本地根文件夹】文本框右边的图标，将当前盘的文件夹 My site 设置为本地站点的根文件夹，并 确认。 4.在Dreamweaver MX网页编辑器中新建一个页面。选择【修改】︱【页面属性】命令，打开【页面属性】 对话框，在【页面属性】对话框中作相应设置。 5.将插入背景图片的网页用exel-1.htm为名保存在本地站点的根文件夹中，层中插入图片操作。 6.插入表格操作，表格中输入文本内容。 7.网页编辑完毕后按F12键预览，然后用exel-1.htm为名保存在My site文件夹中。 常见错误 1.在网页设计中，不要用中文作为文件名或文件夹名； 2.有的网站网页文件命名时区分字母大小写，列入INDEX.HTM和index.htm表示不同的文件； 3.每个网站都有而且只有一个首页，浏览者在访问该站点时首先访问这个文件，首页文件的名字一般可命 名为index.htm； 4.首页文件index.htm应该放在站点的根文件夹下； 5.网页上进行的所有的插入对象，都是相对路径的对象，这样可以避免很多犹豫路径问题找不到对象的错 误。 问题讨论 1.什么是本地站点？什么是相对路径？什么是绝对路径？ 2.如何正确设置网页中元素的路径？如何避免浏览网页时缺少图片的错误出现？ 3.在本地站点下新建文件夹、复制和移动文件的方法有哪几种？ 知识回顾 1.Dreamweaver MX的启动方式和工作环境；本地站点的创建和设置。 2.网页文件的创建与保存、页面属性设置与基本编辑方法；创建、编辑一个简单网页的过程。 3.本地网站设置、网页的创建和保存的方法、网页对象文本与图像的插入、页面属性设置、文字的属性设 置、图像的属性设置、层的简单应用、字体列表的编辑。 项目单元 2 制作网页超链接 教学目标 1.掌握文本插入的方法； 2.掌握网页文档的基本编辑方法； 3.掌握HTML样式的创建和使用方法； 4.掌握文本链接、图像链接、图像映射链接、电子邮件链接和锚点链接的方法； 5.熟悉导航条和跳转菜单的创建和使用方法。 重点难点 1.网页文档常用的格式化方法； 2.在网页中插入对象的方法； 3.创建各种超链接的方法。 教学方法 案例驱动，讲练结合。在项目单元 1 的基础上对网页进行编辑，对文档进行格式化在网页中插入各种对象 以及建立各种超链接。 教学过程 一、问题引出 网页中文字是最主要、最基本的页面元素之一，它占用的存储空间较小，与耗费网络带宽较多的图片和多 媒体相比有无法比拟的优势，而一个网页要和网站真正联系起来，超链接是不可缺少的，本项目通过在原 有基本网页的基础上增加相应的文档以及超链接的方式来进一步美化网页，达到应有的功能。 二、解决方法 1.网