网页制作与网站设计-04Dreamweaver格式设置、CSS式样

项目四Dreamweaver格式设置、CSS式样

内容摘要

介绍了网页的基本元素文本和图象介绍了网页图象的使用介绍了CSS样式表的使用方法和技巧学习文本的输入与格式化学习图象的插入与编辑理解和使用网页的自动化功能理解制作规范、专业的网页的方法掌握网页中页面属性的设置掌握CSS样式、库、模板。学习目标

任务1：设置页面基本属性

任务描述

1.任务说明本任务将使用“页面属性”对话框，对DreamweaverCS3中创建的网页文件的布局和格式等进行设置。网页建成以后，一般不是立即放置网页元素，而是先设置网页的标题、背景图象或是背景颜色，以及文本图象的超级链接的颜色等页面属性。2.操作步骤在DreamweaverCS3的主窗口中新建一个网页文件，并输入相应内容如图4-1所示。按组合键Ctrl+J或选择主菜单中的【修改】一【页面属性】命令，打开“页面属性”对话框。在“分类”列表框中选择“外观”类别，设置页面字体为华文新魏；文本颜色为蓝色；页面背景文件为“0401.gif”，如图4-2所示。图4-1页面属性的“外观”设置对话框

图4-2页面属性的设置“背景图象”单击【确定】按钮，按F12键预览，如图4-3带有背景图象的效果所示。

如图所示，在“页面属性”对话框的“分类”列表框中选择“链接”选项，设置链接文字的链接色为蓝色既“#0033FF”，变换图像链接为绿色即“#00FF00”，活动链接为黑色“#000000”，已访问链接的颜色选择默认。如图所示，在“页面属性”对话框的“分类”列表框中选择“标题”选项，设置网页标题的字大小、颜色等。在“页面属性”对话框的“分类”列表框中选择“标题／编码”选项，在“标题”文本框中输入网页标题，编码选择简体中文(GB2312)，如图所示如图4-7所示，在“页面属性”对话框的“分类”列表框中选择“跟踪图像”选项。单击【浏览】按钮，

任务2：输入文字

任务说明

文本是最重要的信息载体与交流工具，是网页发布信息所用的主要形式。用文本制作的网页占用空间小，浏览时，可以很快地展现在用户面前。文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印在：DreamweaverCS3中，文字可以直接输入到页面上，也可以输入到表格和层等区域中。输入的文字一般分为普通文本和特殊字符两种。操作步骤

1.建立新网页：在DreamweaverCS3的主窗口中新建一个网页文件，在页面中需要输入文字的位置单击鼠标左键，出现插入点。

2.输入文本：选择适当的输入法输入文字，网页中必不可少的信息就是文本，它是网页传输数据信息最主要的方式之一。在DreamweaverCS3的文档窗口中将光标移动到要添加文本的地方，然后就可以直接在文档窗口中输入文本。取消这次操作，快捷键是Ctrl+Z。继续执行刚才的操作，快捷键是Ctrl+Y。文本超出了表格的显示范围时会自动换行。3.段落中换行：在一个段落未结束，又未到达窗口的右边界时就想换行，或想调节行之间的距离，可按下“Shift+Enter”组合键。4.段落标记：如果需要将一些文本独立成一段落，则可按下“Enter”键。5.插入多个空格：在网页的文字设定中，经常需要加入空格，但在HTMI。中规定，在文本中输入多个空格时，只显示一个空格。如需输入多个空格，可以用组合键“Ctrl+Shift+空格”来实现。

6.特殊字符的使用：如果需要输入特殊字符，可以应用插入面板文本类中的字符项目单输入，如图所示。7.设置文本基本属性：文本属性设置是通过属性面板完成的，如图所示为文本属性面板。提示与拓展网页中的文字不仅可以直接输入，也可以通过其他文字处理软件输入，然后利用Windows剪贴板复制粘贴到网页页面中。输入文字步骤任务3：设置文字格式任务

任务说明本任务中，我们将在属性面板中对输入的文字内容进行格式设置，包括字体、字号、字型等。没有编排点缀的纯文字网页，会给人带来死板的感觉，使得人们不愿意再往下浏览。为了克服这一缺点，人们为网页文本定义了一些属性，例如，字体、字号、颜色、底纹和边框等，通过文本不同的格式，突出显示重要的内容。具体要求1.标题一个网页通常都有一个标题，表明本网页的主要内容。标题是否醒目，是能否吸引浏览者的一个关键，因此标题的设计是很重要的。2.字号网页中的文字不能太大或太小，优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼的感觉。3.字体在网页适当的位置采用不同的字体，也能使网页产生吸引人的效果。

操作步骤将光标定位于需要设置为标题的段落中，在属性面板中选择相应的标题类别。2.选中需要设置字体的文本，在字体中选择所需要的字体，如宋体、黑体等。3.选择需要设置字号的文字，在中选择字号。4.选择需要设置颜色的文字，在颜色下拉列表中，用吸管在弹出的色块区域中选择文字的颜色。5.其它,再选择设置粗、斜体，为分段的文字加入项目符号和编号。任务4：插入图象

