用DIVCSS做网站设计布局参考文档格式.docx
- 文档编号:7313514
- 上传时间:2023-05-08
- 格式:DOCX
- 页数:13
- 大小:32.16KB
用DIVCSS做网站设计布局参考文档格式.docx
《用DIVCSS做网站设计布局参考文档格式.docx》由会员分享,可在线阅读,更多相关《用DIVCSS做网站设计布局参考文档格式.docx(13页珍藏版)》请在冰点文库上搜索。
恭喜恭喜,此文档已经通过CSS版本2.1校验!
六,关于Web标准的误区1,抛弃表格布局的思维方式当抽掉CSS文件,剩下的就是最本质的内容.这样才能在文本浏览器,手机,PDA等设备中阅读,才能随时修改CSS实现改版.2,正确使用XHTML标签XHTML的标签不是用来做"
表现"
的,而是用来定义结构的,因此,对不同的内容使用正确的XHMTL标签对于建立良好的文档结构是很重要的.何处使用<
h1>
何处使用<
p>
都要合理,这样不仅便于理解文档内容,同时对于CSS编写也很重要.3,关于理解CSS灵活的运用CSS选择器来进行CSS定义,将通用的样式写在外部CSS文件中,然后在页面内调用,同时还可以将不同的CSS定义在几个文件中.对于多次引用的样式可以用CLASS来定义,不需要每个元素都定义ID;
也不是一定要用DIV,有的内容完全可以用<
来代替,同样都是块级元素,一样有盒模型的七个参数,<
div>
仅仅方便浮动.4,"
通过验证"
并不是最终目的W3C校验仅仅是帮助制作者检查XHTML代码的书写是否规范,CSS的属性是否都在CSS2的规范内.代码的标准化仅仅是第一步,不是说通过校验,网页就标准化了.让网页具有良好的结构,更快的浏览速度,更友好的界面以及对更多设备的支持才是最终目的.
第二节DIV+CSS做网站设计布局的优势分析
市场的需求往往引起这个行业得很大改革,文件下载与页面显示速度更快,使得很多网站已经开始重构Web,采用层(DIV)布局,并且使用层叠样式表(CSS)来实现页面的外观.一,Web标准:
是一系列标准的集合.
二,网页主要由三部分组成:
结构(Structure),表现(Presentation)和行为(Behavior).
三,对应的标准也分三方面:
a)结构化标准语言主要包括:
XHTML和XMLb)表现标准语言主要包括:
CSSc)行为标准主要包括对象模型:
(如W3CDOM),ECMAScript等.d)根据W3CDOM规范是一种W3C颁布的标准,用于对结构化文档建立对象模型,从而使用户可以通过程序语言(包括脚本)来控制其内部结构.简单的理解,DOM解决了Netscaped的JavascriptMicrosoftJscript之间的冲突,给予WEB设计师和开发者一个标准的方法,让他们来访问他们站点中的数据,脚本和表现层对象.
四,采用标准的好处:
a)文件下载与页面显示速度更快.b)内容能被更广泛的设备所访问(包括屏幕阅读机,手持设备,搜索机器人,打印机,电冰箱等).c)用户能够通过样式选择定制自己的表现界面.d)所有页面都能提供适于打印的版面.
五,采用标准对网民有者的好处如下:
a)更少的代码和组件,容易维护.b)带宽要求降低(代码更简洁),成本降低.c)更容易被搜索引擎搜索到.d)改版方便,不需要改变页面内容.
六,什么是内容,表现,结构和行为a)内容就是制作者放在页面内真正想要访问者浏览的信息,可以包含数据,文档或者图片等.b)结构用结构将它格式化.分成标题,正文和列表等.易于阅读和理解.c)表现:
虽然定义了结构但是内容还是原来的样式没有改变.例如,标题字体没有变大,正文的颜色也没有变化,没有背景,没有修饰.所有用来改变内容外观的东西,称之为"
.d)行为就是对内容的交互及操作效果,例如,使用Javascript判断一些表单提交,或者实现菜单的显示和隐藏等.HTML和XHTML页面都是由"
结构,表现和行为"
这三方面组成的.内容是基础,然后是附加上去结构和表现,最后再对它们加点"
行为"
.
七,DIV与CSS结合的优势
八,传统的HTML3.2/4.0标签里既有控制结构的标签,如<
br>
等,也有控制表现的标签如;
font>
background>
等,还有本意是用来控制结构却被用来控制表现的标签<
table>
结构与表现标签混杂在一起.
九,网站制作者往往会遇到如下问题:
1,,改版:
例如需要把标题文字替换成红色,下边结变成一像素灰色的虚线,那么就要一页一页的修改.CSS的出现,解决了"
批量修改表现"
的问题,最广泛的被制作者接受的CSS属性,例如,控制字体的大小颜色,超链接,表格的背景色等.
2,数据的利用:
本质上讲,所有页面信息都是数据,例如,CSS所有属性的解释,就可以建立一个数据库,数据就存在数据查询,处理和交换的问题.由于结构表现混杂在一起,装饰图片,文字被层层的表格嵌套拆分.从哪里开始是标题,从哪里开始是说明,哪些是附加信息不需要打印?
如果靠软件是无法判断的,唯一的方法是人工处理.这要如何解决呢,就是要内容,结构与表现分离.例如<
说明资料<
/h1>
h1{font:
宋体"
14px;
color:
#000;
border-bottom:
1pxsolid#CCC;
}如果把上例改为红色,粗体,下边线为红色虚线可以直接修改h1的样式h1{font:
14pxbold;
#F00;
1pxdashed#F00;
}
第三节
一,HTML与XHTML打开一个网页,查看它的源代码,就会看到一些有规律的英文代码,这些组成网页的代码就是——超文本链接标示语言(HypertextMarkupLanguage,html)"
超文本"
就是指网页内包含图片,链接甚至音乐,程序等非文字元素,"
标示"
就是说它不是程序,只是于文字及标记组合而成.浏览器或其它可以浏览网页的设备将这些"
HTML"
语言翻译过来,并照定义的格式显示出来,转化成最终看到的网页.二,常用的HTML标签1,标题<
到<
h6>
2,段落段落内也可以包含其他的标签,如图片标签<
img>
换行标签<
链接标签<
a>
等3,换行标签<
强制换行为了向XHTML过度,最好养成关闭标签的好习惯,为空标签加上"
/"
如<
img/>
4,链接链接可以分为超链接和锚点,这两种标签都是使用锚标签<
来建立.<
ahref="
链接文字<
/a>
5,列表有三种无序列表,列表项目前面有黑色的圆点<
有序列表,列表项目前面有数字序号.<
ol>
/ol>
释义列表是一列事物以及与其相关的解释.<
dl>
dt>
/dt>
dd>
/dd>
/dl>
6,图片图像(images)是由<
标签定义的,<
也是一个空标签.<
url"
图片解释"
title="
给页面的图像都加上alt标签是一个好习惯,它有助于更好的显示信息,而对纯文本浏览器或者关闭了图片显示功能的浏览器会很有用.注:
不加alt标签,就不能通过w3c布局校验.7,表格表格的<
tr>
th>
td>
等标签都可以设置宽度,高度,背景色等多种属性.可是一般不推荐在HTML内定义这些属性,而应将其统一定义到CSS样式表内,以方便
修改.8,层层(div)称为定位标记,其作用是设置文字表格图片等的摆放位置.<
/div>
若想灵活地使用层来布局页面,就要深刻理解层的含义,它和表格,标题等标签不同,它没有实际的意义,只是一个"
容器"
用来放置其它元素,然后利用CSS样式从而布置这个容器的摆放位置.9,范围范围(span)和层的作用类似,只是<
span>
标签一般应用在行内,用以定义一个小块需要特别标示的内容,<
标签需要通过CSS样式表才能发挥作用.10,框架使用框架(Frames),可以在一个浏览器窗口中显示多个页面.所有的框架都放在一个总的HTML文件中,这个档案只记录了该框架如何分割,不会显示任何资料,所以没有<
body>
标记,浏览器通过解释这个总文件而将其中划分的各个框架分别对应的HTML文件显示出来.<
frameset>
用来划分框架,每一框架由一个<
frame>
标签所标示,<
必须在<
标签内使用.<
标签的src属性指向在此窗口内打开的HTML页面.Name属性为框架窗口定义了名称,这个名称可以用在链接的target属性内.框架虽然让页面的表现形式变得灵活起来,但是不支持框架的浏览器(例如可上网手机的浏览器)将无法浏览网页内容,要打印一个框架页面也会很麻烦,同时制作页面的过程也会变得更加复杂.目前比较常用的框架是<
iframe>
它是ie专用的标签.其作用是在一个页面插入框架以显示另外一个文件.注:
目前大部分非IE浏览器也支持<
标签,不过<
与<
一样也有缺点,例如在手持设备上还是不支持.11,表单<
fieldset>
legend>
基本信息<
/legend>
/fieldset>
formaction="
dreamdu.php"
method="
post"
enctype="
multipart/form-data"
id="
dreamdu"
用户名与密码:
inputname="
hiddenField"
type="
hidden"
value="
hiddenvalue"
/>
labelfor="
username"
用户名:
/label>
inputtype="
text"
pass"
密码:
password"
性别:
radio"
1"
sex"
boy"
男<
2"
girl"
女<
3"
保密<
我最喜爱的:
checkbox"
fav"
computer"
计算机<
trval"
旅游<
buy"
购物<
对梦之都的意见:
select"
你对梦之都的感觉<
selectsize="
option>
很全面,很好<
/option>
一般般吧,还要努力<
有很多问题,不过还可以<
/select>
梦之都编程语言选择:
multipleselect"
你想在梦之都学习的编程语言<
10"
multiple="
multiple"
XHTML<
CSS<
JAVASCRIPT<
XML<
PHP<
C#<
JAVA<
C++<
PERL<
我要在梦之都学:
WebDesign"
选择一个你在梦之都最想学的<
selectid="
optgrouplabel="
client"
optionvalue="
HTML<
CSS"
javascript"
javascript<
/optgroup>
server"
PHP"
ASP"
ASP<
value="
JSP"
JSP<
option<
database"
Access"
Access<
MySQL"
MySQL<
option
SQLServer"
SQLServer<
个人化信息:
myimage"
个性照片上传<
file"
size="
35"
maxlength="
255"
contactus"
联系我们<
textareacols="
50"
rows="
dreamerdreamdu[at]163[dot]com<
/textarea>
提交:
submit"
reset"
/form>
12,注释HTML<
!
---->
CSS表中/**/三,升级到XHTMLHTMLA发展到今天存在以下三个主要缺点:
手机,PDA,信息家电都不能直接显示HTML由于HTML代码不规范,臃肿,浏览器需要足够智能和庞大才能正确显示HTML.于是W3C又制定了XHTML,XHTML是HTML向XML过渡的一个桥梁.XML是Web发展的趋势,XHTML是当前替代HTML4.0标记语言的标准,使用XHTML1.0,只要遵守一些简单规则,就可以设计出既适合XML系统,又适合当前大部分HTML浏览器的页面,这个指导方针可以使Web平滑的过渡到XML.XHTML能与其他基于XML的标记语言,应用程序及其协议进行良好的交互工作,XHTML是Web标准家族的一部分,能很好地用在无线设备等其他用户代理上.在网站设计方面,XHTML可帮助作者去掉表现层代码的恶习,帮助制作者养成标记校验来测试页面工作的习惯.
第四节XHTML和HTML的比较
1,选择DTD定义文档的类型DOCTYPE是documenttype的简写,用来说明本文件用的XHTML或者HTML是什么版本.在XHTML中必须声明文档的类型,以便于浏览器知道正浏览的文档是什么类型的.其中的DTD(如xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据定义的DTD来解释页面的标识,并展现出来.XHTML1.0提供了以下三种DTD声明可供选择过渡的(Transitional):
要求宽松的DTD,它允许继续使用HTML4.01的标识(但是要符合XHTML的写法)严格的(strict)要求严格的DTD,不能使用任何表现层的标识和属性框架的(Frameset):
专门针对框架页面使用.注:
DW8只在选择文档类型,软件会自动插入相应的DOCTYPE.2,设定一个名字空间(NameSpace)一个名字空间是收集元素类型和属性名字的一个详细的DTD,名字空间声明允许通过一个在线地址指向来识别名字空间,只要直接在DOCTYPE声明后面添加如下代码:
htmlXMLns=http:
//www.w3.org/1999/xhtml>
自动添加的.3,定义语言编码为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言.<
metahttp-equiv="
Content-Type"
content="
text/html;
charset="
GB2312"
4,XHTML语言一定要被正确地嵌套使用在HTML里一些元素可以不正确嵌套也能正常显示<
Howareyou?
/p>
在XHTML里必须正确嵌套才能正常显示<
5,XHTML文件一定要有正确的组织结构所有的XHTML应该正确地嵌套在以<
html>
开始以<
/html>
结束的元素里面,其它的元素可以有子元素,并且子元素也要被正确的嵌套在它们的父元素内.如:
head>
/head>
/body>
6,标签名字一定要用小写字母因为XHTML是XML的一种,而XML对大小写是敏感的.7,所有的XHTML元素一定要关闭8,所有的属性名字必须小写9,属性值必须带上英文双引号10,属性的简写被禁止checkedchecked="
checked"
selectedselected="
selected"
11,用ID属性代替name属性在XHTML里除了表单之外,name属性不能使用,应该用id来替换.如<
img/cat.jpg"
name="
cat"
12,lang属性lang属性可以应用于几乎所有的XHTML元素,它指定了元素中内容的语言属性.如果在一个元素中应用lang属性,必须加上xml:
lang属性,如:
divlang="
no"
xml:
lang="
Norge<
如何转换现有的结构为XHTML1.要将一个HTML转换成XHTML,一般可以依照以下步骤进行.2.添加一个DOCTYPE定义,过渡型,一般是目前理想的选择.3.标签和属性名都要小写.4.5.6.所有的属性值都加上英文引号.关闭空标签.如<
在后面不要忘了加/.校验网站.第四节层叠样式表CSS一,样式表分类:
内联式样式表,<
style="
color:
red"
嵌入式样式表,<
styletype="
text/css"
red<
/style>
外部式样式表.
linkrel="
stylesheet"
href="
style/basic.scc"
层叠样式表(CSS,CascadingStyleSheet)
二,规则基本规则:
选择符和{声明}声明包括(属性:
值)例:
P{color:
red;
font-size:
14px;
}html,body{padding:
0;
margin:
0}*{margin:
0}选择符:
1,类型选择符(就是HTML文档中的元素2,类选择符(以点开头,名字自定)3,ID选择符(以#开头,名字自定)类选择符和ID选择符的区别:
类选择符可以重复使用,且可以用在任意元素上,使用任意次.ID属性应该是唯一的,只有拥有该ID的元素才会应用该样式.ID选择符的优先权高于类选择符.三,CSS伪类伪类是让页面呈现丰富表现力的好东西.之所以称之为"
伪"
是因为它们指定的对象在文档中并不存在,它们指定的是元素的某种状态.应用最广泛的链接四种状态(a:
link,a:
visited,a:
hover,a:
active)伪元素:
对文档虚构的元素进行定义.First-letter(设置元素内第一个字符的样式表属性.)First-line(设置元素内第一行的样式表属性.)Before(设置在元素前发
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DIVCSS 网站 设计 布局 参考