七年级信息技术-网页设计基础课件-青岛版.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,主页,第,8,章,网页设计基础,Web(,也称,WWW),是,Internet,网上最受欢迎的一种信息服务系统。,主要由两部分组成：一是服务器端即信息的提供者，也称,Web,站点；二是客户端即信息的接收者。客户端通过浏览器来访问,Web,站点。,Web,信息是以网页的方式来组织的。,客户机,(,浏览器,),客户机,(,浏览器,),客户机,(,浏览器,),Internet,服务器,(,网站,),服务器,(,网站,),Web,网站由一系列精心策划和组织的网页组成,以后课程将围绕网页设计来进行,在,FrontPage,图形界面下编制（与,Word,操作相似）,使用,HTML,代码编制,嵌入脚本程序（使网页动起来）,网站由什么构成的,?,如何建设网站,?,如何设计网页,?,第,8,章 网页设计基础,本章主要内容,退出,网页和站点的基本概念,使用,FrontPage,制作网页,常用的,HTML,标记,HTML,及脚本语言简介,初步认识,HTML,文档,8.1,概述,8.1.1,网页的基本概念,1.,网站与网页,Web,（,WWW,）网由形形式式的,Web,站点组成,Web,站点由一系列精心策划和组织的网页组成,网页文件,2,如,Photo.htm,站点,视频素材,图片素材,网页文件,1,如,Interest.htm,主页文件,Index.htm,声音素材,什么是超链接？,网页之间通过“超链接”，构成一个整体,主页,网页,网页,网页,网页,网页,网页,超链接,2.Web,的特点,超文本、图形界面、与平台无关，分布式、交互、动态,超媒体进一步扩展了超文本的信息类型,3.HTML,语言,超文本标记语言。用来编制网页文档,(,也称,HTML,文档,),。并不需要经过编译，只需要通过浏览器来打开就可以看到结果,采用了标记方式，描述了每个在网页上的组件，例如文本段落、文本格式、图像、超链接等,通过超文本链接能方便地进行各种信息之间切换,HTML,版本,欧洲粒子物理实验室,(CERN),首次提出来的,HTML2.0 HTML3.0 HTML3.2 HTML4.0,DHTML,（动态,HTML,）,动态,HTML,能够使网页下载到浏览器以后仍然能够随时变换,包含多种技术，如,JavaScript,VBScript,Document Object Model(DOM,文档对象模型,),Layers,和,CSS,等,4.XML,语言,扩展标记语言,XML(eXtensible Markup Language),是一种新兴的面向,Web,应用的标记语言,HTML,无法描述数据内容，而,XML,能够定义数据元素和属性。其最大优点是适合网上发布和在网页上组织信息。,不少电子商务采用以,XML,为基础的文件来交换网络数据,8.1.2,两个简单的,HTML,文档,例,8-1,显示“欢迎您来到,HTML,世界”,例,8-1,欢迎您来到,HTML,世界,假设把该文档存放在当前站点中，文件名为“,Welcome.htm”,例,8-1,文件名标签,例,8-2,建立含有两个网页链接的,HTML,文档,例,8-2,欢迎您,浏览北大,其中,:,表示分段,表示一条水平线,表示插入超级链接,例,8-2,8.1.3 HTML,文档的基本结构,(1),每个,HTML,文档,(,网页,),以标记,开始，以,结束,四,种基本标记如下,：,标明文档的开始和结束，,定义文档,标明文档的,头部,标明,标题,，显示在浏览器的标题栏中,标明文档的,主体,(2)HTML,文档一般由两部分组成：,头部和主体,(3),标记以“,”,及标记名组成,双边标记：,示例：,.,单边标记：,示例：,一个不包含任何内容的基本,HTML,文档可以如下所示：,该文档可作为一个,Web,页标准模板，以后每次创建新,HTML,文档时都可以以它为基础进行扩充，从而减少录入的时间，提高效率。,8.2,使用,FrontPage,制作网页,借助于,FrontPage,，用户可以采用图形界面和代码设计两种方式来编制网页。,还能创建和组织站点。,8.2.1 FrontPage,的窗口,任务,窗格,编辑控制按钮,网页编辑区,FrontPage,提供了,网页文件夹、报表、导航、超链接、任务,等,多种视图方式,在,“,网页,”,视图方式下，设有,“,设计,”,、,“,代码,”,、,“,预览,”,和,“,拆分,”,四种选项卡,“,设计,”方式：,可以利用菜单中的命令或工具栏上的按钮来编辑网页,“,代码,”方式：,可以直接对网页的,HTML,代码进行编辑操作,“,拆分,”方式：,窗口分为上下两部分，上端为“代码”方式，下端为“设计”方式,。,“,预览,”方式：,可以预览当前的网页，让编制者观看自己当前所作的网页效果,8.2.2,网页的制作和测试,1.,新建网页,选择,“,文件,”,/,“,新建,”,/,命令，或单击,“,常用,”,工具栏上的,“,新建网页,”,按钮，此时在网页编辑区中即可看到新建的空白网页。,.HTM,或,.HTML,在网页上，用户可以插入文字、图片、声音、超链接等，也可以添加一些特殊效果，如滚动文字、交互式按钮、计数器等。,2.,网页的编辑,（,1,）采用,“,设计,”,编辑方式编制网页。,不需要记忆,HTML,代码，可以像使用,Word,进行文字处理一样方便地制作网页。,（,2,）采用,“,代码,”,编辑方式编制网页。,此时必须使用,HTML,代码直接编制网页，其优点是有利于专业人员制作比较复杂的的网页，其缺点是需要记忆,HTML,代码及编写规则。,编辑,HTML,文档,在编辑,HTML,文档的过程中，要注意以下几点：1,）“,”,、“,/”,等符号均用,半角符号,（即英文符号）。,（,2,）标记和属性,不区分大小写,，如,与,或,是没有区别的。习惯上，标记用大写表示，这样标记更容易从文本中分辨出来。,（,3,）为了表示标记的层次关系和便于阅读文档，文档中通常采用标记头尾对齐，内部的内容,向右缩进,方式。这种缩进结构不会影响标记的解释执行。,3.,网页的布局,制作网页时，需要有计划地摆放网页内的各个对象，这就是网页内容的精确定位（或布局），对网页进行布局常用两种方法，一是利用表格，另一种是利用框架。,（,1,）表格布局,使用表格布局功能时，先选用表格将网页分成若干个单元格，每个单元格对应网页中的一个部分，然后对每一部分分别进行设计和制作。利用表格实现对网页内容摆放位置的管理。,表格线,。,当边框的,“,粗细,”,为,0,时,在浏览网页时看不到边框。,（,2,）框架,把浏览器窗口分割成几个不同的区域（框架）,每个框架可以显示一个独立的网页,这是一个框架网页示例。,含有,4,个网页：显示在,3,个框架中的,3,个网页,和作为容器的,总框架网页,。,4.,网页的保存、打开及关闭,（,1,）保存网页,（,2,）打开网页,（,3,）关闭网页,5.,测试网页,“预览”,选择“文件”菜单中的“在浏览器中预览”,使用,IE,浏览器来打开指定的网页文档,8.3,常用的,HTML,标记,8.3.1,文本格式设置,（,1,）文字标记,文字,设置文字的大小、字体及颜色,示例：,网页制作,（,2,）,BODY,标记的,TEXT,属性、,BGCOLOR,等属性,文字,设定整个网页的文字颜色和背景颜色,示例：,网页制作,（,3,）,字符修饰标记,有多个字符修饰标记，其中,、,、,、,及,分别用于设置粗体字、斜体字、带下划线、下标及上标。,示例,1,：,这是粗体字,示例,2,：,这是粗、斜体字,（,4,）,META,标记,META,标记是一种单边标记，放入,HEAD,部分中，可以说明与,Web,页有关的信息，其中一个作用是说明字符编码方面的信息。,例如，以下,META,标记告知浏览器本文档是,HTML,文档，且中文编码使用的是,GB2312,。,其中，属性,HTTP-EQUIV,描述特征名，属性,CONTENT,描述特征值。,又如,表示完成当前网页加载,10,秒后自动加载另一网页（本例为北大主页）。,（,5,）特殊字符,特殊字符 字符代码,空格,例如，,“,”,显示为,“,”,（即两个尖括号中间留一个空）。,8.3.2,段落格式设置,（,1,）段落标记,：,文字块,示例：,网页制作,网页制作,（,2,）标题标记：,标题文字,示例：,网页制作,（,3,）换行标记：,（,4,）居中对齐标记：,文字居中对齐,（,5,）原样显示标记,标记格式：,预先排好的格式,在无,标记处理的情况下，,HTML,会忽略文档中文本的空白字符和换行符。使用,标记后，可以保留文字块中的间隔、换行和空白，即按照原样显示文字。,例,8-3,编制一个,HTML,文档，显示唐诗,静夜思,静夜思,静夜思,(,唐诗,),床前明月光，疑是地上霜。,举头望明月，低头思故乡。,预览该文档时的显示结果,例,8-3,例,8-4,显示预排格式,PRE,标记的作用,试一试,没有,PRE,的显示效果,试一试,有,PRE,的显示效果,例,8-4,8.3.3,加入水平线、超链接和表单,（,1,）注释标记,标记格式：,或,HTML,的注释标记由开始标记符,构成。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。示例,注释标记的作用,这是正文,添加注释是增强文档可读性的重要手段，它为其他人员阅读该,HTML,文档起提示和解释作用，或是为程序的创作人起备忘作用。,注释内容并不在浏览器中显示,注释标记,（,2,）插入水平线的标记,本标记可以在,Web,页面中插入一条水平线,（,3,）图像的标记,IMG,标记基本格式：,本标记可以在,Web,页面中插入一个图像，,src,指出图像的存放位置和文件名。,（,4,）插入超链接的标记,标记基本格式：,超链接的对象,文本链接,图形链接,书签式超链接,链接到微软公司,（,5,）表单标记,利用网页不但能发布信息，而且能收集信息。表单（,FORM,，也称窗体）是网页中收集信息、与访问者进行交互的主要元素。,表单标记的基本格式：,TYPE,表示控件类型，参数,#,为,text,（文本框）、,password,（输入口令的文本框）、,button,（一般按钮）、,reset,（,“,重置,”,按钮）、,submit,（,“,提交,”,按钮）等。,通常为,URL(,网址,),Post(,发送表单,),或,Get(,得到表单,),例,8-5,建立一个简单的表单。,一个简单的表单,在表单中设置一个文本框和两个命令按钮,请输入姓名：,例,8-5,1.,脚本的概念,脚本,(Script,）实际上就是一段程序，用来完成某些特殊的功能,(,主要是让它完成,HTML,不能做的事,),脚本语言用于编制网页脚本,(Script),程序，它通过使用变量、表达式、函数、各种控制语句等，扩展了,HTML,的功能。在,HTML,文档中插入脚本程序，可使静态的,HTML,网页成为动态交互式网页。通常脚本语言的,语法规则比较简单,，没有一般编程语言那样严格和复杂，因此,学习起来比较容易,。,两种,脚本：,服务器端脚本和,客户端脚本,客户端脚本程序可以直接嵌入到,HTML,文档中，并,由客户浏览器解释执行,(,可减轻服务器的负荷,),常用的脚本语言有,VBScrip,t,和,JavaScript,。,8.4,网页脚本语言初步认识,网页脚本语言初步认识,网页脚本程序,网页文档,嵌入,一段程序,使用,HTML,标记,客户端脚本的概念,服务器,Web,浏览器,(,新版本含有脚本解释器,),网站,用户,请求,网页,(,含脚本程序,),由浏览器解释执行,2.,初识,VBScript,程序,例,8-6,显示,“,大家好,”,、,“,新年快乐,”,例,8-6,Document.Write(,大家好,!),显示第一句,表示换行,x=,新年快乐,!,x,是一个变量,Document.Write(x),显示第二句,说明：,1.,为脚本标记，,LANGUAGE=,“,VBScript,”,表示采,用,VBScript,脚本语言编写的。可以嵌入体部,(,Body,),或头部,(,Head,),2.,(,或,REM)为,VBScript,的注释语句,3.DOCUMENT.WRITE(),表示输出,(,即在屏幕上显示,),信息,例,8-6,预览结果,例,8-7,h=Hour(Time(),取出系统时间的小时数,If h12 Then ,判断时数是否小于,12,Document.Write(,早上好,!),Else,If h18 Then ,再判断时数是否小于,18,Document.Write(,下午好,!),Else,Document.Write(,晚上好,!,),END IF,End If,例,8-7,根据不同的时间段在网页上发出问候语，如,“,早上好,”,等,例,8-7,If,条件,Then,语句序列,1,Else,语句序列,2,End If,功能：判断条件是否成立，如果成立，则执行指定的语句序列,1,，否则执行语句序列,2,小时数,h,h12,h18,显示“早上好”,显示“下午好”,显示“晚上好”,是,否,是,否,程序框图,