WEB前端开发经验总结
作者:海啸 来源:Yaohaixiao博客 发布时间:2009-07-20 18:01:00
不错,这个是一个文章详细页,没有左右两栏布局,不过这里我重点要讲的是合理的布局,在稍后的文章中我会详细的介绍浮动元素。好,回到刚才的话题,大家看到了这个页面了。
我这里先把代码写给大家看看(省略了部分代码):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>Ajax标签导航实例详解</title>
<link href=”css/article.css” rel=”stylesheet” type=”text/css” media=”all” />
<script language=”javascript” type=”text/javascript” src=”js/common.js”></script>
</head>
<body>
<div id=”container”>
<div id=”topbar”>
<h1><a href=”http://www.yaohaixiao.com/” target=”_blank” title=”海啸的地盘–享受生活,享受每一天!”>海啸的地盘–享受生活,享受每一天!</a></h1>
<div id=”search-bar”>
<form name=”frmsearch” id=”frmsearch” action=”" method=”post”>
<label for=”keyword”>站内搜索:</label>
<select id=”topics”>
<option value=”0″>全部主题</option>
<option value=”1″>(X)HTML</option>
<option value=”2″>CSS</option>
<option value=”3″>Javascript</option>
<option value=”4″>XML</option>
<option value=”5″>ASP/ASP.NET</option>
</select>
<input type=”text” name=”keyword” id=”keyword” value=”请输入搜索关键字” maxlength=”60″ />
<input type=”reset” name=”btnsearch” id=”btnsearch” value=”开始搜索” />
</form>
</div>
</div>
<ul id=”nav”>
<li><a href=”#2″>ARTICLES</a></li>
<li><a href=”#2″>TOPICS</a></li>
<li><a href=”#2″>ABOUT</a></li>
<li><a href=”#2″>CONTACT</a></li>
<li><a href=”#2″>GESTBOOK</a></li>
<li><a href=”#2″>FEED</a></li>
</ul>
<h2>Ajax标签导航实例详解</h2>
<div id=”article-info”>作者/程序设计:<a href=”mailto:haixiao_yao@yahoo.com.cn”>yaohaixiao</a> 来源:<a href=”http://www.yaohaixiao.com” target=”_blank”>yaohaixiao.com</a> 发布时间:2008年4月28日</div>
<h3>代码篇</h3>
<p>
之前整理发表了<a href=”http://www.yaohaixiao.com/article.asp?id=44” target=”_blank”>《XMLHTTPRequest的属性和方法简介》</a>,它Ajax要使用的核心的技术之一,现在就来实际运用它。这个Ajax标签导航,是我很久前就写的一个脚本,很实用的(还被很多网站收录了哦),现在拿它来做实例讲解吧!当然个人能力有限,有什么不对的地方还请多包含!
</p>
<p>
演示地址:<a href=”http://www.yaohaixiao.com/code/ajaxtab/index.htm” target=”_blank”>http://www.yaohaixiao.com/code/ajaxtab/index.htm</a>
</p>
<p>
效果大家看到了,核心功能有:<br />
1、将当前选中标签以特殊的样式显示<br />
2、将异步加载的页面信息显示到指定的DOM节点中
</p>
<p>
我们来看看处理脚本的代码吧:
</p>
<div class=”code-title”>程序代码:ajaxtab.js</div>
<div class=”js code” name=”code” id=”js-code”>
<!–<br />
…
//–>
</div>
<p>
id=”news” - news就是我们的导航标签的ID;<br />
id=”newsCnt” - newsCnt就是我们要写入信息的目标DOM节点;<br />
class=”first” - first当前(第一个)标签的样式;<br />
id=”news-0″ - news-0 通过”-“分开,我们就分别可以得到news(导航标签ID),0(标签[li]在导航标签中的索引值)<br />
<a href=”news/news0.htm”>网站重构</a> - 超链接<br />
<span></span> - 标签间的分割线<br />
</p>
<p>
我罗列的这些东西,相信大家开始看出了些头绪了,呵呵,不过别急!在我们看处理的脚本之前,先让我们来看看导航标签的样式,主要是看看我们对分割线的处理(一点CSS处理的技巧)。
</p>
<p>
本来想偷个懒,让大家看我上边说的那篇文章,想想也就是Ctrl+C&Ctrl+V,都贴出来吧!呵呵!!!
</p>
<p>
不过还没有完,最后要说的就是innerHTML这个特性,这里我们还要感谢微软啊,innerHTML就是它的专利,我们就是用它来改变指定DOM内的HTML字符串的,而不用刷新页面。详细的信息大家还是google一下吧,我也要休息下啊!!喝口茶先!!^-^!
</p>
<p>
以上讲了这么多,我们最后来看看,我们这个ajax标签导航都用到了那些技术吧:
</p>
<ol>
<li>XHTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>DOM</li>
<li>XMLHttpRequest对象</li>
<li>innerHTML</li>
</ol>
<p>
还有XML,我们这个例子没有涉及到。东西虽小,包含的(web前端开发)知识可是都用到了啊,我把我会的点东西都端出来了(要失业了),呵呵!
</p>
<p>
当然我很喜欢跟大家多交流,以后有时间,我们在来谈谈CSS的HACKS技巧,Javascript DOM编程等等的,今天就收工了,谢谢捧场先!!!
</p>
</div>
<p id=”copyright”>
Copyright © 2007-2008 <strong><a href=”http://www.yaohaixiao.com”>yaohaixiao.com</a></strong>, All rights reserved. Powered By: <a href=”mailto:haixiao_yao@yahoo.com.cn”>Yaohaixiao</a>
</p>
</body>
</html>
看出来什么没有?(代码是很多,呵呵!)可能大家已经发现,整个页面里基本上都是用户要看的数据,其中只包含了很少(必要)的布局(XHTML)标签(请允许我这么说)。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。
说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”,看看我的这个例子做到了没有?
[b]结构清晰[/b]–也就是我们常说的,XHTML标签要结构化(语意化)。
[u]什么叫结构化?[/u]
由于个人认为这个知识点是十分重要的,所以请允许我在这里多罗嗦几句,我们采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用table布局的时候,我们的表现(数据)和形式(布局样式)是混在一起的,有很多冗余的数据混杂在一起,而大家再看看我上面给大家展示的代码,很明显,结构十分清晰。
猜你喜欢
- sql server的备份与恢复(查询分析器) 查询分析器: 命令: 1:备份数据库命令: backup database whdb1(要备
- 微信小程序图片上传,供大家参考,具体内容如下先来看一下微信小程序的api来看一下页面效果查看大图wxml文件代码:<view clas
- CKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、
- Debian Etch Linux上成功安装了MySQL 5.0.27 icc版本,并使用JDBC测试中文成功!中文问题的关键是全部使用UT
- 前言Django的模型(Model)的本质是类,并不是一个具体的对象(Object)。当你设计好模型后,你就可以对Model进行实例化从而创
- 本文实例讲述了Python多线程操作之互斥锁、递归锁、信号量、事件。分享给大家供大家参考,具体如下:互斥锁:为什么要有互斥锁:由于多线程是并
- mysql密码过期了,今天遇到了连接mysql,总是连接不上去, 错误现象1: An attempt by a client to chec
- 不知道大家有没有见过在python数组中使用...符号,因为前段时间读别人代码的时候遇到了这个符号立刻就云里雾里,于是这里特此记录一下。先来
- 本文实例讲述了python文件读写操作与linux shell变量命令交互执行的方法。分享给大家供大家参考。具体如下:python对文件的读
- 表示文字链接最清楚的方式是“蓝色文字+下划线”,这是在浏览器发展过程中形成的。这个问题大家都说过很多次了,我也曾经说过。然而,这样的规范却总
- 首先:确认自己安装有python(没有安装的同学可自行安装,这里我们不过多赘述)确认安装有python之后,win+r打开cmd窗口,输入p
- 本文实例讲述了python实现清屏的方法。分享给大家供大家参考。具体分析如下:一试:>>> import os>&g
- 本文实例讲述了Python递归及尾递归优化操作。分享给大家供大家参考,具体如下:1、递归介绍递归简而言之就是自己调用自己。使用递归解决问题的
- 除了使用 sys.exc_info() 方法获取更多的异常信息之外,还可以使用 traceback 模块,该模块可以用来查看异常的传播轨迹,
- 本文实例讲述了Python实现的用户登录系统功能。分享给大家供大家参考,具体如下:有N,E,Q三个选择,若选择Q或者中断,则系统退出。若其他
- 1. 换源地址# 中科大deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-
- private void button1_Click(object sender, Eve
- 前言很多朋友在使用Jetbrains系列软件的时候,可能都会有一个问题,那就是鼠标右击出现的Open Folder as PyCharm P
- 一、首先下载解压wget http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.33
- 序列化把对象(变量)从内存中变成可存储或传输的过程称之为序列化,在Python中叫pickling,在其他语言中也被称之为serializa