Dreamweaver8图文教程

合集下载

01 第1章 Dreamweaver 8 基础(二)

01 第1章 Dreamweaver 8 基础(二)

网站设计
Page 18
Dreamweaver 8是建立 Web 站点和应用程序的专业
工具。它将可视布局工具、应用程序开发功能和代码编
辑支持组合在一起,功能强大,使得各个层次的开发人
员和设计人员都能够快速创建界面吸引人的基于标准的
网站和应用程序。 从对基于 CSS 的设计的领先支持到手工编码功能, Dreamweaver 8提供了专业人员在一个集成、高效的环境 中所需的工具。开发人员可以使用 Dreamweaver 8及所
网站设计
Page 20
1. 工作区布局
将世界一流水平的“设计”和“代码”编辑器合二 为一,在设计窗口中精简源代码,使用户能够按照工
作的需要指定自己的用户界面。
网站设计
Page 21
2. 利用XML数据进行可视化创作
只需将网页指向 XML 文件或 XML 服务的 URL, Dreamweaver 即可对其进行检查, 以将相应的字段拖放到页面中。 功能: 快速利用XML将源集成到工作中,并揭开XML到HTML 转换的神秘面纱; 使用简单的拖放工作流程,可将基于XML的数据(如RSS 源)集成到Web页中; 使用改善的XML和XSLT代码提示功能,可跳转到“代码 ”视图来自定义转换 。
网站设计
Page 2
知识技能目标
( 1 )熟悉 Dreamweaver 8 的界面布局和
工作环境;
(2)了解Dreamweaver 8的新功能。
网站设计
Page 3
1.2
Dreamweaver 8的工作界面
1.3
Dreamweaver 8的新增功能
网站设计
Page 4
1.2 Dreamweaver 8的工作界面

《Dreamweaver 8实例与操作》教学课件 8

《Dreamweaver 8实例与操作》教学课件 8

8.1.3 应用模板创立文档
1.使用“新建文档〞对话框
使用“新建文档〞对话框新建基于模板网页的 方法非常简单,只需在该对话框中选择模板所 在的站点,然后选择站点中的模板即可。
2.使用“资源〞面板
在“资源〞面板中只能使用当前站点中的模板 创立网页。
8.1.4 管理模板
1.更新模板
创立模板后,如果对模板中的某些局部不满意, 可对其进行修改。在修改完毕并保存时, Dreamweaver会弹出“更新模板文件〞对话框, 提示是否更新站点中基于该模板创立的网页文档, 单击“更新〞按钮可更新通过该模板创立的所有 网页,单击“不更新〞按钮,那么只保存模板而 不更新基于该模板创立的网页。
2.将现有网页转换成模板
用户在制作好一个网页后,可将其另存为模板, 然后再利用该模板制作网站中的其他网页。
8.1.2 编辑模板
1.创立可编辑区域
所谓可编辑区域,是指模板中未锁定的局部,也 就是在基于模板创立的文档中可以编辑的区域。 要使模板有效,至少要在其中包含一个可编辑区 域。
2.更改可编辑区域名称
综合实例1——应用模板制作“SM〞网站子 页
本例将把第7章中制作的文档“sub1.html〞另存 为模板,然后在其根底上创立网站中的其他子页 〔具体操作见视频8-1-1和8-1-2〕。
8.2 使用库工程
8.2.1 什么是库工程
库工程是一种特殊类型的Dreamweaver文件,我 们可以将当前网页中的任意页面元素定义为库工 程,如图像、表格、文本、声音和Flash影片等。 当需要使用某库工程时,直接将其从“资源〞面 板中拖动到网页中就可以了。
2.删除模板
如果用户不需要使用某个模板,可将其删除。
3.别离模板

Dreamweaver8 ppt教程第01章

Dreamweaver8 ppt教程第01章

本节学习结束

