教你怎么用Dreamweaver制作网站 优质课件_图片/文字技巧_PPT制作技

Dreamweaver网页制作 学习教程2011年8月23日用Dreamweaver 制作网页1. 网页构思、素材准备 2. 网页制作工具简介 3. 建立网站文件夹 4. 新建站点 5. 用表格布局网页 6. 文字的输入 7. 在网页中使用图像8. 图文混排 9. Flash动画的插入 10.声音背景音乐 11.视频的插入 12. 网页间的链接 13. Css样式 14. 模板的制作 15.层的使用能够将网页做好，最重要的是要有一个十分清晰的想法，从而形成一个对整个网页的合理布局。首先确认网站主题，根据网页的主题必须规划好一级、二级菜单的内容。收集好网站制作所必须的素材（文字、图片、动画、声音、视频等）。用网站做课件也是相同的方法。有的素材需要自己制作，有的可以在网上（利用百度）搜集自己应该的文字、图片、动画、声音、视频等素材。获取网上Flash文件：工具—— internet选项——浏览历史记录中的修改——查看文件。返回目录? 二、网页制作软件简介? 初识Dreamweave网页制作工具有Dreamweaver 、 FrontPage 、Photoshop、Fireworks、 Flash 等 。

Dreamweaver 、Fireworks、Flash 三个软件合在一起，被称为网页制作“三剑客”，这三个软件相辅相承，可谓是制作网页的绝佳拍档。Macromedia Dreamweaver是一款专业的网站制作工具，用于对 Web 站点、Web页和Web应用程序进行设计、编码跟开发。无论开发者愿意享 受手工编写HTML代码时的驾驭感，还是喜欢在可视化编辑环境中工作 ，Dreamweaver都会提供实用的软件，使网页设计者拥有非常完美的Web 创作感受。? Dreamweaver工作环境 （Dreamweaver 提供了将全部元素放在一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。 ） 工作窗口布局Dreamweaver 的三种视图模式（代码、拆分、设计）返回目录?三、建立网站文件夹做网页之前应先建好文件夹及子文件夹，以便分类存 放网页中使用的照片、动画等素材。文件夹名通常是网站 主题的名字。练习1：建立自己的网站文件夹。注意：Dreamweaver对英文文件名支持得不是太好，经常会有页面调用 不恰当的现象出现，在新建文件夹或在Dreamweaver中保存网页的时 候，用中文以及数字成为文件名称，就可以避免上面的错误现象。

返回目录?四、新建站点Dreamweaver 不仅仅是网站设计软件，更是网站设计软件，提供了长期跟网站 管理维护相关的用途，能够对网站中的文件、链接、媒体文件等多种资源进行统一管 理，使网站设计工作事半功倍。要想使用Dreamweaver 的网站管理用途，必须首先 建立“站点”。?新建站点步骤：打开Dreamweaver软件，在工具栏中，点击站点->新建站点，这时会弹出一 个面板，在这个面板上有基本跟高级两种选取。在这里，我们选择基本，给你的站 点起个名字(要是中文的)，下面的文本框，要填写http地址，这个不用去管它。单击下一步，会提醒你“是否使用服务器技术”，选择“否，我不使用服务器 技术” 。单击下一步，选择“文件保存的位置”，这里文件位置，是你存放站点的模式。 单击下一步，选择“是否连接远程服务器”，在这里，我们选择“本地/网 络”。选择“文件内存在服务器上的文件夹”，选择跟上一步存放的文件在同一目 录下。 单击下一步，会提醒你是“否存回跟取出文件”，这个不用管它，单击下一步，点击完成。 练习2：建立自己的网站站点。返回目录?用Dreamweaver制作简单网页下面使用Dreamweave制作一个简单的网页，介绍一下Dreamweave制作 网页的基本步骤。

