使用DW制作简单网页ppt课件.ppt

1、专题三 使用DW制作简单网页,1,学习内容,Dreamweaver基本介绍 定义站点 设置文件头 使用文本 使用图像 使用Flash动画 使用音频 使用视频,2,About Dreamweaver,Dreamweaver是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web应用程序进行设计、编码和开发。 Dreamweaver是Adobe(Macromedia)公司出品的一种专业化的网页创建工具,它采用所见即所得的编辑方式,通过特有的行为,模板,时间线等技术,能够快速高效地创建极具表现力和动感效果的网页,使网页创建过程变得简单.,3,DW设计网页的流程,整个网站的制作流程：

2、在Photoshop或者Fireworks中作出效果图切图在Dreamweaver中添加文字，定义样式。 DW网站制作流程 新建站点站点文件命名定义页面属性插入表格定义页面大小转换到布局视图添加内容插入导航条转换到标准视图工作添加链接使用代码片断定义及应用CSS添加动态交互链接站点各个页面。,4,DW界面介绍,视图切换 代码提示 属性面板 标签选择器,5,锚点用于网页中的定位，如网页的上、中、下等；图像占位符在需要使用图形的地方插入一个占位图形先“占领”着“地盘” ；Fireworks HTML为用Fireworks软件切割出来的图片；交换图像为鼠标移上去时变为另一图片，增强动感；表格数据可以

3、将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。,6,定义站点,Why 避免错误的出现：路径错误，链接错误 HOW 1.建立一个文件夹用于存放网站的所有文件 2.再按栏目分类 (将图片放置在image文件夹中) 3.命名规则：使用英文或者拼音命名,网页文件的后缀名*.htm 或者*.html， 网站首页命名规则index.htm或者default.htm,7,设置文件头,1、meta标签说明 2、设置网页的编码 3、设置文档标题 4、定义关键字 5、设置说明文字 6、设置网页的刷新,8,1、meta标签说明, ,9,2、设置网页的编码,10,设置网页的编码,1

4、1,设置网页的编码,12,2、设置网页的编码,13,3、设置文档标题,+我的个人主页+,14,4、定义关键字,多个关键字用逗号分隔开来。 输入的关键字能反映主页的内容 关键字不宜太多，一般在5个以内。,15,5、设置说明文字,说明文字和关键字一样，可供搜索引擎寻找网页。 内容尽量要简明扼要。,16,6、设置网页的刷新,打开网站后的若干秒内，让浏览器自动跳转到一个新网页。 用于需要经常需要刷新的网页。 注意URL的输入,17,二、使用文本,、设置文本格式 、插入特殊符号 、段落与换行 、添加注释与空格 5、插入并设置水平线 6、设置段落缩进 7、使用列表,18,、设置文本格式,标题标签 内容 #

5、代表字体大小，取值16 align属性设置对齐方式，left center right 字体标签 内容,19,、设置文本格式,20,、设置文本格式,Dreamweaver CS4,Dreamweaver 8,文本属性设置窗口,21,设置颜色,颜色使用一个16进制的数值表示，如#FF0000，“#”是颜色标志。 任何一种颜色都是由红绿蓝3个颜色通道按不同亮度的比例混合而成。 前两位代表颜色中红色的亮度 中间两位代表绿色通道的亮度 后面两位代表蓝色的亮度。,22,2、插入特殊符号,23,3、段落与换行,段落换行：标记，直接enter键 换行符换行：，shift键+ enter键,24,4、添加注释

6、与空格,添加注释 添加空格 输入代码 使用中文全角输入法,25,5、插入并设置水平线,语法： width 设置宽度，单位px size 设置厚度 ， color 设置颜色 align 设置对齐方式 noshae 设置是否需要阴影,26,6、使用列表,创建无序列表 创建有序列表 转换列表类型,27,三、使用图像,网页中的图像种类 图像的HTML标记 图片与文字的对齐方式 调整图片大小、替换图像、Alt属性 鼠标经过图像（Rollover Image） 简单的图文混排,28,网页中的图像种类,BMP（格式简单、图像信息丰富、不压缩） GIF（压缩比高、动画、像素图qq、256色） JPEG（压缩率

7、极高、有损压缩、照片） PNG（透明显示、兼有gif和jpeg的色彩模式） 参考文献 web图像格式简述,29,图像的HTML标记,30,课内练习站点、文本、图像的使用,在DW中新建站点 完成index.htm页面 网页标题为+我的个人网站+ 插入图像，输入文字，做链接 使用meta标签，实现自动跳转 完成exapmle.htm页面 将article.txt中的文字作素材 文字“散文四季”使用标题1,居中 标题目录内容的文字分别使用有序列表，无序列表 春、夏、秋、冬分别实现简单图文混排。,31,四、使用超链接,超链接的概念 超链接的HTML标记 超超链接的种类 关于文档路径,32,超链接的概念

8、,指的是将分别独立的网页文档紧密地连接起来的不可见的连接线。 利用超级链接可以实现在网页间和网页中的跳转,源端点（源锚）,目标端点（目标锚）,超级链接的结构,一个网址 一个网页 一幅图像 一段程序 页面中的某个位置,文字 图像,33,超链接的HTML标记,链接的HTML标记 链接文字 目标（Target）的说明： _blank为在新窗口中打开链接；站外链接 _parent为当前文档的父级框架集中展开网页； _seft为在当前文档的框架集中展开页面；站内链接 _top为上级窗口（使用多级框架时）,34,超链接的HTML标记,链接的四种状态,a:link（未访问） a:active（正在访问） a:visited（访问过） a:hover（悬停时）,35,超链接的种类,外部链接 （站点外部） 内部链接 E-mail链接（mailto:?subject=“邮件标题”） 锚点链接 图像热区 创建空链接,36,锚点链接,作用：当网页文章特别长时，快速定位 方法： 1、建立锚点链接 2、创建到锚点的链接 内容 注意：1、同一网页内，锚点的名称是唯一的 2、在链接锚时，引用的锚名称是大小写敏感的 3、链接和锚都不能嵌套,37,关于文档路径,绝对路径（使用完整的url地址） Eg: