计算机网络原理电子教案

第8章Dreamweaver简介8.1Dreamweaver基础知识1、Dreamweaver启动和退出方法⑴“开始”—“程序”—“Macromedia”—“MacromediaDreamweaver”⑵双击桌面上的快捷图标。

2、窗口布局DreamweaverMX2004提供了将全部元素置于一个窗口中的集成工作区。首次启动Dreamweaver时，会出现一个工作区设置对话框可以从中选择一种工作区布局。如果不熟悉编写代码，选择“设计者”。如果以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如下图：计算机网络原理》电子教案共22页，您现在浏览的是第1页!⑴“插入”栏：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段HTML代码，允许在插入它时设置不同的属性。⑵“文档”窗口显示当前创建和编辑的文档。⑶“属性检查器”：用于查看和更改所选对象或文本的各种属性。计算机网络原理》电子教案共22页，您现在浏览的是第2页!⑷“面板组”：是分组在某个标题下面的相关面板的集合。若要展开一个面板组，单击组名称左侧的展开箭头；若要取消停靠一个面板，拖动该组标题条左边缘的手柄。⑸“文件”面板：可以管理文件和文件夹，“文件”面板还可以访问本地磁盘上的全部文件，类似于Windows资源管理器。3、菜单⑴“文件”菜单：包含“新建”、“打开”、“保存”、“保存全部”，查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。⑵“编辑”菜单：包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。⑶“查看”菜单：可以看到文档的各种视图，并且可以显示和隐藏不同类型的页面元素和DW工具及工具栏。⑷“插入”菜单：提供“插入”栏的替代项，用于将对象插入文档。⑸“修改”菜单：可以更改选定页面元素或项的属性。使用此菜单，可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。计算机网络原理》电子教案共22页，您现在浏览的是第3页!⑴显示代码视图：仅在“文档”窗口中显示“代码”视图。⑵显示代码视图和设计视图：在“文档”窗口的一部分中显示“代码”视图，另一部分显示“设计”视图。⑶显示设计视图：仅在“文档”窗口中显示“设计”视图。⑷标题：允许为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。⑸没有浏览器/检查错误：可以检查跨浏览器兼容性。⑹文件管理：显示“文件管理”弹出菜单。⑺在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。⑻刷新设计视图：在“代码”视图中进行更改后刷新文档的“设计”视图。⑼视图选项：允许为“代码”视图和“设计”视图设置选项。文档工具栏中包含如下按钮计算机网络原理》电子教案共22页，您现在浏览的是第4页!计算机网络原理》电子教案共22页，您现在浏览的是第5页!计算机网络原理》电子教案共22页，您现在浏览的是第6页!8.2.2创建页面1、页面创建在DreamweaverMX2004起始页创建新页，或者可以选择“文件”>“新建”，弹出对话框：从各种预先设计的页面布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。DreamweaverMX2004即展开工作区界面2、页面制作⑴【插入标题文字】

进入页面编辑设计视图状态。光标位置就是插入点的位置。启动中文输入法输入“我的主页”四个字，并设置其大小。⑵【设置文字的格式】选中文字，在属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。⑶【设置文字的颜色】选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。

⑷【设置网页的标题和背景颜色】

点击“修改”菜单选“页面属性”。系统弹出页面属性对话框在标题输入框填入标题“我的主页”设置背景颜色：网页背景可以是图片，也可以是颜色。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击【确定】按钮。

计算机网络原理》电子教案共22页，您现在浏览的是第7页!计算机网络原理》电子教案共22页，您现在浏览的是第8页!计算机网络原理》电子教案共22页，您现在浏览的是第9页!计算机网络原理》电子教案共22页，您现在浏览的是第10页!计算机网络原理》电子教案共22页，您现在浏览的是第11页!计算机网络原理》电子教案共22页，您现在浏览的是第12页!4、常用工具栏⑴“插入”：“插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。⑵“常用”：可以创建和插入最常用的对象，例如图像和表格。⑶“布局”：可以插入表格、div标签、层和框架。⑷“表单”：包含用于创建表单和插入表单元素的按钮。⑸“文本”：插入各种文本格式设置标签和列表格式设置标签。⑹“HTML”：插入用于水平线、头内容、表格、框架和脚本的HTML标签。⑺“脚本”：仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，可以将这些对象插入“代码”视图中。⑻“应用程序”：可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。⑼“媒体”：可以插入Flash元素。⑽“收藏”：可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。5、文档工具栏

计算机网络原理》电子教案共22页，您现在浏览的是第13页!6、状态栏状态栏提供正在创建的文档有关的其它信息。8.2建立站点8.2.1建立站点启动DreamweaverMX2004，选择“站点”—“新建站点”出现“未定义站点1的站点定义”对话框。在对话框中，然后在“您打算为站点起什么名字？”文本框中输入站点名称（如zhiyexyuan）。单击“下一步”，出现“zhiyexyuan站点定义为”对话框，询问是否要使用服务器技术。选择“否”选项，指示目前该站点是一个静态站点，没有动态页。选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。在站点开发过程中有多种处理文件的方式，初学网页制作的同学可选择此选项。

单击该文本框旁边的文件夹图标。随即会出现“选择站点的本地根文件夹”对话框。

单击“下一步”，出现向导的下一个界面，询问如何连接到远程服务器。从弹出式菜单中选择“无”。可以稍后设置有关远程站点的信息。单击“下一步”，该向导的下一个屏幕将出现，其中显示设置概要。单击“完成”完成设置。随即出现“管理站点”对话框，显示新站点。单击“完成”关闭“管理站点”对话框。计算机网络原理》电子教案共22页，您现在浏览的是第14页!计算机网络原理》电子教案共22页，您现在浏览的是第15页!下一页计算机网络原理》电子教案共22页，您现在浏览的是第16页!⑸【插入图像】选择以下任意一种方法：①使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：②使用插入栏（如下图）：单击插入栏对象按钮>选按钮，弹出“选择图像源文件”对话框，其余操作同上。③使用面板组“资源”面板（如下图）：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。【输入欢迎文字】

在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您……”然后，利用属性面板对文字进行设置。保存页面。【预览网页】在页面编辑器中按F12预览网页效果。网站中的页，也就是首页，我们通常在存盘时取名为index.htm。计算机网络原理》电子教案共22页，您现在浏览的是第17页!计算机网络原理》电子教案共22页，您现在浏览的是第18页!8.2.3超级链接1、页面之间的超级连接⑴在网页中选中要做超级链接的文字或者图片。

⑵在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。⑶按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。2、【邮件地址的超级连接】通过实际操作打开“电子邮件”对话框。3、【制作图片上的超级链接】

⑴首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。⑵属性面板改换为热点面板如图：链接输入框：填入相应的链接。替代框：填入你的提示文字说明。目标框：不作选择则默认在新浏览器窗口打开。⑶保存页面，按F12预览，用鼠标在设置的热区检验效果。计算机网络原理》电子教案共22页，您现在浏览的是第19页!计算机网络原理》电子教案共22页，您现在浏览的是第20页!计算机网络原理》电子教案共22页，您现在浏览的是第21页!3、【制作图片上