使用Dreamweaver制作简单页面剖析.pptx

使用Dreamweaver制作简单页面 —— 理论部分 技能展示 会使用Dreamweaver创建本地站点 会使用Dreamweaver新建和保存页面 会使用Dreamweaver添加页面元素 会使用Dreamweaver修改页面元素属性 了解网页标记与页面元素之间的关素 本章结构 认识开发环境和创建本地站点 编辑页面 开发环境和工具的介绍 页面属性的设置 创建本地站点 文本格式化和段落 使用Dreamweaver创建网页 站点目录结构 使用Dreamweaver制作简单网页 制作页面 网页的元素和组成 插入表格和图像 框架布局 为什么需要制作网页 开发环境和开发工具介绍 Dreamweaver CS3 菜单栏 插入栏 文档工具栏 面板组 属性检查器 文档窗口 创建本地站点 选择“基本”选项，按推荐步骤创建站点 在站点中创建文件夹 在站点中创建文件 选择“高级”选项，创建本地站点 使用Dreamweaver创建网页 创建页面的方法 方法一：选择菜单“文件” →“新建”的方式 方法二：在“文件”面板中右击的方式 网页元素和组成 DOCTYPE声明 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 网页字符编码、文档特性描述 meta http-equiv=Content-Type content=text/html; charset=utf-8 / html、head、title、body 文档内容在html标记中 head标头区放link、title、meta、style等标记 标题在title标记中 网页中显示的内容在body标记中 表格 所谓表格就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。行与列的交叉区域称为单元格，网页中的元素通常都被放置在这些单元格中，以使其“各安其位”。 此处表示未明确设置单元格的宽度 此处显示了表格的宽度。如果只显示一个“▼”符号，表示未明确设置表格宽度 创建表格 在网页中插入表格的方法 方法一：选择菜单“插入记录” →“表格” 方法二：单击插入栏“常用” 类别中“表格”按钮 设置表格和单元格的属性 选中表格后，使用属性面板可以修改表格的行、列、宽、高，以及填充、间距等。 在单元格中单击，属性面板中将显示相应单元格的属性。 插入图像 在网页中插入图像的方法 方法一：选择菜单“插入记录” →“图像” 方法二：单击插入栏“常用” 类别中“图像”按钮 设置图像属性 图像宽和高 图像对齐方式 插入水平线 插入水平线的方法 选择菜单“插入记录” →“HTML” →“水平线” 水平线的高 对齐方式 页面属性的设置 body,td,th { font-size: 12px; } body { margin-left: 0px; margin-top: 0px; } h1 { font-size: 16px; color: #FF0000; } 如何设置页面字体、颜色大小等 设置页面的边距、字体、大小 设置标题的字体大小、样式 编辑新闻主要内容 段落 换行方式 选择菜单“插入记录”→“HTML” →“特殊字符”→“换行符”，插入换行符br/ 按快捷键Shift+Enter快速输入一个换行符 单击按钮 ，插入换行符 直接按Enter键，生成p和/p标记换行 首行缩进 建立框架 　　1．定位光标在要插入框架集的窗口中。 　　2．执行以下操作之一： 　　?单击菜单栏中“插入”|“HTML”|“框架”命令，在子菜单中单击相应的框样式。 　　?在“插入”栏的“布局” 类别中，单击框架按钮右 侧的下拉按钮，弹出下拉 菜单，单击相应的框架集 图标。建立框架网页。 框架面板 　　（—）打开框架面板 　　单击菜单栏中“窗口”|“框架”命令，打开框架面板。在面板中标识了每个框的名称。 　　（二）框架面板的基本操作： 　　1．选择框架集：在“框架”面板中单击最外层的边框，使其出现粗黑边显示，则选中了框架集。 　　2．选择框架：在“框架”面板中单击要选择的框架，使其出现细黑边显示，则选中了框架。 设置框架的属性 　　（一）设置框架集属性：选中框架集，打开框集属性 　　1．边框选项设置 　　2．框架集中框架大小设置 　　（二）设置框架属性 　　选择框架后（如选择左侧框架），打开框架属性 保存框架 　　（一）保存框架集的操作： 　　1．在框架面板中，选择中要保存的框架