网页设计基础知识[2]

第2章Dreamweaver基础•本章详细讲解Dreamweaver的基础知识，其中包括Dreamweaver的界面、面板和菜单的的简单介绍。2.1Dreamweaver工作界面•安装好Dreamweaver软件后，双击安装后的运行程序图标（或者从Windows“开始”菜单的“所有程序”中选择Dreamweaver）运行Dreamweaver程序，程序运行后的显示效果如图所示。2.1.1菜单栏•菜单栏中包含了Dreamweaver中大多数的命令，菜单栏包括“文件”、“编辑”、“查看”、“插入记录”、“修改”、“文本”、“命令”、“站点”、“窗口”、“帮助”等10个选项。•菜单栏中包含了Dreamweaver中大多数操作和常用命令，在实际的页面制作中经常使用。1.参数设置•选择“编辑”“首选参数”，打开对话框，可以进行相应的参数设置2.页面属性设置•选择“修改”“页面属性”，打开对话框，可以进行相应的页面属性设置。在“页面属性”对话框中，可以定义页面的外观、链接、标题、标题/编码、跟踪图像等。下面讲解部分选项中参数的含义。2.3.2定义页面属性•1．外观属性•2．链接属性•选择“页面属性”中的“链接”选项，打开“链接”对话框，•“链接”对话框用来定义页面链接内容的样式，其中部分选项的含义如下所示。2.3.2定义页面属性•3．标题属性•选择“页面属性”中的“标题”选项，打开“标题”对话框•“标题”对话框用来定义页面中各种标题的显示样式，其中对应的页面HTML代码为h1、h2、h3、h4、h5、h6等6个标题标签。2.3.2定义页面属性•4．标题/编码属性2.1.2“插入”工具栏•插入栏用来插入各种常用和布局对象。根据选择的选项不同，在插入菜单中显示的内容也有所区别。选择“常用”和“布局”选项时，插入栏的显示效果如图2-4和图所示。2.1.4视图•文档窗口用来显示当前文档。在文档窗口中，可以使用三种方式显示文档内容：分别是“设计”视图、“代码”视图、“拆分”视图。下面分别进行介绍。•1．“设计”视图2.1.4文档窗口•2．“代码”视图2.1.4文档窗口•3．“拆分”视图2.1.5属性面板•属性面板用来定义页面元素或内容的相应属性。由于选择的元素或者内容不同，属性面板中显示的属性也有所区别。下面是是选择图像内容后，属性面板的显示效果，如图所示。面板和面板组•Dreamweaver中，面板都整合到面板组中，通过单击面板的标题可以显示和隐藏相应的面板。面板和面板组处于Dreamweaver工作界面的右侧。当面板关闭时，面板组的显示效果如图所示，打开某个面板后的显示效果如图所示。2.1.6管理站点•一般在制作网页之前，都要在本地的计算机中创建本地的测试站点。当测试完成之后，再传到Internet服务器上。在Dreamweaver中，可以方便地构建和管理站点。下面讲解具体的操作方法。1新建站点•在新建站点之前，首先要在磁盘中新建一个站点文件。新建文件时可以直接在磁盘中建立，也可以在文件面板中建立。1新建站点•选择“站点”“新建站点”，在弹出的对话框中进入站点的创建，点击“高级”选项卡，可以进行站点内容的设置。2管理和编辑站点•执行“站点”|“管理站点”命令，打开“管理站点”对话框，如图所示，在对话框中可以管理站点的相关信息。2管理和编辑站点•执行“窗口”|“文件”命令，可以实现对站点文件的管理。2.2插入文本•Dreamweaver提供了多种插入文本的方法供读者选择。标题、栏目名称等少量文本，可以选择直接在文档窗口中键入；段落文本，可以选择从其它文档中复制粘贴；整篇文章或表格，可以选择导入Word、Excel文档。2.2.1将文本添加到文档•在Dreamweaver中输入文本与Word略有不同，下面通过实例来说明。要注意不换行空格，换行符的插入，文本添加效果如图2.1所示。2.2.2插入日期•在网页中经常需要插入日期，比如网页的更新日期，文章的上传日期等。Dreamweaver提供了日期对象，可以方便地插入当前日期。选择“插入”｜“日期”命令。2.2.3插入特殊字符•Dreamweaver还提供了丰富的特殊字符插入功能，可以插入如注册商标、版权、货币符号等特殊符号。选择“插入”“HTML”“特殊字符”命令。2.2.4导入数据文档•除了直接键入文本和复制粘贴文本以外，Dreamweaver还可以直接将表格式文档、Word文档、Excel文档导入到当前文档，省去了复制粘贴的麻烦。选择“文件”“导入”命令。2.3设置文本格式•2.1节介绍了在网页中插入文本的几种方法，由于插入的文本大小、字体格式不一致，需要对文本属性进行设置，使其风格保持统一。2.3.1关于设置文本格式•设置文本格式有两种方法：使用HTML标签格式化文本，使用层叠样式表（CSS）。•使用HTML标签和CSS都可以控制文本属性，包括特定字体和字大小；粗体、斜体、下划线；文本颜色等。两者区别在于，使用HTML标签仅仅对当前应用的文本有效，当改变设置时，无法实现文本自动更新。而CSS则不同，通过CSS事先定义好文本样式，当改变CSS样式表时，所有应用该样式的文本将自动更新。此外，使用CSS能更精确地定义字体的大小，还可以确保字体在多个浏览器中的一致性。•默认情况下，Dreamweaver使用CSS而不是HTML标签指定页面属性。CSS功能强大，除控制文本外，CSS还可以控制网页中的其他元素，这里主要介绍使用属性检查器设置文本属性的基本操作。2.3.2使用“属性”检查器设置文本属性•使用“属性”检查器可以方便地设置字体的类型、格式、大小、颜色，对于初学者来说这种方法简单易用。页面中的文本格式为段落，字体为宋体，颜色为灰色，大小为12像素。选择“窗口”“属性”命令2.4设置段落格式•2.3节介绍了使用属性检查器设置文本格式的方法及操作步骤，本节将学习设置段落格式，包括对齐文本、缩进文本、使用水平线等常用功能。2.4.1对齐文本•在网页文字排版时，经常用到对齐文本功能。对齐文本方式主要有四种：左对齐，居中对齐，右对齐，两端对齐。使用“属性”检查器或“文本”“对齐”子菜单可以对齐页面上的文本。2.4.2缩进文本•在对网页中的段落进行排版布局时，经常会用到“缩进文本”命令，缩进页面两侧的文本长度，留出一定的空白区域，使页面更美观。选择“文本”“缩进”命令。2.4.3使用水平线•使用水平线进行文本段落分割，也是常用的方法。例如，在制作网页时，通常会在页面下部版权文字的上方插入一条水平线，用以分隔文档内容，使文档结构清晰明确。选择“插入”“HTML”“水平线”。2.5列表•在网页中使用列表将内容分级显示，使侧重点一目了然，内容更有条理性。在Dreamweaver中创建列表有两种方法：使用“属性检查器”或“文本”菜单下的“列表”命令。Dreamweaver中的列表主要分为项目列表，编号列表，定义列表三种。搜狐网站中就同时应用了上述三种样式的列表，如图2.38所示。2.5.1创建列表•创建列表有两种方式：创建新列表，使用现有文本创建列表。两者创建列表方式操作类似。2.5.2设置列表属性•通过设置列表属性，可以改变列表的类型以及样式。选择文本”|“列表”|“属性”命令2.6检查拼写•在输入文本时，有时会遇到拼写错误。使用Dreamweaver的“检查拼写”命令，可以自动检查出当前文档中文本拼写的错误并将其更正，大大提高了工作效率。下面举例来说明如何检查并修改出网页中存在的拼写错误。选择“文本”|“检查拼写”命令2.6.1查找和替换文本•使用Dreamweaver的“查找和替换文本”功能，可以在文档或站点中方便地查找出指定的文本或代码，并进行替换，省去了亲自动手查找修改的麻烦，大大提高了网页编辑与修改的效率。选择“编辑”|“查找和替换文本”命令