| 网站首页 | 学校概况 | 校园动态 | 校务公开 | 依法治校 | 德育专题 | 教学资源 | 师生风采 | 图片中心 | 党务公开 | 成绩查询 | 专题首页 | 学习十九大 | 贯彻八项规定 | 群众路线教育实践活动 | 反邪教专栏 | 校报副刊 | 艾滋病专栏 | 招生专栏 | 语言文字工作宣传专栏 | 
最新公告:

  没有公告

您现在的位置: 三河市第二中学 >> 专题首页 >> 教师培训 >> 培训教程 >> 正文
最近更新
更多内容
最新图文 更多内容

三河二中2016年高考喜报

行走在学习的道路上

高三接轨拯救方案

我校召开教育扶贫工作推进暨扶贫…
相关文章
没有相关课题
更多内容
Dreamweaver 8入门教程         ★★★
Dreamweaver 8入门教程
作者:佚名 文章来源:本站原创 点击数:2259 更新时间:2012/10/31 15:09:59

第四章 Dreamweaver 8入门教程

4.1 前言

学习做网页之前,我们首先要知道网页是什么,一般来说网页是用在网络上的htm文件,通过网页可以很方便的实现网络资源的共享,上网分为三个步骤。

1.输入正确的网址

1)在桌面上找到Internet Explorer ,双击打开,出现浏览器窗口,没经过修改的主页一般会自动进入微软的网站。

2)在菜单栏下方有一个长白条,里面有一串英文字母,后面是转到按钮,这就是地址栏。

3)在地址栏里点一下鼠标左键,删除里面的字符,输入自己的网址。网址一般是英文的,以http打头,一个冒号和两个斜杠(双斜杠),然后是www(三W),一个点,最后一般是com结尾,例如输入http://www.baidu.com

输完检查一下,没问题就按一下回车键,或者点一下右边的转到按钮,这时窗口右上角的小图标就开始运动,也就是正在搜索。

4)一切正常就会进入到百度搜索的首页。

2.找超级链接

网页上的内容是一页一页的,一般都藏在一个叫超链接的后面,所以第二步就是要找到超链接。

超链接有三个特点,首先文字的颜色是蓝色的,非常醒目;其次文字下面有一条下划线,便于查找;最关键的是当鼠标移动到有超链接的文字或图片上面时,指针会变成手形 ,这一点很重要。

找到超链接以后就可以单击鼠标左键,进入相应的内容了。

3.后退按钮

看完一页内容后如何返回呢?在窗口的左上角有一个后退按钮 ,点一下就可以回到上一页,这样就不会迷失方向了。

4.2 初步创建网页

4.2.1启动程序

Dreamweaver程序安装好以后,我们就可以使用它来制作自己的网页了。我们先来学习一下如何运行Dreamweaver

1.新建文件夹

找一个磁盘(如D盘)新建一个文件夹,文件夹名用自己名字的拼音字母,数量小于8个,方便记忆,以后自己制作的网页都存在这里。

其他文件夹名也可以,基本的要求为名称是英文,尽量不要用空格、汉字等非标准字符。

2.启动Dreamweaver

1)单击开始→程序→MacromediaMacromedia Dreamweaver 8”,

2)第一次运行会弹出一个选择面板,选默认的设计器确定即可。

3)接下来载入Dreamweaver,直到出现一个完整的窗口。

这个页面称作起始页,中间一列是新建项目,我们一般选第一个Html普通网页,新建一个空白文档。

4.2.2创建网页

我们通过一个练习来看看怎样制做一个网页。

1.启动Dreamweaver,在创建新项目中选择“HTML”,打开一个空白文档。

2.保存文件

1)单击文件→保存命令,弹出一个另存为对话框,“保存在”后面的位置里找到D盘,打开之前建好的文件夹。

2)将默认的文件名删除,改为index保存

注意,保存位置在哪个文件夹,文件名改成index

3)回到窗口,标签上的文件名变为 。在文档工具栏中找到标题,把标题改成青青草

4)这样我们就修改好了标题,同时按下CtrlS(CtrlS组合键),保存一下文件,标签上的星号消失。

3.输入内容

