网页制作工具解读

《网页制作工具解读》由会员分享，可在线阅读，更多相关《网页制作工具解读（100页珍藏版）》请在金锄头文库上搜索。

1、网页制作工具Dreamweaver,“所见即所得”网页编辑器: 优点就是直观、使用方便、容易上手，但也存在难以精确达到与浏览器完全一致的显示效果的缺点 “非所见即所得”网页编辑器（即源代码编辑器）:所有的HTML代码都是在用户的监控下产生的，但是，工作效率太低。,网页制作工具,Microsoft公司专门开发的网页制作专业工具。目前最高版本是FrontPage 2003。 网页编辑功能非常强大。 强大的网页管理功能,网页制作工具FrontPage,Dreamweaver Macromedia公司推出的主页编辑工具。 所见即所得网页编辑器，支持最新的XHTML和CSS标准。 最新版本是Dreamw

2、eaver 8，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。 借助Dreamweaver还可以使用服务器语言（例如ASP、ASP.NET、ColdFusion标记语言、JSP和PHP）生成支持动态数据库的Web应用程序。,网页制作工具,Adobe Pagemill 适合初学者制作较为美观，但不是非常复杂的主页。,网页制作工具,HomeSite 更适合进行比较复杂和精美页面的设计。如果用户希望能完全控制页面制作的进程，那么HomeSite是最佳选择。,Visual Studio.Net 支持相应程序的自动语法检查，还支持程序的调试与编译。内置有VB.Net、VC+.Net、C

3、#等程序开发工具，集程序的调试、编译等功能于一身,EditPlus 目前非常流行的一款功能强大的文本编辑器，该软件功能强大、易于使用、兼容性强，支持几乎所有程序语言的代码色彩显示。它的缺点就是不支持程序的调试。,8.1 Dreamweaver简介 8.2 站点管理 8.3 制作第一个网页 8.4 超链接 8.5 使用图像 8.6 使用多媒体对象 8.7 使用表格,第8章 网页制作工具Dreamweaver 8,8.1.1 Dreamweaver 8的启动和主工作区 一系列初始化过程后，首先显示“工作区设置”对话框。接下来显示起始页对话框，可以选择“打开最近项目”、“创建新项目”或“从范例创建”

4、。,8.1 Dreamweaver简介,图8-1 “工作区设置”对话框,图8-2 起始页,2Dreamweaver 8的主工作区 主工作区由插入工具栏、文档工具栏、文档窗口、属性面板等部分组成,8.1 Dreamweaver简介,图8-3 Dreamweaver 8的主工作区,（1）插入工具栏 默认显示的是“常用”类的主要功能按钮。 单击“常用”按钮会弹出一个下拉菜单，其中包含了插入工具栏中的其他功能菜单。 选择不同的分类，插入工具栏中包含的功能按钮也随之改变。,8.1 Dreamweaver简介,图8-4 插入工具栏及其功能分类菜单,插入面板,包含用于将各种类型的“对象”（如图像、表格和层）

5、插入到文档中的按钮。 每个对象都是一段 HTML 代码，允许插入时设置不同的属性。 “常用“项面板、布局（标准视图、布局项视图）、“文本“、“表单“、“模板“、“字符“、“媒体“、“文件头“、“脚本“、“应用程序“项面板,插入面板,常用 ：创建和插入最常用的对象，如图像和表格； 布局 ：插入表格、div 标签、层和框架。可从表格视图（标准、扩展表格、布局）中选择。选择“布局”模式后，可使用 布局工具：“绘制布局单元格”和“绘制布局表格”。 表单 ：用于创建表单和插入表单元素 文本 ：插入文本格式设置标签和列表格式设置标签 HTML ：插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。

