下载文档原格式
DREAMWEA VER 8.0 网页制作教案（二）邝翠珊cskuang@39322544-826复习：网页制作的一些常用功能：定义站点、数据表格的制作（学习表格的插入、合并拆分与嵌套）、利用表格布局网页、页面属性的设置、图片插入、文字的插入、日期的插入、插入电子邮件链接、flash动画插入、插入水平线、练习1、练习上节课的内容：建立站点（包括站点文件）、用表格布局网页、设置页面属性、图片、文字、日期、电子邮件链接、flash动画、水平线等的插入一、交换图象效果的制作：（插入→图像对象→鼠标经过图象）鼠标经过图象的效果是当鼠标指针经过或者按下按钮的时候，图像或按钮的形状或颜色就会发生变化，如图像变换，发光，或者阴影出现等等。
是网页变的生动活泼起来。
看dreamweaver学习网站导航演示：鼠标移动到图片上的时候，图片变成了另外一幅，当鼠标移开后恢复到原来的图象。
制作步骤：1、光标移动到欲插入的位置，点击菜单栏【插入】【图像对象】【鼠标经过图像】打开对话框：【图像名称】鼠标经过图像的名称，名称是自定义的，只要不与同页面另一个鼠标经过图像名称相同即可，也可以不填。
【原始图像】页面开始时显示的图像【鼠标经过图像】鼠标经过的时候显示的图像。
【替换文本】图像无法正常显示的时候出现的文本注释，也是图像正常显示时鼠标指向链接时的说明，也可以不填。
【前往的URL】点击鼠标后链接的目标。
【预载鼠标经过图像】浏览网页时两个图片都同时被下载，当鼠标经过时无需从网上下载，而是调用预先下载的图像，减少延迟，使效果平滑流畅。
二、了解简单的HTML：超文本标志语言，简要的介绍网页中使用的超文本标识语言HTML 的基本概念和用途通过一个简单的html示例（html.html）了解html的基本构成，介绍html的基本组成部分.如果深入了解可以参考：/teaching/htmlbook/练习2、试在练习1中建立的网页文件index.html中进行交换图像的练习。
Dreamweaver MX 2004简体中文版入门教程(一)之新功能简介Macromedia Dreamweaver MX 2004 ，是Macromedia 最新开发的的HTML编辑器，用于对Web站点、Web页和 Web应用程序进行设计、编码和开发。
其包含有一个崭新、简洁、高效的界面，且性能也得到了改进。
此外，还包含了众多新增的功能，改善了软件的易用性并使您无论处于设计环境还是编码环境都可以方便地生成页面。
新功能简介▲简洁高效的设计和开发界面：界面更易于使用，可使您的工作效率和工作质量均得到提高。
▲“插入”栏的改进：简洁高效的新外观，占用更少的工作区空间。
还新增加了一个“收藏”类别，您可以对“插入”栏进行自定义，将最常使用的对象放置在该栏上。
▲表格编辑可视化：在表格中进行列调整操作时能看到实际效果。
▲用户界面改进：可得到最大的可用工作区，更清晰地显示上下文和焦点，更易于使用和更具逻辑性。
▲起始页：使您能够访问最近使用过的文件，创建新文件和访问它的资源。
起始页会在您启动时或尚未打开文档时显示。
▲保存桌面选项：使您可以选择当您重新启动时重新打开您上一次使用的文档。
▲完全支持 Unicode：它支持 Internet Explorer所支持的所有文本编码方式。
您可以使用几乎所有您的系统中安装的语言字体，会正确地显示和保存这些字体。
▲安全 FTP：使您能够完全加密所有文件传输。
▲新式的页面布局和设计环境。
▲增强的 CSS 功能：提供了一个更为精巧的方法来进行样式设计及提高设计交互性。
▲动态跨浏览器验证：在您保存文档时自动检查当前文档的跨浏览器兼容性问题。
【其他软件】CuteFTP：是专业的FTP上传软件，用于往服务器端上传文件用。
Dreamweaver MX 2004 也有此功能，而且功能强大。
但是，不少人还是习惯用专业的FTP软件。
最终您还需要有一个网络空间，这可以通过向服务器申请便可获得，但现在大多数网络空间都要收费。
《网页设计与制作—Dreamweaver MX 2004、Fireworks MX 2004、Flash MX 2004课程网站》课件介绍《网页设计与制作》是我院高职计算机专业的核心课程，是我院本科非计算机专业学生的计算机公共基础课程的后续选修课程。
该课程主要讲授网站的建立与发布、网页的设计与制作、网页图形图像处理、Flash动画制作。
本课件是以计算机网络技术和多媒体技术为手段开发的课程网站.。
本课件设计制作了两个教学网站——『课堂教学网站』与『远程自学网站。
』（见图1）图1一. 课堂教学网站课堂教学网站适用于在多媒体教室或计算机房教师授课时使用。
该网站课件包括8个模块：（见图2）1. 多媒体网络授课教案：该课件将课程的全部内容制作成多媒体网页，教师在讲授过程中通过访问课程网站，打开多媒体网页，通过讲解、演示教案网页进行授课。
本课件对每章教案都设计了教学目标→范例预览→知识讲解→操作演示→课堂练习→要点总结→实验作业→单元测试8个教学环节。
2. 知识结构图与学习路径导航：本教程分别制作了Dreamweaver网页制作、Fireworks图像制作、Flash动画制作的知识结构图；并在每章教案中使用学习路径流程图进行导航。
学生通过这些结构图，可以较快地建构、掌握整个知识体系。
并方便学生在课后访问课程网站时根据自己的实际水平与学习需要自主快捷地获取知识。
图23. 实验指导：本课件根据各知识点的教学要求设计每次上机练习需要学生完成的实验，在课件中说明实验的制作方法、展示实验范例样本，提供实验素材下载、提供制作方法的动画演示。
学生通过访问课程网站可自主获取课程实验的全部相关信息与在线辅导。
4. 在线测试：为了使学生能够及时对所学的知识进行总结、复习与检测，本课件制作了在线测试系统（目前已制作了48套单元测试卷）。
根据每章内容的重点与知识点进行单元自测。
要求学生在完成每个单元的学习后，通过访问课程网站进行在线测试，测试系统进行自动评判并给出答案或试题分析。
FireworkMX2004教案第一章FireworkMX2004简介要想制作出一个生动、吸引人的网页，除了文字外，更需要图像、动画和交互式按钮。
网页中使用的图像必须短小精焊，为此你需要使用多种图像绘制和处理软件，但有了FireworkMX2004，就可以抛弃以往的多种绘图软件，大大简化了你的工作。
第一节界面FireworkMX2004的界面有点像PhotoShop，它的上方是包含6个菜单项的菜单栏，左边是绘图工具栏，提供了几十种工具，另外还有常用工具栏、功能面板等。
FireworkMX2004中所有的功能面板和工具栏都可以根据你的习惯任意拖动其位置。
第二节工作环境1、打开文件：用来打开一些已保存的FireworkMX2004文件。
2、影像大小：在此可以设置图像大小。
3、画布大小：在此可以设置画布（即图像的背景平台）的大小。
“锚点”选项用来设置图像和画布的相对位置。
4、画布颜色：在此可以设置不同的画布颜色。
选定“自定义”，可以在其左历的颜色列表中一种颜色。
5、剪裁工具：在工作区中拖动鼠标把想保留的图像部分框选出来。
然后双击选定区域即可把没选定的区域从图像中删除。
6、标尺：可在工作区的上方和左方添加一个标尺，为了能较准确的定位。
7、网络：插入网络、靠齐网络、编辑网络。
8、参考线：把网线去掉，然后拖动水平或垂直标尺都会产生参考线。
当图像靠近参考线时，就会自动贴近参考线。
9、显示比例、显示模式和页面预览：显示页面的比例大小。
第三节切割图片若一个图形文件太大时，最好把它分割成几个部分，这样可以提高下载的速度。
1、导入图片：在工作区中想插入一幅图片。
2、分割图片：此功能是在图片上进行分割图片。
3、测试效果：按F12键测试以下效果，会切换到IE窗口进行浏览。
通过Internet浏览，可以看到图片一块一块地被显示出来。
4、被分割图像的转存：因为导出的图片需要保存在表格中，而表格又是由HTML代码写成的，因此，导出的图片的时候就会导出相应的HTML代码。
DreamweaverMX 2004 经典教案
基础知识
Dreamweaver MX是美国著名的软件开发商macromedia公司推出最新的网页制作编辑软件,无论这个软件是在国内还是国外,它都是信受广大专业网页(web)开发人士推崇的软件.与Frontpage 2000不同的
是,Dreamweaver采用的是随机浮动面版的设计风格,对于我们初学者来我们感到很不适应,但如果当你习惯了以后,就会发现Dreamweaver的直观性.高效性是Frontpage 2000所无法比的,所以众多的设计人员采用Dreamweaver MX来设计专业性的大型网站和个人主页,把它列为了制作网页的首选工具。
在最新的MX版中，对Dreamweaver的代码控制和后台功能作了进一步的增强，它比原来的版式本功能得到了一个飞跃的发展，用Dreamweaver不仅可以制作网页，也可以开发大型的网站数据库系统，安照我们的使用也分得更专业，比如：设计者、代码编写者、开发者，作为我们来说，我们就是设计者，我们可心Dreamweaver来制作比较精美的网页，Dreamweaver对于DHTML（动态网页）功能支持也非常的良好，可以轻而易举地制作出很多比较眩目的互动页面动画，它与FLASH、FIREWORKS并称为网页制作的三剑客，最佳的一个梦幻组合。
Dreamweaver 的最新版本是Dreamweaver mx 2004版，但根据我们现大型网站还用的是Dreamweaver mx版的比较多，为了大家学完以后就能到各家的公司进行网页制作，我们现在讲得也是Dreamweavermx版的软件。
针对我们初学者来说，首先要面对一箩筐网页制作用的特殊的英文名词，这些专业的名词常常使我们在学习中陷入一种迷惘、恐惧与挫折中，下面我们看一下这些专业名词的解释：
WWW----- WWW是“World Wide Web”的缩写，通常翻译为“万维网”或“全球信息网”，它是一个在Internet支持之上的一种超大型的数据传输协议，我们可以将其视为Internet的操作系统，通过它们，我们可以向全世界人们传递各式各样的信息。
这些文件分布在世界各地的网站上，并按照相关关系链接起来。
用户可以通过安装在计算机上的浏览器查阅文件中的信息，并通过链接从一个文件跳到另一个相关的文件。
Web server-----网站服务器，就是存放网站的地方，通常它是一部通过ISDN直接链接到Internet的电脑上，而我们通常把所有设计完成的任何网页均会上传放在 server端的电脑上，这就是远程网站所在的地方。
Web服务器是在Web站点上运行的程序，它负责处理浏览器的请求，当你用浏览器请求Web站点上的
网页时，浏览器建立一个Web连接，服务器接受连接，向浏览器发送所要求的文件内容，然后关闭连接。
Web page -----web(万维网)page(页)---网页，在这个网页上可以放置许多信息，比如：文本信息、视频、声音、动画等多种信息元素的集合。
Home page-----home(家)page(页)------首页。
它就像我们去吃饭时的一个菜单，所有元素的主导信息都汇集在里面，我们单击每一个元素都可以打开相应的文件，打开的这个文件叫做子菜单，它又像一个导航器，比如：我们想下载一些软件就可以在这个主页里找到这个软件的元素按钮。
Web site----site(站点)----网站，以我的个人角度来看，它像是一个大型的图书馆，在里面可以找到不同信息，简单的说，网站它又是由许多的分网页面组成，单击相应的主页页上的元素可以打开下面的子页面，并且各个网页之间有相互链接的关系，这就是我们所谓说的网站。
Remote site-----Remote(遥远)site(站点)-----远程站点。
Local site--------local(当地、本地的意思)-----本地站点。
那远程站点和本地站点又是什么意思呢？现在我给大家举例说明：
网站它是由多个网页组成，并且每个网页之间有相互关连的关系，我们通通有机的软件把这些网页边接到一起，就构成了网站，首先每个网站的好坏与我们设计者有很大的关系，通常制作的网页用的软件有网页三剑客、3D MX、SWISH文字动画制作、COOL 3D文字特效、Frontpage 2000等软件，我们把网页做好以后，存放在自己的计算机里，也可以说成是一个标本，然后每个人都必须在网上申请个空间。
通常申请空间有两个方法：
∙去买空间（每年大约要600---800之间）
∙在网上申请免费的个人空间，但它根本不太稳定，好的情况下让你每一个月修改一次，坏的让你存放一个月就被删除掉了
我们申请完成空间怎样上传呢？
这时我们就要通过FTP把本机上做好的网页上传到我们申请好的空间里面，我们可以把本地计算机称为本地站点，那么什么是远程站点呢，它就好比我们在网络上申请的个人空间一样，它是由一些厂商专门做的
服务器，也是一台计算机，它主要是代理上传网页的，也就是存放上传网页的地方，我通过在Internet浏览器中输入网址，就可以查看到我们制作的网站，即为远程站点。
∙申请免费网页空间
(三个星期免费使用)
网易（免费10m的空间）
部分免费主页资源
免费主页空间：网易虚拟社区（）；
广州视窗SuperCool（/supercool/）
网界（茂名信息港）（/page100/index.asp）
统计：易数（）
中文热讯（）
邮件列表：博大邮件列表系统（）
通易（http://www.e－）
留言簿/论坛：中文热讯（）
商都个人网（)
夕子在线--最新国内免费空间！
/xizi/bbs/list.asp?boardid=22
∙设置网站
各项条件兼容以后，我们可以开始进行网站设置了：
本地网站（local site）与远程网站(romote site)的设置，要注意的是两者是无须同时设置的，我们在开始时只需本地站点即可：
远程站点是到要真正将网页上传时才需要用到的。
制作根目录：
o在盘符当中新建一个作为根目录的文件夹，并进行命名。
要注意的是：
▪严禁使用中文，或其他双位字符
▪严禁使用空白健
▪最好不要全部使用纯数字
▪最好不要使用英文大写
▪严禁使用特殊符号，除了下划线（_）和连接线（-）
▪文件的扩展名用*.htm,不要用*.html
总而言之，如果你用了这些中文名字或带有特殊双位字符名字，它在你的本机上可以显示，但以上传到服务器上时，就会出现错误的信息，服务器不认当前的名字，以乱码显示，所以这一点一定要必免。
o把所有的网页文件放置在这个根目录之内，在这个根目录里面我们可以再创建其它的文件夹，来放置其它的文件，这一项设置并非必须的，只是为了网站文件便于管理。
▪images-------用来放置网站中使用的图片文件，这些文件通常是photoshop 和
fireworks mx所产生的gif图片，但里面不含首页。
▪swf----------用来存放flash所产生的各式文件
▪movie-------用来放置网站中使用的影片
▪sound--------用来放置网站中使用的声音
▪download-------用于放置网站中提供浏览者下载的文件
注意：
根目录中该建立哪些文件夹，完全是在有系统管理文件的前提之下，由我们自己来决定的：
当同类文件多到一个文件夹很难管理的时候，你可以再往下一层建立所需的文件夹。
∙制作网站的站前准备工作
o明确目标
▪做什么样的网站，才能吸引许多的人来浏览，目的是来干什么的？
▪确定网站的类别和风格，
类别总体可分为两大类：
<a>商业网站：宣传自己的商品或服务，树立形象。
<b>个人网站：展现自己的设计作品、个人爱好、兴趣。
风格要注意的是：
首页的重要性，一般首页的设计原则是：
<a>精简，醒目，一目了然
<b>速度：图片越大，颜色越深，打开页面的时间越长
<c>颜色方案：基色，重点色的调配
<d>文本方案：宋体，黑体，楷体------gb2312(简体中文)
∙搜索大量的资料，（公司信息、文本信息、图片、声音）
报纸，杂志，光盘，网络收集等等。
∙写策划书，计划网站制作内容
网站的内容取决于建站的目的，对个人网站来说，一般要考虑以下两个问题：
▪个人主页的主题，要小而精
▪网站的内容最好是自己要擅长或喜爱的，
▪网站的组织结构的安排
∙制作
∙在浏览器当中测试
∙完成以后，购买空间，上传网页。
总结一下创建网页的步骤。
