网页制作————简介和超链接使用

《网页制作————简介和超链接使用》由会员分享，可在线阅读，更多相关《网页制作————简介和超链接使用（63页珍藏版）》请在金锄头文库上搜索。

1、网页程序设计基础,第 一章 网页简介和超链接 张新,课程信息,目标,掌握 HTML 文档结构和标记的使用,了解互联网,了解 HTML,在 HTML 文档中使用超链接,在 HTML 文档中使用特殊字符,使用 标记,4,网页是利用超文本标记语言HTML(HyperText Markup Languge)编写的，存放在InternetIntranet上的Web服务器中，供访问者使用浏览器来阅读。 利用HTML语言编写出来的网页又称为超文本，即网页中包含有文本、图形、声音、图像和超链接(HyperLink)等多媒体信息。 通常我们看到的网页，都是以 .htm 或 html 后缀结尾的文件，称 .HTM

2、L 文件。,5,网页是在浏览因特网时看到的一个个的页面； 文字、图片和动画等 网站是指存放在网络服务器上的完整信息的集合体：它是由一个或多个网页，按照一定的逻辑顺序，以超链接（A）方式连接在一起，形成的一组描述完整信息的整体。 首页(主页):构成网站的第一页，一般起目录、导航作用，所以又叫导航页。,6,7,互联网简介,互联网是世界上最大的计算机网络 互联网被称为网络的网络 万维网是互联网中的一个子网 WWW 包含分散在世界范围内的众多Web 服务器 （World Wide Web）,8,互联网,万维网,9,9,http:/,IE浏览器,URL 地址,网页,HTTP协议,10,协议：访问WWW上

3、的资源必须遵循超文本传输协议HyperText Transfer Protocol（HTTP） 地址：统一资源定位符Uniform Resource Locators(URL)用来标识Web上的页面和资源 HTML:超文本标记语言HyperText Markup Language用于创建可以通过Web访问的文档,www,11,WWW地址,URL 相当于一个文件名在网络范围的扩展 URL的格式： :/:/ 例如：http:/:80/index.action,12,流行的浏览器软件包括： Internet Explorer（IE） Navigator Firefox、腾讯TT、360安全浏览器、搜

4、狗等,B/S工作原理,工作原理：基于B/S(Browser/Server,浏览器/服务器)模式,静态网页技术,静态网页技术 所谓静态是指网页的内容是事先设计好的，不会根据实际情况发生变化 HTML语言（HpyerText Markup Language，超文本标记语言） 文件扩展名：.htm 或 .html 制作工具 Microsoft FrontPage Macromedia Dreamweaver Text,动态网页技术,动态网页技术 网页的内容不再是固定不变的，而会根据实际情况发生动态变化 网页里的内容很大一部分是访问数据库得到的，用户输入的信息也将被保存到数据库中 与用户的交互性大大加

5、强 分类 Server端动态网页技术 Client端动态网页技术,Server端动态网页技术 Web服务器不只是简单地将用户请求的文件发送给Client端，而是先执行相应的脚本程序（Script），通常执行的结果为HTML格式，然后将执行结果返回给浏览器进行显示 用户能够看到的只是HTML文件，而看不到脚本程序的源代码,Server端动态网页技术 CGI（Common Gateway Interface，通用网关接口） 脚本程序文件扩展名：.cgi 典型应用实例：检查用户身份,Server端动态网页技术 在HTML代码中嵌入脚本程序代码段，Web服务器同样先将脚本程序代码段执行，转变为HTML

6、代码后，返回给浏览器显示 ASP（Active Server Pages ，动态服务器主页），由Microsoft公司推出，以Visual Basic为脚本语言，文件扩展名为.asp ASP.net，是微软新一代动态服务器主页，以任何支持.net技术的语言为脚本，文件扩展名为aspx PHP，采用了类似于C语言的脚本语言，扩展名为.php JSP（Java Server Pages），以Java为脚本语言，扩展名为.jsp,Server端动态网页技术 开发工具 Visual InterDev（CGI/ASP） Visual S（ASP.net） Dreamweaver UltraDev （CG

7、I/ASP/PHP/JSP） Dreamweaver （CGI/ASP/PHP/JSP） 文本编辑器：UltraEdit,Text,Client端动态网页技术 JavaScript Plug-in（各类插件） 媒体工具类 Adobe Photoshop / Macromedia Fireworks Macromedia Flash Java语言（Java Applet） 可移植性强，可以在不改动源程序的前提下让应用程序运行于不同的操作系统平台上，适用于网络环境,21,基于web的网络应用,电子商务应用 电子商务(electronic commerce)是指通过Internet进行的各种商务活动

8、，它覆盖与商务活动有关的所有方面 电子商务是商务活动与信息技术相结合的产物，它是传统商务领域的一场巨大变革 电子商务代表着一种新的产品生产、销售与企业运营管理方式 电子商务的类型 企业与企业(business to business，B2B) 企业与消费者(business to consumer，B2C) 消费者与消费者(consumer to consumer，C2C),22,电子政务(electronic government) 通过应用信息技术，实现全部政府业务处理的电子化，达到高效、方便、透明地处理政府机关之间，政府与企业、公众的全部业务服务的目的 电子政务的类型 政府部门之间的电子

