项目二：网页编辑Dreamweaver

项目二

网页编辑Dreamweaver第一单元

Dreamweaver的基本概念本单元学习要点：1.Adobe

Adobe

DreamweaverCS5入门2.新建网页3.新建站点任务1

Adobe

DreamweaverCS5入门【任务描述】1.启动

Adobe

DreamweaverCS5｡2.认识

Adobe

DreamweaverCS5的界面｡3.了解

Adobe

DreamweaverCS5的窗口｡4.退出

Adobe

DreamweaverCS5｡【任务实现】1.启动

Adobe

DreamweaverCS5启动Adobe

DreamweaverCS5常用以下三种方法：（1）在操作系统窗口选择“开始”→“所有程序”→“Adobe”→“Adobe

DreamweaverCS5”命令。（2）双击桌面的Adobe

DreamweaverCS5快捷

图标。2.认识Adobe

DreamweaverCS5的界面（1）启动后出现“Adobe

DreamweaverCS5将其自身设置为以下文件类型默认编辑器”。（2）确定后出现“欢迎使用Adobe

DreamweaverCS5”对话框，在“最近使用项目”下列出了最近使用过的项目文件，如要再次打开点击项目文件即可。（3）如选择“打开项目”，则出现“资源管理器”窗口，可选择硬盘中已有的项目并将其打开。（4）如果新建网页，选择网页类型，点击“ＨＴＭＬ”后Adobe

DreamweaverCS5的界面｡图１-53.了解

Adobe

DreamweaverCS5的窗口

图１-64.退出

AdobeDreamweaverCS5完成所有的操作后，就需要退出

AdobeDreamweaverCS5。常用的退出操作有四种。（1）执行“文件”→“退出”命令，退出程序。（2）单击工作界面右上角的“关闭”按钮，关闭所有面板。（3）双击工作界面左上角的控制菜单按钮，关闭所有面板。（4）单击窗口左上角的控制菜单按钮，然后选择“关闭”命令。（5）按【Alt】+【F4】组合键或按【Ctrl】+【Q】组合键即退出程序。任务2

新建网页【任务描述】1.启动

Adobe

DreamweaverCS5｡2.保存文件｡3.输入内容｡【任务实现】1.启动Adobe

DreamweaverCS51）在操作系统窗口选择“开始”→“所有程序”→“Adobe”→“Adobe

DreamweaverCS5”命令点击“开始－所有程序－Macromedia－MacromediaDreamweaver8”2）在中间的“创建新项目”中点第一个HTML，打开一个空白文档；2.保存文件1）点菜单“文件－保存”命令，弹出一个“另存为”对话框，在上边的保存在长条中，找到D:盘，在中间打开自己的文件夹；

2）在下边文件名那儿把Untitled-1删除，改成

index

然后点右边的“保存”按钮；

这儿注意两点，一个是保存位置在自己的文件夹，一个是文件名改成index

3）回到窗口，这时候在标签上就有了文件的名称，然后在标签下面的文档工具栏中间找到“标题”；把标题改一下，这个网页内容是个人主页，把标题改成“美丽的草原我的家”

4）这样我们就修改好了标题，同时按下Ctrl和S键(Ctrl＋S组合键)，保存一下文件，标签上的星号消失；3.输入内容

1）在中间工作区里点一下鼠标，这是光标在左上角一闪一闪，提示输入内容；输入书上的内容，输完一行按一下回车键，输完按Ctrl＋S保存一下文件；2）在标签下边的文档工具栏中，找到一个球体的预览图标，点一下出来一个下拉列表，点第一个在IE浏览器中进行浏览，如果没保存，会出来一个提示，点“是”即可；任务3

新建站点

【任务描述】1.启动Adobe

DreamweaverCS5｡2.创建新站点｡【任务实现】１.启动Adobe

DreamweaverCS51）在操作系统窗口选择“开始”→“所有程序”→“Adobe”→“Adobe

DreamweaverCS5”2）在中间的“创建新项目”中点第一个HTML，打开一个空白文档；

