第十三章用 Dreamweaver 制作网页型课件

第十三章用Dreamweaver制作网页型课件

本章知识点 1．HTML语言 2．Dreamweaver建立站点的方法 4．运用表格、层布局网页的方法 3．Dreamweaver制作网页时文字、超链接、行为、多媒体等的设置

第一节 Dreamweaver的基础知识 一、初识HTML （一）什么是HTML • HTML（Hypertext Marked Language），即超文本标记语言，是一种用来制作超文本文档的简单标记语言。 • 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。 • 使用HTML语言描述的文件，需要通过WWW浏览器浏览文档的内容。

一、初识HTML • 所谓超文本，就是加入图片、声音、动画、影视等内容的文本文档。因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

（二）HTML格式 • HTML标记符的特征是：<标记符>内容 </标记符>。 • 两个标记符分别代表了一段描述的开始和结束，一般是成对出现的，去掉任何一个标记符都会出现错误。

（二）HTML格式 下面来看一段简单的HTML语言： <html> <head> <title>这里是HTML页面的标题</title> </head> <body>这里是页面内容</body> </html>

（二）HTML格式 1．开始和结束标记 <html></html> 在它们中间，包含你的网页里的所有内容，可以是一段文字，也可以是一幅幅插图，也可以是美妙的音乐，……。 2．头部标记 <head></head> 头部里面一般包括注释、META和标题。

二、认识Dreamweaver Macromedia Dreamweaver MX 2004是Macromedia 最新开发的HTML编辑器，用于对Web站点、Web页和 Web应用程序进行设计、编码和开发。

二、认识Dreamweaver （一）Dreamweaver的工作区设置 • Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。 • 在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。用户可以选择面向设计人员的布局或面向手工编码人员需求的布局。 • 首次启动 Dreamweaver 时，会出现一个工作区设置对话框，

二、认识Dreamweaver 工作区设置对话框

二、认识Dreamweaver • 我们可以从中选择一种工作区布局。如果不熟悉编写代码，可以选择“设计者”。如果以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。 • 编辑菜单“首选参数”对话框如图所示。

二、认识Dreamweaver 首选参数对话框

二、认识Dreamweaver （二）Dreamweaver的工作界面 Dreamweaver MX 2004提供了一个将全部元素置于一个窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到了一个应用程序窗口中。

二、认识Dreamweaver 应用程序窗口

二、认识Dreamweaver 各栏目操作如下： 1．插入栏 • 包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滑动到按钮上时，会出现一个工具提示，其中含有该按钮的名称。

二、认识Dreamweaver 2．文档工具栏 • 显示当前创建和编辑的文档。文档工具栏中包含多个按钮。 • 这些按钮可以实现在文档的不同视图间快速切换，即在代码视图、设计视图和拆分视图之间切换；还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

二、认识Dreamweaver 文档工具栏

二、认识Dreamweaver 3．属性检查器 • 用于查看和更改所选对象或文本的各种属性。 4．面板组 • 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，单击组名称左侧的展开箭头；若要取消停靠一个面板组，拖动该组标题条左边缘的手柄即可。

二、认识Dreamweaver 5．文件面板 • 用于管理在Dreamweaver站点上或在远程服务器上的文件和文件夹。 • 文件面板还允许用户访问本地磁盘上的全部文件，类似于 Windows 资源管理器。 6．状态栏 • 状态栏提供与用户当前创建的文档有关的其它信息。

二、认识Dreamweaver 状态栏

三、设置站点 • Dreamweaver作为专业的网页制作工具，主要完成两大工作。一是制作网页，二是管理网站。 • 利用Dreamweaver的网页创建功能，可以向网页中添加各种内容，如文本、图像、表格、表单、多媒体等。

三、设置站点 • 把对象添加到网页中后，就能看见它在浏览器中的显示效果；利用网站管理功能使网页开发人员能够非常轻松的管理网站，并能保证在多人对网站进行维护时不会产生冲突， • 通过“登记/注销”系统可对站点内的文件的状态进行管理，避免了多人同时修改同一文件的可能性，保证了合作开发的安全、正常进行。

（一）什么是站点 • 网页又称作HTML文件，是由HTML语言编写出来的，是一种可以在WWW网上传输，并能被浏览器认识和翻译成具有可读性的页面并显示出来的文件。 • Web站点是一组具有相关主题、类似的设计、链接文档和资源。网页是网站的重要组成元件，也是提供信息的舞台。一个网站一般都会拥有很多网页，这些网页各司其职，从而构成整个网站。

（一）什么是站点 • Dreamweaver MX 2004 是一个站点创建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的Web站点。 • 网站建立的基本流程是：①确认网站目的；②资料收集和整理；③网站结构的规划；④网页内容的设计；⑤发送到Web服务器；⑥网站的更新与维护。

（二）如何建立本地站点 • 在使用Dreamweaver制作网页时，首先要定义一个本地站点。 • 定义本地站点就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。

（二）如何建立本地站点 • 在本地机器上创建并且做好本地网站后，在本地机上对网站进行测试完成后，再通过专用的软件把文件上传到网上的虚拟空间，即Internet服务器。 • 下面主要介绍本地站点的建立、站点文件命名。

