Dreamweaver网页设计课程的核心知识点

1、Dreamweaver网页设计课程的核心知识点 在学习的过程中，请同学们重点关注以下知识点。一、建立站点 本地站点和远程站点的概念。 搭建站点的两种方法：使用向导来完成，利用高级设定来完成。 练习：按照下述要求建立站点 1新建本地根文件夹：在指定的文件夹中新建本地根文件夹并命名为root，在该文件夹中新建子文件夹，用于存放图片等文档。 2定义站点：u 设置“站点名称”：定义Dreamweaver站点，命名为“Myweb。u 设置本地根文件夹：本地根文件夹指定为root文件夹。u 设置首页：设置首页为index.htm。 二、有关HTML文件的基础知识（很重要） 1HTML：Hyper Text

2、 Markup Language超文本标记语言 2. 直接由浏览器解释执行，无须编译。 3语法结构：包括文档头部和文档主体。 下面是HTML代码的基本结构： 头部信息 文档主体，正文部分 4. 标签 1)用包围起来的代码2)包括单标签和双标签u 单标签 表示换行 表示插入一条水平线u 双标签 内容 例如：加粗文字3)标签的属性 属性之间没有顺序关系 属性值尽量用英文输入法下的全角引号包围。 SIZE：线的粗细 ALIGN：对齐方式 WIDTH：水平线的长度 4)重要的标签u 头部标签u 主体标签u 图片标签u 文字标签u 字体标签u 列表标签u 表格标签u 表单标签三、基本网页设计 1设置页面

3、属性 2设置文件头信息 3网页中的文字、文字设置 4网页中的图像、图像设置 5图文混排的网页 6网页链接的设计 1)相对路径与绝对路径 2)制作Email链接3)制作锚点链接 4)制作图像映射即热点 5)制作脚本链接 7多媒体网页的设计 1)在网页中插入Flash动画 2)在网页中插入Flash按钮与文字 3)在网页中插入Flash图片播放器 4)在网页中插入Applet 5)在网页中使用翻转图片 6)在网页中使用导航条 7)在网页中插入音频 8)插入与控制滚动文字9插入水平线8各种对象的属性面板 四、表格的使用 1“表格”对话框中1)表格宽度：单位有像素和百分比两种；按像素定义的表格大小是固

4、定，按百分比定义的表格，表格随浏览器的大小变化。 2)边框粗细：指表格边框的粗细；0为无边框，1为有边框。 3)单元格边距：表示单元格中的内容和单元格边框之间的距离。 2表格属性与单元格属性的设置 3了解表格中的HTML 在表格设计的HTML中的主要标签包括： 其中的内容屑于一个表格 其中的内容属于一行 其中的内容属于一列 4表格的设计与处理 5利用表格进行网页排版6.表格排序 五、表单的使用 1表单的基本概念 1)表单的作用：收集用户的信息。 2)表单的工作组成：分为前台和后台两个部分，后台往往需要一些编程语言辅助完成。 3)表单的工作过程：u 访问者在浏览有表单的网页时，可填写必须的信息，

5、然后单击“提交”按钮。u 这些信息通过Internet传送到服务器上。u 服务器上专门的程序对这些数据进行处理，如果有错误会返回u 错误信息，并要求纠正错误。u 当数据完整无误后，服务器反馈一个输人完成信息。 4)表单的组成：一个表单域和若干表单元素。 5)表单的提交方法：GET将浏览者提供的信息附加在URL地址的后面提交到服务器；POST表单信息将以文件的形式提交，安全系数高。 2插入各种表单对象 1)文本域 2)隐藏域3)按钮 4)单选按钮（组） 5)复选框 6)列表菜单 7)跳转菜单 8)文件域 9)图像域六、使用CSS样式表 1样式表基础 1)概念：简称CSS，是一系列格式规则，用于控

6、制网页内容的外观。 2)作用：控制传统的文本属性、特殊的html属性(对象位置、图片效果、鼠标指针等)。 3)特点：u 格式与结构分离；u 控制页面布局；u 减小网页的“体积”；u 同时更新网页。 4)类型：类样式，标签样式，高级样式。u 类样式：也称为自定义样式表，可以将样式属性设置为任何文本范围或文本块中，所有样式均以开头，出现“Class”属性，出现“”标签。u 标签样式：针对标签定义的样式，将对整个标签内的内容有效。u 高级样式：使用“ID”属性，常见的有4种： a：link设定正常状态下链接文字的样式。 a：active设定鼠标单击时链接文字的外观。 a：visited设定访问过的链

