个人博客网站设计毕业论文.doc

摘 要Blog的全名应该是Web log，中文意思是“网络日志”，后来缩写为Blog，而博客(Blogger)就是写Blog的人。从理解上讲，博客是“一种表达个人思想、网络链接、内容，按照时间顺序排列，并且不断更新的出版方式”。随着互联网技术的高速发展，生活节奏的加快，博客被越来越多的人选择作为学习和交流的工具。博客的内容丰富多彩，有对其他网站的超链接和评论，有个人构思，还有新闻日志、照片、诗歌和散文等。博客具有自主性、开放性、互动性和共享性的特点，是一个很好的交流的渠道，思想展现的舞台和学术探讨的园地。本系统是一个实用的个人博客网站，集博客、留言板、链接于一身。未注册用户(访客)可以浏览文章，发表评论及留言。也可以通过注册成为该系统的注册用户，注册用户可以管理自己的博客、留言板、友情链接等，同时还可以发表新日志，上传附件等。关键词：博客，日志，评论，留言AbstractBlog full name should be the Web log, in Chinese means "Web log", later known as Blog, the blog (Blogger) who is writing Blog. From the understanding of speaking, the blog is "a personal expression of ideas, network links, content, are arranged in chronological order, and constantly update the publication of way."With the rapid development of Internet technology and high speed of life rhythm, Blog has being chosen by more and more people as the tool of study and communication. The content of Blog is very rich and colourful: some has hyperlink and comment of other website, some about personal thinking, news, music, article and so on. Because of the character of independence, open, interaction and share of Blog, it is regarded as an outlet of good exchange channel, the stage of personal thought displaying, and the garden area of knowledge studying.This system is a practical Blog website which has Blog, photo album, message board and link. Visitor can browse articles, post comments and leave messages. The visitor can register in the Blog website, after that they can manage the Blog, photo album, message board, link of friendship etc. At the same time, they can also post new log, picture etc.Keywords：Blog，log，comment，message目 录引 言- 1 -一、网页设计的需求- 2 -1.1、网站开发的背景- 2 -1.2、网页的开发环境- 2 -二、网站规划相关技术综述- 4 -2.1、网站开发工具的介绍及选择- 4 -2.1.1、网站开发工具Dreamweaver cs3介绍- 4 -2.1.2 、CSS+DIV 介绍- 6 -2.1.3、 HTML 简介- 10 -2.1.4、 IIS简介- 12 -2.1.5、 ASP简介- 14 -2.1.6、数据库技术简介- 16 -2.2、社会可行性研究- 18 -2.2.1、本课题的研究意义- 18 -2.2.2、同类课题存在的问题- 18 -2.2.3、本课题要达到的设计目标- 18 -三、网站总体设计与规划- 20 -3.1网页艺术设计介绍- 20 -3.1.1网页艺术设计的内容- 20 -3.1.2网页艺术设计的原则- 21 -3.1.3网页艺术设计的特点- 23 -3.2网站的整体布局及结构- 25 -3.2.1确定建设网站的主题与规划网站- 25 -3.2.2网页的整体布局和导航- 25 -3.3网站画面风格的设计及素材处理- 26 -3.3.1网页画面风格设计- 26 -3.3.2网页素材处理技术- 26 -3.3.3网站栏目介绍及功能简介- 28 -四、网站的详细设计与制作- 30 -4.1站点- 30 -4.1.1创建和设计站点- 30 -4.2网页制作- 34 -4.2.1创建文件夹- 34 -4.2.2创建文件- 34 -4.2.3创建欢迎flash动画- 35 -4.2.4创建主页面1.asp- 36 -4.2.5留言板及个人心情网页设计- 37 -4.2.6网站实现的主要功能- 43 -五、网站的调试及维护- 50 -5.1网站系统测试- 50 -5.2系统维护- 51 -六、结论- 53 -七、结束语- 54 -八、参考文献- 55 -九、附录- 56 -III引 言随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。在目前国内对此领域研究甚少的情况下，作者将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则和特点等三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。作者认为网页艺术设计是艺术与技术的高度统一，指出网页艺术设计包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站主题的关系的基础上，提出了“美”和“功能”都是为了更好地表达网站主题这一观点。网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。网站数量的激增，意味着网络深远的影响力已经越来越多地为人们所共识，网络已经实实在在地为人们带来了财富和知名度。于是，很多单位和个人都开始准备建立自己的网站。不论出于什么目的，所有人都希望自己建立的网站信息量丰富，功能尽可能强大。自己选择的这个个人的网站设计，首先，能丰富自己的文化知识，在建设网站的过程中能学到实际的网络知识；其次，对与即将毕业的学生，个人网站是一个很好的网络身份证明，可以让别人对自己有更好的了解。最后，有这么一个自己设计和制作的网站，可以证明用有了一定的计算机水平，这样比简单空白的文本式建立要更有说服力。一、网页设计的需求1.1、 网站开发的背景近几年来，博客及博客文化正成为互联网的热点，并被视为继email、bbs和icq之后出现的第四种网络交流方式。在网络上发表Blog的构想始于1998年，但到了2000年才真正开始流行。而2000年博客开始进入中国，并迅速发展，但都业绩平平。直到2004年木子美事件，才让中国民众了解到了博客，并运用博客。2005年，国内各门户网站，如新浪、搜狐，原不看好博客业务，也加入博客阵营，开始进入博客春秋战国时代。起初，Bloggers将其每天浏览网站的心得和意见记录下来，并予以公开，来给其他人参考和遵循。但随着Blogging快速扩张，它的目的与最初已相去甚远。目前网络上数以千计的Bloggers发表和张贴Blog的目的有很大的差异。不过，由于沟通方式比电子邮件、讨论群组更简单和容易，Blog已成为家庭、公司、部门和团队之间越来越盛行的沟通工具，因为它也逐渐被应用在企业内部网络（Intranet）。博客正在改变社会交流方式。目前，全球参与博客的人数已经达到千万之众，而且每几秒钟，都有一名新的博客用户加盟进来。很多记者、律师、教授、学者、专家，甚至法官和议员都有了自己的博客网站，形成了独特的博客文化。美国总统候选人乐于开设博客站点，作为竞选的重要手段。企业界也正在把博客方式引入企业内部网和公司网站，用于非正式的知识管理和网络营销等。政府部门和教育领域都在尝试利用博客构建内部知识管理和沟通交流的新体系，可以让职员发表评论，积累知识，链接有意思的网络资源，促进彼此的交流沟通。显然，博客的发展对应了全球范围内知识社会来临的背景。对于中国，这样一个组织机构信息化仍处于初级阶段的国家，博客这种充分发挥个人主导性和积极性的非正式知识管理工具和其深度沟通交流的功能，对于我们国家的知识传播、知识扩散和有效提升组织的学习和创新能力，具有更特殊的意义。博客用户的快速增长以及组织机构对它的广泛应用，有助于推动中国向学习型社会演进。本系统根据现实的情况以及博客互动性的特点进行设计开发，旨在为用户提供一个交流的平台，促进用户间的深度沟通；并根据博客共享性的特点，促进用户之间的知识交流，使其成为一个学习的园地。1.2、 网页的开发环境网页在制作的前期一定要考虑到网页的开发环境，因为这直接影响到网页在网络上的使用情况。同时伴随着计算机和应用软件的快速发展，系统的开发环境对与一大部分的软件已经不是那么重要，然而现阶段大多数用户所使用的的系统环境基本上是一样的，因此我们还是必须在通用性的基础上考虑到大多数用户的系统环境开发环境。第一是操作系统的选定。操作系统是计算机的操作平台，是计算机的灵魂所在，因此必须先要决定软件开发所应用的操作系统。操作系统相对比较分散，但是系统的大部分功能是通用的。如Windows xp、Win7操作系统，还有在网络服务器上广泛应用的Unix操作系统。根据应用的广泛性、普遍性和实用性，系统决定选用Win7操作系统作为软件的操作系统平台。第二是数据库软件的选定。数据库是以个数据的存储中心，数据库软件就是这个存储中心的缔造者，数据库的可用性直接影响着一个数据的多方功能。所以我选择了Microsoft SQL Server 2005可以方便地生成各种数据对象，利用存储的数据建立窗体和报表，可视性好。作为Office套件的一部分，可以与Office集成，实现无缝连接。第三是IIS服务器的安装。IIS 是Internet Information Server的缩写，它是微软公司主推的服务器，最新的版本是Windows2003里面包含的IIS 6.0，IIS与WindowNT Server完全集成在一起，因而用户能够利用Windows NT Server和NTFS（NT File System，NT的文件系统）内置的安全特性，建立强大，灵活而安全的Internet和Intranet站点。 IIS支持HTTP（Hypertext Transfer Protocol，超文本传输协议），FTP（Fele Transfer Protocol，文件传输协议）以及SMTP协议，通过使用CGI和ISAPI，IIS可以得到高度的扩展。 IIS支持与语言无关的脚本编写和组件，通过IIS，开发人员就可以开发新一代动态的，富有魅力的Web站点。IIS不需要开发人员学习新的脚本语言或者编译应用程序，IIS完全支持VBScript，JScript开发软件以及Java，它也支持CGI和WinCGI，以及ISAPI扩展和过滤器。IIS的设计目的是建立一套集成的服务器服务，用以支持HTTP，FTP和SMTP，它能够提供快速且集成了现有产品，同时可扩展的Internet服务器。第三章、网站规划相关技术综述、网站开发工具的介绍及选择2.1.1、网站开发工具Dreamweaver cs3介绍Dreamweaver是美国Adobe(原Macromedia，2005年被Adobe收购)公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它不仅是优秀的WYSIWYG编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提供各种示例代码，并支持Javascript,PHP,ASP,JSP等多种脚本语言。Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。主要功能1.业界领先的工具利用世界级的 Web 设计工具的所有灵活性和强大功能。在“设计”视图中进行像素完美型设计, 在“代码”视图中制作复杂的代码, 或专功一方面的研究。使用您的最佳工作方式工作。2.集成的工作流在 Dreamweaver CS3 内设计、开发和维护内容, 同时利用与其他 Adobe 工具 (包括 Adobe Flash CS3 Professional、Fireworks CS3、Photoshop CS3、Contribute CS3 及用于创建移动设备内容的全新 Adobe Device Central CS3) 的智能集成。3.完整的 CSS 支持发现可视 CSS 工具的优势, 使用这些工具可以轻松地在文件内或文件之间查看、编辑和移动样式, 以及查明您的更改将如何影响设计。借助全新的 CSS 布局加速您的工作流, 并借助全新的浏览器兼容性检查测试您的设计。4.集成的编码环境借助代码折叠、颜色编码、行号及带有注释/取消注释和代码片断的编码工具栏, 组织并加速您的编码。应用适用于 HTML 和服务器语言的代码提示。5.支持领先的技术利用对领先 Web 开发技术 (包括 HTML、XHTML、CSS、XML、Javas cript、Ajax、PHP、Adobe ColdFusion、ASP、ASP.NET 和 JSP) 的支持。6.轻松的 XML使用 XSL 或适合于 Ajax 的 Spry 框架, 快速集成 XML 内容。指向 XML 文件或 XML feed URL, Dreamweaver CS3 将显示其内容, 这使您能够将适当的字段拖放到您的页面上。7.FLV 支持无需任何 Flash 知识, 只需五次点击, 即可轻松地将 FLV 文件添加到您的 Web 页中。自定义视频环境以匹配您的网站。8.学习资源在您使用全面的教程、参考内容和指导性模板的同时进行学习, 这样可轻松扩展您的技能集并采用最新的技术。9.扩展的 Dreamweaver 社区享受庞大的 Dreamweaver 社区的所有益处, 包括在线 Adobe 设计中心和 Adobe 开发人员中心、培训和研讨会、开发人员认证计划、用户论坛以及 Dreamweaver Exchange 中提供的超过 1,000 个可下载的扩展。10.跨平台支持挑选您的平台: Dreamweaver CS3 可用于基于 Intel 或 PowerPC 的 Macintosh 计算机, 也可用于 Windows XP 和 Windows Vista 系统。在您的首选平台中设计, 然后跨平台交付更加可靠、一致和高性能的结果。2.1.2 、CSS+DIV 介绍CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。在网页上使用样式表有三种方法可以在站点网页上使用样式表：u 将网页链接到外部样式表。u 在网页上创建嵌入的样式表。u 应用内嵌样式到各个网页元素。u 每一种方法均有其优缺点：当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表 中作一次更改 而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 <HEAD> 标记符内。嵌入的样式表中的样式只能在同一网页上使用。使用内嵌样式以应用级联样式表属性到网页元素上。如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。当创建或修改网页样式时，可使用位于 “格式” 菜单的 “样式” 命，Dreamweaver会自动创建嵌入的样式表（如果原先不存在），并在嵌入的样式表内将此样式保存为类选择器。可以使用 “样式” 对话框来创建新类选择器，修改或删除现有类选择器，或将 CSS 格式设置属性应用到标准 HTML 标记符上例如 <H1>。当单击 “确定” 关闭对话框时，Dreamweaver会将格式设置特征写回到使用正确语法的外部或嵌入的样式表中。或者，可以用正确 CSS 语法键入样式信息。要键入嵌入的样式表的样式信息，请单击网页视图模式下的 “HTML” 选项卡。如果对应用到站点的主题选择 “应用 CSS ” 复选框，Dreamweaver 将在站点的根目录下创建名为 Theme 1 .css 的文件，其中 Theme 是主题的名称。如果修改主题，Dreamweaver自动将更改写回主题 CSS 里。也可以通过直接编辑主题 CSS 来修改主题。DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。作用：设定字、画、表格等的摆放位置。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。以以下内容为例：align="center"可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右的作用和居中标记 <CENTER>一样，前者是由 HTML3.0 开始 的标准，后者是通用己久的标示法。CSS单元的位置和层次-div标签我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为浏览器和操作平台不同会使显示的结果发生变化。而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有.还有.你自己慢慢看吧！Cascading Style Sheets（CSS）是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS 和 CSSP。下面四个英文网址提供了详细的关于 CSS 和 CSS-P 的文件和解释。当我们使用 CSS-P 的时候， 我们主要把它用在 DIV（division）tag 上。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中HTML。使用 DIV 的方法跟使用其他 tag 的方法一样：This is a DIV tag .如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用是一样的。但当我们把 CSS-P 用到 DIV 中去以后，我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 JavaScript 来控制它， 比如说移动它或改变它的一些性质等等。This is a truck给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。Inline CSS：Inline 是最常用的方法。This is a truck .External STYLE tag：使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的关系。<STYLE TYPE="text/css"><!-#truck styles go here-></STYLE>This is a truck .Cross-Browser CSS 性质：我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工作， 所以我们主要讨论那些对俩者都通用的性质。下面这些性质符合由 W3C 给出的标准。position决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的，而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。left相对于窗口左边的位置top相对于窗口上边的位置widthDIV tag 的宽度。所有在 DIV 里的文字或html都在里面。heightDIV tag 的高度。这个性质很少用除非你想 Clip 层次。clip给出 layer 的 clipping（可看的见的）部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。clip:rect(top,right,bottom,left);visibility隐蔽或展现DIV 根据它的值“visible”，“hidden”，“inherit”。z-indexDIV tag 的立体位置。值越大 DIV 的位置越高。background-colorDIV 背景的颜色。layer-background-colorNetscape 的 DIV 背景颜色。background-imageDIV 的背景图象。layer-background-imageNetscape 的 DIV 的背景图象。绝对定位和相对定位 （position）绝对定位：定位属性将是网虫们打开幸福之门的钥匙：H4 ; left: 100px; top: 43px 这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。相对定位：绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：I ; left: 40px; top: 10px 相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。定位单元的控制 （width、height、visiblility）除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。DIV ; left: 200px; top: 40px; width: 150px 浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落最大水平尺寸限制在150象素。宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。IE 4中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：DIV ; left: 200px; top: 40px; height: 150px 这里我用了“理论上讲”，因为有些浏览器不支持高度属性。可视性：利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。H4 visibility: hidden 选项：visible 使要素可以被看见hidden 使要素被隐藏inherit 指它将继承母体要素的可视性设置。值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。2.1.3、 HTML 简介HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，HTML语言的特点如下：1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。一个HTML文件由一个HTML元素组成，即文件以<HTML>开始。以</HTML>结束，文档中其他元素及其属性的声明都是HTML的元素体。HTML元素的元素体和元素体由两大部分组成，即头元素<head></head>和体元素<body></body>。头元素和体元素的元素体又由其他元素、文本和注释等组成。一个标准的HTML文件应该具备如下结构：<HTML> 标记一个HTML文件的开始<HEAD> HTML文件的文件头部分开始文件头部分内容</HEAD> HTML文件的文件头部分结束<BODY> HTML文件的文件体部分开始文件体</BODY>HTML文件的文件部分结束</HTML>标记该HTML文件结束有些元素只能出现在头元素中，如meta、title等元素，而大多数的元素只能出现在体元素中。在头元素中的元素表示的是该HTML文件的一般信息，比如该文件的标题、来源、作者、版本、字符集和关键字等，这些元素与书写的顺序无关，它们只是表明该HTML文件的属性值。但出现在元素体中的元素则是要注意书写顺序的，改变了它们的书写顺序就会改变HTML文件在浏览器上输出的形式。HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。由此可见，网页的本质就是HTML，通过结合使用其他的Web技术（如：脚本语言、CGI、组件等），可以创造出功能强大的网页。因而，HTML是Web编程的基础，也就是说万维网是建立在超文本基础之上的。每种HTML标记符在使用中可带有不同的属性项，用于描述该标记符说明的内容显示不同的效果。正文标记符中提供以下属性来改变文本的颜色及页面背景。BGCOLOR 用于定义网页的背景色，BACKGROUND用于定义网页背景图案的图像文件TEXT 用于定义正文字符的颜色，默认为黑色LINK用于定义网页中超级链接字符的颜色，默认为蓝色VLINK 用于定义网页中已被访问过的超接链接字符的颜色，默认为紫红色ALINK 用于定义被鼠标选中，但未使用时超链字符的颜色，默认为红色例如：标记将定义页面的背景色为黑色，正文字体显示为白色。以上属性使用中，需要对颜色进行说明，在HTML中对颜色可使用2种方法说明颜色属性值，即颜色名称（英文名）和颜色值。其中颜色值用6个十六进制数来分别描述红、绿、蓝三原色的配方法称为RGB值，每2个十六进制数表示一种颜色。使用颜色值时，应在值前冠以“#”号。使用图案代替背景颜色，可以使页面更生动、美观。可将图像文件image.gif所表示的一幅图像作为页面的背景，若图像幅面不够大，将会将图像重复平铺在窗口中。2.1.4、 IIS简介IIS(Inter-IC Sound bus)又称I2S，是菲利浦公司提出的串行数字音频