| 共30页/449条记录 首页
1
[2]
[3]
[4]
[5]
[6]
[7]
下一页
末页
|
| |
 |
Div+CSS布局设计 网站设计的优点分析 |
| |
发布日期：2008-04-21 06:50:56 点击：54 |
 |
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。
<DIV>Very excellent webmaster club www.CHINAZ.com </DIV>
如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P> 是一样的。
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码
CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和 ...… |
|
| |
|
WEB2.0标准教程：第十二天 校验及常见错误 |
| |
发布日期：2008-04-19 00:56:02 点击：18 |
|
辛苦了好多天，我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合web标准？W3C和一些志愿者网站提供了在线校验程序，来帮助我们检查页面是否符合标准，并提供了修正错误的帮助信息。这些校验非常有用，是我调试页面第一步要做的事情。 1.XHTML校验 ● 校验网址：http://validator.w3.org/
● 校验方式:网址校验、文件上传校验
● 校验成功，会显示"This Page Is Valid XHTML 1.0 Transitional!",如图：
● 校验失败，会显示更多校验选项和错误信息，如图：
一般选择"Show Source"和"Verbose Output"可以帮助你找到错误代码所在行和错误原因。 XHTML校验常见错误原因对照表
● No DOCTYPE Found! Falling Back to HTML 4.01 Transiti ...… |
|
| |
|
WEB2.0标准教程：第十一天 不用表格的菜单 |
| |
发布日期：2008-04-19 00:40:07 点击：17 |
|
布局初步搭建起来，我开始填充里面的内容。首先是定义logo图片：样式表： #logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
页面代码： <div id="logo"><a title="WEB2.0标准教程 循序渐进十二天的基础学习！ " href="http://www.yzci.com/" ><img height="80" alt="WEB2.0标准教程" src="logo.gif" width="200" /></a></div>
以上代码现在应该容易理解。先在CSS定义了一个logo的层，然后在页面中调用它。需要说明的是，为了使网页有更好的易用性，web标准要求大家给所有的、属于正式内容的图片，加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字)，所以不要只写成无意义的图片名称。
接下来是定义菜单： ...… |
|
| |
|
WEB2.0标准教程：第十天 自适应高度 |
| |
发布日期：2008-04-19 00:14:33 点击：20 |
|
如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)： <html>
<head>
<style type="text/css">
#body,div{FONT-SIZE:12px;}
#pagebox{
margin:0px;
PADDING:20px;
BACKGROUND: #FFF;
FONT-FAMILY: arial,'宋体','新宋体',verdana,sans-serif;
WIDTH:600px;
}
#header{
MARGIN: 0px;
BORDER: 0px;
BACKGROUND: #ccd2de;
WIDTH: 580px;
HEIGHT: 60px;}
#mainbox {
MARGIN: 0p ...… |
|
| |
|
WEB2.0标准教程：第九天 第一个CSS布局实例 |
| |
发布日期：2008-04-18 23:49:15 点击：22 |
|
接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。
注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，我们开始： 1.确定布局
w3cn的最初设计草图如下：
用表格的设计方法的话，一般都是上中下三行布局。
用DIV的话，我考虑使用三列来布局,成为这样
...… |
|
| |
|
WEB2.0标准教程：第八天 CSS布局入门 |
| |
发布日期：2008-04-18 23:44:50 点击：16 |
|
CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。 1.定义DIV
分析一个典型的定义div例子：
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
说明如下� ...… |
|
| |
|
WEB2.0标准教程：第七天 CSS入门 |
| |
发布日期：2008-04-18 23:40:12 点击：26 |
|
在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。
如果你已经很熟悉了，可以跳过这一节。CSS是Cascading Style Sheets(层叠样式表)的缩写。
是一种对web文档添加样式的简单机制，属于表现层的布局语言。 1.基本语法规范
分析一个典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
·其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
·样式声明写在一对大括号"{}"中；
·COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
·"#FF0000"和"#FFFFFF"是属性的值(value)。 2.颜色值
颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进� ...… |
|
| |
|
WEB2.0标准教程：第六天 XHTML代码规范 |
| |
发布日期：2008-04-18 23:37:09 点击：19 |
|
在开始正式内容制作之前，我们必须先了解一下web标准有关代码的规范。
了解这些规范可以帮助你少走弯路,尽快通过代码校验。使我们的代码有一个统一、唯一的标准！ 1.所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:
<br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" /> 2.所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必� ...… |
|
| |
|
WEB2.0标准教程：第五天 head区的其他设置 |
| |
发布日期：2008-04-18 23:32:40 点击：16 |
|
这些技巧主要讲meta标签设置的，其实与符合web标准关系不大，只要注意在最后加"/"关闭标签就可以，但是既然是入门教程，就写得详细一点吧。 收藏夹小图标 首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区：
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 为搜索引擎准备的内容 代码如下，替换成你自己站点的内容就可以：
允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索，推荐采用robots.txt方法
<meta content="all" name="robots" /> 设置站点作者信息
<meta name="author" ...… |
|
| |
|
WEB2.0标准教程：第四天 调用样式表 |
| |
发布日期：2008-04-18 23:30:17 点击：14 |
|
用web标准设计网站，过渡的方法主要是采用XHTML+CSS，css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS，如果你以前不常用，那么现在就开始学习吧。要制作符合web标准的网站，不懂CSS是设计不出漂亮的页面的。事实上，所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局，现在要改用DIV来定位和布局。这是思维方式的变化，一开始有些不习惯。呵呵，任何变革都会有阻力的，为了享受标准带来的"益处"，放弃一些老的传统做法是值得的。 外部调用样式表 在以前，我们通常采用2种方法使用样式表：
页面内嵌法：就是将样式表直接写在页面代码的head区。类似这样： <style type="text/css"> <!-- body { background : white ; color : black ; } --> </style> 外部调用法：将样式表写在一 ...… |
|
| |
|
WEB2.0标准教程：第三天 定义语言编码 |
| |
发布日期：2008-04-18 23:28:43 点击：25 |
|
第三步是定义你的语言编码： <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。通常这样定义就可以了。但是要补充说明的是，XML文档并不是这样定义语言编码的，XML的定义方式如下： <?xml version="1.0" encoding="gb2312"?> 你在Macromedia.com的首页代码第一行就可以看见类似的语句，这也是W3C推荐使用的定义方法。那为什么我们不直接采用这种方法呢？原因是一些浏览器对标准的支持不完善，不能正确理解这样的定义方法，比如IE6/windows。所以在目前过渡方案下，我们依然推荐使用meta方式。当然，你可以两种方法都写。看本站源代码，你会发现 ...… |
|
| |
|
WEB2.0标准教程：第二天 什么是名字空间 |
| |
发布日期：2008-04-18 23:25:56 点击：17 |
|
DOCTYPE声明好以后，接下来的代码是： <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 通常我们HTML4.0的代码只是<html>，这里的" xmlns "是什么呢？这个"xmlns"是XHTML namespace的缩写，叫做"名字空间"声明。名字空间是什么作用呢？阿捷自己的理解是：由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。例如：小王和小李都定义了一个<book>标识，如果小王的名字空间是"http://www.xiaowang.com"，小李的名字空间是"http://www.xiaoli.com"，那么当两个文档交换数据时，也不会混淆<book>标识，因为它属于不同的名字空间。更通俗的解释是：名字� ...… |
|
| |
|
本文介绍Csser们，你该如何发展，如何学习进步？ |
| |
发布日期：2008-04-18 22:50:53 点击：18 |
|
经常有朋友问下一步应该如何学习，应该学习些什么内容，问自己的未来如何发展等等？我想很多人在迷惑，在徘徊，甚至有朋友怀疑自己职业的价值。
WEB标准第一境界 ，会用CSS布局，可以脱离table
WEB标准第二境界，能够兼容流行的浏览器，IE5.x——IE7.0，Firefox1.5+，Opera跟Firefox差不多
WEB标准第三境界，语义化的结构，搜索引擎优化初步，WAI（网站亲和力）基础，兼容打印，和手持设备
WEB标准第四境界，模块化的网页编码，大型项目的开发模式，网站前端性能优化，向前向后兼容所有浏览器和设备，搜索引擎优化高级，亲和力WAI1 AAA级（WAI2变动挺大，我不了解）
WEB标准第五境界（某些公司找前端的就要求这些），交互设计，前端编程（Javascript，Flex，AJAX），SEO关键词基本库等等外部技术，后台编程基础
WEB标准第六境境界，WEB前台架构师，负责前端编码架构，做类似与大型WEB2.0产品（Google web2.0，yahoo web2.0� ...… |
|
| |
|
CSS样式表实现效果很好的分页效果源代码 |
| |
发布日期：2008-04-18 22:47:04 点击：65 |
|
CSS样式表实现效果很好的分页效果，在学习编程过程中由于文章内容比较多或者列表内容比较多，我们都需要分页！那么你想不想要一种好的分页效果呢？这个是我认为比较容易使用，同时编程方面也挺容易实现的分页，就是以10页为基础，然后上十页和下十页，因为很少有人有兴趣会去看10页甚至20页以后的内容。
以下为引用的内容：
<!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=utf-8" />
<title>CSS Pagination Style Template webjx.com</title>
<style type="text/css">
<!--
#tnt_paginat ...… |
|
| |
|
CSS应用常见问题大总结 |
| |
发布日期：2008-04-18 22:33:51 点击：22 |
|
CSS是Cascading Style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”，我感到这样顺口一点，没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。以下是使用CSS中的常见问题，供参考。
1、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？
当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页中使用的CSS，采用文档头部方式；只有在一个网页一、两个地方才用到的CSS，采用行内插入 ...… |
|
|
| 共30页/449条记录 首页
1
[2]
[3]
[4]
[5]
[6]
[7]
下一页
末页
|
|
 |
|
相关分类 |
|
|
|
|
|
付款方式 
汇款确认 
索取发票 
代理平台 本网站使用华夏名网CDN网络加速