２.创建新站点在右边的侧边栏中间，在文件面板上找到一个蓝色的“管理站点”链接，点一下；出来一个“管理站点”的对话框，里面现在还是空的，点右上角的“新建”按钮，选择“站点”命令，出来一个面板；（１）这时候就开始进行站点的创建步骤，把中间站点的名字改为“美丽的草原我的家”，第二行的本地站点文件夹，点一下右边的小包图标，找一下自己的文件夹点（２）在出来的文件夹浏览对话框中，找到D:盘自己的文件夹，这时里面是空的，我们要新建一个文件夹，点一下右上角的小包“新建按钮”，把文件夹的名称改成字母缩写；（３）打开这个新建的lx1文件夹，点右下角的“选择”按钮即可，注意这时候上边的位置里显示的是“lx1”。这时候返回到页面，中间显示的是我们刚才选择的保存文件夹(在开始的时候直接输入也可以)，点“选择”继续；（４）这时候就显示出来了自已的文件夹，点“保存”即可注意：1、站点也叫做根目录，是是一个文件夹，是网站的网页和所有素材存储的地方。2、创建站点:站点的名称用中文，站点的文件夹名称用英文。（５）这样就新建好了一个站点，注意选择文件夹那一步可以直接输入进去；这时候“管理站点”面板里头就有了一个站点，点“完成”返回，在右边的侧边栏中，也可以看到一个名为“美丽的草原我的家”的站点；第二单元

网页的背景与图片本单元学习要点：1.对齐和背景色2.插入图片任务1

对齐和背景色

【任务描述】1.启动Adobe

DreamweaverCS5｡2.输入内容3.对齐4.背景色【任务实现】１.启动Adobe

DreamweaverCS51）在操作系统窗口选择“开始”→“所有程序”→“Adobe”→“Adobe

DreamweaverCS5”2）在中间的“创建新项目”中点第一个HTML，打开一个空白文档；3）以

duiqi

为文件名，保存一下文件，保存位置在我们建的站点(lx1)文件夹里；2.输入内容1）输下面的三行内容，输完一行后，按一下回车键；画远看山有色，近听水无声。春去花还在，人来鸟不惊。3.对齐拖黑选中三行内容。第一种方法：点击“格式”菜单，选择“对齐”项，弹出子菜单。在子菜单中，选择段落的对齐方式即可设置。第二种方法：在下边属性面板ＣＳＳ中，找到“居中”按钮点一下，这样文字就自动排到中间的位置，一般标题放在居中的位置，保存一下文件；4.背景色1）默认的背景色是白色，我们可以改成其他颜色；2）在下边的属性面板中，找到“页面属性..”按钮，点一下出来一个面板；3）在分类里选择“外观（HTML）”，找到中间的“背景颜色”按钮点一下，在出来的调色板中，选择一个淡绿色，点“确定”背景色就设好了；调色板的右上角有三个按钮，第一个是返回“默认颜色”，第二个是“拾取颜色”，右边的三角按钮是一个菜单；保存一下文件，点“预览”按钮，看一下网页的效果；任务2

插入图片

【任务描述】1.启动Adobe

DreamweaverCS5｡2.插入背景图片3.插入图片【任务实现】１.启动Adobe

DreamweaverCS51）在操作系统窗口选择“开始”→“所有程序”→“Adobe”→“Adobe

DreamweaverCS5”2）在中间的“创建新项目”中点第一个HTML，打开一个空白文档；3）以

duiqi

为文件名，保存一下文件，保存位置在我们建的站点(lx1)文件夹里；２.

插入背景图片插入背景图片的方法，在背景颜色按钮下面的背景图片中选择一幅图片；１）在下边的属性面板中，找到“页面属性..”按钮，点一下出来一个面板2２）在分类里选择“外观（ＨＴＭＬ）”，找到中间的“背景图像”点浏览，在站点的文件夹内选择背景图片，点“确定”返回页面属性3）保存一下文件，点“预览”按钮，看一下网页的效果；3.

插入背景1）在右边的侧边栏中间，在文件面板中找到“站点－美丽的草原我的家”，瞄准敲右键，选“新建文件夹”命令，新建一个名为

images

的文件夹；2）这个images

文件夹主要用来放图片的，把要用的图片复制到这个文件夹中，也可以直接拖进去，图片的文件名必须是英文的；在右键菜单里有个“编辑”菜单，这里面有“拷贝、粘贴、删除、重命名”等命令；3）点菜单插入的“图像”，出现一个“选择图片”对话框，中间有一个文件夹images；注意上面的“查找范围”应该是站点的文件夹，中间是images文件夹，打开它，选择刚才复制进去的图片，点“确定”即可；如果插入的图片不在站点内，会出来一个复制的提示，这时候点“是”就可以了；4）保存一下文件，点预览按钮，看一下图片的效果；另外一种更简单的方法是，直接把右边站点里的图片拖到页面中，要插图片的位置，也可以插入图片；第三单元网页中的音乐本单元学习要点：1.背景音乐2.插入音乐任务1