■认识Dreamweaver 8 ■认识Dreamweaver 8的操作环境 ■熟悉工具栏 ■认识【属性】面板 ■认识Dreamweaver 8 ■ 插入工具栏 ■面板的基本操作 ■Dreamwaver 8的参数设置
本书内容概览
1.1认识Dreamweaver 8 1.2认识Dreamweaver 8的操作环境
1.3 面板的基本操作
在开始学习使用Dreamweaver制作网页 的基本方法前,需要先熟悉Dreamweaver的 重要组成部分——面板的基本操作.下面 将学习显示面板,隐藏面板,扩展工作界 面和使用浏览器预览页面等基本操作.
1.3.1显示面板 1.3.2 分离面板以及将其完全关闭的方法 1.3.3伸缩面板组区域
在Dreamweaver 8 中把关联的功能用同一个工具 栏组合在一起.这样用户可以很容易找到需要的功能, 从而提高了使用效率.在【插入】栏中可以插入表格, 文本,媒体等几乎所有的网页元素.工具栏由经常使 用的插入工具组成,而具有相识功能的工具又被组合 在同一个工具组中.如图所示
【常用】类别:可以创建和插入最常用的对象,例如图像和表
Dreamweaver 8 入门与实例教程
第01章 走近 章 走近Dreamweaver 8
主 讲:——
祝:大家学习愉快
□ 本章知识点及学习目标
本章是Dreamweaver 8的入门章节.首 先对Dreamweaver 8软件进行简单介绍, 接着对Dreamweaver 8的工作界面,面板 和参数设置进行讲解.使初次接触Dream weaver 8的使用者能较快上手,免去不必 要的重复操作.前期的准备工作使读者有 一个良好的开端,这些都是为以后的学习 做铺垫.最后通过实战演练和练习题近一 步巩固本章所学知识.

《Dreamweaver-8基础与实例教程》省名师优质课赛课获奖课件市赛课一等奖课件

《Dreamweaver-8基础与实例教程》省名师优质课赛课获奖课件市赛课一等奖课件
(3)先单击要选中表格行旳任意一种单元格,然后在状态栏旳标 识选择器中单击<tr>标识,即可选中该表格行。
3.选中表格列
选中表格列旳措施与选中表格行旳措施类似,这里不再 赘述。
4.选中单元格
(1)在要选择旳单元格中按下鼠标左键,并拖,即可选中该单元格。
(1)表旳大小用width=“数值”和height=“数值”属 性阐明。前者为表宽,后者为表高,数值是为像素数 或占窗口旳百分比。
(2)定义表格旳粗细由border=“n”阐明,n取整数, 单位是像素(假如省略,则不带边框)。将border设 成不同旳值,可产生不同旳效果。
(3)表格间距用cellspacing="数值"表达,"数值"旳单 位是像素。
2.该对话框允许您指定表格旳排序方式,若要完毕“排序表格”对话框, 请执行下列操作:
排序按:能够拟定哪个列旳值将用于对表格旳行进行排序。 顺序:拟定是按字母还是按数字顺序以及是以升序(A 到 Z,小数字到大
数字)还是降序对列进行排序。 再按/顺序:拟定在不同列上第二种排序措施旳排序顺序。在“再按”弹
4.5 实例制作
4.5.1虚线表格 4.5.2几种特殊表格旳制作 4.5.3圆角表格 4.5.4利用表格排版制作页面
4.5.1虚线表格
在浏览Internet时,会发觉诸多网站排版所用旳表格 都是经过多种美工制作旳,非常漂亮,不但起到了网 页排版旳作用,而且在很大程度上美化了网页,使网 页看起来非常清爽、简洁。虚线表格就是其中一种。
其基本定义格式如下: <table>…</table> 定义表格; <tr>…</tr> 定义表行 <th>…</th> 定义表头 <td>…</td> 定义表项(单元格)

《Dreamweaver 8基础与实例教程》课件第12章

