Web前端开发案例教程——HTML+CSS+JavaScript (6).pptVIP

使用Dreamweaver制作网页 第六章 学习目标 ?使用Dreamweaver实现图文混编 ?使用Dreamweaver实现表格 ?使用Dreamweaver实现表单 ?使用Dreamweaver实现框架 ?使用Dreamweaver工具实现样式表 6.1 Dreamweaver基础 Dreamweaver界面 Dreamweaver CS5的整体界面由标题栏、菜单栏、工具栏、文档窗口、属性面板、浮动面板等构成 基本标签 页面背景 超连接 地图图片 Flash多媒体 使用基本标签 新建一个HTML页面 设置页面背景、标题 插入图片 插入Flash 创建超连接 1、链接到其他文档 2、链接到同一文档的特定位置 插入图片 插入Flash 实例6-1：基本标签 换段、换行 格式化文本 文本颜色 字号大小 对其方式 插入特殊字符 插入空格 创建列表 Enter表示换段 Shift+Enter表示换行 1、项目列表 2、编号列表 基本标签 换行了 换段了 有序列表 无序列表 实例6-1：基本标签 6.2表格 表格布局是为了精确定位、合理安排网页中的文字、图片等元素，是在一个限定的面积范围内合理安排、布置图像、文字等元素的位置，从而设计出版式漂亮的页面。 表格的使用 创建跨行或跨列的表格 1、 “插入” ?”表格” 2、 输入6行3列 3、 选中要合并的单元格 4、 右击?”表格” ?”合并单元格” 设置表格背景 设置单元格背景色和对齐方式 1、选中整个表格 2、在属性面板里设置 1、光标定位到单元格 2、在属性面板里设置 实例6-2：表格使用 6.3表单 表格布局 表单 单行文本框 密码框 单选按钮 下拉列表 提交按钮 表单的使用 插入表单 设置表单名 表单要提交到的地址 设置表单发送数据的方法 FORM action=register.html method=post name=register id=register /FORM 表单的使用 在表单域中插入表格 1、在表单域里单击鼠标 2、插入9行1列的表格 3、合并单元格 4、设置表格的相关属性 表单里插入表格的效果 实例6-3：表单使用 表单的使用 在单元格里插入表单元素 1、光标定位到要插入文本域的位置 2、 插入单行文本域 3、 插入密码文本域 4、 插入单行文本域 5、 插入单选按钮 表单的使用 在单元格里插入表单元素 6、插入复选框 7、插入下拉菜单列表 8、插入“重填”按钮和“提交”按钮 9、 插入一个文件域 列表框属性 列表框属性 列表框属性 列表框属性 框架网页 顶部框架(top.html) 左侧框架(left.html) 右侧框架(right.html) 框架集页面(FrameSet.thm) 制作框架网页 新建框架网页 1、选择“文件” ?“新建” 2、选择框架集 3、选择一个合适的框架集 4、单击“创建” 设置框架集的属性 1、设置框架集的边框属性 2、改变框架的宽度和高度