标准网页设计中的常用字体 CSS中常用英文字体font-family

设计网页的时候有很多同学希望能设计出漂亮的字体,但是往往事与愿违,因为网页设计中的字体,如果浏览者的电脑中没有安装相应的字体,那么浏览者电脑里显示的字体就不是预定的精美字体而是被默认的字体所替代
本文总结了Dreamweaver常用字体以及一些外国的常用英文字体
请看下面一段程序以及显示的效果

<html>
<head>
<title>网页设计常用字体效果</title>
<style type="text/css">
<!--
div { font-weight:bold;}
.STYLE1 {color: #FF0000}
-->
</style>
</head>
<body>
<span class="STYLE1">Dreamweaver中常用字体</span>
<div style="font-family: monospace">monospace 【UAcool Network Technology 0123456789】</div>
<div style="font-family: Courier">Courier 【UAcool Network Technology 0123456789】</div>
<div style="font-family: Geneva">Geneva 【UAcool Network Technology 0123456789】</div>
<div style="font-family: Helvetica">Helvetica 【UAcool Network Technology 0123456789】</div>
<div style="font-family: Georgia">Georgia 【UAcool Network Technology 0123456789】</div>
<div style="font-family: Arial">Arial 【UAcool Network Technology 0123456789】</div>
<div style="font-family: sans-serif">sans-serif 【UAcool Network Technology 0123456789】</div>
<div style="font-family: Verdana">Verdana 【UAcool Network Technology 0123456789】</div>
<div style="font-family: 'Courier New'">'Courier New' 【UAcool Network Technology 0123456789】</div>
<div style="font-family: 'Times New Roman'">'Times New Roman' 【UAcool Network Technology 0123456789】</div>
<div style="font-family: Times">Times 【UAcool Network Technology 0123456789】</div>
<div style="font-family: serif">serif 【UAcool Network Technology 0123456789】</div>
<span class="STYLE1">其他常用字体</span>
<div style="font-family: optima">optima 【UAcool Network Technology 0123456789】</div>
<div style="font-family: Impact">Impact 【UAcool Network Technology 0123456789】</div>
<div style="font-family: Palatino">Palatino 【UAcool Network Technology 0123456789】</div>
<div style="font-family: 'Century Gothic'">'Century Gothic' 【UAcool Network Technology 0123456789】</div>
<div style="font-family: 'Gill Sans'">'Gill Sans' 【UAcool Network Technology 0123456789】</div>
<div style="font-family: bodoni">bodoni 【UAcool Network Technology 0123456789】</div>
<div style="font-family: Tahoma">Tahoma 【UAcool Network Technology 0123456789】</div>
<div style="font-family: 'Lucida Grande'">'Lucida Grande' 【UAcool Network Technology 0123456789】</div>
<div style="font-family: 'Comic Sans MS'">'Comic Sans MS' 【UAcool Network Technology 0123456789】</div>
</body>
</html>

显示效果如下截图

HTML网页设计中 Css命名标准和规范技巧

在web网页设计中,我们经常要用的的就是html和css了,相信有很多新手刚刚接触這些还不是太懂,同时包括一些老鸟们,你们编程的时候是如何命名css的呢?随便取名?或者是想怎么命名就怎么命名?是不是有的时候连自己都不知道哪些css命名代表什么含义了?弄的很乱。
笔者根据很多网站页面设计的统计,还有自己多年来在web方面设计的经验总结了些Css命名方面的规范特分享给广大网友朋友
先看个截图:

这是我给公司设计的一个网页产品页,整个页面大体上是这样分开的,大体上分 头部、中部、底部,再看下框架图:


就拿这个设计的页面举例,有的朋友总是喜欢用#left{} #right{}这样的css id来命名页面中间的内容部分。用#left{}来标记左侧导航,用#right{}来标记右侧内容区,虽然css怎么命名都可以很自由,但是这样的命名很不规范,为什么这么说呢?
因为如果你的网页设计后要改版改页面,新页面把原来的左侧导航挪到右侧,而把右侧的内容挪到左侧,那你怎么办?难道还要重新命名你的标记名称?
这显然是徒劳的,那如果把左侧的#left{}修改成#sideBar{} 把右侧的#right{}修改成#content{}就会更好些。

我参照了国外很到网站,一部分人用wrap标记整个网页也有人用content来标记整个网页页面其他的也有,但用container标记整个页面的相对较多
采用较多的规范布局如下:
#container{}
—-#header{}
—-#wrap{}
——–#sideBar{}
——–#content{}
—-#footer{}

#content{} 标签下开可以放 .main .info 等等
在往下的细类我就不说了,细类太多,如果你感兴趣可以到网上搜索下相关css命名规范 css布局规范等等,不知道看到这篇文章的网友们都怎么命名自己的css标签的…………….

dedecms后台模板修改-自定义字段

dedecms后台模板比较多而且容易乱,不过还好大多数都能找到,但是有一些模板还真难找,我就碰到了
最近我在做一个电动工具公司的网站做产品页的时候,我增加了一些自定义的字段
增加模型自定义字段的方法:【内容模型管理】/【字段管理】选项中 添加新字段,如图:

我们这此讨论的不是添加自定义字段,而是修改后台模板,为什么开头介绍了字段呢?因为我们的模板之所以要修改是因为这个字段设计的问题,请看下图:

也许你会问,这没什么问题啊!?
那我这样讲,试问如果我的产品属性都不一样,个别产品只要功率、转速,还有一些产品只要功率、电流,还有一些产品只要最大工作时间和价格……
如果是这样该怎么办?如果有几十类产品怎么办?难道我要每个类产品都建立个模型?每个类产品都建立模板?这显然过于徒劳了。

我的办法是统计属性最多的那个产品的属性数量,假如产品一共有5个属性,那么我就做10个自定义字段
字段1对应产品属性1,字段2对应产品属性1的值
字段3对应产品属性2,字段4对应产品属性2的值

那么这就会产生个问题,10个字段如果像上图那样排列,要排10行,而且不便于输入,那么我们就要把后台产品添加的模板改成下图的样子,然后把功率改成“属性一”,把转速改成“属性一值”(截图中未改动)

因为我使用dedecms的图集栏目做产品,所以我在dede/album_add.php对应的dede/templets/album_add.htm的这个模板修改,但是找了半天没有找到修改自定义字段的样式的地方,甚至都没看到自定义字段在哪里出现,但是我发现了一句这样的代码:

          <img src='img/menusearch2.gif' style='cursor:pointer;' onClick="ShowCatMap(event, this, <?php echo $channelid; ?>, 'typeid2')" alt='选择副栏目' title='选择副栏目' />
			    </td>
        </tr>
        </table>
      </td>
    </tr>

    <tr>
      <td><?php PrintAutoFieldsAdd($cInfos['fieldset'],'autofield'); ?></td>
    </tr>
    <tr>
      <td height="24"  bgcolor="#F1F5F2" class="bline2">&nbsp;<strong>图集选项:</strong></td>

里面的这段代码引起了我的注意<?php PrintAutoFieldsAdd($cInfos[‘fieldset’],’autofield’); ?>
网上查了些资料,有一部分人研究过这东西提到了下列两个文件
dedeincinc_archives_functions.php
includecustomfields.func.php
但是都不是很具体,于是我查了下后台发布产品页面的源代码,发现我自定义的字段功率和转速的位置有table出现,两个table分别包住了两个字段,而且table里有这样的代码width=”90″ class=”bline” height=’24’

于是我就用 DreamWeaver 在整个dedecms目录里 搜索了下width=”90″ class=”bline” height=’24’关键字,还真被我搜出来了,原来这个模板藏在这个目录里
templetssystemcustom_fields_admin.htm
而且名称大众化很难让我注意,不过还好搜到了,它里面的代码是这样的。

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:3px;">
   <tr>
    <td width="90" class="bline" height='24'>&nbsp;~name~:</td>
    <td class="bline">~form~</td>
   </tr>
</table>

我简单的把里面的代码改了下,呵呵结果如下

<div width="90" class="bline" height='24' style="float:left;">&nbsp;~name~:</div>
<div class="bline" style="float:left;">~form~</div>

到此为止也算是功德小圆满了
本文右岸原创,转载请注明出处
右岸Joe

web table表格样式特效[二]Zebra Tables

Zebra Tables是国外的一个tables表格网页设计,这款表格样式设计的很漂亮 所以在此笔者把它找出来介绍给大家
预览地址:http://www.xxtime.com/blog/wp-content/uploads/2010/12/zebratables.html
预览截图

如果想使用此代码,可以直接在预览地址 查看源代码 里面有全部的程序代码

Zebra Tables设计炫酷,交叉条纹式
代码的table部分写的很干净,html代码如下:

<body onLoad="stripe('playlist', '#fff', '#00ff00');"><a name="top"></a>
<!-- 这行是交叉条纹颜色设置-->

<div id="bottle">
<h1>iTunes Stripes</h1>

<table id="playlist" cellspacing="0">
	<tbody>
		<tr>
			<td>1</td>
			<td>Lost In The Plot</td>
			<td>The Dears</td>
		</tr>
		.... ....
	</tbody>
	<tbody>
		<tr>
			<td>5</td>
			<td>Living Room</td>
			<td>Tegan And Sara</td>

		</tr>
		.... ....
	</tbody>
	<tbody>
		<tr class="selected">
			<td>8</td>
			<td>Sore</td>
			<td>Buck 65</td>
		</tr>
        .... ....
	</tbody>
</table>

css代码部分分析

<style type="text/css">

	#playlist {
		border: 1px solid #666666;/*表格外边框颜色*/
	}

	#playlist tbody tr td {
		font-family: "lucida grande", verdana, sans-serif;
		font-size: 8pt;
		padding: 3px 8px;
		border-left: 1px solid #D9D9D9;/*边框色*/
	}

	#playlist tbody tr.selected td {
		background-color: #3d80df;/*被选择的行颜色*/
		color: #ffffff;
		font-weight: bold;
		border-left: 1px solid #346DBE;
		border-bottom: 1px solid #7DAAEA;
	}
