第1部分网页制作基础.ppt
《第1部分网页制作基础.ppt》由会员分享,可在线阅读,更多相关《第1部分网页制作基础.ppt(131页珍藏版)》请在三一文库上搜索。
1、第1章 网页制作基础,主要内容,Internet及Web的概念 超文本标记语言 常用的主页制作工具,学习要求,了解Internet及Web的概念; 熟悉HTML文档格式和常用标签; 了解常用的主页制作工具,本章目录,1.1 Internet信息服务,1.2 超文本标记语言,1.2.1 第一个HTML文档,1.2.2 文字修饰与布局,1.2.3 加入其它网页元素,1.2.4 框架,1.2.5 使用表单,1.3 主页制作工具,本章习题,1.1 Internet信息服务,http:/ ?,HTTP(HyperText Transmission Protocol超文本传输协议),1.1 Interne
2、t信息服务,Internet(因特网)是一个通过网络设备把世界各国的计算机相互连接在一起的计算机网络。 在Internet上,人们可以利用任何两台支持TCP/IP网络协议的计算机进行通信。 Internet还支持多种流行的程序,包括World Wide Web。,World Wide Web,World Wide Web(万维网)是在因特网上运行的全球性分布式信息系统,它是一个抽象的信息场所,在这个场所中,包含了几十乃至几百万台通过超文本传输协议(HTTP)提供信息服务的Web服务器,当用户使用浏览器向这些服务器发出请求时,服务器将把响应信息发送给浏览器,最后由浏览器解释并显示。,协议,所谓协
3、议是指计算机通信所使用的语言和规则。具体地如规定通信双方的操作过程,每次交换数据使用的数据格式等等。 常用的协议有FTP和HTTP等,FTP协议,FTP(File Transfer Protocol文件传输协议),用于将文本、二进制文件和图形从一台计算机传输到另一台计算机,有了它,你可以将编写好的网页传送到能被其它用户访问的Web服务器上。,HTTP协议,HTTP(HyperText Transmission Protocol超文本传输协议)用于定义在Web浏览器和Web服务器之间如何传送数据。,Web服务器和浏览器,任何一台使用的计算机可能是一台Web服务器,也可能是一台安装有浏览器的普通计
4、算机(客户机),这取决于这台计算机中安装了什么程序,以及这台计算机接入到Internet的接入方式 。 通常一台机器可以同时承担两者的任务。,Web服务器,一台安装有Web服务器程序的计算机可以成了Web服务器,它向其它机器或程序提供Web访问服务。 常用的Web服务器程序有IIS和Apache等,它们使用在不同的操作系统环境中。,浏览器,指计算机上安装的一个程序,通过它及相应的硬件设备,可以向Web服务器发出请求,从而得到相应的服务。 Microsoft的Internet Explorer(简称IE)是一般常用的浏览器。,Web出版,把一些文字、图片、声音等内容组织成一个或多个Web文档,放
5、置在Web服务器上,供用户在能与该服务器相连的机器上访问,这一过程称为Web出版。,Web出版的方式,主要有两种,一种是建立一个独立的Web服务器,这需要较高的代价,另一种是在其它服务器上开辟一个空间,通过链接的形式来访问你的Web页。,返回本章目录,1.2 超文本标记语言,超文本 一般把通过在文本中插入链接把相关文本组织在一起而形成的文档称为超文本(hypertext)。通常超文本使用超文本标记语言来描述。 超文本标记语言 超文本标记语言(HyperText Makeup Language,简称HTML)是一种用来创作万维网页面的描述语言,它使用HTML标签来定义文档的格式、组成和链接关系,
6、供浏览器解释执行。,1.2 超文本标记语言,HTML标签 所谓HTML标签,由3部分组成:左尖括号“”,“标签名称”,和右尖括号“”。标签通常是成对出现的,分别称为“开始标签”和“结束标签”,结束标签的左尖括号后加一个斜杠符号“/”。 定义属性 在各种HTML标签中,常常还可以定义一些属性,这些属性用于指出文档元素的一些特性,如背景颜色、字体大小、对齐方式等,指定文档元素属性的附加信息一般放在相应的“开始标签”中。,1.2.1 第一个HTML文档,本小节按以下顺序讨论: 举例 文档一般格式 说明 调试方法,1.举例,程序代码 我的第一个WEB页 正文内容写在这里 ,1.举例,操作方法 将上述代
7、码用文本编辑器或其他专门的主页制作软件输入并保存为一个扩展名为htm或html的文件后,在文件夹窗口双击该文件图标,就可看到浏览结果了。,1.举例,浏览结果,点击这里测试一下,2.一般形式, 头部 主体部分 ,网页开始标签,网页结束标签,头部标签,网页主体标签,3.说明,开始和结束标签 头部信息,可以包含标题(title),媒体环境(meta)等说明信息,客户端脚本也可放在这一部分。 网页主体部分。,3.说明,标签可以设置一些属性,形式为: 其中: bgcolor背景颜色 text 非链接文字的颜色 link 链接文字的颜色 alink正被点击的链接文字的颜色 vlink 已经点击(访问)过的
8、链接文字的颜色,3.说明,如果要使用背景图像,语法为: 在HTML文档中,不区分英文字母的大小写,对于标签中的属性值,一般可以不加引号,只有当属性值中包含空格或一些其它符号时,引号才是必须的。,特别说明,按照Web标准,网页中三个部分,即结构、表现和行为应该相互分离。因此,像body中的颜色设置和背景图片设置均属于表现部分内容,应分离出来,即标签中不应有属性设置。 以后的内容中,对Web标准中不推荐的内容将用红色文字加以说明。,调试HTML代码,总有一些时候会忘了输入某些代码或敲错某些符号,这时Web页可能会变得非常滑稽。通过反复的浏览,比较出现的效果与预想效果的不同点,从中发现存在的错误,这
9、一过程称为调试。,对于文件类型为htm的文件,都可以通过浏览器窗口中的“查看”=“源文件”来打开源文件进行修改,保存后再在浏览器窗口点击刷新按钮即可。,调试HTML代码,常见的错误有标签名称书写错误、标签的属性书写错误、结束标签遗忘或书写错误等。如例1-1第3行中若结束位置的遗忘了或写成,则在窗口的标题栏中将看到不正确的内容。只要仔细观察显示结果,不难发现其中的错误。,点击这里测试一下看看你能找到其中的错误吗?,也许点击后没有看到浏览器窗口,这时可按ATL-TAB进行切换,继续放映前请关闭浏览器窗口。,返回本章目录,1.2.2 文字修饰与布局,1.修饰方法 标题文字 文字大小 文字颜色 定义字
10、体 标记文字 2.文字布局 段落 换行 文字对齐 预格式化文本,1.修饰方法,标题文字 (Header) 指使用标签将某些文字设置成标题,形式如下: 作为标题的文字 其中n为1到6的数字,根据n的大小不同,将显示出不同大小的黑体字。h1最大,h6最小。标题文字独立占一行,不受段落标记的影响。,1.修饰方法,文字大小 (font size) Web标准中不推荐 指使用标签的SIZE属性设置文字的大小。形式如下: 需显示成n号大小的文字 其中:n=1,2,37。 size的默认大小为3,在此基础上,可以用-2,-1,0,+1,+2,+3或+4代替n。即+1代表4。 另外,可以用指出缺省字符大小,用
11、或来指出字符相对于周围字符的大小。,1.修饰方法,文字颜色(font color) Web标准中不推荐 指使用标签的color属性设置文字的颜色。形式如下: 文字 其中:rrggbb为16进制值,表示组成颜色的RGB三原色的对比关系,对常用的颜色,可以使用名称来代替式中的“#rrggbb”,对应关系为:Black(000000),Olive(808000),Red(ff0000),Blue(0000FF),Maroon(800000),Navy(000080),Gray(808080),Lime(00ff00),Fuchsia(ff00ff),White(ffffff),Green(00800
12、0),Purple(800080),Silver(C0C0C0),Yellow(ffff00),Aqua(00ffff)。,点击这里观看例子,1.修饰方法,定义字体(font face) Web标准中不推荐 指使用标签的face属性设置文字的字体。形式如下: 需设置字体的文字 其中:字体为Arial、Times、宋体、楷体等。 值得注意的是,当别的机器访问你的网页时,在浏览器上是否能按照你所设置的字体显示,取决于浏览器所在的机器中是否安装了相应的字体。,三种文字的修饰方法有一个共同点就是都使用标签把要修饰的文字括起来,所不同的是使用不同的属性,即: size表示大小 color表示颜色 fac
13、e表示字体 通常这几个属性可以同时使用,例如要用6号大小红色显示“动态网页”这几个字时,形式如下: 动态网页,1.修饰方法,标记文字 Web标准中不推荐 对于文字还有一些常用的修饰,即加粗、斜体和加下划线等。对此,HTML中设计了几个独立的标签,使用形式如下: 需要加粗的文字 需要显示成斜体的文字 需要添加下划线的文字 以上三个标签可重叠使用。如:动态网页制作,将使“动态”两字加粗显示,“网页”两字加粗并加下划线,“制作”两字显示成斜体并加下划线。,修饰举例,网页内容 文字的修饰 这是标题字体h1 这是标题字体h6 这是大小为5的楷体字 本教材讨论的是:动态网页制作 这是红色的文字 ,修饰举例
14、,浏览结果,点击这里测试一下,同其他例子一样,在抓取屏幕图形时已将窗口缩小。,2.文字布局,段落 属于结构描述的内容 段落是文档的基本单位,在HTML中可以使用标签来指定文档中具有独立意义的段落,通过设置段落标签的某些属性可以控制段落的对齐方式。浏览器在显示时,一个段落的前后将留有较大的空隙,也可以说相当于有一个空行。,2.文字布局,换行 Web标准中推荐格式 一个段落中可以包含多个行,可以使用标签来强制文字换行。一般情况行与行之间的间隔比段与段之间的间隔要小。 注意:如果不使用段落标签指出从哪里开始新的一段或一行,那么显示时文本就会连成一整块,而不管你在源文件中输入了多少个回车符。一般情况根
15、据浏览器窗口的宽度,当一行太长时,会自动换行。,点击这里测试一下,2.文字布局,文字对齐 可以以段落为单位设置文字的对齐方式,形式如下: 文字 其中:对齐方式有left、center和right,分别表示左对齐、居中对齐和右对齐。默认为left表示左对齐。标题文字也有相应的属性,使用形式为: 标题文字,2.文字布局,文字对齐 如果需要将文字或其它对象居中对齐,也可以使用标签,形式如下: 要居中的文字或对象 注意:标题不能作为段落的一部分,也不受段落标记的影响。,2.文字布局,预格式化文本 当需要按照源文件输入时的格式来控制换行时,可以使用预格式化文本标签,使用形式如下: 这里是多行文本 注意:
16、用这一标识符标识的文本不能随浏览器窗口的宽度大小而自动换行,这在低分辨率显示器上使用是很不方便的。,点击这里测试一下,返回本章目录,1.2.3 加入其它网页元素,网页中除了一般的文字外,通常还有一些其它对象,如线条、图片、表格等。 要在HTML中插入各种对象,通常需要指出三个内容:即标签名称、标签属性及提示信息。 以下分别进行讨论: 1.插入水平线 2.加入超级链接 3.加入图像 4.插入表格,1.插入水平线,有时为了较明显地划分上下各部分的内容,在文档中间加入一些水平线,使用形式如下: 其中:hr为标签名称,它指出插入的元素为一个线条。width、align和size都是线条的属性,其右侧为
17、该属性对应的值。式中的宽度可以是百分比,表示占屏幕宽度的百分比,如“90%”,也可以是屏幕的象数点个数,如“222”。对齐方式可以是Left(左对齐),Center(中间对齐)及Right(右对齐)。高度为点数。,水平线举例,网页内容 水平线 这里是标题 这里是正文内容 ,水平线举例,浏览结果,点击这里测试一下,2.加入超级链接,使用超文本标记语言来编写网页的主要原因是网页的内容中常常需要使用超链接,通过超链接,用户可以简单地用点击某些文字来转向到其它网页或本网页的其它位置。根据需要转向的位置不同,超级链接的形式有所不同。,1) 链接到其它地址,形式: 提示文字 例如: 雅虎中文 作用: 用于
18、链接到其它网站或本网站的其它网页,2) 链接到本页的其它地方,形式: 提示文字 其中:位置是命名的一个地方,命名形式为: 内容 例如: 喜 作用: 当同一个网页中包含较长的内容时,用此方式转移到目标位置,3) 链接到其它地址的某一地方,形式: 提示文字 这种方式是上述两种方式的结合,4) 在新窗口打开链接,形式:在Web标准中不推荐 用于打开一个新的窗口显示指定网页的内容,当使用框架时一般要使用这种形式,有关内容参见后面内容。,超链接举例,网页内容: 超级链接 友情链接: 雅虎中文 网易 我家的生活 -喜 怒 哀 乐全都有 有人说:“生活像一条长长的路,崎岖蜿蜒。“有人说:“生活像一束鲜花,带
19、来了希望和成功。“有人说:“生活像一个多彩的梦,是由红、橙、黄、绿编织而成。“可是我说:“生活不是梦,不是画,它有苦也有乐“,超链接举例,网页内容:(续) 喜 有一年放暑假前夕,我去学校领小学生手册。我刚拿到手册时,提心吊胆的,担心成绩不理想,就急忙把它翻开来看。语文九十八分,数学九十七分。“太好了!“我激动得喊了出来。于是妈妈看着我点了点头,满意地笑了。我望着妈妈满意的笑容,心中不由想起几个月之前的一件事来。 怒 那是一个狂风怒吼的阴天。“任浩数学七十六分!“老师紧皱着眉头,来到我身边,说:“这次你是怎么考数学的?好好查查原因!“天才知道我是怎样回到家的。一进门,妈妈便笑眯眯地走出来迎接我,
20、可她看了我的成绩单妈妈和我谈了两个小时。我心里才轻松了些。 哀,超链接举例,网页内容: (续) 今天,我们家接到了老家来的电报,说家里发洪水,要求我们立即支援。我们得到消息后,充满阳光的生活变得灰蒙蒙的,全家都为这突然发生的事感到哀愁,不愉快。爸爸妈妈商量后便寄去了几百块钱和姐姐小时候的衣服给叔伯们。同时爸爸还准备回家去看看。谁知全家看完了电报,都十分高兴,家中的一丝阴云,又飞散了。 乐 “夫人,请-“爸爸调皮地向妈妈做了一个邀请动作。 “哈哈-“我们都笑了起来。妈妈白了爸爸一眼,从容地站了起来。奇怪,那步子既准确又合拍,把我们都看呆了。 欢笑声和歌声交织在一起,随着微风传出窗外 ,超链接举例
21、,浏览结果,本例浏览时,首先显示如图,单击“怒”字显示如图,单击“雅虎中文”将转到雅虎中文网站,显示如图所示,点击这里测试一下,3.加入图像,使用图像的作用 图片是网页的一个重要组成部分,显示在网页上的任何东西都可以用图像来实现,如特殊字体的文字、线条分隔符等。图片可以使页面更直观、更漂亮。但由于图片文件有较多的字节,在网络上传送需要较长的时间。,3.加入图像,方法 要在网页的某个位置放置一个图像,使用标签,形式为: 其中:src属性指出显示的图片的文件名。常用的图像文件格式为gif和jpeg格式。width和height分别指出图片显示的宽度和高度,以像素点为单位。alt属性后面的“提示文字
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 部分 网页 制作 基础
链接地址:https://www.31doc.com/p-2521025.html