网页基础和html

《网页基础和html》由会员分享，可在线阅读，更多相关《网页基础和html（48页珍藏版）》请在金锄头文库上搜索。

1、网页设计与制作基础-html 语言侯素玲*网页设计涵盖网页美工设计HTML标记语言网页开发工具DreamweaverCSS层叠样式表JavaScript编程语言：asp、php、 jsp网页设计与制作*初识网页当计算机连接了互联网，并且安装了浏览 器后，在浏览器中输入网址（如） ，在浏览器中随即打开的就是网页。网页不但可以 提供文字、图片、多媒体信息的浏览，并且网络在 娱乐、商务及各种领域的应用，如电子邮件、搜索 引擎、电子商务、电子政务等都离不开网页。 网页实际上是一个文件，在网页上单击鼠 标右键，选择“查看源文件”，就能很清楚地看到网 页的代码结构。我们完全可以使用记事本这样的纯 文本方式

2、对文字、图片、表格、多媒体等页面元素 进行编辑，并通过标记语言对这些元素进行描述和 控制，最后由浏览器对这些标记进行解释并生成最 终呈现在我们眼前丰富多彩的页面了。*网页是什么网页：web page 存储在web站点上的一个超文本文档。 使用标记语言对文字、图片、表格、多媒体等页面 元素进行描述和控制。 网页代码可使用记事本进行纯文本编辑 最终由客户端浏览器解释标记语言，显示网页样式 。主页：home page访问一个网站的域名或IP，默认打开的页面，一般具有 主题呈现、门户导航的功能。 主流的浏览器Microsoft Internet Explorer、Mozilla Firefox 、36

3、0 安全浏览器、腾讯TT、搜狗浏览器、傲游浏览器等。 *动态网页与静态网页静态网页运行于客户端的网页和程序属于静态网页，如HTML、 Flash、JavaScript等，它们是保存在服务器上的页面文件，只有通 过编辑页面文件才能进行更新维护。 动态网页采用了动态网页技术，在服务器端运行的网页和程序属 于动态网页，它们会根据编写的程序访问数据库动态地生成页面，如 ASP、PHP、JSP、ASP.net等。使用了“动态”网页技术的网站具有 以下特点： （1）交互性。（2）自动更新。（3）因人因时而变。动静结合是网页设计的普遍原则。*网站的概念我们所熟悉的新浪、雅虎、搜狐等指的就是 网站，根据它们所

4、提供服务的不同，通常把提供网页 服务的服务器称为Web服务器，相关网站称为Web站点 。 网页实际上是一个文件，网站就是由许许多 多网页组成的，也可以通俗地理解成网站是存储在某 个服务器上包含了网页、图片、数据库和多媒体信息 等资源的一个文件夹。而形形色色的网站世界其实就 是由分散在世界上各个角落的无数服务器互联所构成 的。互联网上的任何一个浏览者，无论在哪里，都能 使用浏览器通过一些网络协议访问网络中的web站点 ，获得站点文件，共享站点资源。*网址与域名WWW（World Wide Web，万维网）是一种基于 超文本的界面友好的信息服务方式，用于查询和浏览链接 到Internet服务器上的

5、资源，由欧洲粒子物理实验室（ CERN）研制。它利用HTTP、URL、HTML等技术使用户 通过浏览器方便地查询远程站点上的文字、图像和多媒体 等信息。W3C: （World Wide Web Consortium，万维网 联盟）于1994年10月在麻省理工学院计算机科学实 验室成立，创始人为万维网之父Tim Berners-Lee。旨在 指导Web技术标准的开发。*浏览网页时在浏览器地址栏中输入地址 http:/ 浏览器访问网页是由统一资源定位器（Uniform Resource Locator， URL）的方式来实现的，它主要包含三个部分： （）网络协议。访问Web服务器需要使用 HTTP

6、协议（ HyperText Transfer Protocol，超文本传输协议）。（）站点的IP地址或域名（有时也包括端口号）。（）文件的具体地址。包含所访问的文件在站点中的 路径和文件名 。如URL: http:/ Name System，域名系统）域名就是网站的名称，在Internet中与IP地址一一对应。作 为企业的网上商标，注册申请一个符合企业特点又易于记忆的域名也很重要 。域名解析服务由DNS来完成。域名系统是一个分布式数据库系统，为 Internet上的主机分配域名地址和IP地址，根据域名与IP地址的映射关系自 动把域名地址转为IP地址。网站IP地址域名百度http:/202.1

