网站建设

主讲：韩维良2004.9.6网站建设第三章网页元素的添加与编辑第一节添加文本和设置文本格式一、文本元素的添加和编辑1．将文本添加到文档◇直接在“文档”窗口中定位光标键入文本。◇从其他应用程序中“拷贝”→“粘贴”文本对文字部分进行的复制，粘贴，撤消，重复等操作与WORD类同，不在讲述。网站建设第三章网页元素的添加与编辑2．添加空格和段落（1）空格的添加：HTML只允许字符之间包含一个空格；若要在文档中添加其他空格，必须添加连续空格。在“插入”栏中，选择“字符”，然后单击“非换行的空格”图标。选择“插入”“特殊字符”“不换行空格”。按Ctrl+Shift+空格键（首选）网站建设第三章网页元素的添加与编辑（2）段落的添加：直接按Enter键可添加一个新的段落。按“Shift+Enter”键可实现段内换行(在Word中称为软回车)。网站建设第三章网页元素的添加与编辑3．文本格式文本格式的设置通过属性面板或菜单进行。（1）属性面板：选中，设置。（2）文本菜单：选中，执行“文本”菜单中的相应命令设置字体、字号等格式。文字大小的预设值为3，加减是相对于预设值而言的。属性面板中设置的颜色，不受Body标签中文本色的限制。网站建设第三章网页元素的添加与编辑4．编辑字体列表在设置字体时，还应注意在原始的字体列表中可能没有要使用的字体，可用“编辑字体列表”命令将欲使用的字体添加到字体列表中。5．创建新列表类似于WORD中的项目符号与项目编号。选择一系列段落组成一个列表。单击属性面板中的“项目列表”或“编号列表”按钮，或选择“文本”“列表”，然后选择所需的列表类型：“项目列表”、“编号列表”或“定义列表”。网站建设第三章网页元素的添加与编辑另外将插入点置于列表段落中，在属性面板中的项目符号中进行设置。6．日期、特殊字符、水平线的添加①、插入更新日期选择“插入/日期”。在“插入”栏中，选择“常用”，单击“日期”按钮。②、插入水平线选择“插入／水平线”；在“插入”栏中，选择“常用”，然后单击“水平线”按钮。网站建设第三章网页元素的添加与编辑修改水平线属性：单击选择水平线→在属性面板上可以设置水平线的粗细、对齐方式及是否有阴影。在Dreamweaver中，水平线的格式颜色单一，可以用代码方式修改它的颜色。切换到代码和设计视图方式，选中插入的水平线，在代码窗口中，找到选中的标签hr，在r后输入一个空格，出现该标签的属性列表框，双击color属性，并在调色板中选择合适的颜色。用代码法改变某标签属性的方法，是DW最具特色的。网站建设第三章网页元素的添加与编辑③、插入特殊字符选择“插入／特殊字符”；在“插入”栏中，选择“字符”类别并选择所需的字符。如：版权符号等。网站建设第三章网页元素的添加与编辑二、HTML样式的应用通过设置HTML样式，可以快速一致地将字体格式应用于文档中的文本。HTML样式可由单个或多个HTML字体标签属性（如颜色、字体、大小）以及其他格式属性（如粗体或斜体）组成。网站建设第三章网页元素的添加与编辑1．HTML样式面板（1）显示“HTML样式”面板HTML样式有两种类型：“段落样式”和“所选样式”。可通过“HTML样式”面板第一列中的符号（如a是所选文本样式）来识别它们。网站建设第三章网页元素的添加与编辑2．创建HTML样式（1）创建新的HTML样式在“HTML样式”面板中，单击“新建样式”图标（+）。（2）基于现有文本创建新的HTML样式在文档中，选择包含新HTML样式格式的文本。在“HTML样式”面板中，单击右下角的“新建样式”图标（+），出现“定义HTML样式”对话框。在对话框中根据需要编辑相应属性，最后将其保存为一个新的样式。网站建设第三章网页元素的添加与编辑3．编辑HTML样式的属性（1）在“HTML样式”面板中，选择一种样式。（2）右击鼠标从上下文菜单中选择“编辑”，或者双击HTML样式。（3）在“定义HTML样式”对话框中，查看或修改样式属性。网站建设第三章网页元素的添加与编辑4．应用HTML样式选择要应用样式的文本或将光标添加要应用样式的段落。在“HTML样式”面板中，选择一种样式。5．从“HTML样式”面板中删除样式在“HTML样式”面板中选择HTML样式，单击面板右下角的“删除样式”图标。网站建设第三章网页元素的添加与编辑三、层叠样式（CSS）的应用1．CSS样式概述层叠样式简称CSS（CascadingStyleSheet技术是一种格式化网页的标准方式），是以HTML为基础的语言，用于定义网页中内容的格式，它扩展了HTML的功能，使网页设计者以更有效的方式设置网页格式。其主要特点是，可以独立地为网页中的各种对象定义格式，并可将一种格式用于多个网页。网站建设第三章网页元素的添加与编辑CSS样式表中的层叠是指多个CSS样式表可以同时应用于同一个页面或网页中的同一元素，浏览器根据CSS定义的层叠规则来决定哪一种样式具有最高优先级。CSS样式共有三种类型：网站建设第三章网页元素的添加与编辑自定义的CSS样式：是唯一可以应用于文档中的任何文本（与控制文本的标签无关）的CSS样式类型。与当前文档关联的所有自定义(Class)样式都显示在“CSS样式”面板的“应用样式”视图中以及文本属性面板的CSS模式中。HTML标签样式：重定义现有的HTML标签，当创建或更改这类标签的CSS样式时，文档中所有用该标签设置了格式的文本都将自动更新。CSS选择器样式：主要定义超级链接四种形式的不同属性。网站建设第三章网页元素的添加与编辑2．CSS样式面板显示“CSS样式”面板：在“窗口”菜单中单击“CSS样式”。或者按Shift+F11键。CSS样式面板下方的四个按钮分别是：附加样式表，新建CSS样式，编辑样式表，删除CSS样式表。网站建设第三章网页元素的添加与编辑3．创建新的CSS样式创建新的CSS样式的步骤如下：（1）将插入点置于欲设格式处，单击新建CSS样式按钮。（2）定义CSS样式的类型；（3）选择定义样式的位置；（4）单击“确定”。出现“CSS样式定义”对话框。（5）选择要为新CSS样式设置的样式选项。网站建设第三章网页元素的添加与编辑CSS样式可以保存成一个独立的外部样式文件，使得多个网页文件可以共享同一CSS样式，以便统一网页的格式。CSS样式文件的扩展名是CSS，是一个纯文本文件。CSS样式面板中单击附加样式按钮，可以将一个现成的样式链接当前网页中使用。网站建设第三章网页元素的添加与编辑3．设置CSS样式格式CSS样式格式共有下列8种不同的类型，根据不同的需要设置相关的属性。①、类型属性：最基本的属性，如字体、字号、行高。②、CSS样式背景属性：为整段文字加上背景属性。③、区块设置：可以定义文本的间距、对齐、缩进设置。④、盒子：可以详细地设置上下左右的边界值。网站建设第三章网页元素的添加与编辑⑤、“边框”：可以为任何网页元件加上边框（如宽度、颜色和样式），且边框的样式多样（粗细、凹下等）。⑥、“列表”可以设置项目符号的样式（如项目符号大小和类型），还可以用图片来代替项目符号。⑦、“定位”：提供网页元件的相对位置或绝对位置的设置，甚至可以将两个元件重叠在一起，使用“层”参数选择定义层的默认标签，将标签或所选文本块更改为新层。这部分参数被扩展成了DW中的层。网站建设第三章网页元素的添加与编辑⑧、扩展属于较新的CSS样式，包括过滤器、分页和光标选项，虽然可以做出比较绚丽的格式，但它们中的大部分不受任何浏览器的支持，或者仅受InternetExplorer4.0和更高版本的支持。网站建设第三章网页元素的添加与编辑4、应用自定义（Class）CSS样式将插入点置于欲设置CSS样式的段落中或者在段落中选择一个文本范围。在“CSS样式”面板（“窗口”“CSS样式”）中，选择“应用样式”，然后在“CSS样式”列表中单击要应用的样式的名称。网站建设第三章网页元素的添加与编辑5．将自定义样式从选定内容中删除选中内容，单击CSS样式面板中的“无CSS样式”。6．创建和链接到外部CSS样式表单击附加样式表按钮，再选择CSS样式文件。7．编辑CSS样式在CSS样式面板中，双击欲修改的CSS样式文件名称。网站建设第三章网页元素的添加与编辑8．将CSS样式转换为HTML为样式为了能够对所有浏览器都兼容，如果所设置的CSS样式可以用HTML格式编写，则将CSS样式转换为HTML格式更好。方法：执行在“文件”菜单的“转换”中的“兼容3.0浏览器”，再选“将CSS转换为HRML标记”。网站建设第三章网页元素的添加与编辑第二节图像的添加与编辑一、添加图像在“插入”栏的“常用”类别中，单击“图像”图标或选择“插入／图像”→选择一个图形文件与添加文本不同，插入的图像不能从别的文档中复制；必须特别说明的是，插入到网页中的图像只能以文件的形式独立存在于站点文件夹中。如果图像文件不在站点目录中，DW会保存到站点目录中。网站建设第三章网页元素的添加与编辑更简单地插入一个图像文件的方法是，从站点文件夹中拖动一个文件到网页中。注意图像一般较大，不可过多地插入，一般情况下，将网页文件控制在40K左右，通过状态栏知道。网站建设第三章网页元素的添加与编辑二、图像的编辑与属性设置单击选中图像，在属性面板中，设置图像的属性。“源文件”指定图像文件的存放路径。单击文件夹图标以浏览到源文件，或者键入路径。“垂直边距”和“水平边距”沿图像的边缘添加边距（以像素为单位）。“垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距。网站建设第三章网页元素的添加与编辑“低品质源”指定在载入主图像之前应该载入的图像。许多设计人员使用主图像的2位（黑和白）版本，因为它可以迅速载入并使访问者对他们等待看到的内容有所了解。“边框”是以像素为单位的图像边框的宽度。默认为无边框。“编辑”启动在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。“重设大小”将“宽”和“高”的值重置为图像的原始大小。网站建设第三章网页元素的添加与编辑1、调整图像大小放大、缩小图像大小：拖动控制点或直接在属性面板中输入宽度与高度的像素值；按比例放大、缩小图像大小：按住Shift同时拖动右下角控制点；恢复图像大小：删除宽度、高度值或单击“重设大小”按钮。网站建设第三章网页元素的添加与编辑2．设置图像与文字的关系在对齐列表框中选择合适的对齐方式。设置图像相对于同一段落或行中其他元素的对齐方式。3、对齐图像可以使用对齐按钮（左对齐、右对齐、居中对齐）设置图像的水平对齐方式。网站建设第三章网页元素的添加与编辑4、给图像描边选中欲描边的图像→在“边框”中填像素值。5、给图片增加提示选中图像→在属性面板的替代中输入提示文字。在浏览器中，鼠标指向这个图片时，就会出现文字提示。另外，有时，不显示图片后，可以显示该说明文字。网站建设第三章网页元素的添加与编辑6、设置及启用外部图像编辑器◇设置不同类型图像文件编辑器：选择“编辑／参数选择／文件类型/编辑器”……通过外部图像编辑器对图像文件进行修改。◇启用图像编辑器：选取图像→单击属性面板中的“编辑”按钮即可启动相应编辑器。网站建设第三章网页元素的添加与编辑三、创建鼠标经过图像（翻转图像）鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。用Java语言控制。需要两张图片，一张是一般状态下的图片，另一张是鼠标经过时的图片。将插入点置于要建立鼠标经过图像的位置，单击“插入”面板“常规”中的“鼠标经过图像”按钮。网站建设第三章网页元素的添加与编辑四、插入FLASH按钮在“插入”的“媒体”工具栏中单击“插入FLASH按钮”。五、插入FLASH文本在常用工具栏中单击“插入FLASH按钮”。设置翻滚颜色可使文本具有与鼠标经过类似的效果。鼠标经过图像与FLASH按钮、FLASH文本一般都用于制作超链接。网站建设第三章网页元素的添加与编辑第三节链接超级链接是网页中的精华部分，没有它每个网页都要输入很长的URL地址，很难想象，WEB网会是个什么样的发展状况。一、