基于WEB程序设计基础

基于WEB程序设计基础任课教师：胡晓军HTML版权所有：浙江大学远程教育学院教学计划绪论HTML语言VBScript&JavaScriptWeb网站的实现原理IIS&ASP实例绪论Internet介绍Web介绍Web程序设计Web程序设计开发工具Internet简介Internet是一个全球性的计算机网络由不同类型和规模的独立运行和管理的计算机网络，按照标准协议、通过各种通信媒体连接TCP/IP协议，Internet互联的标准协议全球Internet用户量达到2亿多，中国的Internet用户达到2千多万Internet的起源ARPAnet(1969)和NSFnet(1986)80年代末美国军事、能源、航天、商业等网合并，形成USInternet(WorldWideWeb)的产生，使Internet的应用很快进入文化、政治、经济、新闻、体育、娱乐、商业以及服务行业中国于1994接入Internet，Internet的中文译名为“因特网”国内的骨干网主要有:中国电信网(163,169)、中国联通网、中国网通网、教育网(CERnet)、科技网(CSTnet)Internet的用途Email文件传输服务(FTP)电子公告栏(BBS)远程登录网络通讯服务网络信息服务(、Gopher、Archie、WAIS等）Web介绍网络信息服务是Internet独具特色和最富有吸引力的功能使用最为广泛，简称为Web欧洲粒子物理实验室(CERN)于1989年提出，并在1992年得到实现Mosaic和Netscape由专门的组织进行规范化中的基本概念HTTP(HyperTextTransferProtocol)HTML(HyperTextMarkupLanguage)URL(UniversalResourceLocator)Web服务器浏览器(IE、Netscape)Web程序设计利用Web网页的方式来完成一定的功能的程序设计方式一般利用交互式动态网页的方式CGIASPPHP应用领域信息保存与发布设置Cookie发送电子邮件创建公用模板各种数据库应用(论坛、MIS等)与传统程序设计比较特点基于网络的编程模式以界面表现为主导可以跨平台实现容易入门和掌握集中维护与管理Web程序设计的优点容易学习和使用界面友好功能比较完备Web程序设计的缺点难以实现复杂的系统性能较差浏览器解释网络带宽Intranet(内联网)Web程序设计的工具网页制作类文本编辑器NotepadUltraEditWord专门的网页制作软件FrontPageNetscapeHotDogDreamWeaver动态网页开发工具教学内容HTML简介HTML文件的基本结构HTML标签分类介绍文字排版图象表格框架(frame)表单(form)层叠样式表(css,CascadingStyleSheet)HTML简介HyperTextMarkupLanguage，超文本标记语言1.0随一起产生第一个官方版本是2.0，第一个完善的版本是3.2，最新版本是4.0，1997年发布由w3.org维护HTML4.0中文说明书基础知识HTML语言不是真正的编程语言HTML编写的文件是文本文件(.htm,.html)是SGML(StandardGeneralizedMarkupLanguage)的一个实现子集标签(TAGS)脚本(Script)HTML的基本结构html.../htmlhead.../headbody.../bodyHTMLHEADtitle,meta/HEADBODYHTML文件的正文/BODY/HTML举例Head中的元素title…/title这两个标签之间的文字会出现在标题中包括注释部分meta字符集信息metahttp-equiv=“Content-Type”content=“text/html;charset=#”#=us-ascii,iso-8859-1,x-mac-roman,iso-8859-2,x-mac-ce,iso-2022-jp,x-sjis,x-euc-jp,euc-kr,iso-2022-kr,gb2312,gb_2312-80,x-euc-tw,x-cns11643-1,x-cns11643-2,big5自动刷新metahttp-equiv=“Refresh”content=“x;url=“ref”举例文字排版(一)版面颜色bodybgcolor=#text=#link=#alink=#vlink=#bgcolor---背景色彩text---非可链接文字的色彩link---可链接文字的色彩alink---正被点击的可链接文字的色彩vlink---已经点击(访问)过的可链接文字的色彩#=rrggbb，16进制举例背景图bodybackground=“img-url”bgproperties=FIXED举例文字排版(二)空格( )行的控制pbrnobr…/nobr文字对齐palign=#…/p#=left,center,rightcenter…/center文字分区divalign=#…/div#=left,center,right举例字体(一)标题h#.../h##=1,2,3,4,5,6字体大小fontsize=#.../font#=1,2,3,4,5,6,7物理字体b…/bi…/iu…/ustrike…/strikesub…/subsup…/sup举例字体(二)逻辑字体em…/emstrong…/strongcode…/codecite…/citesmall…/smallbig…/big字体颜色fontcolor=rrggbb举例字体(三)客户端字体fontface=“#”…font,#指可以在客户端操作系统中得到的字体，如MSSansSerif和宋体等不推荐使用字符实体&#;#=字符实体名称或者ascii值，比较常用的有&&<>"“ 空格举例列表无序列表ulli…/ul有序列表olli…/ol定义列表dldt…dd…/dl举例定制列表元素无序列表的标记litype=##=disk,circle,square有序列表的序号litype=##=A,a,I,i,1有序列表序号的起始值olstart=##=number举例预格式化文本pre…/prexmp…xmp超链接URL地址表示方法scheme:scheme_dependent_informationscheme通常为http、ftp、gopher、mailto、news或file不同的scheme会有不同的弟子信息A…/A标签基本格式Ahref=“URL”…/AA…/A之间的内容可被鼠标选取举例链接到本机路径绝对路径file:///磁盘驱动器|/路径/文件名称相对路径部分路径/文件名称部分路径是相对当前路径而言的链接到URL链接到绝对路径链接到相对路径链接到其他主机举例链接到文件特定部分在文件中设定目标点aname=“名称”…/a跳转到目标点ahref=“#名称”…/a跳转到其他文件的目标点ahref=“url#名称…/a一般在编写大的网页和文档是比较有用举例超链接的其他属性颜色在body标签中设置link=#vlink=#alink=#,#=rrggbb打开一个新的窗口ahref=“url”targer=“name”…/aa…/a之间可以不是文字举例图象基本标签imgsrc=“url”属性alignwidthheightaltvspacehspaceborder举例图象与文字图象与单行文字align=top,middle,bottom图象与多行文字align=left,rightbr,brclean=all图象与周围文字的距离vspace=#,hspace=#举例图形类型(一)GIF格式JPEG格式压缩比例较小十级选择颜色位数256色全彩(16百万色)渐显功能GIF89a有无背景透明GIF89a有无动画制作GIF89a有无用途动画、示意图照片，颜色丰富的图片图象类型(二)如果图像是基于文字的，或主要包含的剪贴画、艺术线条或素描，应该将它保存为GIF格式。如果图像主要包含实景信息，那最好用JPG。JPEG图像压缩的越多，信息就丢失的越多。因此，在将文件保存为JPEG时，在压缩率与质量之间求得一个平衡是至关重要的。显示方式GIF图象的交互式显示方式低分辨率显示模式imgsrc=“url1”lowsrc=“url2”先显示lowsrc的图象，再显示src的图象图形超链接(一)单图单一超链接ahref=“url”imgsrc=“url”/a鼠标点击图象会转向超链接单图多超链接主要是ClientSideImageMap,基本语句为mapname=“name”areashape=“shape”coords=“coords”href=“url”areashape=“shape”coords=“coords”href=“url”/mapimgsrc=“url”usemap=“name”图象超链接(二)一个shape通常称为一个热点，shape共有三种：rect、circle、polyshape=“rect”coords=“x1,y1,x2,y2”shape=“circle”coords=“x1,y1,r”shape=“poly”coords=“x1,y1,x2,y2,…”图象的制作和区域的定位一般用图象处理工具来完成举例表格基本语法table…/table定义表格tr…/tr定义行th…/th定义表头td…/td定义数据举例表格的属性(一)跨多行多列元素跨多列thcolspan=#跨多行throwspan=#表格的大小设置边框tableborder=#表格大小tablewidth=#height=#表元间距表元内部空白举例表格的属性(二)表格内文字对齐水平方向tralign=#thalign=#tdalign=##=left,right,center垂直方向trvalign=#thvalign=#tdvalign=##=top,middle,bottom,baseline举例表格的属性(三)表格在网页内的对齐，与图象标签类似tablealign=##=left,right表格的标题captionalign=#…/caption#=left,right,centercaptionvalign=#…/caption#=top,bottom举例表格的颜色表元的背景色彩和背景图象thbgcolor=#,#=rrggbbthbackground=“url”表格边框的色彩tablebordercolor=#tablebordercolorlight=#tablebordercolo