课件html部分培训解读.pptVIP

主要内容 课程概述 学习资料 网页相关知识 网页的基本结构 1、课程概述 网页三剑客： Dreamweaver ：“所见即所得”的可视化网站开发工具。 Photoshop：以设计和处理平面图片为特长。 Flash：以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。 网页设计与制作 30课时 本课程分为4个部分，安排如下： （1）HTML部分 （6学时） 网页设计基础知识、HTML。 （2）Dreamweaver部分 （4学时） Dreamweaver基本操作、网站设计综述。 （3）CSS部分 （16学时） CSS基础、Dreamweaver中使用CSS、盒模型、DIV+CSS。 （4）综合部分 （4学时） 网站综合设计项目 综合案例 学习资料 w3school.chm css2.0参考手册.chm 布啦布啦网站 网页相关知识 页面浏览过程 浏览器 静态和动态页面 浏览器（Browser） IE 6.0 7.0 8.0 Firefox 更多…… 完成的网页应在多种浏览器中都有较好的浏览效果。 现实中的网页 静态网页 动态网页 可从文件的扩展名来判断 静态网页的URL的后缀是.htm、.html、.shtml、.xml等; 动态网页的URL的后缀是.asp、 .aspx、.jsp、.php、 .perl、.cgi等。 什么是HTML文件？ HTML的英文全称是Hyper Text MarkUp Language，中文叫做“超文本标记语言”。 一个HTML文件的后缀名是.htm或者是.html。 用记事本就可以编写HTML文件。 HTML的标记 实例1 用记事本写第一个网页 实例3 添加背景颜色 body style=background-color:#006600 我有背景颜色了，哈哈~ /body 上节课知识点复习 html标记长什么样子？ 网页的基本结构是什么？ 常用的标记有哪些？ 主要内容 图片 超链接 表格 表单 综合练习续1：电影介绍 表格 表格标记 表格的基本结构 表格的属性 网页中常见其身影-1 网页中常见其身影-2 网页中常见其身影-3 课堂测试 4-网页设计与制作 —使用Dreamweaver编辑网页 主要内容 DW面板 站点 基本操作 多媒体文件（音乐、视频和flash） Dreamweaver初始界面 面板介绍 DW中标准HTML文件结构 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title /head body /body /html 站点 在Dreamweaver中，站点不仅可以表示Web站点，还可以表示Web站点中文档的本地存储位置。 在开始构建Web站点之前，用户需要先创建站点文档的本地存储位置，利用Dreamweaver中的站点可以组织与Web站点相关的所有文档，跟踪和维护链接，管理文件，共享文件，还可将站点文件传输到Web服务器上。 拓展：建立站点文件结构 website(站点名称) images music pages flash video index.html 实例1 创建站点 基本操作 文字 图片 超链接 表格 表单 自动生成代码与手写代码的关系 同根同源（只是操作方式不同） 万变不离其宗 实例2 基本操作-电影介绍 学习重点 网页标题 文字复制 分段 换行 标题设置 无序列表 插入图片 超链接 随堂测试（10分钟） 实例2 表格制作 实例1 表格的基本标记 table border=”1” caption期末成绩/caption tr th学号/th th姓名/th th成绩/th /tr tr td01/td td张三/td td85/td /tr tr td02/td td李四/td td95/td /tr /table 网页设计与制作实例教程 表单 表单的功能 表单标记form 表单中常用的控件和属性 网页设计与制作实例教程 常见的表单身影1-登陆 网页设计与制作实例教程 常