</style>

推荐15个CSS框架

什么是css框架

实际上还是让我们从框架说起吧。
框架就是一个你可以用于你的网站项目的基本的概念上的结构体。

css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如:

  • typography.css 基本排版规则
  • grid.css 基于网格的布局
  • layout.css 通常的布局
  • form.css for 表单样式
  • general.css 更多通用规则

您还可以参考以下前端开发/CSS相关资源:

推荐12款可用于前端开发的免费文本编辑器
Web前端开发必备手册下载
推荐20个让你学习并精通CSS的网站
300+Jquery, CSS, MooTools 和 JS的导航菜单资源

下面一起来了解一下各种不同的CSS框架吧:

1.960 Grid System

CSS-框架-960

960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。

2.WYMstyle CSS Framework

CSS-框架-WYMstyle

这个项目的目的是提供一组经过良好测试的模块化的CSS文件,能够用于网站的快速设计。WYMstyle是一组CSS文件,你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块,WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

3.YAML CSS Framework

CSS-框架-YAML

Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。

4.YUI Grids CSS

CSS-框架-YUI

基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 这个4KB的文件可提供超过1000中页面布局组合。

有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法:

  • 负Margin技术
  • 使用度量单位em
  • 清除布局的浮动

5.Logicss Framework

CSS-框架-logicss

Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset文件或是用“*”),排版支持文本字体大小调整(使用EMs) 和垂直居中,符合可定义的灵活的布局网格利用css代码生成工具

