（中职）Internet应用第5章教学课件.ppt

上传人：春哥&#****71;

文档编号：90587705

上传时间：2023-05-16

格式：PPT

页数：42

大小：908.50KB

( 4.5 )

《（中职）Internet应用第5章教学课件.ppt》由会员分享，可在线阅读，更多相关《（中职）Internet应用第5章教学课件.ppt（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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 网站设计的工作流程返回

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

20 金币

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: Internet 应用教学课件

淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

限制150内

关于本文

本文标题：（中职）Internet应用第5章教学课件.ppt
链接地址：https://www.taowenge.com/p-90587705.html