网页设计与制作课件第3章.pptx

1、案例一目录页 CONTENTS PAGE 项目三 创建简单图文网页案例二为企业网站新闻显示网页设置文本内容设置网页文本案例三为企业网站新闻显示网页设置图像设置网页图像3 项目三 创建简单图文网页案例说明本案例首先介绍文档头信息和页面属性的设置方法，然后通过为企业网站新闻显示网页设置头信息和页面属性，来进一步加强和巩固网页基本信息的设置方法。4 项目三 创建简单图文网页相关知识相关知识文档头信息包括网页关键字、网页说明等。网页关键字对搜索引擎来说起着不容忽视的作用。用户使用Google、Baidu、Yahoo等搜索引擎搜索网页时，搜索引擎是通过网页关键字找到网页的。一、设置文档头信息说明文本是对

2、网页的简要介绍，除关键字外，搜索引擎在检索网页时还会查看网页的说明文本。将本书附赠素材“素材与实例ch03”目录下的“text”文件夹拷贝至第2章创建的站点“test”根目录下。步骤 01在Dreamweaver中打开“text”文件夹中的“index-1x.html”文档，单击“文档工具栏”中的“拆分”按钮，使文档窗口左侧显示HTML代码，如图所示。步骤 025 项目三 创建简单图文网页提示如果“文件”面板中没有出现刚刚拷贝的文件夹，可单击“刷新”按钮刷新站点，如右图所示。将插入点置于代码界面中标签的后面，在菜单栏中选择“插入”“HTML”“Keywords”，弹出“Keywords”对话框

3、，在“关键字”编辑框中输入要为网页设置的关键字，各个关键字之间用逗号或空格隔开，单击“确定”按钮，即在网页中插入关键字，如下图所示。步骤 036 项目三 创建简单图文网页三、网页的本质将插入点置于代码界面中刚插入的关键字标签后面，在菜单栏中选择“插入”“Head”“说明”，弹出“说明”对话框，在“说明”编辑框中输入要为网页设置的说明信息，单击“确定”按钮，即在网页中插入说明信息，如下图所示。步骤 047 项目三 创建简单图文网页二、设置网页页面属性一般在创建一个新网页后，首先要对网页进行页面属性设置，主要是对“标题/编码”的设置。继续在前面的文档“index_1x.html”中操作，在文档窗口

4、设计界面中任意位置单击鼠标右键，在弹出的快捷菜单中选择“页面属性”，将弹出“页面属性”对话框，对话框左侧的“分类”列表中显示可以设置的类别，右侧显示相应的设置项，默认显示“外观（CSS）”设置项，如图所示。步骤 018 项目三 创建简单图文网页三、网页的本质在左侧的“分类”列表中选择“标题/编码”，然后在“标题”编辑框中输入网页标题“海的女儿”，“编码”类型保持默认，如下图所示。步骤 029 项目三 创建简单图文网页三、网页的本质“跟踪图像”是Dreamweaver一个非常有效的功能，它允许用户在网页中将原来的平面设计稿作为辅助背景。这样，用户就可以非常方便地定位文字、图像、表格等网页元素在页

5、面中的位置。在“跟踪图像”选项中，“跟踪图像”编辑框用于设置跟踪图像的路径和名称。在实际生成网页时，跟踪图像并不显示在网页中。在“透明度”标尺上可以通过拖动滑块改变设计图（跟踪图像）的透明度，如下图所示。10 项目三 创建简单图文网页案例实施案例实施将本书附赠素材“素材与实例ch03ydjt”目录下的所有文件拷贝至项目二中创建好的网站“ydjt”根目录下，将两个“images”文件夹合并。一、网页、网站和主页步骤 01启动Dreamweaver CC，在“文件”面板中打开“ydjt”站点，双击其中的“xinwen_1x.html”文档，将其打开，如右图所示。步骤 0211 项目三 创建简单图文

6、网页案例实施案例实施参照相关知识第一节中的操作，将插入点置于代码界面标签的后面，打开“关键字”对话框，在“关键字”编辑框中输入要为该网页设置的关键字，如左图所示。一、网页、网站和主页步骤 03单击“确定”按钮即在网页中插入关键字，按照同样的方法插入说明文本，最终效果如右图所示。步骤 0412 项目三 创建简单图文网页案例实施案例实施在设计界面空白处单击鼠标右键，在弹出的快捷菜单中选择“页面属性”，打开“页面属性”对话框，单击左侧“分类”列表中的“标题/编码”选项，然后在“标题”文本框中输入网页标题“忆达新闻”，并单击“确定”按钮完成设置，如下图所示。一、网页、网站和主页步骤 05保存文档，并在