1)在工作区单击鼠标左键,光标在左上角闪烁,提示输入内容。

输入下面的三行文字,按CtrlS保存一下文件。

2)在文档工具栏中找到预览图标 ,打开下拉列表:

选择在IE浏览器中进行浏览。如果没保存文件,会弹出提示对话框,点即可。

看一下自己做的页面,稍稍简单些,后面我们会逐步学习网页的修饰。

4.3 网页的修饰(一)

4.3.1 新建站点

网页的内容除了文字以外,还有图片、音乐、动画等等,它们共同构成了一个网站,把它们联系在一起的目录页称作主页,下面我们通过一个练习来学习。

1.启动Dreamweaver,打开起始页,窗口右侧和下面都有侧边栏,侧边栏中间有个折叠按钮

2.创建新站点

在右侧的侧边栏中,单击“文件”面板上的管理站点链接。

弹出一个管理站点的对话框,未设置之前是空的,单击右上角的新建按钮,选择站点命令,弹出一个面板。

1)进行站点的创建步骤,站点的名字改为青青草,站点地址不变,单击下一步

2)第2部分,直接单击下一步进入第三页,这儿不需要服务器技术。

3)保存位置对话框,单击右侧的文件夹图标。

在弹出的文件夹浏览对话框中,找到D盘目标文件夹,单击右上角新建”按钮,新建一个文件夹,名称改成字母缩写。

打开qqc文件夹,选择

回到页面,单击下一步

4)在本地/网络上单击,在弹出的下拉列表中选择下一步

5)弹出总结页面,显示之前设置的情况,完成

6)这样就新建好了一个站点。

此时管理站点面板里出现一个站点,完成。在右侧的侧边栏中,也可以看到青青草站点。

   

4.3.2 编辑文字

网页的内容大部分是文字,文字的属性中包括字体、字号和颜色等,下面我们通过一个练习来学习。

1.启动Dreamweaver,打开一个空白文档,保存,将文件名改为index,位置保存在之前建好的站点中,把标题改为青青草主页,保存文件。

2.设置文字

1)输入下面的内容,保存文件。

2)设置文字格式,选中标题青青草,在属性面板中找到字体、大小、颜色 按钮。把文字设为黑体 “24”、绿色,标题一般要醒目些。

3)选中下面三行内容,把文字设为新宋体“18”、蓝色。

4)如果字体太少可以单击列表下面的编辑字体列表..”,添加其他字体。

在右侧“可用字体”列表中找到字体,单击“<<”按钮添加到左侧,单击“字体列表”左上角的加号按钮,即可添加字体。

5)文字设置好之后,属性面板样式下拉列表中会增加“STYLE2”,这是自动保存了字体、字号、颜色的样式表,下次可以直接用,不用再重新设了。

4.3.3 对齐和背景

这一节我们学习文字的对齐方式,以及背景色的设置方法,下面我们通过一个练习来学习。

1.启动Dreamweaver,打开一个空白文档,把标题改为对齐。以duiqi为文件名,保存文件,保存位置在我们建的站点文件夹里。

2.输入内容

1)输下面三行内容。

2)选中三行内容,在属性面板中,单击居中按钮

标题一般放在居中的位置,保存文件。

3.背景色

1)默认的背景色是白色,我们可以改成其他颜色。

2)在属性面板中找到页面属性..”按钮 ,单击,弹出对话框。

3)单击背景颜色按钮弹出调色板,选择淡绿色,确定。背景色就设好了。

保存文件,单击预览按钮 ,查看网页的效果。

4)插入背景图片的方法,在背景颜色按钮下面的背景图片中选择一幅图片。

4.4 网页的修饰(二)

4.4.1 插入图片

网页中除了文字以外,往往还有一些漂亮的图片,在Dreamweaver中如何插入图片呢?下面我们通过一个练习来学习。

1.启动Dreamweaver,打开一个空白文档,把标题改为插入图片。以tupian为文件名保存文件,保存位置在建立的站点中。

2.插入图片

1)右侧的侧边栏中,右键单击文件面板上的站点-青青草,选择新建文件夹命令,新建一个名为images的文件夹。

  