7、08.22.5/http:/谷歌http:/74.125.71.147/http:/*网址的分层管理和分配。一个完整的域名由几个层次所组成，不同层次间用.隔开 。分析新浪中国的域名：，www为主 机名，sina是第三层次域名，com是第二层次域名，cn是国家顶级域 名。目前互联网中有两类顶级域名：（） 地理顶级域名：.cn代表中国，.jp代表日本，.uk 代表英国等等；（）类别顶级域名： .com代表商业公司；.net代表网 络机构； .org 代表组织机构；.edu代表教育机构；.gov代表政府部 门等等。域名*常用网站开发工具网页编辑工具 （）Dreamweaver（）FrontPage网

8、页美工设计工具（）Photoshop（）Fireworks（）Flash动态交互式网页编程语言（）ASP（）PHP（）JSP（）ASP.net*网页编辑工具（1）Dreamweaver。Dreamweaver是一款由Macromedia 公司（现为Adobe所并购）开发的专业的网页编辑工具，是一个优秀 的所见即所得的网页编辑器。它集网页设计与多网站管理于一身，无 论是热衷编程的代码编写者还是偏好视觉效果的界面设计者，都可以 利用它轻而易举地制作出跨平台限制和浏览器限制的网页。如果你是 网站的开发人员，你会发现Dreamweaver对动态网站的支持也毫不逊 色，使用Dreamweaver及相关的

9、服务器技术可以方便地创建功能强大 的Internet应用程序。最新版本的Dreamweaver CS3在可视化操作 XML数据、CSS样式面板、CSS可视化布局、站点管理等方面提供更 多更完善的支持。 （2）FrontPage。FrontPage是Microsoft 公司推出的一种 简单易用、功能强大的Web站点管理、网页设计工具。它也采用所见 即所得的交互方式，提供代码编辑和可视化编辑环境，简化了复杂的 程序设计过程，使设计和管理网站快速简便。作为Office系列产品， FrontPage的特点是界面简单、操作方便、容易上手，因此它也吸引 了大量网页设计爱好者的眼光。*网页美工设计工具（1）

10、Photoshop。Photoshop是Adobe公司旗下一款最为 著名也最为流行的专业平面图像处理软件。凭借其良好的操作界面、 独特的风格、专业的图像处理技术、强大的功能、灵活高效等特点， 长久以来它一直是众多平面设计师进行平面设计、图像处理的首选工 具。 （2）Fireworks。Fireworks是Macromedia公司（现为 Adobe所并购）发布的一款专为网络图形设计的图形编辑软件。使用 Fireworks可以创建和编辑位图、矢量图形，制作出精美的Gif动画， 通过可视化工具轻松实现各种动态按钮、翻转图形、下拉菜单等效果 。利用业界领先的优化工具创建和优化网络图形，可在最佳图像品质

11、 和最小图像大小之间取得平衡。 （3）Flash。Flash是Macromedia公司（现为Adobe所并 购）推出的优秀的网页动画制作软件，可用来制作幻灯片、小游戏、 MTV、广告等各种多媒体效果，也可以直接生成可执行文件，简单易 学。它和Dreamweaver、Fireworks一起被誉为Macromedia著名的网 页设计“三剑客”。 *动态交互式网页编程语言 （1）ASP。ASP（Active Server Pages，活动 服务器页面），是一套微软开发的服务器端脚本环境，内 含于IIS当中。ASP使用VBScript、JavaScript等简单易懂 的脚本语言，结合HTML编程，建立

12、和执行动态、交互且 高效的Web服务器应用程序。ASP的脚本程序在服务器端 处理，无需编译和链接即可执行，还可通过ActiveX服务 器组件扩充ASP的功能。当程序执行完毕后，服务器会将 执行的结果解释为标准的HTML格式，返回给客户浏览器 。用户端只要使用常规的浏览器，即可浏览ASP动态页面 。目前，ASP的新一代版本ASP.NET在安全性能和代码 执行效率上有较大提高。*动态交互式网页编程语言（2）PHP。PHP（Hypertext Preprocessor，超文本预处理器），是一种被广 泛应用的开放源代码的多用途脚本语言，它可嵌 入到HTML中，尤其适合Web开发。如同ASP， PHP是

13、一种混合编写到HTML文档的在服务器端 执行的脚本语言。PHP自创新的语法，类似于C 和Perl，可以简单、快速、高效地执行动态网页 。PHP支持几乎所有流行的数据库以及操作系统 ，拥有很好的跨平台兼容性。用户可以在 Windows NT系统以及多种版本的UNIX系统上运 行PHP，并且可以将PHP作为Apache Web服务 器的内置模块或CGI程序运行且消耗较少系统资 源。 *动态交互式网页编程语言（3）JSP。JSP（JavaServer Pages）是由Sun Microsystems公司倡导 ，许多公司参与一起建立的一种动态网页 技术标准。JSP是近年来发展迅速的动态网 站开发技术，

14、有着广泛的应用前景。该技 术以Java编程语言为基础的脚本语言，为 创建显示动态生成内容的Web页面提供了 一个快速而安全的方法。JSP继承了Java的 特性，具有良好的平台无关性，支持绝大 多数的服务器、浏览器和相关工具。*动态交互式网页编程语言（4）ASP.NET。ASP.NET不仅仅是ASP 的下一个版本，而是一种建立在通用语言上的程 序构架，能被用于一台Web服务器来建立强大的 Web应用程序。ASP.NET构架可以用Microsoft公 司的最新产品Visual Studio.NET开发环境进行开 发，所见即为所得地进行编辑。ASP.NET把基于 通用语言的程序在服务器上编译运行，执

15、行效率 大幅提高；平台适应性强，支持VB.NET、 C#.NET、JScript .NET等多种语言协同开发；同 时也具有管理高效、自定义性和可扩展性强、安 全性高的特点。*头部 信息文档 主体 表示该文档是HTML文档，包含了 整个文档的内容 包含了文档的头部信息，定义了一 些用于显示文档的参数，如文档标 题、meta信息、CSS样式定义等 包含了文档主体部分 ，包括正文 内容、图像、表格等元素和标记HTML的基本文档结构*（）非空元素标记： 内容 非空元素标记有.、.、 .等大部分HTML标记符。（）空元素标记：常见的空元素标记有、等。（）标记的属性：内 容说明：属性包含在起始标记内，是可选的，属性为空则用 默认值，属性间用空格分隔，属性值要加双引号。如定义水平线： 起始标记结束标记HTML的基本语法*的属性可用来设置网页的背景颜色和背景图像、文 字颜色等。这些属性包括：bgcolor（背景颜色），text（文字颜色 ），link（链接颜色），alink（活动链接颜色），vlink（已访问链接 颜色），background（背景图像url），leftmargin（左页边距）， topmargin（上页边距）。如： HTML的基本语法*认识XHTML什么是XHTMLXHTML（EXtensible