《网页设计与制作—第二章》：Dreamweaver(免费下载)
《Dreamweaver CS6网页设计与制作》第2章 Dreamweaver基础知识 刘敏娜 主编PPT课件
3、查看面板组的“选项”菜单：单击面板 或面板组右上方的选项按钮，在列表中可 以对网页进行设置，比如有新建和打开文 件等操作。
4、重命名面板组：可以为面板组命名，操 作方法：单击面板组的选项列表，选择重 命名面板组，输入新名称就可以了。
2.2.4自定义快捷键
Dreamweaver为用户定制了一些常用 命令的快捷键，当然用户也可以自己设置 快捷键。方法是：点击“编辑”菜单-〉“快 捷键”，选择需要更改的命令，如“新建” 命令，单击右上角的“复制副本”按钮复 制为副本（可以为副本重命名），在副本 设置中继续选择“新建”，在“按钮”输 入框按下新设置的快捷键（在键盘上直接 输入组合键，要求必须是包含ctrl键）,单击 “确定”即可生效。
窗口的各组成要素
面板组
组合在一个标题下面的多个相关的面板的集合。可以通过 单击组名称左侧的展开箭头将这多个面板在折叠或展开之 间切换。
文件面板
这个面板组非常重要，用来管理文件和文件夹，还可以对 站点进行操作，查看站点中的资源。
标签选择器
处于文档底部的状态栏中，用来显示当前选定html对象标 签的层次结构，单击其中的任何标签，就可以选中该标签 及其内容。
窗口的各组成要素
文档工具栏
文档工具栏上有视图切换的按钮，另外还包含文件管理功 能，上传下载，浏览器预览等功能按钮。
文档窗口
显示用户正在编辑的网页文档。
属性浮动面板
可以查看和编辑当前选定的网页元素的属性，此面板中的 内容会随着选中对象的不同而变化，比如当前选中了文字， 面板中就会显示文字相关的属性，如字体，大小，样式等。
单击文档工具栏左边的3个按钮，可以在“代
码视图”，“设计视图”和“拆分”视图之间切
换。另外在工具栏中还有添加网页标题，文件管理，Βιβλιοθήκη 本地和远程站点间传送文档等命令。如下
Dreamweaver教程
.2 Dreamweaver 8.0常用工具 8.0常用工具
2.2.5属性栏 2.2.5属性栏 属性面板并不是将所有的属性加载在面板上，而是根据我 们选择的对象来动态显示对象的属性属性面板的状态完全是 随当前在文档中选择的对象来确定的。例如，当前选择了一 幅图像，那么属性面板上就出现该图像的相关属性；如果选 择了表格，那么属性面板会相应的变化成表格的相关属性。 属性面板的界面如图2-8所示。
2.1 Dreamweaver 8.0界面介绍 8.0界面介绍
2.1.1 Dreamweaver 8.0界面介绍 8.0界面介绍 Dreamweaver 8.0标准工作界面大致可以分为以下几个区 域: ⒈标题栏: ⒉菜单栏： ⒊文档工具栏： ⒋ “插入”栏： ⒌文档窗口： ⒍属性栏： ⒎状态栏： ⒏浮动面板组：
2.3 Dreamweaver8.0的功能简介（4） Dreamweaver8.0的功能简介 的功能简介（
10.重新编写 重新编写PHP语法和服务器行为，包括 语法和服务器行为， 重新编写 语法和服务器行为 包括Master-Detail页 页 面设置模块、用户身份验证模块等。 面设置模块、用户身份验证模块等。 通过内置的Flash构件，导入一个 构件， ⒒通过内置的 构件 导入一个Flash构件就像标签一样 构件就像标签一样 轻松。 轻松。 构件， 组件（ ⒓MXHTML构件，利用 构件 利用MX组件（包括按钮、模板）快速建 组件 包括按钮、模板） 立有效的用户界面。 立有效的用户界面。 改进的表格编辑工具，修改的Insert面板，高效的文件编 面板， ⒔改进的表格编辑工具，修改的 面板 辑过程。更多有效地代码编辑（如按右键弹出的编码工具）， 辑过程。更多有效地代码编辑（如按右键弹出的编码工具）， 更多的搜索选择项并且能够保存搜索条件， 更多的搜索选择项并且能够保存搜索条件，以及能够迅速启 动属性检查工具。详尽的属性编辑， 动属性检查工具。详尽的属性编辑，列出每个适用于当前选 择项的可用属性。 择项的可用属性。 此外Dreamweaver 8.0还增加了图片处理功能：图片的 还增加了图片处理功能： 此外 还增加了图片处理功能 亮度和对比度的调节、图片的锐化效果等。 亮度和对比度的调节、图片的锐化效果等。
Dreamweaver_8_网页设计与制作_第2章53页PPT文档
2.1.1 定义本地站点
图 2.2 选择【管理站点】命令
图 2.3 【管理站点】对话框
2.1.1 定义本地站点
图 2.4 定义站点
2.1.2 编辑站点
1. 打开站点 在创建了站点之后，还可以对站点属性进行编辑。在编辑站点时，首先
要打开站点。 要打开一个本地站点，用户可以从Dreamweaver文档窗口的站点窗口中，
2.1.2 编辑站点
图 2.7 【管理站点】对话框
图 2.8 复制站点
2.1.2 编辑站点
4. 删除站点 如果不再需要利用Dreamweaver对某个本地站点进行操作，
可以将之从站点列表框中删除，具体操作如下。 (1) 在图2.8所示对话框的列表框中选择要删除的站点
“NetBook复制”，如图2.9所示，单击【删除】按钮。 (2) 这时会出现一个提示对话框，如图2.10所示，询问是
1. 创建文件夹 在本地站点中创建文件夹的具体步骤如下。 (1) 在站点窗口的本地站点文件列表窗格中，选中要新建
文件夹的上一级文件夹。 (2) 右击文件夹，在如图2.11所示的快捷菜单中选择【新
建文件夹】命令，即可创建一个新的文件夹。
2.1.3 站点文件的操作
图 2.11 新建文件夹
我们可以把站点看作是一系列文档的组合，这些文档之间 通过各种链接关联起来，可能拥有相似的属性，如描述相 关的主体、采用相似的设计或实现相同的目的等，也可能 只是毫无意义的链接。通过浏览器，我们就可以从一个文 档跳转到另一个文档，实现对整个网站的浏览。
利用Dreamweaver，用户可以在本地计算机上创建出站点 的框架，编辑相应的文档，从整体上对站点全局进行控制。 在这一节中我们将介绍如何构建网站的本地站点。
电子教案-《Dreamweaver网页设计与制作(第二版)》-A06-3954(示例)项目四
课程教案项目效果【任务一】为首页和子页设置链接——应用超链接超链接包括很多种，最常用的是常规超链接，另外还有图片链接、下载链接、电子邮件链接等。
（一）设置常规超链接常规超链接包括内部超链接和外部超链接。
内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。
1. 内部超链接内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在“属性”面板上的“链接”编辑框中直接输入要链接到的网址或网页名称；也可以通过单击“属性”面板上“链接”编辑框后的“浏览文件”按钮，在弹出的“选择文件”对话框中选择要链接到的文件。
还有一种方法是单击并拖动“属性”面板上“链接”编辑框后的“指向文件”按钮到“文件”面板中的文件上，前提是此时的“文件”面板中显示的是该网页所在的网站。
“属性”面板上“链接”编辑框下方的“目标”下拉列表框表示打开链接文档的方式，默认为在当前窗口中打开链接网页，其中各选项意义如下： _blank：表示在保留当前网页窗口的状态下，在新窗口中显示被打开的链接网页。
●_parent：表示在当前窗口显示被打开的链接网页；如果是框架网页，则在父框架中显示被打开的链接网页。
●_self：表示在当前窗口显示被打开的链接网页；如果是框架网页，则在当前框架中显示被打开的链接网页。
●_top：表示在当前窗口显示被打开的链接网页，如果是框架网页，则删除所有框架，显示当前网页。
2. 外部超链接外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中输入要链接到的网址。
如图所示，为网页中的文本“中国雅虎”设置到雅虎网站的外部超链接。
（二）设置图片链接和下载链接所谓图片链接，就是在单击网页中的某小图片时，在新窗口中打开一幅大图片；下载链接是指单击某个超链接时会打开一个“文件下载”对话框（或自动启动下载工具），通过在该对话框中单击“打开”或“保存”按钮，打开或下载文件。
Dreamweaver网页设计与制作项目二
课程教案“database”。
【活动一】定义站点步骤 1 在电脑的磁盘上创建一个要作为站点的根文件夹。
步骤 2 启动 Dreamweaver CS3 后，选择“站点”→“新建站点”菜单，打开“未命名地点1的站点定义为”对话框。
单击“基本”选项卡，在上面的编辑框中输入站点名（此处为“fuligong”），然后单击“下一步”按钮。
步骤 3 由于创建的是静态站点，因此，在接着弹出的对话框中选择“否，我不想使用服务器技术”单选钮，然后单击“下一步”按钮。
步骤 4 在接下来弹出的对话框中选择“编辑我的计算机…”单选钮，单击“您将把…”编辑框后的文件夹图标，在打开的“选择站点fuligong的本地根文件夹：”对话框中选择本地硬盘上的站点根文件夹，然后单击“选择”按钮。
步骤 5 回到“fuligong的站点定义为”对话框，单击“下一步”按钮。
由于现在只是在本地编写和调试网页，故不需要连接到远程服务器，在“您如何…”下拉列表中选择“无”。
步骤 6 单击“下一步”按钮，系统显示所设参数总结，单击“完成”按钮，此时便完成了站点的创建。
【活动二】新建文档Dreamweaver中的文档也就是网页，创建新网页的方法有多种。
下面使用“文件”菜单创建网页。
步骤 1 选择“文件”→“新建”菜单，打开“新建文档”对话框。
在左侧的“文档类型”列表中选择创建方式，这里选择“空白页”，在“页面类型”列表中选择网页类型，这里选择“HTML”，在“布局”列表中选择布局类型，这里选择“无”。
步骤 2 设置完后单击“创建”按钮，就创建了一个默认名为“Untitled-1”的新文档。
如图所示：【活动三】保存和关闭文档新建或编辑网页文档后，需要保存文档才能使所做的设置生效。
步骤 1 如要保存文档，可选择“文件”→“保存”菜单，或按【Ctrl+S】组合键，弹出“另存为”对话框，在该对话框的“保存在”下拉列表中选择保存文档的文件夹，在“文件名”编辑框中输入文档名。
《网页设计与制作》课程标准
《网页设计与制作》课程标准适用专业：计算机专业学时： 72课时1、课程定位和课程设计《网页设计与制作》课程是中职计算机相关专业的一门专业必修课程。
本课程以图形图像处理为前导课程，本课程将从职业技术教育的特点出发，以培养学生实际动手能力为目标，使学生具备网页制作、网站规划与网站维护的专业能力和方法能力，以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。
作为专业的核心主干课程，使学生掌握商业网站的开发和流程，并能独立进行操作，在就业时能够成为一个合格的人才。
学生毕业后可胜任网站管理员、网页设计员、网页美工员等工作岗位。
2、课程目标本课程以学生能够网页网站开发与维护的实际工作能力为学习目标，使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技能，形成解决实际应用问题的方法能力，为以后的学习动态网页设计课程打下基础。
1、素质目标(1) 培养具有较强的网页设计创意思维、艺术设计素质；(2) 培养学生在学习过程中解决困难的能力；(3) 培养学生在学习过程中培养兴趣的能力，提高工作、学习的主动性；(4) 培养学生理论联系实际的工作和学生方法；(5) 培养具有高度责任心和良好的团队合作精神；(6) 具有社会责任感。
2、知识目标(1) 了解WEB站点的工作原理；(2) 理解Internet、WWW、HTTP、HTML的定义，计算机网络概念和作用；(3) 了解服务器、客户端、浏览器的概念和作用；(4) 掌握常规网站的规划及流程；(5) 熟练掌握HTML语言中各种标记符的运用能力；(6) 熟练掌握Dreamweaver应用软件的使用；(7) 理解网页中脚本语言的使用方法；(8) 熟练开发常规静态网站。
3、能力目标(1) 熟练掌握Dreamweaver应用软件制作网站及网页；(2) 熟练掌握使用绝对和相对URL，创建超链接，图像链接；(3) 掌握在网页中添加CSS的方法；(4) 培养学生设计、制作和维护动态网站。
《网页设计与制作》教学大纲(2022版)
《网页设计与制作》教学大纲英文名称：Web Design and Production课程代码：221001005课程类别：专业基础课课程性质：必修开课学期：大一第2学期总学时：36（讲课：36）总学分：2考核方式：平时考勤、作业、课堂表现、期末大作业先修课程：计算机基础适用专业：网络与新媒体专业一、课程简介课程是网络与新媒体专业专业基础课，授课学期为大一第二学期，先修课程为《计算机基础》、《计算机网络技术》，后续课程有《动态网页设计》、《新媒体产品设计与管理》、《搜索引擎优化》等。
本课程依据网页设计员、网页制作员、网站管理员所应具备的职业能力，参照计算机高新技术网页制作员4级标准，以互联网上具体企业网站为工作任务，重点培养学生解决实际问题的能力，充分体现“职业性”的特点。
每个模块包含“知识拓展”和“能力拓展”部分，给学生留出足够的拓展空间，引导学生提出自己独特的设计思路，符合高职课程“开放性”的要求。
本课程以学生实践操作为主，要求课程全部在实训室完成，体现高职教育的“实践性”特点。
本课程主要通过理论授课的方式完成教学，授课课时为36学时，考核方式由平时考勤、作业、课堂表现和期末大作业构成。
二、课程目标及其对毕业要求的支撑本课程依据网页设计员、网页制作员、网站管理员所应具备的职业能力，以及计算机高新技术网页制作员（DreamWeaver平台）4级标准，培养学生网页设计与制作的职业能力、认真负责的工作态度、创新进取的学习态度、团结合作的团队精神，培养学生胜任工作岗位的基本技能和综合素质。
三、课程教学要求第一章HTML基础教学内容：第一节 Web技术简介第二节 HTML是什么第三节 HTML入门简介第四节本章总结学生学习预期成果：了解HTML基本概念、web前端技术。
教学重点：无教学难点：无第二章前端开发工具教学内容：第一节前端开发工具第二节新建HTML页面学生学习预期成果：了解前端开发工具，会搭建一个简单的HTML页面。
网页设计与制作实用教程(第3版)第2章-Dreamweaver网页制作基础
本章主要内容：
Dreamweaver CS6的工作环境 建立本地站点 在Dreamweaver中制作第一个网页
2.1 Dreamweaver CS6的工作环境
与Dreamweaver前面版本相比， Dreamweaver CS6包含一个崭新、 高效的工作环境，且功能也得到了较大 的改进。
2.2.1 创建站点目录
在建立站点目录时，应该注意以下几点： 不要将所有的文件都存放在根目录下，否则容 易混淆，不利于管理和上传 按照文件的类型建立不同的子目录 目录的层次不能太深 目录命令要得当，不能使用中文或者过长的目 录名
2.2.1 创建站点目录
例如建立G:\samples，存放所有站点文件。在 samples目录下新建一个名字为images的子目 录，存放站点所需要的图片。接着在samples目 录下新建一个名字为part2的子目录，用于存放制 作好的页面文件，如图2-19所示。
在Dreamweaver CS6工作窗口的下端是“属 性”面板，使用“属性”面板可以很容易地设置页 面中的元素的最常用属性，从而提高了网页制作的 效率，如图2-8所示。
图2-8 “属性”面板
2.1.2 Dreamweaver软件界面
“属性”面板上面是标签选择器，这里显示环绕 当前选定内容的标签的层次结构。单击该层次结构 中的任何标签可以选择该标签及其全部内容。
图2-2 Adobe Dreamweaver CS6窗口
2.1.2 Dreamweaver软件界面
Dreamweaver CS6工作窗口,如图2-3所示。
菜单栏
插入工具栏
工作区切换器
文档工具栏
标签选择器
文档编辑区 属性面板
Dreamweaver 网页设计与制作(第二版) 目录[3页]
![Dreamweaver 网页设计与制作(第二版) 目录[3页]](https://img.taocdn.com/s3/m/09bedc364531b90d6c85ec3a87c24028915f859d.png)
个人网页的简单美化——网站制作基础知识 创建度假村网站——Dreamweaver CS3 入门 制作汽车网站——输入与编辑网页元素 制作文化公司网站——应用超链接和行为 制作饰品网站——用表格构建网页布局 制作电影网站——建立框架网页
目录
项目七 制作美容网站——应用样式表 项目八 制作茶文化网站——应用 Div+CSS技术布 局网页 项目九 制作个人网站——应用模板和库 项目十 制作留言板——动态网页入门 项目十一 制作饰品公司网站首页——应用 JavaScript制作网页特效
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程，包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Dreamweaver、Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签，如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器，如类选择器、ID选择器、属性选择器等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法，如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章：网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效，如鼠标悬停效果、下拉菜单、滚动动画等，并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求，使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码，并进行测试和调试讲解网页发布的步骤和注意事项，以及常用的网页推广方法第六章：网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式，如JPG、PNG、GIF等，以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频，以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画，包括使用CSS动画和JavaScript实现第七章：网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理，如服务器端编程和数据库连接7.4 实践项目：搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统，包括前端设计和后端编程第八章：网页安全与SEO介绍网页安全的概念和重要性，以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性，如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化（SEO）的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和，以提高搜索引擎排名第九章：网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法，包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库，如Bootstrap、jQuery、React等，以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能，包括图片优化、代码压缩和缓存策略9.4 实践项目：制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站，包括布局、样式和交互设计第十章：网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向，如虚拟现实（VR）、增强现实（AR）等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践，以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术，如PWA（Progressive Web Apps）、Node.js等，实现网页在不同平台和设备的兼容性和性能10.4 实践项目：制作一个跨平台的网页应用重点和难点解析重点环节1：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。
电子课件-《Dreamweaver 网页设计与制作(第二版)》-项目二 创建度假村网站——Dreamweaver CS3 入门
“结果”面板
任务 1 面板基本操作——初识 Dreamweaver CS3 1. 搜索
Dreamweaver CS3 提供的搜索功能十分强大，如图所示。其搜索范围可 以是鼠标选定的一段文字、当前文档、当前打开的几个文档、某个文件夹下 的所有文档，甚至是整个站点的文档。
面板组
任务 1 面板基本操作——初识 Dreamweaver CS3
1. CSS
CSS 面板显示当前元素的 CSS 式样，可以在该区域新建、修改或删除 CSS 声明语句。
2. 代码片断
代码片断面板收集了许多常用代码段，包括 HTML 代码、JavaScript 代 码等。
3. 应用程序
应用程序面板为使用动态技术页面的编写提供了方便，该部分包括数据库 链接、数据集绑定、组件使用等方面的内容。
◆熟悉 Dreamweaver CS3 操作界面 ◆掌握网页文档的基本操作
任务 1 面板基本操作——初识 Dreamweaver CS3
Dreamweaver CS3 工作界面如图所示，其界面大致可以直观地划分为 9 个部分。
Dreamweaver CS3 工作界面
任务 1 面板基本操作——初识 Dreamweaver CS3
2. 最好不要使用汉字命名文件和文件夹。 3. 文件名中不要使用大写英文字母。
任务 2 创建“fuligong”站点——新建和管理站点
4. 运算符号不能用在文件名的开头。 5. 比较长的文件名可以使用下划线“_”隔开多个单词或关键 字。 6. 在大型网站中，分支页面的文件应存放在单独的文件夹中。 7. 在动态网站中，用来存放数据库的文件夹一般命名为“data” 或者“database”。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
规划站点结构
在站点规划过程中，需使用合理的文件名称、文件 夹名称，好的名称容易理解、记忆，能够表达出网 页的内容。通常在命名时，可以采用与其内容相同 的英文或拼音进行命名，应避免使用长文件名和中 文，如电影文件夹可以命名为movie或dianying。 制作网页所需的图片或动画等文件的存放位置也是 规划站点结构时应考虑的。如果是大型站点，可分 别创建相应的文件夹在各个类别的文件夹下，如在 站点根目录下创建一个名称为picture的文件夹用以 存放主页中用到的图片和动画。如果站点内容较少， 可以只在站点的根目录下创建一个文件夹。
3.使用右键菜单
在图像上面单击右键，在弹出菜单中选择“改变大小”可重设图像大
设置图像大小的多种操作方式
4.使用系统菜单
使用菜单“修改”→“图像”虽然不能修改图像的大小，但可以改 变图像的其他属性。
5.使用代码编辑器
将显示模式设为代码模式或拆分模式，可直接编辑图片文件的HTML 代码中的width和height属性的值，改变图像大小 。
将为一个名为“诚与”的广告公司网站 进行站点结构的规划。
规划诚与广告公司站点结构图
诚与广告公司网站首页
首 页
公司介绍
企业文化
户外广告
业务范围
联系我们 合作伙伴
创建站点
【实例1】创建一个站点
使用菜单“站点”“管理 站点”打开站点管理对话 框，进行操作
打开站点和编辑站点信息
打开站点 编辑站点
6.使用面板组的属性面板
使用菜单“窗口”→“属性”或单击“标签检查器”面板组打开属 性面板，在编辑窗口中选中要设置大小的图片，再单击“常规”前面的 加号，列出图片的各种属性，在width和height中设置图片大小的值 。
ห้องสมุดไป่ตู้
使用“高级”方式定义站点
在“定义站点”向导进 行的任意一个步骤，选择对 话框上部的“高级”标签， 可打开高级站点定义对话框。
设置工作界面
关闭面板 标尺和网格 辅助显示 首选参数的设置
对象的大小和颜色
1.修改文字大小
在属性面板上的大小中选择文字的大小，文字大小可设置绝 对尺寸、相对尺寸、长度、百分比
标题栏
Dreamweaver MX2004的工作窗口
菜单栏
编辑区 文档栏 面板组
属性面 板
Dreamweaver MX 2004的工作界面 菜单栏 起始页 工具栏 文档编辑窗口 属性面板 面板组
创建站点
规划站点 创建站点 打开站点 编辑站点
规划站点
进行网页制作之前需创建站点，利用站 点的管理功能可对站点中的文件进行管 理或测试。创建站点前首先应规划站点， 再通过Dreamweaver MX 2004的站点管 理功能创建站点的框架，包括主页、分 支页面和相应的文件夹等。
本地站点 远程站点 测试站点
规划站点结构
设计站点的必要前提是规划站点结构。规划 站点结构是指利用不同的文件夹将不同的网 页内容分门别类地保存，合理地组织站点结 构，可提高工作效率，加快对站点的设计。 在制作站点时通常先在本地磁盘上创建一个 文件夹，将所有在制作过程中创建和编辑的 网页内容都保存在该文件夹中。在发布站点 时，直接将这些文件夹上传到Web服务器上 即可。如果站点内容较多或站点较大，则还 需建立子文件夹以存放不同类型的网页内容。
2.修改文字颜色
在默认的情况下，文本在浏览器窗口内显示为黑色。在属性面板的 文本颜色按钮
上单击可打开调色板，选择要设置的颜色。
设置图像大小的多种操作方式
1.拖动改变大小
拖动图像下边、右边、右下角的三个控制点可快速改变图像大小。
2.使用属性面板
在属性面板的宽、高栏输入宽、高的像素值，可改变图像大小。
规划站点
站点的概念 规划站点结构 创建导航草图 应用举例——规划“诚与”广告公司站 点
站点的概念
多个网页文档通过各种链接关联起来就构成了 站点，站点可以小到一个网页，也可以大到整 个网站。 Dreamweaver MX 2004提供了3类站点：本地站 点、远程站点和测试站点。用户可通过本地站 点和远程站点在本地磁盘和Web服务器之间传 输文件，测试站点可用于对动态站点的测试。
启动Dreamweaver MX 2004
首次启动Dreamweaver MX 2004时，将 弹出“工作区设置”对话框。在该对话 框中可选择工作区布局，对于初学者来 说，基本上不会涉及代码编写，可选择 单选按钮。
启动Dreamweaver MX 2004
以上是首次启动Dreamweaver MX 2004所 需进行的操作，以后启动会直接进入工作 界面。
退出Dreamweaver MX 2004
在结束网页编辑后若需退出 Dreamweaver MX 2004，操作很简单， 直接单击操作窗口右上角的 按钮或选 择“文件/退出”命令即可。
Dreamweaver MX 2004的工作界面 启动Dreamweaver MX 2004后即可进入其 工作界面。
创建导航草图
做好了站点的规划后，就可根据规划制 作出一个导航草图便于理清思路，制作 时可直接在纸上粗略绘出导航草图。
创建导航草图
“影视倾城”网站首页
乐坛动态
歌星档案
音乐故事
唱片封面
乐评
电影音乐
新 歌 推 荐
星 闻 追 踪
新 碟 快 报
中 国
海 外
男 歌 手
女 歌 手
主 题 曲
原 声 碟
应用举例——规划“诚与”广告公司站 点
第2章
Dreamweaver MX 2004
本章要点 初识Dreamweaver MX 2004 创建站点 Dreamweaver MX 2004基本操作
启动与退出Dreamweaver MX 2004
安装好Dreamweaver MX 2004后就可以 使用它进行网页制作了。接下来就讲解 怎样启动与退出Dreamweaver MX 2004。
启动Dreamweaver MX 2004
启动Dreamweaver MX 2004可选择“开 始/所有程序/Macromedia/Macromedia Dreamweaver MX 2004”命令。也可双击 Dreamweaver MX 2004的桌面快捷方式。
启动Dreamweaver MX