2)这个images文件夹主要用来存放图片,把要用的图片复制到这个文件夹中,也可以直接拖进去,图片的文件名不能以汉字命名。

3)单击常用工具栏中的插入图像按钮 ,弹出选择图片对话框。

注意上面的查找范围,应该是站点的文件夹,打开images文件夹,选择刚才复制进去的图片,确定

如果插入的图片不在站点内,会弹出一个复制的提示,单击

4)保存文件,单击预览按钮,查看图片的效果。

还有一种简单的插入图片的方法,直接把右侧站点里的图片拖到页面中要插入图片的位置,就可以了。

4.4.2 背景音乐

(注意:ESC停止音乐的播放,刷新重新播放)

这一节我们来学习如何设置背景音乐,放一首音乐在网页中,往往能给人带来另外的心情,常见的音乐格式有mp3wavwma等等,下面我们来看一个练习。

1.启动Dreamweaver,打开一个空白文档,把标题改为背景音乐。以yinyue为文件名保存文件,保存位置在建立的站点中。在右侧的站点中,新建一个名称为music的文件夹,用来存放声音文件,将准备做为背景音乐的声音文件拖放到这个文件夹里。

2.插入背景音乐

1)单击文档工具栏中的拆分标签,窗口分成两部分,上面是代码,下面是文档。

2)在代码窗口中,找到<body>标签,单击,回车,插入空行。

3)输入<bgsound src="music/1001.mid" loop="-1" />

输入的时候会有提示,里面的单词是代码标签,双引号里面是参数值,-1表示循环播放。

在文件名的标签上单击右键选择保存命令,单击预览按钮,试听背景音乐的播放,停止音乐可以按ESC键或单击浏览器工具栏上的停止按钮,单击“刷新”按钮重新播放。

4.4.3插入音乐

这一节我们来学习如何在页面插入音乐,通过播放器来播放和控制音乐,下面我们来看一个练习。

1.启动Dreamweaver,打开一个空白文档,把标题改为插入音乐。以chryy为文件名保存文件,保存位置在建立的站点中。在右侧的站点中,找到文件夹music,把要插入的声音文件拖放到这个文件夹里。

2.插入音乐

1)单击文档工具栏中的拆分标签,将窗口分成两部分。

2)在代码窗口中,找到<body>标签,单击,回车,插入空行。

3)输入下列代码:

<embed src="music/m1.wma" width="320" height="40"

controls="ControlPanel" loop="false" autostart="false"

type="audio/x-pn-realaudio-plugin" initfn="load-types"></embed>

输入的时候会有提示,里面的单词是代码标签,双引号里面是参数值,loop是循环的意思,autostart是自动播放,这儿都是false,也就是不用的意思。

保存文件,预览。单击播放按钮或停止按钮,试听音乐。

要播放其他音乐,只要修改src标签后面的音乐地址即可。

4.5 网页的修饰(三)

4.5.1 插入视频

这一节我们来学习如何在页面中插入视频,常见的视频格式有wmvavimpgrmvb等等,视频文件一般既有声音又有图像,因此也叫影片,下面我们来看一个练习。

1.启动Dreamweaver,打开一个空白文档,将标题改为插入视频。以chrshp为文件名保存文件,保存位置在建立的站点中。在右侧的站点中,新建一个名称为video的文件夹,用来保存视频文件。

2.插入视频

1)在文档工具栏中单击拆分标签,将窗口分成两部分。

2)在代码窗口中,找到<body>标签,单击,回车,插入空行,

3)输入下列代码:

<object id="WindowsMediaPlayer1" classid="clsid:6BF52A52-394A-11D3-B153

-00C04F79FAA6"

width="160" height="190" >

<param name="URL" value="video/zj.wmv">

<param name="rate" value="1" />

<param name="balance" value="0" />

<param name="currentPosition" value="0" />

<param name="defaultFrame" value />

<param name="playCount" value="1" />

<param name="autoStart" value="-1" />

<param name="currentMarker" value="0" />

<param name="invokeURLs" value="-1" />

<param name="baseURL" value />

<param name="volume" value="50" />

<param name="mute" value="0">

<param name="uiMode" value="mini" />

<param name="stretchToFit" value="-1" />