《Dreamweaver 8基础与实例教程》课件第12章
第12章 站点的测试与发布
12.1 站点的测试 12.2 申请主页空间及域名 12.3 发布站点 12.4 网站的测试和上传实例 12.5 管理站点 12.6 站点宣传
12.1 站点的测试
12.1.1目标浏览器测试 12.1.2检查链接
12.1.1目标浏览器测试
测试目标浏览器主要是检查文档中是否有目标浏览器 所不支持的任何标签或属性,当有元素不被目标浏览 器所支持时,网页将显示不正常或部分功能不能实现。
12.6 站点宣传
站点的访问量是衡量一个网站成功与否的一个重要指 标,进行站点宣传是提高站点访问量必须进行的操作, 这就犹如为商品打广告,广告宣传到位了,购买该商 品的人就会增多,商家的收益也会增大。
1.设置关键字信息 2.在搜索引擎注册、登记 3.媒体宣传 4.在留言板、BBS、聊天室、社区上做宣传 5.与其他网站互作链接
12.5.3 使用站点报告
利用Dreamweaver 8的站点报告功能,可以提高站点开 发人员和维护人员之间合作的效率。站点报告器包括 查看哪些文件的设计笔记与这些被隔离的文件有联系; 获知站点中的哪个文件正在被哪个维护人员进行隔离 编辑;通过制定姓名参数和值参数进一步改善设计笔 记报告等功能。在使用站点报告前用户必须事先定义 一个远端站点链接来运行工作流程报告。
2.在文档中添加设计笔记
(1)在Dreamweaver 8中打开需要添加设计笔记的文档。
(2)选择“文件”菜单中的“设计备注”命令,打开 “设计备注”对话框。在对话框中选择“基本信息” 选项卡设置基本信息,其中“状态”下拉列表框中选 择要添加的设计笔记信息的选项,包括“草稿”、 “保留1”、“保留2”、“保留3”、“alpha”、“b eta”、“最终版”、“特别注意”等选项。在“备注” 列表框中输入设计笔记的内容。选中“文件打开时显 示”复选框将在打开该网页时打开“设计备注”对话 框,显示设计备注内容。完成后“确定”即可。

第三章 Dreamweaver8 网页设计PPT课件

第三章 Dreamweaver8 网页设计PPT课件
第一页
1.属性面板
上一页
网页编辑窗口下面是“属性面板”, 用
来显示和调整页面对象的属性,根据鼠标
下一页
所选中对象的不同,“属性面板”界面会
最后页 有差异,用户可以分别对不同的对象进行
设置
退出
2.浮动控制面板组
本章内容
01.08.2020
14
3.1 Dreamweaver 8简介
3.1.8 网页文件的创建与保存
15.熟练运用Dreamweaver 8创建自己个人主页。
01.08.2020
3
本章内容
第一页
Dreamweaver 8简介
上一页
站点的建立与管理
下一页
页面设计
最后页
退出
01.08.2020
4
3.1 Dreamweaver 8简介
本章案例的小型个人网站是利用 第一页 Dreamweaver 8设计的,在设计前首先要
9.掌握如何在Dreamweaver 8中使用层;
10.掌握如何在Dreamweaver 8中使用框架;
最后页 11.了解如何在Dreamweaver 8中创建和使用样式表;
12.了解如何在Dreamweaver 8中使用模板与库;
13.掌握如何在Dreamweaver 8创建表单;
退出 14.了解如何在Dreamweaver 8中使用行为与时间轴;
3.1.6 状态栏
第一页
标签选择器:文档区下部有一个如下 上一页 图所示的区域,其中左半部分文字(如
“<body>”)表示当前光标所在区域的 下一页 HTML标记,单击可以选定这个HTML标记
包括的区域。
最后页
退出
01.08.2020

第2章 Dream weaver8入门

第2章  Dream weaver8入门

2.3 Dreamweaver 8 功能简介
Dreamweaver的主要特点归纳如下: – 最佳的制作效率。能与动画设计工具,如 Flash等搭配,不需要离开Dreamweaver便可 以完成制作,整体流程自然顺畅。除此之外, 只要单击便可以自动开启Fireworks进行编辑, 并完成图片的优化 – 网站管理。使用站点地图可以快速制作网站 构架,设计个性化和重组网页。如果改变网 页位置或文件名称,Dreamweaver会自动更 新所有链接
2.6 本地站点的搭建与管理
一 建立本地站点
1.在本地电脑硬盘上建立一个空的文件夹 2.在Dreamweaver8中建立站点的操作: (1)单击菜单栏中“站点”|“新建站点”命令,打开“未命 名站点1的站点定义为”对话框。
(2)在“您打算为您 的站点起什么名字?”对话 框中输入站点的名称,如我 们在此输入“长春悠游网”。 然后单击下一步。
2.2.5 属性窗口
• 帮助编辑当前选择的页面元素属性 • 演示“属性检查器“的简单用法
设置字体颜色 指针 对齐文本
设置默认字体
设置字体大小
扩展箭头 设置链接
2.2.6 状态栏
手形工具
设置缩放比率 文档大小下载时间
标签选择器
选取工具 缩放工具
“窗口大小”弹出式菜单
2.3 Dreamweaver 8 功能简介
1 Dreamweaver8操作界面 • 组合在一组标题下的多组相关面板 • 例如, “文件”面板包含以下两个组
– 文件 – 资源
面 板 组 和 文 件 面 板
2.2 Dreamweaver 8 常用工具
2.2.1 菜单栏工具
2.2.2 文档工具栏
2.2.3 插入面板

