《DreamweaverMX2004教案》第一讲 网页设计概述

Dreamweaver MX2004教案 第一周星期五第5,6节 课题网页设计概述 教学目标1、了解网页设计原则:2、了解网页设计制作工具;3、了解站点规划基本流程。 教学重点1、网页设计及布局原则:2、站点规划基本流程 教学难点1、网页设计及布局原则:2、站点规划基本流程 基础概念 1、网页:网站中供用户阅读的一个个页面,又称为WEB页。是通过超级链接将各种文档连接起来 的一个大规模信息集合。网页(Web页)一般指文件扩展名为htm(或htm1)结尾的文档。这些 文档是用文本标记语言HTML表示出来的,故通常也称之为HTML文档。这种语言要通过IE浏览 器“翻译”过来我们才能直接访问。 、主页( Homepage):是各个网站向用户提供的最初起始页面。通常包括通向其它相关页面的超级 链接。 3、万维网:( World wide Web)简称WwW,或3W,是目前 INTERNET网上最流行的一种基于超 文本形式资源组强形式 4、浏览器:网络中资源要通过浏览器来访问(IE、 Netscape、腾讯) 5、统一资源定位器( universal resource locator,URL):用来指出某一项信息所在位置及存取方式, 也就是我们经常所说的网址 教|6、通信协议 HIP:超文本传输协议 FTP:文件传输协议 、网页包括的主要元素 学|1、文本:信息载体和交流工具,网页的主体以文本为主。文本格式有(字体、字号、颜色等) 2、图像:在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以用作 标题、网站标志(Logo)、网页背景、链接按钮、导航栏、网页主图等。图像在网页中可以使用多种 过文件格式,但使用最多的还是P和GF两种格式,因为这两种图像格式占用空间最少。网页中使 用图像不宜太多,每张图像也不宜太大,图像过多传会让人觉得累赘,过大会影响网页的传输速度。 3、超级链接:它是 Internet上最受欢迎的基于超文本方式的多媒体信息査询系统。它是从一个网 程|页指向另一个目的端的链接。该链接可以指向该网站的另一个网页,也可以指向世界各地的其他网 页。文字或图像都可以设置超级链接。链接一般包括两种类型:站内和站外链接 4、导航栏:是网站设计者规划好网站结构后必须考虑的一个问题。为了让访问者顺利浏览,避免 访问者迷失方向,可以在网页上设置导航栏;它能使访问者方便地返回主页或者继续进一步访问。 导航栏可以是按钮、文本超级链接或者图像,可以在站点的每一网页上设置导航栏,一般情况下导 航栏应放在网页中比较显眼的位置 5、表格:在网页中的表格主要是一种用来控制网页中页面布局的有效方式。为了达到较理想的视 觉效果,通常都有不显示边框 6、表单:是一种特殊的网页元素,它通常用来收集信息或实现一些交互式效果。其主要功能是接收 用户在浏览器端的输入,然后将这些信息发送到用户设置的目标端 7、多媒体及特殊效果:有些网页为了吸引浏览者,可级还会有声音、动画、视频等多媒体元素以 及悬停按钮,Java、 Activex控件等特殊效果

Dreamweaver MX2004 教案 第一周 星期五 第 5，6 节 课 题 网页设计概述 教学目标 1、了解网页设计原则；2、了解网页设计制作工具；3、了解站点规划基本流程。 教学重点 1、网页设计及布局原则；2、站点规划基本流程。 教学难点 1、网页设计及布局原则；2、站点规划基本流程。 教 学 过 程 一、基础概念 1、网页：网站中供用户阅读的一个个页面，又称为 WEB 页。是通过超级链接将各种文档连接起来 的一个大规模信息集合。网页（Web 页）一般指文件扩展名为 htm（或 html）结尾的文档。这些 文档是用文本标记语言 HTML 表示出来的，故通常也称之为 HTML 文档。这种语言要通过 IE 浏览 器“翻译”过来我们才能直接访问。 2、主页（Homepage）：是各个网站向用户提供的最初起始页面。通常包括通向其它相关页面的超级 链接。 3、万维网：（World Wide Web）简称 WWW，或 3W，是目前 INTERNET 网上最流行的一种基于超 文本形式资源组强形式。 4、 浏览器：网络中资源要通过浏览器来访问（IE、Netscape、腾讯）。 5、 统一资源定位器（universal resource locator，URL）：用来指出某一项信息所在位置及存取方式， 也就是我们经常所说的网址。 6、 通信协议 HTTP：超文本传输协议 FTP：文件传输协议 二、 网页包括的主要元素 1、 文本：信息载体和交流工具，网页的主体以文本为主。文本格式有（字体、字号、颜色等） 2、 图像：在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以用作 标题、网站标志（Logo）、网页背景、链接按钮、导航栏、网页主图等。图像在网页中可以使用多种 文件格式，但使用最多的还是 JPEG 和 GIF 两种格式，因为这两种图像格式占用空间最少。网页中使 用图像不宜太多，每张图像也不宜太大，图像过多传会让人觉得累赘，过大会影响网页的传输速度。 3、 超级链接：它是 Internet 上最受欢迎的基于超文本方式的多媒体信息查询系统。它是从一个网 页指向另一个目的端的链接。该链接可以指向该网站的另一个网页，也可以指向世界各地的其他网 页。文字或图像都可以设置超级链接。链接一般包括两种类型：站内和站外链接。 4、 导航栏：是网站设计者规划好网站结构后必须考虑的一个问题。为了让访问者顺利浏览，避免 访问者迷失方向，可以在网页上设置导航栏；它能使访问者方便地返回主页或者继续进一步访问。 导航栏可以是按钮、文本超级链接或者图像，可以在站点的每一网页上设置导航栏，一般情况下导 航栏应放在网页中比较显眼的位置。 5、 表格：在网页中的表格主要是一种用来控制网页中页面布局的有效方式。为了达到较理想的视 觉效果，通常都有不显示边框。 6、表单：是一种特殊的网页元素，它通常用来收集信息或实现一些交互式效果。其主要功能是接收 用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。 7、 多媒体及特殊效果：有些网页为了吸引浏览者，可级还会有声音、动画、视频等多媒体元素以 及悬停按钮，Java、ActiveX 控件等特殊效果

