Web网页制作.ppt

Web网页制作.ppt

《Web网页制作.ppt》由会员分享，可在线阅读，更多相关《Web网页制作.ppt（65页珍藏版）》请在冰豆网上搜索。

网络GIS开发技术基础,主要内容,HTML语言,1,客户端动态技术（JS、CSS等）,2,B/S工作原理,工作原理：

基于B/S（浏览器/服务器）模式,静态网页技术,静态网页技术所谓静态是指网页的内容是事先设计好的，不会根据实际情况发生变化HTML语言（HpyerTextMarkupLanguage，超文本标记语言）文件扩展名：

.htm或.html制作工具MicrosoftFrontPageMacromediaDreamweaver（网页设计三剑客之一）,动态网页技术,动态网页技术网页的内容不再是固定不变的，而会根据实际情况发生动态变化网页里的内容很大一部分是访问数据库得到的，用户输入的信息也将被保存到数据库中与用户的交互性大大加强分类Server端动态网页技术Client端动态网页技术,Server端动态网页技术Web服务器不只是简单地将用户请求的文件发送给Client端，而是先执行相应的脚本程序（Script），通常执行的结果为HTML格式，然后将执行结果返回给浏览器进行显示用户能够看到的只是HTML文件，而看不到脚本程序的源代码,Server端动态网页技术CGI（CommonGatewayInterface，通用网关接口）脚本程序文件扩展名：

.cgi通常使用Perl语言典型应用实例：

检查用户身份,Server端动态网页技术在HTML代码中嵌入脚本程序代码段，Web服务器同样先将脚本程序代码段执行，转变为HTML代码后，返回给浏览器显示ASP（ActiveServerPages，动态服务器主页），由Microsoft公司推出，以VisualBasic为脚本语言，文件扩展名为.aspASP.net，是微软新一代动态服务器主页，以任何支持.net技术的语言为脚本，文件扩展名为aspxPHP，采用了类似于C语言的脚本语言，扩展名为.phpJSP（JavaServerPages），以Java为脚本语言，扩展名为.jsp,Server端动态网页技术开发工具VisualInterDev（CGI/ASP）VisualS（ASP.net）DreamweaverUltraDev（CGI/ASP/PHP/JSP）Dreamweaver（CGI/ASP/PHP/JSP）文本编辑器：

UltraEdit,Client端动态网页技术JavaScriptPlug-in（各类插件）媒体工具类AdobePhotoshop/MacromediaFireworksMacromediaFlashJava语言（JavaApplet）可移植性强，可以在不改动源程序的前提下让应用程序运行于不同的操作系统平台上，适用于网络环境,1.HTML语言,HTML语言的发展：

80年代末在SGML的基础上产生1994年，W3C（WorldWideWebConsortium）组织对HTML进行了标准化工作自1990年问世以来，已发行4个版本：

HTML1.0、HTML2.0、HTML3.0、HTML4.0HTML标准的网站：

http:

/www.w3c.org/pub/www,HyperTextMarkupLanguage超文本标记语言,制作Web页面的基本编程语言一系列标记的集合用HTML编写的超文本文档称为HTML文档。

手工直接编写：

记事本、EditPlus等，存成.htm或.html文件可视化编辑器：

Dreamweaver、Frontpage等由Web服务器实时动态地生成：

IIS、Tomcat等,1.HTML语言,HTML标签及其属性标签:

是HTML语言的基本组成部分，要用括起来。

双边标记：

头标与尾标。

如：

。

单边标记：

只有头标。

如：

标签属性：

对标签的状态进行描述，出现在标签的内，属性值用“”或者引起来。

常见共有属性：

colorbgcolorbackgroundsizewidthheightalignsrc。

例:

这里是标题栏这里是网页文本的页面体部分,1.1文档结构,1.2字体和颜色,标题字体：

.#=1,2,3,4,5,6字体大小：

.#=1,2,3,字体名称：

.#=黑体，宋体字体颜色：

.字体形状：

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

1.3文字布局,段；换行；区域；文字的对齐（Align）.#=left,center,right#=left,center,right,1.4超级链接和书签,1.页面之间的链接，用URL：

文本及图像例如：

UPCReturntotopicUPC2.页内链接-书签，用锚：

例如：

