教你如何用Dreamweaver制作网页.ppt

《教你如何用Dreamweaver制作网页.ppt》由会员分享，可在线阅读，更多相关《教你如何用Dreamweaver制作网页.ppt（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Dreamweaver网页制作网页制作学学习习教教程程20112011年年8 8月月2323日日用用Dreamweaver Dreamweaver 制作网页制作网页1.1.网页构思、素材准备网页构思、素材准备网页构思、素材准备网页构思、素材准备2.2.网页制作软件简介网页制作软件简介网页制作软件简介网页制作软件简介3.3.建立网页文件夹建立网页文件夹建立网页文件夹建立网页文件夹4.4.新建站点新建站点新建站点新建站点5.5.用表格布局网页用表格布局网页用表格布局网页用表格布局网页6.6.文字的输入文字的输入文字的输入文字的输入7.7.在网页中使用图像在网页中使用图像在网页中使用图像在网页中使用

2、图像8 8.图文混排图文混排图文混排图文混排9.9.FlashFlash动画的插入动画的插入动画的插入动画的插入10.10.声音背景音乐声音背景音乐声音背景音乐声音背景音乐11.11.视频的插入视频的插入视频的插入视频的插入12.12.网页间的网页间的网页间的网页间的链接链接链接链接13.13.CssCss样式样式样式样式14.14.模板的制作模板的制作模板的制作模板的制作15.15.层的使用层的使用层的使用层的使用u 一、网页构思、素材准备能否将网页做好，最重要的是要有一个十分清晰的思能否将网页做好，最重要的是要有一个十分清晰的思路，从而产生一个对整个网页的合理布局。路，从而产生一个对整个网

3、页的合理布局。首先确定网页主题，根据网页的主题需要规划好一级、首先确定网页主题，根据网页的主题需要规划好一级、二级菜单的内容。二级菜单的内容。收集好网页制作所需要的素材（收集好网页制作所需要的素材（文字、图片、动画、文字、图片、动画、声音、视频等声音、视频等）。）。用网页做课件也是同样的步骤。用网页做课件也是同样的步骤。有的素材需要自己制作，有的可以在网上（利用百度）搜集自己需要有的素材需要自己制作，有的可以在网上（利用百度）搜集自己需要的文字、图片、动画、声音、视频等素材。的文字、图片、动画、声音、视频等素材。获取网上获取网上Flash文件：工具文件：工具internet选项选项浏览历史记录

4、中的设置浏览历史记录中的设置查查看文件。看文件。返回目录返回目录初识初识Dreamweave网页制作工具有Dreamweaver、FrontPage、Photoshop、Fireworks、Flash等。Dreamweaver、Fireworks、Flash三个软件合在一起，被称为网页制作“三剑客”，这三个软件相辅相承，可谓是制作网页的最佳拍档。Macromedia Dreamweaver是一款专业的网页制作软件，用于对 Web 站点、Web页和Web应用程序进行设计、编码和开发。无论开发者愿意享受手工编写HTML代码时的驾驭感，还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供实

5、用的工具，使网页设计者拥有更加完美的Web创作体验。Dreamweaver工作环境工作环境（Dreamweaver提供了将全部元素置于一个窗口中的集成工作区。在集成提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。工作区中，全部窗口和面板集成在一个应用程序窗口中。）工作窗口布局工作窗口布局Dreamweaver的三种视图模式（代码、拆分、设计）的三种视图模式（代码、拆分、设计）u 二、网页制作软件简介返回目录返回目录做网页之前应先建好文件夹及子文件夹，以便分类存做网页之前应先建好文件夹及子文件夹，以便分类存放网页中使用的图片、动画等素材。文件夹

