《DW制作简单网页》PPT课件.ppt

《《DW制作简单网页》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《DW制作简单网页》PPT课件.ppt（36页珍藏版）》请在装配图网上搜索。

大家先了解一下,HTML的基本结构 HTML的基本语法 常用HTML标签,HTML结构,html标签每个文档必须使用，浏览器遇到开始解释，结束解释。 head部分用于对页面中使用的字符集、样式、窗口标题、脚本语言等进行说明和设置。 body部分是文档的主体，包含绝大部分html元素。,HTML的基本语法,标签 HTML通过标签文档的内容和外观，标签就是HTML的命令。 标签以开始，以结束 eg. 标签必须是闭合的。大部分成对出现，ex. 标签大小写无关。但建议html代码小写,HTML的基本语法,属性语法 属性的值需要在双引号中 属性名和属性值必须成对出现 属性语法 内容 Eg. 超文本,HTML常用基本标签,meta标签 在网页的HTML源代码中一个重要的代码“”（即通常所说的META标签）。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。 文本标签 分隔标签 列表标签 超链接标签 图像标签,DW基本内容,Dreamweaver基本介绍 定义站点 设置文件头 使用文本 使用图像 使用Flash动画 使用音频 使用视频,About Dreamweaver,Dreamweaver是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web应用程序进行设计、编码和开发。 Dreamweaver是Adobe(Macromedia)公司出品的一种专业化的网页创建工具,它采用所见即所得的编辑方式,通过特有的行为,模板,时间线等技术,能够快速高效地创建极具表现力和动感效果的网页,使网页创建过程变得简单.,DW设计网页的流程,整个网站的制作流程：在Photoshop或者Fireworks中作出效果图→切图→在Dreamweaver中添加文字，定义样式。 DW网站制作流程 新建站点→站点文件命名→定义页面属性→插入表格→定义页面大小→转换到布局视图→添加内容→插入导航条→转换到标准视图工作→添加链接→使用代码片断→定义及应用CSS→添加动态交互→链接站点各个页面。,DW界面介绍,视图切换 代码提示 属性面板 标签选择器,定义站点,Why 避免错误的出现：路径错误，链接错误 HOW 1.建立一个文件夹用于存放网站的所有文件 2.再按栏目分类 (将图片放置在image文件夹中) 3.命名规则：使用英文或者拼音命名,,网页文件的后缀名*.htm 或者*.html， 网站首页命名规则index.htm或者default.htm,设置文件头,1、meta标签说明 2、设置网页的编码 3、设置文档标题 4、定义关键字 5、设置说明文字 6、设置网页的刷新,meta标签说明,,设置网页的编码,,设置网页的编码,设置网页的编码,,,,,,设置网页的编码,设置文档标题,+++我的个人主页+++,定义关键字,多个关键字用逗号分隔开来。 输入的关键字能反映专题的内容 关键字不宜太多，一般在5个以内。,,设置说明文字,说明文字和关键字一样，可供搜索引擎寻找网页。 内容尽量要简明扼要。,,设置网页的刷新,打开网站后的若干秒内，让浏览器自动跳转到一个新网页。 用于需要经常需要刷新的网页。 注意URL的输入,,二、使用文本,１、设置文本格式 ２、插入特殊符号 ３、段落与换行 ４、添加注释与空格 5、插入并设置水平线 6、设置段落缩进 7、使用列表,设置文本格式,标题标签 内容 #代表字体大小，取值1~6 align属性设置对齐方式，left center right 字体标签 内容,设置文本格式,设置文本格式,Dreamweaver CS4,Dreamweaver 8,文本属性设置窗口,设置颜色,颜色使用一个16进制的数值表示，如#FF0000，“#”是颜色标志。 任何一种颜色都是由红绿蓝3个颜色通道按不同亮度的比例混合而成。 前两位代表颜色中红色的亮度 中间两位代表绿色通道的亮度 后面两位代表蓝色的亮度。,插入特殊符号,段落与换行,段落换行：标记，直接enter键 换行符换行：，shift键+ enter键,添加注释与空格,添加注释 添加空格 输入代码 使用中文全角输入法,插入并设置水平线,语法： width 设置宽度，单位px size 设置厚度 ， color 设置颜色 align 设置对齐方式 noshae 设置是否需要阴影,使用列表,创建无序列表 创建有序列表 转换列表类型,三、使用图像,网页中的图像种类 图像的HTML标记 图片与文字的对齐方式 调整图片大小、替换图像、Alt属性 鼠标经过图像（Rollover Image） 简单的图文混排,网页中的图像种类,BMP（格式简单、图像信息丰富、不压缩） GIF（压缩比高、动画、像素图qq、256色） JPEG（压缩率极高、有损压缩、照片） PNG（透明显示、兼有gif和jpeg的色彩模式） 参考文献 web图像格式简述,图像的HTML标记,,需要大家多练习,谢谢大家,