Dreamweaver CS3网页制作-电子教案.pptx
《Dreamweaver CS3网页制作-电子教案.pptx》由会员分享，可在线阅读，更多相关《Dreamweaver CS3网页制作-电子教案.pptx（230页珍藏版）》请在冰点文库上搜索。
第1章网页制作基础知识,目录,前进,结束,后退,本章导读本章任务知识细目上机实训,本章导读,本章主要介绍了网站、网页的基本概念、WWW服务的工作原理、DreamweaverCS3的工作界面组成、HTML文档的基本结构和常见的HTML标记。
目录,前进,结束,后退,本章任务,了解网站、网页的基本概念、WWW服务的工作原理；熟悉DreamweaverCS3的工作界面、文档窗口视图方式、面板组的基本操作；掌握DreamweaverCS3的属性面板和文档工具栏的作用；掌握HTML文档的基本结构，学会使用HTML源代码制作简单网页的方法。
目录,前进,结束,后退,知识细目,1.1网页基础知识,1.2DreamweaverCS3的工作界面,1.3HTML语言的基础知识,目录,前进,结束,后退,Internet：
是一个全球性的计算机互联网络，中文名称为“国际互联网”或“因特网”，如下图所示。
Internet示意图,1.1网页基础知识,目录,前进,结束,后退,网站：
指在网络上，根据一定的规则，使用网页开发软件制作的用于展示特定内容的相关网页的集合。
网页：
一般又称作HTML文档，可以在互联网上传输，能被浏览器识别和翻译成页面并显示出来。
网站、网页、主页之间的关系网站是若干网页的集合,包括主页和其他网页。
主页是指在浏览器的地址栏中输入网址后默认显示的页面，是网站的索引页，其他网页通过超链接与主页相连。
目录,前进,结束,后退,1.1网页基础知识,WWW服务WWW含义为“全球网”或“万维网”，它以HTTP为基础，提供面向Internet的信息查询服务，可以让用户使用统一界面的信息浏览系统查询Internet上的各类信息，其原理如下图所示。
目录,前进,结束,后退,WWW服务的基本原理,1.1网页基础知识,DreamweaverCS3的启动界面,打开最近编辑,过的网页文件,新建网页文件或其他对象,选用已有的范例创建CSS样式表等网页文件,1.2DreamweaverCS3的工作界面,目录,前进,结束,后退,DreamweaverCS3的工作界面,目录,前进,结束,后退,菜单栏,目录,前进,结束,后退,“文件”：
提供新建、打开、保存、预览、转换文档格式等命令。
“编辑”：
提供用于基本操作的标准菜单命令。
“查看”：
用于切换文档的各种视图，显示或隐藏各种页面元素。
“插入记录”：
向页面中插入各种页面元素，创建超链接。
“修改”：
用于设置页面属性及更改选定页面元素的属性。
“文本”：
用于设置文本及段落的格式。
“命令”：
提供了对各种命令的访问。
“站点”：
提供了创建、编辑站点的命令。
“窗口”：
用于设置工作区布局和各种面板的打开和隐藏。
插入栏,目录,前进,结束,后退,“常用”类别：
用于创建和插入最常用的对象。
“布局”类别：
用于插入表格、div标签、框架和Spry构件。
还可以选择表格的两种视图：
标准（默认）视图和扩展视图。
“表单”类别：
包含一些按钮，用于创建表单和插入表单元素。
“数据”类别：
可以插入Spry数据对象和其它动态元素。
“Spry”类别：
包含一些用于构建Spry页面的按钮。
“文本”类别：
用于插入各种文本格式和列表格式的标签。
“收藏夹”类别：
用于将最常用的按钮分组和组织到某一公,文档工具栏,目录,前进,结束,后退,“文档标题”：
显示当前网页的标题。
新建文档时，默认的网页标题是“无标题文档”。
“文件管理”：
显示“文件管理”菜单，包括上传、下载等命令。
“在浏览器中预览/调试”：
选择一种浏览器预览或调试文档。
“可视化助理”：
用户可以使用各种可视化助理来设计页面。
“检查浏览器兼容性”：
用于检查CSS是否对各种浏览器均兼容。
“文档”窗口显示当前打开的文档，用户在这里进行网页的编辑制作，分为“代码”视图、“设计”视图和同时显示“代码”视图和“设计”视图的“拆分”视图三种视图模式。
文档窗口,目录,前进,结束,后退,标签选择器标签选择器位于状态栏的最左边，以HTML标记显示页面对象信息，通过它可以选择各种页面元素。
状态栏,目录,前进,结束,选取工具：
用于选取“文档”窗口内的对象。
手形工具：
用来移动对象的位置。
缩放工具：
增大或减小窗口的显示比例。
窗口大小：
显示当前文档窗口的大小，以像素为单位。
文件大小和估计的下载时间：
显示页面的预计文档大小和预计下载时间。
后退“属性”面板用于查看和编辑当前选定对象（如文本、图像等）,的各种属性。
不同页面元素对应的的“属性”面板也不同。
属性面板,打开属性面板的方法,选择“窗口”“属性”,命令,按Ctrl+F3快捷键,目录,前进,结束,后退,面板组,DreamweaverCS3的面板组中包含许多面板，每个,面板都可以展开或折叠，如右图所示，关闭或打开面板可以通过“窗口”菜单来完成。
在调整网页中一些对象的位置和大小时，利用Dreamweaver,CS3提供的标尺和网格工具，可以使操作更加准确。
标尺和网格只在网页文档窗口内显示，在浏览器中不会显示。
选择“查看标尺显示”命令，可打开标尺。
选择“查看网格设置显示网格”命令可打开网格。
标尺和网格,目录,前进,结束,后退,1.3HTML语言的基础知识,HTML文档基本结构头部信息正文主体部分,用HTML语言制网页的作两种方法,记事本,Dreamweaver、FrontPage等软件,HTML语言HTML语言即超文本标记语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
目录,前进,结束,后退,HTML常用标记标题标记格式：
网页的标题说明：
该标记在标记中，所包含的文字将出现在浏览器的标题栏上。
主体标记格式：
主体内容说明：
包括所有主体内容，可以设置页面的背景颜色、背景图像、文字颜色等属性。
目录,前进,结束,后退,提示,在HTML文档中，所有的标记都要用括号括起来，如、。
HTML标记不区分大小写。
标记中如果包含多个参数，各参数之间用空格分隔，参数位置不受限制。
（3）段落标记格式：
段落文本,说明：
用来划分段落，在该标记中可以输入一段文字。
换行标记格式：
说明：
用来标记一个换行动作，换行后的内容仍属于同一段落。
水平线标记格式：
说明：
在页面中插入一条水平线，通常用于分割文档。
图像标记格式：
说明：
在页面中插入一幅图像。
目录,前进,结束,后退,（7）超链接标记格式：
文本或图像,说明：
为标记中的文本或图像添加超链接目标，浏览网页时单击可打开指定的目标文件。
（8）表格标记表格标记由表格标记、行标记和单元格标记3部分组成。
表格标记行标记单元格标记,目录,前进,结束,后退,上机实训,实训1：
在记事本中创建如图1所示的网页，保存在D:
chapter1文,件夹中，网页文件名为lx1.html。
实训2：
在DreamweaverCS3打开D:
chapter1lx2.html网页文件，在“代码”视图中修改源代码，完成以下操作。
将页面背景颜色设置为“#FF99FF”。
将“太平洋电脑网”链接到http:
/。
将表格设置为居中对齐。
为图像添加注释文本“笔记本电脑”。
修改网页标题为“首页”。
图1lx1.html,图2lx2.html,目录,前进,结束,后退,目录,前进,结束,后退,本章导读本章任务知识细目上机实训,第2章站点的创建与管理,本章导读,前进,结束,后退,本章主要介绍了网站的开发流程、本地站点的创建及站点管理，网页文件的创建、保存、预览等基本操作。
目录,本章任务,前进,结束,后退,掌握站点的创建方法；,了解网站的开发流程；,学会网页文件的新建、保存、预览等操作。
掌握站点的编辑、导入和导出等操作；,目录,前进,结束,后退,知识细目,创建本地站点,网站规划创建站点站点的分类,使用“文件”面板,删除站点,导出站点导入站点,2.3管理站点编辑站点,2.4操作站点文件创建网站目录结构,预览文档,保存文档,新建网页文件,设置首页文件,目录,2.1网站规划,网站的开发流程:
网站规划设计,网站发布和更新维护,网站创建及网页制作,前进,结束,后退,网站的规划流程:
确定网站的主题,收集素材,规划网站的目及目栏录结构,确定网站的风格,目录,2.2创建站点,按站点的交互性,动态站点,站点的分类概念：
站点可以简单地理解为存放网页及各种素材的文件夹。
本地站点按地理位置远程站点站点的分类静态站点,前进,结束,后退,目录,前进,结束,后退,创建本地站点,选择“站点新建站点”命令,输入站点的名称,选择如何连接到远程服务器,选择本地站点文件夹,选择服务器技术,目录,2.3管理站点,前进,结束,后退,目录,选择“站点管理站点”命令，或在“文件”面板的下拉列表中选择“管理站点”命令，打开“管理站点”对话框，如下图所示。
“管理站点”对话框,编辑站点,选择“站点管理站点”命令，打开“管理站点”对话框。
选择编辑的站点，单击“编辑”按钮，弹出“站点定义”对话框。
选择“基本”选项卡，可对站点基本信息进行修改。
选择“高级”选项卡，可对站点信息进行更为详细的修改。
前进,结束,后退,目录,修改站点基本信息,修改站点详细信息,前进,结束,后退,本地站点站点定义文件,导出,导入,站点的导入和导出,提示在更换一台机器继续网站开发时，通常先将本地站点导出到站,点定义文件中，然后在另一台机器上将站点信息导入。
站点定义文件的扩展名为.ste。
删除站点选择“站点管理站点”命令，打开“管理站点”对话框，选择要删除的站点，单击“删除”按钮。
提示站点被删除后，只是删除了站点的定义信息，硬盘中相应位置的文件和文件夹并不会被删除。
目录,2.4操作站点文件,前进,结束,后退,创建网站目录结构在“我的电脑”或“资源管理器”中创建。
在“文件”面板中选择站点名称或父级文件夹，右单击，在弹,出的快捷菜单中选择“新建文件夹”命令，如下图所示。
目录,在“文件”面板中创建目录结构,前进,结束,后退,提示,建立网站目录结构时要注意以下问题：
不要将所有文件都存放在根目录下，以免造成文件管理混乱。
按栏目内容建立子目录。
在每个栏目目录下都建立独立的images目录保存图像资源。
目录的层次不要太深，建议不要超过3层。
目录使用英文名称，不要使用中文名称。
不要使用过长的目录名称。
新建网页文件使用启动界面创建网页。
使用“文件”面板创建网页。
在“文件”面板中选择站点，右单击，在弹出的快捷菜单中选择“新建文件”命令，输入文件的名称，按Enter键。
使用菜单命令创建网页。
选择“文件新建”命令，打开“新建文档”对话框，选择“空白页HTML”选项，在“布局”列表中选择“无”，单击“创建”按钮。
目录,前进,结束,后退,根据不同服务器的命名要求，网页文件名通常使用小写英文、阿拉伯数字以及符号的组合，不能使用空格、特殊字符、中文等，否则在显示时会出错，因为很多服务器不支持中文。
提示,网址后网,设置首首页，站自动打开的在“文件,的快捷菜,单中选择“设成首页”命令。
目录,前进,结束,后退,保存文档,选择“文件保存”命令,按Ctrl+S快捷键,提示如果对打开的文档进行了修改，但尚未保存，文件名后将自动添加一个“*”，保存后“*”将消失。
预览文档,选择“文件在浏览器中预览IExplore”命令单击“文档”工具栏上的“在浏览器中预览/调试”按钮，选择“预览在IExplore”按F12键,目录,前进,结束,后退,“文件”面板的基本操作,双击网页文件打开文件,右单击网页文件，选择“打开”命令,目录,“文件”面板,“文件”面板工具栏,前进,结束,后退,移动文件（夹）,右单击，选择“编辑剪切”，在目的位置右单击选择“编辑粘贴”,直接用鼠标拖动,删除文件（夹）,右单击，在快捷菜单中选择“编辑删除”命令,按Delete键,创建文件或文件夹,在“文件”面板中，选择一个文件（夹）,输入名称,右单击选择“新建文件（夹）”,目录,前进,结束,后退,实训1：
新建一个以自己姓名命名的个人站点，该站点使用“ASPJavascript”服务器技术,，站点保存在“D:
ktsjsite”文件夹中，使用“文件”面板新建首页文件“index.html”和图像文件夹“images”，在“我的电脑”中查看相应目录的变化。
实训2：
将上题中创建的站点使用“管理站点”功能将其导出，将导出的站点定义文件通过网络或移动存储设备拷贝到其他计算机中，使用“管理站点”功能将其导入。
实训3：
新建站点“奥运资料”，站点保存在“D:
ktsjaytp”文件夹中,将该站点中的beijing.html改名为index.html，并浏览该网页。
实训4：
删除站点“奥运资料”中的lx.html和wj.html文件，并将fnll.jpg文件移动到image文件夹中。
上机实训,目录,本章要点本章导读本章任务上机实训,第3章网页的基本操作,本章要点,文本的输入和编辑文本的输入文字的换行插入空格文本的属性设置插入水平线页面设置“页面属性”对话框的打开页面属性对话框的设置,本章要点,3.3网页图像格式GIF图像JPG/JPEG图像PNG图像,图像的插入设置图像属性,本章要点,插入Flash动画插入Flash动画文件设置透明背景插入Flash按钮插入其他多媒体元素插入音频文件插入视频文件超链接的类型链接路径链接类型,本章要点,3.9创建各种超链接文本超链接图像超链接锚点超链接电子邮件超链接空链接文件下载链接脚本链接,本章导读,本章介绍DreamWeaver建立网页的基本操作。
主要包括文本的输入和编辑方法；图像的插入和属性设置；Flash动画和其他多媒体元素的插入；各种超链接的建立方法。
本章任务,学会文本的输入方法；学会文本的属性设置；学会页面属性的设置；学会图像的插入和属性设置；能插入Flash动画、音频和视频文件；了解超链接的各种类型；能建立各种类型的超链接。
3.1文本的输入和编辑,1文本的输入直接通过键盘输入文本。
在其他应用程序中，选择文本，按Ctrl+C键复制，切换到DreamWeaver文档窗口,选择菜单“编辑粘贴”命令（或按Ctrl+V键）复制文本。
选择菜单“文件导入word文档”命令，弹出“导入Word文档”对话框，选择要导入的Word文，单击“打开”按钮，将该word文档中的全部文本添加到文档窗口中。
文字的换行强制换行有段落换行和换行符换行两种方式。
段落换行在换行位置按Enter键，会自动添加段落标记和，生成新的段落，并且在两段之间会空出一行。
换行符换行按Shift+Enter键。
选择菜单“插入记录HTML特殊字符换行符”命令。
选择插入栏“文本”类别中的按钮，在下拉菜单中选择“换行符”命令。
在代码视图窗口中，输入换行代码标记。
3.1文本的输入和编辑,3.1文本的输入和编辑,3插入空格按Ctrl+Shift+Space键。
选择菜单“插入记录HTML特殊字符不换行空格”命令。
选择插入栏“文本”类别中的按钮，在下拉菜单中选择“不换行空格”命令。
在代码视图窗口中，输入空格代码。
切换中文输入法为全角状态，按空格键输入。
4文本的属性设置设置文本格式，需先选中文本，出现如图文本属性面板，可以对文本进行相应的属性设置。
“文本属性”面板,
（1）设置文本字体设置文本字体，先选择要设置字体的文本，然后在文本属性面板的“字体”列表中选择合适字体类型。
DreamWeaver中默认的是宋体字，“字体”列表默认显示的是英文字体类型，若设置其他中文字体，要先将中文字体类型添加到字体列表中，方法是：
单击文本属性面板中“字体”列表按钮，选择“编辑字体列表”命令，弹出“编辑字体列表”对话框。
在“可用字体”列表中选择要添加的字体，双击鼠标或单击按钮，将其添加到“选择的字体”列表中。
字体添加完毕后，单击“确定”按钮。
3.1文本的输入和编辑,“编辑字体列表”对话框,设置文字大小在属性面板的“大小”列表中选择相应的大小级别和单位，可以更改选择文字的大小。
设置文本颜色系统默认文本颜色是黑色，要设置文本其他颜色，先选择文本，单击属性面板中的，在颜色拾取器中选择颜色，或在右边的文本框中输入颜色的名称或16进制代码，例如：
red或#FF0000。
颜色拾取器,3.1文本的输入和编辑,“水平线属性”面板,插入水平线创建水平线光标定位于需要插入水平线的位置，选择菜单“插入记录HTML水平线”命令。
修改水平线选择水平线，窗口下方出现如图3-14所示的属性面板，通过属性面板，可以设置水平线的一些属性。
3.1文本的输入和编辑,设置水平线颜色。
右击水平线，在弹出菜单中选择“编辑标签”命令，打开“标签编辑器”对话框。
选择“浏览器特定的”选项，单击，在颜色拾取中选择合适颜色，单击“确定”按钮。
3.1文本的输入和编辑,“标签编辑器”对话框,3.2页面属性,1“页面属性”对话框的打开选择菜单“修改页面属性”命令。
按Ctrl+J键。
右击文档窗口空白处，在弹出的菜单中选择“页面属性”命令。
单击属性面板中按钮。
2页面属性对话框的设置“页面属性”对话框共有五种分类：
“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”，其中常用的是“外观”、“链接”和“标题/编码”三个类别。
（1）外观在“外观”选项中可以设置页面的默认字体、背景颜色和页面边距等。
3.2页面属性,“外观”对话框,
（2）链接在“链接”选项中可以设置链接的字体、颜色和下划线样式等，如图所示。
“链接”对话框,3.2页面属性,（3）标题/编码在“标题/编码”选项中可以设置网页标题和编码类别，如图所示。
“标题/编码”对话框,3.2页面属性,3.3网页图像格式,GIF图像GIF的含义是“图像互换格式”。
GIF文件不属于任何应用程序，目前几乎所有相关软件都支持GIF图像文件。
GIF格式图像可以制作成GIF动画。
GIF文件的缺点是最多只能使用256种颜色，适合存储色调不连续或具有大面积单一颜色的图像，例如按钮、图标、徽标或其它具有统一色彩和色调的图像。
JPG/JPEG图像JPEG的含义是“联合图像专家组”，文件扩展名为“.jpg”或“.jpeg”。
JPEG格式可以支持24位真彩色，普遍应用于存储连续色调的图像。
JPEG格式可以支持有损或无损压缩，是可以把文件压缩到最小的格式。
JPEG格式压缩的主要是高频信息，能用较大的压缩比保存颜色丰富的图像，适合应用于互联网，可减少图像的传输时间，目前各类浏览器均支持JPEG这种图像格式。
3PNG图像PNG的含义是“可移植性网络图像”，是网络接受的新型图像文件格式。
PNG能够提供长度比GIF小30的无损压缩图像文件，但与JPEG相比，压缩量较少，它同时提供24位和48位真彩色图像支持以及其他诸多技术性支持。
由于PNG非常新，所以目前并不是所有的程序都可以用它来存储图像文件，Photoshop可以处理PNG图像文件，也可以用PNG图像文件格式存储。
文件必须具有.png文件扩展名才能被Dreamweaver识别为PNG文件。
3.3网页图像格式,3.4图像的插入,
（1）将光标定位到窗口中要插入图像的位置，执行以下操作之一，打开“选择图像源文件”对话框。
选择菜单“插入记录图像”命令。
选择插入栏“常用”类别中的“图像”按钮。
按Ctrl+Alt+I键。
“选择图像源文件“对话框,3.4图像的插入,在“选取文件名自”选项中选择：
文件系统：
选择一个图像文件，一般情况应选择此选项。
数据源：
选择一个动态图像源。
选择要插入的图像文件，单击“确定”按钮。
如果图像文件不在站点文件夹中，会提示用户将文件保存到站点文件夹中。
弹出如图所示的“图像标签辅助功能属性”对话框，在“替换文本”和“详细描述”文本框中输入值，然后单击“确定”按钮。
“图像标签辅助功能属性”对话框,3.5设置图像属性,单击选择图像，窗口下方会出现图像属性面板，可以利用属性面板设置图像的属性。
“图像属性”面板,插入Flash动画文件在“文档”窗口的“设计”视图中，将光标定位在要插入动画的位置，然后执行以下操作之一：
选择插入栏“常用”类别中的“媒体”按钮，在下拉菜单中选择“Flash”命令选择菜单“插入记录媒体Flash”命令。
按Ctrl+Alt+F键。
（2）弹出“选择文件”对话框，选择一个Flash文件（扩展名为.swf），单击“确定”按钮。
若Flash文件不在当前站点文件夹中，需将文件复制到站点文件夹中，完成后在“文档”窗口中出现Flash占位符，大小和Flash动画的原始尺寸相同。
3.6插入Flash动画,“参数”对话框,3.6插入Flash动画,设置透明背景在“文档”窗口的“设计”视图中，选择插入的Flash占位符，打开Flash属性面板。
单击编辑参数按钮，出现参数对话框。
单击“添加”按钮，输入如图所示参数，单击“确定”按钮。
“插入Flash按钮”对话框,3.6插入Flash动画,插入Flash按钮在“文档”窗口中，将光标定位到要插入Flash按钮的位置，然后执行以下操作之一：
选择插入栏“常用”类别中的“媒体”按钮，在下拉菜单中选择“Flash按钮”命令选择菜单“插入记录媒体Flash按钮”命令。
（2）弹出如图所示对话框，完成相应设置，单击“应用”或“确定”按钮，将Flash按钮插入“文档”窗口中。
试,插入音频文件在“设计”视图中，将光标定位到要插入音频文件的位置，然后执行以下操作之一：
选择插入栏“常用”类别中的“媒体”按钮，在下拉菜单中选择“插件”命令。
选择菜单“插入记录媒体插件”命令。
在选择文件对话框中选择要插入的音频文件，单击“确定”按钮。
在文档窗口中出现，表示音频文件已经插入到当前网页中，可以单击属性面板中的按钮听。
3.7插入其他多媒体元素,音频播放控件,插入视频文件目前网页可用的视频文件类型也有多种，有Flash视频，也有非Flash视频，插入视频的方法也有多种，常见的操作是：
将视频文件拷贝到站点文件夹。
在“文档”窗口中输入视频名称，并选中。
单击属性面板的链接框右侧的浏览文件按钮，浏览选择站点中的视频文件。
3.7插入其他多媒体元素,3.8超链接的类型,链接路径绝对路径绝对路径是指被链接目标对象的完整路径，包括服务器协议名称、主机名称、文件夹名称和文件名称，其格式为：
传输协议：
/服务器地址：
通讯端口/文件位置/文件名。
例：
http:
/,对路径（2进）行链接。
相对路径,相对路径是以当前文件所在路径为起点，到被链接文件经由的路径。
要链接到同一目录下的文件，只需输入要链接文件的名称。
要链接到下级目录中的文件。
需先输入目录名，然后加“/”，再输入文件名。
要链接到上一级目录中文件，则先输入“./”，再输入文件名。
3.8超链接的类型,（3）根路径根路径是从站点的根文件夹到文档的路径。
根路径目录地址的书写也很简单，首先以一个斜杠开头，表示站点的根文件夹，然后书写文件夹名，最后书写文件名。
如果根目录要写盘符，就在盘符后使用“”。
如：
/lx/images/ss.jpgd/lx/images/ss.jpg2链接类型根据链接使用的对象不同，可将超链接分为：
文本链接、图像链接、锚点链接、电子邮件链接、空链接、文件下载链接、脚本链接等。
3.9创建各种超链接,文本超链接利用属性面板创建在“文档”窗口中选择文本。
在属性面板中执行下列操作之一：
单击“链接”框右侧的文件夹图标，浏览选择目标文件。
在“链接”框中直接键入文档的路径和文件名。
单击“链接”框右侧的指向文件图标，拖动鼠标到右侧文件面板中相应的文件。
在属性面板“目标”列表框中选择文档的打开方式：
_blank：
将链接的文档在一个新的浏览器窗口打开，原来打开的浏览器窗口不变。
_parent：
将链接的文档在该链接所在框架的父级框架或父级窗口中打开。
_self：
将链接的文档在当前的浏览器窗口中打开。
该目标是系统默认的，因此不需要指定它。
_top：
将链接的文档在整个浏览器窗口中打开，从而删除所有框架。
（2）利用超链接命令创建将光标放在文档中希望建立链接的位置。
通过下列
升级会员 