背景音乐【任务描述】1.启动Adobe

DreamweaverCS5｡2.背景音乐【任务实现】１.启动Adobe

DreamweaverCS51）在操作系统窗口选择“开始”→“所有程序”→“Adobe”→“Adobe

DreamweaverCS5”2）在中间的“创建新项目”中点第一个HTML，打开一个空白文档；把标题改为“背景音乐”3）以

yinyu

为文件名，保存一下文件，保存位置在我们建的站点(lx2)文件夹里；4）点“文件－保存”命令，以

yinyue

为文件名保存文件，保存位置在建立的站点中；5）在右面侧边栏的站点中，新建一个文件夹，名称为

music

用来存放音乐，找到一首喜欢的歌曲，把它拖到这个文件夹里面；本课images文件夹中有一首1.mid文件可以作为练习；2、插入背景音乐

1）在标签下面的“文档”工具栏中点一下“拆分”标签，窗口分成两部分，上边是代码，下边是文档；2）在上面的代码窗口中，找到<body>标签，在它后面点一下鼠标，然后按一下回车键插入一个空行；3）切换到英文输入法状态，输入<bgsound

src="music/1.mid"loop="-1"/>输入的时候会有提示，里面的单词是代码标签，双引号里面是参数值，-1表示循环播放；在文件名的标签上敲右键选保存命令，保存一下文件，点预览按钮，听一下背景音乐的播放，停止音乐可以按ESC键或点浏览器工具栏上的停止按钮，点刷新重新播放；任务2

插入音乐

【任务描述】1.启动Adobe

DreamweaverCS5｡2.插入音乐【任务实现】１.启动Adobe

DreamweaverCS51）在操作系统窗口选择“开始”→“所有程序”→“Adobe”→“Adobe

DreamweaverCS5”2）在中间的“创建新项目”中点第一个HTML，打开一个空白文档；把标题改为“音乐”3）以

yinyu-2

为文件名，保存一下文件，保存位置在我们建的站点(lx2)文件夹里；4）点“文件－保存”命令，以

yinyue-2为文件名保存文件，保存位置在建立的站点中；5）在右面侧边栏的站点中，找到上次新建的文件夹

music

，找到一首喜欢的歌曲，把它拖到这个文件夹里面；【任务实现】本课images文件夹中有一首

m1

文件可以作为练习，它是mp3格式的；

2、插入音乐

1）在标签下面的“文档”工具栏中点一下“拆分”标签，窗口分成两部分，上边是代码，下边是文档；

2）在上面的代码窗口中，找到<body>标签，在它后面点一下鼠标，然后按一下回车键插入一个空行；【任务实现】3）切换到英文输入法状态，输入下列代码：输入的时候会有提示，里面的单词是代码标签，双引号里面是参数值，loop是循环的意思，autostart是自动播放，这儿都是false，也就是不用的意思；保存一下文件，点预览按钮，点左边的播放按钮，听一下悠扬的乐曲；停止音乐可以点播放器上的停止按钮，要播放其他音乐，只要修改src标签后面的音乐地址即可；第四单元网页中的视频本单元学习要点：1.插入视频2.插入flash任务1

插入视频

【任务描述】1.启动Adobe

DreamweaverCS5｡2.插入视频【任务实现】１.启动Adobe

DreamweaverCS51）在操作系统窗口选择“开始”→“所有程序”→“Adobe”→“Adobe

DreamweaverCS5”2）在中间的“创建新项目”中点第一个HTML，打开一个空白文档；把标题改为“插入视频”3）以

shipin

为文件名，保存一下文件，保存位置在我们建的站点(lx3)文件夹里；4）在右面侧边栏的站点中，新建的文件夹

video

，用来保存视频文件；本课video文件夹中有一个w1

文件可以作为练习，它是wmv格式的；2、插入视频

1）在标签下面的“文档”工具栏中点一下“拆分”标签，窗口分成两部分，上边是代码，下边是文档；

2）在上面的代码窗口中，找到<body>标签，在它后面点一下鼠标，然后按一下回车键插入一个空行；

3）切换到英文输入法状态，输入下列代码：