《计算机网络原理》电子教案.ppt

第8章Dreamweaver简介 8.1 Dreamweaver基础知识 1、Dreamweaver启动和退出方法“开始”“程序”“Macromedia”“Macromedia Dreamweaver”双击桌面上的快捷图标。2、窗口布局 Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。首次启动 Dreamweaver 时，会出现一个工作区设置对话框,可以从中选择一种工作区布局。如果不熟悉编写代码，选择“设计者”。如果以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如下图：,“插入”栏：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许在插入它时设置不同的属性。“文档”窗口 显示当前创建和编辑的文档。“属性检查器”：用于查看和更改所选对象或文本的各种属性。,“面板组”：是分组在某个标题下面的相关面板的集合。若要展开一个面板组，单击组名称左侧的展开箭头；若要取消停靠一个面板，拖动该组标题条左边缘的手柄。“文件”面板：可以管理文件和文件夹，“文件”面板还可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。3、菜单“文件”菜单：包含“新建”、“打开”、“保存”、“保存全部”，查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。“编辑”菜单：包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。“查看”菜单：可以看到文档的各种视图，并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。“插入”菜单：提供“插入”栏的替代项，用于将对象插入文档。“修改”菜单：可以更改选定页面元素或项的属性。使用此菜单，可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。,4、常用工具栏“插入”：“插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。“常用”：可以创建和插入最常用的对象，例如图像和表格。“布局”：可以插入表格、div 标签、层和框架。“表单”：包含用于创建表单和插入表单元素的按钮。“文本”：插入各种文本格式设置标签和列表格式设置标签。“HTML”：插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。“脚本”：仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，可以将这些对象插入“代码”视图中。“应用程序”：可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。“媒体”：可以插入 Flash 元素。“收藏”：可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。5、文档工具栏,显示代码视图：仅在“文档”窗口中显示“代码”视图。显示代码视图和设计视图：在“文档”窗口的一部分中显示“代码”视图，另一部分显示“设计”视图。显示设计视图：仅在“文档”窗口中显示“设计”视图。标题：允许为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。没有浏览器/检查错误：可以检查跨浏览器兼容性。文件管理：显示“文件管理”弹出菜单。在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。刷新设计视图：在“代码”视图中进行更改后刷新文档的“设计”视图。视图选项：允许为“代码”视图和“设计”视图设置选项。,文档工具栏中包含如下按钮,6、状态栏状态栏提供正在创建的文档有关的其它信息。8.2 建立站点 8.2.1 建立站点 启动 Dreamweaver MX 2004，选择“站点”“新建站点”出现“未定义站点1的站点定义”对话框。在对话框中，然后在“您打算为站点起什么名字？”文本框中输入站点名称（如zhiyexyuan）。单击“下一步”，出现“zhiyexyuan站点定义为”对话框，询问是否要使用服务器技术。选择“否”选项，指示目前该站点是一个静态站点，没有动态页。选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。在站点开发过程中有多种处理文件的方式，初学网页制作的同学可选择此选项。单击该文本框旁边的文件夹图标。随即会出现“选择站点的本地根文件夹”对话框。单击“下一步”，出现向导的下一个界面，询问如何连接到远程服务器。从弹出式菜单中选择“无”。可以稍后设置有关远程站点的信息。单击“下一步”，该向导的下一个屏幕将出现，其中显示设置概要。单击“完成”完成设置。随即出现“管理站点”对话框，显示新站点。单击“完成”关闭“管理站点”对话框。,下一页,8.2.2 创建页面 1、页面创建 在Dreamweaver MX 2004起始页创建新页，或者可以选择“文件”“新建”，弹出对话框：从各种预先设计的页面布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。Dreamweaver MX 2004即展开工作区界面 2、页面制作【插入标题文字】进入页面编辑设计视图状态。光标位置就是插入点的位置。启动中文输入法输入“我的主页”四个字，并设置其大小。【设置文字的格式】选中文字，在属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。【设置文字的颜色】选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。【设置网页的标题和背景颜色】点击“修改”菜单选“页面属性”。系统弹出页面属性对话框 在标题输入框填入标题“我的主页”设置背景颜色：网页背景可以是图片，也可以是颜色。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击【确定】按钮。,【插入图像】选择以下任意一种方法：使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：使用插入栏（如下图）：单击插入栏对象按钮选 按钮，弹出“选择图像源文件”对话框，其余操作同上。使用面板组“资源”面板（如下图）：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。【输入欢迎文字】在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您”然后，利用属性面板对文字进行设置。保存页面。【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。,8.2.3 超级链接 1、页面之间的超级连接 在网页中选中要做超级链接的文字或者图片。在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。2、【邮件地址的超级连接】通过实际操作打开“电子邮件”对话框。3、【制作图片上的超级链接】首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。属性面板改换为热点面板如图：链接输入框：填入相应的链接。替代框：填入你的提示文字说明。目标框：不作选择则默认在新浏览器窗口打开。保存页面，按F12预览，用鼠标在设置的热区检验效果。,3、【制作图片上的超级链接】图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。比如一张中国地图的图片，单击了不同的省跳转到不同的网页。可点的区域就是热区。为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。鼠标移动到省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。【制作方法】首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。,