第01章 Dreamweaver 8基础

第01章 Dreamweaver 8基础

第1章 Dreamweaver 8基础 章 基础
在过去,用户只有掌握了HTML(超文本标记语言)才能写出网页.如今,使用 Dreamweaver就可以快速地创建出具有精彩效果的动态网页.Dreamweaver是美国 Macromedia公司开发的集网页制作和网站管理于一身的网页制作软件.本章将主要 介绍有关网页的基础知识以及Dreamweaver 8的基本工作环境.
对齐方式 设置字体样式
创建项目 缩进量
中文版Dreamweaver 基础与上机实训 中文版Dreamweaver 8基础与上机实训
面板组
Dreamweaver 8中的面板被组织到面板组中.面板组中选定的面板 显示为一个选项卡.每个面板组都可以展开或折叠,并且可以和其他面 板组停靠在一起或取消停靠. 面板组还可以停靠到集成的应用程序窗口中,使用户能够很容易地 访问所需的面板,而不会使工作区变得混乱.
中文版Dreamweaver 基础与上机实训 中文版Dreamweaver 8基础与上机实训
1.2 Dreamweaver 8的工作环境
Dreamweaver 8的工作界面由文档窗口,工具栏,状态栏,上下文 菜单,"插入"工具栏和属性检查器等部分组成.启动Dreamweaver 8 后,其工作界面如图所示 .
网页的设计构思
在制作网页时,用户必须掌握网页的设计构思方法.这时需要认真 考虑网页的主题,网页的命名,网页标志,色彩搭配和字体等要素. 网页的主题 网页命名 网站标志 色彩搭配 字体
中文版Dreamweaver 基础与上机实训 中文版Dreamweaver 8基础与上机实训
网页的布局
在网页布局过程中,应该遵循的原则有:对称平衡,异常平衡,对 比,凝视和空白等.一般来说,网页的布局有下面几种常见的结构. π型结构布局 T型布局 "三"型布局 POP布局 Flash布局

Dreamweaver 8中文版实用教程 第1章_认识Dreamwaver

Dreamweaver 8中文版实用教程 第1章_认识Dreamwaver

II.
III. 使用“CSS样式”面板还可以在“ 全部”和“正在”模式下修改CSS 属性
“正在”模式下的 “CSS样式”面板
“全部”模式 下的“CSS样式” 面板
CSS布局的可视化
I. II.
应用可视化助理来描画CSS布局 边框或为CSS布局加上颜色; 应用可视化助理可揭示出复杂 的嵌套方案,并改善所选内容
后台文件传输
“插入Flash视频”命令
缩放工具
功 能:

放大并检查图像,使用复杂的嵌
套表格布局
II.
缩小可预览页面的显示方式
缩放工具
辅助线
功能: I. 测量页面布局,将页 面布局和页面模型加 以比较,精度可达像 素级别 可视化反馈有助于准 确地测量距离,并且 支持智能靠齐 辅 助 线
II.
后台文件传输
可以在获取或上传文件期间执行其他与服务器无关的活动。背景文件传输 对于Dreamweaver所支持的所有传输协议都适用:FTP、 SFTP、LAN、 WebDAV、Microsoft Visual SourceSafe和RDS。
在文件传输期间无法执行的与服务器相关的活动包括: 上传/获取/存回/取出文件。 撤消取出。 创建数据库连接。 绑定动态数据。 预览动态数据。 插入 Web 服务。 删除远端文件或文件夹。 在测试服务器上的浏览器中预览。 将文件保存到远程服务器。 从远程服务器插入图像。 从远程服务器打开文件。 在保存时自动上传文件。 将文件拖动到远端站点。 剪切、复制或粘贴远端站点上的文件。 刷新“远程”视图。
2005年8月, 美国 Macromedia公司推出了Dreamweaver 8 Dreamweaver是目前主流的网页设计工具,不仅具有强大的 页面 设计功能,而且具有完善的站点管理能力,使用Dreamweaver设计网 页将是一个便捷、高效的工作流程 Dreamweaver 8结合了Dreamweaver 的可视化排版功能,融合了

第一章Dreamweaver8基本操作

