网页设计与制作第二章DreamweaverMX20041.ppt

《网页设计与制作第二章DreamweaverMX20041.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第二章DreamweaverMX20041.ppt（28页珍藏版）》请在三一办公上搜索。

1、第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的桌面快

2、捷方式。,启动Dreamweaver MX,启动Dreamweaver MX 2004,首次启动Dreamweaver MX 2004时，将弹出“工作区设置”对话框。在该对话框中可选择工作区布局，对于初学者来说，基本上不会涉及代码编写，可选择 单选按钮。,启动Dreamweaver MX 2004,以上是首次启动Dreamweaver MX 2004所需进行的操作，以后启动会直接进入工作 界面。,退出Dreamweaver MX 2004,在结束网页编辑后若需退出Dreamweaver MX 2004，操作很简单，直接单击操作窗口右上角的 按钮或选择“文件/退出”命令即可。,Dreamweav

3、er MX 2004的工作界面,启动Dreamweaver MX 2004后即可进入其工作界面。,Dreamweaver MX2004的工作窗口,标题栏,菜单栏,编辑区,文档栏,属性面板,面板组,Dreamweaver MX 2004的工作界面,菜单栏起始页工具栏文档编辑窗口属性面板面板组,创建站点,规划站点创建站点打开站点 编辑站点,规 划 站 点,进行网页制作之前需创建站点，利用站点的管理功能可对站点中的文件进行管理或测试。创建站点前首先应规划站点，再通过Dreamweaver MX 2004的站点管理功能创建站点的框架，包括主页、分支页面和相应的文件夹等。,规 划 站 点,站点的概念规划

4、站点结构创建导航草图应用举例规划“诚与”广告公司站点,站点的概念,多个网页文档通过各种链接关联起来就构成了站点，站点可以小到一个网页，也可以大到整个网站。Dreamweaver MX 2004提供了3类站点：本地站点、远程站点和测试站点。用户可通过本地站点和远程站点在本地磁盘和Web服务器之间传输文件，测试站点可用于对动态站点的测试。本地站点远程站点测试站点,规划站点结构,设计站点的必要前提是规划站点结构。规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站点结构，可提高工作效率，加快对站点的设计。在制作站点时通常先在本地磁盘上创建一个文件夹，将所有在制作过程中创建和编

5、辑的网页内容都保存在该文件夹中。在发布站点时，直接将这些文件夹上传到Web服务器上即可。如果站点内容较多或站点较大，则还需建立子文件夹以存放不同类型的网页内容。,规划站点结构,在站点规划过程中，需使用合理的文件名称、文件夹名称，好的名称容易理解、记忆，能够表达出网页的内容。通常在命名时，可以采用与其内容相同的英文或拼音进行命名，应避免使用长文件名和中文，如电影文件夹可以命名为movie或dianying。制作网页所需的图片或动画等文件的存放位置也是规划站点结构时应考虑的。如果是大型站点，可分别创建相应的文件夹在各个类别的文件夹下，如在站点根目录下创建一个名称为picture的文件夹用以存放主页

6、中用到的图片和动画。如果站点内容较少，可以只在站点的根目录下创建一个文件夹。,创建导航草图,做好了站点的规划后，就可根据规划制作出一个导航草图便于理清思路，制作时可直接在纸上粗略绘出导航草图。,创建导航草图,应用举例规划“诚与”广告公司站点,将为一个名为“诚与”的广告公司网站进行站点结构的规划。,规划诚与广告公司站点结构图,【实例1】创建一个站点使用菜单“站点”“管理站点”打开站点管理对话框，进行操作,创建站点,打开站点和编辑站点信息,打开站点编辑站点,使用“高级”方式定义站点,在“定义站点”向导进行的任意一个步骤，选择对话框上部的“高级”标签，可打开高级站点定义对话框。,Dreamweave

7、r MX2004的基本操作,实例二、制作一个简单的网页,设置工作界面,关闭面板标尺和网格辅助显示首选参数的设置,对象的大小和颜色,1.修改文字大小 在属性面板上的大小中选择文字的大小，文字大小可设置绝对尺寸、相对尺寸、长度、百分比,2.修改文字颜色 在默认的情况下，文本在浏览器窗口内显示为黑色。在属性面板的文本颜色按钮 上单击可打开调色板，选择要设置的颜色。,设置图像大小的多种操作方式,1.拖动改变大小拖动图像下边、右边、右下角的三个控制点可快速改变图像大小。,2.使用属性面板在属性面板的宽、高栏输入宽、高的像素值，可改变图像大小。,3.使用右键菜单 在图像上面单击右键，在弹出菜单中选择“改变大小”可重设图像大小。,6.使用面板组的属性面板使用菜单“窗口”“属性”或单击“标签检查器”面板组打开属性面板，在编辑窗口中选中要设置大小的图片，再单击“常规”前面的加号，列出图片的各种属性，在width和height中设置图片大小的值。,4.使用系统菜单使用菜单“修改”“图像”虽然不能修改图像的大小，但可以改变图像的其他属性。,5.使用代码编辑器将显示模式设为代码模式或拆分模式，可直接编辑图片文件的HTML代码中的width和height属性的值，改变图像大小。,设置图像大小的多种操作方式,