6、名一般是网页放网页中使用的图片、动画等素材。文件夹名一般是网页主题的名字。主题的名字。练习练习1 1：建立自己的网页文件夹。：建立自己的网页文件夹。注意：注意：Dreamweaver对中文文件名支持得不是太好，经常会有页面调用对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，在新建文件夹或在不正确的现象发生，在新建文件夹或在Dreamweaver中保存网页的时中保存网页的时候，候，用英文或者数字作为文件名称，用英文或者数字作为文件名称，就可以避免上面的出错现象就可以避免上面的出错现象。返回目录返回目录u三、建立网页文件夹新建站点步骤：新建站点步骤：打开打开Dreamweaver软件

7、，在工具栏中，点击站点软件，在工具栏中，点击站点-新建站点，这时会弹出一新建站点，这时会弹出一个面板，在这个面板上有基本和高级两种选择。在这里，我们选择基本，给你的站个面板，在这个面板上有基本和高级两种选择。在这里，我们选择基本，给你的站点起个名字点起个名字(要是英文的要是英文的)，下面的文本框，要填写，下面的文本框，要填写http地址，这个不用去管它。地址，这个不用去管它。单击下一步，会提示你单击下一步，会提示你“是否使用服务器技术是否使用服务器技术”，选择，选择“否，我不使用服务器否，我不使用服务器技术技术”。单击下一步，选择单击下一步，选择“文件存放的位置文件存放的位置”，这里文件位置，

8、是你存放站点的路径。，这里文件位置，是你存放站点的路径。单击下一步，选择单击下一步，选择“是否连接远程服务器是否连接远程服务器”，在这里，我们选择，在这里，我们选择“本地本地/网络网络”。选择选择“文件存储在服务器上的文件夹文件存储在服务器上的文件夹”，选择和上一步存放的文件在同一目录下。，选择和上一步存放的文件在同一目录下。单击下一步，会提示你是单击下一步，会提示你是“否存回和取出文件否存回和取出文件”，这个不用管它，单击下一步，这个不用管它，单击下一步，点击完成。点击完成。返回目录返回目录Dreamweaver不仅仅是网页设计工具，更是网站设计工具，提供了大量和网站管理维护相关的功能，能够

9、对网站中的文件、链接、媒体文件等多种资源进行统一管理，使网站设计工作事半功倍。要想使用Dreamweaver的网站管理功能，必须首先建立“站点”。u四、新建站点练习练习2 2：建立自己的网页站点。：建立自己的网页站点。下面使用Dreamweave制作一个简单的网页，介绍一下Dreamweave制作网页的基本流程。1新建网新建网页页2编辑编辑网网页页3保存网保存网页页4预览预览网网页页5继续编辑继续编辑网网页页6再次再次预览预览网网u用用DreamweaverDreamweaver制作简单网页制作简单网页页面属性的设置主要控制页面的整体外观，包括背景、标题等。Dreamweaver 提供了【页面

10、属性】对话框，在这个对话框中提供了多种页面属性的设置方法。1设设置背景置背景图图片片2设设置置页页面面标题标题3设设置置页页面面边边距距u新建网页、设置页面属性新建网页、设置页面属性首页的设计首页的设计课件的首页是访问者看到的第一页，是课件关键性的一页，人们往往看到第一页就已经对你的课件有一个整体的印象。注意：注意：1、首页保存在站点文件夹下，文件名为首页保存在站点文件夹下，文件名为index.htmlindex.html或default.html。2、特别给首页加好一个标题，使访问者通过标题就可以知道课件的名称。（每一个网页都要把标题加好）返回目录返回目录练习练习3 3：新建首页并设置页面属

11、性。：新建首页并设置页面属性。（首页命名：index.htm或default.htm注意新建网页文件位置。注意新建网页文件位置。)关于首页设计关于首页设计Dreamweaver利用表格来布利用表格来布局页面、排版。局页面、排版。1）点菜单）点菜单“插入插入表格表格”命令，出来一个对话框，设置好命令，出来一个对话框，设置好所需表格的行列数和宽度、边距、所需表格的行列数和宽度、边距、间距等。间距等。返回目录返回目录u五、用表格布局网页表格在网页中的应用十分广泛，它是网页中的重要元素。表格在网页中有两种功能，一种功能是在网页中用表格组织数据，以清晰的二维列表方式显示网页中的内容，方便查询和浏览。另一