、网页设计原则 1、正确分析网页用户需要 2、网页命名要简洁〔在助于管理网页 方便用户搜索 3、确保页面导览性好 4、网页下载时间不宜过长 5、网页设计做到不同环境均能浏览 6、网页中的图形设计(.gif和 jpg/jpeg) 7、站点内容搭配(图文并茂、美观大方) 8、尽量使用相对链接 9、页面色彩(页面色彩是树立网页(站)形象的关键因素之一,在搭配网页色彩时,要注意色彩的鲜 明性、独特性、合适性和联想性) 10、网页的文字(四大原则) 原则一:不要使用超过3种字体的文字类型,否则网页看起来将显得杂乱,没有主题 原则二:不要用太大的字,因为版面空间非常宝贵和有限 原则三:最好不要使用不停闪烁的文字 学原则四:标题文字字体应比正文稍大,颜色有所区别 四、网站规划流程 主页面 1、确定网站规划主题 2、搜集资料 3、规划网站 次页面11htm 次页面23hm 次页面33htm 4、选择合适制作工具 5、制作网页 程 上传测试 次页面44htm 次页面56htm 次页面66htm 7、推广宣传 例如:设计一个学习型的网站其模块(结构可以设计如下) 首页、图像处理( FIREWORKS、 PHOTOSHOP)、动画( FLASH MX2004、COOL3D、3 DS MAX) 网页设计( FRONTPAGE、 DREAMWEAVER、 PHOTOSHOP)、程序设计(VB、C、 PASCAL、 DELPH)、 教程下载、学习园地、联系我们 五、网站分类 1、门户网站:如www.sina.comcn 2、职能网站:如www.alibab 3、专业网站:如www.cctv.com 4、个人网站:如w 课堂小结、作业 网页设计原则2、网站规划流程3、常用工具

教 学 过 程 三、网页设计原则 1、 正确分析网页用户需要； 2、 网页命名要简洁 在助于管理网页 方便用户搜索 3、 确保页面导览性好 4、 网页下载时间不宜过长 5、 网页设计做到不同环境均能浏览 6、 网页中的图形设计（.gif 和.jpg/jpeg） 7、 站点内容搭配（图文并茂、美观大方） 8、 尽量使用相对链接 9、 页面色彩（页面色彩是树立网页（站）形象的关键因素之一，在搭配网页色彩时，要注意色彩的鲜 明性、独特性、合适性和联想性） 10、网页的文字（四大原则） 原则一：不要使用超过 3 种字体的文字类型，否则网页看起来将显得杂乱，没有主题。 原则二：不要用太大的字，因为版面空间非常宝贵和有限。 原则三：最好不要使用不停闪烁的文字。 原则四：标题文字字体应比正文稍大，颜色有所区别。 四、网站规划流程 1、 确定网站规划主题 2、 搜集资料 3、 规划网站 4、 选择合适制作工具 5、 制作网页 上传测试 7、推广宣传 例如：设计一个学习型的网站其模块（结构可以设计如下） 首页、图像处理（FIREWORKS、PHOTOSHOP）、动画（FLASH MX2004、COOL 3D、3DS MAX）、 网页设计（FRONTPAGE、DREAMWEAVER、PHOTOSHOP）、程序设计（VB、C、PASCAL、DELPHI）、 教程下载、学习园地、联系我们 五、网站分类 1、 门户网站：如 www.sina.com.cn 2、 职能网站：如 www.alibaba.com.cn 3、 专业网站：如 www.cctv.com 4、 个人网站：如 www.wu.com 六、课堂小结、作业 网页设计原则 2、网站规划流程 3、常用工具 主页面 index.htm 次页面1 1.htm 次页面2 3.htm 次页面3 3.htm 次页面4 4.htm 次页面5 6.htm 次页面6 6.htm