1．新建网页 2．编辑网页 3．保存网页 4．预览网页 5．继续编辑网页 6．再次预览网?新建网页、设置页面属性页面属性的设定主要控制页面的整体外形，包括背景、标题 等。Dreamweaver 提供了【页面属性】对话框，在这个对话框 中提供了多种页面属性的设定方式。1．设置背景图片 2．设置页面标题 3．设置页面边距课件的首页是访问者看到的第一页，是课件关键性的一页，人们往 往发现第一页就早已对你的课件有一个整体的印象。注意：关于首页设计1、首页保存在站点文件夹下，文件名为index.html 或default.html。2、特别帮首页加好一个标题，使访问者通过标题就可以了解课件 的名称。（每一个网页都要把标题加好）练习3：新建首页并修改页面属性。（首页命名：index.htm 或 default.htm 注意新建网页文件位置。) 返回目录?五、用表格布局网页表格在网站中的应用非常广泛，它是网页中的重要元素。表格在网站中有两种功 能，一种功能是在网站中用表格组织数据，以清晰的二维列表形式显示网站中的内容， 方便查询跟浏览。另一种功能是用表格布局网页，平时在网上浏览时发现的排列整齐 的页面，很多都是利用表格进行布局的。

这里主要讲一下如何用表格布局网页。Dreamweaver利用表格来 布局页面、排版。1）点菜单“插入→表格” 命令，出来一个对话框，设置好 所需表格的行列数和长度、边距、 间距等。返回目录2）点“确定”即可插入一个3×3的表格，横着的是行， 竖着的是列，每一个小格叫单元格；3）在表格的边框上点一下，可以选中整个表格，下面 的属性面板中也进去表格的各个选项，边框为0的之后不显 示边框线；4）表格拆分、合并、嵌套。返回目录练习4：用表格布局网页制作一个用表格布局网站主页的示例，效果如图所示。在本例中，采 取了多种插入、修改表格的方式进行页面布局，旨在借助实例的操作训练， 能够帮助读者很熟练地把握表格布局的各个知识点，在未来的表格布局中 灵活应用，方便快捷地完成页面布局。1．插入表格(宽度用像 素)并修改页面属性2．布局Banner和导航 条3．布局图像列表4．布局详细内容返回目录?六、文字的输入网络世界五彩缤纷，涌现出大量优秀精美的网站。大量的网络信息， 无非就是通过文本、图像、动画等网页元素来展现，其中，文本跟图像是 网页中最为重要的设计元素。这里介绍一下文字跟图像在网站中的应用。在网站中输入文字有二种方法：直接输入、复制粘贴文字。

注意：1）输入文字时，每段前的空两格，将输入法工具条设置为 全角状态后再按空格键。2）分段时观察按 Shift+Enter Enter区别CSS样式练习5：在网站中输入文字返回目录?七、在网站中使用图像图像也有网页元素中的重要构成部分，在网页中插入图像可以让网页更好地表现 网站的主题观念，使版面变得非常丰富多彩，吸引更多的浏览者。在网站中使用图 像时，要考量图像在页面中的整体效果。网页中所用图像格式主要有GIF、JPEG跟PNG。其中使用 最为广泛的是GIF和JPEG。在将照片插入网页前，先将照片保存在站点文件夹下的图 片文件夹中。1）插入图像时，将鼠标放置在文档窗口必须插入图像的位 置，然后鼠标点击常用插入栏的“图像”按钮插入，然后按照需 要修改大小、对齐方法、边框等。返回目录?八、设置图文混排1、设置图文混排 2、设置图像宽度 3、鼠标经过图像：鼠标经过图像实际上由两个图像构成flash课件模板制作系列教程之按钮导航(上)， 原始图像跟鼠标经过图像。这两张图片应大小相同，如果不相 等，Dreaweaver会手动微调鼠标经过图像的大小和原始图像 大小一致。返回目录练习6：制作一个图文并茂的网站制作一个图文并茂的网页，效果如下图图示。