7、浏览器中预览，可看到浏览器标题栏中的标题为刚刚设置的信息，如下图所示。步骤 06案例一目录页 CONTENTS PAGE 项目三 创建简单图文网页案例二案例三为企业网站新闻显示网页设置图像设置网页图像14 项目三 创建简单图文网页案例说明文本是网页中最基本的元素，它以平淡、直白的方式将信息传达给浏览者，通常内容丰富的网页都有大量的文本。在Dreamweaver中可以直接输入文本，也可以从其他文档中复制文本，还可以插入水平线和特殊字符等。本案例主要介绍在网页中输入各种文本的相关知识。15 项目三 创建简单图文网页相关知识相关知识使用Dreamweaver CC向网页文档中添加文本的方法有多种，可

8、以直接在“设计”界面中输入文本，也可以通过复制、粘贴的方法添加文本。一、添加普通文本在Dreamweaver中输入文本的方法非常简单，只要将插入点定位在网页的某个位置（如某个表格单元格内），然后选择输入法输入文本就可以了。对于大量的外部文本，可利用剪贴板将其拷贝至网页文档中。16 项目三 创建简单图文网页三、网页的本质启动Dreamweaver CC，在“文件”面板“站点”下拉列表中选择“test”，分别双击“text”文件夹中的“index_2x.html”和“text1.txt”文档将它们打开，如下图所示。步骤 0117 项目三 创建简单图文网页三、网页的本质在“text1.txt”文档窗

9、口中单击，按【Ctrl+A】组合键全选文本，然后按【CtrlC】组合键复制选中的文本，如下图所示。步骤 02切换至网页文档“index_2x.html”，将插入点置于文档窗口中的方框内，按【Ctrl+V】组合键粘贴文本，如下图所示。步骤 0318 项目三 创建简单图文网页二、插入特殊符号网页文本中除包含汉字和字母外，往往还包含一些特殊符号，如注册商标符号、版权符号等。这些特殊符号一般不能从键盘直接输入。在Dreamweaver CC中，可单击“插入”面板“常用”类别中的“字符”按钮 ，然后在其下拉列表中选择相应字符进行插入，如下图所示。19 项目三 创建简单图文网页三、网页的本质如果在“字符”

10、下拉列表中没有找到需要的字符，可以通过选择该列表中最下方的“其他字符”命令，打开“插入其他字符”对话框，这样就能获取更多的特殊字符了，如下图所示。在该对话框中选中要插入的字符后，单击“确定”按钮即可插入。20 项目三 创建简单图文网页三、添加空格由于在HTML格式的文档中只允许有一个空格，所以在Dreamweaver中添加空格的方法与Word等文字编辑软件中不一样。若需要添加多个空格，可通过以下方法实现。（1）将输入法切换到全角状态，直接按空格键；如需添加多个空格，重复此操作。（2）在菜单栏中选择“插入/HTML/不换行空格”菜单，可添加一个空格；如需添加多个空格，重复此操作。（3）在文档窗口

11、“代码”界面中，直接在源代码中加入代表空格的HTML代码“ ”。21 项目三 创建简单图文网页四、添加与设置水平线水平线是网页中常见的一种元素。在网页排版中，水平线的作用是分隔文本和对象，使段落区分更清楚、明了。水平线的添加方法是：首先将插入点定位在目标位置，然后选择菜单栏中的“插入/HTML/水平线”菜单命令，效果如下图所示。22 项目三 创建简单图文网页三、网页的本质三、网页的本质知识库如要改变水平线颜色，可在选中水平线后切换至代码视图，在水平线标签中输入“color=颜色代码”，如下图所示。一般无法直接在编辑画面看到水平线的颜色设置效果，只有在浏览器中预览时才能看到。23 项目