7、接文字的外观。 a：hover设定鼠标放置在链接文字之上时文字的外观。 5)语法规则： 由两个部分组成：选择器和声明，选择器就是样式的名称，包括自定义的类，HTML标签和CSS选择器样式。比如“.mycss”为自定义的类，“td”为标准HTML标签，而“a:link”则是CSS选择器样式；声明则是用于定义样式元素的。声明又分两部分：属性（如font-size）和值（如12px）。对于一个选择器而言，可以有多个声明。比如一个声明是表示颜色，一个声明是表示大小等。 2样式表的设置与使用 3链接和导入样式七、框架的使用 1框架的基本概念 1)作用：把浏览器窗口划分为若干个区域，每个区域可以分别显示不

8、同的网页。 2)组成： 框架集(Frameset)：也是一个网页文件，它将一个窗口通过行和列分割成多个框架，每个框架中要显示的就是不同的网页文件。 框架(Frame)：浏览器窗口中的一个区域，可以显示与浏览器窗口中的其余部分中所显示内容无关的网页文件。 3)保存方式： 保存框架集文件、多个框架文件。 2框架的创建与使用八、层的使用 1层的基本概念 1)层：CSS中的定位技术，在Dreamweaver中可对其进行可视化操作。层体现了网页技术从二维空间向三维空间的一种延伸。 2)层的特点：重叠、便于移动、可设为隐藏。 3)利用层与表格进行的排版： 不是所有的浏览器都支持层。利用层做对象的定位，然后

9、将层转化为表格。 2层与排版九、时间轴和行为的使用 1使用时间轴制作动画 制作动画需要将层和“时间轴”面板配合起来。利用时间轴，可以更改层的位置、大小、可见性和层叠顺序。 2使用行为制作动态网页 行为是指能够简单运用制作动态网页的JavaScript的功能，它提高了网站的可交互性。 1)行为的组成：由动作和事件组成。 例如，当鼠标指针指向一张图片，图片发生轮替，此时鼠标移动被称为事件，图片发生的变化称之为动作。一般的动作是由事件来激活动作。 2)动作：由预先写好的能够执行某种任务的JavaScript代码组成， 这些代码执行特定的任务，例如打开浏览器窗口、显示或隐藏层、播放声音或停止Shock

10、wave影片。 3)事件：与浏览器用户的操作相关，如鼠标的滚动等。onfocus 事件 发生在窗口得到焦点的时候。应用于：window 对象onload 事件 发生在文档全部下载完毕的时候。全部下载完毕意味着不但 HTML 文件，而且包含的图片，插件，控件，小程序等全部内容都下载完毕。本事件是window 的事件，但是在 HTML 中指定事件处理程序的时候，我们是把它写在标记中的。应用于：window 对象onmousedown 事件 发生在用户把鼠标放在对象上按下鼠标键的时候。参考 onmouseup 事件。应用于：Button 对象；Link 对象onmouseout 事件 发生在鼠标离开

11、对象的时候。参考 onmouseover 事件。应用于：Link 对象onmouseover 事件 发生在鼠标进入对象范围的时候。这个事件和 onmouseout 事件，再加上图片的预读，就可以做到当鼠标移到图像连接上，图像更改的效果了 应用于：Link 对象onmouseup 事件 发生在用户把鼠标放在对象上鼠标键被按下的情况下，放开鼠标键的时候。如果按下鼠标键的时候，鼠标并不在放开鼠标的对象上，则本事件不会发生。应用于：Button 对象；Link 对象。onDblClick 双击事件onclick 事件 发生在对象被单击的时候。单击是指鼠标停留在对象上，按下鼠标键，没有移动鼠标而放开鼠标键这一个完整的过程。一个普通按钮对象（Button）通常会有 onclick 事件处理程序，因为这种对象根本不能从用户那里得到任何信息，没有 onclick 事件处理程序就等于废柴。按钮上添加 onclick 事件处理程序，可以模拟“另一个提交按钮”，方法是：在事件处理程序中更改表单的 action, target, encoding, method 等一个或几个属性，然后调用表单的 submit() 方法。在 Link 对象的 onclick 事件处理程序中返回 false 值（ret