网页设计与制作_dreamweaverppt课件

1、网页设计与制作,1 网站建设的一般步骤 2 网站规划和设计 3 网站制作Dreamweaver,章节内容,什么是网页,WWW服务是通过网页形式的链接向用户提供信息。网页又通过超链接连接到其他资源。网页中包含文本、图像、声音和视频等多种形式的资源，因此也叫超媒体。用户可以通过浏览器把信息显示出来。 所以，网页是通过许多规则把超媒体组织在一起的超文本文件，浏览器按照网页中的规则解释出来，然后把各种超文本元素显示在页面上。HTML语言是其中一种规则集。,什么是HTML,超文本标记语言（Hyper Text Markup Language，HTML）是一种程序语言，它定义了一系列规则告诉浏览器如何显示

2、HTML的元素。含有HTML元素集合的文件，也就是网页。 创建HTML网页是一件很容易的事。把HTML标签写在 HTML网页结构：一般是以标签开始，以结束。之间是网页头部，用来描述网页的相关内容，如网页标题、网页语言和网页内容简述等。,认识Dreamweaver,Dreamweaver是Adobe公司开发的一款可视化网页设计和网站管理软件。 可视化编辑功能可以快速制作出精彩的网页，而不需要编写任何代码。 能与其他图形编辑软件紧密结合，协同处理编辑图片，使用起来非常方便。 还支持代码编辑环境，如颜色代码、自动补全和代码折叠等，更方便地进行代码编写，支持最新的CSS可视化布局。,启动 Dreamw

3、ear,a)启动界面有四个功能： 1 打开最近的项目 2.新建 3.主要功能 4.快速入门 b)勾起“不再显示”，下次打开，就不再显示启动界 面了。 (如 果 要 显 示 ， 在“编辑”首选项里将“显示欢迎画面 ”打勾),Dreamweaver界面,一 创建 网 页 的 基 本 对 象,1. 创建页面,在Dreamweaver CS3中创建页面同其他应用程序一样简单，并且还提供了更多更方便的方式。主要有两种方式： 一种是在菜单命令中创建， 另一种是在Dreamweaver开启时出现在应用程序中的对话框中创建，其实两种方式都是一样的，第二种方式在开启应用程序时更快捷。,一 创建 网 页 的 基

4、本 对 象,新创建的文档有多种类型，包含空白内容文档、空白模板文档和基于范例文档。在创建时根据需要进行选择。创建空白内容文档的具体步骤如下：,【新建文档】对话框,1. 创建页面,一 创建 网 页 的 基 本 对 象,2保存页面 编辑好的网页需要保存，我们可以执 行“文件保存 ” ,或者按下Ctrl + S 组合键 , 打 开“另存为” 对话框,在保存的时候选择保存的位置 也可以直接在文档工具上方选中需要保存的网页文档，然后单击鼠标右键，在弹出的快捷键菜单 中选择“保存 ” 在Dreamweaver中保存网页文档时，文件的名称最好使用英文和数字，而不要使用中文。 如果是主页，文件名称一般为ind

5、ex.html,一 创建 网 页 的 基 本 对 象,3.打开和关闭页面 如果要打开电脑中存有的网页文件 则执行“文件-打开”命令，在弹出的对话框中选择需要打开的文件。 标准工具栏上的图标，也可以打开页面。 如果要关闭网页 单击文档窗口右上方的关闭网页按钮。 或者在文档工具条上选择你要关闭网的页，或者执行“文件关闭”。,一 创建 网 页 的 基 本 对 象,4 HTML编辑语言 标记：在HTML中用于描述功能的符号。必须用括起来。 单标记：只需单独使用就能完整地表达意思的标记。如（强制换行） 双标记：由“始标记”和“尾标记”两部分构成，必须成对使用。如,一 创建 网 页 的 基 本 对 象,4

6、 HTML编辑语言 标记属性 在单标记和双标记中可以包含的一些属性 语法： 如：具体文字 说明：各属性之间无先后次序，属性也可以省略。如省略，则取默认值。 注释语句 可以放在任何地方，不会在浏览器中显示出来 目的是方便设计人员的阅读和理解,一 创建 网 页 的 基 本 对 象,4 HTML编辑语言 HTML基本结构,HTML文件开始 文件头开始 文件头 文件头结束 文件体开始 文件体 文件体结束 HTML文件结束,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 头部内容不会显示在网页的主体里面，但对于网页来说，有着至关重要的影响。 网页中加载的顺序是从头部开始的。例如，网页的