12、三 创建简单图文网页五、创建列表列表是指将具有相似特性或某种顺序的文本进行有规则地排列，常用于条款或列举类型的文本中，是一种简单且实用的段落排列方式。在文档窗口中，可以用现有文本或新文本创建无序列表和有序列表，这是最常使用的两种列表。项目列表文字前面一般用项目符号作为前导字符，效果如右图所示。1项目列表将插入点置于需要创建项目列表的位置。在“插入”面板“HTML”类别中单击“项目列表”按钮，项目符号将出现在鼠标光标前，如右图所示。步骤 01在项目符号前导符后面输入相应的文本内容，按【Enter】键分段后，下一个项目前导符会自动出现。步骤 02继续输入其他列表项文本内容，完成整个项目列表的文字输

13、入后，按两次【Enter】键即可停止列表输入。步骤 0324 项目三 创建简单图文网页三、网页的本质编号列表前通常有数字或字母作前导字符。这些字符可以是阿拉伯数字、英文字母或罗马数字等，效果如右图所示。2编号列表25 项目三 创建简单图文网页案例实施案例实施一、网页、网站和主页启动Dreamweaver CC，在“文件”面板中打开“ydjt”站点，分别双击其中的“xinwen_2x.html”和“text.txt”文档，将它们打开，如下图所示。步骤 0126 项目三 创建简单图文网页案例实施案例实施将插入点置于“text.txt”文档窗口中，按【Ctrl+A】组合键选中所有文本，再按【Ctrl

14、+C】组合键复制所选文本。一、网页、网站和主页步骤 02单击“文档标签栏”中的“xinwen_2x.html”，切换到该文档，将插入点置于id=“content”的Div中，按【Ctrl+V】组合键粘贴文本，如下图所示。步骤 0327 项目三 创建简单图文网页案例实施案例实施一、网页、网站和主页知识库在定位插入点时，可以打开“拆分”视图，对照代码进行操作，以免出错。根据需要，按照前面介绍的方法为文本分段。步骤 04将插入点置于文本标题“董事局主席尚利永光荣当选中国光彩事业促进会副会长”后面，选择“插入”“HTML”“水平线”菜单，在标题下方插入水平线，如下图所示。步骤 05按【Ctrl+S】组

15、合键保存网页，此时便完成了网页中文本内容的设置。步骤 0628 项目三 创建简单图文网页拓展知识拓展知识大部分网页中的列表均采用项目列表，在HTML中使用标签对定义，包含的列表项使用标签对定义，如下表所示。列表项的默认符号为小圆点，要改变符号类型或去除符号，可使用CSS属性进行控制。列表在HTML中的表示1项目列表代 码效 果咖啡牛奶奶茶29 项目三 创建简单图文网页三、网页的本质编号列表在列表项前用编号表示，浏览者可以清晰地了解每项的顺序。其中标签对用来定义编号列表，包含的列表项用标签对定义，默认序号为1、2、3，如右表所示。2编号列表除上述两种列表外，还有一种定义列表，是项目及其注释的组合

16、。其中标签对表示定义列表；标签对表示每个定义的名称（项目名）；标签对表示每个定义名称的详细内容（注释），如右表所示。3定义列表代 码效 果咖啡牛奶奶茶代 码效 果咖啡黑色的热饮牛奶白色的冷饮案例一目录页 CONTENTS PAGE 项目三 创建简单图文网页案例二案例三31 项目三 创建简单图文网页案例说明添加了图像的网页往往更为生动和吸引人，本案例通过为企业网站新闻显示网页设置图像，来学习在网页中插入图像的方法。根据实现方式的不同，网页中的图像可分为两大类，一类是插入图像，它是用HTML代码实现的；另一类是背景图像，一般是通过设置CSS样式实现的。本案例主要讲解插入图像的方法。32 项目三 创

17、建简单图文网页相关知识相关知识在网页中插入图像时，最好能保证网页和要插入的图像均位于当前站点中（图像一般位于img文件夹或images文件夹中），否则很容易出现网页发布后看不到图像的情况。一、插入与编辑图像启动Dreamweaver CC，在“文件”面板中打开站点“test”，并双击“text”文件夹中的“index_3x.html”文档将其打开。步骤 01将插入点置于水平线右侧，单击“插入”面板“HTML”类别中的“Image”按钮，如右图所示。步骤 0233 项目三 创建简单图文网页打开“选择图像源文件”对话框，在上方的下拉列表中选择图像所在文件夹，在文件列表中选择要插入的图像文件，然后单

