Dreamweaver静态网页设计方案实验一 .docx

《Dreamweaver静态网页设计方案实验一 .docx》由会员分享，可在线阅读，更多相关《Dreamweaver静态网页设计方案实验一 .docx（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精品名师归纳总结试验一 Dreamweaver 基本操作一、试验目的文本是网页的基本组成部分，Dreamweaver 供应了多种向网页中添加文本和设置文本格式的方法。通过本试验学习如何建立与制作出编排有序、整齐美观的网页格式文本。二、试验步骤1. 文本输入操作步骤：新建或打开网页，将插入点定位到要插入文本的位置。直接输入文本。注意：假如要在文本中输入空格，接受以下方法之一：按Ctrl+Shift+Space 键。将中文输入法切换到全角模式，按空格键。留意观看文本插入时，代码栏的变化。网页的主题放在标签的哪个部分。2. 建立段落或换行在输入文字时，如一行长度超过屏幕的显示范畴，自动换行,不须另外

2、使用其他按键换行。如要将文本做段落排列，方法如下：建立段落：按下Enter键，插入一个段落标记，两行之间有段间矩。强制换行：按 Shift+Enter 键，插入一个换行符 ，两行之间无段间矩。3. 从其他应用程序中复制文本从其他应用程序或窗口复制文本后粘贴到网页中，执行以下操作步骤： 在其他应用程序中选择并复制文本切换到 Dreamweaver 的“设计 ”视图中，将插入点定位在网页中要插入文本的位置选择 “编辑 ”“选择性粘贴 ”，显现 “选择性粘贴 ”对话框4. 选择所需要的粘贴设置选项仅文本。原文本中的全部格式、表格、段落等将被删除，仅粘贴纯文本。带结构的文本（段落、列表和表格等）：粘贴

3、文本并保留基本格式设置（例如段落、列表和表格）可编辑资料 - - - 欢迎下载精品名师归纳总结带结构的文本以及基本格式（粗体、斜体）：粘贴带段落和表格结构以及带简洁格式（例如加粗、倾斜、下划线等）的文本）带结构的文本以及全部格式：粘贴文本并保留全部结构、HTML格式设置和 CSS样式。可以通过设置 “粘贴首选参数 ”，将需要的粘贴选项设置为默认选项。此后再从其它应用程序中复制文本时，可以直接选择菜单“编辑 ”“粘贴 ”5. 将 word 或 Excel 文档导入网页打开要插入 Word 或 Excel 文档的网页确保您处于 “设计 ”视图中。假如不是，单击“设计 ”视图按钮。在 Dreamwe

4、aver 的“设计 ”视图中，将插入点定位在网页中要插入文本的位置选择菜单 “文件 ”“导入 ”“ Wo文rd档 ”或“文件 ”“导入 ”“ Exc文el档 ”，显现 “导入文档 ”对话框在“导入文档 ”对话框中，浏览并选择要导入的文件在对话框底部的 “格式化 ”框中选择要导入的格式点击 “打开 ”按钮，导入的 Word 或 Excel 文档插入到页面中。6. 格式化文本格式化文本的基本方法：选择要设置格式的文本，通过属性面板上进行设置。（注： 假如“属性”面板未打开，选择菜单“窗口”“属性”，打开属性面板）。可编辑资料 - - - 欢迎下载精品名师归纳总结1）设置字体选取要设置字体的文本，假

5、如没有文本被选取，这种转变会应用到以后输入的文本上。点击 “字体框 ”打开字体下拉菜单，点击选取所需的字体。假如字体菜单中没有所需的字体可以添加字体。操作步骤如下：点击 “字体框 ”打开字体下拉菜单，点击“编辑字体列表 ”按钮，显示 “编辑字体列表框”。从“可用字体 ”列表中选择一种字体，然后单击 按钮将该字体移动到 “选择的字体 ”列表中。在使用系统基本字体以外的字体时再从“可用字体 ”列表中选择一种后备字体，单击 按钮将该字体移动到 “选择的字体 ”列表中。点击 “确定 ”按钮。代码类型： font-family2 设置文字大小设置文字大小，执行以下操作步骤：选取文本。点击“大小 ”框右边