6、 服务器代码：适用于使用特定服务器语言（ ASP、ASP.NET、JSP 和 PHP）等的页面。 应用程序：插入动态元素，例如记录集、重复区域以及记录插入和更新表单。 Flash 元素：插入 Flash 元素。 收藏：将“插入”栏中常用按钮分组和组织到常用位置。,（2）文档工具栏 使用户可以在文档的不同视图间快速切换：代码视图、设计视图、和拆分视图。 还包含与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。,8.1 Dreamweaver简介,图8-5 文档工具栏的常用命令和选项,选择“编辑”“首选参数”命令,打开“首选参数”对话框。选择“分类”列表中的“常规”选项。 通常设置的属性

7、有文档选项和一些编辑选项。,8.1.2 Dreamweaver 8的参数设置,图8-12 常规参数设置中更改工作区,2新建文档参数设置 建立默认的新文档类型和首选参数。 选择“分类”列表中的“新建文档”选项，对话框右侧显示出相关的属性。,8.1 Dreamweaver简介,图8-13 新建文档参数设置,3站点参数设置 选择“分类”列表中的“站点”选项,用于为“文件”面板设置站点首选参数。,8.1 Dreamweaver简介,图8-14 站点参数设置,站点:一系列文档的组合，这些文档之间通过各种链接关联起来，可能拥有相似的属性，也可能只是毫无意义的链接。 8.2.1 本地站点和远端站点 站点也是

8、一种文档的磁盘组织形式，它同样是由文档和文档所在的文件夹组成的。 利用不同的文件夹，将不同的网页内容分门别类地保存，这是设计网站的必要前提。 结构良好的网站，不仅便于管理，也便于更新。,8.2 站点管理,8.2.2 建立本地站点 规划好站点结构后，先在Dreamweaver中定义站点，然后才能进行开发。,8.2 站点管理,图8-15 站点设置,图8-16 站点结构,8.2.3 管理本地站点 1编辑站点 在“文件”面板中的“站点名称”下拉列表中选择“管理站点”项，打开“管理站点”对话框。 在“管理站点”的对话框左侧列表中选择需要编辑的站点，然后单击右侧按钮，则可以进行相应的操作。,8.2 站点管

9、理,图8-20 选择要编辑的站点,8.2.3 管理本地站点 2文件的基本操作 使用“文件”菜单对单独的文件进行管理，例如，执行“新建”、“打开”、“保存”、“另存为”等命令。 也可以在“文件”面板中，在文件或文件夹上单击鼠标右键，在弹出快捷菜单的“编辑”命令子菜单中，执行“新建”、“打开”、“删除”、“移动”、“复制”、“重命名”等命令。 3指定站点首页 首页就是网站的门面，通常首页文件中总包含有若干指向其他主要网页的超链接，用户可以先为网站创建一个空白首页，然后进行编辑，并可以利用站点地图查看网站中超链接的情况。,8.2 站点管理,8.3.1 制作网页一般过程 【例8-2】制作一个浅黄色背景

10、的网页，在页面上添加文字和水平线，展示一个娱乐网页的宣传内容，并且在页面的右下方显示感谢信息和当前日期，效果如图8-22所示。,8.3 制作第一个网页,图8-22 实例效果,【例8-2】,8.3.2 设置页面属性 页面属性是指网页的一般属性信息，例如，网页标题、网页的背景颜色、背景图像、超链接颜色、跟踪图像等。 1设置网页标题 网页标题是用来说明网页内容的文字，显示在浏览器窗口的标题栏中。通常，每个网页都应该有一个标题，而网页标题文字最好能够恰如其分地描述网页的内容。 2设置网页其他属性 如果需要设置网页的其他属性，可以打开“页面属性”对话框进行设置。,8.3 制作第一个网页,页面属性,8.3

11、.3 网页基本元素 在通常情况下，网页上一般都包含文本、日期、特殊符号及水平线等基本元素。 1文本和特殊符号 文本的操作主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。 2日期 Dreamweaver提供了一个方便的日期对象，该对象使用户可以用任何喜欢的格式插入当前日期，还可以选择在每次保存文件时自动更新该日期。 3水平线 水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。,8.3 制作第一个网页,设置文本格式,段落的格式、字体、字号、字的颜色、字体加粗倾斜、对齐方式（左对齐居中右对齐）、文字所链接的路径或URL等。,文本属性面

