使用Dreamweaver制作简单页面

1、 理论部分技能展示技能展示会使用会使用Dreamweaver创建本地站点创建本地站点会使用会使用Dreamweaver新建和保存页面新建和保存页面会使用会使用Dreamweaver添加页面元素添加页面元素会使用会使用Dreamweaver修改页面元素属性修改页面元素属性了解网页标记与页面元素之间的关素了解网页标记与页面元素之间的关素本章结构本章结构认识开发环境和认识开发环境和创建本地站点创建本地站点编辑页面编辑页面开发环境和工具的介绍开发环境和工具的介绍页面属性的设置页面属性的设置创建本地站点创建本地站点文本格式化和段落文本格式化和段落使用使用Dreamweaver创建网页创建网页站点目录结构

2、站点目录结构使用使用Dreamweaver制作简单网页制作简单网页制作页面制作页面网页的元素和组成网页的元素和组成插入表格和图像插入表格和图像框架布局框架布局为什么需要制作网页为什么需要制作网页Dreamweaver CS3菜单栏菜单栏插入栏插入栏文档工具栏文档工具栏面板组面板组属性检查器属性检查器文档窗口文档窗口创建本地站点创建本地站点选择“基本”选项，按推荐步骤创建站点在站点中创建文件夹在站点中创建文件 选择“高级”选项，创建本地站点创建页面的方法创建页面的方法方法一：选择菜单方法一：选择菜单“文件文件” “新建新建”的方式的方式方法二：在方法二：在“文件文件”面板中右击面板中右击的方式的

3、方式DOCTYPE声明声明网页字符编码、文档特性描述网页字符编码、文档特性描述html、head、title、body文档内容在文档内容在html标记中标记中head标头区放标头区放link、title、meta、style等标记等标记标题在标题在title标记中标记中网页中显示的内容在网页中显示的内容在body标记中标记中所谓表格就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。行与列的交叉区域称为单元格，网页中的元素通常都被放置在这些单元格中，以使其“各安其位”。 此处表示未明确设置单元格的宽度 此处显示了表格的宽度。如果只显示一个“”符号，表示未明确

4、设置表格宽度 在网页中插入表格的方法在网页中插入表格的方法方法一：选择菜单方法一：选择菜单“插入记录插入记录” “表格表格”方法二：单击插入栏方法二：单击插入栏“常用常用” 类别中类别中“表格表格”按钮按钮选中表格后，使用属性面板可以修改表格的行、列、宽、高，以及填充、间距等。 在单元格中单击，属性面板中将显示相应单元格的属性。在网页中插入图像的方法在网页中插入图像的方法方法一：选择菜单方法一：选择菜单“插入记录插入记录” “图像图像”方法二：单击插入栏方法二：单击插入栏“常用常用” 类别中类别中“图像图像”按钮按钮设置图像属性设置图像属性图像宽和高图像宽和高图像对齐方式图像对齐方式插入插入水

5、平线的方法水平线的方法选择菜单选择菜单“插入记录插入记录” “HTML” “水平线水平线”水平线的高水平线的高对齐方式对齐方式body,td,th font-size: 12px; body margin-left: 0px;margin-top: 0px; h1 font-size: 16px;color: #FF0000; 如何设置页面字体、颜色大小等如何设置页面字体、颜色大小等设置页面的边距、字体、大小设置页面的边距、字体、大小设置标题的字体大小、样式设置标题的字体大小、样式编辑新闻主要内容编辑新闻主要内容换行方式换行方式选择菜单选择菜单“插入记录插入记录”“HTML” “特殊字符特殊字

6、符”“换行符换行符”，插，插入换行符入换行符按快捷键按快捷键Shift+Enter快速输入一个换行符快速输入一个换行符单击按钮单击按钮 ，插入换行符，插入换行符直接按直接按Enter键，生成键，生成和和标记换行标记换行首行缩进首行缩进1定位光标在要插入框架集的窗口中。定位光标在要插入框架集的窗口中。2执行以下操作之一：执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“HTML”|“框架框架”命令，在子菜命令，在子菜单中单击相应的框样式。单中单击相应的框样式。在在“插入插入”栏的栏的“布局布局”类别中，单击框架按钮右类别中，单击框架按钮右侧的下拉按钮，弹出下拉侧的下拉按钮，弹出下拉菜单，

7、单击相应的框架集菜单，单击相应的框架集图标。建立框架网页图标。建立框架网页。（）打开框架面板）打开框架面板单击菜单栏中单击菜单栏中“窗口窗口”|“框架框架”命令，打开框架面板。在面板中命令，打开框架面板。在面板中标识了每个框的名称。标识了每个框的名称。（二）框架面板的基本操作：（二）框架面板的基本操作：1选择框架集：在选择框架集：在“框架框架”面板中单击最外层的边框，使其出现面板中单击最外层的边框，使其出现粗黑边显示，则选中了框架集。粗黑边显示，则选中了框架集。2选择框架：在选择框架：在“框架框架”面板中单击要选择的框架，使其出现细面板中单击要选择的框架，使其出现细黑边显示，则选中了框架。黑边

8、显示，则选中了框架。（一）设置框架集属性（一）设置框架集属性：选中框架集，打开框集属性选中框架集，打开框集属性 1边框选项设置边框选项设置2框架集中框架大小设置框架集中框架大小设置（二）设置框架属性（二）设置框架属性选择框架后（如选择左侧框架），打开框架属性选择框架后（如选择左侧框架），打开框架属性（一）保存框架集的操作：（一）保存框架集的操作：1在框架面板中，选择中要保存的框架集。在框架面板中，选择中要保存的框架集。2单击菜单栏中单击菜单栏中“文件文件”|“保存框架页保存框架页”命令。命令。3打开打开“另存为另存为”对话框，设置保存位置和文件名，单击对话框，设置保存位置和文件名，单击“保存保存”按钮，保存了框架按钮，保存了框架集网页。集网页。（二）保存框架的操作：（二）保存框架的操作：1定位光标在要保存的框架内，或在框架面板中选择要保存的框架。定位光标在要保存的框架内，或在框架面板中选择要保存的框架。2单击菜单栏中单击菜单栏中“文件文件”|“保存框架保存框架”命令，打开另存为对话框。命令，打开另存为对话框。3打开打开“另存为另存为”对话框，设置保存位置和文件名，单击对话框，设置保存位置和文件名，单击“保存保存”按钮，保存了框架。按钮，保存了框架。认识开发环境和认识开发环境和创建本地站点创建本地站点编辑页面编辑页面开发环境和工具的介绍开发环境和工具的介绍页面属性的设置页面