6、的下拉箭头，打开下拉菜单。选取所需的字体大小，也可以“大小 ”框中输入一个数值。从“大小 ”框右边的单位子菜单中选择一种字体单位。代码类型： font-size3）设置文本颜色可编辑资料 - - - 欢迎下载精品名师归纳总结设置文本颜色，执行以下步骤：选取文本。点击属性面板上的“文本颜色 ”框，从浏览器安全色色板上选择一种颜色。如要将文本复原为默认色，执行以下步骤：在属性面板中点击 “文本颜色 ”框，打开浏览器安全色色板。点击“默认色 ”按钮。代码类型： color4）设置文本加粗或倾斜设置文本加粗或倾斜，执行以下操作步骤：选取文本，点击属性面板上的“粗体按钮或 “倾斜”按钮。取消已设置的文本

7、加粗或倾斜，执行以下操作步骤：选取文本，点击属性面板上的 “粗体”按钮或 “倾斜”按钮，使按钮弹起。代码类型 content5）对齐文本设置文本对齐方式，执行以下操作步骤：选择想要进行对齐的文本或是把光标置于文本的开头处。点击属性面板上的一个对齐选项（左对齐、居中对齐、右对齐或两端对齐）。代码类型 align=center/left/right/justify6）缩进文本和取消缩进设置段落两侧缩进或削减缩进，执行以下操作步骤：将插入点放在要缩进的段落中。单击属性检查器中的 “缩进”按钮，段落两侧缩进。单击属性检查器中的“凸出”按”钮。段落两侧削减缩进。代码类型： content 7）设置工程编

8、号列表可编辑资料 - - - 欢迎下载精品名师归纳总结创建新列表，执行以下操作步骤：将插入点放在要添加列表的位置。单击属性检查器中的 “工程列表”或“编号列表”按钮。键入列表项文本，然后按Enter 键创建其它列表项。如要完成列表，按两次Enter 键。使用现有文本创建列表，执行以下操作步骤：选择一系列段落组成一个列表。单击属性面板中的 “工程列表”或“编号列表”按钮。取消列表，执行以下操作步骤：选择已建立列表的段落或将插入点置于已建立列表的段落中。单击属性面板中的“工程列表”或“编号列表”按钮，使按钮弹起。代码类型 content content练习：创建7. 使用 CSS样式快速设置文本格

9、式CSS 样式是用来把握网页外观的一组格式，是制作网页经经常使用的工具。利用css 样式可以统确定制网页文字格式等多种网页元素。并能够快速的将样式应用于多个网页上。1） 设置页面属性页面属性用于设置网页默认字体与字号、页面背景图像或颜色、页面默认的链接颜色以及页面与网页元素之间的边距等。设置页面属性执行以下操作步骤：选择菜单“修改 ”“页面属性 ”或者在文本属性面板中点击 “页面属性 ”按钮，打开设置页面属性外观窗口。在“分类 ”框中选择 “外观 ”选项卡后，进行设置：设置当前网页的默认字体，打开“页面字体 ”菜单进行选择。设置当前网页的默认字体大小，打开“大小 ”菜单进行选择。从“大小 ”可

10、编辑资料 - - - 欢迎下载精品名师归纳总结框右边的单位子菜单中选择一种字体单位。设置当前网页的默认文本颜色，打开“文本颜色”框的箭头 ,打开色板进行选择。设置网页背景颜色，点击背景颜色按钮，打开色板选择网页背景颜色。设置页面与网页内容之间的边距，选取边距框，输入要设置的边距值。2） 修改页面属性对已设置的页面属性进行修改，执行以下操作步骤：选取修改菜单下的页面属性命令。打开页面属性对话框修改设置（例如：点击背景颜色按钮 点击默认颜色按钮 取消网页颜色）。修改完毕后，点击确定按钮。3） 页面属性的 CSS样式设置假如要对页面属性进行行距、缩进、对齐等更为复杂的格式设置，需要使用CSS 样式设

