第二章Dreamweaver概述与站点管理
合集下载
Dreamweaver教程第2章
2.2 建立站点
2.2.2 站点管理
6.编辑站点 . (1)选择【站点】|【管理站点】命令,在打开的对话 )选择【站点】 【管理站点】命令, 框中选中要编辑的站点名称,单击【编辑】 框中选中要编辑的站点名称,单击【编辑】按钮 (2)打开"高级"选项卡,在其中可对站点进行高级 )打开"高级"选项卡, 设 置. (3)设置完成,单击【确定】按钮即可保存所作的修 )设置完成,单击【确定】 改. 7.删除站点 . 选中【站点】 【管理站点】命令,打开"站点管理" 选中【站点】|【管理站点】命令,打开"站点管理" 对话框,选中要编辑的站点名称,单击【删除】按钮. 对话框,选中要编辑的站点名称,单击【删除】按钮.
2.2 建立站点
2.2.1 建立本地站点
步骤 : (1)选择菜单【站点】| 【管理】站点, 弹出"管理站点"对 话框,在该对话框 中单击【新建】按钮
2.2 建立站点
2.2.1 建立本地站点
(2)继续弹出的对 话框如图所示. (3)在该对话框 "基本"选项卡 中的"您打算 为您的站点起 什么名字?" 文本框中输入 站点名称.
2.1 DW的工作界面 的工作界面
2.1.2 DW的工作区 的工作区
4.菜单栏 . 文件】 包含新建,打开,保存等命令. 【文件】:包含新建,打开,保存等命令. 编辑】 包含剪切,复制,粘贴, 【编辑】:包含剪切,复制,粘贴,撤消和重做等 常见命令,此外【编辑】 常见命令,此外【编辑】菜单还提供对 DW菜单中【首选参数】的访问. 菜单中【 菜单中 首选参数】的访问. 查看】 用于切换文档的各种视图,设计视图, 【查看】:用于切换文档的各种视图,设计视图, 代码视图,代码和设计视图等, 代码视图,代码和设计视图等,并且可 以显示和隐藏不同类型的页面元素和 DW工具及工具栏. 工具及工具栏. 工具及工具栏 插入】 提供了【插入】工具栏中的工具按钮, 【插入】:提供了【插入】工具栏中的工具按钮, 用于将所需对象插入文档. 用于将所需对象插入文档.
第二章_站点管理
目录结构规范
➢站点的目录结构应力求层次清晰、易于管理，一般要求遵循如下一 些准则：
➢ 站点根目录一般只存放index.htm文件以及其他必须的系统文 件，不要将所有网页都放在根目录下。
➢ 站点的每个功能模块对应一个独立的目录。 ➢ 根目录下的images文件夹用于存放站点的公用图片，子目录
下的images文件夹存放本栏目页面使用的专有图片。 ➢ 所有javascript等脚本文件存放在根目录下的scripts文件夹
中。
➢ 所有css文件存放在根目录下的styles文件夹中。 ➢ 多媒体文件存放在根目录下的media文件夹中。 ➢ 如果有多个语言版本，最好分别位于不同的服务器上或存放在不
在“文件”面板中查看文件和文件夹
➢ 用户可以在“文件”面板中查看站点的文件和文件夹。 ➢ 打开/关闭“文件”面板：选择“窗口”菜单中的“文件”命 令。 ➢ 展开/折叠“文件”面板：在“文件”面板中，单击工具栏上 的“扩展/折叠”按钮。 ➢ 更改“文件”面板中的站点视图 ：在折叠的“文件”面板中， 从“站点视图”弹出菜单中选择“本地视图”、“远程视 图”、“测试服务器”或“地图视图”；在展开的“文件” 面板中，单击工具栏上的“站点文件”按钮 （对于远程站 点）、“测试服务器”按钮或“站点地图”按钮。 ➢ 刷新“文件”面板 ：单击工具栏上的“刷新”按钮。
2.2.1 创建本地站点
设置说明：
➢ 站点名称：Dreamweaver站点的名称，显示在“文件” 面板和“管理站点”对话框中。 ➢ 本地根文件夹：本地磁盘中存储站点文件、模板和库项 目的文件夹。 ➢ 默认图像文件夹：本地站点用来默认存放图像的文件夹。 ➢ HTTP地址：已完成的Web站点将使用的URL。输入该 地址使Dreamweaver能够验证站点中使用绝对URL的链接。
DREAMWEAVER概述与创建站点
DREAMWEA VER CS4教案第一章：概述什么是网页网页包括的主要元素网页编辑工具简介网页图像与动画制作工具简介一、什么是网页：Web直译过来就叫“网”，可以理解为通过超链接将各种文档连接起来的一个大规模的信息集合。
网页（web页），一般指在Internet上浏览时出现在地址栏中以.htm(或.html)结尾的文档。
各网站向用户提供的最初起始页面叫主页，也叫首页。
通常情况下，用户访问一个网站时，最先到达的网页就是该站点的主页。
HTMLWeb页是用超文本标记语言HTML(Hyper Text Markup Language)表示出来的。
它通过标记符(Tag)来标记需要显示的网页的各个部分。
浏览器浏览器是用于搜索、查找、查看和管理网络信息的一种带图形交互界面的应用软件，它可以用来阅读者html文档。
常用的浏览器有IE、腾讯TT、360、MAXTHON、MYIE、等等。
二、网页包括的主要元素文本图像超级链接导航栏表格表单多媒体及特珠效果三、网页编辑工具简介1、网页编辑工具——Frontpage 、Dreamweaver2、网页图像即动画制作工具——Flash、Fireworks、Photoshop、Cool 3D、UleadGIF Animator第二章：网页制作基础网页制作流程；Dreamweaver CS4的工作界面一、网页制作流程1、网站制作的流程2、初期规划确定网站的主题、名称网站主题指用户建立的网站所要包含的主要内容。
遵循原则：主题鲜明、小而精主题是自已最擅长的、最感兴趣的体现自已的个性搜集材料要围绕主题搜集材料。
要对搜集的材料去粗取精，去伪存真。
★初期规划之网站的规划栏目的设置突出主题，将栏目放在最显现的地方，便于访问;栏目不要设置过多，一般不要超过10个。
目录结构设计按栏目结构建立子目录;每个目录下分别为图像文件创建一个子目录image;目录的层次不要太深，最好少于5层;尽量使用意义明确的非中文目录颜色搭配合理地应用色彩非常关键，要遵循和谐、均衡、重点突出的原则。
《Dreamweaver CS3网页制作》第2章 站点的创建与管理
前进
站点定义文件的扩展名为 .ste。
删除站点
选择“站点→管理站点”命令，打开“管理站点”对话框，选择要后退 删除的站点，单击“删除”按钮。
提示
站点被删除后，只是删除了站点的定义信息，硬盘中相应位 结束 置的文件和文件夹并不会被删除。
2.4 操作站点文件
创建网站目录结构
目录
在“我的电脑”或“资源管理器”中创建。
网站发布和 更新维护
前进
网站的规划流程:
后退
确定网站的 主题
规划网站的栏 目及目录结构
收集素材
确定网站的 风格
结束
2.2 创建站点
目录
站点的分类
概念：站点可以简单地理解为存放网页及各种
素材的文件夹。
前进
本地站点
按地理位置 远程站点
站点的分类
后退
静态站点
按站点的交互性 动态站点
结束
创建本地站点
选择“站点→新建站点”命令
直接用鼠标拖动
后退
右单击，在快捷菜单中选择“编辑→删除”命 删除文件(夹) 令
按Delete键
结束
上机实训
实训1：新建一个以自己姓名命名的个人站点，该站点使用“ASP JavaScript”服务器技术, ，站点保存在“D:\ktsj\site”文件夹中， 使用“文件”面板新建首页文件“index.html”和图像文件夹 “images”，在“我的电脑”中查看相应目录的变化。 实训2：将上题中创建的站点使用“管理站点”功能将其导出，将 导出的站点定义文件通过网络或移动存储设备拷贝到其他计算机中， 使用“管理站点”功能将其导入。 实训3：新建站点 “奥运资料”，站点保存在“D:\ktsj\ aytp”文件 夹中,将该站点中的beijing.html改名为index.html，并浏览该网页。 实训4：删除站点“奥运资料”中的lx.html和wj.html文件，并将 fnll.jpg文件移动到image文件夹中。
第2走进Dreamweaver 8及站点管理
站点的规划
• Dreamweaver 8的站点类型 • 规划站点结构 • 绘制网站结构草图
Dreamweaver 8的站点类型
• 本地站点 • 远程站点
• 测试站点
规划站点结构
规划站点结构是设计站点的必要前 提，其操作是将不同的文件分类存放在 文件夹中以便于设计者管理。合理地组 织站点结构，可提高工作效率，加快对 站点的设计。
Dreamweaver 8 中文版网页制作基础
主讲人
第 2讲
走进Dreamweaver 8及站点建立
1、启动与退出 2、工作界面 3、创建简单页面 4、定义站点 5、管理站点 6、用站点管理文件.
1、启动与退出
1．启动 2．退出 3.打开网页文档 4.关闭网页文档
1.1. 启动
删除站点
窗口中执行【站点】/【管理站点】命令，打开【管理站点】对话框， 在【管理站点】对话框的站点列表中选中“我的相册”，直接单击右 侧的“删除”按钮即可。
复制站点
打开【管理站点】对话框，选中要复制 的站点，然后单击“复制” 按钮，如图1所 示，那么在【管理站点】对话框的站点列 表中就复制了一个该站点的副本，如图2所 示。
工作界面
2.1．窗口介绍
在默认状态下，Dreamweaver 8窗口主要有标题栏、菜单栏、文档工具栏、 编辑区、【属性】面板、插入栏、面板组、状态栏等组成，如上图所示。
• • •
标题栏：显示当前正在编辑的文档的目录和名称。 菜单栏：菜单栏位于标题栏的下面，有10个菜单组成， 包含了几乎所有的Dreamweaver8命令。 文档工具栏：文档工具栏中包含按钮，使用这些按钮可 以在文档的不同视图间快，还包含一些与查看文档、在 本地和远程站点间传输文档有关的常用命令和选项，如 图所示。
Dreamweaver CC实用教程 第2章 站点的创建与管理
一般来说，在规划站点时，应遵循以下规则。 1．文档分类保存 2．合理命名文件名称 3．本地站点与远程站点结构统一
2
2.2 认识站点面板
第2章
站点的创建与 管理
站点就是放置网站上所有文件的地方。在Dreamweaver CC中，站点包括远程站点和本地站点。 远程站点指位于Internet服务器上的站点，本地站点指位于本地计算机上的站点。合理地规划站点，不 仅可以使网站的结构清晰、有序，而且有利于网站的开发和后期维护。
一般来说，在规划站点时，应遵循以下规则。 1．文档分类保存 2．合理命名文件名称 3．本地站点与远程站点结构统一
3
即学即用：创建我的第一个站点
学习创建站点的方法。
第2章
站点的创建与 管理
4
2.3 导出和导入站点
使用Dreamweaver可以将站点导出为ste文件，然后将其导入回Dreamweaver。这样就可以在各 计算机和产品版本之间移动站点，或者与其他用户共享。最好定期导出站点，如果该站点出现意外，还 有它的备份副本。一般来说，导入、导出站点的作用在于保存和恢复站点和本地文件的连接关系。
第2章
站点的创建与 管理
11
第2章 站点的创建与管理
学习要点
站点的规划 认识站点面板 创建我的第一个网站 导出和导入站点 管理站点
1
第2章
站点的创建与 管理
2.1 站点的规划
第2章
站点的创建与 管理
站点就是放置网站上所有文件的地方。在Dreamweaver CC中，站点包括远程站点和本地站点。 远程站点指位于Internet服务器上的站点，本地站点指位于本地计算机上的站点。合理地规划站点，不 仅可以使网站的结构清晰、有序，而且有利于网站的开发和后期维护。
2
2.2 认识站点面板
第2章
站点的创建与 管理
站点就是放置网站上所有文件的地方。在Dreamweaver CC中，站点包括远程站点和本地站点。 远程站点指位于Internet服务器上的站点，本地站点指位于本地计算机上的站点。合理地规划站点，不 仅可以使网站的结构清晰、有序，而且有利于网站的开发和后期维护。
一般来说，在规划站点时，应遵循以下规则。 1．文档分类保存 2．合理命名文件名称 3．本地站点与远程站点结构统一
3
即学即用：创建我的第一个站点
学习创建站点的方法。
第2章
站点的创建与 管理
4
2.3 导出和导入站点
使用Dreamweaver可以将站点导出为ste文件，然后将其导入回Dreamweaver。这样就可以在各 计算机和产品版本之间移动站点，或者与其他用户共享。最好定期导出站点，如果该站点出现意外，还 有它的备份副本。一般来说，导入、导出站点的作用在于保存和恢复站点和本地文件的连接关系。
第2章
站点的创建与 管理
11
第2章 站点的创建与管理
学习要点
站点的规划 认识站点面板 创建我的第一个网站 导出和导入站点 管理站点
1
第2章
站点的创建与 管理
2.1 站点的规划
第2章
站点的创建与 管理
站点就是放置网站上所有文件的地方。在Dreamweaver CC中，站点包括远程站点和本地站点。 远程站点指位于Internet服务器上的站点，本地站点指位于本地计算机上的站点。合理地规划站点，不 仅可以使网站的结构清晰、有序，而且有利于网站的开发和后期维护。
DW介绍及站点管理PPT课件
01.04.2021
有没有辅助工具呢？
.
3
网络技术的发展使得人们对网页所能 包含的信息量的要求越来越高……
作为网页三剑客之一的Dreamweaver 就是一个功能强大，为从多网页设计师所 青睐的网页制作利器！
01.04.2021
.
4
网页三剑客简介
Dreamweaver 8
Ｍacromedia公司推出的网站开发工具．主要功能：站点管理，网页排版 与编辑等．
1、选择主菜单“编 辑”→“首选参数”命 令
2、按Ctrl＋U组合键
01.04.2021
图2-2 “首选参数”对话框
.
25
预览的概念
作用
1.上传前在本地浏览器中浏览网页.(F12) 2.不必保存即可预览.(但为了加快运行速度,最好保
存后预览)
01.04.2021
.
26
建立站点原则
不要使用中文目录；网络无国界，使用中文目 录可能对网址的正确显示造成困难。
。
注意：当本地站点建立好后，自动显示“站点”面板
01.04.2021
.
21
站点名称，仅 仅给设计者起 选择到是标否识每说次明作 拷贝用文。件到本 输的输地动件则入入UR站刷夹需上内L点新列要传容,也时本表手站 。可都地，动点不自文否刷 新。
01.04.2021
.
22
实例设计练习
Try yourself
Dreamweaver
第一讲 基础知识
01.04.2021
ቤተ መጻሕፍቲ ባይዱ
.
1
当你上网遨游的时候
1、是否曾想过，这么多漂亮而且实用的 网站是怎么做出来的 2、是否曾想过自己做一个主页挂到网上， 展示自己的个性魅力呢 3、你有blog吗？想让自己的Blog更个性 吗？
DW介绍及站点管理PPT课件
13.11.2020
有没有辅助工具呢？
3
网络技术的发展使得人们对网页所能 包含的信息量的要求越来越高……
作为网页三剑客之一的Dreamweaver 就是一个功能强大，为从多网页设计师所 青睐的网页制作利器！
13.11.2020
4
网页三剑客简介
Dreamweaver 8
Ｍacromedia公司推出的网站开发工具．主要功能：站点管理，网页排版 与编辑等．
改)
13.11.2020
12
练习一：Dreamweaver入门
启动Dreamweaver 开始→程序→Macromedia →
Macromedia Dreamweaver 8 打开/关闭
站点管理器 对象面板、属性面板 熟悉工作环境 设置窗口
13.11.2020
13
网页的基本分类
以网页的角度来看,一个网站中的众多网页,主 要可以分成下列两层:
13.11.2020
8
Dreamweaver 8的启动
方法一：开始→程序→Macromedia →Macromedia Dreamweaver 8 →创建新项目→HTML， 进入 Dreamweaver 8的设计页面
方法二：选中某个Html文件，右击鼠标器，选择用
Dre13a.11m.2020weaver MX进行编辑
Dreamweaver
第一讲 基础知识
13.11.2020
1
当你上网遨游的时候
1、是否曾想过，这么多漂亮而且实用的 网站是怎么做出来的 2、是否曾想过自己做一个主页挂到网上， 展示自己的个性魅力呢 3、你有blog吗？想让自己的Blog更个性 吗？
13.11.2020
2
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
5、网页文档的基本操作
创建、打开、保存、预览、关闭网页文档
操作演示
（1）创建一个命名为“个人小站”的静态网站，该网 站的所有文件存储在本机上E盘的“XXX个人小站” 文件夹中。 （2）在文件夹“XXX个人小站”中创建三个子文件夹 “image”、“music”和“text”。 （3）将所需的图像文件复制到“image”文件夹中。 （4）在文件夹“XXX个人小站”中创建一个命名为 “index.htm”的网页文档。 （5）编辑网页、保存并进行预览效果。 （6）学生实践操作，并提交作业。
四、网页的基本操作
五、创建和管理站点
六、项目实践：制作“个人小站”
1、安装软件
Dreamweaver 8软件的安装
Dreamweaver 8的安装非常简单，只需根据安装向导的提 示操作即可。其具体操作如下：
1. 将Dreamweaver 8的安装光盘放入光盘驱动器中，打开光盘驱动 器，双击Dreamweaver 8安装程序的图标 ，开始安装软件。
内容较多，则还需建立子文件夹，以存放不同内容的网页。
在站点规划中合理地为文件和文件夹进行命名也非常重要，好的名称容易理 解，能够表达出网页的内容。可以采用与文件或文件夹内容相对应的英文或
拼音来命名，且避免使用长文件名和中文，如图片文件夹可以命名为images
或tupian
制作导航流程
做好站点的规划后，就可以根据规划制作一个导航流程图，以便理清 思路，制作时可直接在纸上粗略地绘出导航流程图。下面是一个音乐 网站最初的导航草图。
2. 同意协议并选择安装位置。（如下图所示）
Dreamweaver 8 软件的安装
3、更改当前目的地文件夹并选择编辑文件类型（保持默认即可）。 （如下图所示）
Dreamweaver 8软件的安装
4、完成安装。（如下图所示）
2、软件的基本操作
Dreamweaver 8的启动与退出
启动Dreamweaver 8：（操作演示)
5、项目实践
案例展示(制作个人小站)
小站首页 子页首页
项目分析
1、建站准备
建立站点文件夹，收集文字、图片及相关素材并分类整理。
2、创建本地站点 3、站点管理
切换、编辑、复制、删除、导出/导入站点
4、管理网站中的文件和文件夹
创建文件夹和文件、移动和复制文件、重命名文件夹和文件、
删除文件夹和文件。
站点的规划
站点的创建
站点的规划
认识站点
本地站点
本地站点是用户工作的目录，是存放用户网页、素材等的本地文 件夹。在制作一般网页时只需建立本地站点即可。
远程站点
若需要不连接Internet就能对所建的站点进行测试，可以在本地 电脑上创建远程站点模拟真实的Web服务器环境进行测试。
测试站点
拓展训练
拓展训练
软件工作界面
“属性”面板
“属性”面板用于查看和更改当前选择对象的各种属性， 根据选择对象的不同，“属性”面板中的设置项目也不同。
3、网页的基本操作
网页的基本操作
新建网页
编辑网页
插入网页元素 编辑网页元素 设置网页属性Leabharlann 预览网页 保存网页
打开网页
4、创建和管理站点
创建和管理站点
3、软件的工作界面
软件工作界面
软件工作界面
菜单栏
Dreamweaver 8的菜单栏中包含文件、编辑、查看以及插
入等10个菜单项。
软件工作界面
插入栏
插入栏主要用于在网页中插入各种类型的网页元素，如链
接、表格和媒体等。
软件工作界面
编辑窗口
编辑窗口是编辑网页时的主要窗口，它主要由项目选择标 签、文档工具栏、水平标尺、垂直标尺、编辑区域、状态 栏、垂直扩展按钮和水平扩展按钮构成。
2011年3月1日
学习目标
正确安装、卸载Dreamweaver8； 熟悉软件界面，并能够设置个性化的 工作环境； 掌握Dreamweaver8软件的基本操作；
熟记创建站点的流程，掌握站点管理 的方法；
能够制作简单网页，并根据需要设置 相关属性
本章主要内容
一、安装Dreamweaver 8 二、Dreamweaver 8软件的工作界面 三、 Dreamweaver 8软件的基本操作
方法一：选择【开始】/【所有程序】/【Macromedia】
/ 【Macromedia Dreamweaver 8】命令。 方法二：双击桌面上的Dreamweaver 8快捷方式图标。
退出Dreamweaver 8
方法一：单击窗口右上角的 按钮。 方法二：选择【文件】\【退出】命令。 方法二：Alt+F4
测试站点主要是对动态页面进行测试时使用，是Dreamweaver 处理动态页面的文件夹。Dreamweaver使用此文件夹生成动态内 容并在工作时连接到数据库。
规划站点结构
规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合 理地组织站点结构，可提高工作效率。 在规划站点结构时应先在本地磁盘上创建一个文件夹作为站点的根目录，所 有在制作过程中创建和编辑的网页都应当保存在该文件夹中。在发布站点时， 只需将此文件夹中的所有内容上传到Web服务器上即可。如果站点结构复杂，