<param name="windowlessVideo" value="0" />

<param name="enabled" value="-1" />

<param name="enableContextMenu" value="-1" />

<param name="fullScreen" value="0" />

<param name="SAMIStyle" value />

<param name="SAMILang" value />

<param name="SAMIFilename" value />

<param name="captioningID" value />

<param name="enableErrorDialogs" value="0" />

</object>

采用复制粘贴的方法即可,里面修改的地方主要是蓝色部分,影片地址、宽度和高度,注意播放器有70的高度,因此整个高度是190,影片实际大小为160×120,在影片属性中可以查看到。

保存文件,预览。单击播放按钮,查看影片的效果。

4.5.2插入Flash

这一节我们来学习如何在页面中插入Flash动画,Flash动画格式有swfflv,下面我们来看一个练习。

1.启动Dreamweaver,打开一个空白文档,把标题改为插入Flash”,以chrflash为文件名保存文件,保存位置在建立的站点中。在右侧的站点中,新建文件夹swf,用来保存Flash动画文件。

2.插入动画

1)插入swf动画,在常用工具栏中,打开媒体按钮旁的向下箭头,选择第一项“Flash”

2)在弹出的对话框中,找到swf文件夹,选中wz文件,弹出属性框,确定

3)还可以插入flv视频,媒体→FlashVideo”,选择一个flv视频即可,完成后会自动生成两个swf文件,用来播放flv视频。

插入后,把下面的宽度和高度也填上,需要发布到网上才能播放。保存文件,预览,查看影片的效果。

4.6 网页的修饰(四)

4.6.1插入表格

这一节我们来学习如何在页面中插入表格,利用表格可以很好地布置页面,在表格单元中可以存放文字、图片、视频等等,每个单元都是一个独立的区域,下面我们来看一个练习。

1.启动Dreamweaver,打开一个空白文档,把标题改为插入表格。以chrbg为文件名保存文件,保存位置在建立的站点中。

2.插入表格

1)单击菜单插入→表格命令,弹出一个对话框,一般修改上面的两行,表格的行、列数和宽度。

2确定。插入一个3×3的表格。横着的是行,竖着的是列,每一个小格叫单元格。

 

第二列

第三列

第二行

 

 

第三行

 

 

3)单击表格的边框,可以选中整个表格,属性面板中显示的是表格的各个选项,边框为0的时候不显示边框线。

绿色的三角里有一个命令菜单,可以进行相关的操作。

4)单击单元格,属性面板显示的是单元格的选项。

单击菜单修改→表格命令,可以进行插入行、列等等关于表格的操作。

3.练习:插入一个4×3的表格,在每个单元格里输入一个成语。

保存文件,预览。查看表格的效果。

4.6.2超级链接

网页之间的跳转是通过超级链接来实现的,超级链接相当于一个路口标记,单击后可以进入。

超级链接一般具有三个特点:蓝色、下划线和手形标记,下面我们通过一个练习来学习。

1.启动Dreamweaver,选择起始页左侧打开最近项目中的“打开..”按钮,打开站点中的index文件。

将光标定位到最后,回车,另起一行,保存文件。

2.创建超链接

1)插入一个7行、1列,宽度200,边框粗细为0的表格。

2)表格的第一行里输入目录,第二行输入对齐和背景,第三行输入插入图片,第四行输入背景音乐,第五行输入插入音乐,第六行输入插入视频,第七行输入插入表格

行数不够,可以插入行,单击修改→表格→插入行命令。

3)选中第二行的文字和背景,单击右键,在菜单中选择创建链接,弹出浏览对话框。

4)在对话框中找到自己的站点,选择duiqi文件,确定。

在属性面板上,增加了一个属性,链接目标。

同样方法为其他行的文字创建相应的超级链接。

保存文件,预览。查看网页,单击各个超链接,查看是否能跳转到相应的页面,用后退按钮返回。

一个简单的网页就做好了,现在,你会了吗?试试看吧!

课题录入:system    责任编辑:system 
  • 上一篇课题:

  • 下一篇课题:
  •  
     

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 |
    廊坊网警 河北省三河市第二中学冀ICP备05011972号联系电话:0316-3312101 廊坊网警