教学反思:本堂课主要学习了网页的主要制作和设计流程的知识简介。在介绍的过程中,结合机房的 各种设备,来展示网页制作的魅力。以此来吸引学生的注意力。在实际的教学当中也确实产生了较好 的教学效果。同时在教学的过程也出现了一些问题,就是学生对网页制作软件的认识还是很基础的, 这需要在以后的教学过程中更加注意这个方面的锻炼

教学反思：本堂课主要学习了网页的主要制作和设计流程的知识简介。在介绍的过程中，结合机房的 各种设备，来展示网页制作的魅力。以此来吸引学生的注意力。在实际的教学当中也确实产生了较好 的教学效果。同时在教学的过程也出现了一些问题，就是学生对网页制作软件的认识还是很基础的， 这需要在以后的教学过程中更加注意这个方面的锻炼

Dreamweaver MX2004教案 第二周星期 第3、4节 课题网站制作流程 教学目标1、掌握网站制作的基本流程:2、掌握网站初期规划:3掌握网站整体布局 教学重点网点制作的初期规划 教学难点网点制作的初期规划 制作网站的流程 建立一个网站上一个系统工程,有自己特定的工作流程,只有遵循这个步骤,才能设计出一个 令人满意的网站。下面我们就来谈一谈网站设计的基本流程。网站设计主要分三个阶段。初期规划、 中期实际制作、后期维护。 (一)初期规划: 1、确定网站的主题、名称:主题鲜明、小而精、体现个性 2、搜集材料:可以从各类媒介中收集,但就注意要有特色(自己的东西) 3、规划网站:包括要栏目的设置、目录结构、风站的风格等。网站风格主要体现在: ①颜色的搭配: ②网站的标志(Logo) ③版面的布局:突出重点、平衡和谐,网站标志、主菜单等重要模块应放在最显眼、最突出的 位置,然后再安排次要模块(如搜索、友情链接、计数器、版权信息、E-mai地址等)。 ④图像的运用:整个页面不要太花,暄宾夺主主,图像大小(字节数)尽可能缩小,单张图像 不要超过30KB,每页图像总量不要超过60KB。最好采用JPG和GIF两种图像格式 教(二)、实际制作 1、制作网站主要包括以步骤: ①建立一个用于容纳首页及相关网页和网站中用到的其他文件的本地站点。 ②在站点根目录下创建子目录(为了使文件安排比较清晰,将页面文件和图像文件分开放置)。 ③向该站点中添加所需的空网页。注意:文件名和目录都不能使用中文,且用小写 ④设计网页尺寸:目前大都采用的是15寸显示器,页面大都设为800×600规格,网页应选择 760×420模式。 ⑤设置网页的属性;包括页面标题、背景图像、背景颜色、链接颜色、文字颜色等。 过|⑥向网页中插入文本、图形图像、动画等对象,并将图像合理布局。 ⑦建立所需的超级链接。 ⑧预览和保存网页。 2、上传测试网页制作完毕后一般要进行测试。主要包括上传前兼容性测试、链接测试和上传后 程实地测试。完成上传前所需的测试后,利用FP工具把网页发布到自己申请的主页存放服务器上 网站上传达室后要在浏览器中打开自己的网站,进行实地测试,发现问题及时修改,然后再上传测 试。全部测试完毕后就可以把网址告诉给朋友,让他们不浏览。 (三)、后期维护 1、推销网站:网页做好后,要不断地进行宣传,提高网站的访问率和知名度。推广网站的方 法很多,如E-mail、新闻组、与别的网站交换链接、到搜索引擎上注册、加入交换广告等。 2、维护更新:网站要注意定期维护、扩充内容,不要长期不变,只有不断补充新的内容。才能 吸引住浏览者。同时,随着软硬件的进步,网页设计也应由文字向多媒体、由平面向立体动画或影 片、由单项传播向交互式发展。 二、复习与思考: 网页文件的扩展名 2、网页包括的主要元素 3、网页图像格式使用最多的两种格 、教学反思:学生通过本节课的学习后,大多数同学已经掌握了网页制作的基本流程。在教学过 程中取得了较好的效果,对于基础较差的学生单独辅导。应该应用较多的实例来调动学习积极性

