网页制作工具.

网页制作工具Dreamweaver“所见即所得”网页编辑器:优点就是直观、使用方便、容易上手，但也存在难以精确达到与浏览器完全一致的显示效果的缺点“非所见即所得”网页编辑器（即源代码编辑器）:所有的HTML代码都是在用户的监控下产生的，但是，工作效率太低。网页制作工具Microsoft公司专门开发的网页制作专业工具。目前最高版本是FrontPage2003。网页编辑功能非常强大。强大的网页管理功能网页制作工具FrontPageDreamweaverMacromedia公司推出的主页编辑工具。所见即所得网页编辑器，支持最新的XHTML和CSS标准。最新版本是Dreamweaver8，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。借助Dreamweaver还可以使用服务器语言（例如ASP、ASP.NET、ColdFusion标记语言、JSP和PHP）生成支持动态数据库的Web应用程序。网页制作工具AdobePagemill适合初学者制作较为美观，但不是非常复杂的主页。网页制作工具HomeSite更适合进行比较复杂和精美页面的设计。如果用户希望能完全控制页面制作的进程，那么HomeSite是最佳选择。VisualStudio.Net支持相应程序的自动语法检查，还支持程序的调试与编译。内置有VB.Net、VC++.Net、C#等程序开发工具，集程序的调试、编译等功能于一身EditPlus目前非常流行的一款功能强大的文本编辑器，该软件功能强大、易于使用、兼容性强，支持几乎所有程序语言的代码色彩显示。它的缺点就是不支持程序的调试。8.1Dreamweaver简介8.2站点管理8.3制作第一个网页8.4超链接8.5使用图像8.6使用多媒体对象8.7使用表格第8章网页制作工具Dreamweaver88.1.1Dreamweaver8的启动和主工作区一系列初始化过程后，首先显示“工作区设置”对话框。接下来显示起始页对话框，可以选择“打开最近项目”、“创建新项目”或“从范例创建”。8.1Dreamweaver简介图8-1“工作区设置”对话框图8-2起始页2．Dreamweaver8的主工作区主工作区由插入工具栏、文档工具栏、文档窗口、属性面板等部分组成8.1Dreamweaver简介图8-3Dreamweaver8的主工作区（1）插入工具栏•默认显示的是“常用”类的主要功能按钮。•单击“常用”按钮会弹出一个下拉菜单，其中包含了插入工具栏中的其他功能菜单。•选择不同的分类，插入工具栏中包含的功能按钮也随之改变。8.1Dreamweaver简介图8-4插入工具栏及其功能分类菜单插入面板包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段HTML代码，允许插入时设置不同的属性。“常用“项面板、布局（标准视图、布局项视图）、“文本“、“表单“、“模板“、“字符“、“媒体“、“文件头“、“脚本“、“应用程序“项面板插入面板常用：创建和插入最常用的对象，如图像和表格；布局：插入表格、div标签、层和框架。可从表格视图（标准、扩展表格、布局）中选择。选择“布局”模式后，可使用布局工具：“绘制布局单元格”和“绘制布局表格”。表单：用于创建表单和插入表单元素文本：插入文本格式设置标签和列表格式设置标签HTML：插入用于水平线、头内容、表格、框架和脚本的HTML标签。服务器代码：适用于使用特定服务器语言（ASP、ASP.NET、JSP和PHP）等的页面。应用程序：插入动态元素，例如记录集、重复区域以及记录插入和更新表单。Flash元素：插入Flash元素。收藏：将“插入”栏中常用按钮分组和组织到常用位置。（2）文档工具栏使用户可以在文档的不同视图间快速切换：代码视图、设计视图、和拆分视图。还包含与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。8.1Dreamweaver简介图8-5文档工具栏的常用命令和选项选择“编辑”→“首选参数”命令,打开“首选参数”对话框。选择“分类”列表中的“常规”选项。通常设置的属性有文档选项和一些编辑选项。8.1.2Dreamweaver8的参数设置图8-12常规参数设置中更改工作区2．新建文档参数设置建立默认的新文档类型和首选参数。选择“分类”列表中的“新建文档”选项，对话框右侧显示出相关的属性。8.1Dreamweaver简介图8-13新建文档参数设置3．站点参数设置选择“分类”列表中的“站点”选项,用于为“文件”面板设置站点首选参数。8.1Dreamweaver简介图8-14站点参数设置站点:一系列文档的组合，这些文档之间通过各种链接关联起来，可能拥有相似的属性，也可能只是毫无意义的链接。8.2.1本地站点和远端站点站点也是一种文档的磁盘组织形式，它同样是由文档和文档所在的文件夹组成的。利用不同的文件夹，将不同的网页内容分门别类地保存，这是设计网站的必要前提。结构良好的网站，不仅便于管理，也便于更新。8.2站点管理8.2.2建立本地站点规划好站点结构后，先在Dreamweaver中定义站点，然后才能进行开发。8.2站点管理图8-15站点设置图8-16站点结构8.2.3管理本地站点1．编辑站点①在“文件”面板中的“站点名称”下拉列表中选择“管理站点”项，打开“管理站点”对话框。②在“管理站点”的对话框左侧列表中选择需要编辑的站点，然后单击右侧按钮，则可以进行相应的操作。8.2站点管理图8-20选择要编辑的站点8.2.3管理本地站点2．文件的基本操作使用“文件”菜单对单独的文件进行管理，例如，执行“新建”、“打开”、“保存”、“另存为”等命令。也可以在“文件”面板中，在文件或文件夹上单击鼠标右键，在弹出快捷菜单的“编辑”命令子菜单中，执行“新建”、“打开”、“删除”、“移动”、“复制”、“重命名”等命令。3．指定站点首页首页就是网站的门面，通常首页文件中总包含有若干指向其他主要网页的超链接，用户可以先为网站创建一个空白首页，然后进行编辑，并可以利用站点地图查看网站中超链接的情况。8.2站点管理8.3.1制作网页一般过程【例8-2】制作一个浅黄色背景的网页，在页面上添加文字和水平线，展示一个娱乐网页的宣传内容，并且在页面的右下方显示感谢信息和当前日期，效果如图8-22所示。8.3制作第一个网页图8-22实例效果【例8-2】8.3.2设置页面属性页面属性是指网页的一般属性信息，例如，网页标题、网页的背景颜色、背景图像、超链接颜色、跟踪图像等。1．设置网页标题网页标题是用来说明网页内容的文字，显示在浏览器窗口的标题栏中。通常，每个网页都应该有一个标题，而网页标题文字最好能够恰如其分地描述网页的内容。2．设置网页其他属性如果需要设置网页的其他属性，可以打开“页面属性”对话框进行设置。8.3制作第一个网页页面属性8.3.3网页基本元素在通常情况下，网页上一般都包含文本、日期、特殊符号及水平线等基本元素。1．文本和特殊符号文本的操作主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。2．日期Dreamweaver提供了一个方便的日期对象，该对象使用户可以用任何喜欢的格式插入当前日期，还可以选择在每次保存文件时自动更新该日期。3．水平线水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。8.3制作第一个网页设置文本格式段落的格式、字体、字号、字的颜色、字体加粗／倾斜、对齐方式（左对齐／居中／右对齐）、文字所链接的路径或URL等。文本属性面板1.格式设置所选文本的段落样式。2.样式显示当前应用于所选文本的类样式。如果没有对选定内容应用过任何样式，则弹出式菜单显示“无CSS样式”。如果已对选定内容应用了多个样式，则弹出式菜单是空的。3.粗体根据在“首选参数”对话框的“常规”类别中设置的样式参数选择，将b或strong应用于选定的文本。4.斜体根据在“首选参数”对话框的“常规”类别中设置的样式参数选择，将i或em应用于选定的文本。编辑段落段落：格式上统一的一段文本输入一段文本，按enter键就自动构成了段落。p/p对齐段落有三种方式：左对齐、居中和右对齐选定要设置对齐方式的段落，使用Text菜单中Align菜单项的Left、Center或Right选项，或者在属性面板中，用鼠标单击右上角的对齐按钮格式中的标题格式中的预格式化：处理空格文本属性面板改变字体：1.选定要改变字体的文本，选择“文本”菜单中“字体”菜单项中的相应选项；2.从属性面板上字体列表中选择相应的选项如果没有选定任何文本，则改变的字体将应用于以后输入的文字；如果字体列表中没有需要的字体，可以单击”编辑字体列表“选项，在随后出现的对话框中可以添加需要的字体到字体列表中。文本的字体属性改变字号：选定要改变字号的文本，从属性面板上”大小“的下拉列表中选择相应的选项。如果没有选定任何文本，将会改变以后输入文字的字号；尽量不要使用自己安装的字体，用户机器上可能没有安装。改变颜色文本属性面板此处为粗体显示文本此处为大字体显示文本此处为小字体显示文本此处为斜体文本此处为等宽字体文本此处为下划线文本此处为带删除线的文本缩进缩进段落是针对网页边距而言的，有增加缩进和减小缩进两种。增加缩进是将当前的段落向文档窗口的右侧移动；减小缩进则是将当前的段落向文档窗口的左侧移动，选定要缩进的一个或多个段落，在“文本”菜单中选择增加缩进或减小缩进；或者使用属性面板中的增加缩进按钮或减小缩进按钮进行段落缩进。文本属性编辑－项目列表无序列表ul/ul有序列表ol/ol目录列表dl/dl列表属性8.4.1超链接的基本概念网页中的超链接就是以文字或图像等作为链接对象，然后指定一个要跳转的网页地址。当浏览者单击文字或其他对象时，浏览器将跳转到指定的目标网页。1．超链接的分类根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。2．路径创建超级链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。8.4超链接8.4.2设置超链接【例8-3】制作一个“金庸名著赏析”网页，使用锚记链接、页面间链接和电子邮件链接等技术。当用户单击主页面栏目中某个名著的链接时，首先链接到本页面内该作品的简介位置，如果用户需要查看详细内容，单击“详细内容”链接，进入相应的页面显示详细的作品内容。使用锚点链接实现页内链接，页面之间可以通过“返回”链接返回到主页面，实例效果如图8-38所示。8.4超链接【例8-3】超链接分类内部链接：在同一个站点内的不同页面之间相互联系的超链接。锚点链接：可以链接到网页中某个特定位置的链接。外部链接：把网页与Internet中的目标相联系的链接。普通文本超级链接文本的Properties面板上有Link和Target两项，这就与超级链接有关。选中所需的文本，有四种方法可使它链接到其它页面。1.直接在Link后填入要链接到的页面的地址。最好用相对地址，而不用绝对地址。2.点击后面的图标，然后选取要链接到的页面。3.使用图标。用快捷键F5可打开你定义的本地站点的文件列表，用鼠标点击，不要松开，拖动至你要链接到的页面即可。4.用鼠标把本地站点文件列表中的文件直接拖到Properties面板上Link后即可文本属性面板－链接在链接栏输入链接网页的地址，单击链接文字可以直接跳到被链接的页面。_blank:空白视窗，保留原来的窗口，新开启一个窗口浏览所链接的文件内容；_parent:上一层页框视窗，若网页使用框架，则所链接的网页回到上一层的框架所在窗口；_self:本身视窗，默认链接显示方式，所链接的内容取代原来窗口的内容；_top:全视窗，以全窗口的方式出现所链接的网页，取