第一章Dreamweaver8基本操作
Dreamweaver 8基本 操作
课程体系及课程地位
讲解课程体系结构图,让学生熟悉本课程体系,说明本课程地位与 作用。 简单说明课程作用:在无html知识基础的前提下,能够使用DW8编 辑和制作网页。能够通过ATA的DW8证书考试的布局、表单的创建、设置图像、创建链接等等。
3.3 添加页面元素
页面元素
插入表格(高、宽、行、列),并设置表格(高、宽、 背景色),表格嵌套 插入图片 创建css样式(了解层叠样式表、掌握样式表的创建、编 辑和应用) 学生练习操作
布置作业
完成课本第一章,第1、2、4、5题的练习。
本门课程目标
学习和掌握DW8的常用功能 掌握DW8编辑和制作网页的流程和方法,能够使用DW8创建和 插入各种网页元素。
本章任务
熟悉Dreamweaver8的工作界面。 掌握Dreamweaver8的基本操作,包括创建站点、文档操作、添 加页面元素等
本门课程目标
学习和掌握DW8的常用功能 掌握DW8编辑和制作网页的流程和方法,能够使用DW8创建和 插入各种网页元素。
结合第一章第3题讲解dw8的基本操作65分钟31利用dw8创建站点15分钟创建并设置本地根文件夹定义站点学生练习操作33添加页面元素页面元素插入表格高宽行列并设置表格高宽背景色表格嵌套插入图片创建css样式了解层叠样式表掌握样式表的创建编辑和应用学生练习操作布置作业完成课本第一章第1245题的练习
第一章
演示和讲解DW8的工作界面,让学生对DW8的界面有初步的认 识,并熟悉DW8。 结合第一章第3题,讲解DW8的基本操作[65分钟] 3.1 利用DW8创建站点[15分钟] 创建并设置本地根文件夹 定义站点 学生练习操作
演示和讲解DW8的工作界面,让学生对DW8的界面有初步的认 识,并熟悉DW8。 结合第一章第3题,讲解DW8的基本操作[65分钟] 3.1 利用DW8创建站点[15分钟] 创建并设置本地根文件夹 定义站点 学生练习操作

第8章网页制作工具Dreamweaver8

第8章网页制作工具Dreamweaver8
8.1.2 Dreamweaver 8的参数设置 3.站点参数设置 选择“分类”列表中的“站点”选项,对话框右侧显示出
相关的属性,用于为“文件”面板设置站点首选参数,如图814所示。
图8-14 站点参数设置
8
8.2 站点管理
所谓站点,可以看做是一系列文档的组合,这些文档之 间通过各种链接关联起来,可能拥有相似的属性,例如,描 述相关的主体,采用相似的设计,或者实现相同的目的等, 也可能只是毫无意义的链接。利用浏览器,就可以从一个文 档跳转到另一个文档,实现对整个网站的浏览。 8.2.1 本地站点和远端站点
图8-64 实例效果
【例8-8】
22
8.7 使用表格
8.7.1 插入表格 表格是页面布局极为有用的设计工具。在设计页面时,往
往要利用表格来定位页面元素。使用表格可以导入表格化数据, 设计页面分栏,定位页面上的文本和图像等。 在Dreamweaver中插入表格的方法如下。 ① 将光标放到要插入表格的位置。 ② 执行下列操作之一:
(1)插入工具栏 Dreamweaver 8的插入工具栏如图8-4(a)所示,插入工
具栏中默认显示的是“常用”类的主要功能按钮。单击“常用”按 钮会弹出一个下拉菜单,其中包含了插入工具栏中的其他功能 菜单,如图8-4(b)所示。用户选择不同的分类,插入工具栏 中包含的功能按钮也随之改变。
图8-4 插入工具栏及其功能分类菜单
如果需要设置网页的其他属性,可以打开“页面属性”对 话框进行设置。
14
8.3 制作第一个网页
8.3.3 网页基本元素 在通常情况下,网页上一般都包含文本、日期、特殊符号
及水平线等基本元素。 1.文本和特殊符号
文本的操作主要包括:输入文字、设置文字大小、设置字 体、设置文本颜色、设置文本对齐方式等。 2.日期

Dreamweaver8ppt教程第08章PPT教学课件

