网页设计与制作教学课件3

《网页设计与制作教学课件3》由会员分享，可在线阅读，更多相关《网页设计与制作教学课件3（61页珍藏版）》请在金锄头文库上搜索。

1、网页设计与制作教学课件,网页设计与制作课程组开发,网页制作与网站设计教程,1 任务1 景点介绍页面设计 2 任务2 景点banner设计 3 任务3 旅游热点页面设计 4 任务4 热点线路的详细信息 5 任务5使用多媒体对象丰富页面 6 思考与练习,第3章 网页基本元素,页面元素说明,3.1 任务1 景点介绍页面设计,文本是网页中最基本的元素，是网页发布信息所用的主要形式，以文本为主要内容制作出的网页占用空间小，网页加载的速度快，可以很快的展现在用户面前。没有编排点缀的纯文本网页，不易激发用户浏览的兴趣。所以，网页中的文本需要进行编辑，包括字体、字型、字号、颜色、内容的层次样式和段落格式等。本

2、节以 “本溪关门山森林公园”景点介绍网页为设计目标，实现对文本内容操作。,目的：熟练掌握网页文本的输入方法，特别是空格、插入水平线、日期和特殊符号的输入方法， 掌握对文本进行编辑的方法和技巧， 理解掌握利用HTML标签设置文本格式的方法。,要点：1文本设置的内容主要包括字体、字号、颜色、间距、段落格式和项目列表等，可以通过属性面板或者HTML标签方式进行设置。 2文本是网页发布信息所用的主要形式，合适的文本格式，既能保证网页的主题，又能吸引用户注意力。,3.1.1 文本的输入,3.1 任务1 景点介绍页面设计,步骤1 新建网页文件：打开Dreamweaver CS5，进入站点LiaoNing

3、Travel，在Info目录内新建网页文件并命名为BxGmsInfo.html。 步骤2 文本的输入：在 Dreamweaver CS5的“文档窗口”中添加文字,共有下面三种方法： （1）直接输入：先选择要输入文本的位置，然后直接在Dreamweaver“文档窗口”的“设计”视图中输入文本 （2）“复制”与“粘贴”：复制需要输入的文字内容，在Dreamweaver 的“设计”视图中，选择输入的位置，进行粘贴操作。 （3）从Word文档中导入文本：将收集的网页文本内容形成Word文档后，选择菜单栏中的“文件” “导入” “Word文档”命令，在弹出菜单中选择需要的文件，Dreamweaver 会

4、直接将Word文件内容显示在网页中。 注意，如果使用后两种方法，输入的文字会附带源文本的格式。,3.1.1 文本的输入,3.1 任务1 景点介绍页面设计,步骤3 控制换行和段落：浏览器在解释HTML文档的时候，会自动忽略源文件中的回车、空格以及其他一些符号，所以在“代码”视图中输入Enter键，并不意味着在浏览器内将看到不同的段落，在网页中的换段或换行需要使用不同的标签。,（1）段落标记在“文档窗口” 中输入Enter键，则创建一个新的段落，在代码区会生成标签，新段落的内容显示在之间。标签称为段落标记，或者强制换段标记符。标志语法是： 对齐方式有四种：left （左对齐）、center（居中）

5、、right（右对齐）和justify (两端对齐)。,例如：本溪关门山森林公园，表示标志对中间的文本“本溪关门山森林公园”使用居中对齐方式。,3.1.1 文本的输入,3.1 任务1 景点介绍页面设计,（2）强制换行标记符 如果只是简单的换行，可以采用下面的方法：按ShiftEnter键。 选择菜单栏中的“插入” “HTML”“特殊字符”“换行符”。 在“插入”面板的“文本”类别中，选择“字符”“换行符”按钮。与强制换段标记符效果相比，换行的行间距较小。换行之后，代码区生成标签。是一个单标签，放在行末，可以使后续的文字、图像、表格等换行显示，而又不会在行与行之间留下空行，即强制文本换行。,例如