Dreamweaver MX2004 教案 第二周 星期一 第 3、4 节 课 题 网站制作流程 教学目标 1、掌握网站制作的基本流程；2、掌握网站初期规划；3 掌握网站整体布局。 教学重点 网点制作的初期规划 教学难点 网点制作的初期规划 教 学 过 程 一 制作网站的流程 建立一个网站上一个系统工程，有自己特定的工作流程，只有遵循这个步骤，才能设计出一个 令人满意的网站。下面我们就来谈一谈网站设计的基本流程。网站设计主要分三个阶段。初期规划、 中期实际制作、后期维护。 （一）初期规划： 1、确定网站的主题、名称：主题鲜明、小而精、体现个性。 2、搜集材料：可以从各类媒介中收集，但就注意要有特色（自己的东西）。 3、规划网站：包括要栏目的设置、目录结构、风站的风格等。网站风格主要体现在： ①颜色的搭配： ②网站的标志（Logo） ③版面的布局：突出重点、平衡和谐，网站标志、主菜单等重要模块应放在最显眼、最突出的 位置，然后再安排次要模块（如搜索、友情链接、计数器、版权信息、E-mail 地址等）。 ④图像的运用：整个页面不要太花，暄宾夺主主，图像大小（字节数）尽可能缩小，单张图像 不要超过 30KB，每页图像总量不要超过 60KB。最好采用 JPG 和 GIF 两种图像格式。 （二）、实际制作 1、制作网站主要包括以步骤： ① 建立一个用于容纳首页及相关网页和网站中用到的其他文件的本地站点。 ② 在站点根目录下创建子目录 （为了使文件安排比较清晰，将页面文件和图像文件分开放置）。 ③ 向该站点中添加所需的空网页。注意：文件名和目录都不能使用中文，且用小写。 ④ 设计网页尺寸：目前大都采用的是 15 寸显示器，页面大都设为 800╳600 规格，网页应选择 760╳420 模式。 ⑤ 设置网页的属性；包括页面标题、背景图像、背景颜色、链接颜色、文字颜色等。 ⑥ 向网页中插入文本、图形图像、动画等对象，并将图像合理布局。 ⑦ 建立所需的超级链接。 ⑧ 预览和保存网页。 2、上传测试网页制作完毕后一般要进行测试。主要包括上传前兼容性测试、链接测试和上传后 实地测试。完成上传前所需的测试后，利用 FTP 工具把网页发布到自己申请的主页存放服务器上。 网站上传达室后要在浏览器中打开自己的网站，进行实地测试，发现问题及时修改，然后再上传测 试。全部测试完毕后就可以把网址告诉给朋友，让他们不浏览。 （三）、后期维护 1、 推销网站：网页做好后，要不断地进行宣传，提高网站的访问率和知名度。推广网站的方 法很多，如 E-mail、新闻组、与别的网站交换链接、到搜索引擎上注册、加入交换广告等。 2、维护更新：网站要注意定期维护、扩充内容，不要长期不变，只有不断补充新的内容。才能 吸引住浏览者。同时，随着软硬件的进步，网页设计也应由文字向多媒体、由平面向立体动画或影 片、由单项传播向交互式发展。 二、复习与思考: 1、网页文件的扩展名 2、网页包括的主要元素 3、网页图像格式使用最多的两种格 三、教学反思：学生通过本节课的学习后，大多数同学已经掌握了网页制作的基本流程。在教学过 程中取得了较好的效果，对于基础较差的学生单独辅导。应该应用较多的实例来调动学习积极性

Dreamweaver MX2004教案 第二周星期二第1、2节 课题HM语言教程(一) 教学目标1、了解HML基本结构:2、了解HⅠML单位和颜色表示方法:3、掌握相对与绝对链接 教学重点HM基本语法及相对和绝对链接 教学难点相对和绝对链接 HTML基础知识 、HTML定义 HTML( HyperText MarkUp lan guage)是使用特殊标记来描述文档结构和表现形式的一种语 言,由w3( World Wide Web Con sortium)所制定和更新。我们可以用任何一种文本编译起来编 辑HTML文件,因为它就是一总纯文本文件 、HML语言的基本结构 下面我们来看一小段HTML语言的代码,来了解HTML语言的基本结构 我的第一个网页/head 我的网页 将这一小段代码粘贴至文本文件中,然后选择“另存为”,将文件的后缀名改为hm或 者htm1即可,然后再所在的目录下就可看到一个IE的图标,名字就是你所存的文件名称 注意:几乎每一种HTML语言的语法都是以>开头,以结束 教|3、HM语言的基本单位 (1)长度单位 长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性,同 时也可以用来定义这些对象在页面上的位置等属性,用来描述页面上可能遇到的各种长度。 学 长度的表示方法有两种:绝对长度和相对长度。他们的单位都是像素( pixel)和百分比 (%),像素代表的是屏幕上的每个点,而百分比代表的是相对于客户区的多少。下面我们就以水 平线的宽度为例,说明这两种表示方法。 标记是在页面上建立水平线的标记。 过| width是水平线元素中的一种属性,用来表示水平线的宽度。这里wdth=500甲即表示这个 水平线的宽度是500像素; width=%50"即表示水平线占据客户区的总宽度的%50。 (2)颜色单位 和长度单位一样,颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单位 程有三种表示方法:16进制颜色代码、10进制RGB码、直接颜色名称。这三种表示方法不同,但 是效果却是一样的。下面用一小段代码说明这三种颜色的表示方法。 用16进制表示红色 用颜色名表示红色 16进制颜色代码,语法格式:# RRGGBB。16进制颜色代码之前必须有一个“#”号,这 种颜色代码是由三部分组成的,其中前两位代表红色,中间两位代表绿色,后两位代表蓝色。 不同的取值代表不同的颜色,他们的取值范围是00-FF。 10进制RGB码,语法格式:RGB(RR,GGG,BB)。在这种表示法中,后面三个参数分别 是红色、绿色、蓝色,他们的取值范围是0--255。以上两种表达方式可以相互转换,标准是16 进制与10进制的相互转换。 直接颜色名称,可以在代码中直接写出颜色的英文名称。 以上三种表示方法的效果相同,一般16进制颜色代码的表示方法比较常用。可以根据自 己的喜好和实际情况来决定使用哪一种表示方法