（二）如何建立本地站点 1．新建站点 • 执行“站点/管理站点”命令，也可以使用快捷键F8打开站点面板来建立一个站点，然后单击“管理站点”按钮。执行命令后出现“管理站点”对话框，单击“新建”按钮，在弹出的菜单中选择“站点”。

（二）如何建立本地站点 管理站点对话框

（二）如何建立本地站点 2．设置站点名称 • 接着出现了一个建立站点的向导，设置好站点的名字后单击“下一步”按钮。（输入你想要的站点名称，这里输入home，其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！）

（二）如何建立本地站点 建立站点向导-1

（二）如何建立本地站点 3．选择使用服务器技术 • 接着询问是否使用服务器技术，根据实际需要作出选择，然后单击“下一步”按钮。

（二）如何建立本地站点 4．选择文件上传方式 • 接下来的对话框询问开发过程中如何处理计算机的文件，即开发过程是在本地编辑好后进行上传，还是利用FTP技术直接对服务器文件进行修改。要根据自己需求作出选择，然后单击“下一步”按钮。

（二）如何建立本地站点 建立站点向导-3

（二）如何建立本地站点 5．选择服务器连接方式 • 接下来询问服务器连接方式，目前最常用的是FTP。选择FTP ，这里要求输入FTP服务器的信息和登陆帐号及密码。

（二）如何建立本地站点 6．系统总结出所有选项 • 完成FTP设置后，还会询问是否允许多人同时编辑同一文件。设置好后，系统总结出所有选项复查。复查无误后站点建设完成。

第二节 Dreamweaver创建网页及使用技巧 • 本节主要介绍如何应用Dreamweaver MX 2004创建自己的网页的方法及常用的使用技巧。

一、创建页面 （一）新建页面 • 使用 Dreamweaver MX 2004创建新页之前，要先用站点管理器建立一个网站（根目录），为了制作方便，通常把要使用的图片收集到网站目录images文件夹内，其它的素材也要进行分类，存放到相应的文件夹中。

一、创建页面 • 然后用起始页创建新页，或者选择“文件”->“新建”，创建自己的页面，弹出如图所示对话框。新建的空白页面如图。 • 这样就可以向这个空白页添加表格和输入文本了。如果您要向页面添加图片或其它元素，应先保存这个空白页。

一、创建页面 新建页面对话框

一、创建页面 新建空白页面窗口

一、创建页面 • 选择“文件”->“另存为” ，在“另存为”对话框中，找到站点的本地根目录文件夹，给页面重新起一个名字，如“index.htm”，填入文件名，保存退出。 • .htm既是文件的后缀，也是这个网页文件的类型说明，表示这个网页文件是属于静态的HTML文件。网页的后缀必须为htm或html，否则上传到服务器之后，浏览器无法正常打开。

一、创建页面 • 通常网站首页名字是index.html或index.htm。 • 服务器默认搜索文件的顺序是：首先自动寻找 index.html文件，如果有就显示这个文件，如果没有，再寻找index.htm，再没有就很可能会显示错误信息了。并且绝大多数的服务器都是遵循这个原则，一般用户无权修改这种设定。 • 所以在制作网页时，最好将网站的首页命名为 index.html或index.htm。

二、设置页面属性 • 在正式开始制作网页前，需要对新建的页面进行一些必要的页面属性设置。双击打开新建的 index.htm，就自动转入编辑窗口。选择菜单“修改”->“页面属性”，将弹出页面属性设置窗口。

二、设置页面属性 设置页面属性

二、设置页面属性 1．标题 • 页面的标题会直接显示在浏览器的左上方，例如用浏览器打开www.sohu.com网站，可以在浏览器的左上角看到该页的标题“搜狐首页”。 • 标题不是网页必要的元素，但最好为每一页都设定一个标题，这既便于访问者的浏览，也有助于在网页编辑的过程中区分不同的页面。

二、设置页面属性 2．背景图像 • 在背景图像的文本输入栏，点击“浏览”按钮，可以为网页添加背景图像。 3．背景颜色 • 利用背景颜色可为背景添加颜色。默认为白色，点击颜色选择图标可以选择其他的颜色。后面“#FFFFFF”是以16进制形式显示的RGB色值。

二、设置页面属性 4．文字的颜色 • 假如不对背景及文字的颜色进行设置（此时RGB色值显示为空），那么浏览器在显示页面的时候，就会采用系统的默认设置。 • 但因为不同的系统的设置都可能会有所区别，这样就会导致页面的显示效果也是千差万别。因此，为了更好地让页面体现出你的设计思想，别忘记设定页面的背景颜色及文字颜色。

二、设置页面属性 5．左右边距和上下边距 • 设置左部及顶部的页边距，一般都设置为“0”以方便于网页的编辑。 6．链接 • 利用超链接的属性设置窗口，可以对超链接的属性进行，设置设定超级链接的颜色，若不进行设定则默认为蓝色。 • 设置好网页属性的其它选项，确保页面属性的设置正确后，点击“确定”结束。

二、设置页面属性 表格属性设置窗口

三、在网页中使用文本 • 打开一个网页文件，进入Dreamweaver页面编辑设计视图状态。我们可以像在其他的文字编辑程序中一样，直接输入文字。 • 在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。

第十三章用 Dreamweaver 制作网页型课件