6、：本溪关门山森林公园所在地:本溪 地址：辽宁省本溪市本溪县关门山森林公园 ,3.1.1 文本的输入,3.1 任务1 景点介绍页面设计,步骤4 水平线的插入：在“设计”视图中，水平线的作用是对网页内容进行组织和分隔，在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。 将光标定位在要插入水平线的位置，执行下列操作之一： 选择菜单栏中“插入”“HTML”“水平线”命令。 选择“插入”面板的“常用”“水平线”按钮,如果需要对水平线的进行设计修改，共有以下3种方法： （1）标志法水平线的标志为，有size、color、width 和noshade属性，其中：“size”属性是设置水平的高度；“

7、width”属性是设置水平线的宽度，默认单位为像素；“noshade”属性是设置水平线没有阴影的效果。,例如：设置一条水平线：居中对齐，宽度为300px，高度为2px，颜色为红色，有阴影，代码如下： ,3.1.1 文本的输入,3.1 任务1 景点介绍页面设计,（2）属性面板：选定插入的水平线，打开属性面板，设置水平线的高度、宽度、对齐方式及是否有阴影等属性。 【宽】、【高】：水平线的宽度和高度，可以使用像素或以百分比为单位。 【对齐】：水平线的对齐方式 【阴影】：绘制水平线时是否带阴影，取消该选项将使用纯色绘制水平线。 【类】：可用于附加层叠样式表，或者应用已附加的层叠样式表中的类。,（3）快

8、速标签编辑器：选中水平线，然后单击属性面板中的快速标签编辑器按钮，打开编辑标签窗口，输入代码，进行设置,3.1.1 文本的输入,3.1 任务1 景点介绍页面设计,步骤5 输入连续的空格：输入景点介绍的具体内容时，段首需要空2个中文字符，但HTML 默认只允许字符之间有一个空格；若要在文档中添加其它空格，必须插入不换行空格，或者设置一个在文档中自动添加不换行空格的首选参数。,（1）插入不换行空格将光标定位到需要输入多个空格的位置，执行下列操作之一： 选择菜单栏“插入”HTML“特殊字符”“不换行空格”命令。 在“插入”面板的“文本”类别中，选择“字符”“不换行空格”按钮。 将光标定位到需要输入多

9、个空格的位置，切换到“代码”视图，在HTML代码中连续输入多个“”。 （2）编辑首选参数法选择菜单栏中的“编辑” “首选参数”，在弹出的对话框中，选择左侧分类列表中的“常规”选项，在右边勾选“允许多个连续的空格”选项。,3.1.1 文本的输入,3.1 任务1 景点介绍页面设计,步骤6 插入日期：在“文档”窗口“设计”视图中，定位光标在要插入日期的位置，执行下列操作之一，将打开“插入日期”对话框，选择所需要的日期格式 选择菜单栏中“插入” “日期”命令。 选择“插入”面板“常用”类别中的“日期”按钮。,“储存时自动更新”选项是指在每次保存文档时都会更新插入的日期。取消勾选该选项，日期在插入后变成

10、纯文本并不自动更新。,3.1.2 编辑文本,3.1 任务1 景点介绍页面设计,步骤1 设置标题格式：选中“本溪关门山森林公园”，在属性面板中进行格式设置。,对网页中的文本可以进行编辑，常用的编辑方式包括设置标题、文字大小、字体、颜色、对齐方式、段落和列表等。,【格式】：设置所选文本的段落样式。包括段落、标题和预定义格式。 【ID】：为所选内容设置区别与其他对象的唯一标识。 【类】：显示当前应用于文本的类样式 【B】、【I】：将所选文本加粗或倾斜。 【 】、【 】：为光标所在的段落添加无序或有序项目列表。 【 】、【 】：使光标所在的段落向右或向左缩进。 【链接】：为所选的文本建立超链接。 【标

11、题】：设置超链接的文本提示。 【目标】：选择链接文档在窗口中的打开方式，可选择的方式有以下四种：“_blank”选项，“_parent”选项，“_self”选项，“_top”选项。,3.1.2 编辑文本,3.1 任务1 景点介绍页面设计,步骤2 设置文字大小、字体和颜色：选中需要设置的文本，例如：“所在地：本溪”，切换到“拆分”视图，此时“代码”视图中代码位置与“设计”视图可视化效果一致,文本格式标签提供多种属性，可以对页面文本的字体、大小、颜色进行设置，“color”属性是设置文本的颜色，可以使用6位十六进制数来表示，也可以在系统颜色面板中选择，也可以是HTML语言给定的颜色常量名；“fac

