Archive for the ‘Web design | 网站开发’ Category

DIV+CSS简单实现圆角矩形 方法汇总【附代码】

July 31, 2007

 网上搜集的几种DIV+CSS简单实现圆角矩形的方法,大家看哪个简单就用哪个吧!

更多方法整理中。。。

实现方法一:

<style>
div.bg{background:#ffc20e;width:50%}
b{display:block;}
/*将所有B标签转成块级元素*/
div b.topb b,div b.bottomb b{height:1px;overflow:hidden;background:#ffc20e;}
/*div标签内类名为topb/bottomb的那个b标签的css属性值–高为1px,溢出部份隐藏,背景色同div.bg的背景色*/ (more…)

Pages: 1 2 3 4 5

网站产品设计:不要耍花枪

June 18, 2007

于网站产品设计我是个门外汉,现在在学习,常常使用些土办法,全凭感觉。看到别人设计的东西,好的学习,2的就跟着反思。也时不时有一些小小的心得。比如说产品设计要注意的以下两点: [中国站长站] 

1.要简洁
    网站的功能在一个界面上,或者一个网站中,不能够太多,有人说和讯的产品做的功能强大,但是新浪的博客却要更胜一筹,往往是做产品的要更好的完成工作,要不停的推陈出新才能体现他们的价值。设计很多复杂的功能,用户却并不买账,用了80%的时间策划的功能被80%的用户抛弃。用户写博客无非希望有一个好的平台展示,有更多的渠道推广。就能够舒舒服服让用户写好博客就可能会有n多种的策略,把最多的精力放在那些80%的用户都最关注的核心功能上,让功能更加简洁易用才是产品设计最应该坚持的。 

Chinaz.com (more…)

Asp.net(C#)写的GridView更新代码

June 10, 2007

Asp.net(C#)写的GridView更新代码

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
        {
            try
            {
                string userid = GridView1.DataKeys[e.RowIndex].Value.ToString();//获取主键
                GridViewRow myrow = GridView1.Rows[e.RowIndex];
                string name = ((TextBox)myrow.Cells[1].Controls[0]).Text;//获取选中行单元格数据 (more…)

Datalist添加链接项的简便方法

June 10, 2007

天下午让老师把我做的毕业设计看了下,理所当然地被老师夸奖了一番。说做的不错,可能答辩的时候老师们

都不会相信之类的话。听了高兴了好一阵子。

在网上招聘模块,我之前只实现了通过datalist控件显示数据库表中数据的功能。老师看后又给我加了个“应聘该职位 ”的功能,让浏览者可以通过该功能把自己应聘的详细信息提交给网站管理员,以便从中选择性地对应聘者进行筛选。实现的基本思想也就是当用户点击“应聘该职位”时跳转至“填写个人信息”的提交页。在该过程中应将应聘职位的职位名页调用到该页显示。具体实现代码如下:  (more…)

什么是DIV+CSS

May 21, 2007

D IV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。 

CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。 

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

网络在线CSS工具推荐(附:在线CSS速查手册)

May 20, 2007

 络在线CSS工具推荐:

在线CSS速查手册

QrONE CSS Designer - 在线CSS编辑器,推荐首选,所见即所得,在线编辑,直接观看效果,比起DW都更方便。

J.Tabuchi

TypeTester 是文字样式CSS在线对比工具。

Online CSS Optimizer 是一个CSS的在线优化工具,可以减少CSS文件的冗余代码,缩小文件体积。

CSS整形和最佳化工具 也是一款CSS的优化工具,但必须确保源码符合规范,规范检验可以用以下的W3C检验服务。

W3C CSS 校验服务 提供万维网协会(W3C)样式表(CSS)校验服务。

Browsershots Browsershots

学习CSS的10大理由

May 11, 2007

为一个热门技术,CSS的发展的确有些缓慢。CSS最早被提议在1994年,最早被浏览器支持在1996年,CSS一直被力捧为传统的以HTML为基础的web代码的继承者。CSS使用样式表来控制整个站点字体和布局的能力,使它看起来非常有效率、易于设计和有远见。然而,也一直有荒诞的说法围绕着CSS,阻碍了网页设计师学习和掌握这种语言。究竟是什么让人们大惊小怪呢?

  我们访问了大学教师Christopher Schmitt,他是CSS的倡导者之一。Christopher深信CSS将成为网页设计师必备知识之一。
 
  问:CSS已经进入黄金发展期,您认为我们所有人现在就应该学习和开始使用CSS的十大理由是什么?

  Christopher:哦,下面是我的十大理由,不分排名先后:

  1.CSS将从基础开始建设直到全面替代传统web设计方法。W3C组织创建的CSS技术将替代HTML的表格、font标签、frames以及其它用于表现的HTML元素。 

  2.提高页面浏览速度。使用CSS方法,比传统的web设计方法至少节约50%以上的文件尺寸。 

  3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 

  4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了,有了CSS,我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题,改变字体颜色,字体样式等等。 

  5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。 

  6.提高易用性。使用CSS可以结构化HTML,例如:<p>标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。 

  7.可以一次设计,随处发布。你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。 

  8.更好的控制页面布局。不用多说。 

  9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。 

  10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。 

网上搜到的HTML标签语法大全,给大家分享

April 16, 2007

然对于HTML制作网站已经很熟悉,但还

是想总结下里面的各个标签的用法,所以上网搜了下来,分享给大家!希望对大家尤其是初学者带来帮助!

另外,为什么那些牛皮癣广告会做到我的BLOG里来,我的引用里已经有几万个这样的东西,看着好难受呀.也不知道

有没有什么办法能一次清除,希望知道的朋友能留言告诉我,不胜感激!

HTML标签语法大全:

HTML语法大全
a卷标 , 属性名称 , 简介 
<! - - … - -> 批注 
<!> 跑马灯 
<marquee>…</marquee>普通卷动 
<marquee behavior=slide>…</marquee>滑动 
<marquee behavior=scroll>…</marquee>预设卷动 
<marquee behavior=alternate>…</marquee>来回卷动 
<marquee direction=down>…</marquee>向下卷动 
<marquee direction=up>…</marquee>向上卷动 
<marquee direction=right></marquee>向右卷动 
<marquee direction=left></marquee>向左卷动 
<marquee loop=2>…</marquee>卷动次数 
<marquee width=180>…</marquee>设定宽度 
<marquee height=30>…</marquee>设定高度 
<marquee bgcolor=FF0000>…</marquee>设定背景颜色 
<marquee scrollamount=30>…</marquee>设定卷动距离 
<marquee scrolldelay=300>…</marquee>设定卷动时间 
<!>字体效果 
<h1>…</h1>标题字(最大) 
<h6>…</h6>标题字(最小) 
<b>…</b>粗体字 
<strong>…</strong>粗体字(强调) 
<i>…</i>斜体字 
<em>…</em>斜体字(强调) 
<dfn>…</dfn>斜体字(表示定义) 
<u>…</u>底线 
<ins>…</ins>底线(表示插入文字) 
<strike>…</strike>横线 
<s>…</s>删除线 
<del>…</del>删除线(表示删除) 
<kbd>…</kbd>键盘文字 
<tt>…</tt> 打字体 
<xmp>…</xmp>固定宽度字体(在文件中空白、换行、定位功能有效) 
<plaintext>…</plaintext>固定宽度字体(不执行标记符号) 
<listing>…</listing> 固定宽度小字体 
<font color=00ff00>…</font>字体颜色 
<font size=1>…</font>最小字体 
<font style =font-size:100 px>…</font>无限增大 
<!>区断标记 
<hr>水平线 
<hr size=9>水平线(设定大小) 
<hr width=80%>水平线(设定宽度) 
<hr color=ff0000>水平线(设定颜色) 
<br>(换行) 
<nobr>…</nobr>水域(不换行) 
<p>…</p>水域(段落) 
<center>…</center>置中 
<!>连结格式 
<base href=地址>(预设好连结路径) 
<a href=地址></a>外部连结 
<a href=地址 target=_blank></a>外部连结(另开新窗口) 
<a href=地址 target=_top></a>外部连结(全窗口连结) 
<a href=地址 target=页框名></a>外部连结(在指定页框连结) 
<!>贴图/音乐 
<img src=图片地址>贴图 
<img src=图片地址 width=180>设定图片宽度 
<img src=图片地址 height=30>设定图片高度 
<img src=图片地址 alt=提示文字>设定图片提示文字 
<img src=图片地址 border=1>设定图片边框 
<bgsound src=MID音乐文件地址>背景音乐设定 
<!>表格语法 
<table aling=left>…</table>表格位置,置左 
<table aling=center>…</table>表格位置,置中 
<table background=图片路径>…</table>背景图片的URL=就是路径网址 
<table border=边框大小>…</table>设定表格边框大小(使用数字) 
<table bgcolor=颜色码>…</table>设定表格的背景颜色 
<table borderclor=颜色码>…</table>设定表格边框的颜色 
<table borderclordark=颜色码>…</table>设定表格暗边框的颜色 
<table borderclorlight=颜色码>…</table>设定表格亮边框的颜色 
<table cellpadding=参数>…</table>指定内容与网格线之间的间距(使用数字) 
<table cellspacing=参数>…</table>指定网格线与网格线之间的距离(使用数字) 
<table cols=参数>…</table>指定表格的栏数 
<table =参数>…</table>设定表格外框线的显示方式 
<table width=宽度>…</table>指定表格的宽度大小(使用数字) 
<table height=高度>…</table>指定表格的高度大小(使用数字) 
<td colspan=参数>…</td>指定储存格合并栏的栏数(使用数字) 
<td rowspan=参数>…</td>指定储存格合并列的列数(使用数字) 
<!>分割窗口 
<set cols=”20%,*”>左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整 
<set rows=”20%,*”>上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整 
<set cols=”20%,*”>分割左右两个框架 
<set cols=”20%,*,20%”>分割左中右三个框架 
<分割上下两个框架 
<set rows=”20%,*,20%”>分割上中下三个框架 
<! - - … - -> 批注 
<A HREF TARGET> 指定超级链接的分割窗口 
<A HREF=#锚的名称> 指定锚名称的超级链接 
<A HREF> 指定超级链接 
<A NAME=锚的名称> 被连结点的名称 
<ADDRESS>….</ADDRESS> 用来显示电子邮箱地址 
<B> 粗体字 
<BASE TARGET> 指定超级链接的分割窗口 
<BASEFONT SIZE> 更改预设字形大小 
<BGSOUND SRC> 加入背景音乐 
<BIG> 显示大字体 
<BLINK> 闪烁的文字 
<BODY TEXT LINK VLINK> 设定文字颜色 
<BODY> 显示本文 
<BR> 换行 
<CAPTION ALIGN> 设定表格标题位置 
<CAPTION>…</CAPTION> 为表格加上标题 
<CENTER> 向中对齐 
<CITE>…<CITE> 用于引经据典的文字 
<CODE>…</CODE> 用于列出一段程序代码 
<COMMENT>…</COMMENT> 加上批注 
<DD> 设定定义列表的项目解说 
<DFN>…</DFN> 显示”定义”文字 
<DIR>…</DIR> 列表文字卷标 
<DL>…</DL> 设定定义列表的卷标 
<DT> 设定定义列表的项目 
<EM> 强调之用 
<FONT FACE> 任意指定所用的字形 
<FONT SIZE> 设定字体大小 
<FORM ACTION> 设定户动式窗体的处理方式 
<FORM METHOD> 设定户动式窗体之资料传送方式 
< MARGINHEIGHT> 设定窗口的上下边界 
< MARGINWIDTH> 设定窗口的左右边界 
< NAME> 为分割窗口命名 
< NORESIZE> 锁住分割窗口的大小 
< SCROLLING> 设定分割窗口的滚动条 
< SRC> 将HTML文件加入窗口 
<SET COLS> 将窗口分割成左右的子窗口 
<SET ROWS> 将窗口分割成上下的子窗口 
<SET>…</SET> 划分分割窗口 
<H1>~<H6> 设定文字大小 
<HEAD> 标示文件信息 
<HR> 加上分网格线 
<HTML> 文件的开始与结束 
<I> 斜体字 
<IMG ALIGN> 调整图形影像的位置 
<IMG ALT> 为你的图形影像加注 
<IMG DYNSRC LOOP> 加入影片 
<IMG HEIGHT WIDTH> 插入图片并预设图形大小 
<IMG HSPACE> 插入图片并预设图形的左右边界 
<IMG LOWSRC> 预载图片功能 
<IMG SRC BORDER> 设定图片边界 
<IMG SRC> 插入图片 
<IMG VSPACE> 插入图片并预设图形的上下边界 
<INPUT TYPE NAME > 在窗体中加入输入字段 
<ISINDEX> 定义查询用窗体 
<KBD>…</KBD> 表示使用者输入文字 
<LI TYPE>…</LI> 列表的项目 ( 可指定符号 ) 
<MARQUEE> 跑马灯效果 
<MENU>…</MENU> 条列文字卷标 
< NAME=”REFRESH” CONTENT URL> 自动更新文件内容 
<MULTIPLE> 可同时选择多项的列表栏 
<NO> 定义不出现分割窗口的文字 
<OL>…</OL> 有序号的列表 
<OPTION> 定义窗体中列表栏的项目 
<P ALIGN> 设定对齐方向 
<P> 分段 
<PERSON>…</PERSON> 显示人名 
<PRE> 使用原有排列 
<SAMP>…</SAMP> 用于引用字 
<Select>…</Select> 在窗体中定义列表栏 
<SMALL> 显示小字体 
<STRIKE> 文字加横线 
<STRONG> 用于加强语气 
<SUB> 下标字 
<SUP> 上标字 
<TABLE BORDER=n> 调整表格的宽线高度 
<TABLE CELLPADDING> 调整数据域位之边界 
<TABLE CELLSPACING> 调整表格线的宽度 
<TABLE HEIGHT> 调整表格的高度 
<TABLE WIDTH> 调整表格的宽度 
<TABLE>…</TABLE> 产生表格的卷标 
<TD ALIGN> 调整表格字段之左右对齐 
<TD BGCOLOR> 设定表格字段之背景颜色 
<TD COLSPAN ROWSPAN> 表格字段的合并 
<TD NOWRAP> 设定表格字段不换行 
<TD VALIGN> 调整表格字段之上下对齐 
<TD WIDTH> 调整表格字段宽度 
<TD>…</TD> 定义表格的数据域位 
<TEXTAREA NAME ROWS COLS> 窗体中加入多少列的文字输入栏 
<TEXTAREA WRAP> 决定文字输入栏是自动否换行 
<TH>…</TH> 定义表格的标头字段 
<TITLE> 文件标题 
<TR>…</TR> 定义表格美一行 
<TT> 打字机字体 
<U> 文字加底线 
<UL TYPE>…</UL> 无序号的列表 ( 可指定符号 ) 
<VAR>…</VAR> 用于显示变量 

韩国网站flashbanner的动态效果收集

April 12, 2007

国网站flashbanner的动态效果收集

http://designblack.com/index.html

什么是Ajax?

April 6, 2007

Ajax的定义

Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术。Ajax包括:

XHTML和CSS

使用文档对象模型(Document Object Model)作动态显示和交互

使用XML和XSLT做数据交互和操作

使用XMLHttpRequest进行异步数据接收

使用JavaScript将它们绑定在一起

传统的web应用模型工作起来就象这样:大部分界面上的用户动作触发一个连接到Web服务器的HTTP请求。

服务器完成一些处理—接收数据,处理计算,再访问其它的数据库系统,最后返回一个HTML页面到客户端。这是一个老套的模式,自采用超文本作为web使用以来,一直都这样用, 但看过《The Elements of User Experience》的读者一定知道,是什么限制了Web界面没有桌面软件那么好用。

图1: 传统Web应用模型(左)与Ajax模型的比较(右).
这种旧的途径让我们认识到了许多技术,但它不会产生很好的用户体验。当服务器正在处理自己的事情的时候,用户在做什么?没错,等待。每一个动作,用户都要等待。

很明显,如果我们按桌面程序的思维设计Web应用,我们不愿意让用户总是等待。当界面加载后,为什么还要让用户每次再花一半的时间从服务取数据?实际上,为什么老是让用户看到程序去服务器取数据呢?

Ajax如何不同凡响

通过在用户和服务器之间引入一个Ajax引擎,可以消除Web的开始-停止-开始-停止这样的交互过程. 它就像增加了一层机制到程序中,使它响应更灵敏,而它的确做到了这一点。

不像加载一个页面一样,在会话的开始,浏览器加载了一个Ajax引擎—采用JavaScript编写并且通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通讯。Ajax引擎允许用异步的方式实现用户与程序的交互–不用等待服务器的通讯。所以用户再不不用打开一个空白窗口,看到等待光标不断的转,等待服务器完成后再响应。

图 2: 传统Web应用的同步交互过程(上)和Ajax应用的异步交互过程的比较(下).
通常要产生一个HTTP请求的用户动作现在通过JavaScript调用Ajax引擎来代替. 任何用户动作的响应不再要求直接传到服务器—例如简单的数据校验,内存中的数据编辑,甚至一些页面导航—引擎自己就可以处理它. 如果引擎需要从服务器取数据来响应用户动作—假设它提交需要处理的数据,载入另外的界面代码,或者接收新的数据—引擎让这些工作异步进行,通常使用XML, 不用再担误用户界面的交互。