如何开发个人主页.docx

上传人:b****0 文档编号:17167000 上传时间:2023-07-22 格式:DOCX 页数:41 大小:2.29MB
下载 相关 举报
如何开发个人主页.docx_第1页
第1页 / 共41页
如何开发个人主页.docx_第2页
第2页 / 共41页
如何开发个人主页.docx_第3页
第3页 / 共41页
如何开发个人主页.docx_第4页
第4页 / 共41页
如何开发个人主页.docx_第5页
第5页 / 共41页
如何开发个人主页.docx_第6页
第6页 / 共41页
如何开发个人主页.docx_第7页
第7页 / 共41页
如何开发个人主页.docx_第8页
第8页 / 共41页
如何开发个人主页.docx_第9页
第9页 / 共41页
如何开发个人主页.docx_第10页
第10页 / 共41页
如何开发个人主页.docx_第11页
第11页 / 共41页
如何开发个人主页.docx_第12页
第12页 / 共41页
如何开发个人主页.docx_第13页
第13页 / 共41页
如何开发个人主页.docx_第14页
第14页 / 共41页
如何开发个人主页.docx_第15页
第15页 / 共41页
如何开发个人主页.docx_第16页
第16页 / 共41页
如何开发个人主页.docx_第17页
第17页 / 共41页
如何开发个人主页.docx_第18页
第18页 / 共41页
如何开发个人主页.docx_第19页
第19页 / 共41页
如何开发个人主页.docx_第20页
第20页 / 共41页
亲,该文档总共41页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

如何开发个人主页.docx

《如何开发个人主页.docx》由会员分享,可在线阅读,更多相关《如何开发个人主页.docx(41页珍藏版)》请在冰点文库上搜索。

如何开发个人主页.docx

如何开发个人主页

 

 

摘要

随着现代计算机科学的发展,网络已经越来越普及,如今网络已经成为每个人生活的一部分,同时网络也提供了一种很好的信息交换平台,而个人主页是一个可以在网络上展示个人信息的方便手段。

本文介绍了如何开发个人网站。

首先介绍开发工具ASP,HTML等技术,然后详细讲解了个人主页的开发。

 

关键词:

个人主页,HTML技术,ASP技术

Abstract

Alongwiththemoderncomputersciencedevelopment,thenetworkalreadymoreandmorepopularized,nowthenetworkalreadybecameaparteachpersonlife,atthesametimethenetworkhasalsoprovidedonekindofverygoodexchangeofinformationplatform,butindividualmainpagewasmaydemonstrateindividualinformationinthenetworktheconvenientmethod.Thisarticleintroducedhowdevelopsindividualwebsite.Firstintroduceddevelopmentkit—ASPtechnologyandHTMLtechnology,thenindetailexplainedindividualmainpagedevelopment.

 

Keywords:

Individualwebsite,HTMLTechnology,ASPTechnology

第一章引言

随着计算机及网络技术的飞速发展,Internet/Intranet应用在全球范围内日益普及,在众多的网络服务中,Web给人耳目一新的感觉,而在这其中,网站已经日渐普及,而且发展到今天,已经成为任何人可以在网络所提供的平台上进行个性展示的新型方式。

在众多网络开发技术中,HTML是一种重要的基本开发技术,而ASP技术是当前相当热门,它可以进行复杂的数据库操作、很强的交互性以及方便用户控制管理。

该个人主页正是当今技术发展的产物,它是一套用HTML,ASP开发的能在网上进行的访问的个人网页,此论文主要阐述的就是使用HTML,ASP技术的个人主页的开发。

第二章HTML简介

2.1什么是HTML

HTML(HyperTextMarkupLanguage,超文本标记语言),或称为“多媒体文件语言”,是用于创建Web页和Web信息发布的第一个通用语言。

HTML以其简单精练的语法、极易掌握的通用性与易学性,使Web网页可以亲近于每一个普通人,网络也才得以普及发展,以至今日的辉煌。

HTML语言主要有以下几个特性:

(1)通用性:

可实现不同平台的文档共享。

(2)可扩展性:

HTML的标签集合可以根据新需求而不断修正或加入有限的新标签符,为实现有限的新功能的扩展提供保障。

(3)创建的灵活性:

HTML文档是纯文本文档,可以由网页编辑器以及其他文本编辑软件创建。

HTML是“HyperTextMarkupLanguage”的缩写,它是一种超文本标记语言,是网页的描述语言,用于编制通过万维网显示的超文本文件。

它是目前在网页设计中,所使用的最基本的标记语言。

现在很多HTML的编辑器,都是通过跟文字处理器相似的接口来编辑网页的。

有了这些编辑工具,即使对HTML没有深入的认识,仍能编写出个人网页。

这类网页编辑工具包括Dreamweaver和Frontpage。

使用这些工具时,有时候可能会奇怪,为什么会看不到HTML的存在呢?

事实上,网页所使用的原始码正是HTML。

