第2章Dreamweaver网页设计技术.ppt
《第2章Dreamweaver网页设计技术.ppt》由会员分享,可在线阅读,更多相关《第2章Dreamweaver网页设计技术.ppt(52页珍藏版)》请在三一文库上搜索。
1、第2章 Dream weaver网页设计技术 学习目标 u面板组、插入菜单、属性面板的使用 u文本的格式化类型 u超链接的使用 u用表格组织网页 u框架、表单及层的使用 u动态网页技术 1 第2章 Dream weaver网页设计技术 教学内容 2.1 Dreamweaver基础知识 2.2 创建及设计页面 2.3 链接与导航 2.4 用表格和表格布局模式布局页面 2.5 用框架布局页面 2.6 表单的使用 2.7 层的使用 2.8动态网页技术 本章小结 返回总目录 2 2.1 Dreamweaver基础知识 返回目录 Dreamweaver MX 2004工作界面 Dreamweaver 由
2、 Micromedia公司 出品,是当今最 流行的专业网页 设计、网站管理 、网页可视化编 程应用软件。主 要用于制作网站 的静态网页,具 有跨平台、跨浏 览器的特点。左 图为 Dreamweaver MX 2004工作界 面 。 3 2.1 Dreamweaver基础知识菜单栏 返回目录 菜单栏 “文件”菜单:包含“文件”菜单的标准菜单项。 “编辑”菜单:包含“编辑”菜单的标准菜单项。 “查看”菜单:可以设置文档的各种视图。 “插入”菜单:与“插入”栏功能相似,用于向文档插入对象。 “修改”菜单:可以更改选定项目的属性。 “文本”菜单:用于设置文本的格式。 “命令”菜单:提供对各种命令的访问
3、。 “站点”菜单:提供用于管理站点、上传站点和下载文件的菜单项。 “窗口”菜单:提供对 Dreamweaver 中的所有面板、检查器和窗口 的访问。在窗口菜单中可以设置面板的打开或关闭。 “帮助”菜单:提供对 Dreamweaver 文档访问的帮助信息,在 Dreamweaver中遇到的大部分问题都可以从“帮助”菜单 中找到答 案。 4 2.1 Dreamweaver基础知识插入栏 单击“插入”栏的下拉按钮, 出现菜单方式的选项卡。 可以根据插入对象的不同 选 择不同类别的选项卡,不同选 项 卡包含创建不同类型对象的按 钮。单击“显示为制表符”可转 为 常规样式的“插入”栏。图为插 入” 栏的
4、两种显示方式: 返回目录 “插入”栏的两种显示方式 5 2.1 Dreamweaver基础知识文档工具栏 文档工具栏如右图所示, 包含按钮和弹出式菜单, 提供各种“文档”常用视图、各种查 看选项和一些普通操作。文档工 具栏内容从左到右依次为: 代码视图:以代码的形式显示页面,方便文档代码编写。 拆分视图:同时显示代码和设计视图,可同时看到两种效 果。 设计视图:以设计形式显示视图,可看到所见即所得的网页 效果。 标题: 可在标题文本框中为文档输入或修改标题。 服务器调试: 显示一个调试现行浏览器的报告。 文件管理: 显示“文件管理”弹出式菜单。 在浏览器中预览/调试:随时预览网页在浏览器中的效
5、果。 文档工具栏 返回目录 6 2.1 Dreamweaver基础知识文档窗口 文档窗口用于显示文档,有“设计视图”、“代码视图” 、“拆分试图”三种显示方式。 设计视图:用于可视化页面布局、可视化编辑和应 用程序开发的设计环境,此视图类似在浏览器中查看 页面。 代码视图:用于编写或编辑html、JavaScript、服务 器语言代码、其他类型代码的编码环境。 拆分视图:可以在单个窗口中同时看到同一文档的“ 代码”视图和“设计”视图。 返回目录 7 2.1 Dreamweaver基础知识属性面板 属性面板 属性面板用于 显示和修改已选定 对象的属性,可以 对文本、图像、表 格、层等进行属性 设
6、置。不同的对像 对应不同的属性面 板。 打开“窗口”菜 单选“属性”,可 以显示或隐藏属性 面板 返回目录 8 2.1 Dreamweaver基础知识面板组 面板组 面板组在工作界面的 右边,如图 所示。单击面 板窗口左边的按钮,可展 开或折叠整个面板窗口。 单击每一个面板组左上方 的按钮,可展开或折叠该 面板组窗口。 返回目录 9 2.2 创建及设计页面创建文档 1创建网页文件 创建空白网页可以用两种方法: 方法1:在起始页“创建新项目”列表中单击“HTML”,建立一个空 白 页。 方法2:在工作窗口打开“文件”菜单选“新建”“类别”列表中选 “基本页”“基本页”列表中选“HTML” 单击“
7、创建”,建立一个空白 页。 2利用Dreamweaver提供的示例文件创建网页 “文件”菜单“新建”在“类别”列表中选一种实例文档(如页面设 计 CSS)在“页面设计CSS”列表中选一种网页样式单击“创建”,网 页 中将显示文字和页面布局,修改其中的文字及图像,快速创建所需 网 页。 返回目录 10 2.2 创建及设计页面创建文档 3保存新建立的网页 “文件”菜单“保存” 指定保存位置、文件名及 保存类型单击“保存”。 4设置文档属性 “修改”菜单“页面属 性”,打开“页面属性”对话 框,如图所示。通过“页 面 属性”对话框可以对页面 基 本属性进行设置 。 页面属性对话框 返回目录 11 2
8、.2 创建及设计页面设置文本 文本是网页元素中主要部分。 1输入文本 在文档窗口单击,将插入点置于文档中所需 位 置,输入文本或插入其他网页元素。 2设置文本格式 文本格式的设置利用属性面板完成,属性面 板 可以对文字标题、字体字号、颜色、对齐方式、 列表等作设置。 返回目录 12 2.2 创建及设计页面插入水平线 水平线能将网页中不 同 功能的区域分割开来。 插入水平线练习 1.在页面单击鼠标确定水平线 位置“插入”菜单“水平线”。 2.选中水平线在属性面板为 水平线起名“line-1”。 3.宽度设为200像素,高度为10 像素,若用“百分比”作宽度单 位,表示宽度占浏览器窗口的 百分比。
9、设置水平线在页面中 的对齐方式为“居中对齐”。如 图所示。 插入水平线 返回目录 13 2.2 创建及设计页面使用CSS样式 样式是一系列预制的排版命令。CSS(Cascading Style Sheet 层叠式样式表)是一系列格式规则,包括对文字及段落的修饰,用 于控制网页的外观,使整个站点中的网页格式保持统一,快速实现 网页格式化。同一网页中样式按不同等级应用,手动html格式覆盖 css样式所应用的格式。 样式表文件扩展名为.CSS,是纯文本格式,可使用任何纯文 本 编辑器创建或打开样式表文件。建立样式表文件要依据CSS规则, 它由两部分组成:选择器和声明。选择器为样式名称,声明用于定
10、义样式元素。Dreamweaver提供创建样式表的模板,可轻松创建 出 用户所需的样式表。 返回目录 14 2.2 创建及设计页面使用CSS样式 1 创建CSS样式表 (1)“文件”菜单 “新建”(打开“新建文档”对话框)在“类别”列 表框中选择“CSS样式表”在右侧的列表框中选择一种样式表 ,通过预览框查看其效果。 (2)单击“创建”按钮打开样式表编辑页面,扩展名为“.css”。 (3)“文件”菜单“保存”下拉框中选择“样式表(*.css)”输入 样式表名称单击“保存”按钮。 2新建CSS样式 若对创建的模板样式不满意,还可以新建样式,步骤如下: (1)确定插入点,执行下面操作之一打开“新建
11、CSS样式”对话框 。 在“CSS样式”面板中单击“新建CSS样式”按钮; 在文本属性面板中选择“样式” “管理样式”新建; “文本”菜单“CSS样式”“新建CSS样式”,对话框如图(新建 CSS样式)所示; 返回目录 15 2.2 创建及设计页面使用CSS样式 (2)在“名称”文本框中输入 新样式名。 (3)“类型”区中提供3种类型 选择其中一项。 (4)单击“确定”按钮,出现 “新样式的CSS样式定义” 对话框,在其中定义样 式的属性。 (5)创建样式后,单击“确 定”按钮,该样式会出现 在样式表文本中。 (6)单击“文件”“保存”命 令,保存当前样式表文 件。“新样式的CSS样式 定义”
12、对话框如图 ( CSS样式定义)所示。 新建CSS样式 CSS样式定义 返回目录 16 2.2 创建及设计页面使用CSS样式 3样式表在网页中的应用 (1)打开需要应用样式表的网页“文本”菜单 CSS 样式 编辑样式表在弹出的对话框中单击“链 接”单击“浏览”选择刚创建的样式表单击“ 确 定”回到“编辑样式表”对话框在列表中显示刚 添 加的样式表文件单击“完成”。 (2)如果给标题套用刚创建的样式,方法为:将插 入 点置于“ 类 ”所在的段落“窗口”菜单 CSS样 式 在显示的“CSS样式”面板中单击“应用样式”按 钮 单击 “样式”。此样式将应用于当前段落。 返回目录 17 2.2 创建及设
13、计页面使用CSS样式 4修改样式 若对已设置的样式中某些属性设置不满意,可以修改该样式。 单击“CSS样式”面板中的“编辑样式”按钮在列表中右击需要修 改 的样式名快捷菜单中选择“编辑”命令在弹出的属性对话框中改动 “样式”及“大小”。 5删除样式表 “文本”菜单CSS样式表弹出“编辑样式表”对话框在列表框 中 选中要删除的样式名单击“删除”按钮。 6更改样式表 单击“编辑”按钮完成用户对样式表更改单击“完成”按钮。 返回目录 18 2.2 创建及设计页面插入图像 Web页图像的格式通常有三种:GIF 、JPEG、PNG。 1插入图像 在网页中插入图像可按以下操作进行: 在文档窗口中单击以确定
14、图像要插入的位置“插入” 菜 单“常用”类别中单击“图像”图标旁的向下箭头在弹出 的 菜单中选择“图像”弹出“选择图像源文件”对话框(“文件 系统”用来选择图形文件,“数据源”用来选择动态图像源 文 件)指定图像文件所在位置从列表框选取所需的图 像 文件单击“确定” 。 返回目录 19 2.2 创建及设计页面插入图像 2编辑页面图像 在Dreamweaver 中可以直接编辑页面图像,包括改 变 大小、对齐方式、调整亮度和对比度、锐化图像等。 1)调整大小 单击页面中的图像鼠标移至调节柄处拖动(按shift 键保持图像比例不变),也可通过“属性”面板输入“高”和 “宽”的具体数值来调整图像大小。
15、 2)设置图像的对齐方式 选定图像单击“属性”面板中对齐按钮组中的一个使 图 像移至页面的左侧、右侧或居中。若既有文字又有图像 , 返回目录 20 2.2 创建及设计页面插入图像 用“属性”面板中“对齐”下拉列表框来改变图像与文字的相 互 对齐方式。 3)调整亮度/对比度或锐化图像 选择图像单击图像属性面板中的“亮度/对比 度”拖动滑块进行调节单击“锐化”改变图像 锐度。 返回目录 21 2.3 链接与导航 文档位置和路径 每个网页都有一个惟一的地址,称为统一资源 定位器(URL)。当创建本地链接时,通常指定一个起 自 当前文档或站点根文件夹的相对路径。 连接路径有三种类型: 1绝对路径:提供
16、所链接文档的完整URL。 2文档相对路径:省略当前文档和所链接文档都相 同的绝对URL部分,只提供不同的路径部分。 3站点根目录相对路径:提供从站点文件夹到文档 的 路径。 返回目录 22 2.3 链接与导航 链接到文档的常用方法 超链接源通常采用文本和图像,链接目标通常为 网页或文件,一般用URL定义。一个文本超级链接只 分配一个目标URL地址。图像上的超级链接不能直接 在浏览器中显示,访问时可利用鼠标指针判断包含超 级链接的图像。 图像超级链接可以用两种方式分配目标RUL: 1整个图像作为一个超级链接。 2图像分为多个热点,用热点作为图像上的超级 链接区域。 返回目录 23 2.3 链接与
17、导航 创建文本超链接 使用属性面板的文件夹图标、链接文本框或“点到文 件” 图标链接文档。方法如下: 1文档窗口的“设计视图”中选择文本或图像 。 2属性面板的“链接”框中填入要链接到的页面地址 , 最好用相对路径地址,也可以单击“点到文件”图标,选取 要链接到的文件,或用鼠标把本地站点文件列表中的文 件 直接拖到属性面板的“链接”框中。 3对“目标”进行设置。“目标”用来定义超链接被点击 时链接到的页面视窗打开方式。目标后的下拉选框可不 选,这时页面在原窗口中打开。 返回目录 24 2.3 链接与导航 命名锚记链接 命名锚记用于在文档中设置标记,这些标记通常放在 文档的特定主题处或顶部,然后
18、创建到这些命名锚记的 链 接。 创建到命名锚记的连接过程分两步:创建命名锚记和 创建到命名锚记的链接。 1创建命名锚记:将插入点置于要放置锚记的位置 “插入”菜单“命名锚记”在“锚记名称”框中输入锚记 名 字单击“确定”。在插入点即出现一个锚记。 2创建锚记链接:选定要添加链接的文字属性面 板 的“链接”框中输入“#”和锚记名字回车确认。 返回目录 25 2.3 链接与导航 图像地图 用一个图形的不同部位制作热点分别链接到不同页 面,称为图像地图。分两步如下: 1创建图像地图热点 图形属性面板左下方有一项为地图,用它完成制作图 像地图。在其后可填入映象名称,若不填, Dreamweaver 会
19、自动加上一个名字。“地图”下面有三个图标,从左到右 依次为:截取矩形、截取圆形和截取不规则图形。用鼠 标 选中图形的某个区域,当鼠标拖出的选框与目标不重合 时,可使用键盘上的方向箭头来调节。 2为热点指定链接 选定要添加链接的热点,在热点属性面板中输入链接 目 标,在“替代”框中输入提示性文字。 返回目录 26 2.4 用表格和表格布局模式布局页面创建表格 1. 将插入点置于网页中要插 入 表格的位置“插入”菜单“表格” , 出现如图所示的“插入表格”对话框 。 “行数”框指定表格行数。 “列数”框指定表格列数, “宽度”框指定表格宽度。 “边框”框指定表格边框线宽度 。 “单元格填充”框指定
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver 网页 设计 技术
链接地址:https://www.31doc.com/p-2548735.html