网页设计与制作Dreamweaver MX

会计学1网页设计与制作网页设计与制作Dreamweaver MX 启动与退出启动与退出启动与退出启动与退出Dreamweaver MX 2004Dreamweaver MX 2004n n安装好Dreamweaver MX 2004后就可以使用它进行网页制作了。接下来就讲解怎样启动与退出Dreamweaver MX 2004。第1页/共28页 启动启动Dreamweaver MX 2004n n启动Dreamweaver MX 2004可选择“开始/所有程序/Macromedia/Macromedia Dreamweaver MX 2004”命令。也可双击Dreamweaver MX 2004的桌面快捷方式。第2页/共28页启动启动Dreamweaver MX第3页/共28页 启动启动Dreamweaver MX 2004n n首次启动Dreamweaver MX 2004时，将弹出“工作区设置”对话框。在该对话框中可选择工作区布局，对于初学者来说，基本上不会涉及代码编写，可选择 单选按钮。第4页/共28页启动启动Dreamweaver MX 2004n n以上是首次启动以上是首次启动Dreamweaver MX 2004Dreamweaver MX 2004所需进行的操作，所需进行的操作，以后启动会直接进入工作以后启动会直接进入工作 界面。界面。第5页/共28页退出退出Dreamweaver MX 2004 在结束网页编辑后若需退出Dreamweaver MX 2004，操作很简单，直接单击操作窗口右上角的 按钮或选择“文件/退出”命令即可。第6页/共28页Dreamweaver MX 2004Dreamweaver MX 2004的工作界面的工作界面的工作界面的工作界面启动Dreamweaver MX 2004后即可进入其工作界面。第7页/共28页 Dreamweaver MX2004Dreamweaver MX2004的工作窗口的工作窗口的工作窗口的工作窗口标题栏菜单栏编辑区文档栏属性面板面板组第8页/共28页Dreamweaver MX 2004Dreamweaver MX 2004的工作界面的工作界面的工作界面的工作界面n n菜单栏n n起始页n n工具栏n n文档编辑窗口n n属性面板n n面板组第9页/共28页创建站点创建站点 规划站点创建站点打开站点 编辑站点第10页/共28页 规规 划划 站站 点点n n进行网页制作之前需创建站点，利用站点的管理功能可对站点中的文件进行管理或测试。创建站点前首先应规划站点，再通过Dreamweaver MX 2004的站点管理功能创建站点的框架，包括主页、分支页面和相应的文件夹等。第11页/共28页规规 划划 站站 点点n n站点的概念n n规划站点结构n n创建导航草图n n应用举例规划“诚与”广告公司站点第12页/共28页站点的概念站点的概念n n多个网页文档通过各种链接关联起来就构成了多个网页文档通过各种链接关联起来就构成了站点，站点可以小到一个网页，也可以大到整站点，站点可以小到一个网页，也可以大到整个网站。个网站。n nDreamweaver MX 2004Dreamweaver MX 2004提供了提供了3 3类站点：本地站类站点：本地站点、远程站点和测试站点。用户可通过本地站点、远程站点和测试站点。用户可通过本地站点和远程站点在本地磁盘和点和远程站点在本地磁盘和WebWeb服务器之间传服务器之间传输文件，测试站点可用于对动态站点的测试。输文件，测试站点可用于对动态站点的测试。n n 本地站点本地站点n n 远程站点远程站点n n 测试站点测试站点第13页/共28页规划站点结构规划站点结构n n设计站点的必要前提是规划站点结构。规划设计站点的必要前提是规划站点结构。规划站点结构是指利用不同的文件夹将不同的站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站网页内容分门别类地保存，合理地组织站点结构，可提高工作效率，加快对站点的点结构，可提高工作效率，加快对站点的设计。设计。n n在制作站点时通常先在本地磁盘上创建一个在制作站点时通常先在本地磁盘上创建一个文件夹，将所有在制作过程中创建和编辑文件夹，将所有在制作过程中创建和编辑的网页内容都保存在该文件夹中。在发布的网页内容都保存在该文件夹中。在发布站点时，直接将这些文件夹上传到站点时，直接将这些文件夹上传到WebWeb服务服务器上即可。如果站点内容较多或站点较大，器上即可。如果站点内容较多或站点较大，则还需建立子文件夹以存放不同类型的网则还需建立子文件夹以存放不同类型的网页内容。页内容。第14页/共28页规划站点结构规划站点结构n n在站点规划过程中，需使用合理的文件名称、文在站点规划过程中，需使用合理的文件名称、文件夹名称，好的名称容易理解、记忆，能够表达件夹名称，好的名称容易理解、记忆，能够表达出网页的内容。通常在命名时，可以采用与其内出网页的内容。通常在命名时，可以采用与其内容相同的英文或拼音进行命名，应避免使用长文容相同的英文或拼音进行命名，应避免使用长文件名和中文，如电影文件夹可以命名为件名和中文，如电影文件夹可以命名为moviemovie或或dianyingdianying。n n制作网页所需的图片或动画等文件的存放位置也制作网页所需的图片或动画等文件的存放位置也是规划站点结构时应考虑的。如果是大型站点，是规划站点结构时应考虑的。如果是大型站点，可分别创建相应的文件夹在各个类别的文件夹下，可分别创建相应的文件夹在各个类别的文件夹下，如在站点根目录下创建一个名称为如在站点根目录下创建一个名称为picturepicture的文件夹的文件夹用以存放主页中用到的图片和动画。如果站点内用以存放主页中用到的图片和动画。如果站点内容较少，可以只在站点的根目录下创建一个文件容较少，可以只在站点的根目录下创建一个文件夹。夹。第15页/共28页创建导航草图创建导航草图n n做好了站点的规划后，就可根据规划制作出一个导航草图便于理清思路，制作时可直接在纸上粗略绘出导航草图。第16页/共28页创建导航草图创建导航草图第17页/共28页 应用举例应用举例应用举例应用举例规划规划规划规划“诚与诚与诚与诚与”广告公司站点广告公司站点广告公司站点广告公司站点n n将为一个名为“诚与”的广告公司网站进行站点结构的规划。第18页/共28页规划诚与广告公司站点结构图规划诚与广告公司站点结构图第19页/共28页【实例实例1】创建一个站点创建一个站点使用菜单使用菜单“站点站点”“管管理站点理站点”打开站点管理打开站点管理对话框，进行操作对话框，进行操作创建站点创建站点第20页/共28页打开站点和编辑站点信息打开站点和编辑站点信息打开站点和编辑站点信息打开站点和编辑站点信息vv打开站点打开站点vv编辑站点编辑站点第21页/共28页使用使用使用使用“高级高级高级高级”方式定义站点方式定义站点方式定义站点方式定义站点 在在“定义站点定义站点”向导进向导进行的任意一个步骤，选择对行的任意一个步骤，选择对话框上部的话框上部的“高级高级”标签，标签，可打开高级站点定义对话框。可打开高级站点定义对话框。第22页/共28页 Dreamweaver MX2004Dreamweaver MX2004的基本操作的基本操作的基本操作的基本操作实例二、制作一个简单的网页实例二、制作一个简单的网页第23页/共28页设置工作界面设置工作界面v关闭面板关闭面板v标尺和网格标尺和网格v辅助显示辅助显示v首选参数的设置首选参数的设置第24页/共28页对象的大小和颜色对象的大小和颜色1.1.修改文字大小修改文字大小 在属性面板上的大小中选择文字的大小，文字大小可设置绝对尺寸、相对尺寸、长度、百分比 2.2.修改文字颜色修改文字颜色 在默认的情况下，文本在浏览器窗口内显示为黑色。在属性面板的文本颜色按钮 上单击可打开调色板，选择要设置的颜色。第25页/共28页 设置图像大小的多种操作方式设置图像大小的多种操作方式1.1.拖动改变大小拖动改变大小拖动图像下边、右边、右下角的三个控制点可快速改变图像大小。2.2.使用属性面板使用属性面板在属性面板的宽、高栏输入宽、高的像素值，可改变图像大小。3.3.使用右键菜单使用右键菜单 在图像上面单击右键，在弹出菜单中选择“改变大小”可重设图像大小。第26页/共28页6.6.使用面板组的属性面板使用面板组的属性面板使用菜单“窗口”“属性”或单击“标签检查器”面板组打开属性面板，在编辑窗口中选中要设置大小的图片，再单击“常规”前面的加号，列出图片的各种属性，在width和height中设置图片大小的值。4.4.使用系统菜单使用系统菜单使用菜单“修改”“图像”虽然不能修改图像的大小，但可以改变图像的其他属性。5.5.使用代码编辑器使用代码编辑器将显示模式设为代码模式或拆分模式，可直接编辑图片文件的HTML代码中的width和height属性的值，改变图像大小。设置图像大小的多种操作方设置图像大小的多种操作方式式第27页/共28页