12、种功能是用表格布局网页，平时在网上浏览时看到的排列整齐的页面，很多都是利用表格进行布局的。这里主要讲一下如何用表格布局网页。2）点）点“确定确定”即可插入一个即可插入一个33的表格，横着的是行，的表格，横着的是行，竖着的是列，每一个小格叫单元格；竖着的是列，每一个小格叫单元格；3）在表格的边框上点一下，可以选中整个表格，下面）在表格的边框上点一下，可以选中整个表格，下面的属性面板中也出来表格的各个选项，边框为的属性面板中也出来表格的各个选项，边框为0的时候不显的时候不显示边框线；示边框线；返回目录返回目录4）表格拆分、合并、嵌套。）表格拆分、合并、嵌套。练习练习4 4：用表格布局网页：用表格布

13、局网页制作一个用表格布局网站主页的实例，效果如图所示。在本例中，采制作一个用表格布局网站主页的实例，效果如图所示。在本例中，采取了多种插入、修改表格的方法进行页面布局，旨在通过实例的操作练习，取了多种插入、修改表格的方法进行页面布局，旨在通过实例的操作练习，能够帮助读者更熟练地掌握表格布局的各个知识点，在今后的表格布局中能够帮助读者更熟练地掌握表格布局的各个知识点，在今后的表格布局中灵活应用，方便快捷地完成页面布局。灵活应用，方便快捷地完成页面布局。返回目录返回目录1 1插入表格插入表格(宽度用像宽度用像素素)并设置页面属性并设置页面属性2 2布局布局BannerBanner和导航和导航条条3

14、 3布局图像列表布局图像列表4 4布局详细内容布局详细内容在网页中输入文字有二种方法：直接输入、复制粘贴文字。在网页中输入文字有二种方法：直接输入、复制粘贴文字。注意：注意：1）输入文字时，每段前的空两格，将输入法工具条设置为）输入文字时，每段前的空两格，将输入法工具条设置为全角状态后再按空格键。全角状态后再按空格键。2）分段时观察按）分段时观察按Shift+EnterEnter区别区别返回目录返回目录u六、文字的输入网络世界五彩缤纷，涌现出大量优秀精美的网页。大量的网络信息，无非就是通过文本、图像、动画等网页元素来呈现，其中，文本和图像是网页中最为重要的设计元素。这里介绍一下文字和图像在网页

15、中的应用。练习练习5 5：在网页中输入文字：在网页中输入文字CSS样式样式网页中所用图像格式主要有GIF、JPEG和PNG。其中使用最为广泛的是GIF和JPEG。在将图片插入网页前，先将图片存放在站点文件夹下的图片在将图片插入网页前，先将图片存放在站点文件夹下的图片文件夹中。文件夹中。1）插入图像时，将光标放置在文档窗口需要插入图像的位置，然后鼠标单击常用插入栏的“图像”按钮插入，然后根据需要设置大小、对齐方式、边框等。返回目录返回目录u七、在网页中使用图像图像也是网页元素中的重要组成部分，在网页中插入图像可以使网页更好地表现网站的主题思想，使版面变得更加丰富多彩，吸引更多的浏览者。在网页中使

16、用图像时，要考虑图像在页面中的整体效果。3、鼠标经过图像鼠标经过图像：鼠标经过图像实际上由两个图像组成，原始图像和鼠标经过图像。这两张图片要大小相等，如果不相等，Dreaweaver会自动调整鼠标经过图像的大小跟原始图像大小一致。返回目录返回目录1、设置图文混排、设置图文混排2、设设置置图图像像边边距距u八、设置图文混排八、设置图文混排制作一个图文并茂的网页，效果如下图所示。注意应用图像属性中的左对齐和右对齐。返回目录返回目录练习练习6 6：制作一个图文并茂的网页：制作一个图文并茂的网页Flash动画以小巧、动感、富有交互性而风靡网络。在制作网页时，将Flash动画应用到网页中，能使网页更具动