12、e”属性用来设置字体；“size”属性用来改变字体的大小。,步骤3 设置文本对齐方式：将日期设为“右对齐”，选中插入的日期，在相应的 “代码”视图中会看到相应的脚本程序，在其外部仿照下面格式设置对齐方式。,2011-4-27 标签可以定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分，其中的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。“align”是div标签的一个属性，其值可选left 、right、center和justify，即左对齐、右对齐、居中对齐和两端对齐。,3.1.2 编辑文本,3.1 任务1 景点介绍页面设计,步骤4 无

13、序列表的生成：在“设计”视图选中从“山美：”到“扑朔迷离。”的全部文本，在底部的属性面板中，单击无序列表标签 。,例如：山美：山峰奇峭，拔地而起，峰顶松姿绰约，怪石林立，宛若天造地设一般，似一簇簇巨型盆景；树美：树木种类繁多、千枝竞秀，尤以秋日的枫叶，冬季植根于峭壁上的苍松闻名，壮观非常；水美：汤河穿谷而过，汇集小溪，飞瀑，“夺门“而出，似来自于天际；花美：天女木兰，山杜鹃，漫山遍野，芬芳宜人，其天女木兰为本溪市市花；云美：清晨雨后，山谷中云雾缭绕，如披轻纱，分外妖娆，近处轻雾缭绕，扑朔迷离。 ,3.1.2 编辑文本,3.1 任务1 景点介绍页面设计,无序列表的格式为： 其中： 标志对说明了列

14、表的范围， 说明了列表中的每一项， type属性可以为： disc（实心圆点）、circle（空心圆点）、square（方块）和自定义图像，通常采用默认值：实心圆点。,3.1.2 编辑文本,3.1 任务1 景点介绍页面设计,有序列表的格式为： 其中：标志对用来创建一个有序列表，界定了列表的范围； 中间的每一个列表项仍使用 标志对有序列表对应代码； type属性选项较多，选项如下： 数字：序号按数字序号编排，如1，2，设置形式type=1，是系统默认的方式。 大写英文字母：序号按大写英文字母编排，如A，设置形式type=A。 小写英文字母：序号按小写英文字母编排，如b，设置形式type=b。 大

15、写罗马字母：序号按大写罗马字母编排，如I，设置形式type=I。 小写罗马字母：序号按小写罗马字母编排，如i，设置形式type=i。,页面元素说明,3.2 任务2 景点banner设计,网页中使用的图像主要有JPEG、GIF和PNG等格式。在网页中使用图像，要考虑图像文件的大小与数量，如果在网页上加入的图像过多，就会影响网页传输的速度。所以访问量比较大的网站一般都不设置背景图像。,目的： 了解图像格式 熟练掌握图像的插入并设置图像属性 掌握图像的HTML标签 掌握创建鼠标经过图像、插入图像占位符的方法。,要点：1图像是网页中的基本元素，在Dreamweaver中对图像的操作主要包括插入图像、设

16、置图像属性、绘制图像热点、对图像进行编辑加工等。除了常规的图像文件之外，还可以插入图像占位符、鼠标经过图像等特殊形式的图像。 2图像的合理运用，可以体现网站的风格和特色。,3.2.1 图像插入,3.2 任务2 景点banner设计,网页中的图像可以体现网站的风格、特色和主题，图文并茂是衡量网站的标准之一。在Dreamweaver中插入图像的基本方法,步骤1 建立网页文件：在根目录内新建网页文件并命名为Index.html 步骤2 插入图像 步骤3 选择图像文件。,【文件名】：图像的文件名。 【文件类型】：筛选图像的类型。 【URL】：图像源的路径。 【相对于】：设置图像文件的URL的相对位置，共有两种设置方式：相对于“文档”或相对于“站点根目录”。,3.2.1 图像插入,3.2 任务2 景点banner设计,步骤4 设置图像辅助功能：选择插入的图像后，单击“确定”按钮，进入“图像标签辅助功能属性”对话框，通常不进行设置。,【替换文本】：该图像未找到时显示的替换文本 【详细说明】：对所用图像文件的位置进行说明。 在选择插入图像时，如果图像的存储位置在站点之外，Dreamweaver会弹出对话框，提示是否将图像文件复制到站点，单击“是”按钮，将该图像文件复制到站点内的图像文件夹images中。,