专业网页制作工具 Dreamweaver MX

专业网页制作工具Dreamweaver MX 学以致用，以用促学！轻松成为网页设计师！

教学大纲 • Dreamweaver MX基础知识 • Dreamweaver MX基本操作 • 网页制作语言基础 • 超链接 • 图像 • 表格 • 表单 • CSS样式 • 行为、层和时间轴 • 框架

Dreamweaver MX基础知识 • Dreamweaver MX 功能介绍 • Dreamweaver MX 工作区介绍 • Dreamweaver MX 的基本界面

Dreamweaver MX 功能介绍 • 功能强大的站点管理功能 • 所见即所得的HTML网页制作功能 • 应用客户端行为、层和时间轴可以制作出动感网页 • 可制作出支持数据库的ASP、ASP.NET、JSP、PHP等动态网页

Dreamweaver MX工作区介绍 • Dreamweaver MX 工作区：　　是一种将全部元素置于一个窗口中的集成布局，文档窗口居左，面板组居右。 • HomeSite/代码编写者样式工作区：　　基本与Dreamweaver MX相同，只是更适合喜欢手写代码的用户，面板组居左，文档窗口居右。 • Dreamweaver 4 工作区　　类似于Dreamweaver 4的浮动布局

Dreamweaver MX 工作区

HomeSite/代码编写者样式工作区

Dreamweaver 4 工作区

如何更改工作区？ • 打开“编辑/参数选择”，在弹出的参数选择对话框上单击“更改工作区”按钮

工作区设置窗口

Dreamweaver MX的基本界面 • 插入栏 • 文档工具栏 • 标签选择器 • 属性检查器 • 面板组

文档工具栏 插入栏标签选择器属性检查器面板组

Dreamweaver MX的基本操作 • 创建、管理站点和网页文件 • 插入文本并设置其属性 • 设置页面属性 • 为文本做超链接

网页制作语言基础 • HTML超文本标记语言 • JavaScript脚本语言 • VBScript脚本语言 • CSS样式表 • ASP、PHP、JSP脚本语言

HTML语言简介 • HTML语言，又称超文本标记语言，是英文Hyper Text Markup Language的缩定。 • 我们通过浏览器看到的网页，主要是通过HTML来完成的，它通过各种标记将文字、图片、表格、声音、视频等内容显示出来。

文件头 表头主体 HTML语言的基本结构

HTML常用页面标记 • 标记的用法 • 文件标记与页首标记 • 文字标记与字幕标记 • 水平线标记、段落标记与换行标记 • 超链接标记 • 图像标记 • 表格标记、行标记、单元格标记 • 表单标记 • 浮动窗口标记

标记的用法 例：<FONT size=5 color=white face=黑体> 　　标记的用法 </FONT> • 这是一个定义5号白色黑体字的标记，FONT是标记名称，size、color、face都是标记的属性,5、white、黑体都是属性的值 • 除水平线标记<HR>，换行标记<BR>，图象标记<IMG>等标记外，大部分标记都是成对的，使用时不要忘记用 </标记名称>来结束定义； • 标记的各个属性间用空格隔开； • 标记属性的值可用引号“”引起来，也可以不用； • 颜色可以用颜色用英文名称，也可以用十六进制数#RRGGBB，比如白色可以用white，也可以用#FFFFFF；（提示：大部分标记属性都可以用DWMX的属性检查器来完成）

文　件　标　记 • 文件标记是指HTML文件中标识页面主要属性的标记，包括： • 文件声明：<HTML></HTML>，让浏览器知道这是HTML文件 • 表头：<HEAD></HEAD>，提供网页的整体定义信息 • 主体：<BODY></BODY>，设计文件格式及正文所在，其中的属性标记可以定义页面背景、文字和链接的样式与颜色等（提示：在DWMX中可通过修改/页面属性来进行设置）

