用Dreamweaver制作网页

nullnullDreamweaver网页制作 学 习 教 程2011年8月23日null用Dreamweaver 制作网页 网页构思、素材准备 2. 网页制作软件简介 3. 建立网页文件夹 4. 新建站点 5. 用 表格 关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载 布局网页 6. 文字的输入 7. 在网页中使用图像 8. 图文混排 9. Flash动画的插入 声音背景音乐 视频的插入 12. 网页间的链接 13. Css样式 14. 模板的制作 15.层的使用 一、网页构思、素材准备 一、网页构思、素材准备　　能否将网页做好，最重要的是要有一个十分清晰的思路，从而产生一个对整个网页的合理布局。　 　　首先确定网页主题，根据网页的主题需要规划好一级、二级菜单的内容。 　　收集好网页制作所需要的素材（文字、图片、动画、声音、视频等）。 　　　　　用网页做 课件 超市陈列培训课件免费下载搭石ppt课件免费下载公安保密教育课件下载病媒生物防治课件 可下载高中数学必修四课件打包下载 也是同样的步骤。 　 有的素材需要自己制作，有的可以在网上（利用百度）搜集自己需要的文字、图片、动画、声音、视频等素材。 　　　获取网上Flash文件：工具—— internet选项——浏览历史 记录 混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载 中的设置——查看文件。返回目录 二、网页制作软件简介初识Dreamweave 网页制作工具有Dreamweaver 、 FrontPage 、Photoshop、Fireworks、Flash 等 。 Dreamweaver 、Fireworks、Flash 三个软件合在一起，被称为网页制作“三剑客”，这三个软件相辅相承，可谓是制作网页的最佳拍档。 Macromedia Dreamweaver是一款专业的网页制作软件，用于对 Web 站点、Web页和Web应用程序进行 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 、编码和开发。无论开发者愿意享受手工编写HTML代码时的驾驭感，还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供实用的工具，使网页设计者拥有更加完美的Web创作体验。 Dreamweaver工作环境 （Dreamweaver 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。 ） 工作窗口布局 Dreamweaver 的三种视图模式（代码、拆分、设计） 二、网页制作软件简介返回目录三、建立网页文件夹　　做网页之前应先建好文件夹及子文件夹，以便分类存放网页中使用的图片、动画等素材。文件夹名一般是网页主题的名字。 练习1：建立自己的网页文件夹。 注意： 　　Dreamweaver对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，在新建文件夹或在Dreamweaver中保存网页的时候，用英文或者数字作为文件名称，就可以避免上面的出错现象。 返回目录三、建立网页文件夹四、新建站点新建站点步骤： 　　打开Dreamweaver软件，在工具栏中，点击站点->新建站点，这时会弹出一个面板，在这个面板上有基本和高级两种选择。在这里，我们选择基本，给你的站点起个名字(要是英文的)，下面的文本框，要填写http地址，这个不用去管它。 　　单击下一步，会提示你“是否使用服务器技术”，选择“否，我不使用服务器技术” 。 　　单击下一步，选择“文件存放的位置”，这里文件位置，是你存放站点的路径。 　　单击下一步，选择“是否连接远程服务器”，在这里，我们选择“本地/网络”。选择“文件存储在服务器上的文件夹”，选择和上一步存放的文件在同一目录下。 　　单击下一步，会提示你是“否存回和取出文件”，这个不用管它，单击下一步，点击完成。 返回目录 Dreamweaver 不仅仅是网页设计工具，更是网站设计工具，提供了大量和网站管理维护相关的功能，能够对网站中的文件、链接、媒体文件等多种资源进行统一管理，使网站设计工作事半功倍。要想使用Dreamweaver 的网站管理功能，必须首先建立“站点”。四、新建站点练习2：建立自己的网页站点。用Dreamweaver制作简单网页 下面使用Dreamweave制作一个简单的网页，介绍一下Dreamweave制作网页的基本流程。 1．新建网页 2．编辑网页 3．保存网页 4．预览网页 5．继续编辑网页 6．再次预览网用Dreamweaver制作简单网页新建网页、设置页面属性 页面属性的设置主要控制页面的整体外观，包括背景、标题等。Dreamweaver 提供了【页面属性】对话框，在这个对话框中提供了多种页面属性的设置方法。 1．设置背景图片 2．设置页面标题 3．设置页面边距新建网页、设置页面属性首页的设计首页的设计　　课件的首页是访问者看到的第一页，是课件关键性的一页，人们往往看到第一页就已经对你的课件有一个整体的印象。 注意： 　　1、首页保存在站点文件夹下，文件名为index.html 或default.html。 　　2、特别给首页加好一个标题，使访问者通过标题就可以知道课件的名称。（每一个网页都要把标题加好）返回目录练习3：新建首页并设置页面属性。 （首页命名：index.htm 或 default.htm 注意新建网页文件位置。)关于首页设计五、用 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 格布局网页　　Dreamweaver利用表格来布局页面、排版。 　　1）点菜单“插入→表格”命令，出来一个对话框，设置好所需表格的行列数和宽度、边距、间距等。 　返回目录五、用表格布局网页 表格在网页中的应用十分广泛，它是网页中的重要元素。表格在网页中有两种功能，一种功能是在网页中用表格组织数据，以清晰的二维列表方式显示网页中的内容，方便查询和浏览。另一种功能是用表格布局网页，平时在网上浏览时看到的排列整齐的页面，很多都是利用表格进行布局的。这里主要讲一下如何用表格布局网页。null　　2）点“确定”即可插入一个3×3的表格，横着的是行，竖着的是列，每一个小格叫单元格；     　 　　3）在表格的边框上点一下，可以选中整个表格，下面的属性面板中也出来表格的各个选项，边框为0的时候不显示边框线； 　 　　　　返回目录4）表格拆分、合并、嵌套。null练习4：用表格布局网页 　　制作一个用表格布局网站主页的实例，效果如图所示。在本例中，采取了多种插入、修改表格的方法进行页面布局，旨在通过实例的操作练习，能够帮助读者更熟练地掌握表格布局的各个知识点，在今后的表格布局中灵活应用，方便快捷地完成页面布局。返回目录1．插入表格(宽度用像素)并设置页面属性 2．布局Banner和导航条 3．布局图像列表 4．布局详细内容六、文字的输入　　在网页中输入文字有二种方法：直接输入、复制粘贴文字。 注意： 　　1）输入文字时，每段前的空两格，将输入法工具条设置为全角状态后再按空格键。 　　2）分段时观察按 Shift+Enter　Enter区别返回目录六、文字的输入 网络世界五彩缤纷，涌现出大量优秀精美的网页。大量的网络信息，无非就是通过文本、图像、动画等网页元素来呈现，其中，文本和图像是网页中最为重要的设计元素。这里介绍一下文字和图像在网页中的应用。练习5：在网页中输入文字CSS样式七、在网页中使用图像 　　网页中所用图像格式主要有GIF、JPEG和PNG。其中使用最为广泛的是GIF和JPEG。 　　　　 　　在将图片插入网页前，先将图片存放在站点文件夹下的图片文件夹中。 　　 　　 1）插入图像时，将光标放置在文档窗口需要插入图像的位置，然后鼠标单击常用插入栏的“图像”按钮插入，然后根据需要设置大小、对齐方式、边框等。返回目录七、在网页中使用图像 图像也是网页元素中的重要组成部分，在网页中插入图像可以使网页更好地表现网站的主题思想，使版面变得更加丰富多彩，吸引更多的浏览者。在网页中使用图像时，要考虑图像在页面中的整体效果。八、设置图文混排 3、鼠标经过图像：鼠标经过图像实际上由两个图像组成，原始图像和鼠标经过图像。这两张图片要大小相等，如果不相等，Dreaweaver会自动调整鼠标经过图像的大小跟原始图像大小一致。返回目录1、设置图文混排 2、设置图像边距八、设置图文混排null　　制作一个图文并茂的网页，效果如下图所示。注意应用图像属性中的左对齐和右对齐。返回目录练习6：制作一个图文并茂的网页九、在网页中插入flash动画　　 Flash动画以小巧、动感、富有交互性而风靡网络。在制作网页时，将Flash动画应用到网页中，能使网页更具动感，更富有感染力。 　　在网页中插入Flash制作的SWF格式动画，单击对象工具栏上的Flash按钮或单击的“媒体”下的“Flash”，打开一个对话框，选择SWF动画文件即可。 　　如果需要插入Flash透明，可进行参数的设置：（ Flash动画控制参数的设计不能在【属性】面板中直接设置，需要打开【参数】对话框进行设置。） 　　单击属性面板中的参数按钮，打开参数设置对话框，在“参数”栏输入wmode　“值”栏输入transparent返回目录九、在网页中插入flash动画 多媒体技术是当今Internet持续流行的一个重要动力。早期的网页大多是由文字或者图像构成，由于多媒体技术的发展，音乐、动画、视频等媒体的应用越来越广泛。音乐网站、电影网站、播客等融合多媒体技术的网站越来越多。练习7： 插入Flash动画并使背景透明练习7： 插入Flash动画并使背景透明 要求制作一个网页，设置网页背景为蓝色，将这个Flash动画插入到网页中，并设置这个Flash动画的背景透明，这样可以和网页背景融合在一起。效果如图所示。 返回目录 在网页中插入层，在层中插入flash并将flash背景设为透明。 　 　　练习：插入课文朗读flash动画，并将背景设置为透明。 练习： 循环播放的网页背景音乐　 音频和视频等媒体在网页中的应用越来越广泛，一些音乐网站和电影网在这方面的应用更典型。 音频文件可以是网页中的声音和用作网页背景音乐。制作网页背景音乐主要有两个步骤，第一是插入音乐文件，其次是隐藏音乐的播放条。而在Dreamweaver中插入背景音乐的基本方法是通过插入插件的方法来实现的。 注意： 　　.mid、.wav、.mp3格式都可作背景音乐，最好用占空间小的文件.mid、.mp3 参数说明　(详细说明) autostart：true自动播放 hidden：true 隐藏播放控制面板 loop：true 循环播放返回目录练习： 循环播放的网页背景音乐十、在网页中插入声音插入音乐的参数说明插入音乐的参数说明< EMBED src="music.mid" autostart="true" loop="2" width="80" height="30" >   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时可以隐藏面板  返回目录十一、在网页中使用视频　　网页中插入视频有两个步骤，第一是插入视频文件，其次是设置视频的宽度、高度。在Dreamweaver中插入视频的可视化操作的有三种： 1.使用菜单：插入－媒体－ActiveX，再“属性”中设置宽、高、ClassID和嵌入的文件名。 （保证电脑安装有realplay播放器，格式为rm,ram,rmvb） 2.菜单：插入－媒体－插件 (Windows媒体播放,avi,wmv,mpg格式) 3.菜单：插入－媒体－Flash视频 （.flv） 注意：在属性面板中设置宽度和高度，若设置错误要重新调整。返回目录 在网页中插入视频文件有两种方式，一种是嵌入式，另外一种是链接式。对于嵌入式视频，网页打开后会显示一个播放窗口播放文件，而对于链接式视频，网页中仅仅提供一个超链接，当用户单击打开这个链接后，Windows的媒体播放器会自动启动并播放这个文件。十一、在网页中使用视频十二、网页间的超链接　　网页中有很多页面，为了建立起网页之间的联系我们必须使用超级链接。通过超链接可以很方便地从一个网页跳转到另一个网页。 　　超级链接可通过文字、图片、热区、变换图像来实现。 　　1、在网页中选中要做超级链接的文字或图片。 　　2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。返回目录十二、网页间的超链接 所谓超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页（同一个网站内部的网页或者其他网站的网页），也可以是同一个网页的不同位置，还可以是一个电子邮件地址、一个文件（如图片文件、声音文件、视频文件等。超级链接的链接载体和链接目标课堂实例 给文字和图片创建超级链接课堂实例 给文字和图片创建超级链接在网页中最常见的就是在文字或者图片上建立超链接，下面通过一个实例介绍给文字和图片创建超链接的方法。 1．给文字创建超级链接 2．给图片创建超级链接注意：链接的网页一定是在站点里的网页文件。返回目录链接目标目标下拉列表中有4个选项，它们的功能如下： _blank：将链接的网页在新窗口中打开 _parent：将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。 _self：打开链接窗口时会替换原来的窗口。此目标是默认的，通常不需要指定它。 _top：将链接的文档载入整个浏览器窗口，从而删除所有框架。链接目标返回目录为超级链接换个颜色　　 有时需要去掉超链接文字之下的下划线，设置链接文字的颜色等。 设置方法：打开页面属性对话框，选中链接选项，根据需要进行相关设置。为超级链接换个颜色返回目录电子邮件超级链接　　选中要设定E-mail链接的文字，从常用菜单模式单击 电子邮件链接按钮。在E-mail栏输入电子邮件地址确定。课堂实例――图片地图（热区链接）课堂实例――图片地图（热区链接） 图片地图主要用来在一幅图片内部的不同区域上设置超链接，设置图片地图时，要在图片上添加一系列的“热点”，这些热点可以具有各自不同的形状，而且可以为它们分别设置超链接。 矩形热点工具：创建一个矩形热点。 椭圆形热点工具：创建一个圆形热点。 多边形热点工具：创建一个不规则形状的热点。 1．绘制矩形热点 2．绘制椭圆形热点 3．绘制多边形热点返回目录锚点锚点　使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。 　创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。 １、创建命名锚记 1、在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的地方,执行下列操作之一： 　　* 选择“插入”>“命名锚记”。 　　* 在“插入”栏的“常用”类别中，单击“命名锚记”按钮。 　　出现“命名锚记”对话框。 2、在“锚记名称”文本框中，键入锚记的名称，并单击“确定”。锚记标记在插入点处出现。 ２、链接到命名锚记 　　在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像。在属性面板的“链接”文本框中，键入一个数字符号 (#) 和锚记名称。 练习： 纵向文字导航条练习： 纵向文字导航条　　制作一个纵向文字导航条，效果如图5-53所示。在制作这个实例时，需要先用表格布局并设置表格属性，然后输入纵向的导航文字，最好添加超级链接。纵向文字导航条返回目录nullnull超级链接的链接载体和链接目标页面属性的设置页面属性的设置　　从菜单栏选择“修改” →“页面属性”，或从属性面板中单击页面属性按钮，弹出页面属性设置对话框，进行背景、标题、页面边距等设置。返回目录