1、网 制作流程第一章 网页设计基础教学目的： 本章将带领用户认识Dreamweaver MX，了解其新增功能。在开始学习该软件之前，了解一下Dreamweaver MX的工作界面的一些简单设置。通过本章的学习，用户能熟悉Dreamweaver MX的工作界面，并能自行设置具有独特的个性化的工作环境。理解DW站点的作用，并掌握建立站点的方法及站点维护的方法。教学重点： 1、认识Dreamweaver MX。 2、新增功能。 3、Dreamweaver MX主窗口。 4、自定义工作环境。 5、利用Dreamweaver建立站点的方法教学难点：1、认识Dreamweaver MX。 2、新增功能。 3
2、、自定义工作环境。教学内容与教学过程：一、 介绍网页制作这门课程1学习这门课程的目的： 让学生掌握HTML语言、以及利用相关网页制作工具制作网页的基本方法与技能。学生通过这门课程的学习，能够具备综合运用专业软件进行小型网站开发和静态网页页面设计的能力，同时积累一定的实践经验，为今后从事相应的网站设计制作工作打下良好基础。2这门课程的教学内容： 在制作软件上：以网页制作软件DreamWeaver MX为主干进行网页制作教学，同时选择了Flash MX版本来制作网页中的动画素材，选择了图形图像工具Photoshop 7.0版本软件来处理和制作网页中的图片。 教学内容安排上按照学生学习网页的渐进规律
3、划以及学校制订的计划主要学习第1、2、3、5、6、9章，主要包括网页制作的基础知识、Dreamweaver MX软件的使用，初学者利用现有的素材设计制作出一个简单的网页；利用Photoshop7和 Flash MX软件来美化网页，以及网页布局和用色方面的美术知识，如何设计网页的版面和结构，还要能对供给的素材按照网站的特点进行适当的美化处理；还能掌握中小型网站的建立方法。 3这门课程的教学和学习方法： 教学上以一个个案例为基础，采用项目教学的方法，由浅入深的介绍网页制作的各个知识点；教学中以学生会操作为目的，重视学生动手能力和自学能力的培养 同学们学习时除了要掌握相应的操作技能以外，更要重视操作
4、技能的使用，要努力完成每章教学案例的制作以及课后素材案例。在不断的练习过程中熟悉和升华所学的操作技能。同时，要学会学习，即要学会与老师或同学之间技术心得的交流，要学会能自主的依靠其他资源（网络、报纸杂志等）来扩展所学的知识体系。课前思考：1、Dreamweaver软件是干什么用的？2、试用一下Dreamweaver，你觉得这个软件在界面上更象Word还是Photoshop，为什么？3、试用一下Dreamweaver，按默认格式保存，文件的扩展名是什么？4、双击网页文件，会自动打开Dreamweaver软件吗？这点上与Word软件相同吗？1.1 Dreamweaver的基本概念1、了解Dream
5、weaver与IE有什么区别？ Dreamweaver是制作网页的工具，用它可以生成.htm或.html文件，而IE是浏览网页的工具，用IE只能看网页，而不能改网页，修改网页还是需要网页制作工具。2、做网页只能使用Dreamweaver一种工具吗？ 常用的网页制作软件有Dreamweaver和FrontPage。Dreamweaver由美国Macromedia公司开发，虽然初学者感到比较难学，但它的功能更强大，生成的网页代码质量好，是当今最流行的网页制作工具，适合专业网页设计人员使用，近年来它还获得过不少大奖呢。Frontpage是微软公司开发的Office办公软件中的一部分，比较容易上手，但
6、功能不太强大，我们只在需要时（如向网页中加入微软格式的视频），才会使用FrontPage。3、Dreamweaver最新版是多少？ Dreamweaver从2.0、3.0、4.0、MX到现在最新的MX2004版，平均每过一年就出一个新版。可见计算机是多么的富有活力。今年常用的是MX版，建议大家在家里的电脑上也将这个版本，以便与学校的相同。对于软件，我并不认为版本越新越好，它们的基本功能还是相同的，一般版本越高，对计算机的要求也越高，如果计算机配置不高，初学时还是找个低版本比较好，当然所装的软件必须与书本上的相同，这也是学习其它软件的基本要求。4、Dreamweaver与Firework、Fla
7、sh有何关系？ 它们都是Macromedia公司的软件，Dreamweaver是网页制作工具，Firework是图形处理工具，与photoshop相似，一般用于网页图形的制作，Flash是动画制作工具，在制作好的网页时，一般先用Firework和Flash先制作好网页中要用到的图形和动画素材，再用Dreamweaver把这些素材做成一张网页，只会Dreamweaver，不会图形处理和动画制作，是做不出好的网页的。有人把这三个软件称作网页设计“三剑客”。1.2认识DreamWeaver1.DreamWeaver的作用和特色2.DreamWeaver功能界面的分解3.DreamWeaver工作流程
8、4. DreamWeaver 的版本、安装、打开、保存等操作演示：练习制作第一张网页作业一在主窗口中输入以下文字，并按以下格式排版，最后把文件以“学号姓名.htm”为名保存在桌面上。注意难点：设置字体、水平线、二个全角空格、回车会自动空一行，Shift+回车就不会空行了。1.3 创建本地站点引入：为什么要建站点？在正式开始制作网页之前，最好先定义一个新网站，这是因为：更好地利用站点窗口对站点文件进行管理。 尽可能的减少一些错误的出现，如路径出错，链接出错（特别是新手），当熟练掌握了DREAMWEAVER的使用后，并且只需制作单个网页时候可以省去这一步； 还值得说的是，新手做网页，就只知道做网页
9、，不懂得条理性、结构性，一个文件放这里，另一个文件放那里，或者所有文件都放在同一文件夹内，这样显得很乱。 所以，行家的做法是：（1先建立一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹，将文件分类，如图片文件放在image文件夹内，HTML文件放在HTML文件夹内（2）当然，如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再分类。（3）还有文件的命名也是非常重要的，新手通常不注意这些，随便乱起些名字，这样过些时候自己也搞不懂是什么了（特别是文件比较多的时候），我们要做到一看文件的名字就知道是什么内容的文件。（4）行家的做法是：用英文或者拼音给文件命名（推荐英文），不要使用中文的
10、名字（因为有的机器对中文支持不太好，有可能出现链接的错误，你自己以为正确的东西在别人看来有可能是错的）。1、什么是站点？站点是存放一组网页的一个存储地方，一般是一个磁盘目录，在该目录中存放该网站的所有网页及有关的图片、FLASH动画、CSS样式文件等。建立站点时，我们一般在自已的电脑上建一个文件夹，然后把制作的所有网页及图片放在此文件夹中，最后把这个目录上传到WEB服务器上，以供英特网上的所有用户浏览。问：网页？网站答：不等问：网页？主页答：不等主页通常主页命名为index.htm,index.html,default.htm,default.html2、站点的典型文件结构站点的典型文件结构3
11、、如何建立一个空站点准备工作建文件夹在硬盘上某一个位置建一个总的文件夹My web pic music flash movie 例：在D盘上建立自己帐号为名的文件夹，把这个文件夹定义为站点，站点名的“我的个人网站”操作步骤：第一步：在D盘上建立文件夹第二步：在DW软件中，选择菜单“站点-新建站点”，可以按向导一步一步操作，但我建议大家直接选“高级”卡片第三步：在“本地信息”中，填入“站点名称”，把“本地根文件夹”指定为该目录4、如何把一个已有目录定义为一个站点例：首先单击下载网站，把网站包下载到D盘，并解压缩，在D盘上会自动生成一个文件夹，按上面所讲的步骤，把该目录定义为一个站点，站点名为“祖
12、国腾飞”5、使用站点管理器定义完站点后，就可以使用站点管理器来管理站点了。显示站点面板：单击菜单“窗口-站点”。我们可以在站点管理器中通过右击“新建文件夹”、“新建文件”、“文件重命名”、“删除文件”，也可以通过拖动，把文件移动到其它文件夹。第二章? 网页的基本操作教学目的：使学生了解编辑HTML文档的各种具体操作，包括如何为页面添加文字，图片。教学重点：1、编辑文本的各种方法2、在网页中插入图片的方法教学难点：1、编辑文本的各种方法2、在网页中插入图片的方法教学方法：讲演法教学课时：4课时教学过程：2.1文本操作及修饰一、特殊字符的输入1、输入 等特殊英文字符单击“插入”工具栏上的“字符”面
13、板。2、输入等中文符号采用输入法中的软键盘3、输入空格（推荐使用全角空格）单击“插入”菜单-“特殊符号”-“不换行空格”按“Ctrl+Shift+Space”组合键单击“插入”工具栏上的“字符”面板上的“不换行空格”按钮。把中文输入法切换到全角模式，输入全角空格4、插入日期和时间。单击“插入”工具栏上的“常用”面板上的“日期”按钮。练习一：输入以下内容，以“1.htm”保存在桌面上。特殊符号： ™ 中文符号：现在时间：2006-02-22二、列表的制作列表分为无序列表（项目列表）和有序列表（编号列表）；各个列表项之间没有顺序级别之分时选无序列表，否则选有序列表 。制作方法：第一步：
14、先输入各个项目，每个项目成为一段（一个项目输入完成后，要按回车键，不能使用SHIFT回车）第二步：选中要转换为项目列表的所有段落第三步：单击属性面板上的项目列表或编号列表按钮第四步：如果要实现多级(嵌套)的项目列表，可单击“属性”面板上的“缩进”命令练习二： 电脑专业 o 网络技术 1. 网络1班 2. 网络2班 o 信息技术 3. 信息1班 4. 信息2班 o 电脑维护 美术专业 工艺绘画 广告设计 操作提示：第一步：输入“电脑专业”等11行，每行按回车，不能用SHIFT+回车第二步：全部选中，单击“属性”面板中的无序列表按钮第三步：选中“网络技术电脑维护”7个段落，选“属性”面板中的缩进按
15、钮第四步：同样方法让“网络1班”等班级缩进第五步：选中“网络1班、网络2班”，单击“属性”面板中的有序列表按钮，使其变为有序列表有时设置好项目符号后，再打进去的字也变成项目符号了，解决这个问题的方法是，在设置项目符号前，先把后面的字输入几字，再去设置项目符号。选做练习： 飘雨的季节 困惑的心情 羞涩的蓓蕾 年轻的你我 蓝色的小屋 i. 飘雨的季节 ii. 困惑的心情 iii. 羞涩的蓓蕾 iv. 年轻的你我 v. 蓝色的小屋 a. 飘雨的季节 b. 困惑的心情 c. 羞涩的蓓蕾 d. 年轻的你我 e. 蓝色的小屋 5. 飘雨的季节 6. 困惑的心情 7. 羞涩的蓓蕾 8. 年轻的你我 9. 蓝
16、色的小屋 三、样式的使用(一)样式的作用：避免重复操作，提高操作效率；统一网页的风格(二)HTML样式HTML样式与Word中的格式刷功能相似。如果网页中多个地方需要设置“红色、黑体、5字号”等三个属性，如果一个一个去设置效率不高，我们可以先定义一个“HTML样式”为包含“红色、黑体、5字号”等三个属性，以后到需要设置这三个属性的地方应用一下这个HTML样式即可，所以使用“HTML样式”可以提高工作效率。1、建立HTML样式第一步：在窗口菜单中打开“HTML样式”面板（属于设计面板组）第二步：单击面板下方的“新建样式”按钮（1）输入名称（2）指定应用范围（3）指定应用时的效果（4）设置属性2、
17、应用HTML样式选中文字，单击“HTML样式”面板中定义的样式即可3、清除HTML样式选中先设置HTML样式的文字，单击面板上的“清除所选样式”或“清除段落样式”4、修改HTML样式双击相应的样式名5、删除HTML样式选择要删除的样式，单击“HTML样式”面板中的删除按钮练习三：。定义一个HTML样式，名称为“red-hei-5”，属性为“红色、黑体、5字号”，任意输入一段文字，把这个HTML样式，多次应用到网页中。(三)CSS样式（层叠样式表）CSS是干什么用的？你还记得在网页中最大字号是多少吗？对了是7号，再大就不行了，用CSS样式，你可以让一个字占满一个屏幕(如果你喜欢这样做)。用CSS
18、样式还能设置文字的上标、下标、下划线、文字背景等。CSS的功能可强大了!不会CSS，等于没学过网页制作。HTML样式与CSS样式的区别？同样都是样式，但功能有很大的不同，HTML样式的功能只是把原来网页设置的几个属性合并为一个名称，起到方便设置的目的，但并不能增加其它功能，而CSS样式只对原网页设置的扩充，许多原来不能设的属性通过CSS样式可以设了。1、建立CSS样式第一步：打开CSS样式面板第二步：单击面板下方的“新建CSS样式”按钮（1）指定CSS样式的名称(最好字母开头)，（2）“类型”选“创建自定义样式”(其它二种以后介绍)，（3）“定义在”选“仅对该文档”，单击“确定”（4）设置CS
19、S样式（CSS样式功能非常多，首先要求掌握的是“类型”和“背景”二张卡片的内容。）2、应用CSS样式选中文字，然后在面板上单击相应的样式名3、清除CSS样式选中先设置CSS样式的文字，单击面板上的“无CSS样式”4、修改CSS样式5、删除CSS样式2.2 在网页中插入图象一、网页图像的常用格式1、GIF：支持256色，可以做成逐帧动画，可以设置透明背景，一般用于网页中的小图标，如 2、JPG：支持百万级真彩，一般用于网页中的照片，如3、PNG：有GIF、JPG的所有优点，是网页图片发展的方向，但图片文件大小稍大。如DW中也能插入FLASH动画、声音文件、影视文件等，这些内容不属本章内容，但插入
20、这些文件的方法与插入图像相似，有兴趣的同学请自行摸索。DW只支持以上三种格式的图片，其它如BMP格式是也可以在IE浏览器中被显示，但在DW中无法显示，由于BMP文件体积很大，在网页中一般不推荐。小知识：图像有分辨率这个技术指标，由于网页图片一般用于在屏幕上显示，而显示屏的分辨率为每英寸72象素，所以放到网页去的图片分辨率不用很高。如果用数码像机拍照片，选用最低的640X480分辨率即可，千万不用把高分辨率的数码照片直接做到网页中，那些会影响打开网页的速度，而且浪费存储空间。补充知识：如何保存网页中的图片在IE浏览器中右击该图片，选“图片另存为”即可。二、在网页中插入图片1、插入图片前先把网页保
21、存一下，以免图片丢失2、图片要放在网页的同一个目录或子目录下3、把光标定位在需要插入图片的位置，选插入面板上的“图像”按钮4、网页、图片文件名只能是英文或数字不能用中文三、图象与文字的位置关系在WORD排版中，图像的位置可以任意拖动，而在DW中不行。网页中的图片只有独立、左对齐、右对齐三种状态，不能自由摆放图片的位置。练习一：制作如下网页，完成后以“1.htm”保存。对齐图像:使用图像属性检查器设置图像相对于同一段落或行中其他元素的对齐方式。可以将图像与同一行中的文本、另一个图像、插件或其他元素对齐。您还可以使用对齐按钮（左对齐、右对齐、居中对齐）设置图像的水平对齐方式。“默认值”通常指定基线
22、对齐。（根据站点访问者的浏览器的不同，默认值也会有所不同。）“基线和底部”将文本（或同一段落中的其他元素）的基线与选定对象的底部对齐。“顶端”将图像的顶端与当前行中最高项（图像或文本）的顶端对齐。“中间”将图像的中部与当前行的基线对齐。“文本上方”将图像的顶端与文本行中最高字符的顶端对齐。“绝对中间”将图像的中部与当前行中文本的中部对齐。“绝对底部”将图像的底部与文本行（这包括字母下部，例如在字母 g 中）的底部对齐。“左对齐”将所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。“右对齐”将图像放置在右边，文本在对象的左侧换行。如果右
23、对齐文本在行上处于对象之前，它通常强制右对齐对象换到一个新行。小技巧：图像必须插入到文字的最前面，这样图像才能和文字上部对齐，如果图像插入到下部则不能实现这种效果。考考你：当你把鼠标移到右边的小图上，会显示一行文字“Hi,你好”，看到了第三章 建立网页链接教学内容：Dreamweaver 8提供多种创建超链接的方法，可创建到文挡、图像、多媒体文件或可下载软件的链接，可以创建到文档内任意位置的任何文本或图像的链接等。教学重点：内部链接的创建方法。外部链接的创建方法。锚点链接的创建方法。E-mail链接的创建方法。教学难点：锚点链接的创建方法。教学方法：讲演法教学课时：4课时教学内 容与助学过程：
24、3.1 编织网站链接足球新闻3.1.1 案例综述 本例以编织网站中的各种超链接为主要目的，介绍创建超链接种种方法和技巧3.1.2 案例分析为实现网页的跳转，将创建：n 到网站内页面的超链接内部链接；n 到网站外页面的超链接外部链接；n 电子邮件形式的超链接E-mail链接；n 到网页某一特定位置的超链接锚点链接；n 以及其他一些链接。3.1.3 实现步骤一、准备网页内容步骤1选中站点；步骤2将素材文件夹中的相关文档复制到站点文件夹下。二、创建超链接1、创建内部链接网站内部页面之间创建相互链接关系步骤1选中页面中的文字或图像，在属性面板中单击“链接”文本框右侧的文件夹图标，以通过浏览选择一个文件
25、步骤2从“目标”下拉菜单中，选择文档的打开位置。n_blank :新打开的空窗口n_parent：如果是嵌套的框架，则在父框架中打开。n_self：会在当前网页所在的窗口或框架中打开。n_top：会在完整的浏览器窗口中打开。2、创建外部链接创建链接到绝对地址的外部链接（2） 然后在“目标”下拉菜单中设置这个链接的目标窗口。3、创建Email链接当浏览者单击电子邮件链接时，可即时打开浏览器默认的电子邮件程序处理程序。方法：（1） 选中文本和图像（2） 插入栏常用电子邮件链接输入邮件地址（3） 或在属性面板的链接栏中直接输入邮件地址4、锚点链接是指同一个页面中的不同位置链接。分为两步：（1） 创建
26、命名锚记，就是在文档中设置位置标记，并给该位置一个名称，以便引用。（2） 创建到命名锚记的链接5、创建其他类型的链接（1）创建下载链接n 当被链接的文件是exe文件或zip文件等浏览器不支持的类型时，这些文件会被下载，这就是网上下载的方法。n 链接到下载文件的方法，和链接到网页的方法完全一样。（2）、创建空链接n 空链接用来激活页面中的对象或文本。当文本或对象被激活后，可以为之添加行为。方法：选中要制作空链接的对象，在链接文本框中直接输入。n 在一般站点首页的导航栏中的首页链接，就可以是一个空链接6、创建跳转菜单跳转菜单是文档中的弹出式菜单，可以创建到可在浏览器中打开的任何文件类型的链接。方法
27、：（1） 插入栏表单跳转菜单（2） 在“插入跳转菜单”对话框中，单击号添加菜单项（3） 在“选择时。转到URL”文本框中，输入该文件的路径。7、创建图像地图图像地图指已被分为多个区域（热点）的图像。当用户单击某个热点时，会发生某种操作。方法：（1） 选中图像（2） 在图像属性面板中，使用热区工具（矩形、椭圆、多边形），在图像上划分热区。（3） 为绘制的每一个热区设置不同的链接地址和替代文字。3.2 超链接概述3.2.1 超链接的类型n 内部链接这种链接的目标端点是本站中的其他文档。利用这种链接，可以跳转到本站点其他的页面上。n 外部链接这种链接的目标端点是本站点之外的站点或文档。利用这种链接，
28、可以跳转到其他的网站上。3.2.1 超链接的类型n Email链接单击这种链接，可以启动电子邮件程序书写邮件，并发送到指定的地址。n 锚点链接这种链接的目标端点是文档中的命名锚记，利用这种链接，可以跳转到当前文档中的某一指定位置上，也可以跳转到其他文档中的某一指定位置上。3.2.2 链接路径（1）绝对路径：如果在链接中使用完整的URL地址，这种链接路径就称作绝对路径。路径同链接的源端点无关。（2）相对路径：相对路径可以表述源端点同目标端点之间的相互位置，它同源端点的位置密切相关。（3）基于目录的路径：所有的路径都是从站点的根目录开始的，它同源端点的位置无关。通常用一个斜线“/”表示根目录。3.
29、2.3创建超链接（1） 在文档窗口中选中想作为链接的文本或图片（2） 在属性面板链接一项的空白处填入链接的路径，或者单击图标，在弹出的【选择文件】对话框中，选定要链接的文档及采用哪种方式表达路径。（3） 链接的对象可以是多样的，如图片文件，电子表格，或者某个网站。 3.2.4 插入导航条导航条中按钮图像的状态根据浏览者的鼠标动作而改变。方法： 1、将光标放到要插入导航条的位置； 2、选择插入|图像对象|导航条命令 ； 3、或选择插入|常用|图像|导航条命令。3.3 实战演练每周星运第四章 表格处理教学内容：本章介绍了表格的基本操作及应用表格进行版式设计的方法和步骤，较详细地介绍了在标准、扩展、布局三种视图下表格的应用，从而使网页布局能够得心应手。教学重点：表格的基本操作应用表格布局（标准视图下）布局表格在表格及单元格中输入各种网页元素的方法表格格式化等操作方法。教学难点：三种布局模式的应用。教学方法：讲演法教学课时：4课时教学内 容与助学过程：4.1 创建网站相册初识表格4.1.1 案例综述使用Dreamweaver 8中提供的【创建网站相册】命令，自动生成足球明星页photo.htm。从中使读者初步认识表格的基本操作方法及其作用。4.1.2 案例分析使用【创建网站相册】命令创建的Photo.htm页是采用表格布局，将图片的缩略图排列在网页中的。n