Dreamweaver MX2004 教案 第二周 星期二 第 1、2 节 课 题 HTML 语言教程（一） 教学目标 1、了解 HTML 基本结构；2、了解 HTML 单位和颜色表示方法；3、掌握相对与绝对链接。 教学重点 HTML 基本语法及相对和绝对链接 教学难点 相对和绝对链接 教 学 过 程 一、HTML 基础知识 1、HTML 定义 HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语 言，由 W3C(World Wide Web Consortium)所制定和更新。我们可以用任何一种文本编译起来编 辑 HTML 文件，因为它就是一总纯文本文件。 2、HTML 语言的基本结构 下面我们来看一小段 HTML 语言的代码，来了解 HTML 语言的基本结构： 我的第一个网页 我的网页 将这一小段代码粘贴至文本文件中，然后选择“另存为”，将文件的后缀名改为.htm 或 者.html 即可，然后再所在的目录下就可看到一个 IE 的图标，名字就是你所存的文件名称。 注意：几乎每一种 HTML 语言的语法都是以<>开头，以结束。 3、HTML 语言的基本单位 （1）长度单位 长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性，同 时也可以用来定义这些对象在页面上的位置等属性，用来描述页面上可能遇到的各种长度。 长度的表示方法有两种：绝对长度和相对长度。他们的单位都是像素(pixel)和百分比 (%)，像素代表的是屏幕上的每个点，而百分比代表的是相对于客户区的多少。下面我们就以水 平线的宽度为例，说明这两种表示方法。 标记是在页面上建立水平线的标记。 width 是水平线元素中的一种属性，用来表示水平线的宽度。这里 width="500"即表示这个 水平线的宽度是 500 像素；width="%50"即表示水平线占据客户区的总宽度的%50。 （2）颜色单位 和长度单位一样，颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单位 有三种表示方法：16 进制颜色代码、10 进制 RGB 码、直接颜色名称。这三种表示方法不同，但 是效果却是一样的。下面用一小段代码说明这三种颜色的表示方法。 用 16 进制表示红色 用颜色名表示红色 注意： 16 进制颜色代码，语法格式： #RRGGBB 。16 进制颜色代码之前必须有一个“#”号，这 种颜色代码是由三部分组成的，其中前两位代表红色，中间两位代表绿色，后两位代表蓝色。 不同的取值代表不同的颜色，他们的取值范围是 00--FF。 10 进制 RGB 码，语法格式： RGB(RRR,GGG,BBB) 。在这种表示法中，后面三个参数分别 是红色、绿色、蓝色，他们的取值范围是 0--255。以上两种表达方式可以相互转换，标准是 16 进制与 10 进制的相互转换。 直接颜色名称，可以在代码中直接写出颜色的英文名称。 以上三种表示方法的效果相同，一般 16 进制颜色代码的表示方法比较常用。可以根据自 己的喜好和实际情况来决定使用哪一种表示方法

(3)URL路径 URL( Universal resource loca tor,统一资源定位器)路径是一种互联网地址的表示法。 在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服 务器( Server)里文件的完整路径和文件名称等信息。在HM中,URL路径分为两种形式:绝对路 经和相对路径。 a.绝对路径: 绝对路径是将服务器上磁盘驱动器名称完整的写出来,同时也会表现出磁盘上的目录结构 语法格式 例如: htt /A> b.相对路径 相对路径是相对于当前的HTML文档所在目录或站点根目录的路径。 语法格式 相对关系/部分路径/文件名 根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。 1>相对文档: 这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种 学表现形式。“…/”表示上一级目录,没有“…/”表示当前目录 例如当前文档的路径是:test/ projectI/ index.htm。我们要找test目录下的 hml.htm。而当前的目录是 project1,我们要回到上一级目录中,所以路径是“../html.htm” 2>相对根目录: 这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个 字符是“/”,这个符号表示这个路径是一个相对于根目录的表达式。 、上机练习 程\1利用记事本制作一个简单的页面 例如 Head> 欢迎光临 font color=red>我的主页 欢迎光临我的主页!/html> 2、接上面例题,将“我的主页”创建一个链接 、教学反思 在介绍的过程中,结合机房的各种设备,来展示网页制作的魅力。以此来吸引学生的注意力。在实际 的教学当中也确实产生了较好的教学效果。同时在教学的过程也出现了一些问题,就是学生对网页制 作语言htm的认识还是很基础的,这需要在以后的教学过程中更加注意这个方面的锻炼 四、作业

