《使用DW制作简单网课件.ppt》由会员分享，可在线阅读，更多相关《使用DW制作简单网课件.ppt（39页珍藏版）》请在三一办公上搜索。
1、专题三 使用DW制作简单网页,1,学习内容,Dreamweaver基本介绍定义站点设置文件头使用文本使用图像使用Flash动画使用音频使用视频,2,About Dreamweaver,Dreamweaver是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web应用程序进行设计、编码和开发。Dreamweaver是Adobe(Macromedia)公司出品的一种专业化的网页创建工具,它采用所见即所得的编辑方式,通过特有的行为,模板,时间线等技术,能够快速高效地创建极具表现力和动感效果的网页,使网页创建过程变得简单.,3,DW设计网页的流程,整个网站的制作流程：在Photosh
2、op或者Fireworks中作出效果图切图在Dreamweaver中添加文字，定义样式。 DW网站制作流程 新建站点站点文件命名定义页面属性插入表格定义页面大小转换到布局视图添加内容插入导航条转换到标准视图工作添加链接使用代码片断定义及应用CSS添加动态交互链接站点各个页面。,4,DW界面介绍,视图切换代码提示属性面板标签选择器,5,锚点用于网页中的定位，如网页的上、中、下等；图像占位符在需要使用图形的地方插入一个占位图形先“占领”着“地盘” ；Fireworks HTML为用Fireworks软件切割出来的图片；交换图像为鼠标移上去时变为另一图片，增强动感；表格数据可以将其它文件的数据转化为
3、表格，插进网页；标签选择器可以插入其它不常用的HTML标签。,6,定义站点,Why 避免错误的出现：路径错误，链接错误HOW1.建立一个文件夹用于存放网站的所有文件 2.再按栏目分类 (将图片放置在image文件夹中)3.命名规则：使用英文或者拼音命名,网页文件的后缀名*.htm 或者*.html， 网站首页命名规则index.htm或者default.htm,7,设置文件头,1、meta标签说明2、设置网页的编码3、设置文档标题4、定义关键字5、设置说明文字6、设置网页的刷新,8,1、meta标签说明,9,2、设置网页的编码,10,设置网页的编码,11,设置网页的编码,12,2、设置网页的编
4、码,13,3、设置文档标题,+我的个人主页+,14,4、定义关键字,多个关键字用逗号分隔开来。输入的关键字能反映主页的内容关键字不宜太多，一般在5个以内。,15,5、设置说明文字,说明文字和关键字一样，可供搜索引擎寻找网页。内容尽量要简明扼要。,16,6、设置网页的刷新,打开网站后的若干秒内，让浏览器自动跳转到一个新网页。用于需要经常需要刷新的网页。注意URL的输入,17,二、使用文本,、设置文本格式、插入特殊符号、段落与换行、添加注释与空格 5、插入并设置水平线 6、设置段落缩进 7、使用列表,18,、设置文本格式,标题标签 内容#代表字体大小，取值16align属性设置对齐方式，left
5、center right字体标签 内容,19,、设置文本格式,20,、设置文本格式,Dreamweaver CS4,Dreamweaver 8,文本属性设置窗口,21,设置颜色,颜色使用一个16进制的数值表示，如#FF0000，“#”是颜色标志。任何一种颜色都是由红绿蓝3个颜色通道按不同亮度的比例混合而成。前两位代表颜色中红色的亮度中间两位代表绿色通道的亮度后面两位代表蓝色的亮度。,22,2、插入特殊符号,23,3、段落与换行,段落换行：标记，直接enter键换行符换行：，shift键+ enter键,24,4、添加注释与空格,添加注释添加空格输入代码使用中文全角输入法,25,5、插入并设置水
6、平线,语法：width 设置宽度，单位pxsize 设置厚度 ，color 设置颜色align 设置对齐方式noshae 设置是否需要阴影,26,6、使用列表,创建无序列表创建有序列表转换列表类型,27,三、使用图像,网页中的图像种类图像的HTML标记图片与文字的对齐方式调整图片大小、替换图像、Alt属性鼠标经过图像（Rollover Image）简单的图文混排,28,网页中的图像种类,BMP（格式简单、图像信息丰富、不压缩）GIF（压缩比高、动画、像素图qq、256色）JPEG（压缩率极高、有损压缩、照片）PNG（透明显示、兼有gif和jpeg的色彩模式）参考文献 web图像格式简述,29,
7、图像的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: http:/相对路径 index.htm ./index.htm根相对路径 /index.htm,38,课内练习超链接的使用,将example.htm另存为example2.htm练习使用站内链接，站外链接，E-mail链接，锚点链接，地图素材为china_map.gif,39,
