DW制作简单网页.ppt

使用列表 创建无序列表 创建有序列表 转换列表类型 三、使用图像 网页中的图像种类 图像的HTML标记 图片与文字的对齐方式 调整图片大小、替换图像、Alt属性 鼠标经过图像（Rollover Image） 简单的图文混排 网页中的图像种类 BMP（格式简单、图像信息丰富、不压缩） GIF（压缩比高、动画、像素图qq、256色） JPEG（压缩率极高、有损压缩、照片） PNG（透明显示、兼有gif和jpeg的色彩模式） 参考文献 web图像格式简述 图像的HTML标记 img src=“路径” alt=“替代文字” width=“” height=“” align=“” 需要大家多练习 谢谢大家 大家先了解一下 HTML的基本结构 HTML的基本语法 常用HTML标签 HTML结构 html标签每个文档必须使用，浏览器遇到html开始解释，/html结束解释。 head部分用于对页面中使用的字符集、样式、窗口标题、脚本语言等进行说明和设置。 body部分是文档的主体，包含绝大部分html元素。 HTML的基本语法 标签 HTML通过标签文档的内容和外观，标签就是HTML的命令。 标签以开始，以/结束 eg. table/table　a/a div/div　 标签必须是闭合的。大部分成对出现，ex.br / hr / 标签大小写无关。但建议html代码小写 HTML的基本语法 属性语法 属性的值需要在双引号中 属性名和属性值必须成对出现 属性语法 标签名 属性名1＝“属性值” 　属性名2 ＝“属性值” 内容/标签名 Eg. a href=“” target=“_blank”超文本/a HTML常用基本标签 meta标签 在网页的HTML源代码中一个重要的代码“”（即通常所说的META标签）。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。 文本标签 h# font 分隔标签 p br hr 列表标签 超链接标签 图像标签 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标签说明 属性名 值 说明 name keywords 定义网页的关键词 description 提供网页的简短描述 robots 定义网页的有哪些信誉好的足球投注网站引擎索引方式 http-equiv Content-type 定义用户的浏览器或相关设备如何显示将要加载的数据，eg.定义网页编码 refresh 用于刷新与跳转（重定向）页面 expires 用于网页缓存过期时间，一旦网页过期将服务器上重新下载页面 pragma与no-cache 用于定义页面缓存。 meta http-equiv=Content-Type content=text/html; charset=utf-8 / meta name=keywords content=网页设计，设计 / 设置网页的编码 meta http-equiv=Content-Type content=text/html; charset=utf-8 / 设置网页的编码 在所有情况下