《网页设计与制作：Dreamweaver_MX》由会员分享，可在线阅读，更多相关《网页设计与制作：Dreamweaver_MX（73页珍藏版）》请在金锄头文库上搜索。
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，操作很简单，直接单击操作窗口右上角的 按钮或选择“文件/退出”命令即可。,Dreamw
3、eaver MX 2004的工作界面,启动Dreamweaver MX 2004后即可进入其工作界面。,Dreamweaver MX2004的工作窗口,标题栏,菜单栏,编辑区,文档栏,属性面板,面板组,Dreamweaver MX 2004的工作界面,菜单栏 起始页 工具栏 文档编辑窗口 属性面板 面板组,创建站点, 规划站点 创建站点 打开站点编辑站点 ,规 划 站 点,进行网页制作之前需创建站点，利用站点的管理功能可对站点中的文件进行管理或测试。创建站点前首先应规划站点，再通过Dreamweaver MX 2004的站点管理功能创建站点的框架，包括主页、分支页面和相应的文件夹等。,规 划
4、站 点,站点的概念 规划站点结构 创建导航草图 应用举例规划“诚与”广告公司站点,站点的概念,多个网页文档通过各种链接关联起来就构成了站点，站点可以小到一个网页，也可以大到整个网站。 Dreamweaver MX 2004提供了3类站点：本地站点、远程站点和测试站点。用户可通过本地站点和远程站点在本地磁盘和Web服务器之间传输文件，测试站点可用于对动态站点的测试。 本地站点 远程站点 测试站点,规划站点结构,设计站点的必要前提是规划站点结构。规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站点结构，可提高工作效率，加快对站点的设计。 在制作站点时通常先在本地磁盘上创建
5、一个文件夹，将所有在制作过程中创建和编辑的网页内容都保存在该文件夹中。在发布站点时，直接将这些文件夹上传到Web服务器上即可。如果站点内容较多或站点较大，则还需建立子文件夹以存放不同类型的网页内容。,规划站点结构,在站点规划过程中，需使用合理的文件名称、文件夹名称，好的名称容易理解、记忆，能够表达出网页的内容。通常在命名时，可以采用与其内容相同的英文或拼音进行命名，应避免使用长文件名和中文，如电影文件夹可以命名为movie或dianying。 制作网页所需的图片或动画等文件的存放位置也是规划站点结构时应考虑的。如果是大型站点，可分别创建相应的文件夹在各个类别的文件夹下，如在站点根目录下创建一个
6、名称为picture的文件夹用以存放主页中用到的图片和动画。如果站点内容较少，可以只在站点的根目录下创建一个文件夹。,创建导航草图,做好了站点的规划后，就可根据规划制作出一个导航草图便于理清思路，制作时可直接在纸上粗略绘出导航草图。,创建导航草图,应用举例规划“诚与”广告公司站点,将为一个名为“诚与”的广告公司网站进行站点结构的规划。,规划诚与广告公司站点结构图,【实例1】创建一个站点使用菜单“站点”“管理站点”打开站点管理对话框，进行操作,创建站点,打开站点和编辑站点信息,打开站点 编辑站点,使用“高级”方式定义站点,在“定义站点”向导进行的任意一个步骤，选择对话框上部的“高级”标签，可打开
7、高级站点定义对话框。,Dreamweaver MX2004的基本操作,实例二、制作一个简单的网页,设置工作界面,关闭面板 标尺和网格 辅助显示 首选参数的设置,对象的大小和颜色,1.修改文字大小在属性面板上的大小中选择文字的大小，文字大小可设置绝对尺寸、相对尺寸、长度、百分比,2.修改文字颜色在默认的情况下，文本在浏览器窗口内显示为黑色。在属性面板的文本颜色按钮 上单击可打开调色板，选择要设置的颜色。,设置图像大小的多种操作方式,1.拖动改变大小拖动图像下边、右边、右下角的三个控制点可快速改变图像大小。,2.使用属性面板在属性面板的宽、高栏输入宽、高的像素值，可改变图像大小。,3.使用右键菜单
8、在图像上面单击右键，在弹出菜单中选择“改变大小”可重设图像大小。,6.使用面板组的属性面板使用菜单“窗口”“属性”或单击“标签检查器”面板组打开属性面板，在编辑窗口中选中要设置大小的图片，再单击“常规”前面的加号，列出图片的各种属性，在width和height中设置图片大小的值 。,4.使用系统菜单使用菜单“修改”“图像”虽然不能修改图像的大小，但可以改变图像的其他属性。,5.使用代码编辑器将显示模式设为代码模式或拆分模式，可直接编辑图片文件的HTML代码中的width和height属性的值，改变图像大小 。,设置图像大小的多种操作方式,29,第3章 插入网页基本元素,本章要点 插入文字 插入
9、图像 插入表格 插入媒体元素 插入表单,30,插入文字,在Dreamweaver中为网页插入文本有两种方法： 直接输入文本 从其他文档中复制文本,31,插入特殊符号,将插入工具切换到“文本”工具组； 使用菜单“插入”“HTML” “特殊字符”。,32,插入特殊符号,插入换行符 使用Shift+Enter组合键,33,插入特殊符号,插入空格 ctrlshift空格 插入特殊符号，不换行空格插入转义符,34,设置文字属性,进行设置时使用组合键Ctrl+F3或菜单“窗口”“属性”打开属性面板。设置字体大小设置字体颜色设置字体列表【字体】【编辑字体列表】单击在可用字体中选则，单击按钮,35,使用样式设
10、置文字格式 【样式】选择 重命名、再进行修改。 把文字变为标题 在属性面板的格式中选择 设置文本对齐 在属性面板中设置 列表 在属性面板中进行设置,36,应用举例设置网页文本格式,下面为“如果”网页中的文本进行格式设置，要求文本标题样式与正文不同，正文中某些文字需突出，以达到美化网页文本的目的。,37,网页效果图,38,插入滚动字幕,1.插入滚动字幕,（1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。,（2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码窗口中光标的位置。,（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择器对话框。,（4）在标签选择器对
11、话框左边窗口逐级选择“HTML标签” “页元素”“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭对话框。,（5）在代码中出现，在中间的两个尖括号“”之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。,39,设置滚动字幕的属性, direction为滚动的目标方向，可选right、left、up、down。 scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度和间隔时间。 loop设置循环次数，小于1为连续循环。 Bgcolor设置滚动区域的背景颜色。 width 和heig
12、ht设置滚动区域的大小，沿垂直方向（up或down）滚动时，必须设置一定的高度值，否则看不到滚动的文字。,40,设置文本超级链接,1.使用属性面板设置超级链接,2.使用工具按钮,（1）插入超级链接单击工具栏上的超级链接按钮,（2）插入邮件链接链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮,41,设置文本超级链接,3、设置下载文件的超级链接 4、创建外部链接Http:/ 5、链接文字颜色的设置通过页面属性来设置的。,42,使用锚记,设置锚记 使用锚记,43,插入水平线,水平线可用于页面上内容的分隔。将工具按钮切换到“HTML”，单击水平线按钮,单击该水平线，可在属性面板中设置水平线的属
13、性，如宽度、高度、对齐方式等。水平线的颜色可以使用属性面板中的“快速标签编辑器”设置。值得注意的是水平线的颜色只能在预览时看出来。,44,插入图像,图像的格式用于网页的图像通常只有GIF、JPE和PNG 3种格式。 图像的获取方法 图像文件的保存,45,插入图像,插入图像的步骤如下 ： （1）把工具栏切换到“常用”状态，然后单击“图像：图象”按钮 （2）选择要插入的图像文件，在文件列表中单击一个图象文件时，图象预览区会显示这个图象的缩略图。 （3）单击确定按钮，如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出图像。,46,设置图像的基本属性,改变图像大小 图文混排 垂直边
14、距和水平边距 图像替代 图像边框,47,图片超级链接和图像地图,1.图片超级链接,2.图像地图,如果想在一个图像的不同位置上点击，就跳转到相应的目标网页，就需要使用图象地图。,（1）设置矩形热区 （2）设置圆形热区 （3）设置多边形热区,48,图像占位符和轮换图像,1. 图象占位符,2.插入鼠标经过图像,单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择图像占位符按钮,单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠标经过图像按钮,49,设置网页图片属性最终效果图,50,插入表格,添加表格 编辑表格 格式化表格 导入表格数据,51,插入表格,表格的知识,表格由数个行与列组成的，
15、行、列交叉组成表格的单元格，可以在表格的单元格内插入各种信息，包括文本、数字、链接，甚至是图像。,52,添加表格,新建表格 修改表格属性 设置单元格属性,53,1.新建表格,（1）将插入工具栏切换到“常用”模式，单击表格按钮,（2）在表格对话框中设置表格的样式。,（3）单击“确定”按钮就可以把表格插到网页中。,（4）在表格的各个单元格中分别输入内容。,54,2.修改表格属性,高 背景颜色 边框颜色 背景图像 对齐设置,55,3.设置单元格属性,文字（属性面板的上半部分） 水平 宽、高 垂直 标题 背景和背景颜色 边框,56,应用举例在网页中插入表格并添加网页元素,下面为“繁花似锦”网页进行表格
16、的添加和网页元素的添加。,57,最终效果图,58,编辑表格,1.合并单元格,拖动选中要合并的单元格，单击属性面板上的合并单元格按钮,2.拆分单元格,在要拆分的单元格中单击，在单击属性面板上的拆分单元格按钮,3.插入或删除行、列,使用菜单“插入”“表格”菜单中的插入行或列，删除行或列进行相应的操作。,59,编辑表格,实例1、绘制课本51页的表格。,60,插入图像预览效果图,61,格式化表格,在要格式化的表格中单击，再使用菜单“命令”“格式化表格”打开格式化表格对话框。,62,导入表格数据,1. 导出Excel数据为文本文件,在Excel中使用菜单“文件”“另存为”打开另存为对话框，在“文件类型”中选择“文本文件（制表符分割）（*.txt）”，保存文件为biaoge.txt。,2.导入位网页表格,将“插入”工具栏切换为“布局”模式，在右边单击表格数据按钮,选择数据文件为Excel导出的文本文件biaoge.txt，定界符选“Tab”。表格宽度设置单元格的宽度，选择“匹配内容”。也可以制定宽度。,