注意要 用图像属性中的左对齐和右对齐。返回目录?九、在网站中插入flash动画多媒体技术是现今Internet持续流行的一个重要动力。早期的网页大多是由文字 或者图像组成，由于多媒体技术的演进，音乐、动画、视频等外媒的应用越来越广泛 。音乐网站、电影网站、播客等整合多媒体技术的网站越来越多。Flash动画以精巧、动感、富有交互性而走红网路。在制作网站时，将 Flash动画应用至网页中，能使网页更具动感，更充满感染力。在网页中插入Flash制作的SWF格式动画，单击对象工具栏上的Flash 按钮或点击的“媒体”下的“Flash”，打开一个对话框，选择SWF动画文 件即可。如果必须插入Flash透明，可进行参数的设定：（ Flash动画控制参数的设计不能在【属性】面板中直接修改，需要开启【参数】对话框进行修改。）单击属性面板中的参数按钮，打开参数设定对话框，在“参数”栏输 入wmode “值”栏输入transparent返回目录练习7： 插入Flash动画并让背景透明要求制作一个网页，设置网页背景为蓝色，将这个Flash动画 插入至网页中，并修改这个Flash动画的背景透明，这样可以跟网 页背景融合在一起。

效果如图所示。? 在网页中插入层， 在层中插入flash并将 flash背景设为透明。练习：插入课文朗读 flash动画，并将背景设定 为透明。返回目录?十、在网站中插入声音音频和视频等外媒在网站中的应用越来越广泛，一些戏剧网站跟小说网在这方面的 应用最典型。音频文件可以是网站中的声音跟用作网页背景音乐。制作网页背景美术主要有两 个方法，第一是插入音乐文件，其次是隐藏音乐的播放条。而在Dreamweaver 中插入背景音乐的基本步骤是借助插入组件的方式来推动的。 注意：.mid、.wav、.mp3格式都能作背景音乐，最好用占空间小的文 件.mid、.mp3 参数说明 (详细说明)autostart：true自动播放 hidden：true 隐藏播放控制面板 loop：true 循环播放练习： 循环播放的网站背景音乐返回目录插入音乐的参数说明 src：音乐文件的模式及文件名； autostart：true为音乐文件上传完后手动开始播放，默认为false（否） loop：true为无限次重播，false为不重播，某一具体值（整数）为重播多少次 volume：取值范围为"0-100"，设置音量，默认为系统原本的音量 starttime：“分：秒”，设置歌曲起初播放的时间，如，starttime=“00:10”， 从 第10开始播放 endtime： "分：秒"，设置歌曲结束播放的时间 width：控制面板的宽 height：控制面板的高 controls：控制面板的外观·console：正常大小的面板 ·smallconsole：较小的面板 ·playbutton：显示播放按钮 ·pausebutton：显示暂停按钮 ·stopbutton：显示停止按钮 ·volumelever：显示亮度调节按钮 hidden：为true时可以隐藏面板返回目录?十一、在网站中使用视频在网页中插入视频文件有两种形式，一种是嵌入式，另外一种是链接式。

对于嵌 入式视频，网页开启后会显示一个播放窗口播放文件，而针对链接式视频，网页中仅 仅提供一个超链接，当用户点击打开这个链接后，Windows的媒体播放器会手动开启 并播放这个文件。网页中插入视频有两个步骤，第一是插入视频文件，其次是设定视频的 宽度、高度。在Dreamweaver中插入视频的可视化操作的有三种：1.使用菜单：插入－媒体－ActiveX，再“属性”中设定宽、高、ClassID和嵌入 的文件名。 （保证电脑安装有realplay播放器flash课件模板制作系列教程之按钮导航(上)，格式为rm,ram,rmvb）2.菜单：插入－媒体－插件 (Windows媒体播放,avi,wmv,mpg格式) 3.菜单：插入－媒体－Flash视频 （.flv）注意：在属性面板中设定间距和高度，若设定错误要再次调整。返回目录?十二、网页间的超链接所谓超链接是指从一个网页指向一个目标的联结关系，这个目标可以是另一个 网页（同一个网站内部的网页以及其它网站的网页），也可以是同一个网页的不同 位置，还可以是一个电子邮件地址、一个文件（如图片文件、声音文件、视频文件 等。超级链接的链接载体和链接目标网站中有很多页面，为了确立起网站之间的联系我们必 须使用超级链接。

