《（中职）Internet应用第5章教学课件.ppt》由会员分享，可在线阅读，更多相关《（中职）Internet应用第5章教学课件.ppt（42页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Y CF正版可修改PPT（中职）Internet 应用第5 章教学课件第5章网页制作概述 5.1HTML 基础 5.2常用的HTML 标记 5.3结识网页制作工具 5.4网站制作流程5.1HTML 基础 5.1.1 HTML 的基本概念 HTML 称为超文本标记语言。使用HTML 编写的超文本文档称为HTML 文档。任何网页页面都是以HTML 语言为核心和基础的。在一个标准的网站页面上，如果单击浏览器窗口菜单栏中的“查看”菜单，选择“源文件”选项，打开的即是网页页面的源代码，如图5-1 所示。该源代码就是使用HTML语言编写的。5.1.2 HTML 网页的编写方法 1.HTML 网页文件的命名
2、规则(1)允许使用汉字、英文字母、数字和下划线，不能包含空格与特殊符号。(2)名称区分大小写。(3)网站主页文件名一般为index.Htm 或index.Html.下一页 返回5.1HTML 基础 2.使用HTML 编写网页 使用HTML 编写网页的方法有以下几种。(1)手工编写。(2)使用可视化的HTML 编辑软件，这是最方便的编写方法。(3)通过编写程序，由Web 服务器实时、动态地生成网页。这属于动态网页的制作方法。使用HTML 编写网页的操作步骤如下。(1)生成网页页面。打开“开始”菜单，选择“程序”“附件”“记事本”命令，启动Windows 系统中的“记事本”程序。也可以启动Drea
3、mweaver，单击文档工具栏中的“代码视图”按钮，显示“代码视图”窗口。上一页 下一页 返回5.1HTML 基础(2)在打开的记事本中输入图5-2 所示的HTML 源代码。(3)选择“文件”菜单中的“保存”选项，在弹出的“另存为”对话枢中选择存放位置并输入网页文件名。(4)双击打开“网页.htm”文件，显示如图5-3 所示的网页，浏览器标题栏显示“学习使用HTML 编写网页”，浏览器窗口显示“学习HTML 网页设计第一课”。3.HTML 网页的结构(1)网页源代码的基本结构如下:上一页 下一页 返回5.1HTML 基础(2)元素是HTML 语言的基本组成部分，一般成对出现，每一对元素都有一个
4、开始标记与一个结束标记。(3)与 标记分别表示HTML 文档的开始与结束。任何HTML 文档都被包含在一对 与 标记中。(4)与 标记之间是网页的头部信息，其中 与 标记之间指定了网页的标题。(5)与 标记之间是网页的主体，在网页中看到的页面标识一般都包含在 与 之间。(6)HTML 元素具有自己的相关属性，每一个属性可以赋予一定的值。元素属性应放在元素的开始标记内，并与元素名之间有一个空格分隔，文本属性值应使用双引号括起来。上一页 下一页 返回5.1HTML 基础(7)书写HTML 源代码时，标记字符不区分大小写，标记之间空格的多少不影响网页的显示。上一页 返回5.2常用的HTML 标记 5
5、.2.1 HTML 的头部标记与主体标记 HTML 源代码包括头部和主体两部分。分别对应 标志和 标志。在HTML 中，和 是两个非常重要的标志，这是因为所有的HTML 文档都分为两个部分，即文档头和文档体。使用 和 标志将文档头包围起来;使用 和 标志将文档体包围起来。这样，浏览器才能正确地解释HTML 文档。这里再次提醒读者，HTML 的标志是成对出现的，成对出现的标志间的唯一区别是后一个标志比前一个标志多了一个“/”符。)上一页 下一页 返回5.2常用的HTML 标记 5.2.2 标志 通常情况下，一个HTML 文档包括以下代码:文档标题 将这段代码保存为“Templet.htm,读者在
6、书写HTML 文档时直接加载该模板，从而就可以省去每次都重复输入这些必需的标志了。使用浏览器打开该文件，如图5-4 所示。上一页 下一页 返回5.2常用的HTML 标记 5.2.3 HTML 的文本标记与链接标记 文本标记分为文本的基本设置与文本的修饰设置。1.文本属性的设置 face 属性用于设置文本的字体，color 属性用于设置文本的颜色，Size 属性用于设置文本的字号。2.文本的修饰设置 适当地应用文本修饰可以增加网页的美观效果。1)标题设置 属性用于设置标题的字号大小。2)文本的修饰上一页 下一页 返回5.2常用的HTML 标记 3)代码的注释 可以在HTML 文档中插人注释，注释
7、内容在浏览器窗口中不显示。HTML 注释的格式如下:3.段落标记 1)分段与分行 HTML 使用 标记实现段落分段;使用 标记实现换行，这种换行与浏览器的自动换行基本相同。标记不是成对出现的。上一页 下一页 返回5.2常用的HTML 标记 2)文本的对齐 HTML 使用align 属性实现文本的对齐。标记作为文本的分区标记，使用方法与 标记相似。此外，使用 标记也可以完成文本的居中对齐。标记的功能是使所标记的字符居中，其作用与使用 标记中的align=“center”类似。4.水平线 在网页中，可以使用水平线分隔文本。水平线的设置方法如下。(1):用于设定线宽。(2):用于设定线长。上一页 下
8、一页 返回5.2常用的HTML 标记(3):用于设定对齐方式(#为left 或right)。(4):用于设定线的颜色。5.列表标记 列表是HTML 网页中重要的元素，列表的作用相当于文字处理软件中的“项目符号与编号”。HTML 规定了多种列表元素。列表分为无序列表和有序列表。1)无序列表 无序列表是由 和 元素定义的，它的默认符号是圆点。其中，元素包含type 属性，通过定义不同的type 属性可以改变列表的项目符号。type 属性包括:disc 圆点)、circle 圆圈)、square(方块)。上一页 下一页 返回5.2常用的HTML 标记 2)有序列表 有序列表是由 和 元素定义的。其中
9、 元素也包含type 属性，type 属性值有1,A,a,I,i 等。元素还可以定义列表的起始编号，如果希望列表的第一个编号为5，而不是1，则需要定义 元素的start 属性。6.链接标记 超链接是整个WWW应用的核心和基础。如果没有超链接，那么所有的www 应用将不复存在。所以，使用超链接具有重要的意义。1)基本链接上一页 下一页 返回5.2常用的HTML 标记 超链接是由锚元素 定义的。元素包含href 属性与target属性。href 属性的值是一个URL 地址或E-mail 地址;target 属性控制链接的网页在新的浏览器窗口打开。2)锚点链接 所谓锚点是指网页中的某个位置，单击该位
10、置可实现同一个网页之内的链接。在需要跳转的位置输入如下代码:设置锚点al 在制作链接的位置输入如下代码:链接本页锚点al 上一页 下一页 返回5.2常用的HTML 标记 5.2.4 HTML 的图像标记 1.图像标记 引用图像必须使用 标记，标记包含src 属性。src的属性值是所引用图像的URL 地址，该地址既可以是绝对地址，也可以是相对地址。2.设置图像标记的属性 通过图像属性的设置，可以调整或完善图像在浏览器中的显示。1)设置图像的替代文本 所谓图像的替代文本是指:当图像不能正常显示时，在图像的所在位置显示一段提示文本，或当鼠标指针移至图像所在位置时显示替代文本。上一页 下一页 返回5.
11、2常用的HTML 标记 2)设置图像的显示大小 可以指定一幅图像在浏览器窗口中显示的大小。3)设置图像的边框 可以为一幅图像加一个边枢以突出显示.4)设置图像的对齐方式 图片的对齐方式是相对于页面或单元格的。(1)定义水平对齐方式。上一页 下一页 返回5.2常用的HTML 标记(2)定义垂直对齐方式。5)定义图像的间距 显示图像时，应与左右文本之间有一定的间距。定义图像间距的方法如下:其中，hspace 属性定义水平间距，vspace 属性定义垂直间距，单位是像素。上一页 下一页 返回5.2常用的HTML 标记 3.图像映射 所谓图像映射是指，一幅图像上的不同位置被设置了不同的超链接，单击图像
12、的不同位置时将打开不同的超链接目标。图像映射是由 标记定义的。标记包含name 属性，用于为图像映射命名，该名称将被 标记的usemap 属性所引用。因此，图像映射实际上是对 所定义映射的一个引用。标记可以定义3种形状的映射，即circle 圆形),rect(方形)、poly(多边形)。5.2.5 HTML 的表格标记 1.表格的编写方法 表格一般用于网页排版，掌握表格的超文本编写方法对于学好Dreamweave:很有帮助。上一页 下一页 返回5.2常用的HTML 标记 设计一个完整的表格，至少需要以下3个标记。(1)元素:用于定义一个表格。这是每一个表格必需的元素，每一个表格只有一对 和 标
13、记，但一张网页中可以包含多个表格。(2)元素:用于定义表格的行。一个表格可以有多个行，因此，对于一个表格来说 不是唯一的。(3)元素:用于定义一个表格单元。表格的每行可以有不同数量的单元格，在 和 之间，将出现表格中每一个单元格的具体内容。需要注意的是，上述3个元素必须配对使用，缺少任何一个元素，都无法定义出一个表格。上一页 下一页 返回5.2常用的HTML 标记 2.表格的属性 1)表头 标记用于设置表头。2)表格的外观 表格的外观包括下列属性。(1)width 属性:指定表格或某一个单元格的宽度，单位可以是百分比或像素。(2)height 属性:指定表格或某一个单元格的高度，单位可以是百分
14、比或像素。(3)borde:属性:指定表格边线的粗细。上一页 下一页 返回5.2常用的HTML 标记(4)bordercolor 属性:指定表格或某一个单元格的边枢颜色。(5)bordercolorlight 属性:指定亮边枢的颜色。(6)bordercolordark 属性:指定暗边枢的颜色。(7)bgcolor 属性:指定表格或某一个单元格的背景颜色。(8)background 属性:指定表格或某一个单元格的背景图片，其属性值是一个URL 地址。3)表格的间距 表格的间距包括下列属性。(1)cellspacing 属性:用于设置单元格间距。单元格间距是指单元格之间的距离。上一页 下一页 返
15、回5.2常用的HTML 标记(2)cellpadding 属性:用于设置单元格边距。单元格边距是指单元格内部文字与边枢之间的距离。4)表格的单元格合并 表格中的某些单元格需要占据多行或多列，称为表格的跨行与跨列。它包括下列属性。(1)colspan 属性:用于设置当前单元格跨越几列。(2)rowspan 属性:用于设置当前单元格跨越几行。上一页 返回5.3结识网页制作工具 过去的网页一般是由专业人员利用HTML 语言编写实现的。目前，已出现多种可视化程度很高的网页制作工具，不需要掌握专业的网页制作技术也能创作出富有特色、动感十足的网页。5.3.1网页编辑工具 1.Dreamweaver Dre
16、amweave:是网页制作工具，它使用所见即所得的界面，亦有HTML 编辑的功能。Dreamweave:支持ActiveX,JavaScript,Java,Flash,ShockWave 等，而且它还支持动态HTML(Dynamic HTML)的设计，使页面在没有安装插件的情况下也可以在Netscape 和IE 浏览器中正确地显示页面的动画，同时它还提供了自动更新页面信息的功能。下一页 返回5.3结识网页制作工具 Dreamweave:的开放式设计是其最显著的特点，它使任何人都可以轻易扩展它的功能。2.FrontPage FrontPage 是微软Office 系列软件之一，继承了Office
17、 系列软件的界面通用、操作简单等特点，用户可以像在Word 中一样直接进行编辑，编辑的内容也将由FrontPage 自动生成HTML 网页代码。因此，FrontPage 一个很大的好处就是与Office 系列软件的一致性，特别适合初学者。但FrontPage 也存在部分缺点，如兼容性差、生成的垃圾代码多、对动态网页支持差等。上一页 下一页 返回5.3结识网页制作工具 5.3.2网页图像与动画制作工具 现在的网页通常具有丰富多彩的图像和动画。对于网页中的图像和动画，既要求质量高同时还要求文件所占存储空间小。1.Flash Flash 是Macromedia 公司专门为制作网页而设计的一款交互性矢
18、量动画设计软件。网页设计者可以使用该软件设计各种动态Logo(商标、图案)、动画、导航条，还可带有动感音乐，以及其他多媒体的各项功能。由于矢量图形不会因为缩放而导致影像失真，因此在Web 上应用广泛。上一页 下一页 返回5.3结识网页制作工具 2.Fireworks Fireworks 是Macromedia 公司专门设计的Web 图形工具软件，它可以用较少的步骤生成较小但质量很高的JPEG 和GIF 图像，并且这些图像可以直接用于网页上。Fireworks 是Web 图形工具的首选软件。3.Photoshop Photoshop 是由Adobe 公司开发的著名图形图像处理软件。它能够实现各种
19、专业化的图像处理，是专业图像创作的首选软件。以上软件能相互无缝合作。通常网页制作的顺序，是先在Firework 中绘制主页图片，然后进行切片，再将切片导出到Dreamweaver 中，在Dreamweaver 中编辑修改，添加链接，最后再导人用Flash 制作的动画。上一页 返回5.4网站制作流程 网页的功能强大，内容丰富。做一个网页是简单的，但要做好一个网站则是非常复杂、困难的工作。开发一个优秀的网站并不能随心所欲，必须遵循一定的工作流程，网站制作流程一般分为3个阶段，如图5-22 所示。5.4.1网站规划 1.确定网站的主题与名称 网站主题是指建立的网站所要包含的主要内容。例如，旅游、娱乐
20、休闲、体育、新闻、教育、医疗、时尚等。其中每一大类又可进一步细化为若干小类。一般来说，确定网站主题应遵循以下原则。(1)主题鲜明。一个网站必须有一个明确的主题，在主题范围内做到内容全而精。下一页 返回5.4网站制作流程(2)明确设立网站的目的。(3)体现个性。把自己的兴趣、爱好尽情地发挥出来，突出自己的个性，创建出具有自己特色的网站。在个人主页中，网站的名称起着很重要的作用，它在很大程度上决定了整个网站的定位。一个好的名称必须有概括性、简洁、有特色、容易记，还要符合自己主页的主题和风格。2.搜集材料 确定网站主题后，要围绕主题搜集材料，作为自己制作网页的素材。搜集的材料越多，制作网站越容易。材
21、料既可以从图书、报纸、光盘、多媒体上获得，也可以从网上搜集。对搜集到的材料应去粗取精，去伪存真。上一页 下一页 返回5.4网站制作流程 3.规划网站 规划网站就像设计师设计大楼一样，只有图纸设计好了，才能建成一座漂亮的楼房。规划网站时，首先应把网站的内容列举出来，然后根据内容列出一个结构化的蓝图，再根据实际情况设计各个页面之间的链接。规划网站的内容应包括栏目的设置、目录结构、网站的风格(即颜色搭配、网站Logo、版面布局、图像的运用)等。4.主题栏的设置 在设计网站的主题栏与板块时应注意以下几个问题。(1)突出主题。把主题栏放在最明显的地方，让浏览者快速、明确地知道网站所表现的内容。上一页 下
22、一页 返回5.4网站制作流程(2)设计一个“最近更新”栏目，让浏览者能够一目了然地知道更新内容。(3)栏目不要设置太多，一般不超过10个。5.目录结构设计 目录结构设计一般应注意以下问题。(1)按栏目内容建立子目录。(2)每个目录下分别为图像文件创建一个子目录image(图像较少时可不创建)。(3)目录的层次不要太深，主要栏目最好能直接从首页到达。(4)尽量使用意义明确的非中文目录名称。上一页 下一页 返回5.4网站制作流程 6.颜色搭配 合理地使用色彩是非常关键的，不同的色彩搭配会产生不同的效果，并能影响浏览者的情绪。网页选用的背景应与页面的色调相协调，色彩搭配要遵循和谐、均衡、重点突出的原
23、则。7.网站Logo Logo 最重要的作用就是表达网站的理念、便于人们识别，它广泛地应用于站点的链接和宣传中。如同商标一样，Logo 是站点特色和内涵的集中体现。如果是企业网站，最好在企业商标的基础上设计，以保持企业形象的整体统一。设计Logo 的原则是:以简洁的、符号化的视觉艺术把网站的形象和理念展示出来。上一页 下一页 返回5.4网站制作流程 8.版面布局 网页页面的整体布局是不可忽视的。要合理地运用空间，使网页疏密有致，井井有条。版面布局一般应遵循的原则是:突出重点、平衡和谐，将网站Logo、主菜单等较为重要的模块放在突出的位置，然后再排放次要模块(例如搜索、友情链接、计数器、版权信息
24、、E-mail 地址等)。此外，其他页面的设计应与首页保持相同的风格，并有返回首页的链接。9.图像的运用 网页上应适当地添加一些图像，使用图像一般应注意以下几个问题。上一页 下一页 返回5.4网站制作流程(1)图像是为网页内容服务的，不能让图像喧宾夺主。(2)图像要兼顾大小和美观。图像不仅要好看，还应在保证图像质量的情况下尽量缩小图像的大小(即字节数)。图像过大将影响网页的传输速率。(3)合理地采用JPEG 和GIF 图像格式。5.4.2网站制作 1.制作网站 制作网站主要包括以下几个步骤。(1)建立本地站点。建立站点根文件夹，用于存放首页、相关网页和网站中用到的其他文件。(2)在站点根文件夹
25、下创建子文件夹。为了使文件安排比较清晰，应将页面文件和图像文件分开存放。上一页 下一页 返回5.4网站制作流程(3)向站点添加所需要的空网页。(4)设计网页尺寸。(5)设置网页属性，包括页面标题、背景图像、背景颜色、链接颜色、文字颜色等。(6)向网页中插人文本、图形图像、动画等对象。(7)建立所需要的超级链接。(8)预览和保存网页。2.上传与测试 测试与正式上传是不可分割的两项工作。制作完毕的网页，必须进行测试。上一页 下一页 返回5.4网站制作流程 测试主要包括上传前的兼容性测试、链接测试和上传后的实地测试。完成上传前所需要的测试后，利用FTP 工具将网页发布到所申请的主页服务器上。网站上传
26、之后，继续通过浏览器进行实地测试，发现问题，及时修改，然后再上传测试。5.4.3网站后期维护 将所有的网页制作完成后，就可以将网站发布到Internet 上，并进入后期的更新维护。此项工作主要应考虑以下两个方面。1.测试并发布网站上一页 下一页 返回5.4网站制作流程 检查网页的显示细节(有无图片显示不出来现象)、页面上的超级链接(有无链接错误或没有链接现象)等。待测试没有问题后，就可以将网站中所有的文件及文件夹上传到Internet 的服务器上，以便让全世界的浏览者都能够浏览。2.更新维护 随着网站的发布，根据访问者的建议，不断修改或者更新网站中的信息，并从浏览者的角度出发，进一步完善网站。这时网站建设工作又返回到流程中的第一步，这样周而复始就构成了网站的维护过程。上一页 返回图5-1 源文件窗口返回图5-2 在记事本中输入HTML 程序返回图5-3 显示效果返回图5-4 templet.htm返回图5-22 网站设计的工作流程返回