11、置。对页面属性进行CSS 样式设置，执行以下操作步骤：选择菜单“窗口 ”“ CS样S式”，打开 CSS 样式面板。点击打开 “全部 ”选项卡。在样式表中选择“body”。点击 CSS 样式面板右下角的 “编辑样式 ”按钮，打开 CSS 样式面板进行设置。设置行高（行与行之间距离）方法：在样式对话框中的选择“类型 ”面板。在 “行高 ”栏中输入需要的行高数值（例如： 150。 在单位框中选取一个计量单位（例如：选择%）（注：设置字体、大小、粗细、字体颜色等，选择指定栏后进行设置）。设置文字缩进（段落的首行缩进值）方法：在样式对话框中的点击选择“区块 ”面板。在 “文字缩进 ” 栏中输入需要的文字

12、缩进值。在单位框中选取一个计量单位（例如：在段落首行缩进两个汉字：在文字缩进值框中输入2。在单位框中选择 “字体高 ”）可编辑资料 - - - 欢迎下载精品名师归纳总结设置完毕后，点击确定按钮。所设置的网页默认格式应用到当前网页。4） 设置标题字体通过页面属性面板可以设置网页中各级标题的字体、字号、颜色等样式。设置页面各级标题样式，执行以下操作步骤：选取修改菜单下的页面属性选项，打开页面属性对话 框。在分类框中选取标题。设置标题字体：标题字体默认与页面字体相同。假如要修改标题的字体，点击标题字体框，选取需要的字体。设置各级标题：分别选取标题文本框设置字体大小、字体大小单位、字体颜色。（假如其中

13、某项不进行设置，就使用页面默认字体属性）。点击确定按钮。可编辑资料 - - - 欢迎下载精品名师归纳总结应用页面标题样式，执行以下操作步骤：选取要应用标题的文本。选取属性面板的格式框。选取要应用的标题样式，例如选取style1 （假如要取消应用的标题格式。选取已应用格式的文本 选取属性面板格式框中的“无 ”选项）8. 导出与附加样式表假如需要在其它文档中应用已建立的样式，可以从文档中导出样式以创建CSS样式表。然后可链接到其他文档以应用这些样式。1） 导出 CSS样式从网页中导出已建立的样式并创建CSS 样式表，执行以下操作步骤：选择菜单“文件”“导出”“ CSS 样式”，显现“导出样式为CS

14、S 文件”对话框。输入样式表的名称，然后单击“储存”。样式立刻储存为CSS 样式表，扩展名为.css 。2） 附加 CSS样式表在编辑网页时可以给文档附加或链接一个CSS 样式表来应用样式。当对 CSS 样式表进行编辑后，全部使用该CSS样式表链接的文档都会依据修改进行更新。附加 CSS样式表，执行以下操作步骤：选择窗口CSS样式打开 CSS样式面板。在 CSS 样式面板上，右击窗口从弹出的菜单中选择“附加样式表”。也可以点击CSS 样式面板底部的附加样式表图标。输入文件名或通过浏览查找需要附加的样式表文件。点击确定按钮。9. 代码定义可编辑资料 - - - 欢迎下载精品名师归纳总结将样式表加入网页有三种方式：最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但掩盖重叠的定义。1) 定义内部样式块对象，在HTML文档的 和 标记之间插入一个.块对象。示例如下：style文档标题type=text/css2） 内联定义，即是在对象的标记内使用对象的style 属性定义适用其的样式表属性。示例如下： 这一行被增加了左右的外补丁3） 链入外部样式表文件，先建立外部样式表文件（.css），然后使用 HTML的 link 对象。示例如下：文档标题 可编辑资料 - - - 欢迎下载