17、感，更富有感染力。在网页中插入Flash制作的SWF格式动画，单击对象工具栏上的Flash按钮或单击的“媒体”下的“Flash”，打开一个对话框，选择SWF动画文件即可。如果需要插入如果需要插入Flash透明，可进行参数的设置：透明，可进行参数的设置：（Flash动画控制参数的设计不能在【属性】面板中直接设置，需要打开【参数】对话框进行设置。）单击属性面板中的参数按钮，打开参数设置对话框，在“参数”栏输入wmode“值”栏输入transparent返回目录返回目录u九、在网页中插入flash动画多媒体技术是当今Internet持续流行的一个重要动力。早期的网页大多是由文字或者图像构成，由于多媒

18、体技术的发展，音乐、动画、视频等媒体的应用越来越广泛。音乐网站、电影网站、播客等融合多媒体技术的网站越来越多。练习练习7 7：插入插入FlashFlash动画并使背景透明动画并使背景透明 要求制作一个网页，设置网页背景为蓝色，将这个要求制作一个网页，设置网页背景为蓝色，将这个FlashFlash动画动画插入到网页中，并设置这个插入到网页中，并设置这个FlashFlash动画的背景透明，这样可以和网动画的背景透明，这样可以和网页背景融合在一起。效果如图所示。页背景融合在一起。效果如图所示。返回目录返回目录在网页中插入层，在网页中插入层，在层中插入在层中插入flash并将并将flash背景设为透明

19、。背景设为透明。练习：插入课文朗读练习：插入课文朗读flash动画，并将背景设置动画，并将背景设置为透明。为透明。音频和视频等媒体在网页中的应用越来越广泛，一些音乐网站和电影网在这方面的应用更典型。音频文件可以是网页中的声音和用作网页背景音乐。制作网页背景音乐主要有两个步骤，第一是插入音乐文件，其次是隐藏音乐的播放条。而在Dreamweaver中插入背景音乐的基本方法是通过插入插件的方法来实现的。注意：注意：.mid、.wav、.mp3格式都可作背景音乐，最好用占空间小的文件.mid、.mp3参数说明参数说明(详细说明详细说明)autostart：true自动播放hidden：true隐藏播放

20、控制面板loop：true循环播放返回目录返回目录练习：练习：循环播放的网页背景音乐循环播放的网页背景音乐u十、在网页中插入声音插入音乐的参数说明参数说明src：音乐文件的路径及文件名；autostart：true为音乐文件上传完后自动开始播放，默认为false（否）loop：true为无限次重播，false为不重播，某一具体值（整数）为重播多少次volume：取值范围为0-100，设置音量，默认为系统本身的音量starttime：“分：秒”，设置歌曲开始播放的时间，如，starttime=“00:10”，从第10开始播放endtime：分：秒，设置歌曲结束播放的时间width：控制面板的宽h

21、eight：控制面板的高controls：控制面板的外观console：正常大小的面板smallconsole：较小的面板playbutton：显示播放按钮pausebutton：显示暂停按钮stopbutton：显示停止按钮volumelever：显示音量调节按钮hidden：为true时可以隐藏面板返回目录返回目录网页中插入视频有两个步骤，第一是插入视频文件，其次是设置视频的网页中插入视频有两个步骤，第一是插入视频文件，其次是设置视频的宽度、高度。在宽度、高度。在DreamweaverDreamweaver中插入视频的中插入视频的可视化操作的有三种：可视化操作的有三种：1.使用菜单：插入媒