7、标题是浏览者得到的第一条信息，浏览者可以根据标题来判断是否继续查看该网页。 网页中的脚本一般都放在之间，以便在网页主体中使用脚本时已经加载完成，否则脚本运行会出错。 文件头部一般包含标题标签、标签、内联样式表及预定义脚本等,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 查看头部 虽然头部的内容不会显示在网页主体内，但是Dreamweaver CS3依然提供了编辑工具，下面是查看头部内容的具体步骤：,【文件头】窗口 【属性】面板,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 网页标题 网页标题显示在浏览器的标题栏上。当浏览者打开网页时，从网页中得到的第一条

8、信息便是网页标题。 网页标题可以简明地概括网页的内容，点明网页的主题。从而浏览者可以决定是否往下浏览。 网页标题也是搜索引擎robots搜索时的主要依据。 在大量的网络信息中，浏览者如果想搜索到自己的网页，最好的办法是定义一个合适的标题。,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 网页标题设置 新建基本页，网页默认的标题为“无标题文档”。单击【文件】|【保存】命令，保存网页，按F12键进行预览，效果如图 。,新建页 设置标题,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 网页标题设置 单击【页面属性】按钮，弹出【页面属性】对话框，如图所示,【页面属性

9、】对话框,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 标签 标签在网页内容中不显示，但其作用不容忽视。 标签主要用于为搜索引擎robots定义页面主题信息，它还可以用于定义用户浏览器上的cookie、鉴别作者、设定页面格式、标注内容提要和关键字； 还可以设置页面，使其根据定义的时间间隔刷新自己，以及设置RASC内容等级等。,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 标签 标签的功能强大，但不是可见元素，所以不能用设置可见元素的方法进行设置。 下面讲解如何在Dreamweaver CS3中插入标签，并对其进行设置。在新建的网页中已经包含了一个标签，源

10、码如下： ,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 标签 上面源码是设置文档类型和网页字符集。如果需要添加其他功能，需要插入标签的其他属性。例如添加网页描述，具体步骤如下：,【标签选择器】对话框 【标签编辑器-meta】对话框,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 标签 以上是通过插入标签的方法，Dreamweaver CS3还提供了更方便的方法，具体步骤如下：,【常用】选项卡 【文件头】下拉菜单,【说明】对话框,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 样式表与脚本 网页内联定义的样式表通常放在网页头部。 可以在网

11、页内容加载之前先定义内容中需要的样式，从而防止样式的不完全载入，以及破坏网页的结构和外观等现象。 当网页中的元素需要修改样式时，方便进行查找和修改，从而使页面的结构清晰明了。,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 样式表与脚本：设置链接文件属性link 标签用于设置链接到的文件，从而引入外部文档。使用格式如下： 其中href设置链接文件的路径，rel设置与链接文件的关系，type是链接文件的类型，这些是常用的设置方式。,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 基链接属性base 标签设置网页的基链接。使用格式如下： href属性值是基链接的

12、位置。当设置好基链接后，自动在网页中的相对路径前加上。,一 创建 网 页 的 基 本 对 象,5 HTML头部：HEAD 样式表与脚本：设置链接文件属性link 标签用于设置链接到的文件，从而引入外部文档。使用格式如下： 其中href设置链接文件的路径，rel设置与链接文件的关系，type是链接文件的类型，这些是常用的设置方式。,一 创建 网 页 的 基 本 对 象,6. 文本操作,文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。 1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是

13、Shift+Enter。,一 创建 网 页 的 基 本 对 象,6. 文本操作,1插入文本 b)粘贴其他编辑器中生成的文本，首先要将光标插入文本的位置，然后执行“编辑-粘贴”，就能完成文本的插入。也可以直接使用标准工具栏上的“粘贴”按钮。,一 创建 网 页 的 基 本 对 象,6. 文本操作,文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。 1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter。,一 创建 网 页 的 基 本 对 象,6. 文本操作,文本操作包括