6.CleverCSS

国外-CSS-框架

CleverCSS是一个用于css的受Python启发的小型的标记语言,它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法:它基于缩进而且不单调。虽然这显然违反了Python的规则,它依然是组织样式的很好的主意。

7.Elements CSS Frameworks

CSS-框架-elements

Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架,它有自己的项目工作流。它拥有你完成项目所需的所有东西,这也让你和你的浏览者感到愉悦。阅读 概述 了解更多。

8.Blueprint CSS

CSS-框架-blueprint

Blueprint 是一个 CSS 框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,BP由一个易用的网格、合理的布局和一个打印样式。

9.Schema Web Design Framework

CSS-框架-schema

Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同,Schema提供必要的基础来开始并立马让你的设计跑起来。

10.Emastic CSS Framework

CSS-框架-emastic

Emastic 是一个CSS框架,它有连续的任务:探索陌生的新世界,寻找新生活和新的网站空间,大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化,在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。

11.That Standards Guy CSS Framework

CSS-框架

* 只能调用单个样式文件
* 主样式需要取得CSS认证(WCAG 1.0);
* 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac;
* IE Hacks使用独立文件;
* 快速创建模板;
* 少量注释/实例演示,可以节省时间来理解。

12.Content with Style Framework

CSS-框架-content

下一个逻辑步骤就是将这个扩展为CSS框架,允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板…

