HTML学习教005(北大青鸟)(精).ppt

回顾 常用样式属性有哪些？ 超链接样式有哪几种？ 内嵌样式表、行内样式表、外部样式的区别？ 预习检查 本章任务 本章目标 什么是基本标签 如何使用基本标签 教员逐一演示如下操作： 新建一个HTML页面 设置页面背景、标题 插入图片 插入Flash 创建超连接 什么是基本标签 如何使用基本标签 教员逐一演示其他标签的操作： 换段、换行 格式化文本 文本颜色 字号大小 对其方式 插入特殊字符 插入空格 创建列表 什么是表格布局 表格的使用 教员演示创建表格布局页面： 创建跨行或跨列的表格 1、 “插入” ?”表格” 2、 输入7行4列 3、 选中要合并的单元格 4、 右击?”表格” ?”合并单元格” 设置表格背景 设置单元格背景色和对齐方式 表格的使用 教员演示创建表格布局页面操作： 插入横线 1、 光标定位到第3行 2、选择”代码” 3、在单元格里输入如下代码 4、同理，插入第2条虚线 小结1 使用Dreamweaver制作如下图所示的页面效果 什么是表单 表单的使用 教员演示使用表格对表单的布局操作： 插入表单 表单的使用 在表单域中插入表格 1、在表单域里单击鼠标 2、插入10行2列的表格 3、合并最后两行单元格 4、设置表格的相关属性 表单的使用 在单元格里插入表单元素 1、光标定位到要插入文本域的位置 2、 插入单行文本域 3、 插入密码文本域 4、 再次插入密码文本域 5、 插入单行文本域 6、 插入2个单选按钮 表单的使用 在单元格里插入表单元素 7、插入3个复选框 8、插入2个单行文本域和一个下拉菜单列表 9、插入“重填”按钮和“提交”按钮 10、 插入一个文件域 11、 插入一个文本域 小结2 使用Dreamweaver制作如下图所示的页面效果 框架网页 制作框架网页 教员演示制作框架网页： 新建框架网页 1、选择“文件” ?“新建” 2、选择框架集 3、选择一个合适的框架集 4、单击“创建” 设置框架集的属性 1、设置框架集的边框属性 2、改变框架的宽度和高度 制作框架网页 教员演示制作框架网页： 添加每个框架的内容 1、单击“框架” ?”窗口”，打开框架面板 2、为每个框架指定网页文件 制作框架网页 教员演示制作框架网页的步骤： 设置超链接 1、在left.html中设置超链接文本 2、在属性窗口中，选择链接网页文件和输入目标框架名 3、同理，设置另两个链接 预览网页 什么是样式 制作样式表 创建样式表 教员演示创建样式表： 1、选择“窗口” ?“CSS样式” 2、在“CSS样式”面板中，右击?新建 3、分别新建标签body、a和table的样式 4、分别新建类.picButton和类.textBorder的样式 制作样式表 应用样式表 教员演示两种应用样式表方式： 1、打开要应用样式的网页 2、在属性面板中单击“样式”下拉框 3、选择附加样式 4、选择要引入的样式文件 小结3 使用Dreamweaver制作如下图所示的页面效果 * * 第五章 使用Dreamweaver制作网页 使用Dreamweaver如何实现插入图像和文本？ 使用Dreamweaver如何制作样式表？ 制作点卡购买页面 制作用户注册页面 制作客户中心页面 点卡购买页面 用户注册页面 客户中心页面 会用Dreamweaver实现已学的各类HTML标签 图像、文本、列表标签 表格 表单 框架 样式表 网页标题 页面背景 超连接 地图图片 Flash多媒体 如何实现这样的页面？ 演示示例1：基本标签的使用1 1、链接到其他文档 2、链接到同一文档的特定位置 格式化文本 空 格 换段了 换行了 无序列表 有序列表 如何实现这样的页面？ 演示示例2：基本标签的使用2 Enter表示换段 Shift+Enter表示换行 1、项目列表 2、编号列表 跨4列单元格 跨3行单元格 表格背景色 单元格背景图像 单元格背景色 单元格内容居中对其 使用表格进行布局时，一般把表格边框宽度设为0，还有单元格的填充和间距也设为0。 如何实现这样的表格布局？ 1、选中整个表格 2、在属性面板里设置 1、光标定位到单元格 2、在属性面板里设置 演示示例3：表格的使用 选择“代码”，切换到“代码”视图 HR noshade=noshade style=border:1px #CCCCCC dashed / 练习答案 练习页面 4行1列的表格 一共有4张图片 表格的cellspacing和cellpadding属性都设为0 表格布局 表单 单行文本框 密码框 单选按钮 复选框 下拉列表 重置按钮 提交按钮 文件域 多行文本域 如何实现这样的表格对表单的布局？ 设置表单名