通过超链接可以很方便地从一个网页跳转 到另一个网页。超级链接可借助文字、图片、热区、变换图像来推动。 1、在网页中选中要做超级链接的文字或照片。 2、在属性面板中右键黄色文件夹图标，在跳出的对话框 里选中相应的网站文件就完成了。返回目录课堂实例给文字跟照片创建超级链接? 在网站设计中更常用的就是在文字以及照片上创建超链接，下面通过一个实例介绍给文字跟照片创建超链接的 方法。? 1．给文字创建 超级链接? 2．给图片创建 超级链接注意：链接的网站一定是在站点里的网站文件。返回目录?链接目标目标下拉列表中有4个选项，它们的功能如下：_blank：将链接的网站在新窗口中开启 _parent：将链接的文档载入该链接所在框架的父框架或父窗口。 如果包括链接的框架不是嵌套框架，则所链接的文档载入整个浏览 器窗口。 _self：打开链接窗口时会更换原先的窗口。此目标是默认的，通 常不需要指定它。 _top：将链接的文档载入整个浏览器窗口，从而删除所有框架。返回目录为超级链接换个形状有时需要去掉超链接文字之下的破折号，设置链接文字的样式等。设置方式：打开页面属性对话框，选中链接选项，根据需要进行相关设定。

电子邮件超级链接选中要设定E-mail链接的文字，从 常用菜单模式单击 电子邮件链接按 钮。在E-mail栏输入电子邮件地址确认。返回目录课堂实例――图片地图（热区链接）?图片地图主要用来在一幅图片内部的不同区域上修改超链接，设置照片地图时，要在照片上添加一系列的“热点”，这些热点可以带有各自不同的颜色，而且可以为他们分别设定超链接。? 矩形热点工具：创建一个矩形热点。? 椭圆形热点工具：创建一个圆形热点。? 多边形热点工具：创建一个不规则形状的热点。? 1．绘制矩形热点 ? 2．绘制椭圆形热点 ? 3．绘制多边形热点返回目录锚点? 使用命名锚记可以在文档中设定标记，这些标记一般置于文档的特定主题处或底部。然后可以构建到这种命名锚记的链接，这些链接可迅速将访问者带至指定位 置。? 创建至命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命 名锚记的链接。? １、创建命名锚记? 1、在“文档”窗口的“设计”视图中，将插入点置于需要命名锚记的地方,执行以下操作之 一：?* 选择“插入”>“命名锚记”。?* 在“插入”栏的“常用”类别中，单击“命名锚记”按钮。?出现“命名锚记”对话框。

? 2、在“锚记名称”文本框中，键入锚记的名称，并单击“确定”。锚记标记在插入点处出现 。? ２、链接到命名锚记?在“文档”窗口的“设计”视图中，选择应从其建立链接的文本或图像。在属性面板的“链接”文本框中，键入一个数字符号 (#) 和锚记名称。练习： 纵向文字导航条? 制作一个纵 向文字导航条， 效果如图5-53所 示。在制作这个 实例时，需要先 用表格布局并设 置表格属性，然 后输入纵向的导 航文字，最好添 加超级链接。纵向文字导航条返回目录超级链接的链接载体和链接目标从菜单栏选择“修改” →“页面属性”，或从属性面 板中右键页面属性按钮，弹出页面属性设定对话框，进行 背景、标题、页面边距等设定。返回目录