教程标题关闭所有内容预览 | 展开所有内容预览
-
网页设计DIV+CSS——第1天:选择什么样的DOCTYPE
[内容预览]
267 | 2006-12-25 10:29:00
前言大家好！这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作，同时把过程中的心得和经验记录下来，希望对大家有点帮助。好了，让我们开始吧第一天开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。查看本站首页原代码，可以看到...
[阅读全文]
-
网页设计DIV+CSS——第2天:什么是名字空间
[内容预览]
149 | 2006-12-25 10:29:00
DOCTYPE声明好以后，接下来的代码是：<htmlxmlns="http://www.w3.org/1999/xhtml"lang="gb2312">通常我们HTML4.0的代码只是<html>，这里的"xmlns"是什么呢？这个"xmlns"是XHTMLnamespace的缩写，叫做"名字空间"声明。名字空间是什么...
[阅读全文]
-
网页设计DIV+CSS——第3天:定义语言编码
[内容预览]
120 | 2006-12-25 10:29:00
第三步是定义你的语言编码，类似这样：<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有...
[阅读全文]
-
网页设计DIV+CSS——第4天:调用样式表
[内容预览]
128 | 2006-12-25 10:29:00
用web标准设计网站，过渡的方法主要是采用XHTML+CSS，css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS，如果你以前不常用，那么现在就开始学习吧。要制作符合web标准的网站，不懂CSS是设计不出漂亮的页面的。事实上，所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局，现在...
[阅读全文]
-
[图文] 网页设计DIV+CSS——第5天:head区的其他设置
[内容预览]
113 | 2006-12-25 10:29:00
这些技巧主要讲meta标签设置的，其实与符合web标准关系不大，只要注意在最后加"/"关闭标签就可以，但是既然是入门教程，就写得详细一点吧。收藏夹小图标如果你将本站加入收藏夹，可以看到在收藏夹网址之前的IE图标变成了本站特别的图标500)this.width=500"border=0>。要实现这样效果很简单，首先制作一...
[阅读全文]
-
[图文] 网页设计DIV+CSS——第6天:XHTML代码规范
[内容预览]
104 | 2006-12-25 10:29:00
在开始正式内容制作之前，我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。1.所有的标记都必须要有一个相应的结束标记以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结...
[阅读全文]
-
网页设计DIV+CSS——第7天:CSS入门
[内容预览]
101 | 2006-12-25 10:29:00
在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了，可以跳过这一节，直接进入下一节。CSS是CascadingStyleSheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。1.基本语法规范分析一个典型CSS的语句：p{COLO...
[阅读全文]
-
[图文] 网页设计DIV+CSS——第8天:CSS布局入门
[内容预览]
125 | 2006-12-25 10:29:00
CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。1.定义DIV分析一个典型的定义div例子：#sample{MARGIN...
[阅读全文]
-
[图文] 网页设计DIV+CSS——第9天:第一个CSS布局实例
[内容预览]
96 | 2006-12-25 10:29:00
接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把D...
[阅读全文]
-
网页设计DIV+CSS——第10天:自适应高度
[内容预览]
94 | 2006-12-25 10:29:00
如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面...
[阅读全文]
-
[图文] 网页设计DIV+CSS——第11天:不用表格的菜单
[内容预览]
92 | 2006-12-25 10:29:00
布局初步搭建起来，我开始填充里面的内容。首先是定义logo图片：样式表：#logo{MARGIN:0px;padding:0px;WIDTH:200px;HEIGHT:80px;}页面代码：<divid="logo"><atitle="网页设计师"href="http://www.w3cn.org/"><imgheig...
[阅读全文]
-
[图文] 网页设计DIV+CSS——第12天:校验及常见错误
[内容预览]
83 | 2006-12-25 10:29:00
辛苦了好多天，我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合web标准？W3C和一些志愿者网站提供了在线校验程序，来帮助我们检查页面是否符合标准，并提供了修正错误的帮助信息。这些校验非常有用，是我调试页面第一步要做的事情。1.XHTML校验校验网址：http://vali...
[阅读全文]
-
CSS的十八般技巧
[内容预览]
100 | 2006-12-25 10:29:00
原文作者：RogerJohansson作者简介：住在瑞典哥德堡，1994年开始接触和参与web设计，456BereaStreet是他的住址，因此采用这个名字作为他的个人主页域名原文出处：http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_pa...
[阅读全文]
-
CSS中常用的单位
[内容预览]
79 | 2006-12-25 10:29:00
一、长度单位长度单位是Web页设计中最常用的一个单位。一个排列无序、杂乱无章的页面不可能给人们留下什么好的印象。于是，在设计的时候需要为元素的位置、尺寸精确地定义一些值，以使其达到预期的效果。CSS给予人们精确控制网页的能力，这一点为人们津津乐道。它允许人们定义外观、尺寸、空间及其他的样式。但是，CSS所给出的...
[阅读全文]
-
用css布局时的居中问题
[内容预览]
66 | 2006-12-25 10:29:00
如何使DIV居中主要的样式定义如下：body{TEXT-ALIGN:center;}#center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;}说明：首先在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中...
[阅读全文]
-
CSS的常用技巧放送
[内容预览]
58 | 2006-12-25 10:29:00
一.使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。二.明确定义单位，除非值为0忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100...
[阅读全文]
-
[图文] 用CSS定义标题的几个实例
[内容预览]
80 | 2006-12-25 10:29:00
作者：阿宏原文：WhatistheBestWaytoMarkuptheTitleofaDocument?说明：本文是《WebStandardsSolutions:TheMarkupandStyleHandbook》一书中的一章。书号：ISBN:1590593812。我们会陆续翻译此书中有价值的章节。原作者：DanCed...
[阅读全文]
-
关于IFRAME 自适应高度的研究
[内容预览]
59 | 2006-12-25 10:29:00
重要提示：src=中你必须填写的网页地址，一定要和本页面在同一个站点上，否则，会抱错，说“拒绝访问！”之前自己也碰到过这个问题，为了得到答案去网上搜索，发现有不少人也遇到了这样的问题，现在就把解决方法共享一下超简单哦1、建立一个bottom.js的文件，然后输入下面的代码（只有两行哦）parent.document.a...
[阅读全文]
-
[图文] CSS中的滑动门技术研究
[内容预览]
90 | 2006-12-25 10:29:00
在CSS中，一个经常被人们讨论的先进之处即背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。根据CSS2.0当前的规定，每一个背景图像都需要各自的HTML元素。在许多情况下，典型的标记已经为一般的接口组件提供了多种元素以供我们使用。标签导航栏就是其中的一个例子。过去，我们频繁的使用这些标签，并已成...
[阅读全文]
-
实用HTML文件的增强标记
[内容预览]
70 | 2006-12-25 10:28:00
近年来，超文本标识语言(HTML)得到了迅速拓展。为满足更多的需要，它增加了许多扩展功能。设计新颖、吸引人的网页已经越来越依赖javaapplet(小程序)、内嵌脚本、图文框、插件和其它扩展的HTML功能。这些扩展的HTML功能不仅可以对文本作进一步的格式化，而且可以嵌入程序、动画和其它交互式操作元素，将曾经是静态的主...
[阅读全文]