14、文本的插入、特殊符号的插入、日期以及文本列表的插入等。 1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter。,一 创建 网 页 的 基 本 对 象,6. 文本操作,文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。 1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter。,一 创建 网 页 的 基 本 对 象,6. 文本操作,文本操作包括文本的插入、

15、特殊符号的插入、日期以及文本列表的插入等。 1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter。,一 创建 网 页 的 基 本 对 象,6. 文本操作,文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。 1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter。,一 创建 网 页 的 基 本 对 象,6. 文本操作,文本操作包括文本的插入、特殊符号的插

16、入、日期以及文本列表的插入等。 1插入文本 a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter。 注意：前者是实现重新开启另外一段；后则才是换行,一 创建 网 页 的 基 本 对 象,6. 文本操作,2 调整文本 a)如果要调整文本大小，则选定文本，在属性面板的“大小”下拉列表框中选择合适的大小。 b)如果需要改变文本字体，则先选定文本，在属性面板上“字体”下拉列表中选择字体样式。 c)如果“字体”下拉列表中没有需要的字体，则执行“文本-字体-编辑字体列表”进行操作。 d)可以将字体设置为

17、标题字体，格式：段落，Hx。 注意：网页普通字体一般用“宋体”，最好不要改成其他字体，如果要用其他字体，就制作成图片,一 创建 网 页 的 基 本 对 象,6. 文本操作,3 插入特殊字符 a)在文档窗口中，将光标定位在需要插入特殊字符的位置。 b)执行“插入-HTML-特殊字符”，在子菜单选择合适的字符命令。或者在快捷栏中选择文本，特殊字符。 c)如果在下拉菜单中没有找到需要的字符，那么可以选择“其他字符”。,一 创建 网 页 的 基 本 对 象,6. 文本操作,4.插入日期 a)将光标放置到要插入日期的位置。 b)执行“插入日期”，或者在插入面板上点日期按钮，便可以。 5插入文本列表 a)

18、用鼠标选定要插入的项目的文本内容 b)切换成文本面板，然后单击项目列表ul/ol,一 创建 网 页 的 基 本 对 象,7. 插入滚动字幕,1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。 2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码窗口中光标的位置。 3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择器对话框。 4）在标签选择器对话框左边窗口逐级选择“HTML标签” “页元素”“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭对话框。 （5）在代码中出现，在中间的两

19、个尖括号“”之间输入要滚动的文字，如“欢迎访问金陵学院的主页！” 。,一 创建 网 页 的 基 本 对 象,7. 插入滚动字幕：设置相关属性, direction为滚动的目标方向，可选right、left、up、down。 scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度和间隔时间。 loop设置循环次数，小于1为连续循环。 Bgcolor设置滚动区域的背景颜色。 width 和height设置滚动区域的大小，沿垂直方向（up或down）滚动时，必须设置一定的高度值，否则看不到滚动的文字。,二 规划与创建网站,网页是网站的组成部分，很少会单独存在，几乎所有的网

20、页设计都是在网站的范围内进行的 Dreamweaver CS3拥有优秀的站点管理功能。此功能使网页设计工作更轻松合理。用户可以更合理地规划网页设计素材，并把网站的各个网页有条理地组织起来，融合成一个整体。,二 规划与创建网站,1. 站点规划的规则,一般来说，在规划站点结构时，应该遵循以下规则。 文档分类保存 如果一个复杂站点，它有很多文件，我们必须使用分类保存是它更清晰。 合理地命名文件名称 为了方便管理，文件夹和文件的名称最好要有具体的含义。 本地站点与远程站点结构统一 为了方便管理，在设置本地站点时，应该将本地站点与远程站点的结构设计保一持致。,二 规划与创建网站,1. 建立本地站点,单击

21、【站点】|【新建站点】命令，弹出【编辑文件】对话框 。单击【下一步】按钮，弹出【编辑文件，第2部分】 。,【编辑文件】对话框【编辑文件，第2部分】对话框,二 规划与创建网站,1. 建立本地站点,选择【否，我不想使用服务器技术】单选按钮，然后单击【下一步】按钮，弹出【编辑文件，第3部分】对话框。在【您如何连接到远程服务器】下拉列表框中，选择【无】选项，然后单击【下一步】按钮，弹出【总结】对话框，,【编辑文件，第3部分】对话 【总结】对话框,二 规划与创建网站,1. 建立本地站点,在建立站点之前，我们要知道所有的文件夹、资源和特定的文件都包含在站点中。 首先在硬盘上建立一个新文件夹作为本地根文件夹