页　首　标　记 • 在HTML文件中，夹在<HEAD></HEAD>标记之间的是标记网页基本信息的页首标记，包括： • 开头定义：<META>，用于定义网页的字符集、关键字、文件说明和刷新网页等（提示：在DWMX中可通过插入/文件头标签来进行设置） • 标题：<TITLE></TITLE>，用于定义文件标题，该标题将显示于浏览器顶端的标题栏（提示：在DWMX中可通过文档工具栏的标题文本框来设置） • 样式：<STYLE></STYLE>，用于定义和控制网页的版式（提示：在DWMX中可通过文本/CSS样式来进行设置）

文　字　标　记 • 文字标记是定义文字的字体大小、颜色、字形等变化的标记，包括： • 字体：<FONT></FONT>,用于设定字体大小、颜色、字形，其中SIZE属性用于设置字体大小，COLOR属性用于设置文字颜色，FACE属性用于设置文字字形 • 标题字：<Hn></Hn>，用于设定标题字体的大小， n=1～6，字体1最大，6最小。 • 粗体字：<B></B>，用于显示粗体文字 • 斜体字：<I></I>，用于显示斜体文字 • 底划线：<U></U>，用于显示文字下划线 • 上标字：<SUP></SUP>，用于显示上标字 • 下标字：<SUB></SUB>，用于显示下标字

字　幕　标　记<MARQUEE> • 字幕标记用于定义活动字幕，从而让整个网页更有动感，它的标记为<MARQUEE></MARQUEE>，其属性有： • bgcolor，用于设定背景颜色 • direction，用于设定字幕的滚动方向，值有向左left,向右right,向上up,向下down • behavior，用于设定字幕滚动的方式，值有滚动条scrool，幻灯片slid，交替alternate • scrollamount,用于设定字幕的滚动距离，一般为2 • width，用于设定字幕的宽度 • height，用于设定字幕的高度 • id,用于给字幕命名如zm，便于用onmouseover=zm.stop()onmouseout=zm.start()控制字幕的暂停与运动

水　平　线　标　记<HR> • 水平线标记用于在网页窗口中加一条水平线，用以分隔文档。它的标记为<HR>，其属性有： • align，用于设定水平线的位置，值有靠左left，居中center，靠右right • noshade，用于设定水平线不具有三维立体感 • size，用于设定水平线的高度 • width，用于设定水平线的宽度 • color，用于设定水平线的颜色

段落标记<P>和换行标记<BR> • 段落标记和换行标记都可以实现换行，但段落标记在使用时相当于硬回车，它会产生一个新段落，段落之间会加一空行；换行标记在使用时相当于软回车，通常用于段落内部的换行。 • 段落的标记为<P></P>，其属性有： • align，用于设定水平线的位置，值有靠左left，居中center，靠右right • 换行的标记为<BR>，一般不使用其它属性

超　链　接　标　记<A> • 超链接标记用于定义一个超链接，从而实现网页的跳转等，它的标记为<A></A>，其属性有： • href，用于设定链接地址，链接地址可以是①url地址如http://xp.cqie.cn，②本站文件如zyjs.htm，③页内地址（又称书签或命名锚记）如zyjs.htm#gsx，④电子邮件地址如mailto:caoxiaoping@qq.com, ⑤javasscript语句如关闭窗口javascript:window.close(); • target，用于设定链接的目标窗口，默认为当前窗口，新建窗口为_blank • title，用于设定鼠标移到链接上时显示的标题 • onclick，用于设定当鼠标点击链接时触发的事件，一般为javasript函数或语句，如关闭窗口window.close(); （提示：要做文件下载或音乐点播的链接，直接将地址指向文件即可，如http://xp.cqie.cn/soft/swf.exe，rtsp://xp.cqie.cn/1.rm）

图像标记<IMG> • 图像标记用于插入一个图像并实现图文混排，它的标记为<IMG>，其常用属性有： • src，用于设置图像的地址 • alt，用于设置图像的提示文字 • border，用于设置图像的边框 • align，用于设置图像的位置，值有居中center，靠左left，靠右rignt，靠上top，靠下bottom等 • width，height,分别用于设置图像的宽度和高度 • vspace，hspace，用于设置图像的水平和垂直间距 • id，用于给图像命名问：插入站点images目录下的图片em.jpg，设置其文字提示为“峨嵋天下秀”，设置其边框为1，设置其位置为居中，设置其宽度为200象素，高度为150象素，代码如何编写？

