计算机与信息技术基础第九章_第1页
计算机与信息技术基础第九章_第2页
计算机与信息技术基础第九章_第3页
计算机与信息技术基础第九章_第4页
计算机与信息技术基础第九章_第5页
已阅读5页,还剩40页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

网页制作初步第九第九章网页制作初步9.1HTML语言9.3Web技术9.2FrontPage2003Web网页是一个文本文件,其中包含文本、图形和超链接等元素。制作网页的基本技术标准是超文本标记语言(HTML,HyperTextMarkupLanguage)。HTML是根据国际标准化组织(ISO)的广义置标语言SGML(StandardGeneralizedMarkupLanguage)标准定义的,它规定了文档的逻辑组织格式,包含了文本、图像、动画、表单和链接等多种形式。9.1HTML语言HTML(HyperTextMarkupLanguage超文本标记语言)是标准文档格式化系统,使用HTML控制信息的文本文件被称为HTML文件,也称Web文件。使用普通的文本编辑器就可以创建Web文件。方法是:在文本编辑器中,输入一段文本,再给文本加上HTML标记,然后以扩展名htm或html存盘。⒈创建简单Web页HTML文件由控制部分和正文部分组成。HTML的控制标记对大小写不敏感,同时控制标记用“<>”进行区分。⑴<HTML>和</HTML>标记,把全部源代码“括起来”,就像括号一样。⑵<HEAD>和</HEAD>标记,把全部控制部分括起来。⑶<TITLE>和</TITLE>标记,把页面标题括起来。⑷<BODY>和</BODY>标记,把全部正文部分括起来。HTML标记一般配对使用,只有少数标记单独使用。例如:

⑴<P>表示一个自然段落的结束,一般加在两个自然段落之间,此时</P>被省略。⑵<BR>表示转行(断行),不表示自然段落的结束。与<P>标记相比,<BR>标记因为产生的行间距较小,被广泛使用。⑶<HR>表示画水平线。演示例9.1超级链接是指多个Web页面通过关键字或图像连结起来,通过关键字或图的单击操作,可以自动切换内容的技术。带有“链接”的文本文件叫做超文本。链接所使用的关键字一般为蓝色下划线的文字标志,通过<AHREF=….>和</A>标记实现。⒉超级链接⑴本地链接。本地链接与网络无关,通过链接把本地的HTML文件链接起来构成信息整体。例如:包含<ahref="h1.htm">单击此处</A>⑵异地链接。通过Internet的统一资源定位器(URL),链接远程其它计算机上的HTML文件。例如:<AHREF="http://">新疆大学主页</A>。演示例文字控制

有关控制文字的HTML标记是:<FONT>…</FONT>常见的属性参数如下:SIZE=“...”规定字体的大小尺寸。COLOR=“...”规定文字的颜色。FACE="..."规定字体演示例9.3在HTML标记中,下列标记也能进行字体显示效果的控制:<SMALL>……</SMALL>规定小字体显示<BIG>……</BIG>规定大字体显示<B>……</B>规定黑体字显示<Center>…….</Center>规定文字居中对齐显示9.1.2图像和动画

插入图形或动画的标记是:<IMGSRC="文件名">有以下属性:SRC="..."图象(动画)文件的URL地址文件名。ALT="..."在图像未完全收到时,图像位置显示的文字信息。ALIGN=“...”确定图像的对齐方式。演示例整体控制页面的整体控制属性在<BODY>标记中,常用的以下属性:BACKGROUND=“...”构成背景的图片文件名。BGCOLOR=“...”背景颜色。TEXT="..."默认文本颜色。LINK="..."未被访问的文字链接源的颜色。ALINK="..."被激活的文字链接源的颜色。VLINK="..."访问过的文字链接源的颜色。BORDER=”…”图像边界的宽度,单位是像素点。演示例表格标记表格的标记是<TABLE>...</TABLE>属性语法如下:⑴边线控制:BORDER=“...”⑵宽度控制:WIDTH="..."表格的行标记是<TR>...</TR>属性语法如下:ALIGH=“...”行中单元水平对齐方式VALIGN="..."表行中垂直对齐方式表格的列标记是<TD>...</TD>属性语法如下:ALIGN="..."单元内容水平对齐方式VALIGN="..."单元内容垂直对齐方式ROWSPAN="..."该单元跨过的行数;COLSPAN="..."该单元跨过的列数。演示例其它控制标记HTML标记非常多,而且数量和规则一直还处于不断发展变化的过程中,随着可视化网页自动制作工具的迅速普及,不常用的标记已经没有必须记忆的必要。用户只要知道最常用的一些标记,就可以学习XML、ASP和JavaScript等更强劲的信息控制技术。表单包含的控制标记是:<INPUT>。<INPUT>标记具有丰富的属性参数,语法如下:TYPE=”…”表示控制部件的类型,NAME=”…”表示该控制部件的名称。SIZE=”…”表示该控制部件的大小。Value=”…”表示该控制部件所具有的值。⑴帧标记<FRAMESET>⑵表单标记<FORM>…</FORM>小结:HTML概念认识WEB页HTML标记简介9.2FrontPage2003

FrontPage2003是Microsoft公司推出的Office2003系列办公套装软件之一,使用方便,充分体现了“所见即所得”制作效果,操作简单和交互能力强的特点吸引了广大的计算机爱好者。⒈用户界面

菜单栏视图栏状态栏标题栏工具栏工作区FrontPage2003提供了6种视图方式1.网页视图 4.导航视图2.文件夹视图 5.超链接视图3.报表视图 6.任务视图网页视图上,有3种页面模式⑴普通标签 ⑵HTML标签 ⑶预览标签⒉文字符号处理