Dreamweaver8ppt教程第08章PPT教学课件
2020/12/12
8.6 思考与练习
8.1层的基础知识
层在Dreamweaver中有其特殊的意义,使用过Photoshop的用户或许会联想到 Photoshop中的层,但是Dreamweaver中的层与其不用。在众多的网页编辑软件 中,只有Dreamweaver拥有层这一功能。下面列举出Dreamweaver中的层的一 些主要功能。
2020/12/12
PPT教学课件
谢谢观看
Thank You For Watching
2020/12/12
Dreamweaver 8 入门与实例教程
第08章 使用层
2020/12/12
主 讲:—— 祝:大家学习愉快
□ 本章知识点及学习目标
本章从层的基础知识开始讲起,为读者 介绍了层的创建、层的基本操作和属性设 置。另外还介绍了表格与层的关系,表格 与层的相互转换是网页的布局更加灵活、 高效。关于层的相关内容本章没有完全讲 完,还有一部分讲在本书的第12章中接续 介绍与层相关的内容。
8.3.1选择层
8.3.2调整层大小
8.3.3插入层对象
8.3.4移动层
8.3.5对齐层
8.3.6把层转换成表格
8.3.7把表格转换成层
8.4设置层属性
8.4.1单个层的属性
8.4.2多个层的属性
8.5实战演练
8.5.1 范例1 阴影文字
8.5.2 范例2 利用层制作个人简介
8.6 思考与练习
1. 简答题 (1)简述层的概念及其使用特点是什么? (2)简述层都有那些基本操作? (3)简述实现层与表格相互转换的方法是什
么? (4)层的嵌套和表格的嵌套有什么不同? 2. 操作题 (1)画出多个层,并将多个层对齐。 (2)利用层布局一个首页面的框架结构,然

Dreamweaver8与Flash8案例教程第1章__Dreamweaver_8概述

Dreamweaver8与Flash8案例教程第1章__Dreamweaver_8概述

目前,较流行的浏览器有Netscape公司 的Netscape Navigator和Microsoft公司的 Internet Explorer(IE)。要注意的是, 不同的浏览器对同一个HTML文件的解释 可能会不太一样。
使用HTML语言编写HTML语言程序 (即制作网页文件)是学习制作网页的基 础。虽然目前有许多“所见即所得”且操 作较方便的网页制作工具,不需要直接用 HTML语言编写HTML语言程序,但是在 很多时候,了解一些HTML语言知识,将 有利于学习网页制作工具、学习编辑修改 网页知识和提高网页制作水平。
绝对路径名
含义
HREF=“/HTML/ HTML1.htm在域名为
HTML1.htm”
的服务器中的HTML目录下
HREF=“E:\HTML\HT\HTM HTML0.htm存放在E盘的HTML目录
L0.htm”
下的HT子目录中
相对路径:相对路径是以当前文件所
在路径和子目录为起始目录,进行相对的 文件查找。通常都采用相对路径,这样可 以保证文件移动后不会产生断链现象。相 对路径名的写法及其含义如表1-1-2所示。
表1-1-2 相对路径名的写法及其含义
相对路径名
含义
HREF=“HTML1.htm” HTML1.htm是当前目录下的文件名
HREF=“HTML/HTML1.h HTML1.htm是当前目录中HTML目录下名字为
(3)<TITLE>…</TITLE>:它是网 页名称标记,是 <HEAD>…</HEAD>标记内不可缺 少的标记,如果有 <HEAD>…</HEAD>标记,就一定 要有<TITLE>…</TITLE>标记。
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

D r e a m w e a v e r8图文教程-CAL-FENGHAI.-(YICAI)-Company One1Dreamweaver8图文教程一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置”对话框,在对话框左侧是Dreamweaver8的设计视图,右侧是Dreamweave 8的代码视图。

Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。

我们选择面向设计者的设计视图布局。

在Dreamweave 8 中首先将显示一个起始页,可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。

在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目,建议大家保留。

新建或打开一个文档,进入Dreamweaver8的标准工作界面。

Dreamweaver8的标准工作界面包括:标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。

1、标题显示栏启动Macromedia Dreamweave 8后,标题栏将显示文字Macromedia Dreamweave ,新建或打开一个文档后,在后面还会显示该文档所在的位置和文件名称。

2、菜单栏Dreamweave 8的菜单共有10个,即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。

其中,编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。

文件:用来管理文件。

例如新建,打开,保存,另存为,导入,输出打印等。

编辑:用来编辑文本。

例如剪切,复制,粘贴,查找,替换和参数设置等。

查看:用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。

插入:用来插入各种元素,例如图片、多媒体组件,表格、框架及超级链接等。