13.Boilerplate CSS Framework

CSS-框架-boilerplate

14.ESWAT Web Project Framework

CSS-框架-eswat

ESWAT正在重新整理。如果你是冲着我的网站框架来的,那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

15.Tripoli CSS Framework

CSS-框架-tripoli

Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准,Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

web table表格样式特效[一]tablecloth

Tablecloth详细教程
预览地址:http://www.xxtime.com/blog/wp-content/uploads/2010/12/tablecloth/tablecloth.html
下载地址:http://cssglobe.com/lab/tablecloth/
利用JavaScript和Css实现表格交叉条纹行样式,和鼠标经过高亮动态样式以及点击高亮样式,Html程序非常干净
截图如下:

涉及语言:Html , Css , JavaScript
网页部分源程序很干净代码如下:

<table cellspacing="0" cellpadding="0">
    <tr>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>

Css代码略微比较复杂有兴趣的话可以研究下,当然拿过来直接用就可以了

table, td{
	font:100% Arial, Helvetica, sans-serif;
}
table{width:100%;border-collapse:collapse;margin:1em 0;}
th, td{text-align:left;padding:.5em;border:1px solid #fff;}
th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;}
td{background:#e5f1f4;}

/* tablecloth styles */

tr.even td{background:#e5f1f4;}
tr.odd td{background:#f8fbfc;}

th.over, tr.even th.over, tr.odd th.over{background:#4a98af;}
th.down, tr.even th.down, tr.odd th.down{background:#bce774;}
th.selected, tr.even th.selected, tr.odd th.selected{}

td.over, tr.even td.over, tr.odd td.over{background:#ecfbd4;}
td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;}
td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;}

/* use this if you want to apply different styleing to empty table cells*/
td.empty, tr.odd td.empty, tr.even td.empty{background:#fff;}

JavaScript程序写得比较复杂,不过你不用看,只需看里面的一部分配置就行

// CONFIG
// if set to true then mouseover a table cell will highlight entire column (except sibling headings)
var highlightCols = false;

// if set to true then mouseover a table cell will highlight entire row	(except sibling headings)
var highlightRows = true;

// if set to true then click on a table sell will select row or column based on config
var selectable = true;

// this function is called when
// add your own code if you want to add action
// function receives object that has been clicked
this.clickAction = function(obj){
	//alert(obj.innerHTML);

};
// END CONFIG (do not edit below this line)

你只需要配置这三个参数即可
var highlightCols = false; 设置是否当鼠标经过表格列的时候整列高亮
var highlightRows = true;设置是否当鼠标经过表格行的时候整行高亮
var selectable = true;设置当鼠标点击表格的时候整行或者整列高亮(跟上面两个参数有关)