[专题三使用制作简单.pptVIP

内容回顾 web的工作原理 HTML的基本结构 HTML的基本语法 常用HTML标签 DW界面介绍 定义站点 文件头meta标签说明 本次课 1.2　Web的工作原理 World Wide Web in Plain English ２、 HTML、CSS、JavaScript综述 3、HTML的基本语法 标签 HTML通过标签文档的内容和外观，标签就是HTML的命令。 标签以开始，以/结束 eg. table/table　a/a　 标签必须是闭合的。大部分成对出现，ex.br / hr / 标签大小写无关。但建议html代码小写 3、HTML的基本语法 属性语法 属性的值需要在双引号中 属性名和属性值必须成对出现 属性语法 标签名 属性名1＝“属性值” 　属性名2 ＝“属性值” 内容/标签名 Eg. a href=“” target=“_blank”超文本/a 4、HTML常用基本标签 meta标签 文本标签 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.命名规则：使用英文或者拼音命名 设置文件头 1、meta标签说明 2、设置网页的编码 3、设置文档标题 4、定义关键字 5、设置说明文字 6、设置网页的刷新 1、meta标签说明 2、设置网页的编码 设置网页的编码 设置网页的编码 2、设置网页的编码 3、设置文档标题 4、定义关键字 多个关键字用逗号分隔开来。 输入的关键字能反映主页的内容 关键字不宜太多，一般在5个以内。 5、设置说明文字 说明文字和关键字一样，可供搜索引擎寻找网页。 内容尽量要简明扼要。 6、设置网页的刷新 打开网站后的若干秒内，让浏览器自动跳转到一个新网页。 用于需要经常需要刷新的网页。 注意URL的输入 二、使用文本 １、设置文本格式 ２、插入特殊符号 ３、段落与换行 ４、添加注释与空格 5、插入并设置水平线hr 6、设置段落缩进blockquote 7、使用列表 １、设置文本格式 标题标签 h# align=“对齐方式”内容/h# #代表字体大小，取值1~6 align属性设置对齐方式，left center right 字体标签 font face=“字体类型” size=“字号” color=“颜色”内容/font １、设置文本格式 １、设置文本格式 文本属性设置窗口 设置颜色 颜色使用一个16进制的数值表示，如#FF0000，“#”是颜色标志。 任何一种颜色都是由红绿蓝3个颜色通道按不同亮度的比例混合而成。 前两位代表颜色中红色的亮度 中间两位代表绿色通道的亮度 后面两位代表蓝色的亮度。 2、插入特殊符号 3、段落与换行 段落换行：p标记，直接enter键 换行符换行：br /，shift键+ enter键 4、添加注释与空格 添加注释 !--注释内容 -- 添加空格 输入代码nbsp; 使用中文全角输入法 5、插入并设置水平线 语法：hr width=“” size=“” color=“” aligh=“” noshade / width 设置宽度，单位px size 设置厚度 ， color 设置颜色 align 设置对齐方式 noshae 设置是否需要阴影 6、使用列表 创建无序列表 创建有序列表 转换列表类型 三、使用图像 网页中的图像种类 图像的HTML标记 图片与文字的对齐方式 调整图片大小、