任务说明本任务中，我们将在网页中插入图象，因为当前各类网站都十分重视美术设计的效果。图片是美术设计的重要素材，加入了图片的网页图文并茂，更具有感召力和吸引力，因此在网页中插入图片是非常重要的。目前流行于网页的有两种图片格式，即GIF格式和JPG格式，这两种格式的图片，浏览器都可以正确显示。操作步骤我们把准备好的图片文件与制作好的网页文件放在相同的文件夹里。将文本移到要插入图片的地方，这里把这个位置设定为这段文字的最开头位置。选择“插入”菜单中的“图像”命令或者使用组合键Ctrl+Alt+I，在出现的文件选择对话框中选择要插入的图片。在目录窗口下方有一行相对于的“下拉框”，选择“文档”为与文档的相对路径。如果选择的图像没有位于本地站点目录中，则会出现一个对话框，询问是否将图像复制到本地站点目录。单击“确定”按钮将图像复制到本地站点目录。接着又出现一个对话框，选择复制之后的目录和文件名，保留原文件名即可。插入图象后，文档中出现一幅图像，如图4-10所示。在页面中插入的图像是以原始大小显示出来的，可以在属性面板中调整其属性，适应用户的要求。任务5：建立CSS样式一个网站包含的页面很多，常常需要对网页中各种元素的属性进行设置，在建立网页时我们应该将在同一个网站不同的页面中对所有的正文字体、字体大小和颜色设置相同的属性，例如“搜狐网”站点中“新闻”页面的下面有很多级页面，这些多级页面上文字的格式都要一致，如果每个页面上的文字格式都要逐页去设置，重复的工作量会非常大。在DreamweaverCS3中我们可以把某些网页元素(如文字、表格、超级链接等)的格式保存下来，然后就可以直接应用到其他文字等网页元素上。这种保存下来的格式就叫做样式。1.CSS样式面板选择“窗口”中的“CSS样式”（或是按Shift+F11组合键），打开了“CSS样式”面板。如图所示。2."CSS样式”面板主要按钮的意义类别视图按纽：分类显示属性如：:字体、背景、区块、边框、方框、列表、定位和扩展名等类型。列表视图按纽：按照字母顺序显示所有属性。设置属性按纽：只显示已经进行设置的属性。新建CSS规则按纽：单击该按钮，弹出“新建CSS规则”对话框。删除CSS规则按纽：单击该按钮，删除正在使用的CSS样式。3.操作步骤新建自定义CSS样式表选择“窗口”菜单“CSS样式”，或选择“文本”菜单“CSS样式”“新建”，打开“CSS样式”面板。单击面板右下侧的“新建CSS规则”按钮，将打开“新建CSS规则”对话框，如图所示。在“选择器类型”中选择“类”，在“名称”中输入类的名称如CSS样式表所示。在“定义在”选项中选择“仅对该文档”，以确定该样式表为内部样式表。单击“确定”，将打开出现“CSS规则定义”对话框，如图所示。在“CSS规则定义”对话框中，选择“类型”类别，然后设置所需的样式属性。定义好CSS式样之后，选中当前的文本段落，然后在CSS样式面板中，选择已经建立好的式样，右击弹出菜单，选择“套用”，或者在“页面属性”对话框中，在“式样”下拉列表框中选择建立好的式样，然后存盘。任务6：设置CSS样式的各项规则任务说明当我们学习CSS样式的建立后，现在已初步学会了建里CSS样式文件，但是要设计出更理想的CSS样式，还需要进一步学习CSS样式的各种属性设置。CSS的各种属性共有8类：类型、背景、区块、方快、边框、列表、定位和扩展。下面老师将带我们进入CSS样式的属性学习，如图所示。CSS的各种属性设置1．类型属性：主要是对页面中内容文字进行设置，如设置文本的字体、大小、颜色、变体、修饰等属性，设置完成可以应用到文本中。2．背景属性：主要是对页面中背景颜色、背景图案进行设置。3．区块属性：主要是对文本进行设置，包括单词间距、字间距、对齐、缩进等设置。4．方框属性：主要是对页面元素的样式进行设置，包括页面元素的宽、高、浮动等。5．边框属性：主要是设定元素边框的式样，包括边框的样式、宽度、颜色等。6．列表属性：主要是设定所需列表的式样，包括类型、项目符号图象、位置等。7．定位属性：主要是设定页面元素的样式，包括类型、宽、高、显示、溢出等。8．扩展属性：主要是设定特殊效果的式样，包括分页、光标、过滤器等。操作步骤

学习“学校网站”的建立与制作1．在D盘根目录下建立站点目录“学校网站”，并在“学校网站”目录下建立images和files两个文件夹。2．单击菜单栏上按纽，输入站点名“校园网站”，如图所示。3．单击菜单栏上按纽，选“新建”空白页

HTML，然后单击按钮，创建新网页。建立网页布局4．设置首页，利用网页布局表格和布局单元格，表格居中，如图所示。插入图像输入文字的网站5．在网页的单元格中分别插入图象，在相应的单元格中输入文字，如：“网站首页

|学校概况

|校园文化

|专业设置

|

德育之窗

|

教学之窗

|招生咨询

|就业管理”，如下图所示。6．建立CSS样式文件1）选择

CSS样式新建，进入新建CSS规则对话框，设置属性：选择器类型：单选“”；“名称”：输入“LX1”；“定义在”单选，单击按钮，如图所示。2）在LX1的CSS规则定义中，在类型属性中设置字体、大小、行高、颜色等选项，单击按钮，如图所示。在HEML文档中