22、体ActiveX，再“属性”中设置宽、高、ClassID和嵌入的文件名。（保证电脑安装有realplay播放器，格式为rm,ram,rmvb）2.菜单：插入媒体插件菜单：插入媒体插件(Windows媒体播放媒体播放,avi,wmv,mpg格式格式)3.菜单：插入媒体Flash视频（.flv）注意：注意：在属性面板中设置宽度和高度，若设置错误要重新调整。在属性面板中设置宽度和高度，若设置错误要重新调整。返回目录返回目录在网页中插入视频文件有两种方式，一种是嵌入式，另外一种是链接式。对于嵌入式视频，网页打开后会显示一个播放窗口播放文件，而对于链接式视频，网页中仅仅提供一个超链接，当用户单击打开这个

23、链接后，Windows的媒体播放器会自动启动并播放这个文件。u十一、在网页中使用视频网页中有很多页面，为了建立起网页之间的联系我们必网页中有很多页面，为了建立起网页之间的联系我们必须使用超级链接。通过超链接可以很方便地从一个网页跳转须使用超级链接。通过超链接可以很方便地从一个网页跳转到另一个网页。到另一个网页。超级链接可通过文字、图片、热区、变换图像来实现。超级链接可通过文字、图片、热区、变换图像来实现。1、在网页中选中要做超级链接的文字或图片。、在网页中选中要做超级链接的文字或图片。2、在属性面板中单击黄色文件夹图标，在弹出的对话框、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的

24、网页文件就完成了。里选中相应的网页文件就完成了。返回目录返回目录u十二、网页间的超链接十二、网页间的超链接所谓超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页（同一个网站内部的网页或者其他网站的网页），也可以是同一个网页的不同位置，还可以是一个电子邮件地址、一个文件（如图片文件、声音文件、视频文件等。超级链接的链接载体和链接目标课堂实例课堂实例给文字和图片创建超级链接给文字和图片创建超级链接在网站设计中最常见的就是在文字或者图片上建立超链接，下面通过一个实例介绍给文字和图片创建超链接的方法。1给文字创建给文字创建超级链接超级链接2给图片创建给图片创建超级链接超级链接注意：链

25、接的网页一定是在站点里的网页文件。注意：链接的网页一定是在站点里的网页文件。返回目录返回目录目标下拉列表中有目标下拉列表中有4个选项，它们的功能如下：个选项，它们的功能如下：_blank：将链接的网页在新窗口中打开_parent：将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。_self：打开链接窗口时会替换原来的窗口。此目标是默认的，通常不需要指定它。_top：将链接的文档载入整个浏览器窗口，从而删除所有框架。链接目标链接目标返回目录返回目录有时需要去掉超链接文字之下的下划线，设置链接文字的颜色等。设置方法：设置方法：打开页面

26、属性对话框，选中链接选项，根据需要进行相关设置。为超级为超级链接换个颜色链接换个颜色返回目录返回目录电子邮件超级电子邮件超级链接链接选中要设定E-mail链接的文字，从常用菜单模式单击电子邮件链接按钮。在E-mail栏输入电子邮件地址确定。课堂实例课堂实例图片地图图片地图（热区链接）（热区链接）（热区链接）（热区链接）图片地图主要用来在一幅图片内部的不同区域上一幅图片内部的不同区域上设置超链接，设置图片地图时，要在图片上添加一系列的“热点”，这些热点可以具有各自不同的形状，而且可以为它们分别设置超链接。矩形热点工具：创建一个矩形热点。椭圆形热点工具：创建一个圆形热点。多边形热点工具：创建一个不

27、规则形状的热点。1绘制矩形热点绘制矩形热点2绘制椭圆形热点绘制椭圆形热点3绘制多边形热点绘制多边形热点返回目录返回目录锚点锚点使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。、创建命名锚记、创建命名锚记1、在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的地方,执行下列操作之一：*选择“插入”“命名锚记”。*在“插入”栏的“常用”类别中，单击“命名锚记”按钮。出现“命名锚记”对话框。2、在“锚记名称”文本框中

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