1 / 63

网站建设思路及技术

网站建设思路及技术. 新疆西北星信息技术有限责任公司. 二〇一二年七月. 主要内容. 一. 网站建设入门例子. 二. 网站访问过程原理. 三. 建设网站的过程. 四. HTML 简单入门. 网站计数器代码. 五. 六. 常用搜索引擎. 政府网站建设特点. 七. 一、网站建设入门例子 — 猴子买报的故事. 从前猴子每天都读报纸,报纸上有很多文章与信息,还有一些讨厌的广告。每篇文章都是由标题与多个段落的内容组成的,而且可能还有一些图片,数据表格等。

norman
Download Presentation

网站建设思路及技术

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 网站建设思路及技术 新疆西北星信息技术有限责任公司 二〇一二年七月

  2. 主要内容 一 网站建设入门例子 二 网站访问过程原理 三 建设网站的过程 四 HTML简单入门 网站计数器代码 五 六 常用搜索引擎 政府网站建设特点 七

  3. 一、网站建设入门例子—猴子买报的故事 • 从前猴子每天都读报纸,报纸上有很多文章与信息,还有一些讨厌的广告。每篇文章都是由标题与多个段落的内容组成的,而且可能还有一些图片,数据表格等。 • 现在,猴子再也不买报纸了(可不是由于报纸涨价了),猴子每天都是通过新闻网站在线浏览,这种在线浏览方式与读报纸的方式是非常相似的。网上的每篇文章也都是由标题与内容组成,而且也会不时出现一些讨厌的广告!但是它们之间也有不同的地方,网络上通过链接的方式使很多篇相关的文章建立了联系,而且通常每个网页只有一篇文章,而不像报纸一样,一个页面总是多篇文章。 • 还有一点不同的地方是与用户交互的方式(比如抽奖,问答等),报纸使用了一个插页或报纸的一部分,我们填写好信息后,必须邮寄给报社。但是在网络上这个步骤将更加简单了,我们只需要在页面上输入用户名,联系方式,点击提交即可! • 网络上更加神奇的一点是:搜索!只要通过搜索就可以找到想要的内容,而且还可以找到以前的很多文章(不用再翻老报纸了),这的确比报纸好多了! • 使用网络还影响了环保(纸是由树木制作的,只要不断的读报纸我们生活的森林就会慢慢的消失,想想那没有新鲜的空气,没有了鸟语花香的生活;而且废纸总是要处理的垃圾;报纸上的油墨对猴的身体也不好)。因此猴子下定决心,再也不买报纸了,开始学做网页了。 提示: 制作一个网页有点像对报纸的排版(记住上面的几点不同,这些不同也体现了网络的优点)。我们也是建立一个标题,再建立文章的各个段落,经过美化,最后上传到网上,供用户浏览。而这里面使用的最基本的技术就是HTML。

  4. 二、网站访问过程原理

  5. 二、网站访问过程原理 浏览器通常指 IE 、FireFox等客户端使用的程序。 每台连接互联网的机器都有一个唯一的IP地址,IP地址是由4个0到256的数组成的,比如:222.131.0.229,127.0.0.1,由于每台联网的机器的IP地址都是独立的,因此可以通过IP判断一台机器。网站所在的服务器通常有一个固定的IP地址,而我们浏览者每次上网的IP地址通常都不一样,IP地址是由ISP分配的。域名服务器(domain name server)的简称为DNS,它存储了域名与IP地址对应的列表。 浏览器得到域名指向的IP后,浏览器会把我们输入的域名转化为HTTP的服务请求,例如,输入 www.xjxbx.com,可以转化为 http://www.xjxbx.com/,通过这种方式浏览器向服务器发出了请求。由于输入的是域名,因此服务器接收到请求后,会查找域名下的默认网页(通常为index.jsp或index.html),如果直接输入http://www.xjxbx.com/index.html就直接查找这个页面。 返回的请求通常是一些文件,包括文字信息(.html .css .asp文件等),图片,flash等(每个文件都要有一个唯一的网址,比如http://www.xjxbx.com/fla/)。 浏览器将这些信息组织成用户可以查看的网页。 提示:1、查询网站的IP地址可以使用ping的方式,点击windows的开始 -- 运行 -- 输入“cmd” -- 回车 -输入 ping www.dreamdu.com 可以查看www.dreamdu.com的ip地址 2、查询自己机器的ip地址,可以使用上面的方式,输入 ipconfig 回车即可查看

  6. 三、建设网站过程 网站建设步骤: • 确定网站名称、分辨率、风格、色调 • 调研网站栏目,梳理网站栏目 • 设计网站版式、设计网站效果图 • 确定网站栏目静态页面、动态页面 • 网站页面搭建 • 网站栏目权限分配 • 数据添加、充实网站内容

  7. 三、建设网站过程 确定网站名称、分辨率、风格、色调 网站名称、域名; 分辨率,通常1000px宽度(以1024分辨率全屏显示为标准); 网站分类: 按性质分:政府网站、商业网站、专业网站、新闻网站、门户网站、个人网站; 按服务分类:信息类网站、交易类网站、互动游戏类网站、有偿信息类网站、功能性网站、综合类网站; 网站色调: 红色:强烈的色彩,常作为攻击性的、严格的、代表权力的色彩进行使用。它是充满活力的色彩,并且可以令人感到热情和力量的色彩,红色可作为主色调。 橙色:一种有食欲的色彩。橙色给人以温和、有能量、有律动的感觉,是快乐欢快的色彩,已高彩度的橙色为主色调给人即新鲜又充满活力的感觉,但是如果配色不好会像褐色那样粗俗、所以用灰色做主色调、橙色做辅色调。

  8. 三、建设网站过程 网站色调搭配 • 网页色彩搭配的原理 : • 色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。 • 色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。 • 色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 • 色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。 • 色彩搭配技巧: • 用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。 • 用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。 • 用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择“自定义”,然后在“色库”中选就可以了。 • 用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。 在网页配色中,忌讳的是:不要将所有颜色都用到,尽量控制在三种色彩以内;背景和前文的对比尽量要大 (绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

  9. 三、建设网站过程 梳理网站栏目 网站栏目策划是在建站前的一道工作,做好网站栏目的构架能够很直观的看到整个网站的结构,涵盖的内容,也是对整个网站宏观的一个定位。 根据网站的定位,服务的人群,他们所关心的问题等来初步定下网站的栏目规划,通常这么做出来的初步规划是不完善的,后期还需要经过很多调整,细分等一系列工作的,但是这一步又必须得做,这可以使你的想法、定位很好的得到验证。一个网站通常都是金字塔型的,由页面、列表、栏目、频道再到首页,一层一层往上组成的。我们在做的时候则反其道而行之,根据网站的定位,划分最核心的几个频道、然后再是细分下去频道下的栏目,这里通常自己会写在表格上,每个频道的用意何在,面向的用户,分为哪些栏目,由哪些内容组成,每个频道都这样细化下去。 举例:北京市政府网站(频道举例)

  10. 三、建设网站过程 设计网站版式、效果图 • 版面的留白 • 版面留白量以40%为宜; • 背景色彩纯度过高会造成版面空白量感觉消失。 • 网站重要信息 • 重要信息的呈现方式有如下几种: • 重要信息应置于标题之后,首页链接点或内文之前; • 重要信息可以置于前端明显或突出的图像强调; • 重要信息可以运用不同颜色区块强调。 • 版式一般是在Photoshop上设计的,之后使用Photoshop或者ImageReady切图,再使用Dreamweaver排版,插入图片,完善内容,过程就是这样的。 • 一般的网站都是由网站头部,网站躯干,网站尾部组成的,其中躯干部分还可以再分,由不同的表格排版组成页面。

  11. 三、建设网站过程 设计网站版式、效果图 骨骼型 特点:类似于报刊的版式,规范理性 分割方式。竖向通栏、双栏、三栏、四栏及横向上的通栏、双栏等。一般竖向的比较常见,给人以和谐、理性的美。几种分栏方式结合使用,即理性、条理活泼又富有弹性。举例:腾讯读书网 分割型 特点:把整个网页分成上下或是左右两部分,分别安排图片或者文字。两部分形成对比:有图案的部分感性而具有活力,有文字的部分平静而严肃。通过文字或者图案把分割线进行虚化处理,会和谐而自然。 对称型 特点:给人以稳定、严谨、理性、庄重的感觉。一般采用相对对称,可以避免呆板。实例:http://www.cwnj.cn/ 自由型 特点:自由型的页面具有轻松活泼、轻快的风格。

  12. 三、建设网站过程 静态页面、动态页面 静态页面: 纯粹的HTML格式网页通常被称为“静态页面”,早期的网站一般都是静态网页组成的。特点:网页不论何时浏览,都将显示相同的形式和内容,且仅能供浏览,无法与网站互动。 动态页面: 指网页的内容可以根据某种条件的改变而自动改变。如腾讯公司的Qzone空间里,常常会有一些使用者嵌入一个小小的计数器功能,当有人单击设计者的网页时,计数器的值会自动增加。动态网页是以.asp、.jsp、.php、.cgi等形式为后缀,并且在动态网页网址中有一个标志性的符号“?”。一个典型的动态网页的URL(Uniform Rsource Locator,即统一资源定位器)形式为:http://www.sina.cn/ip/index.asp?id=1

  13. 三、建设网站过程 静态页面与动态页面的区别 静态网页是由浏览器直接从服务器下载到浏览者所在机器上浏览的。 动态网页需要服务器执行(运算)成静态网页的内容,然后由浏览器下载到浏览者所在机器上浏览。 静态网页是任何网站的根基,因为浏览者浏览的内容永远是从服务器传回的静态网页的内容。 动态与静态网页并不矛盾,网站设计中往往是先使用DreamWeaver等工具设计静态网页,之后将PHP等程序嵌入静态网页中完成网站设计。 动态网页中一般会包含静态网页的内容,比如:PHP代码中通常包含HTML或CSS。静态网页中不能包含动态网页的内容。比如:如果HTML中包含PHP的内容,那就是动态网页了。 动态网页通常与数据库相连,来完成页面的显示。比如:一个文章显示系统,可以只通过一个动态网页Display.php显示数据库中的多篇文章。而静态网页无法实现此功能。

  14. 三、建设网站过程 静态页面与动态页面的区别 采用动态网页可以实现很多动态功能,比如Blog登录,BBS讨论,购物车等。 由于动态网页需要服务器执行(运算),因此将消耗服务器资源,访问速度会慢于静态网页。 当网站有大数据量时,应该使用动态网页管理,减少网站维护工作量。 当网站服务器压力过大或者访问量太大时,应该使用静态页面显示。 当网站有大的数据量而且访问量很大时,应该使用动态页面管理维护网站内容,同时生成静态页面用于显示。 动态网页的网址显示方式通常带有"?",比如http://www.sina.cn/ip/index.asp?id=1 动态网页是需要服务器端执行的程序,由于人的原因可能使动态网页程序产生漏洞,这些漏洞可能会被黑客利用。比如我们常说的"挂马"。

  15. 三、建设网站过程 页面搭建 工具: 网站后台管理系统(如:西北星资源管理平台、青峰网站管理后台管理系统等。) 网站后台管理系统主要是用于对网站前台的信息管理,如文字、图片、影音、和其他日常使用文件的发布、更新、删除等操作,同时也包括会员信息、订单信息、访客信息的统计和管理。简单来说就是对网站数据库和文件的快速操作,以使得前台内容能够得到及时更新和调整。 Dreamweaver、Photoshop、Flash等网页编辑、图片制作工具。

  16. 三、建设网站过程 网站栏目权限分配 网站管理员分配栏目权限(栏目权限:是指网站前台的栏目的管理,网站栏目包括了比如公司简介、产品介绍、新闻等栏目,可以在后台通过选择相应栏目授权,用户在添加内容的时候只能选择被授权栏目,没有被授权的内容无法管理。) 举例:西北星资源管理平台

  17. 三、建设网站过程 数据添加,充实网站 通过网站后台管理系统维护网站数据。对网站各栏目数据进行添加、修改、删除。同时设置数据的相关属性(标题、子标题、加载日期、失效日期、附件、发布栏目等。)

  18. 四、HTML简单入门 HTML(Hyper Text Markup Language超文本标示语言) —是一种用来制作超文本文档的简单标记语言。 —用HTML编写的超文本文件称为HTML文件,也称Web文件。 编写方法: 手工直接编写—记事本,存成.htm .html格式。 使用可视化HTML编辑器—Frontpage、Dreamweaver等。 由Web服务器(或称HTTP服务器)一方实时动态地生成。 网页文件命名: *.htm或*.html、无空格、无特殊符号(如&符号),只可以有下划线“—”,只可以为英文、数字。 区分大小写、首页文件名默认为:index.htm或index.html。

  19. 四、HTML简单入门 HTML文件结构 <html>…</html> <head>…</head> <body>…</body> 元素:是HTML语言的基本部分。元素总是成对出现,每一对元素一般都有一个开始的标记(如<body>),也有一个结束的标记(如</body>)。元素的标记要用一对尖括号括起来,并且结束的标记总是在开始的标记前加一个斜杠。

  20. 四、HTML简单入门 简单学习HTML代码:文字布局、文字与段落格式控制、表格标签、超链接标签、表单的定义 文字布局: 行的控制—段<p>:自动在其前后创建一些空白;空白占位符&nbsp; HTML的<br>标签是一个简单的换行符。<br>标签可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>标签不是成对出现的。<br>标签这是简单地开始新的一行,而当浏览器遇到<p>标签时,通常会在相领的段落之间插入一些垂直的间距。 不换行<nobr>禁止换行。通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行,但是如果文字被包含在<nobr>…</nobr>标签里的话,则不会换行。

  21. 四、HTML简单入门 文字与段落格式控制 <body>…… <i>倾斜文本</i>:显示斜体文本效果 <b>粗体文本</b>:显示粗体文本效果 <u>下划线文本</u>:为文本添加下划线 ……</body> 居中—<center>标签 ——<center>元素师一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似,对其所包括的文本进行水平居中。 例如:<center>居中段落</center> 标尺线(水平线)<hr>在HTML页面中创建一条水平线 <hr size=#>:设定线宽 <hr width=#>:设定线长 <hr align=#>:设定对齐方式 #=left,right <hr color=#>:设定线的颜色

  22. 四、HTML简单入门 表格标签: <table></table>创建表格 <tr></tr>创建表格中的一行,一般包括一个或多个列元素 <td></td>创建表格中的一列 <caption></caption>标签,定义表格的标题 <th></th>可以是表格中的第一个<td>标签,作为表格内的标题行 <table>标签的属性

  23. 四、HTML简单入门 <tr>标签的属性 <td>标签的属性

  24. 四、HTML简单入门 • 利用表格进行网页布局: • 表格标签除了绘制文本表格外,还经常用来进行网页布局。 • 表格是最常用的页面元素,可以用来固定文本或图像的显示位置。 • 通常我们使用<table>、<tr>、<td>标记及其属性对网页内容进行分块显示。 • 在Internet上浏览的许多页面都大量使用了表格,很多较复杂的页面布局就是利用表格来完成的。

  25. 四、HTML简单入门 • 超链接标签: • 根据目标页面的位置不同,href属性的URL信息构成分为以下3种情况: • 目标页面位于另外的主机或采用非http协议,此时URL采用绝对路径,即使用如下格式: • 协议名://主机名[/目录信息] • 若目标页面位于本主机,此时URL采用相对路径: <a href="des1.htm">超链接文本</a> 或<a href="/des2.htm">超链接文本</a> • 超链接的目标不仅可以指向HTML文件的头部,也可以指向某个文件的特定位置(称为“锚点”,anchor),其格式如下: <a name="定位标记">文本或图像等页面元素</a>

  26. 四、HTML简单入门 什么是表单? 表单是实现图形用户界面的基本元素,它包括按钮、文本框、单选框、复选框等,它们是HTML实现交互功能的主要接口。用户通过表单向服务器提交数据。表单的使用包括两个部分:一部分是用户界面,提供用户输入数据的元件;另一部分是处理程序,可以是客户端程序,在浏览器中执行;也可以是服务器处理程序,处理用户提交的数据,返回处理的结果。 表单的定义: • 定义表单的语法如下: <form method="get|post" action="处理程序名"> [<input type=输入域种类 name=输入域名>] [textarea定义] [select定义] </form> • <form></form>标签对用来创建一个表单,即定义表单的开始和结束位置,具有action、method、target、title、enctype等属性。

  27. 四、HTML简单入门 表单的输入域: 常用表单的输入域: 不同类型的输入域为用户提供灵活多样的数据输入方式。表单的输入域有如下3大类: • 以标记<input>定义的多种输入域,包括text,radio,checkbox,password,hidden,button,submit和reset等。 • 以标记<textarea>定义的文本域。 • 以标记<select>和<option>定义的下拉列表框。

  28. 四、HTML简单入门 <input>表单输入标记: • <input>标记在表单中使用频繁,大部分表单内容需要用到此标记。其语法如下:<inputname=name value=value aligh=left|center|righ valign=top|middle|bottom type=text|password|checkbox|radio|submit|reset|hidden|button maxlength=n size=n checkedonclick=function onselect=function> 其中value:用于设定表单默认值; checked:表示选择框中,此项被默认选中;maxlength:表示在输入单行文本的时候,最大允许字符数; size:用于设定表单框的尺寸; onclick:表示在按下按钮时调用指定的子程序; onselect:表示当前项被选择时调用指定的子程序。

  29. 四、HTML简单入门 <select>标签: • 用<select>标记可以在表单中插入一个下拉菜单,其语法如下:<selectname=name size=n multiple> <option value=设定值 [selected]>表项内容 </option> <option value=设定值 [selected]>表项内容 </option> …… </select> 其中name:设定下拉菜单的名称;size:设定菜单框的高度,也就是一次显示几个菜单项;multiple:是可选项,若定义该属性,则下拉列表中的内容允许进行多选。

  30. 四、HTML简单入门 <textarea>标签: • <textarea></textarea> • 在<form>表单中创建一个能够输入多行文本的文本框 • 属性:cols(列数),rows(行数),单位是字符数 • 标签语法如下: 此处显示在文本框外的提示信息 <textarea name=name cols=x rows=y> 此处显示在文本框里的预留信息 </textarea>

  31. 四、HTML简单入门 举例:一段简单的包含多行文本框的页面代码 <body> <table width="50%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center">您的意见对我很重要:</td> </tr> <tr> <td align="center"> <textarea name="yijian" cols="60" rows="10"> 请将您的建议输入到此区域</textarea></td> </tr> <tr> <td align="center"> <input type="submit" name="ok" value="提交"> <input type="reset" name="reset" value="重置"></td> </tr> </body>

  32. 五、网站计数器代码 对一个网站的站长而言,站上网页的累计浏览次数,是一项很有用的信息。通过浏览次数的统计,就可以看出用户的偏好,提供网站改进发展的方向。本小节将介绍一个简单的网页浏览次数统计范例。 本范例所使用的文件如下: frameset.htm:框架页主文件,本范例使用的是一个一行两列的框架页。 pagecount.asp:累计浏览次数 menu.htm:左框架选取 mainFrame.htm主框架 main.asp、page1.asp、page2asp、page3.asp、page4.asp、page5.asp:这些文件用来当作测试网页,其目录放在左框架menu.htm中,结果显示在主框架mainFrame.htm中。 allcount.asp:显示所有网页的浏览次数

  33. 五、网站计数器代码 下面列出各程序源代码: frameset.htm:框架集主文件: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>框架页主文件</title> </head> <frameset rows="*" cols="154,*" framespacing="1" border="2" bordercolor="#000000"> <frame src="menu.htm" name="leftFrame" scrolling="NO" noresize> <frame src="mainFrame.htm" name="mainFrame"> </frameset> <noframes><body> </body></noframes> </html>

  34. 五、网站计数器代码 • 程序pagecount.asp清单: <!--pagecount.asp--> <% set pcnt=Server.CreateObject("MSWC.PageCounter") pcnt.PageHit %> 说明: • 我们使用ASP的默认组件PageCounter来做网页计数。这个组件没有属性,有三个方法: * Hits([passInfo]) PassInfo为网页的虚拟路径,这个方法返回网页被浏览的次数。若PassInfo省略的话,则返回目前网页被浏览的次数。

  35. 五、网站计数器代码 说明: * PageHit 将目前网页的浏览次数增加一次。PageCounter组件并不会自动累加,我们必须使用PageHit方法手动累加。 * Reset([PassInfo]) PassInfo代表网页的虚拟路径,这个方法将网页的浏览次数设为0。若未指定 PassInfor,则将目前网页的浏览次数设为0。 pagecount.asp这个文件就是把PageCounter组件取出,并将目前网页的浏览次数加1。这个文件必须被包括在每个网页的开头,如下面的main.asp、page1.asp、page2asp、page3.asp、page4.asp、page5.asp等文件代码所示。

  36. 五、网站计数器代码 • main.asp文件代码如下: <!--main.asp--> <!--#include file="pagecount.asp"--> <center> <h2>这是首页</h2> <hr> 本页累计浏览次数:<% =pcnt.Hits()%> </center> 说明: 这个网页一开头就使用 <!--#include file="pagecount.asp“> 将pagecount.asp包括进来。如此一来当用户浏览这个网页时,浏览次数就会自动累加。

  37. 五、网站计数器代码 • page1.asp文件代码如下: <!-- page1.asp--> <!--#include file="pagecount.asp"--> <center> <h2>这是测试网页一</h2> <hr> 本页累计浏览次数:<% =pcnt.Hits()%> </center> • page2asp文件代码如下: <!--page2.asp--> <!--#include file="pagecount.asp"--> <center> <h2>这是测试网页二</h2> <hr> 本页累计浏览次数:<% =pcnt.Hits()%> </center>

  38. 五、网站计数器代码 • page3.asp文件代码如下: <!--page3.asp--> <!--#include file="pagecount.asp"--> <center> <h2>这是测试网页三</h2> <hr> 本页累计浏览次数:<% =pcnt.Hits()%> </center> • page4.asp文件代码如下: <!--page4.asp--> <!--#include file="pagecount.asp"--> <center> <h2>这是测试网页四</h2> <hr> 本页累计浏览次数:<% =pcnt.Hits()%> </center>

  39. 五、网站计数器代码 • page5.asp文件代码如下: <!--page5.asp--> <!--#include file="pagecount.asp"--> <center> <h2>这是测试网页五</h2> <hr> 本页累计浏览次数:<% =pcnt.Hits()%> </center> • allcount.asp文件代码如下: <!--allcount.asp--> <!--#include file="pagecount.asp"--> <h2 align=center>本网站各网页浏览次数统计</h2> <hr size="2" noshade> <center> <table border="1" cellpadding="1" cellspacing="0" bordercolor="#666666">

  40. 五、网站计数器代码 <tr> <td align=center>网页</td> <td align=center>浏览次数</td> </tr> <tr> <td><div align="center">首页</div></td> <td align=center><%=pcnt.Hits("/chapter6-03/pages/main.asp")%></td> </tr> <tr> <td><div align="center">测试网页一</div></td> <td align=center><%=pcnt.Hits("/chapter6-03/pages/page1.asp")%></td> </tr> <tr> <td><div align="center">测试网页二</div></td> <td align=center><%=pcnt.Hits("/chapter6-03/pages/page2.asp")%></td> </tr> • allcount.asp文件代码(续)如下:

  41. 五、网站计数器代码 <tr> <td><div align="center">测试网页三</div> <td align=center><%=pcnt.Hits("/chapter6-03/pages/page3.asp")%></td> </tr> <tr> <td><div align="center">测试网页四</div> <td align=center><%=pcnt.Hits("/chapter6-03/pages/page4.asp")%></td> </tr> <tr> <td><div align="center">测试网页五</div> <td align=center><%=pcnt.Hits("/chapter6-03/pages/page5.asp")%></td> </tr> <tr> <td><div align="center">本页</div></td> <td align=center><%=pcnt.Hits()%></td> </tr> </table></center> • allcount.asp文件代码(续)如下:

  42. 五、网站计数器代码 • 说明: • 这个网页也列入统计,所以一开始也要包括pagecount.asp文件。 • 使用PageCounter组件的Hits方法,取得各网页的浏览次数并显示出。需要注意的是:Hits方法的参数是网页的虚拟路径。 • menu.htm:左框架 • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" • "http://www.w3.org/TR/html4/loose.dtd"> • <html> • <head> • <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> • <title>左框架</title> • </head>

  43. 五、网站计数器代码 menu.htm:左框架(续) <body> <div align=“center”><a href=“main.asp” target=“mainFrame”>首页 </a><br><br> <a href="page1.asp" target="mainFrame">测试网页一</a><br><br> <a href="page2.asp" target="mainFrame">测试网页二</a><br><br> <a href="page3.asp" target="mainFrame">测试网页三</a><br><br> <a href="page4.asp" target="mainFrame">测试网页四</a><br><br> <a href="page5.asp" target="mainFrame">测试网页五</a><br><br> <a href="allcount.asp" target="mainFrame">本站浏览次数统计</a> </div> </body> </html>

  44. 五、网站计数器代码 mainFrame.htm主框架 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>主框架</title> </head> <body> <img src="../images/zhishi.jpg" width="100" height="150" align=“absbottom”>单击左侧框架中目录,便可在本主框架查看不同网 页的浏览次数! </body> </html>

  45. 五、网站计数器代码 • 以上我们已将本范例所有文件的源代码写出,现在看一下其执行结果。首先,在IE浏览器中浏览框架页主文件frameset.htm,如下图所示。

  46. 五、网站计数器代码 • 单击“首页”测试页,显示“首页”的累计浏览次数,如下图所示。单击“刷新”按钮或左框架中的“首页”,主框架中显示的该页累计浏览次数会增加。

  47. 五、网站计数器代码 • 单击其它测试页,会显示相应页的累计浏览次数,如单击“测试网页三”,显示效果如下图所示。

  48. 六、站内搜索代码 • 搜索引擎(search engine)是指根据一定的策略、运行特定的计算机程序搜集互联网上的信息,在对信息进行组织和处理后,并将处理后的信息显示给用户,是为用户提供检索服务的系统。 • 分类:全文索引、目录索引、元搜索引擎 • 工作原理:

  49. 六、站内搜索代码 Google搜索引擎 <!--Google站内搜索开始--><form method=get action="http://www.google.com/search"><input type=text name=q><input type=submit name=btnG value="Google 搜索"><input type=hidden name=ie value=GB2312><input type=hidden name=oe value=GB2312><input type=hidden name=hl value=zh-CN><input type=hidden name=domains value="www.williamlong.info"><input type=hidden name=sitesearch value="www.williamlong.info"></form><!--Google站内搜索结束-->

  50. 六、站内搜索代码 Baidu搜索引擎 <!--Baidu站内搜索开始--><form action="http://www.baidu.com/baidu"><input type=text name=word><input type="submit" value="Baidu 搜索"><input name=tn type=hidden value="bds"><input name=cl type=hidden value="3"><input name=ct type=hidden value="2097152"><input name=si type=hidden value="www.williamlong.info"></form><!--Baidu站内搜索结束-->

More Related