表格标记<TABLE> • 表格标记用于插入一张表格，它的标记为<TABLE>，其常用属性有： • width，height，用于设置表格的宽度和高度 • align，用于设置表格的位置居中，靠左或靠右 • border，用于设置表格的边框 • cellpadding，cellspacing，用于设置表格的单元格边距和单元格间距 • bgcolor，用于设置表格的背景颜色 • background，用于设置表格的背景图片注：TABLE标记一般需要加上表格的行标记TR和单元格标记TD才能正确显示。

表格行标记<TR>和单元格标记<TD> • 表格行标记用于产生表格的一行，它的标记为<TR>，一般不在行标记中设置其属性； • 单元格标记用于在行中产生一个单元格，通常包含在<TR>标记内，它的标记为<TD>，其常用属性有： • width，height，用于设置单元格的宽度和高度 • align，用于设置单元格内容的位置居中，靠左或靠右 • valign，用于设置单元格内容的垂直位置，值有中间middle，顶端top，底部bottom • bgcolor，用于设置单元格的背景颜色 • backgroud，用于设置单元格的背景图片 • colspan，rowspan，分别用于设置栏宽和栏高问：制作一个三行三列的表格，并设置表格背景色为blue，宽度为500象素，位置为居中，单元格内容也居中，代码如何编写？

表单标记<FORM> • 表单标记用于插入表单，便于用户提交信息，并交给指定的程序进行处理，它的标记为<FORM>，其常用属性有： • name，用于设置表单的名称 • action，用于设置处理被提交表单程序的URL • method，用于设置表单的提交方式，值有POST和GET，当以POST提交时，提交的数据放在请求报文的body部分，在ASP中通过Request.Form来访问提交的内容；当以GET提交时，则通过URL请求来传递提交的数据，在ASP中通过Request.QueryString来取得变量的值注：FORM标记一般需要加上表单对象标记如<INPUT>、 SELECT>、<TEXTAREA>等才起作用。

输入标记<INPUT> • 输入标记用于定义用户输入类型，它的标记为<INPUT>，其常用属性有： • type，用于设置用户输入的形式，值text为文本输入框，值password为密码输入框，值checkbox为复选框，值radio为单选按钮，值image为图片，值hidden为隐藏域，值submit为提交按钮，值reset为重置按钮。 • name，设置表单对象的名称 • size，在type=text时为文本框长度 • maxlength，在type=text时为文本框最大字符数 • value，为用户输入或选择的值，也用于设置初始值

文本域标记<TEXTAREA> • 文本域标记用于实现用户的多行输入，它的标记为<TEXTAREA></TEXTAREA>，其常用属性有： • name，用于设置文本域的名称 • cols，用于设置文本域的字符宽度 • rows，用于设置文本域的行数 TEXTAREA的初始值写在<TEXTAREA>…</TEXTAREA>之间

列表框标记<SELECT> • 列表框标记用于实现用户的选择输入，它的标记为<SELECT></SELECT>，其常用属性有： • name，用于设置列表框的名称 • 列表框标记还要与<option>…</option>标记综合使用，定义列表的选项，其常用属性有： • value，列表选项的表单值 • selected，设置是否预选列表项提示文字写在<option>…<option>中

浮动窗口标记<IFRAME> • 浮动窗口标记用于在窗口中定义一个浮动窗口，它的标记为<IFRAME></IFRAME>，其常用属性有： • src，窗口中显示网页的URL • width,height,定义窗口的宽度和高度 • frameborder,定义窗口的边框宽度 • scrolling，设置窗口是否需要滚动条 • marginwidth, marginheight，设置窗口的水平与垂直间距