在FrontPage2003窗口的“普通”标签页面中,对文字信息输入和编辑的处理方法;常用工具和格式工具的外形也基本上与Word相似。在网页中需要重点突出的内容(大小标题等)应采用比较突出的颜色,而正文则最好采用统一的颜色。一般具有4种段落的对齐方式:左对齐、居中对齐、右对齐和两端对齐。演示例超链接在FrontPage2003中,将链接被定义为两部分组成:超链接主体和超链接目标地址。超链接主体是指引导超链接的部分(包含文本和图像)。当鼠标指针移动到超链接的主体上时,鼠标指针将会变成一个手的形状。超链接目标地址是指鼠标单击后,将要显示内容,即切换对象。演示例9.9书签用来标记网页中的信息位置,因而建立页内超链接。当一个页面文件很大或者要定位光标位置时,书签超链发挥积极的作用。创建书签超链接时,首先必须定义书签,然后再把超链接指向书签。演示例图像控制

FrontPage2003对Web中插入图像的技术,提供了比较完整的技术支持。FrontPage2003充分体现了图文混排工具的优越性,极大地加快网页制作的效率和提高网页制作的质量。演示例表格处理

在Web中,表格可以有效的组织、规划和布局页面。但是,表格标记是属于比较复杂的标记,手工编写容易出错。演示例9.16演示例动态元素

在网上浏览网页时,经常可以看到有些元素在运动,为了能够容易制作网页的动态效果,FrontPage2000提供了多种动态效果制作技术,并把这些动态元素作为组件集中在一起,通过“插入”菜单中“组件”选项(或工具栏中的组件按钮)可以插入动态元素。⒈横幅广告FrontPage2003中,可以制作几幅图片一幅幅地按照一定的切换效果不断播放,还可以控制每一幅图片显示的时间。演示例9.17⒉悬停按钮

悬停按钮是一个动感按钮,如果把鼠标移到该按钮上,就会它会改变颜色和亮度,如果单击该按钮时,就会链接到另一个页面。缺省情况下,悬停按钮是一个彩色方框的文字按钮。演示例9.18⒊字幕可以滚动的文字一般称为字幕。在很多网页中都可以看到滚动字幕,特别醒目,经常用来发布一些站点的通知或提示信息等。滚动字幕在网页中的效果是:包含一些文字或小图片的一个方框沿着一个方向滚动或来回滚动。演示例9.19⒋站点计数器

站点计数器的主要功能是显示被访问的次数。浏览者访问网页时,站点计数器中的数字就会增加,就可以实现访问统计的目的。只有将包含计数器的网页从Web服务器进行发布后,站点计数器才能正常工作。演示例9.20⒌DHTML

DHTML是表示动态元素的HTML技术。使用DHTML技术可以把所选定的网页元素设置为动态效果。演示例9.21⒍过渡效果

网页过渡效果是指当浏览者进入或离开网页时所产生的效果。9.2.5框架技术

框架技术是HTML语言提供的另一种进行页面布局的技术,用户可以将页面分成若干个子窗格,总体上有一个总控HTML文件将各个窗格联系起来,同时每个窗格里单独放置一个HTML文件。小结:认识FrontPage2003界面用FrontPage2003建立WEB页超链接功能图像控制功能表格处理功能使用动态元素使用框架9.3Web技术Web的面貌已经发生了非常重要的变化,以访问DBMS和在线商务活动等功能为代表的动态Web应用程序成为计算机发展的热门技术之一。动态Web技术也是基于客户机/服务器结构的,在总体上可分为客户端扩展技术和服务器端扩展技术两大类,以客户机/服务器应用模式为基础在客户端扩展的技术主要是JavaScript、VBScript、Perl、Applets、ActiveX、XML、CSS和Flash等。服务器端扩展的技术主要是CGI、ISAPI、NSAPI、SSI、ASP、PHP、JSP和Net等。客户端扩展技术是指浏览器中集成或增加的支持数据变动的新技术,提高了Web页面的实用化程度。客户端扩展技术可以验证交互数据的合法性,进行数据计算、分类和统计等功能,甚至可以在Web页面内制作游戏程序。⒈客户端扩展技术

演示示例为了让Web“动”起来,HTML本身的标记规则也在进一步扩展和改进,CSS(叠层式表单语言)以精良的界面装饰技术占据了不可替代的技术角色,它支持三维立体的超文本组织方式,允许设计者自己定义Web页面的样式,具有更好的易用性和扩展性。XML(扩展式标记语言)是HTML语言的改良版,支持用户自定义的控制标记,可以有效地降低阅读的复杂性。⒉标记扩展⒊服务器端扩展技术浏览器扩展技术和服务器扩展技术总是联合使用,动态Web技术的发展主流是服务器扩展技术。动态Web页面最好是服务器和浏览器共同协作,才能达到较好的网络应用效果。CGI(CommonGatewayInterface,通用公共网关接口)是最先发展起来的动态Web技术、是一种接口规范,定义了交互操作中双方必须遵守的规则集。⒋ASP(ActiveXServerPages)

ASP是微软公司面向大众化的动态Web技术方案,建立了一整套动态Web服务器环境,可使ASP指令标记与ActiveX控件程序结合使用,建立高效的动态Web应用程序。ASP指令标记(脚本)使用特殊符号(<%%>)加以标注,例如:<%=Now()%>。含有ASP脚本的Web页面以asp为后缀名,全部ASP脚本都在Web服务器端执行,Web服务器仅将执行的结果发送到浏览器端。⒌PHP(HypertextPreprocessor)PHP也是一种服务器端嵌入式脚本标记语言,其工作原理与AS

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论