第2讲Dreamweaver网页设计技术.ppt

第2章 Dream weaver网页设计技术 学习目标 面板组、插入菜单、属性面板的使用 文本的格式化类型 超链接的使用 用表格组织网页 框架、表单及层的使用 动态网页技术 第2章 Dream weaver网页设计技术 教学内容 2.1 Dreamweaver基础知识 2.2 创建及设计页面 2.3 链接与导航 2.4 用表格和表格布局模式布局页面 2.5 用框架布局页面 2.6 表单的使用 2.7 层的使用 2.8动态网页技术 本章小结 2.1 Dreamweaver基础知识 2.1 Dreamweaver基础知识—菜单栏 2.1 Dreamweaver基础知识—插入栏 单击“插入”栏的下拉按钮， 出现菜单方式的选项卡。 可以根据插入对象的不同选 择不同类别的选项卡，不同选项 卡包含创建不同类型对象的按 钮。单击“显示为制表符”可转为 常规样式的“插入”栏。图为插入” 栏的两种显示方式： 2.1 Dreamweaver基础知识—文档工具栏 文档工具栏如右图所示， 包含按钮和弹出式菜单， 提供各种“文档”常用视图、各种查 看选项和一些普通操作。文档工 具栏内容从左到右依次为： 2.1 Dreamweaver基础知识—文档窗口 文档窗口用于显示文档，有“设计视图”、“代码视图”、“拆分试图”三种显示方式。 设计视图：用于可视化页面布局、可视化编辑和应用程序开发的设计环境，此视图类似在浏览器中查看页面。 代码视图：用于编写或编辑html、JavaScript、服务器语言代码、其他类型代码的编码环境。 拆分视图：可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。 2.1 Dreamweaver基础知识—属性面板 2.1 Dreamweaver基础知识—面板组 2.2 创建及设计页面—创建文档 1．创建网页文件 创建空白网页可以用两种方法： 方法1：在起始页“创建新项目”列表中单击“HTML”，建立一个空白 页。 方法2：在工作窗口打开“文件”菜单→选“新建”→“类别”列表中选 “基本页”→“基本页”列表中选“HTML” →单击“创建”，建立一个空白 页。 2．利用Dreamweaver提供的示例文件创建网页 “文件”菜单→“新建”→在“类别”列表中选一种实例文档（如页面设计 CSS）→在“页面设计CSS”列表中选一种网页样式→单击“创建”，网页 中将显示文字和页面布局，修改其中的文字及图像，快速创建所需网 页。 2.2 创建及设计页面—创建文档 3．保存新建立的网页 “文件”菜单→“保存”→ 指定保存位置、文件名及 保存类型→单击“保存”。 4．设置文档属性 “修改”菜单→“页面属 性”，打开“页面属性”对话 框，如图所示。通过“页面 属性”对话框可以对页面基 本属性进行设置 。 2.2 创建及设计页面—设置文本 文本是网页元素中主要部分。 1．输入文本 在文档窗口单击，将插入点置于文档中所需位 置，输入文本或插入其他网页元素。 2．设置文本格式 文本格式的设置利用属性面板完成，属性面板 可以对文字标题、字体字号、颜色、对齐方式、 列表等作设置。 2.2 创建及设计页面—插入水平线 水平线能将网页中不同 功能的区域分割开来。 插入水平线练习 1.在页面单击鼠标确定水平线位置→“插入”菜单→“水平线”。 2.选中水平线→在属性面板为水平线起名“line-1”。 3.宽度设为200像素，高度为10像素，若用“百分比”作宽度单位，表示宽度占浏览器窗口的百分比。设置水平线在页面中的对齐方式为“居中对齐”。如图所示。 2.2 创建及设计页面—使用CSS样式 样式是一系列预制的排版命令。CSS（Cascading Style Sheet 层叠式样式表）是一系列格式规则，包括对文字及段落的修饰，用 于控制网页的外观，使整个站点中的网页格式保持统一，快速实现 网页格式化。同一网页中样式按不同等级应用，手动html格式覆盖 css样式所应用的格式。 样式表文件扩展名为.CSS，是纯文本格式，可使用任何纯文本 编辑器创建或打开样式表文件。建立样式表文件要依据CSS规则， 它由两部分组成：选择器和声明。选择器为样式名称，声明用于定 义样式元素。Dreamweaver提供创建