12、板,格式设置所选文本的段落样式。 样式显示当前应用于所选文本的类样式。如果没有对选定内容应用过任何样式，则弹出式菜单显示“无 CSS 样式”。如果已对选定内容应用了多个样式，则弹出式菜单是空的。 粗体根据在“首选参数”对话框的“常规”类别中设置的样式参数选择，将 或 应用于选定的文本。 斜体根据在“首选参数”对话框的“常规”类别中设置的样式参数选择，将 或 应用于选定的文本。,编辑段落,段落：格式上统一的一段文本 输入一段文本，按键就自动构成了段落。 对齐段落有三种方式：左对齐、居中和右对齐 选定要设置对齐方式的段落，使用Text菜单中Align菜单项的Left、Center或Right选项，

13、或者在属性面板中，用鼠标单击右上角的对齐按钮 格式中的标题 格式中的预格式化：处理空格,文本属性面板,改变字体： 1.选定要改变字体的文本，选择“文本”菜单中“字体”菜单项中的相应选项； 2.从属性面板上字体列表中选择相应的选项 如果没有选定任何文本，则改变的字体将应用于以后输入的文字； 如果字体列表中没有需要的字体，可以单击”编辑字体列表“选项，在随后出现的对话框中可以添加需要的字体到字体列表中。,文本的字体属性,改变字号：选定要改变字号的文本，从属性面板上”大小“的下拉列表中选择相应的选项。 如果没有选定任何文本，将会改变以后输入文字的字号； 尽量不要使用自己安装的字体，用户机器上可能没有

14、安装。 改变颜色,文本属性面板,此处为粗体显示文本 此处为大字体显示文本 此处为小字体显示文本 此处为斜体文本 此处为等宽字体文本 此处为下划线文本 此处为带删除线的文本,缩进,缩进段落是针对网页边距而言的，有增加缩进和减小缩进两种。 增加缩进是将当前的段落向文档窗口的右侧移动；减小缩进则是将当前的段落向文档窗口的左侧移动， 选定要缩进的一个或多个段落，在“文本”菜单中选择增加缩进或减小缩进；或者使用属性面板中的增加缩进按钮 或减小缩进按钮进行段落缩进 。,文本属性编辑项目列表,无序列表 有序列表 目录列表 列表属性,8.4.1 超链接的基本概念 网页中的超链接就是以文字或图像等作为链接对象，

15、然后指定一个要跳转的网页地址。当浏览者单击文字或其他对象时，浏览器将跳转到指定的目标网页。 1超链接的分类 根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。 2路径 创建超级链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。,8.4 超链接,8.4.2 设置超链接 【例8-3】制作一个“金庸名著赏析”网页，使用锚记链接、页面间链接和电子邮件链接等技术。当用户单击主页面栏目中某个名著的链接时，首先链接到本页面内该作品的简介

16、位置，如果用户需要查看详细内容，单击“详细内容”链接，进入相应的页面显示详细的作品内容。使用锚点链接实现页内链接，页面之间可以通过“返回”链接返回到主页面，实例效果如图8-38所示。,8.4 超链接,【例8-3】,超链接分类,内部链接：在同一个站点内的不同页面之间相互联系的超链接。 锚点链接：可以链接到网页中某个特定位置的链接。 外部链接：把网页与Internet中的目标相联系的链接。,普通文本超级链接,文本的Properties面板上有Link和Target两项，这就与超级链接有关。 选中所需的文本，有四种方法可使它链接到其它页面。 直接在Link后填入要链接到的页面的地址。最好用相对地址，而不用绝对地址。 点击后面的 图标，然后选取要链接到的页面。 使用 图标。用快捷键F5可打开你定义的本地站点的文件列表，用鼠标点击 ，不要松开，拖动至你要链接到的页面即可。 用鼠标把本地站点文件列表中的文件直接拖到Properties面板上Link后即可,文本属性面板链接,在链接栏输入链