22、，用来存放相关文档。如在F盘根目录下创建一个名为MyWeb的文件夹，在MyWeb文件夹里再创建一个名为images的文件夹，用来存放网站中甬道的图象文件,二 规划与创建网站,1. 建立本地站点,然后按照创建网站的向导逐步设置： (1).给站点起个名字，网址无所谓 (2).不适用任何服务器端技术 (3).选择本地的副本 (4).网络连接不需要 (5).完成站点定义 (6).定义默认图像文件夹(以后的图片均会自动存在这里) 也可以使用高级定义站点，更加的方便。,二 规划与创建网站,3. 导入和导出与复制删除站点,在【站点】|【管理站点】命令中实现： a)站点导入、导出 b)站点复制、删除 注意：不

23、要删除了站点源副本,三插入图片,插入图像的步骤如下 ： 把工具栏切换到“常用”状态，然后单击“图像：图象”按钮；或者菜单插入图象 选择要插入的图像文件，在文件列表中单击一个图象文件时，图象预览区会显示这个图象的缩略图。 单击确定按钮，如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出图像。,1. 插入图像,三插入图片,选中图像，点击属性设置图象属性 图文混排 垂直边距和水平边距 图像替代 图像边框 拖动改变大小 拖动图像下边、右边、右下角的三个控制点可快速改变图像大小。,2. 设置图象属性,三插入图片,当用户制作网页时，在页面某个位置需要插入一幅图片。但一时找不到自己喜欢合

24、的适图片，这就需要用到占位符功能。 图象占位符并不是在浏览器中显示的最终图象，它只是一种临时的、替补的图形。 用户不仅可以设置图象占位符的大小和颜色，还可以为图象占位符号提供文本标签。 插入图像占位符-找到替换的替换掉,3. 图像占位符,三插入图片,用于创建交互式图象的两幅图象大小必须相同。 否则交换的图象再显示时会进行压缩或展开以适应原有图象的大小，这样容易造成图象的失真。 在网页中使用交互式图象，是可网页更生动。 插入鼠标经过图像-选择原始图像和经过图像,4. 交互式图像,三插入图片,在Dreamweaver中，设置网页背景有两种方法：一种时设置背景颜色，另一种时设置背景图象。 修改-页面

25、属性（Ctrl+J）,5. 图像背景,四表格应用,在DreamweaverCS4中，创建一个表格可执行以下操作： 插入-表格；或常用里的表格图标 在弹出的表格对话框中设置表格的样式： 行数和列数文本框分别输入表格的行数和列数 表格宽度 边框粗细 单元格边距 单元格间距 页眉：无，左，顶部，两者 标题 对齐 摘要,1.创建表格,四表格应用,a)存放文本、图片等多媒体信息 b)布局,2.表格的应用,四表格应用,在对表格元素进行操作之前，必须先选定表格元素。 (1)选定整行 (2)选定整列 (3)选定整个表格 修改-表格-选择表格 在表格左上或右下角位置，点击选中 点击标签,3.选定表格、行、列、单

26、元格元素,四表格应用,设置表格属性 表格ID 行列： 宽高 填充 间距 对齐 边框 背景颜色 背景图象 边框颜色,4.设置表格、行列、单元格属性,四表格应用,在表格的操作过程中，可以很方便地添加和删除表格的行或列： 在表格添加一行光标放在单元格内修改-表格-插入行；在表格中添加一列 同上 提示：按下组合键能添加一行，按下能添加一列。 在表格添加多行或多列光标放在单元格内表格-插入行列 删除行或列,5.添加和删除行或列,四表格应用,在制作网页的过程中，有时需要合并或拆分单元格。 单元格的合并表格-合并单元格 拖动选中要合并的单元格，单击属性面板上的合并单元格按钮 单元格的拆分表格-拆分单元格 在

