第4章网页编辑软件介绍课件

封面封面电子教案1学习目标学习目标l l熟熟悉悉DreamweaverMX的的界界面面环环境境l l掌握文件的存取和编辑方法掌握文件的存取和编辑方法l l了解帮助信息的使用了解帮助信息的使用l l了解参数的设置了解参数的设置2本章内容本章内容 第1节 常用网页编辑软件介绍 第2节 Dreamweaver MX软件介绍第3节 Dreamweaver MX的使用基础 小 结3HTML标标记记语语言言：依依据据特特定定的的标标记记来来规规定定在在浏浏览览器器中中输输出出信信息息的的格格式式，其其编编写写简简单单，通通俗俗易易懂懂，但但是是需需要要花花大量的时间去编写代码。大量的时间去编写代码。FrontPage2000FrontPage2000：集集成成代代码码格格式式，体体现现了了视视窗窗的的优优点点，可以使用菜单来操作，增加了网页特效的制作方法。可以使用菜单来操作，增加了网页特效的制作方法。东东方方网网页页王王：提提供供了了模模板板，制制作作网网页页容容易易，但但是是修修改改起起来比较麻烦。来比较麻烦。DreamweaverDreamweaver系列软件：系列软件：则结合了它们的优点，解决则结合了它们的优点，解决了许多网页编辑软件的缺陷。包含代码视图设计界面、了许多网页编辑软件的缺陷。包含代码视图设计界面、提供了许多模板、操作比较方便的面板管理工具、提供了许多模板、操作比较方便的面板管理工具、“所所见即所得见即所得”的设计方法。的设计方法。第1节常用网页编辑软件介绍 4第2节 Dreamweaver MX软件介绍 4.2.1 Dreamweaver MX概述 4.2.2 Dreamweaver MX的界面 54.2.1Dreamweaver MX MX概述概述一、一、DreamweaverDreamweaver MX MX安装的系统要求安装的系统要求 Intel Pentium II Intel Pentium II 以上处理器。以上处理器。Windows 98/ME/XP/2000Windows 98/ME/XP/2000，Windows NTWindows NT（安装安装 SP5SP5或更高版本）。或更高版本）。Microsoft Internet Explorer 4.0 Microsoft Internet Explorer 4.0 以上版本的浏览器。以上版本的浏览器。128MB128MB以上内存。以上内存。275 MB275 MB以上的可用硬盘空间。以上的可用硬盘空间。分辨率为分辨率为 800 x600 800 x600 像素的像素的 256 256 色显示器或者更高的分辨率。色显示器或者更高的分辨率。CD-ROM/DVDCD-ROM/DVD驱动器。驱动器。Microsoft IIS4.0Microsoft IIS4.0以上或以上或Microsoft PWSMicrosoft PWS（Windows98Windows98）。第2节 Dreamweaver MX软件介绍6二、二、DreamweaverMX的新增功能的新增功能（1）代代码码提提示示：在代码视图编辑器中，系统会自动显示出适当的属性、方法、函数或者CSS样式。（2）面面板板管管理理：通过对可折叠、可停靠面板的使用，用户可以更方便的编辑和开发Web页面的应用程序。（3）新新的的工工作作区区布布局局：包括多文档用户界面的工作环境和方便管理的面板。（4）表表的的编编辑辑功功能能：为表的设计生成了更完美的代码，提供了更多的属性以确保表格的布局合理、简单、多样化。（5）创建弹出菜单：创建弹出菜单：可以创建层叠JScript弹出式菜单。（6）强强大大的的数数据据库库功功能能：可以通过代码视图或设计视图进行程序设计，能快速实现对数据库访问的Web应用程序。（7）技术先进技术先进第2节 Dreamweaver MX软件介绍7三、三、DreamweaverMX的安装的安装 第2节 Dreamweaver MX软件介绍第一步：第一步：打开打开CD-ROM之后，浏览文件。之后，浏览文件。第二步：第二步：查找安装文件查找安装文件Setup.exe，并运行。并运行。第三步：第三步：根据提示向导就可以完成安装。根据提示向导就可以完成安装。8四、四、DreamweaverMX的启动的启动 第2节 Dreamweaver MX软件介绍查找查找“Dreamweaver.exe”可执行文件并运行可执行文件并运行利用利用“开始开始”菜菜单单9五、五、DreamweaverMX的的关闭关闭 第2节 Dreamweaver MX软件介绍使用窗口标题栏右上角的使用窗口标题栏右上角的关闭按钮关闭按钮；使用标题栏左上角的使用标题栏左上角的控制菜单盒控制菜单盒下面下面的的“关闭关闭”命令；命令；右键单击右键单击任务栏任务栏中的程序窗口，在弹中的程序窗口，在弹出的快捷菜单中选择出的快捷菜单中选择“关闭关闭”命令；命令；使用组合键使用组合键Alt+F4Alt+F4。104.2.2Dreamweaver MX MX的的界面界面第2节 Dreamweaver MX软件介绍11第2节 Dreamweaver MX软件介绍一、一、菜单菜单 二、二、插入工具条和对应项目插入工具条和对应项目 12第2节 Dreamweaver MX软件介绍文本工具条项目文本工具条项目 表单工具条项目表单工具条项目 13视图选择及其他工具视图选择及其他工具 第2节 Dreamweaver MX软件介绍14属性面板窗口属性面板窗口 第2节 Dreamweaver MX软件介绍15第3节 Dreamweaver MX的使用基础 4.3.1 文件的存取 4.3.2 文档的编辑 4.3.3 使用网格和标尺 4.3.4 文档视图的选择 4.3.5 在浏览器中预览网页 4.3.6 历史面板的使用 4.3.7 参数设置 4.3.8 帮助信息的使用 164.3.1文件的存取文件的存取第3节 Dreamweaver MX的使用基础一、一、新建文档新建文档 文件文件新建新建174.3.1文件的存取文件的存取第3节 Dreamweaver MX的使用基础二、二、保存文档保存文档 文件文件保存保存Ctrl+S Ctrl+S 文件文件另保存另保存184.3.1文件的存取文件的存取第3节 Dreamweaver MX的使用基础三、三、打开文档打开文档 文件文件打开打开194.3.2文档的编辑文档的编辑第3节 Dreamweaver MX的使用基础一、一、文本的选择文本的选择（1 1）使用鼠标使用鼠标按按下下鼠鼠标标左左键键并并从从某某一一个个适适当当的的位位置置起起，拖拖动动鼠鼠标标可可以以选选择择一一段段连连续续的的文文本本，或或者者在在适适当当的的位位置置双双击击鼠鼠标标左左键键可可以以选选择择一一小小部部分分文文本本，另另外外在在某某个个段段落落的的任任意意位位置置连连续续三三击击鼠鼠标标左左键键可可以以选选中中本本段段落。落。（2 2）键盘键盘利用键盘上的利用键盘上的Shift键和光标键键和光标键的组合键同样也能实现选择文的组合键同样也能实现选择文本的功能，如：首先定位光标到合适的位置，按下本的功能，如：首先定位光标到合适的位置，按下ShiftShift键的同时键的同时按向下的光标键，则可以快速选择一行、一段。按向下的光标键，则可以快速选择一行、一段。204.3.2文档的编辑文档的编辑第3节 Dreamweaver MX的使用基础二、二、文本的编辑文本的编辑在在对对文文本本编编辑辑之之前，必须先选定文本。前，必须先选定文本。21二、二、文本的编辑（续）文本的编辑（续）第3节 Dreamweaver MX的使用基础224.3.2文档的编辑文档的编辑第3节 Dreamweaver MX的使用基础三、三、页面的编辑页面的编辑修改修改页面属性页面属性Ctrl+J右键右键页面属性页面属性234.3.2文档的编辑文档的编辑第3节 Dreamweaver MX的使用基础四、设置文档的标题四、设置文档的标题使用视图选择工具使用视图选择工具标记标记和和利用利用“页面属性页面属性”对话框对话框244.3.3使用网格和标尺使用网格和标尺第3节 Dreamweaver MX的使用基础一、一、网格网格查看查看网格网格显示网格显示网格查看查看网格网格靠齐到网格靠齐到网格查看查看网格网格网格设置网格设置254.3.3使用网格和标尺使用网格和标尺第3节 Dreamweaver MX的使用基础二、二、标尺标尺查看查看标尺标尺显示显示 查看查看标尺标尺重设原点重设原点 264.3.4文档视图的选择文档视图的选择第3节 Dreamweaver MX的使用基础一、一、代码视图代码视图274.3.4文档视图的选择文档视图的选择第3节 Dreamweaver MX的使用基础二、二、设计视图设计视图284.3.4文档视图的选择文档视图的选择第3节 Dreamweaver MX的使用基础三、代码三、代码/设计视图设计视图294.3.5在浏览器中预览网页在浏览器中预览网页 第3节 Dreamweaver MX的使用基础文件文件在浏览器中预览在浏览器中预览iexplore在浏览器中预览在浏览器中预览/调试调试预览在预览在iexplore快捷键快捷键F1230编辑参数选择文件在浏览器中预览编辑浏览器列表“参数选择”对话框 314.3.6历史面板的使用历史面板的使用 第3节 Dreamweaver MX的使用基础324.3.7参数设置参数设置 第3节 Dreamweaver MX的使用基础一、设置默认文档类型一、设置默认文档类型 1）选择“编辑编辑参数选择参数选择”命令。2）打开“参数选择”对话框，选择“分分类类”项项目目中中的的“新新建建文文档档”。3）在默认文档类型右边的下拉列表选项中，选择ASP.JavaScriptASP.JavaScript作为默认的文档类型，默认文件的扩展名将htmhtm更换为aspasp。4）单击“确定确定”按钮。334.3.7参数设置参数设置 第3节 Dreamweaver MX的使用基础二、设置字体参数二、设置字体参数 344.3.7参数设置参数设置 第3节 Dreamweaver MX的使用基础三、布局视图参数三、布局视图参数 354.3.8帮助信息的使用帮助信息的使用 第3节 Dreamweaver MX的使用基础36小 结本章主要是对网页编辑软件Dreamweaver MX的介绍，内容包括Dreamweaver MX的基基本本知知识识和基基本本操操作作方方法法。基本知识部分介绍了安装Dreamweaver MX的系系统统要要求求，新新增增功功能能，安安装装步步骤骤，Dreamweaver MX的界界面面组组成成（包括菜单、插入工具条、视图选择按钮和设计区域以及属性面板等）。对Dreamweaver MX的基本操作中，介绍了如何新建、保存、打新建、保存、打开开文档，如何编辑编辑Dreamweaver MX的文档，包括对文本的选择和编辑，页面的编辑，使用网格和标尺，设置文档的标题文本信息，如何选择视图和在浏览器中预览页面，以及历史面板和帮助的使用等。对本章介绍的这些操作，熟悉Dreamweaver MX的界面组成，了解帮助信息的使用方法，掌握对文档的编辑和存取方法。37