虽然不需要成为一个HTML的专家,但学会一点基本的HTML,对编写网页,肯定是有好处的。

2.2HTML标记

标记

类型

译名或意义

作用

备注

文件标记

文件声明

让浏览器知道这是HTML文件

 

开头

提供文件整体资讯

 

</p><p>●</p><p>标题</p><p>定义文件标题,将显示于浏览顶端</p><p> </p><p><BODY></p><p>●</p><p>本文</p><p>设计文件格式及内文所在</p><p> </p><p>排版标记</p><p><!</p><p>--注解--></p><p>○</p><p>说明标记</p><p>为文件加上说明,但不被显示</p><p> </p><p><P></p><p>○</p><p>段落标记</p><p>为字、画、表格等之间留一空白行</p><p> </p><p><BR></p><p>○</p><p>换行标记</p><p>令字、画、表格等显示于下一行</p><p> </p><p><HR></p><p>○</p><p>水平线</p><p>插入一条水平线</p><p> </p><p><CENTER></p><p>●</p><p>居中</p><p>令字、画、表格等显示于中间</p><p>反对</p><p><PRE></p><p>●</p><p>预设格式</p><p>令文件按照原始码的排列方式显示</p><p> </p><p><DIV></p><p>●</p><p>区隔标记</p><p>设定字、画、表格等的摆放位置</p><p> </p><p><NOBR></p><p>●</p><p>不折行</p><p>令文字不因太长而绕行</p><p> </p><p><WBR></p><p>●</p><p>建议折行</p><p>预设折行部位</p><p> </p><p>字体标记</p><p><STRONG></p><p>●</p><p>加重语气</p><p>产生字体加粗Bold的效果</p><p> </p><p><B></p><p>●</p><p>粗体标记</p><p>产生字体加粗的效果</p><p> </p><p><EM></p><p>●</p><p>强调标记</p><p>字体出现斜体效果</p><p> </p><p><I></p><p>●</p><p>斜体标记</p><p>字体出现斜体效果</p><p> </p><p><TT></p><p>●</p><p>打字字体</p><p>Courier字体,字母宽度相同</p><p> </p><p><U></p><p>●</p><p>加上底线</p><p>加上底线</p><p>反对</p><p><H1></p><p>●</p><p>一级标题标记</p><p>变粗变大加宽,程度与级数反比</p><p> </p><p><H2></p><p>●</p><p>二级标题标记</p><p>将字体变粗变大加宽</p><p> </p><p><H3></p><p>●</p><p>三级标题标记</p><p>将字体变粗变大加宽</p><p> </p><p><H4></p><p>●</p><p>四级标题标记</p><p>将字体变粗变大加宽</p><p> </p><p><H5></p><p>●</p><p>五级标题标记</p><p>将字体变粗变大加宽</p><p> </p><p><H6></p><p>●</p><p>六级标题标记</p><p>将字体变粗变大加宽</p><p> </p><p><FONT></p><p>●</p><p>字形标记</p><p>设定字形、大小、颜色</p><p>反对</p><p><BASEFONT></p><p>○</p><p>基准字形标记</p><p>设定所有字形、大小、颜色</p><p>反对</p><p><BIG></p><p>●</p><p>字体加大</p><p>令字体稍为加大</p><p> </p><p><SMALL></p><p>●</p><p>字体缩细</p><p>令字体稍为缩细</p><p> </p><p><STRIKE></p><p>●</p><p>画线删除</p><p>为字体加一删除线</p><p>反对</p><p><CODE></p><p>●</p><p>程式码</p><p>字体稍为加宽如<TT></p><p> </p><p><KBD></p><p>●</p><p>键盘字</p><p>字体稍为加宽,单一空白</p><p> </p><p><SAMP></p><p>●</p><p>范例</p><p>字体稍为加宽如<TT></p><p> </p><p><VAR></p><p>●</p><p>变数</p><p>斜体效果</p><p> </p><p><CITE></p><p>●</p><p>传记引述</p><p>斜体效果</p><p> </p><p><BLOCKQUOTE></p><p>●</p><p>引述文字区块</p><p>缩排字体</p><p> </p><p><DFN></p><p>●</p><p>述语定义</p><p>斜体效果</p><p> </p><p><ADDRESS></p><p>●</p><p>地址标记</p><p>斜体效果</p><p> </p><p><SUB></p><p>●</p><p>下标字</p><p>指数</p><p> </p><p><SUP></p><p>●</p><p>下标字</p><p>下标字</p><p> </p><p>清单标记</p><p><OL></p><p>●</p><p>顺序清单</p><p>清单项目将以数字、字母顺序排列</p><p> </p><p><UL></p><p>●</p><p>无序清单</p><p>清单项目将以圆点排列</p><p> </p><p><LI></p><p>○</p><p>清单项目</p><p>每一标记标示一项清单项目</p><p> </p><p><MENU></p><p>●</p><p>选单清单</p><p>清单项目将以圆点排列,如<UL></p><p>反对</p><p><DIR></p><p>●</p><p>目录清单</p><p>清单项目将以圆点排列,如<UL></p><p>反对</p><p><DL></p><p>●</p><p>定义清单</p><p>清单分两层出现</p><p> </p><p><DT></p><p>○</p><p>定义条目</p><p>标示该项定义的标题</p><p> </p><p><DD></p><p>○</p><p>定义内容</p><p>标示定义内容</p><p> </p><p>表格标记</p><p><TABLE></p><p>●</p><p>表格标记</p><p>设定该表格的各项参数</p><p> </p><p><CAPTION></p><p>●</p><p>表格标题</p><p>做成一打通列以填入表格标题</p><p> </p><p><TR></p><p>●</p><p>表格列</p><p>设定该表格的列</p><p> </p><p><TD></p><p>●</p><p>表格栏</p><p>设定该表格的栏</p><p> </p><p><TH></p><p>●</p><p>表格标头</p><p>相等于<TD>,但其内之字体会变粗</p><p> </p><p>表单标记</p><p><FORM></p><p>●</p><p>表单标记</p><p>决定单一表单的运作模式</p><p> </p><p><TEXTAREA></p><p>●</p><p>文字区块</p><p>提供文字方盒以输入较大量文字</p><p> </p><p><INPUT></p><p>○</p><p>输入标记</p><p>决定输入形式</p><p> </p><p><SELECT></p><p>●</p><p>选择标记</p><p>建立pop-up卷动清单</p><p> </p><p><OPTION></p><p>○</p><p>选项</p><p>每一标记标示一个选项</p><p> </p><p>图形标记</p><p><IMG></p><p>○</p><p>图形标记</p><p>用以插入图形及设定图形属性</p><p> </p><p>连结标记</p><p><A></p><p>●</p><p>连结标记</p><p>加入连结</p><p> </p><p><BASE></p><p>○</p><p>基准标记</p><p>可将相对URL转绝对及指定连结目标</p><p> </p><p>框架标记</p><p><FRAMESET></p><p>●</p><p>框架设定</p><p>设定框架</p><p> </p><p><FRAME></p><p>○</p><p>框窗设定</p><p>设定框窗</p><p> </p><p><IFRAME></p><p>○</p><p>页内框架</p><p>于网页中间插入框架</p><p>IE</p><p><NOFRAMES></p><p>●</p><p>不支援框架</p><p>设定当浏览器不支援框架时的提示</p><p> </p><p>影像地图</p><p><MAP></p><p>●</p><p>影像地图名称</p><p>设定影像地图名称</p><p> </p><p><AREA></p><p>○</p><p>连结区域</p><p>设定各连结区域</p><p> </p><p>多媒体</p><p><BGSOUND></p><p>○</p><p>背景声音</p><p>于背景播放声音或音乐</p><p>IE</p><p><EMBED></p><p>○</p><p>多媒体</p><p>加入声音、音乐或影像</p><p> </p><p>其他标记</p><p><MARQUEE></p><p>●</p><p>走动文字</p><p>令文字左右走动</p><p>IE</p><p><BLINK></p><p>●</p><p>闪烁文字</p><p>闪烁文字</p><p>NC</p><p><ISINDEX></p><p>○</p><p>页内寻找器</p><p>可输入关键字寻找于该一页</p><p>反对</p><p><META></p><p>○</p><p>开头定义</p><p>让浏览器知道这是HTML文件</p><p> </p><p><LINK></p><p>○</p><p>关系定义</p><p>定义该文件与其他URL的关系</p><p> </p><p>StyleSheet</p><p><STYLE></p><p>●</p><p>样式表</p><p>控制网页版面</p><p> </p><p><span></p><p>●</p><p>自订标记</p><p>独立使用或与样式表同用</p><p> </p><p>注:</p><p>第三章ASP技术</p><p>3.1ASP产生的历史</p><p>最初,当网络技术兴起的时候,基于WEB的应用程序是有包含静态内容的HTML页面组成,这些页面不能够根据用户执行的操作进行动态响应。</p><p>这种类型只是提供了用户与网站之间受限制的交互。</p><p>随着浏览网站的用户数量的增长,产生了对于动态响应用户操作的WEB页面的需求,为了是开发者创建带有动态内容的WEB页面,Microsoft公司的ASP由此产生。</p><p>使用ASP,能构创建具有交互性的商业应用程序。</p><p>如交互式动态网页,对数据库的数据的操作,表单收集和处理信息,上传与下载等等。</p><p>3.2ASP的含义</p><p>ASP包含三方面含义:</p><p>  1、Active:</p><p>ASP使用了Microsoft的ActiveX技术。</p><p>ActiveX(COM)技术是现在Microsoft软件的重要基础。</p><p>它采用封装对象,程序调用对象的技术,简化编程,加强程序间合作。</p><p>ASP本身封装了一些基本组件和常用组件,有很多公司也开发了很多实用组件。</p><p>只要你可以在服务器上安装这些组件,通过访问组件,你就可以快速、简易地建立自己的WEB应用。</p><p>  2、Server:</p><p>ASP运行在服务器端。</p><p>这样就不必担心浏览器是否支持ASP所使用的编程语言。</p><p>ASP的编程语言可以是VBSCRIPT和JSCRIPT。</p><p>VBSCRIPT是VB的一个简集,会VB的人可以很方便的快速上手。</p><p>然而Netscape浏览器不支持客户端的VBSCRIPT,所以最好不要在客户端使用VBSCRIPT。</p><p>而在服务器端,则无需考虑浏览器的支持问题。</p><p>Netscape浏览器也可以正常显示ASP页面。</p><p>  3、Pages:</p><p>ASP返回标准的HTML页面,可以正常地在常用的浏览器中显示。</p><p>浏览者查看页面源文件时,看到的是ASP生成的HTML代码,而不是ASP程序代码。</p><p>这样就可以防止别人抄袭程序。</p><p>由此可以看出,ASP是在IIS下开发WEB应用的一种简单、方便的编程工具。</p><p>在了解了VBSCRIPT的基本语法后,只需要清楚各个组件的用途、属性、方法,就可以轻松编写出自己的ASP系统。</p><p>3.3ASP的工作过程</p><p>1.浏览器向WEB服务器发送一个对ASP页面的请求。</p><p>2.WEB服务器接受请求并且从内存或者硬盘之中检索ASP文件。</p><p>3.WEB服务器将请求转发给一个名为asp.dll的文件来执行。</p><p>4.ASP文件将包含在符号<%和%>之中的命令自动而下的执行。</p><p>当遇到任何与Active脚本兼容的脚本(如VBScript、JavaScript)时ASP引擎调用相应的脚本引擎解释执行其中的脚本命令,若脚本中含有访问数据库的请求,则通过ODBC连结后台数据库,由数据库访问组件ADO(ActiveDataObject)执行访库操作,最后执行的结果是一个标准的HTML文件。</p><p>5.将HTML文件送回到服务器。</p><p>6.WEB浏览器解释HTML文件,并且显示结果。</p><p>图1</p><p> </p><p>3.4ASP对象</p><p>ASP提供一些内建对象,包括一些方法,属性。</p><p>对象的方法用来和对象一起执行一些任务。</p><p>对象属性用来设置对象指定状态的值。</p><p>主要对象说明如下:</p><p>SERVER对象:</p><p>这个对象用来提供对于WEB服务器的方法和属性的访问。</p><p>它提供创建一个对象的实例,设置一个脚本的超时范围以及编码字符串等方法。</p><p>它能够存储用户定义的变量,并且还包括那些直接和服务器联系的变量。</p><p>REQUEST对象:</p><p>这个对象用来判定关于通过一个HTTP请求传递的特定的用户请求的信息,比如该请求是一个GET请求还是一个POST请求,以及在头文件之中的COOKIES等。</p><p>RESPONSE对象:</p><p>这个对象用来控制从服务器发送给客户端的响应</p><p>APPLICATION对象:</p><p>这个对象用来处理所有应用程序共享的WEB应用程序。</p><p>WEB应用程序是一个脚本和WEB页面的集合。</p><p>SESSION对象:</p><p>这个对象用来存储一个特定用户会话所需要的用户信息。</p><p>在SESSION对象之中存储变量信息在用户浏览WEB应用程序的整个会话期间都得以保留。</p><p>ASP引擎使用客户端COOKIES来跟踪客户。</p><p>存储在Session对象之中的变量对于用户是可以得到的,即使用户在应用程序之中正在浏览页面。</p><p>3.5ASP的安全特性和优点概括</p><p>ASP的安全特性是由于ASP脚本是在WEB服务器上进行处理的,WEB服务器产生传送给浏览器的WEB页面,因此,浏览器的出现问题不会影响到脚本的处理。</p><p>ASP的另一个安全特性是用户不能观看到并且复制到创建的脚本文件,因为发送给浏览器的只是处理结果。</p><p>ASP的主要优点大概可以归纳如下:</p><p>1、可以用VBScript或JScript创建脚本,同时结合HTML语言就能够非常方便地完成网站的应用程序。</p><p>对于VBScript和JScript,使用哪种语言并不重要,Web服务器等同地处理这两种语言,并向用户的浏览器发送HTML格式化结果。</p><p>2、因为ASP采用Script语言(VBScript和JScript)就可以轻松编写程序,因此这就大节省了网络设计人员又得重新学习一种新语言的时间。</p><p>而且编写ASP无须手工compile编译或链接程序,可在服务器端直接执行,这无疑是更加方便了我们的编写过程。</p><p>3、使用普通的使用记事本之类的文本编辑器,即可进行编辑设计,如:</p><p>Windows的记事本。</p><p>建议不要用FontPage98或DreamWeaver2.0等主页制作软件修改,因为他们会破坏源代码的。</p><p>在这里我建议使用CuteFTP携带的CuteHTML编辑器进行编辑设计。</p><p>4、ASP是运行在服务器端,所以我们无须担心浏览器是否支持ASP所使用的编程语言,用户端只要使用可执行HTML码的浏览器,即可浏览ActiveServerPages所设计的网页内容。</p><p>ASP在服务器端运行,当程序执行完毕后,服务器仅将执行的结果返回给客户浏览器,这样也就减轻了客户端浏览器的负担,大大提高了交互的速度。</p><p>第四章后台数据库的建立</p><p>4.1ASP访问数据库原理</p><p>ASP是一个服务器的脚本环境,内嵌在HTML页面中的脚本程序在这里运行并建立Web服务器应用程序。</p><p>在ASP脚本中可以通过三种方式访问数据库:</p><p>传统的IDC(InternetDatabaseConnector)、ADO(ActiveXDataObject)和RDS(RemoteDataServer)。</p><p>其中ADO是ASP内置的数据库存取组件,各种脚本和语言均可调用它实现对数据库的直接访问,并利用相应的数据接口显示查询结果。</p><p>ADO拥有强大的活力,它是位于ODBC和OLEDB之上的高性能数据库操作接口,提供了开放的数据操作对象模型,允许开发人员使用任何语言和统一的编程模式操作各种与ODBC和OLEDB兼容的数据库,如MicrosoftAccess、FoxPro、MicrosoftSQLServer、Oracle等。</p><p>ADO的简单易行、应用广泛使之成为ASP访问数据库所采用的最佳选择。</p><p>这种对数据库的访问方式是由InternetInformationServer来完成的。</p><p>执行过程如图所示:</p><p>A)浏览器:</p><p>用户通过Web浏览器用HTTP协议向Internet信息服务器(IIS)发出请求。</p><p>B)服务器:</p><p>服务器检查网页文件的类型,对扩展名是.asp的文件服务器调用ASP系统程序,解释执行被请求页面文件的所有脚本命令。</p><p>若脚本中含有对数据库的请求,服务器就执行连接访问数据库的操作,并将结果以HTML格式送回用户浏览器作为响应。</p><p>C)数据库:</p><p>储存了动态交互所需的信息数据,用户可通过指令对其进行查询、修改、添加、删除等操作。</p><p>4.2建立数据库表</p><p>此个人主页使用ASP的只由留言板块,利用数据库原理相关知识,对数据库设计和每个模块、每个界面的具体设计。</p><p>此系统采用的数据库软件是MicrosoftAccess。</p><p>进行分析设计后,应该用Access建立17张表。</p><p>各表结构信息具体见如下表1——表17。</p><p>字段名</p><p>数据类型</p><p>说明</p><p>id</p><p>自动编号</p><p>管理员的自动编号</p><p>admin</p><p>文本</p><p>管理员的姓名</p><p>password</p><p>文本</p><p>管理员的密码</p><p>表1管理员表</p><p>字段名</p><p>数据类型</p><p>说明</p><p>ID</p><p>自动编号</p><p>自动编号</p><p>userweb</p><p>文本</p><p>网站名称</p><p>url</p><p>文本</p><p>网站网址</p><p>username</p><p>文本</p><p>站长姓名</p><p>mail</p><p>文本</p><p>站长信箱</p><p>maxsize</p><p>数字</p><p>每页显示留言数</p><p>booktime</p><p>数字</p><p>发贴间隔时间</p><p>表2配置表</p><p>字段名</p><p>数据类型</p><p>说明</p><p>ID</p><p>文本</p><p>编号</p><p>user</p><p>文本</p><p>姓名</p><p>sex</p><p>文本</p><p>性别</p><p>adress</p><p>文本</p><p>访问地区</p><p>face</p><p>文本</p><p>头像</p><p>QQ</p><p>文本</p><p>QQ</p><p>mail</p><p>文本</p><p>访问邮箱</p><p>url</p><p>文本</p><p>个人主页</p><p>em</p><p>文本</p><p>表情</p><p>title</p><p>文本</p><p>留言标题</p><p>content</p><p>备注</p><p>留言内容</p><p>IP</p><p>文本</p><p>访问客IP</p><p>hide</p><p>是/否</p><p>是否悄悄话</p><p>time1</p><p>日期/时间</p><p>留言日期</p><p>replytitle</p><p>文本</p><p>回复主题</p><p>reply</p><p>备注</p><p>回复</p><p>time2</p><p>日期/时间</p><p>回复日期</p><p>表3个人信息表</p><p>字段名</p><p>数据类型</p><p>说明</p><p>ID</p><p>自动编号</p><p>自动编号</p><p>IP</p><p>文本</p><p>被封IP</p><p>content</p><p>文本</p><p>被封原因</p><p>locktime</p><p>日期/时间</p><p>被封日期</p><p>表4封锁IP表</p><p>然后是根据对该系统做出的整体的分析和设计,开始在FRONTPAGE环境下使用HTML、VBScript、JavaScript等语言相互嵌套进行系统开发设计,通过ADO——ActiveXDataObjects,将程序语言ASP与数据库ACCESS建立连接,以实现相关功能。</p><p>另外辅助使用Photoshop等处理软件做界面的优化设计工作。</p><p>第五章开发个人主页</p><p>本个人主页主体上可以分为由html编写的静态页面和用asp编写的留言板块。</p><p>5.1HTML页面的实现</p><p>5.1.1首页</p><p>主页(如下图)</p><p>这是由FRONTPAGE编写的HTML页面,可以通过该页面进入各个板块,这些都由超连接实现。</p><p>实现超连接的代码如下:</p><p><tr></p><p><tdwidth="8%"><divalign="center"><ahref="index.html">首页</a></div></td></p><p><tdwidth="9%"><divalign="center"><ahref="show1.htm">雨晴收集/a></div></td></p><p><tdwidth="9%"><divalign="center"><ahref="show2.htm">雨晴图库</a></div></td></p><p><tdwidth="10%"><divalign="center"><ahref="music.html">雨晴音乐</a></div></td></p><p><tdwidth="9%"><divalign="center"><ahref="flash.html">雨晴动画</a></div></td></p><p><tdwidth="9%"><divalign="center"><ahref="lianjie.html"target="_blank">网络资源</a></div></td></p><p><tdwidth="12%"><divalign="center"><ahref="liuyanben\index.asp"target="_blank">雨晴留言本</a></div></td></p><p><tdwidth="9%"><ahref="1.html">雨晴论坛</a></td></p><p><tdwidth="19%"><ahref="about.html">关于我</a></td></p><p></tr></p><p>5.1.2收藏板块</p><p>点击雨晴收集进入收藏板块,该板块收藏的有许多精品文章,如下图:</p><p>点击一具体文章,则进入该文章,如下图:</p><p>该个人主页都使用了样式表,使整个个人主页的风格一致。</p><p>样式表的代码如下:</p><p><styletype="text/css"></p><p><!</p><p>--</p><p>a:</p><p>link{color:</p><p>#000000;text-decoration:</p><p>none}</p><p>a:</p><p>visited{color:</p><p>#000000;text-decoration:</p><p>none}</p><p>a:</p><p>hover{color:</p><p>#009966;text-decoration:</p><p>underline}</p><p>td{font-size:</p><p>9pt}</p><p>body{font-size:</p><p>9pt}</p><p>.hight{color:</p><p>#000000;margin-top:</p><p>8px;;;cursor:</p><p>hand}</p><p>.input1{font-size:</p><p>12px;;width:</p><p>100px;background-color:</p><p>#BDB28C;border-top-width:</p><p>0px;border-right-width:</p><p>0px;border-bottom-width:</p><p>0px;border-left-width:</p><p>0px}</p><p>.hight2{line-height:</p><p>15pt}</p><p>.whitea:</p><p>link{color:</p><p>#FFFFFF;font-weight:</p><p>bold}</p><p>.l16{line-height:</p><p>15pt}</p><p>--></p><p></style></p><p>5.1</p> </div> <div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div> <script> function showmore() { $(".readmore").hide(); $(".detail-article").css({ "height":"auto", "overflow": "hidden" }); } $(document).ready(function() { var dh = $(".detail-article").height(); if(dh >100) { $(".detail-article").css({ "height":"100px", "overflow": "hidden" }); } else { $(".readmore").hide(); } }); </script> </div> <script> var defaultShowPage = parseInt("20"); var id = "17167000"; var total_page = "41"; var mfull = false; var mshow = false; function DownLoad() { window.location.href='https://m.bingdoc.com/d-17167000.html'; } function relate() { var reltop = $('#relate').offset().top-50; $("html,body").animate({ scrollTop: reltop }, 500); } </script> <div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-4197673.html" title="androideclipse开发如何debug调试.docx">androideclipse开发如何debug调试.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-7204777.html" title="androideclipse开发如何debug调试.docx">androideclipse开发如何debug调试.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-6505997.html" title="androideclipse开发如何debug调试Word下载.docx">androideclipse开发如何debug调试Word下载.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-8326869.html" title="androideclipse开发如何debug调试Word文档格式.docx">androideclipse开发如何debug调试Word文档格式.docx</a> </li><li><em class="doc"/></em><a target="_parent" href="https://m.bingdoc.com/p-1778862.html" title="如何开发医院.doc">如何开发医院.doc</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-11571705.html" title="如何开发客户.docx">如何开发客户.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-14933102.html" title="如何开发渠道.docx">如何开发渠道.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-15093798.html" title="如何开发渠道.docx">如何开发渠道.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-12537349.html" title="如何写开发信.docx">如何写开发信.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-13468510.html" title="如何开发渠道.docx">如何开发渠道.docx</a> </li> </ul> </div> </div> <div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li><em class="docx"></em> <a href="https://m.bingdoc.com/p-12497220.html" target="_parent" title="标准入团申请书怎么写(共6页)3800字.docx">标准入团申请书怎么写(共6页)3800字.docx</a></li> <li><em class="docx"></em> <a href="https://m.bingdoc.com/p-12497221.html" target="_parent" title="10月份大学生入党转正申请参考(共4页)2100字.docx">10月份大学生入党转正申请参考(共4页)2100字.docx</a></li> <li><em class="docx"></em> <a href="https://m.bingdoc.com/p-12497222.html" target="_parent" title="财务主管转正自我鉴定书_3篇(共8页)5100字.docx">财务主管转正自我鉴定书_3篇(共8页)5100字.docx</a></li> <li><em class="docx"></em> <a href="https://m.bingdoc.com/p-12497223.html" target="_parent" title="大学生最新范文优秀入党转正申请书优秀范文(共2页)1300字.docx">大学生最新范文优秀入党转正申请书优秀范文(共2页)1300字.docx</a></li> <li><em class="docx"></em> <a href="https://m.bingdoc.com/p-12497224.html" target="_parent" title="成人毕业生自我鉴定范文【精选】(共3页)1600字.docx">成人毕业生自我鉴定范文【精选】(共3页)1600字.docx</a></li> <li><em class="docx"></em> <a href="https://m.bingdoc.com/p-12497225.html" target="_parent" title="爱在深处情自流——《热血教师》观后感(共4页)2000字.docx">爱在深处情自流——《热血教师》观后感(共4页)2000字.docx</a></li> <li><em class="docx"></em> <a href="https://m.bingdoc.com/p-12497226.html" target="_parent" title="大专生毕业生登记表自我鉴定范文_1篇(共3页)1400字.docx">大专生毕业生登记表自我鉴定范文_1篇(共3页)1400字.docx</a></li> <li><em class="docx"></em> <a href="https://m.bingdoc.com/p-12497227.html" target="_parent" title="党校学习培训自我鉴定(共8页)4900字.docx">党校学习培训自我鉴定(共8页)4900字.docx</a></li> <li><em class="docx"></em> <a href="https://m.bingdoc.com/p-12497228.html" target="_parent" title="办公室主任个人半年工作总结(共4页)2200字.docx">办公室主任个人半年工作总结(共4页)2200字.docx</a></li> </ul> </div> </div> <div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;"> 相关搜索</div> <div class="widget-box pt0" style="border: none; padding:0px 5px;"> <ul class="taglist--inline multi"> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bingdoc.com/search.html?q=%e5%a6%82%e4%bd%95">如何</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bingdoc.com/search.html?q=%e5%bc%80%e5%8f%91">开发</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bingdoc.com/search.html?q=%e4%b8%aa%e4%ba%ba%e4%b8%bb%e9%a1%b5">个人主页</a></li> </ul> </div> <div style=" font-size: 16px; background-color:#e5f0f7; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;"> 资源标签</div> <div class="widget-box pt0" style="border: none; padding:0px 5px;"> <ul class="taglist--inline multi"> <li class="tagPopup"><a class="tag tag0" href="https://m.bingdoc.com/mark/androideclipsekaifaruhedebug.html" >androideclipse开发如何debug</a></li><li class="tagPopup"><a class="tag tag1" href="https://m.bingdoc.com/mark/myeclipsekaifamyeclipse100ruhe.html" >myeclipse开发myeclipse100如何</a></li> <li class="tagPopup"><a target="_parent" class="tag tag1" href="https://m.bingdoc.com/mark/ie8ruhediaoshiruhediaoshi.html">IE8如何调试如何调试</a></li> <li class="tagPopup"><a target="_parent" class="tag tag2" href="https://m.bingdoc.com/mark/ruhewindowsce50kaifaceshi.html">如何WindowsCE50开发测试</a></li> <li class="tagPopup"><a target="_parent" class="tag tag3" href="https://m.bingdoc.com/mark/xinshouruhekaifa.html">新手如何开发</a></li> <li class="tagPopup"><a target="_parent" class="tag tag4" href="https://m.bingdoc.com/mark/ruhediaopin.html">如何调频</a></li> </ul> </div> <br /> <div > 当前位置:<a target="_parent" href="https://m.bingdoc.com/">首页</a> > <a href="https://m.bingdoc.com/booklist-00008.html">PPT模板</a><span> > </span><a href="https://m.bingdoc.com/booklist-0000800001.html">商务科技</a> </div> <br /> <div class="cssnone"> <iframe title="来源" src="https://m.bingdoc.com/BookRead.aspx?id=rlk2j8oDiqqf9TDyZoDN9Q%3d%3d&parto=CuQGfS4gwj6leKupUwDYL3i8xzdXsQ2ERy9S%2bEUgQNWShapQxyweW%2bmeEkvkJVwa%2fx7wZ%2fAGQjBDqtanby3U2riYmhx73TeKqINDITLPrNFM0er1e4jh6at57rvBnB1ijx%2bxxGzlkgpXC7SJm1ErV6%2beXsllIRbvoYXLAIK5UQ6zVsrHfbcuVj%2fquj1KG8ed%2fWBpQ3zcyzyhVpLPhkhgouRlCYpnQhg8" frameborder="0" style="width: 0px; height: 0px"> </iframe> </div> <span id="LabelScript"></span> <script src="https://mstatic.bingdoc.com/JS/bootstrap-collapse.js"></script> </form> <div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;"> <div class="siteInner"> <p style="text-align: center;">copyright@ 2008-2023 冰点文库 网站版权所有</p><p style="text-align: center;">经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备19020893号-</a>2</p><script>var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f82ede2a6dd69d4ed35205d3eb25b840"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script> </div> </div> <div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; "> <div class="trlogoside" id="navlogo" style="display: none;"> <a href="https://m.bingdoc.com/" title="冰点文库"><img src="https://www.bingdoc.com/images/logo_bd.png" alt="冰点文库"></a> <div class="trnavclose" id="navclose"> <span></span> </div> </div> <div class="navcontainer"> <div class="row"> <ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;"> <li><a target="_parent"href="https://m.bingdoc.com/login.aspx">登录</a></li> <li><a target="_parent"href="https://m.bingdoc.com/">首页 </a></li> <li><a target="_parent"href="https://m.bingdoc.com/booklist-0.html">资源分类 </a></li> <li><a target="_parent"href="https://m.bingdoc.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bingdoc.com/images/s.gif" alt="new" class="hottip1">升级会员 <img src="https://www.bingdoc.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new" class="hottip"></a></li> <li><a target="_parent"href="https://m.bingdoc.com/newslist.html">通知公告 </a></li> <li><a target="_parent"href="https://m.bingdoc.com/h-0.html">帮助中心 </a></li> </ul> </div> </div> </div> <script type="text/javascript"> function stopPropagation(e) { var ev = e || window.event; if (ev.stopPropagation) { ev.stopPropagation(); } else if (window.event) { window.event.cancelBubble = true;//兼容IE } } $("#navmore").click(function (e) { $("#navcontent").show(); $("#navlogo").show(); stopPropagation(e); var navcontentwidth = $("#navcontent").width(); $('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' }); $("#navcontent").show().animate({ "right": 0 }, 300); }); $(document).bind('click', function () { var navcontentwidth = $("#navcontent").width(); $("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); }); $("#navlogo").fadeOut(300); }); $("#navcontent").click(function (e) { stopPropagation(e); }); $("#navclose").click(function (e) { var navcontentwidth = $("#navcontent").width(); $("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); }); $("#navlogo").fadeOut(300); }); </script> <script> function BaseShare(title, desc, imgUrl) { var link = "https://m.bingdoc.com/p-17167000.html"; if (wx) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: 'wx3a9604896163fa38', // 必填,公众号的唯一标识 timestamp: '1718280639', // 必填,生成签名的时间戳 nonceStr: 'D3D9446802A44259755D38E6D163E820', // 必填,生成签名的随机串 signature: 'b96395632c62a935536bcbb7b87859b7e15c3d99',// 必填,签名,见附录1 jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 //openTagList: ["wx-open-launch-weapp"]//H5打开小程序 }); wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.hideMenuItems({// 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3 menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand'] }); var shareData = { title: title, // 分享标题 desc: desc,//这里请特别注意是要去除html link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 }; wx.updateAppMessageShareData(shareData);//1.4 分享到朋友 wx.updateTimelineShareData(shareData);//1.4分享到朋友圈 }); } } function BaseShare(title, desc, imgUrl, link) { if (link=="") link = "https://m.bingdoc.com/p-17167000.html"; if (wx) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: 'wx3a9604896163fa38', // 必填,公众号的唯一标识 timestamp: '1718280639', // 必填,生成签名的时间戳 nonceStr: 'D3D9446802A44259755D38E6D163E820', // 必填,生成签名的随机串 signature: 'b96395632c62a935536bcbb7b87859b7e15c3d99',// 必填,签名,见附录1 jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 //openTagList: ["wx-open-launch-weapp"]//H5打开小程序 }); wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.hideMenuItems({// 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3 menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand'] }); var shareData = { title: title, // 分享标题 desc: desc,//这里请特别注意是要去除html link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 }; wx.updateAppMessageShareData(shareData);//1.4 分享到朋友 wx.updateTimelineShareData(shareData);//1.4分享到朋友圈 }); } } </script> <script> $(document).ready(function () { var arr = $(".headercontent"); for (var i = 0; i < arr.length; i++) { (function (index) { var url = "https://m.bingdoc.com/header.aspx"; $.get(url + "?t=" + (new Date()).valueOf(), function (d) { try { arr.eq(index).empty().html(d); } catch (e) { } try { arr.html(d); } catch (e) { } }); })(i); } }); </script> <script src="https://mstatic.bingdoc.com/js/jquery.lazyload.js"></script> <script charset="utf-8"> $("img.lazys").lazyload({ threshold: 200, effect: "fadeIn" }); </script> </body> </html>