Transcript Document
专业网页制作工具 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:[email protected], ⑤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完成示例企业网站的首 页制作。 包括网站设计、建立站点和相 关的网页、使用文字、图像来充实 网页内容、使用表格来美化网页布 局、使用字幕和下拉菜单来增加网 页的动感。