《《网页设计与制作》-任正云-电子教案 第2章 Dreamweaver 入门》由会员分享，可在线阅读，更多相关《《网页设计与制作》-任正云-电子教案 第2章 Dreamweaver 入门（25页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作教程,中国水利水电出版社 网页设计与制作教材 配套电子教案 2007.6,2.1 Dreamweaver 8.0界面介绍 2.2 Dreamweaver 8.0常用工具 2.3 Dreamweaver8.0的功能简介 2.4 使用Dreamweaver 8.0处理图片 2.5 在Dreamweaver 8.0中规划站点 2.6 本地站点的搭建与管理 2.7 实践技能训练,第二章 Dreamweaver 8.0入门,2.1.1 Dreamweaver 8.0界面介绍 在首次启动Dreamweaver8时会出现如图2-1的一个界面,这是一个“工作区设置”对话框，在对话框左侧是Drea
2、mweaver8的设计视图，右侧是Dreamweave 8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。,2.1 Dreamweaver 8.0界面介绍,2.1.1 Dreamweaver 8.0界面介绍 Dreamweaver 8.0标准工作界面大致可以分为以下几个区域: 标题栏: 菜单栏： 文档工具栏： “插入”栏： 文档窗口： 属性栏： 状态栏： 浮动面板组：,2.1 Dreamweaver 8.0界面介绍,2. 2.1菜单栏工具 文件：用来管理文件。 插入：用来插入各种元素. 修改：具有对页面元素修改的功
3、能。 文本：用来对文本操作。 命令：所有的附加命令项 站点：用来创建和管理站点 窗口：用来显示和隐藏控制面板以及切换文档窗口 帮助：联机帮助功能。,2.2 Dreamweaver 8.0常用工具,2.2.2文档工具栏 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。界面如图2-4所示。,2.2 Dreamweaver 8.0常用工具,2.2.3 “插入”栏 插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。有常用、布局、表单、文本、HTML、应用程序、Flash元素和收藏夹共8个二级菜
4、单共167个按钮。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。面板的界面如图2-5所示。,2.2 Dreamweaver 8.0常用工具,2.2.4文档窗口 “文档”窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver 8.0显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。“代码”视图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码以及
5、任何其他类型代码的手工编码环境。“代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。,2.2 Dreamweaver 8.0常用工具,2.2.5属性栏 属性面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择了一幅图像，那么属性面板上就出现该图像的相关属性；如果选择了表格，那么属性面板会相应的变化成表格的相关属性。属性面板的界面如图2-8所示。,2.2 Dreamweaver 8.0常用工具,2.2.6状态栏 “文档窗口”的底部的状态栏提供了与你正在创建的文档的有关其他
6、信息。“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击 可以选择文档的整个正文。,2.2 Dreamweaver 8.0常用工具,1.将世界一流水平的“设计”和“代码”编辑器合二为一，在设计窗口中精简源代码，是用户能够按照工作的需要指定自己的用户界面。 2.跨浏览器有效检查当保存时，自动地检查当前文档跨浏览器的有效性（兼容性），可以指定测试浏览器，同时自动检测以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检测功能可以自动核对tags或CSS规则是否适应
7、目前的主浏览器。 3.使用内置的图形编辑程序让开发更加节省时间。图像的剪切、缩放等一系列的辅助性的图象编辑功能可以使用内嵌的Macromedia Fireworks 技术。 4.在设计模式下允许开发者可以不用固定的浏览器预览数据，而利用LiveData窗口预览实时数据。,2.3 Dreamweaver8.0的功能简介（1）,5.功能更多的CSS支持 在设计窗口中运用重新设计的标签检测工具来检测哪个CSS规则运用与当前的选择。 即时编辑功能让你在编辑CSS的同时能够即时看到设计窗口中的变化。 使用增强的CSS面板直接在代码内部定义样式，并且可以直观地看到CSS样式定义的位置。 不必切换编辑方式直
8、接选取CSS样式，样式下拉列表中内置了所有可用样式的预览显示。 通过页面属性对话框（ “修改”菜单 “页面属性” ）获取更多改变页面控制属性（如标题、链接等）。,2.3 Dreamweaver8.0的功能简介（2）,6.运用完整的集成开发环境来开发HTML、XHTML、XML、ASP、ASP.NET、JSP、PHP和Macromedia Cold Fusion站点。通过Macromedia插件中心可以获取800多个免费插件来制定和扩展你的开发环境。 7.所有传输的文件完全加密，并阻止越权存取你的信息、文件内容、用户名和口令。 8.从Microsoft Word和Excel中直接拷贝粘帖内容到D
9、reamweaver中，同时保留字体、颜色和CSS样式。完全支持Unicode，支持使用和chu存任何字体以及编码（包括双字节字符）。 9.使用改进后的ASP.NET对象和属性检测工具构建Microsoft ASP.NET Web forms.,2.3 Dreamweaver8.0的功能简介（3）,10.重新编写PHP语法和服务器行为，包括Master-Detail页面设置模块、用户身份验证模块等。 通过内置的Flash构件，导入一个Flash构件就像标签一样轻松。 MXHTML构件，利用MX组件（包括按钮、模板）快速建立有效的用户界面。 改进的表格编辑工具，修改的Insert面板，高效的文件
10、编辑过程。更多有效地代码编辑（如按右键弹出的编码工具），更多的搜索选择项并且能够保存搜索条件，以及能够迅速启动属性检查工具。详尽的属性编辑，列出每个适用于当前选择项的可用属性。 此外Dreamweaver 8.0还增加了图片处理功能：图片的亮度和对比度的调节、图片的锐化效果等。,2.3 Dreamweaver8.0的功能简介（4）,在Dreamweaver 中插入一张图片，“属性”面板上就多了几个与图片相关的属性图标。改变图片的大小后，在图片大小设置栏旁边就多了一个带箭头的图形按钮图标，这是快速使图片还原到原始大小的工具。在切换到Fireworks图标旁边的一组图表之中，也是一个这样的图标。D
11、reamweaver 8.0同时还增加了“剪切(Crop)”工具（剪切图片）、“亮度/对比度”调节工具、“锐化”工具等三个图片处理的 新功能。有了这些简单的图片处理工具，在编辑网页图片时，不需要启动其它的图像处理软件，提高了工作效率。,2.4使用Dreamweaver 8.0处理图片,图片剪切 2.亮度的调节 3.锐化,2.4使用Dreamweaver 8.0处理图片,在Dreamweaver中,站点这个术语既可以是Web站点,也可以指属于Web站点的文档在本地存储的位置。当开始考虑创建Web站点时，为了确保站点的成功，应该按照一系列的规划步骤进行。即使创建个人的主页，只有朋友和家人看见，仔细
12、规划站点也是有用的。 要开发一个优秀的网站，通常应该遵循以下工作流程：首先定义开发网站的目的，作好网站的规划工作； 接下来对网站的外观进行设计；然后进行实际页面的制作； 接着再对制作的网站进行测试，以确保所做的网站符合最初设计的目标； 最后是将网站发布。发布网站后还要定期对网站进行维护，以便及时更新网站内容。,2.5在Dreamweaver 8.0中规划站点(1),网站的规划主要包括以下内容： 1.确定网站的主题和名称 网站主题是指用户建立网站所要包含的主要内容。现在网站的主题很多，这一步是整个网站规划环节最重要的。一般来说，确定网站主题时要遵循以下原则： 主题鲜明、小而精。一个网站必须有一个
13、明确的主题，在主题范围内做到内容大而全、精而深。 主题是自己最擅长的最感兴趣的。找准一个自己最赶兴趣的内容做深、做透。 体现自己的个性。把自己的兴趣、爱好尽情的发挥出来，突出自己的个性，办出自己的特色。,2.5在Dreamweaver 8.0中规划站点(2),2.搜集资料 确定网站的主题后，要围绕主题开始搜集资料。资料既可以从图书、报纸、光盘、多媒体上获得，也可以从网上搜集；然后再把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。 3.规划站点 规划站点就像设计一座大楼一样，只有图纸设计好了，才能建成一座漂亮的楼房。在规划网站时，首先要把网站的内容一一列举出来，根据内容列出一个结构化的蓝
14、图，根据实际情况设计各个页面之间的链接。网站的规划内容有：确定网站点题材，确定网站的名称，确定网站的框架等。,2.5在Dreamweaver 8.0中规划站点(3),4.栏目的设置 合理的设计网站的栏目和板快，一般要注意以下事项： 突出主题。把主题栏目放在最显眼的地方，让访问者更快、更鲜明地知道你的网站所要表现的内容。 设计一个“最近更新”的蓝目。 5.目录结构设计 目录结构设计一般要注意以下事项： 按照栏目内容建立子目录。 每个目录下分别为图像创建一个目录image。 目录的层次不呢感太深，最好少于5层。 尽量使用意义明确的非中文目录（一般用拼音）。,2.5在Dreamweaver 8.0中
15、规划站点(4),6.颜色搭配 合理地应用色彩是非常关键的，不同的色彩搭配产生不同的效果，并能够影响访问者的情绪。色彩搭配要遵循和谐、均衡、重点突出的原则。 7.版面布局 网页页面的版面布局是不可忽视的。要合理地运用空间，使网页疏密有致，井井有条。版面布局一般遵循的原则是：突出重点、平衡和谐，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置。同时还要注意其它也面和首页的风格一致性，要有返回首页的链接。,2.5在Dreamweaver 8.0中规划站点(5),8. 图像的运用 网页上不能只有文字，必须适当地增加一些图像，使用图像一般要注意以下事项： 图像为主页的内容服务，不要让整个页面花花
16、绿绿，喧宾夺主。 图像要兼顾大小美观。图片不仅要好看，还要在保证图片质量的情况下尽量缩小图片的大小。单张图像不要超过30KB。 合理地使用JPG和GIF格式。一般来说，颜色 较少的（在256色以内的）图像把它处理成GIF格式；颜色比较丰富的图像，最好把它处理成JPG格式。,2.5在Dreamweaver 8.0中规划站点（6）,要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的web服务器上。放置在本地磁盘上的网站被称为本地站点，位于互联网web服务器里的网站被称为远程站点。 Dreamweaver 8.0提供了对本地站点和远程站点强大的管理功能。 在Dreamweaver 8.0中可以有效的建立并管理多个站点。搭建站点可以有两种方法，一是利用向导完成，二是利用高级设定来完成。 1.定义站点 2.搭建站点结构 3.文件与文件夹的管理,2.6本地站点