修改:具有对页面元素修改的功能,例如在表格中插入表格,拆分、合并单元格,对其对象等。

文本:用来对文本操作,例如设置文本格式等。

命令:所有的附加命令项站点:用来创建和管理站点窗口:用来显示和隐藏控制面板以及切换文档窗口帮助:联机帮助功能。

例如按下F1键,就会打开电子帮助文本3、插入面板组插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。

插入面板组其实就是图像化了的插入指令,通过一个个的按钮,可以很容易的加入图像、声音、多媒体动画、表格。

图层、框架、表单、Flash和ActiveX等网页元素。

4、文档工具栏“文档”工具栏包含各种按钮,它们提供各种“文档”窗口视图(如“设计”视图和“代码”视图)的选项、各种查看选项和一些常用操作(如在浏览器中预览)。

5、标准工具栏“标准”工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮:“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。

6、文档窗口当我们打开或创建一个项目,进入文档窗口,我们可以在文档区域中进行输入文字、插入表格和编辑图片等操作。

“文档”窗口显示当前文档。

可以选择下列任一视图:“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。

在该视图中,Dreamweaver 显示文档的完全可编辑的可视化表示形式,类似于在浏览器中查看页面时看到的内容。

“代码”视图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。

“代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。

7、状态栏“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。

标签选择器显示环绕当前选定内容的标签的层次结构。

单击该层次结构中的任何标签以选择该标签及其全部内容。

单击 <body> 可以选择文档的整个正文。

8、属性面板属性面板并不是将所有的属性加载在面板上,而是根据我们选择的对象来动态显示对象的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。

例如,当前选择了一幅图像,那么属性面板上就出现该图像的相关属性;如果选择了表格,那么属性面板会相应的变化成表格的相关属性。

9、浮动面板其它面板可以同称为浮动面板,这些面板都浮动于编辑窗口之外。

在初次使用Dreamweave 8的时候,这些面板根据功能被分成了若干组。

在窗口菜单中,选择不同的命令可以打开基本面板组、设计面板组、代码面板组、应用程序面板组、资源面板组和其它面板组。

终于把Dreamweave 8的基本工作界面介绍完了,你是否已经了解它从现在开始,让我们一起来建造一座小房子。

二、站点管理要制作一个能够被大家浏览的网站,首先需要在本地磁盘上制作这个网站,然后把这个网站传到互联网的web服务器上。

放置在本地磁盘上的网站被称为本地站点,位于互联网web服务器里的网站被称为远程站点。

Dreamweaver 8提供了对本地站点和远程站点强大的管理功能。

1、规划站点结构网站是多个网页的集合,其包括一个首页和若干个分页,这种集合不是简单的集合。

为了达到最佳效果,在创建任何 Web 站点页面之前,要对站点的结构进行设计和规划。

决定要创建多少页,每页上显示什么内容,页面布局的外观以及各页是如何互相连接起来的。

我们可以通过把文件分门别类的放置在各自的文件夹里,使网站的结构清晰明了,便于管理和查找。

2、创建站点在Dreamweave 8中可以有效的建立并管理多个站点。

搭建站点可以有两种方法,一是利用向导完成,二是利用高级设定来完成。

在搭建站点前,我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。

(1)选择菜单栏——站点——管理站点,出现“管理站点”对话框。

点击“新建”按钮,选择弹出菜单中的“站点”项。

在打开的窗口上方有“基本”和“高级”两个标签,可以在站点向导和高级设置之间切换。

下面选择“基本”标签。

在文本框中,输入一个站点名字以在中标识该站点。

这个名字可以是任何你需要的名字。

单击“下一步”。

出现向导的下一个界面,询问是否要使用服务器技术。

我们现在建立的是一个静态页面,所以选择“否”。

点下一步,在文档框设置本地站点文件夹的地址。

点下一步,进入站点定义,我们将在站点建设完成后在与FTP链接,这里选择“无”。

单击“完成”按钮,结束“站点定义“对话框的设置。

单击“完成”按钮,文件面板显示出刚才建立的站点。

到此,我们完成了站点的创建。

3、搭建站点结构站点是文件与文件夹的集合,下面我们根据前面对xmweb网站的设计,来新建xmweb 站点要设置的文件夹和文件。

新建文件夹,在文件面板的站点跟目录下单击鼠标右键,从弹出菜单中选择“新建文件夹”项,然后给文件夹命名。