教 学 过 程 （3）URL 路径 URL(Universal Resource Locator，统一资源定位器)路径是一种互联网地址的表示法。 在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服 务器(Server)里文件的完整路径和文件名称等信息。在 HTML 中，URL 路径分为两种形式：绝对路 经和相对路径。 a. 绝对路径： 绝对路径是将服务器上磁盘驱动器名称完整的写出来，同时也会表现出磁盘上的目录结构。 语法格式： 例如： http://www.frontfree.net b. 相对路径： 相对路径是相对于当前的 HTML 文档所在目录或站点根目录的路径。 语法格式： 相对关系/部分路径/文件名 根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。 相对文档： 这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种 表现形式。“../”表示上一级目录，没有“../”表示当前目录。 例如 当前 文 档的 路径 是： test/project1/index.htm 。我 们要 找 test 目录 下 的 html.htm 。而当前的目录是 project1，我们要回到上一级目录中，所以路径是“../html.htm”。 相对根目录： 这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个 字符是“/”，这个符号表示这个路径是一个相对于根目录的表达式。 二、上机练习 1、利用记事本制作一个简单的页面。 例如： 欢迎光临 我的主页 欢迎光临我的主页！ 2、接上面例题，将“我的主页”创建一个链接 三、教学反思： 在介绍的过程中，结合机房的各种设备，来展示网页制作的魅力。以此来吸引学生的注意力。在实际 的教学当中也确实产生了较好的教学效果。同时在教学的过程也出现了一些问题，就是学生对网页制 作语言 html 的认识还是很基础的，这需要在以后的教学过程中更加注意这个方面的锻炼 四、作业

Dreamweaver MX2004教案 第二周星期三第1,2节 课题HM语言教程(二) 教学目标1、掌握BODY标志的应用:2、了解BODY标志中属性 教学重点BODY标志中属性 教学难点BODY标志中属性 BODY标志 body是一个网页代码的绝对主要部分。body是由开始,由结束。下面我们 看一下body部分的元素: color背景色 background背景图案 text文本颜色 link链接文字颜色 alink活动链接文字颜色 vlink已访问链接文字颜色 leftmargin页面左侧的留白距离 topmargin页面顶部的留白距离 下面介绍各个部分的功能及用法 bgcolor用于指定页面的背景颜色。在 Microsoft公司的IE浏览器中,默认情况下是白色, Netscape 公司的 Navigator浏览器的默认情况是灰色。 语法格式: background: background属性用于指定页面的背景图案 语法格式:bodybackground="http://www.ebok.cn/url> 下面介绍几种文字的属性,可以改变文字的颜色以及在页面上留出空白 教 text link alink vlink leftmargin topmargin 他们的作用分别是:非链接文字的颜色:可连接文字的颜色:正被点击的可链接文字的颜色 已被点击的可链接的文字的颜色:页面左侧的留白:页面顶部的留白。 语法格式: 4 dy leftmargin="value"topmargin=value"> BODY实例如右所示: 过|说明:对于lnk这样的属性,大多数hml 的页面已经不使用这样的用法了现在多数hody元素示例/us 是在head中加入相应的代码。要达到的效head 果是鼠标放到有链接的字体上时,字体变 bgcolor="#ff0000 text="#ffff00 程色,点击后字体变为灰色。具体方法如下 leftmargin=100"> p>这里显示body的示例。 A: link (color: #00007f, A: visited color: #65038e; i A: active color: #ff0000; i A: hover color: #ff0000; 1 将这段代码加入到head中,在body中加入有链接的文字,就可以看出效果了。这一部分是属 于css中的知识 Algn属性(三种选择) Lef(默认值)文字左对齐 Center文字居中对齐 Right文字据右对齐 html> Align A t 文字左对齐文字居中 文字右对齐