9、政务(government-to-government，G-to-G) 政府对企业的电子政务(government-to-business，G-to-B) 政府对公众的电子政务(government-to-citizen，G-to-C),23,远程教育应用 通过数字化音频、视频技术，实现文字、图像和声音的同步传输，有效解决教师与学生之间的距离与时间的限制，最大限度地共享优质的师资、授课环境、实验环境等资源，实现交互式教学 远程教育培训服务主要包括： 教育门户网站、教育频道、远程教育培训平台提供商、远程教育培训内容商等,24,博客应用 博客(blog)是以文章的形式在Internet上发表和信息

10、共享 博客在技术上属于网络共享空间，在形式上属于个人Internet出版， 博客是人们在Internet上思想交流的一种新方式 博客的主要类型 以个人的记事、表达与交流为主的博客，即个人博客 由共同关心某类问题的人或团体构成的博客社区，例如技术研讨、新闻时事等,25,播客与网络电视应用 播客是基于Internet的数字广播技术。初期的播客借助一种iPodder的软件与一些便携播放器相结合 播客录制网络语音广播节目，并传输到网络中共享给其他用户，用户可将广播节目下载到自己的播放器中收听,26,搜索引擎应用 搜索引擎(search engineer)是Internet中的一种Web服务器，它主动搜

11、索其他Web服务器中的信息并索引，将索引内容存储在可供查询的数据库中 包含Internet中各种信息的庞大数据库，它必须不断更新自己的数据库，以便反映Internet中的最新信息 常用的搜索引擎 Google搜索引擎：http:/ 百度搜索引擎：httP:/ 搜索关键字、高级搜索,27,基于P2P的网络应用,P2P(peer-to-peer) 是一种客户结点之间以对等的方式，通过直接交换信息达到共享计算机资源和服务的目的 P2P网络淡化服务提供者与服务使用者的界限 ，每个结点既是网络服务的使用者，又可以向其他客户提供资源和服务 即时通信P2P软件 流媒体P2P软件 QQ PPLive PoPo

12、 TvAnts MSN Messenger Google Talk,28,29,30,1 .HTML语言,HTML语言的发展： 80年代末在SGML的基础上产生 1994年，W3C（World Wide Web Consortium）组织对HTML进行了标准化工作 自1990年问世以来，已发行4个版本：HTML 1.0、HTML 2.0、HTML 3.0、HTML 4.0、 HTML 5.0 HTML标准的网站：http:/www.w3c.org/pub/www, HyperText Markup Language超文本标记语言,制作Web页面的基本编程语言 一系列标记的集合 用HTML编写的

13、超文本文档称为HTML文档。,手工直接编写：记事本、EditPlus等，存成.htm 或.html文件 可视化编辑器：Dreamweaver、 Frontpage等 由Web 服务器实时动态地生成：IIS、Tomcat等,1. HTML语言,HTML标签及其属性 标记:是HTML语言的基本组成部分，要用括起来。 双边标记：头标与尾标。如： 。 单边标记：只有头标。如： 标记属性：对标记的状态进行描述，出现在标记的内，属性值用“”或者引起来。常见共有属性： color 、bgcolor、background、size、width、height、align、 src。,34,HTML 开发,HTM

14、L 标记的格式组成：, . . . ,HTML 标记用于标记 HTML 文档的开始和结束,元素 - 标识标记,属性 - 描述标记,值 - 分配给属性的内容,标记:人(事物),属性:性别、头发、职业,值:女性、长头发、工程师 男性、黄头发、培训师,35,HTML 作用,使用 HTML 标记或元素，可以： 控制页面和内容的外观 发布联机文档 使用 HTML 文档中插入的链接检索联机信息 创建联机表单，收集用户的信息、执行事务等等 插入动画 开发帮助文件,36,HTML 语法示例：, 欢迎学习 HTML 我的第一个 HTML 文档 ,运行结果,37,标记, 欢迎使用 HTML 这会是一种很有趣的体验

15、 另一个段落元素 ,38,补充：关于颜色,颜色值是一个关键字或一个RGB格式的数字。 aqua，black， blue，fuchsia, gray，green， lime，maroon，navy，olive， purple，red，silver，teal，white，yellow,色彩的概述,色彩具有五颜六色，千变万化的特点。平时我们看到的白光，经过分析在色带上可以看到，事实上包括了7种颜色。色彩有冷、暖之分，其巧妙运用会达到意想不到的效果。 红色代表：热情、活泼、热闹、温暖、幸福 橙色代表：光明、华丽、兴奋、快乐。 黄色代表：明朗、愉快、高贵、希望 绿色代表：平静、和平、柔和、安静、青春 蓝色代表：永恒、沉静、理智、诚实 紫色代表：高贵、魅力、自傲 白色代表：纯洁、朴实、神圣 灰色代表：消极、谦虚、平凡、中庸、寂寞 黑色代表：坚实、严肃、粗莽,40,在 HTML 中对于颜色的定义可以用6位十六进制数。 电脑屏幕的色彩是由rgb（红、绿、蓝）三种色光所合成的，通过调整这三个基色就可以调配出其它的颜色。 每2位数代表一种颜色的浓度，三种颜色的顺序为红、绿、蓝，00代表颜色浓度最小，FF代表颜色浓度最大。 #000000代表纯黑、#FFFFFF代表