AppendixADetailsareinAppendixA.,例如：

插入图片,图像格式,bmp，gif，jpg,标记,属性,src：

指定图片的位置Align：

指定图片与文本的对齐关系Alt：

提示信息Border：

图片边界宽度Height：

图片高度Width：

图片宽度,1.5图像,1.6表格,12.1.6表格,跨多列：

colspan=#跨多行：

rowspan=#表格边框的色彩：

bordercolor=#表元的背景色彩：

bgcolor=#和背景图象：

background=URL文字的对齐/布局：

align=#（#=left,center,right）valign=#（#=top,middle,bottom）,表单.*=GET,POST表单控件*=text,password,checkbox,radio,image,hidden,submit,reset*=SymbolicNameforCGIscript,12.1.7表单与控件,1.7表单与控件,文字输入：

隐藏框：

密码输入：

复选框：

单选框：

列表框：

.文本区域:

.,姓名：

地址：

发送数据？

YesNo需要什么产品？

显示器键盘鼠标调制解调器是否会员？

属性,1.7表单与控件,帧：

在一个浏览器窗口中定义单独的窗框,每个帧包含了一个单独的网页可独立于其它帧滚动,1.8帧,1.9其他,插入直线：

插入移动的文字：

文字（#=left,right）插入对象：

空格:

注释：

1.10DIV专题,定义和用法可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。

它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用id或class来标记，那么该标签的作用会变得更加有效。

是一个块级元素。

这意味着它的内容自动地开始一个新行。

实际上，换行是固有的唯一格式表现。

可以通过的class或id应用额外的样式。

实例文档中的一个部分会显示为绿色：

ThisisaheaderThisisaparagraph.,CSS盒子模式,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。

因为用这种方式排版的网页代码简洁，更新方便。

理解CSS盒子模型在网页设计中常听的属性名：

内容（content）、填充（padding）、边框（border）、边界（margin），CSS盒子模式都具备这些属性。

CSS盒子模式这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。

那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。

在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

网页盒子模型存在两种：

1：

标准W3C盒子模型；宽=width+（padding-left）+（padding-right）+（margin-left）+（margin-right）+（border-left）+（border-right）高=height+（padding-top）+（padding-bottom）+（margin-top）+（margin-bottom）+（border-top）+（border-bottom）2：

IE盒子模型（IE浏览器默认的模型）。

在两种不同模型网页里，定义了相同CSS属性的元素显示效果是不一样的，下面就用公式来区分这两种不同的盒子模型。

宽=width+（border-left）+（border-right）高=height+（border-top）+（border-bottom）,2.层叠样式表CSS,2.1CSS概述,CSS就是CascadingStyleSheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。

网页设计最初是用HTML标记来定义页面文档及格式，例如标题、段落、表格、链接等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C（TheWorldWideWebConsortium）颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1,自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。

W3C把DHTML（DynamicHTML）分为三个部分来实现：

脚本语言（包括JavaScript、Vbscript等）、支持动态效果的浏览器（包括InternetExplorer、NetscapeNavigator等）和CSS样式表。

CSS可以精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。

使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。

注意：

CSS需要IE4（InternetExplorer4.0）和NC4（Netscape4.0）以上的浏览器支持，有些效果需要更高版本的浏览器支持。

用于（增强）控制网页样式将样式信息与网页内容分离一种标记性语言从Netscape4和IE4开始支持,W3C标准DHTML的一部分原来的HTML:

布局和内容紧紧绑定,不易修改DHTML:

布局和内容分开,可以动态（用脚本）修改,DHTML定义（InternetExplorer）DynamicStyles动态风格DynamicContent动态内容PositioningandAnimation定位和动画FiltersandTransitions过滤器和页面切换效果FontDownload字体下载DataBinding数据绑定DynamicHTMLObjectModel动态HTML对象模型（DOM）XSLExtensibleStylesheetLanguage可扩展样式语言CSS和XSL都可以用来对XML指定输出,2.2语法,1、基本语法：

CSS的定义是由三个部分构成：

选择符（selector），属性（properties）和属性的取值（value）。

基本格式如下：

selectorproperty:

value选择符属性：

值选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：

bodycolor:

black,bodycolor:

black选择符body是指页面主体部分，color是控制文字颜色的属性，blac