《使用DW制作简单网页.ppt》由会员分享，可在线阅读，更多相关《使用DW制作简单网页.ppt（39页珍藏版）》请在知学网上搜索。

1、单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,专题三 使用DW制作简单网页,点击此处添加副标题,Dreamweaver基本介绍,壹,定义站点,貳,设置文件头,叁,使用文本,肆,使用Flash动画,陆,使用图像,伍,学习内容,About Dreamweaver,Dreamweaver是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web应用程序进行设计、编码和开发。,Dreamweaver是Adobe(Macromedia)公司出品的一种专业

2、化的网页创建工具,它采用所见即所得的编辑方式,通过特有的行为,模板,时间线等技术,能够快速高效地创建极具表现力和动感效果的网页,使网页创建过程变得简单.,DW设计网页的流程,整个网站的制作流程：在Photoshop或者Fireworks中作出效果图切图在Dreamweaver中添加文字，定义样式。,DW网站制作流程,01,新建站点站点文件命名定义页面属性插入表格定义页面大小转换到布局视图添加内容插入导航条转换到标准视图工作添加链接使用代码片断定义及应用CSS添加动态交互链接站点各个页面。,02,DW界面介绍,视图切换,代码提示,属性面板,标签选择器,锚点用于网页中的定位，如网页的上、中、下等；

3、图像占位符在需要使用图形的地方插入一个占位图形先,“,占领,”,着,“,地盘,”,；Fireworks HTML为用Fireworks软件切割出来的图片；交换图像为鼠标移上去时变为另一图片，增强动感；表格数据可以将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。,定义站点,Why,避免错误的出现：路径错误，链接错误,HOW,1.,建立一个文件夹用于存放网站的所有文件,2.,再按栏目分类,(,将图片放置在,image,文件夹中,),3.,命名规则：使用英文或者拼音命名,网页文件的后缀名,*.htm,或者,*.html,，,网站首页命名规则,index.htm,或者

4、default.htm,meta标签说明,壹,设置网页的编码,貳,设置文档标题,叁,定义关键字,肆,设置网页的刷新,陆,设置说明文字,伍,设置文件头,1、meta标签说明,属性名,值,说明,name,keywords,定义网页的关键词,description,提供网页的简短描述,robots,定义网页的搜索引擎索引方式,http-equiv,Content-type,定义用户的浏览器或相关设备如何显示将要加载的数据，,eg.,定义网页编码,refresh,用于刷新与跳转（重定向）页面,expires,用于网页缓存过期时间，一旦网页过期将服务器上重新下载页面,pragma,与,no-cache

5、用于定义页面缓存。,2、设置网页的编码,设置网页的编码,在所有情况下都用GB2312么？,设置网页的编码,2、设置网页的编码,3、设置文档标题,+我的个人主页+,4、定义关键字,01,多个关键字用逗号分隔开来。,03,关键字不宜太多，一般在5个以内。,02,输入的关键字能反映主页的内容,5、设置说明文字,说明文字和关键字一样，可供搜索引擎寻找网页。,内容尽量要简明扼要。,6、设置网页的刷新,打开网站后的若干秒内，让浏览器自动跳转到一个新网页。,用于需要经常需要刷新的网页。,注意,URL,的输入,设置文本格式,01,插入特殊符号,02,段落与换行,03,添加注释与空格,04,插入并设置水平线,

6、05,设置段落缩进,06,使用列表,07,二、使用文本,标题标签,1,内容,2,#代表字体大小，取值16,3,align属性设置对齐方式，left center right,4,字体标签,5,内容,6,、设置文本格式,、设置文本格式,字符标签,说明,.,粗体,.,斜体,.,对文本加下划线,.,对文本加强效果，相当于粗体,.,在当前文字大小的基础上再增大一级,.,在当前文字大小的基础上再减小一级,.,上标,.,下标,.,强调文本，通常以斜体显示,、设置文本格式,Dreamweaver CS4,Dreamweaver 8,文本属性设置窗口,01,颜色使用一个16进制的数值表示，如#FF0000，,

7、是颜色标志。,02,任何一种颜色都是由红绿蓝3个颜色通道按不同亮度的比例混合而成。,03,前两位代表颜色中红色的亮度,04,中间两位代表绿色通道的亮度,05,后面两位代表蓝色的亮度。,2,、插入特殊符号,空格,(,大于号,),(,小于号,),“,(,引号,),(,版权号,),换行符换行：，shift键+enter键,段落换行：标记，直接enter键,3、段落与换行,添加注释,使用中文全角输入法,添加空格,输入代码,4、添加注释与空格,语法：,01,width 设置宽度，单位px,02,size 设置厚度，,03,color 设置颜色,04,align 设置对齐方式,05,nosha

8、e 设置是否需要阴影,06,5、插入并设置水平线,6、使用列表,创建无序列表,创建有序列表,转换列表类型,01,网页中的图像种类,02,图像的HTML标记,03,图片与文字的对齐方式,04,调整图片大小、替换图像、Alt属性,05,鼠标经过图像（Rollover Image）,06,简单的图文混排,三、使用图像,01.,BMP（格式简单、图像信息丰富、不压缩）,02.,GIF（压缩比高、动画、像素图qq、256色）,03.,JPEG（压缩率极高、有损压缩、照片）,04.,PNG（透明显示、兼有gif和jpeg的色彩模式）,05.,参考文献 web图像格式简述,网页中的图像种类,图像的HTML标

9、记,01,在DW中新建站点,02,完成index.htm页面,03,网页标题为+我的个人网站+,04,插入图像，输入文字，做链接,05,使用meta标签，实现自动跳转,06,完成exapmle.htm页面,07,将article.txt中的文字作素材,08,文字,“,散文四季,”,使用标题1,居中,09,标题目录内容的文字分别使用有序列表，无序列表,10,春、夏、秋、冬分别实现简单图文混排。,课内练习,站点、文本、图像的使用,四、使用超链接,超链接的概念,超链接的HTML标记,超超链接的种类,关于文档路径,超链接的概念,指的是将分别独立的网页文档紧密地连接起来的不可见的连接线。,利用超级链接可

10、以实现在网页间和网页中的跳转,源端点,（源锚）,目标端点,（目标锚）,超级链接的结构,一个网址,一个网页,一幅图像,一段程序,页面中的某个位置,文字,图像,超链接的HTML标记,链接的,HTML,标记,链接文字,目标（,Target,）的说明：,_blank,为在新窗口中打开链接；站外链接,_parent,为当前文档的父级框架集中展开网页；,_seft,为在当前文档的框架集中展开页面；站内链接,_top,为上级窗口（使用多级框架时）,01,a:link（未访问）,02,a:active（正在访问）,03,a:visited（访问过）,04,a:hover（悬停时）,链接的四种状态,超链接的HT

11、ML标记,超链接的种类,外部链接（站点外部）,内部链接,E-mail,链接（,mailto:wjb?subject,=,“,邮件标题,”,）,锚点链接,图像热区,创建空链接,锚点链接,作用：当网页文章特别长时，快速定位,方法：,1,、建立锚点链接,2,、创建到锚点的链接,内容,注意：,1,、同一网页内，锚点的名称是唯一的,2,、在链接锚时，引用的锚名称是大小写敏感的,3,、链接和锚都不能嵌套,绝对路径（使用完整的url地址）,01,根相对路径,/index.htm,03,相对路径,index.htm,./index.htm,02,关于文档路径,01.,将example.htm另存为example2.htm,02.,练习使用站内链接，站外链接，E-mail链接，锚点链接，,03.,地图素材为china_map.gif,课内练习,超链接的使用,