这里我们创建新建8个文件夹,分别命名为:img、med、swf、txt、css、js、moan和fy。

创建页面,在文件面板的站点跟目录下单击鼠标右键,从弹出菜单中选择“新建文件”项,然后给文件命名。

首先要添加首页,我们把首页命名为,再分别新建、、、和。

4、文件与文件夹的管理对建立的文件和文件夹,可以进行移动、复制、重命名和删除等基本的管理操作。

单击鼠标左键选中需要管理的文件或文件夹,然后单击鼠标右键,再弹出菜单中选“编辑”项,即可进行相关操作。

三、在网页中使用图文我们已经描绘了小屋的蓝图,从现在开始,为我们的小屋添砖加瓦吧。

打开,制作一个图文混排的简单页面。

(一)、页面的总体设置1、设置页面的头内容头内容再浏览器中是不可见的,但是却携带着网页的重要信息,如关键字、描述文字等,还可以实现一些非常重要的功能,如自动刷新功能。

鼠标左键单击插入工具栏最左边按钮旁的下拉小三角,在弹出菜单中选择“HTML”项,出现“文件头”按钮,点开下拉菜单,就可以进行头内容的设置了。

设置标题,网页标题可以是中文、英文或符号,显示在浏览器的标题栏中。

我们直接在设计窗口上方的标题栏内输入或更改,就可以完成网页标题的编辑了。

插入关键字,关键字用来协助网络上的搜索引擎寻找网页。

要想让更多的人看见你的网站,这项要好好填哦^_^单击上图所示的“关键字”项,弹出“关键字”对话框,填入关键字即可。

插入META,META标记用于记录当前网页的相关信息,如编码,作者,版权等,也可以用来给服务器提供信息。

单击上图所示的“META”项,弹出“META”对话框,在“属性”栏选择“名称”属性,在“值”文本框中输入相应的值,可以定义相应的信息。

author—作者信息,copyright—版权声明,generator—网页编辑器。

2、设置页面属性单击“属性栏”中的“页面属性”按钮,打开的“页面属性”对话框。

设置外观,“外观”是设置页面的一些基本属性。

我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。

我们设置页面的所有边距为0。

设置链接,“链接”选项内是一些与页面的链接效果有关的设置。

“链接颜色”定义超链接文本默认状态下的字体颜色,“变换图像链接”定义鼠标放在链接上时文本的颜色,“已访问链接”定义访问过的链接的颜色,“活动链接”定义活动链接的颜色。

“下划线样式”可以定义链接的下划线样式。

设置标题,“标题”用来设置标题字体的一些属性。

如下图所示,在左侧“分类”列表中选择“标题”,这里的标题指的并不是页面的标题内容,而是可以应用在具体文章中各级不同标题上的一种标题字体样式。

我们可以定义“标题字体”及6种预定义的标题字体样式,包括粗体、斜体、大小和颜色。

按自己的喜欢的风格设置吧。

(二)、Dreamweaver 8 文本的插入与编辑1、插入文本要向 Dreamweaver 文档添加文本,可以直接在Dreamweaver“文档”窗口中键入文本,也可以剪切并粘贴,还可以从word文档导入文本。

用鼠标在文档编辑窗口的空白区域点一下,窗口中出现闪动的光标,提示文字的起始位置,将中的文字素材复制/粘贴进来。

2、编辑文本格式网页的文本分为段落和标题两种格式。

在文档编辑窗口中选中一段文本,在属性面板“格式”后的下拉列表框中选择“段落”把选中的文本设置成段落格式。

“标题1”到“标题6”分别表示各级标题,应用于网页的标题部分。

对应的字体由大到小,同时文字全部加粗。

另外,在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。

3、设置字体组合Dreamweaver8预设读的可供选择的字体组合只有6项英文字体组合,要想使用中文字体,必须重新编辑新的字体组合,在“字体”后的下拉列表框中选择“编辑字体列表”,弹出“编辑字体列表”对话框:4、文字的其它设置文本换行,按Enter键换行的行距较大(在代码区生成<p></p>标签),按Enter+Shift 键换行的行间距较小(在代码区生成<br>标签)。

文本空格,我们选择编辑/首选参数,在弹出得对话框中左侧的分类列表中选择“常规”项,然后在右边选“允许多个连续的空格”项,我们就可以直接按“空格”键给文本添加空格了。

相关文档
最新文档