网页编程网站建设与维护.ppt
《网页编程网站建设与维护.ppt》由会员分享,可在线阅读,更多相关《网页编程网站建设与维护.ppt(149页珍藏版)》请在三一办公上搜索。
1、网站建设与维护,网页编程技术,Chapter2 网页编程技术,主要内容HTML基础ASP介绍VBScript脚本介绍JavaScript脚本介绍PHP脚本介绍重点难点HTML语言的常用标记、ASP技术VBScript脚本和JavaScript脚本,2.1 HTML基础,HTML概念HTML(Hyper Text Markup Language 超文本标识语言)是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。,HTML文档的编写方法,手工直接编写记事本等,存成.htm.html格式使用可视化HTML编 辑 器Frontpage、Dreamweaver等由Web
2、 服务器(或称HTTP 服务器)一 方实时动态地生成。,网页文件命名,*.htm或*.html无空格无特殊符号(例如&符号),只可以有下划线“_”,只可以为英文、数字区分大小写首页文件名默认为:index.htm 或 index.html,HTML 文件结构,.元素:是HTML语言的基本部分。元素总是成对出现,每一对元素一般都有一个开始的标记(如),也有一个结束的标记(如)。元素的标记要用一对尖括号括起来,并且结束的标记总是在开始的标记前加一个斜杠。,HTML 文件结构(Document Structures),HTML 文件的正文,第一张网页,my first page This is my
3、 first homepage!,基本组成部分HTML元素属性,HTML元素可以有自己的相关属性,每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内,并且和元素名之间有一个空格分隔;属性值用“”引起来。,第二张网页,my first page This is my first homepage!,HTML基本结构的有关元素和元素属性,HEAD元素1 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。,HTML基本结构的有关元素和元素属性,HEAD元素2元素 元素下
4、面可以插入很多很有用的元素属性。下面介绍四种:用来标记搜索引擎在搜索你的页面时所取出的关键词。,HTML基本结构的有关元素和元素属性,HEAD元素3元素 用来标记文档的作者。,HTML基本结构的有关元素和元素属性,HEAD元素4元素 用来标记你的页面的解码方式。,HTML基本结构的有关元素和元素属性,HEAD元素5元素 用来自动刷新网页,练习,编写一个网页,要求3秒钟后自动跳转到硅谷动力学院的网站。my first page 三秒钟后本网页将自动跳转到硅谷动力网络学院首页,元素及元素属性1,元素表明是HTML文档的主体部分。在与之间,通常都会有很多其它元素;这些元素和元素属性构成HTML文档的
5、主体部分。,元素及元素属性2,元素中有下列元素属性:(1)bgcolorbgcolor属性标志HTML文档的背景颜色。如:bgcolor=#CCFFCC。,HTML对颜色的控制,HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。16 进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.,常见颜色的代码,元素及元素属性3,元素中有下列元素属性:(2)backgroundbackground属性标志HTML文档的背景图片。如:background=“images/bg.gif。可以使用的图片格式为GIF,JPG,元素及元素属性4,元素中
6、有下列元素属性:(3)bgproperties=fixedbgproperties=fixed使背景图片成水印效果,即图片不随着滚动条的滚动而滚动。,元素及元素属性5,元素中有下列元素属性:(4)texttext属性标志HTML文档的正文文字颜色。如:text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。,元素及元素属性6,元素中有下列元素属性:(5)超级链接颜色link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。,元素及元素属性7,元素中有下列元素属性:(6)leftmargin和topmargin设置网页主体内容距离网页顶端和左端的
7、距离如:leftmargin=20 topmargin=30“,文字标签属性1,文字属性标记1.文字颜色 指定颜色.#=RRGGBB 16 进制数码,文字标签属性2,文字属性标记2.文字字体.#=客户端可获得的字体,文字标签属性3,文字属性标记3.文字大小.#=1,2,3,4,5,6,7 or+#,-#,文字标签属性4,文字属性标记4.文字标题.#=1,2,3,4,5,6例:,文字布局,行的控制 段(Paragraph)(可以看作是空行)空白占位符,文字布局,行的控制 HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话,就要用到另一个元素,即元素。元素可以使所在的位置出现换
8、行。这种换行和浏览器的自动换行的效果类似。元素不是成对出现的。例:不换行,HTML文字与段落格式控制,倾斜文本 粗体文本 下划线文本 删除线文本,基本组成部分HTML注释,HTML文档可以插入注释。注释内容不会在浏览器窗口显示HTML注释的格式为:,1文字的对齐,.(n=1,2,3,4,5,6).(#=left,center,right),2文字的分区显示,.(#=left,center,right)例:,3.HTML段落与分行控制,居中-元素元素是一个独立的使所标记的字符居中的元素。它的作用与使用元素里的align=“center”类似例如:居中段落,3.HTML段落与分行控制,标尺线:设定
9、线宽:设定线长:设定对齐方式#=left,right:设定线的颜色,3.HTML的段落与分行控制,无序列表元素1列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。,3.HTML的段落与分行控制,无序列表元素2无序列表是由和元素定义的:sports food drink friends 例:,3.HTML的段落与分行控制,无序列表元素3无序列表的默认符号是圆点。元素有type属性,通过定义不同的type属性可以改变列表的项目符号。目前,type属性的属性值有:disc(圆)、circle(圆圈)、square(方块),3.HTML的段落与分行
10、控制,有序列表元素1有序列表由和定义:sports drink friends,3.HTML的段落与分行控制,有序列表元素2元素也有自己的type属性,type属性的属性值有1、A、a、I、i等。例如,我们以A、B、C作为列表的编号例:元素还可以定义列表的起始编号,如我们希望列表的第一个编号为5,而不是1,则需要定义元素的start属性,4.超级链接普通超级链接1,超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的WWW的应用将不复存在。所以,对超级链接的掌握具有特殊重要的意义。,4.超级链接普通超级链接2,超级链接是用锚元素定义的 在元素下,有元素属性href
11、,href的属性值为一个URL地址如:指向学院的超级链接 如:普通超级链接,4.超级链接E-mail超级链接,超级链接可以指向E-mail地址如:指向E-mail地址的超级链接,4.超级链接新开链接窗口,开一个新的(浏览器)窗口(Target Window).例:,4.超级链接去除下划线,去掉超级连接的下划线:style=“text-decoration:none”例:,4.超级链接其他超级链接,WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用,如:Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接;指向其他Internet应用
12、的超级链接不是我们掌握的重点。,4.超级链接锚点(书签)1,指向本页面锚点aa的超级链接指向23页面的锚点top的超级链接例:,练习:手写代码实现,链接(新开窗口与Email)、背景、文字颜色、字体、换行、页面标题。练习:,HTML对图片的控制-1,基本语法:引用图片必须用元素标志。元素下的基本元素属性是src属性,src的属性值为所引用的图片的URL地址。src属性是必须的。Src的URL可以是绝对地址,也可以是相对地址,HTML对图片的控制-2,所谓图片的替代文本,指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。定义图片替代文本的方法是:,HTML对图片的
13、控制-3,图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是:width指定图片的宽度,height指定高度。它们的属性值可以是象素,也可以是%。,HTML对图片的控制-4,图片的边框我们可以为一幅图片加一个边框以突出显示:border的属性值为象素数,HTML对图片的控制-5,图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是:,HTML对图片的控制-6,图片的对齐方式定义图片的垂直对齐方式:对于图片的对齐方式不仅是以上几种,但是以上的几种是最常用的。例,HTML对图片的控制-7,定义图片与左、右的文本之间的间距图片在显示时,
14、与左右的文本之间可以有一定的间距 Hspace(horizontal)定义水平间距;Vspace(vertical)定义垂直间距。单位都是象素数.,HTML对图片的控制-8,图象的超级链接 图象的超级链接是指整个图象的超级链接,当点击图象的任何部分时,都会打开这个超级链接。定义默认超级链接的方法是:所以,所谓超级链接实际上就是用元素标志一个图象的引用;,HTML对图片的控制-9,图象映射所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接;点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。,HTML对图片的控制-10,图象映射(只要
15、求理解标记含义)图象映射由定义。有一个基本属性是name。Name给图象映射命名,这个命名将会被元素用usemap属性引用。所以,图象上的图象映射实际上是对定义的映射的一个引用。在定义图象映射时,可以定义三种形状的映射:circle(圆形)、rect(矩形rectangle)、poly(多边形),HTML对图片的控制-11,图象映射实例(35.htm),表格(TABLE)标记,元素:定义一个表格。每一个表格只有一对和,一张页面中可以有多个表格。元素:定义表格的行,一个表格可以有多行,所以对于一个表格来说不是唯一的。元素:定义表格的一个单元格。每行可以有不同数量的单元格,在和之间是单元格的具体内
16、容。需要注意的是:上述的三个元素必须、而且只能够配对使用。缺少任何一个元素,都无法定义出一个表格。,单元格(用来表示,每个单元格可以有背景颜色和背景图片),表格(用来表示,表格可以有背景颜色、背景图片),表格边框,每一行可以用来表示,单元格放在行中,每行可以有很多的单元格。,表头(用来表示,表头是特殊的单元格,其中的文字加进去之后默认是居中并且加粗),表格(TABLE)标记,表格的基本结构定义表格定义表头定义表行定义单元格例:,表格(TABLE)标记-1,表格的属性 1width属性:指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性:指定表格或某一个表格单元格的高度。单
17、位可以是%或者象素。border属性:表格边线粗细,表格(TABLE)标记-1,表格的属性 bgcolor属性:指定表格或某一个单元格的背景颜色。background属性:指定表格或某一个单元格的背景图片。其属性值为一个URL地址。例:,表格(TABLE)标记-1,表格的属性 bordercolor属性:指定表格或某一个单元格的边框颜色。Bordercolorlight属性:亮边框的颜色Bordercolordark属性:暗边框的颜色,表格(TABLE)标记-1,表格的属性 align属性:指定表格或某一个单元格里的内容(文本、图片等)的对齐方式。表格的属性 cellspacing属性:单元格
18、间距。cellpadding属性:单元格边距。,表格(TABLE)标记-2,单元格属性1、valign属性:指定某一个单元格里的内容(文本、图片等)的垂直对齐方式。垂直对齐方式的属性值包括:top:顶端对齐;middle:居中对齐;bottom:底端对齐;Baseline:相对于基线对齐;,表格(TABLE)标记-2,单元格属性2、Colspan:属性值表示当前单元格跨越几列3、Rowspan:属性值表示当前单元格跨越几行例:,表格(TABLE)标记-3,行属性1、valign属性:指定某一个单元格里的内容(文本、图片等)的垂直对齐方式。垂直对齐方式的属性值包top:顶端对齐;middle:居
19、中对齐;bottom:底端对齐。Baseline:相对于基线对齐。,表格(TABLE)标记-3,行属性2、align属性:指定表格或某一个单元格里的内容(文本、图片等)的对齐方式3、height属性:指定表格或某一个表格单元格的高度。单位可以是%或者象素,表格进阶,表格的嵌套在 之间插入表格,实现表格嵌套表格的作用一般只是控制文本和图像的显示,而不显示表格的边框例:,综合案例,表格的综合使用例:,表单(FORM)标记,HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里,我们可以定义表单,并且使表单与CGI或ASP等服务器端的表单处理程序配
20、合。我们在网页设计课程中不会涉及程序编制。,表单(FORM)标记,表单是网页上的一个特定区域。这个区域是由一对元素定义的。元素action属性:用来定义表单处理程序(一个ASP、CGI等程序)的位置(相对地址或绝对地址)。Method定义表单结果从浏览器传送到服务器的方法,一般有两种方法:get、post。,表单(FORM)标记,1.表单的基本语法:.*=GET有数据量限制,POST无以上限制,以文件形式传输,表单(FORM)标记,文本框?文本框的名字*text,password*默认值*长度?最大输入字符数,表单(FORM)标记,3.文本域.例:,表单(FORM)标记,按钮包括普通按钮、重置
21、按钮和提交按钮,表单(FORM)标记,5.复选框(Checkbox)在一个表单里的所有多选框可以有一个或多个被选中。例,表单(FORM)标记,6.单选框(RadioButton)一个表单里的所有变量名相同的单选框只能够有一个被选中。各个选项的name必须一样才能达到预期效果,表单(FORM)标记,7.下拉列表基本语法说明说明2 例:,表单(FORM)标记,7.下拉列表(2)列表框的长度(3)允许多选例:,表单(FORM)标记,8.图象域例:image.htm,表单(FORM)标记,综合练习(*)实现留言簿要求:背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、
22、图象域、提交与取消按钮,内容以mail形式提交。,网页中的框架,制作框架页面的步骤:1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接,在子框架中设定链接。注意:框架页面是不含标签的,网页中的框架,基本语法您的浏览器不支持框架,请考虑升级您的浏览器!,网页中的框架,定义框架的基本语法框架由一对定义有两个属性:rows和colsRows定义上下分割的框架的大小;cols定义左右分割的框架的大小;在定义大小时,rows和cols可以使用相对大小或以百分比为单位。,网页中的框架,各窗口的尺寸设置 横排多个窗口 排列方式:ABC,网页中的框架,各窗口的
23、尺寸设置 纵向排列多个窗口 排列方式:A B C,网页中的框架,COLS&ROWS:纵横排列多个窗口 排列方式:BAC,网页中的框架,框架边框的颜色bordercolor=ff0000“各窗口边框的设置 frameborder=#=yes,no/1,0框架边框的宽度framespacing=10 例:,网页中的框架,的属性name:定义该框架的名字。这个名字可以被一些网页元素引用,如被元素引用。Src:在本框架里显示网页的URL。Target:目标框架,引用的是目标框架的名字。,网页中的框架,在当前框架中打开超链接页面默认就是在当前框架页中打开,也可以采用Target=“_self”在指定框架
24、中打开超级链接页面Target=“name”新开窗口打开链接页面Target=“_blank”跳出整个框架集Target=“_parent”,网页中的框架,的属性Scrolling:是否显示滚动条。yes,no,autoNoresize:框架在浏览器里不可以被调整大小。例:,网页中的框架,内含窗口.#=初始页面的 URL#=框架名称(Frame Name)例:,会移动的文字,基本语法.文字移动属性(1)方向:direction=#=left,right,up,down,会移动的文字,2、文字移动属性(2)方式:behavior=#=scroll(循环),slide(只走一次),alternat
25、e(来回走)(3)循环:loop=#=次数;若未指定则循环不止(infinite),会移动的文字,2、文字移动属性(4)速度:scrollamount=#(5)延时:scrolldelay=#例:,会移动的文字,3、其他属性(1)底色:bgcolor=#=RRGGBB 16 进制颜色代码(2)面积:height=#width=#(3)空白:hspace=#vspace=#,多媒体页面,用嵌入多媒体对象 基本语法#=URL注:使用 标记之前,需要安装插件才可以;对于不同的plugin,其embed属性也不同。例:(Flash动画)例:(rmi音乐文件)例:(avi动画)例:(mpeg影像文件),
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 编程 网站 建设 维护
链接地址:https://www.31ppt.com/p-2205370.html