18、击“确定”按钮，插入图像，如下图所示。步骤 0334 项目三 创建简单图文网页右键单击插入的图像，在弹出的快捷菜单中选择“属性”，可打开“属性”面板，在其中可对图像的各项属性进行修改设置，如下图所示。步骤 04如果所选图像文件不在当前站点中，Dreamweaver CC会自动将其复制到站点根目录下的图像文件夹中。35 项目三 创建简单图文网页下面简单介绍一下图像“属性”面板中各设置项的意义。u Src：指定图像的源文件地址。u 类：可对图像应用类样式。u 宽和高：设置图像在页面中的宽度和高度。u 替换：为图像输入一个名称或一段简短的描述，在浏览网页时，当鼠标移动到图像上时，即可显示该信息。u

19、链接：指定图像的超链接。u 目标：单击其后的下拉按钮，在弹出的下拉列表中可选择链接目标的打开方式。u 编辑：可对图像进行编辑，包括从源文件更新、裁切、重新取样、亮度和对比度以及锐化图像等操作。u 地图：通过热点工具，在图像上绘制热区，并设置其名称、链接地址等。其中，热点工具可分为指针热点工具、矩形热点工具、椭圆形热点工具和多边形热点工具。36 项目三 创建简单图文网页启动Dreamweaver CC，在“文件”面板中打开“test”站点，然后在“swapimg”文件夹中新建文档“main_1x.html”，并双击在文档编辑窗口中打开。二、插入鼠标经过图像在Dreamweaver中可以轻松实现图

20、像翻转效果，也就是我们通常所说的鼠标经过图像，当鼠标指针经过一幅图像时，它会显示为另一幅图像。鼠标经过图像实际上是由两幅图像组成的，即初始图像（页面首次装载时显示的图像）和替换图像（当鼠标指针经过时显示的图像）。将“swapimg”文件夹拷贝至“test”站点根目录中。步骤 01步骤 02在文档窗口中单击，确定图像插入位置，然后单击“插入”面板“HTML”类别中的“鼠标经过图像”按钮。步骤 0337 项目三 创建简单图文网页打开“插入鼠标经过图像”对话框，单击“原始图像”编辑框右侧的“浏览”按钮，如下图所示。步骤 04打开“原始图像：”对话框，选择要插入的图像，单击“确定”按钮，如下图所示。步

21、骤 0538 项目三 创建简单图文网页回到“插入鼠标经过图像”对话框，按照同样的方法设置“鼠标经过图像”，并在“替换文本”编辑框中输入文字解说内容，在“按下时，前往的URL”编辑框中设置链接地址，此处输入“#”设置空链接，最后单击“确定”按钮，插入鼠标经过图像，如图所示。步骤 0639 项目三 创建简单图文网页保存文档，并在浏览器中预览，效果如下图所示。步骤 0740 项目三 创建简单图文网页案例实施案例实施一、网页、网站和主页启动Dreamweaver CC，在“文件”面板中打开“ydjt”站点，双击其中的“xinwen_3x.html”文档，将其打开。步骤 01将插入点置于id=“cont

22、ent”的Div中文本的后面，单击“插入”面板“HTML”类别中的“Image”按钮，如下图所示。步骤 0241 项目三 创建简单图文网页案例实施案例实施一、网页、网站和主页在打开的“选择图像源文件”对话框中选择要插入的图像，然后单击“确定”按钮，如下图所示。步骤 0342 项目三 创建简单图文网页案例实施案例实施一、网页、网站和主页插入图像，并保存文档，效果如下图所示。步骤 0443 项目三 创建简单图文网页拓展知识拓展知识目前在网页中可以使用的图像格式有JPEG、GIF和PNG。一、网页中可用的图像格式u JPEG（联合图像专家组标准）格式适于表现色彩丰富，具有连续色调的图像，如各种照片。u GIF（图形交换格式）格式最多只能包含256种颜色，因而适合表现色调不连续或具有大面积单一颜色的图像，如卡通画、按钮、图标、徽标等。u PNG（便携网络图像）格式集JPEG和GIF格式的优点于一身，图像质量高且可包含透明区。44 项目三 创建简单图文网页二、图像在HTML中的表示图像的HTML标签代码如下：上述代码表示插入一个images文件夹下名为1.jpg的图像，并将图像的宽和高分别设为400和300像素，alt表示替换文本，此处为空。