Dw网页设计课件2.ppt
《Dw网页设计课件2.ppt》由会员分享,可在线阅读,更多相关《Dw网页设计课件2.ppt(95页珍藏版)》请在三一文库上搜索。
1、通过本章学习,应该掌握以下内容: 1.Dreamweavercs4概述 2.用dreamweavercs4制作基本的网页,第2章,一、 Dreamweavercs4概述,1、Dreamweavercs4的安装 下载安装程序; 进行安装,2、 Dreamweavercs4的工作区 (1)标题栏; (2)菜单栏; (3)插入面板组; (4)文档工具栏; (5)标准工具栏; (6)文档窗口; (7)状态栏; (8)属性面板; (9)浮动面板。,3、创建站点 (1)站点的分类 本地站点和远程站点 本地站点:网页制作者制作网页和测试网页的一个总的文件夹。不能在互联网中浏览。 远程站点:是本地站点的一个映
2、射,结构基本相同,可以让任何上网的浏览者浏览的文件。,(2)创建本地站点 站点|新建站点 (3)管理站点 编辑站点; 复制和删除站点;,注意: 删除站点只是删除了根文件夹和dreamweaver 之间的关联,但是文件夹本身及其里面的内 容仍然存在。,4、用Dreamweavercs4创建文件 (1)主要的文件类型:HTML文件 (2)文件|保存(或者ctrl+s) (3)文件的命名一般使用英文字母和数字, 可以以数字开头,也不能在文件名中使用空格、特殊字符或标 点符号,文件名最好不要使用汉字,因为许多浏览器不支持汉字命名的文件。,二、制作基本的网页,一、文本标题 1共设置了6级标题,16级,每
3、级标题的字体大小依次递减 2设置标题方法: (1)选中文本或段落; (2)格式|段落; 属性|格式,下拉菜单选项; 插入面板|文本 练习举例,二、处理段落,1、输入文本 (1)直接输入 (2)复制:定位光标,编辑|粘贴 (3)文件|导入|word文档 (4)把word文档直接转换html文件,2、特殊字符,(1)定位光标 (2)“插入”面板|文本|字符:其他字符| (3)“插入”菜单|HTML|特殊字符 (4)键盘 (5)软键盘,3、插入日期,(1)插入|日期 (2)常用|插入日期按钮,4、插入水平线,页面上可以使用一条或者多条水平线来分隔文本和对象。 方法:插入|HTML|水平线 更改水平线
4、的颜色: ,5、文本的编辑,(1)方法:选中文本|属性 (2)改变文本的类型、样式和大小 (3)改变字体的颜色 (4)为文字设置更多的样式,6.文字的其他设置,(1)文本分段与换行 分段:enter 分行不分段:shift+enter (2)连续输入多个空格: 全角状态;ctrl+shift+空格; 编辑|首选参数|允许输入连续空格,(3)设置文本滚动 属性: Align:居左、居中、居右、靠上、靠下 Bgcolor:设置背景颜色 direction 表示滚动的方向,值可以是left,right,up,down,默认为left behavior 表示滚动的方式,值可以是scroll(连续滚动)
5、slide(滑动一次)alternate(来回滚动) loop 表示循环的次数,值是正整数, 默认为无限循环(loop=-1),scrollamount 表示运动速度,值是正整数,默认为6,单位是像素。 scrolldelay 表示停顿时间,值是正整数,默认为0,单位是毫秒 。 height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度 hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。 onmouseover=this.stop() 表示当鼠标移上区域的时候滚动停止,
6、 onmouseout=this.start()当鼠标移开的时候又继续滚动。,7、页面设置 8、首选参数(再讲 跟踪图像),跟踪图像: 可以在“跟踪图像”文本框中指定复制设计时作为参考的图像。该图像只供参考,当文件在浏览器中显示时并不出现。 调节“透明度”,确定跟踪图像的不透明度,从完全透明到完全不透明。,注意: 设置“跟踪图像”之后,若再设置页面背景图像,则在设计视图中看不到页面背景图像,预览时才能看到。,9、项目列表和编号列表,(1)创建列表 项目列表:无序列表 编号列表:有序列表 (2)列表的嵌套,三、插入图像,1、网页图像的一般格式 (1)GIF格式(图形交换格式) 带动画效果 (2)
7、JPG格式(联合图像专家组标准) 电子照片 (3)PNG格式(可移植网络图形) Photoshop中的图片,2、插入图像 (1)插入菜单|图像 (2)插入面板|常用|图像 操作举例 3、设置图像属性 注意: (1)图片文件最好独立存放于单独的文件夹。 (2)图片文件名尽量不使用汉字和特殊符号,否则可能导致图片在浏览器中不能显示。,4、插入其他图像元素 (1)插入图像占位符 准备好将最终图像添加到web页面之前使用的图形,在使用浏览器时,它将显示为一个红叉。 方法:插入面板|常用|插入图片下拉按钮|图像占位符 插入菜单|图像对象|图像占位符,(2)插入鼠标经过图像 插入|图像对象|鼠标经过图像,
8、注意:主图像和次图像大小要一致 如果不一致,将自动调整第二个图像的大小以匹配第一个图像的属性,举例:,dreamweaver精彩网页设计实例导航ch033.5,(3)插入导航条 功能:实现网页的导航 方法:插入|图像对象|导航条,注意:每个网页文件只能包含一个导航条,举例:,dreamweaver精彩网页设计实例导航ch022.3,四、插入超级链接,网站是由一个个的网页构成的,网页之间不是彼此孤立而是相互关联的。 网页之间的关联一般是通过“超级链接”的方式。,超级链接由两部分组成:链接载体和链接目标。 链接载体:页面中引导浏览者去单击某个超级链接的载体,是一种指针。 许多页面元素都可以作为链接
9、的载体,如文本、图像等。 链接目标:超级链接的指向位置或文件URL。 它可以是任意的网络资源,如:页面、图像、声音、各种文件、程序、E-mail,甚至是页面中的某个位置(即锚点)。,链接目标的分类:,_blank:将链接的文档载入一个新打开的浏览器窗 口。 _parent:将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架,则所链接的文档载入整个浏览器窗口。 _self:将链接的文档载入链接所在的同一框架或窗口。此目标是默认的,所以通常不需要指定它。 _top:将链接的文档载入整个浏览器窗口,从而删除所有框架。,注意:当页面上无框架时, _top、 _parent、
10、 _self这几个选项的表现是一样的,都是在原来的窗口打开网页。,1、文字链接,方法: (1)选中文本,属性|链接文本框中直接输入网页路径 (2)选中文本,属性|指向链接按钮 (3)选中文本,属性|浏览文件按钮 (4)选中文本,常用|链接按钮 (5)“插入”菜单|超级链接,2、图像链接,方法:选中图片,方法同上。,3、使用图像地图,定义:一张地图,当单击图片中的不同区域时,分别打开不同的URL页面。,创建圆形热点 创建矩形热点 创建多边形热点 移动热点区域,4、内部链接与外部链接,内部链接:链接目标文件位于同一个站点内部,也称为相对地址链接。 外部链接:链接目标文件位于站点之外或直接位于Int
11、ernet上,也成为绝对地址链接。,5、电子邮件链接,方法: (1)“插入”菜单|电子邮件链接 (2)常用|“插入电子邮件链接”按钮 (3)属性链接文本框中直接输入mailto:电子邮件名称,6、命名锚点链接,功能:常用于内容庞大繁琐的网页,快速重定向网页特定的位置,比如:快速到首页、尾页或者网页中某篇文章处,便于浏览者查看网页内容。 创建过程分为两步:创建命名锚记和链接到命名锚记。,(1)创建锚记 “插入”菜单|命名锚记 或者 “插入”面板|常用|命名锚记 (2)创建链接 相同页面的链接:#锚记名称 不同页面的链接:链接目标路径#锚记名称 (再讲),8、空链接,在链接文本框中输入:# 作用:
12、自动将当前页面重置到页面的首端,即页面的开始处。,9、脚本链接,在链接文本框中直接输入: Javascript:后面跟一些Javascript代码或函数调用 Javascript:self.close( );,10、Dreaweaver3种链接路径,(1)绝对路径: 提供所链接文档的完整的URL (2)文档相对路径 省略掉对于当前文档和所链接的文档的都相同的绝对URL部分 (3)站点根目录相对路径 提供从站点的根文件夹到文档的路径,五、插入多媒体,1、插入音乐 方法一:超级链接到声音文件 方法二:嵌入声音文件到网页中 插入|媒体|插件,注意:用户浏览器端必须拥有辅助应用程序才能查看常见的视频格
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dw 网页 设计 课件
链接地址:https://www.31doc.com/p-2143423.html