超链接 • 理解超链接的文本、链接与目标 • 建立文本超链接 • 建立图像及热点超链接 • 建立电子邮件超链接 • 建立锚点超链接

超链接的文本、链接与目标 • 文本：即显示的文本； • 链接：即链接到的路径，其中有相对路径和绝对路径； • 目标：即超链接的打开方式，如点击链接后用新窗口打开，用_blank。

图像 • 常用的网页图像格式 • 在网页中插入图像并设置其属性 • 在网页中进行图文混排 • 为页面背景和表格背景设置图像 • 在网页中插入翻转图像和导航条

常用的网页图像格式 • GIF格式：支持256色，透明效果，动画，采用无损压缩格式，压缩比小，压缩图像与原图相同； • JPEG格式：支持16位真彩色，无透明效果，无动画，采用有损压缩格式，压缩比大，压缩图像稍逊于原图。

表格 • 插入表格 • 设置表格间距与填充距离 • 设置表格边框与背景 • 设置表格对齐 • 设置单元格垂直与水平对齐 • 用表格实现网页布局

表单 • 表单简介 • 插入表单及表单对象 • 设置表单及表单对象属性

表单简介 　　表单能使网站与访问者进行交互或收集访问者信息。表单从访问者处收集信息，然后将这些信息提交给服务器进行处理，表单可以包含允许访问者进行交互的各种表单对象。这些表单对象包括文本框、文本域、隐藏域、单选框、复选框、下拉菜单、选择列表、按钮等。　　当访问者将信息输入表单并单击提交按钮时，这些信息将被发送到服务器，服务器端脚　本或应用程序将对这些信息进行处理，服务器通过请求信息将相应的结果发送回用户，或执行一些操作来进行响应。　　如果不使用服务器端脚本或应用程序如ASP、JSP、PHP、CGI等来处理表单数据，将无法收集这些数据。

CSS样式表 • CSS样式简介 • 新建和编辑CSS样式 • 定义CSS样式的属性 • 应用CSS样式 • 用CSS修饰超链接文字 • 用CSS修饰表格边框 • 用CSS修饰文本输入框与按钮

CSS样式简介 CSS是Cascading Style Sheets的缩写，一般译为层叠式样式表。用户可以利用CSS精确地控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周四入边框等。通过它可以制作出风格统一且修改方便、具有特殊效果、体积更小的网页。

行为、层和时间轴 • 客户端行为简介 • 客户端行为的事件和动作 • 用行为制作弹出式菜单 • 层简介 • 动感层的制作 • 时间轴简介 • 用行为、层和时间轴制作浮动广告

客户端行为简介 　　使用客户端行为，可能使网页具有一些动感效果，这些动感效果是在客户端实现的。插入客户端行为，实际上是自动给网页添加一些JavaScript代码，这些代码能实现动感网页的效果。　　客户端行为由两部分组成事件和动作。

层简介 　　层是用于精确定位的页面元素，可向层里插入文本、图像等其他页面元素，借助层可对加入的页面元素进行精确定位，还可做出重叠效果和运动效果。

时间轴简介 　　使用时间轴，可以更改层的位置、大小、可见性和层叠顺序。特别对于要在页加载后执行的其他操作，时间轴非常有用。比如，时间轴可以更改网页图像的源文件，使一段时间内有不同的图像出现在页面上。

框架　　框架结构是将两个或两个以上的网页页面组合起来，能用同一个窗口打开的网页结构。　　一个框架结构包括两部分的网页文件，一部分是框架设置文件，告诉浏览器有哪些内容文件，怎样排列；另一部分包括两个以上的内容网页文件，将在窗口中分框显示，每个页面作为总页面的一个框体。

上机任务 　　根据以上所学知识，用Dreamweaver完成示例企业网站的首页制作。　　包括网站设计、建立站点和相关的网页、使用文字、图像来充实网页内容、使用表格来美化网页布局、使用字幕和下拉菜单来增加网页的动感。

专业网页制作工具 Dreamweaver MX