27、要拆分的单元格中单击，在单击属性面板上的拆分单元格按钮,6.单元格的合并及拆分,五超级链接,URL中文翻译为统一资源定位器。 URL是Internet上用来描述信息资源的字符串。 一个URL分为3个部分：协议代码，装由所需文件的计算机地址和主机资源的具体位置。 scheme:/host:post/path/filename scheme指的是http,ftp,file,mailto,news,gopher,telnet七种 host指的是IP地址或计算机名称 post指的是服务器端口 path指的是文件路径 filename指的是文件名 :80/index.php,1.什么是URL,五超级链接

28、,创建超级链接时必须了解链接与被链接的路径。在一个网站中，路径通常由3种表达方式：绝对路径，根目录相对路径，文档目录相对路径。 绝对路径: c:/windows/index.htm 根目录相对路径： /web/index.htm 文档目录相对路径： index.htm,2.路径,五超级链接,3.创建文本超链接,1）使用属性面板设置超级链接,2）使用工具按钮,a)插入超级链接：单击工具栏上的超级链接按钮,b）插入邮件链接 链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮,五超级链接,5.创建文本超链接,3)设置下载文件的超级链接 4)创建空链接：# 4)创建外部链接 Http:/ 5)链

29、接文字颜色的设置 通过页面属性来设置的。,五超级链接,设置锚记 使用锚记：#+锚记名称,4.使用锚记,五超级链接,4.图片超级链接和图像地图,1）图片超级链接,2）图像地图,如果想在一个图像的不同位置上点击，就跳转到相应的目标网页，就需要使用图象地图。,设置矩形热区 设置圆形热区 设置多边形热区,六插入媒体元素,动态元素是一种重要的网页元素。这里我们将学习在网页中插入动态元素，如Flash影片、Flash按钮、Flash文本等，此外还将学习其他一些动态元素的插入方法。,六插入媒体元素,RealVideo的.rm、.rmvb视频影像格式和.ra的音频格式 Microsoft Media tech

30、nology的.asf格式 QuickTim的.mov格式 Flash的.swf格式 Metastream 的.mts格式 Authorware的.aam多媒体教学课件格式,1.媒体文件的类型,六插入媒体元素,2.插入Flash,1）插入Flash动画,将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮,2）插入Flash按钮,将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash按钮”按钮,3）插入Flash文本,将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash文本”按钮,六插

31、入媒体元素,3.制作播电影、声音的页面,1）插入插件,（1）将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：插件”按钮,（2）选择一个要插入网页的电影格式的文件,（3）在编辑窗口中看到插入了一个灰色矩形插件标志，调整其大小可调整网页中的播放窗口的大小。,（4）单击属性面板上的“参数”按钮，可设置各种播放参数。,六插入媒体元素,3.制作播电影、声音的页面,2）插入背景声音,（1）将插入工具栏设置为“常规”，单击标签选择器按钮,（2）在标签选择器对话框左边窗口逐级选择“HTML标签” “页元素”“浏览器特定”，然后在右边窗口中单击“bgsound”，再

32、单击下面的“插入”按钮，打开“标签编辑器-bgsound”对话框。,（3）在“源”中指定背景音乐文件，可以是.wav、.mid或.mp3格式的音频文件。,六插入媒体元素,3.制作播电影、声音的页面,2）插入背景声音,（4）在“循环”栏指定网页调入时背景音乐的播放次数，选择“无限（-1）”循环播放。其他选项根据需要设置。,（5）单击“确定”，背景音乐就插入到网页中。关闭标签选择器对话框。,七插入表单,表单由两个重要组成部分组成：一时描述表单的HTML源代码；二时用于处理用户在表单中输入信息的服务器应用程序客户端脚本，如ASP，ASP.net等。 在网上浏览时常会遇到要求填写资料或提供信息的页面，如申请QQ号码时填写个人信息的页面，网上购物时填写的购物单等，这些页面即是表单页面。 表单通常由多个表单对象组成，如单选按钮、复选框、文本字段以及按钮等，网站管理员可以通过表单从浏览者处收集需要的信息，从而实现信息的传递。,七插入表单,表单支持客户端-服务器关系中的客户端。 当访问者在Web浏览器中显示的表单中输入信息，然后单击提交按钮时