《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语言的基本结构 <html> < title>我的第一个网页</ title>/head <body>我的网页</body></htm1> 将这一小段代码粘贴至文本文件中,然后选择“另存为”,将文件的后缀名改为hm或 者htm1即可,然后再所在的目录下就可看到一个IE的图标,名字就是你所存的文件名称 注意:几乎每一种HTML语言的语法都是以>开头,以</>结束 教|3、HM语言的基本单位 (1)长度单位 长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性,同 时也可以用来定义这些对象在页面上的位置等属性,用来描述页面上可能遇到的各种长度。 学 长度的表示方法有两种:绝对长度和相对长度。他们的单位都是像素( pixel)和百分比 (%),像素代表的是屏幕上的每个点,而百分比代表的是相对于客户区的多少。下面我们就以水 平线的宽度为例,说明这两种表示方法。 <HR>标记是在页面上建立水平线的标记。 过| width是水平线元素中的一种属性,用来表示水平线的宽度。这里wdth=500甲即表示这个 水平线的宽度是500像素; width=%50"即表示水平线占据客户区的总宽度的%50。 (2)颜色单位 和长度单位一样,颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单位 程有三种表示方法:16进制颜色代码、10进制RGB码、直接颜色名称。这三种表示方法不同,但 是效果却是一样的。下面用一小段代码说明这三种颜色的表示方法。 < font COlOr=#0000ff>用16进制表示红色 < font COLOR=red>用颜色名表示红色 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 语言的基本结构： <html> <head> <title>我的第一个网页</title></head> <body>我的网页</body></html> 将这一小段代码粘贴至文本文件中，然后选择“另存为”，将文件的后缀名改为.htm 或 者.html 即可，然后再所在的目录下就可看到一个 IE 的图标，名字就是你所存的文件名称。 注意：几乎每一种 HTML 语言的语法都是以<>开头，以</>结束。 3、HTML 语言的基本单位 （1）长度单位 长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性，同 时也可以用来定义这些对象在页面上的位置等属性，用来描述页面上可能遇到的各种长度。 长度的表示方法有两种：绝对长度和相对长度。他们的单位都是像素(pixel)和百分比 (%)，像素代表的是屏幕上的每个点，而百分比代表的是相对于客户区的多少。下面我们就以水 平线的宽度为例，说明这两种表示方法。 <HR>标记是在页面上建立水平线的标记。 width 是水平线元素中的一种属性，用来表示水平线的宽度。这里 width="500"即表示这个 水平线的宽度是 500 像素；width="%50"即表示水平线占据客户区的总宽度的%50。 （2）颜色单位 和长度单位一样，颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单位 有三种表示方法：16 进制颜色代码、10 进制 RGB 码、直接颜色名称。这三种表示方法不同，但 是效果却是一样的。下面用一小段代码说明这三种颜色的表示方法。 <font COLOR=#0000ff>用 16 进制表示红色 <font COLOR=red>用颜色名表示红色 注意： 16 进制颜色代码，语法格式： #RRGGBB 。16 进制颜色代码之前必须有一个“#”号，这 种颜色代码是由三部分组成的，其中前两位代表红色，中间两位代表绿色，后两位代表蓝色。 不同的取值代表不同的颜色，他们的取值范围是 00--FF。 10 进制 RGB 码，语法格式： RGB(RRR,GGG,BBB) 。在这种表示法中，后面三个参数分别 是红色、绿色、蓝色，他们的取值范围是 0--255。以上两种表达方式可以相互转换，标准是 16 进制与 10 进制的相互转换。 直接颜色名称，可以在代码中直接写出颜色的英文名称。 以上三种表示方法的效果相同，一般 16 进制颜色代码的表示方法比较常用。可以根据自 己的喜好和实际情况来决定使用哪一种表示方法