Dreamweaver MX2004 教案 第二周 星期三 第 1，2 节 课 题 HTML 语言教程（二） 教学目标 1、掌握 BODY 标志的应用；2、了解 BODY 标志中属性。 教学重点 BODY 标志中属性 教学难点 BODY 标志中属性 教 学 过 程 一、BODY 标志 body 是一个网页代码的绝对主要部分。body 是由开始，由结束。下面我们 看一下 body 部分的元素： 下面介绍各个部分的功能及用法： bgcolor 用于指定页面的背景颜色。在 Microsoft 公司的 IE 浏览器中，默认情况下是白色，Netscape 公司的 Navigator 浏览器的默认情况是灰色。 语法格式： background：background 属性用于指定页面的背景图案。 语法格式： 下面介绍几种文字的属性，可以改变文字的颜色,以及在页面上留出空白： text link alink vlink leftmargin topmargin 他们的作用分别是：非链接文字的颜色；可连接文字的颜色；正被点击的可链接文字的颜色； 已被点击的可链接的文字的颜色；页面左侧的留白；页面顶部的留白。 语法格式： BODY 实例如右所示： 说明：对于 link 这样的属性，大多数 html 的页面已经不使用这样的用法了。现在多数 是在 head 中加入相应的代码。要达到的效 果是鼠标放到有链接的字体上时，字体变 色，点击后字体变为灰色。具体方法如下： A:link {color:#00007f;} A:visited {color:#65038e;} A:active {color:#ff0000;} A:hover {color:#ff0000;} 将这段代码加入到 head 中，在 body 中加入有链接的文字，就可以看出效果了。这一部分是属 于 css 中的知识。 Align 属性(三种选择) Left(默认值) 文字左对齐 Center 文字居中对齐 Right 文字据右对齐 bgcolor 背景色 background 背景图案 text 文本颜色 link 链 接 文字 颜 色 alink 活 动链 接 文 字 颜色 vlink 已 访 问 链 接文 字 颜 色 leftmargin 页面左侧的留白距离 topmargin 页面顶部的留白距离 body 元素示例 这里显示 body 的示例。 Align 属性 文字左对齐文字居中 文字右对齐

是换行标记,夹在代码的最后,显示出的网页将自动换行。同样,..就是 不换行标记,无论你在代码中将文字写为何种形式,都会在一行中显示。 段落属性显示 江雪 千山鸟飞绝,万径人踪灭 孤舟蓑笠翁,独钓寒江雪 <>赤壁 折戟沉沙铁未销,自将磨洗认前朝。东风不与周郎便,铜雀春深锁二乔。 通过浏览器,我们可以看到其中的效果,大家也就能体会到其中的用法。还有一种属性叫做预格 式化pre>.。请大家看一下下面的例子 预格式化演示 学 p>卜算子咏梅 过/驿外断桥边,寂寞开无主 已是黄昏独自愁,更著风和雨 无意苦争春,一任群芳妒。 零落成泥碾作尘,只有香如故。 程 通过浏览器看看上面这段代码的产生效果 、上机练习 、教学反思 学生通过本节课的学习后,大多数同学已经掌握了网页制作掌握BODY标志的应用。在教学过程中取 得了较好的效果,对于基础较差的学生单独辅导。应该应用较多的实例来调动学习积极性。 四、作业

教 学 过 程 是换行标记，夹在代码的最后，显示出的网页将自动换行。同样，…… 就是 不换行标记，无论你在代码中将文字写为何种形式，都会在一行中显示。 通过浏览器，我们可以看到其中的效果，大家也就能体会到其中的用法。还有一种属性叫做预格 式化……。请大家看一下下面的例子。 示例： 预格式化演示 卜算子 咏梅 驿外断桥边，寂寞开无主。 已是黄昏独自愁，更著风和雨。 无意苦争春，一任群芳妒。 零落成泥碾作尘，只有香如故。 通过浏览器看看上面这段代码的产生效果。 二、上机练习 三、教学反思 学生通过本节课的学习后，大多数同学已经掌握了网页制作掌握 BODY 标志的应用。在教学过程中取 得了较好的效果，对于基础较差的学生单独辅导。应该应用较多的实例来调动学习积极性。。 四、作业 段落属性显示 江雪 千山鸟飞绝，万径人踪灭。 孤舟蓑笠翁，独钓寒江雪。 赤壁 折戟沉沙铁未销，自将磨洗认前朝。东风不与周郎便，铜雀春深锁二乔

Dreamweaver MX2004教案 第三周星期 第3、4节 课题 Dreamweaver MX简介 教学目标1、了解网页中部分术语:2、如何创建一个站点:3、如何创建一个简单网页 教学重点站点及网页创建 教学难点站点及网页创建 复习:1、利用记事本编辑一个网页。 BODY标志符及其属性设置 授新课 、 Dreamweaver简介 网页的术语 网页:通过浏览器在WwW上看到的页面 2、网站:是网页的集合,设计者先把整个网络结构规划好,然后分别制作各个网页,在整理过程中, 再将网页按一定顺序结合起来,使浏览者在访问该网站时能连接到各个网页进行观看网页内容 3、网站开发流程:是集体团结的象征,因一个公司组织开发一个网站时,不是某个人单独完成的 参与开发的包括主导网站的单位、客户,还有美术设计人员、程序设计师和维护人员等。 定义 建立网 首页的设 站点 站结构 计和制作 教 发布和 技术的 维护 实现 学 、服务器:用户在浏览网页时,是由自己的计算机向存放网页的计算机发出的一个请求,对方在收 到请求后,将所需内容发送给发出请求的计算机 本地计算机被称为客户机,对方计算机被称为服务器 过 5、CSS:层叠样式表,可控制布局、字体、颜色、背景、滚动条颜色、边框、鼠标形状等。 、html标签 1、标签:用来分割和标记网页中的元素以形成网页的布局、文字的格式及画面,通过标签可在网页 中加入文本、图片、声音、动画等多媒体文件 程|2、标签分类: a、单标签:如表示换行 b、双标签:给网页文件发送的指令符号前面和后面分别加上标签,告诉文件从开始标签开始到 结束标签之间执行某个命令。如/html 四、工作环境介绍 1、页面编辑器: 标题栏:若做更改但未保存,则在文件名后显示星号。 菜单栏 插入栏 文档工具栏:“设计”“代码”“拆分” 标签选择器:显示环绕当前选定的内容的标签的层次结构 状态栏: 窗口大小:

Dreamweaver MX2004 教案 第三周 星期一 第 3、4 节 课 题 Dreamweaver MX 简介 教学目标 1、了解网页中部分术语；2、如何创建一个站点；3、如何创建一个简单网页。 教学重点 站点及网页创建 教学难点 站点及网页创建 教 学 过 程 复习：1、利用记事本编辑一个网页。 2、BODY 标志符及其属性设置。 讲授新课： 一、Dreamweaver 简介 二、网页的术语： 1、网页：通过浏览器在 WWW 上看到的页面。 2、网站：是网页的集合，设计者先把整个网络结构规划好，然后分别制作各个网页，在整理过程中， 再将网页按一定顺序结合起来，使浏览者在访问该网站时能连接到各个网页进行观看网页内容。 3、网站开发流程：是集体团结的象征，因一个公司组织开发一个网站时，不是某个人单独完成的， 参与开发的包括主导网站的单位、客户，还有美术设计人员、程序设计师和维护人员等。 4、服务器：用户在浏览网页时，是由自己的计算机向存放网页的计算机发出的一个请求，对方在收 到请求后，将所需内容发送给发出请求的计算机。 本地计算机被称为客户机，对方计算机被称为服务器。 5、CSS：层叠样式表，可控制布局、字体、颜色、背景、滚动条颜色、边框、鼠标形状等。 三、html 标签 1、标签：用来分割和标记网页中的元素以形成网页的布局、文字的格式及画面，通过标签可在网页 中加入文本、图片、声音、动画等多媒体文件。 2、标签分类： a、单标签：如表示换行 b、双标签：给网页文件发送的指令符号前面和后面分别加上标签，告诉文件从开始标签开始到 结束标签之间执行某个命令。如 四、工作环境介绍 1、页面编辑器： 标题栏：若做更改但未保存，则在文件名后显示星号。 菜单栏： 插入栏： 文档工具栏：“设计”“代码”“拆分” 标签选择器：显示环绕当前选定的内容的标签的层次结构。 状态栏： 窗口大小： 定 义 站点 建立网 站结构 首页的设 计和制作 技术的 实现 发布和 维护

2、面板组:是分组在某个标题下面的相关面板的集合 3、属性检査器:用于测试和编辑当前所选页面元素的属性。 五、站点的建立: 步骤:1、在硬盘上新建一个用来存放网站内容的文件夹 2、“站点”“管理站点” 3、“新建”“站点” 4、定义“编辑文件”第一部分:为站点输入名称 5、定义“编辑文件”第二部分:服务器技术的运用与否。 6、定义“编辑文件”第三部分 7、定义“共享文件” 8、完成。 、编辑网页 1、用记事本: 欢迎光临我的第一个网页! 学 这是我的第一个网页! 2、用 dreamweaver编辑 七、教学反思: 学生通过本节课的学习后,大多数同学已经掌握了网页制作软件 dreamweaver创建站点的应用,制作 程个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学 习积极性 八、课外作业:上机练习

教 学 过 程 2、面板组：是分组在某个标题下面的相关面板的集合。 3、属性检查器：用于测试和编辑当前所选页面元素的属性。 五、站点的建立： 步骤：1、在硬盘上新建一个用来存放网站内容的文件夹。 2、“站点”“管理站点” 3、“新建”“站点” 4、定义“编辑文件”第一部分：为站点输入名称。 5、定义“编辑文件”第二部分：服务器技术的运用与否。 6、定义“编辑文件”第三部分。 7、定义“共享文件” 8、完成。 六、编辑网页 1、 用记事本： 欢迎光临我的第一个网页！ 这是我的第一个网页！ 2、 用 dreamweaver 编辑 七、教学反思： 学生通过本节课的学习后，大多数同学已经掌握了网页制作软件 dreamweaver 创建站点的应用，制作 一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学 习积极性 八、课外作业：上机练习