网页设计学习XHTML的应用

  笼统来说,“标准网页”的文件组织就是XHTML+CSS。其中XHTML主要用来表示网页结构和显示内容,而CSS则是定义结构布局和修饰内容样式。

常用于布局的XHTML一般有:

DIV:主要用于页面内容逻辑上的分块,比如一张网页一般包括头部、导航、侧栏、内容和版权等责任分区。此时即可使用DIV标签分割。

同时对各区块建议这样的命名:

以下为引用的内容:

头部:<divid="masthead"></div>

导航:<divid="globalnav"></div>

侧栏:<divid="navbar"></div>

内容:<divid="content"></div>

版权:<divid="copyright"></div>

注:id具有唯一性,即在同一页面中不得重复出现该ID两次以上。否则使用class。

ul:其原本是无序列表,在XHTML+CSS的应用中常用来表示非结构类的同等元素。需要和UL的子元素LI配合使用。

以下为引用的内容:

<div>

<ul>

<li><ahref="#">Link1</a></li>

<li><ahref="#">Link2</a></li>

<li><ahref="#">Link3</a></li>

</ul>

</div>

span:如果拿这个元素和DIV进行比较,那么span是个袋子而div则是个箱子(语出小毅:XHTML代码的基本应用)。其实div是个块级元素,而span是个行内元素(参见有关内联(行内)元素、块级元素),通过span就可对一段或一行元素集中的某片断元素进行单独定义。

比如:

以下为引用的内容:

<ul>

<li><span>(2006-11-13)</span>XHML+CSS布局之XHTML应用小结</li>

</ul>

在css中定义span为左/右浮动,就能实现日期和标题的分两侧显示。这相对使用

以下为引用的内容:

<ul>

<li>2007-11-5webjx.com</li>

<li>XHML+CSS布局小结</li>

</ul>

要简单得多。

=======================================

在说完了常见的用于布局的XHTML标签后,还有的XHTML标签则是用来显示网页内容的。比如:

以下为引用的内容:

<imgsrc=""alt=""title=""/>表示图像

<ahref=""title=""></a>表示超级链接

<hn></hn>(n=1,2,...,6)表示页内容标题

其中建议h1-h6根据重要性依次递减,h1为最重要的标题(参见greengnn:div+css命名参考)

原本使用<b></b>和<i></i>表示粗体和斜体的标签,选择使用<strong></strong>和<em></em>代替。

时间: 2024-10-24 19:13:30

网页设计学习XHTML的应用的相关文章

网页设计学习路程心旅之路

选择网页设计的确是一条艰难且富有挑战性的道.有许多技能研究和知识提供的地方能使我们减少一大部分费用,其中最受欢迎的商品是书籍,但随着互联网的发展,现在比以前更容易在短短的几天,学习网页设计的原理. 我希望尽力收集一些有用的信息来源为那些有兴趣涉及此行的朋友,从网络论坛,教程和博客你可以找到几乎任何主题.你唯一需要的是要坚强的意志和决心,学习! 创建一个标准的网站 HTML 5是在W3的系列的最新版本.里面我们找到一个结构树分层语言标记和属性的基础. 然而你可能只是单一的创建简单的HTML,没有真

入门网页设计的几大困惑解答

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 近几年网页设计这门技术或者说这个行业很是热门,我也有幸在一家培训网站任职,作为选学网网页设计课程的老师,我发现很多人在选择参加网页设计学习的时候根本就对网页设计没有概念,也不去提前了解,只知道网页设计就是做网页的,学习起来很被动,也很迷茫.在这里,我就为那些没有基础,刚入门的初学者解答一些学习中的困惑. 一.很多没有基础的人,不知道网页设计应

学习网页设计必知的20个教学资源站

  好在伟大的互联网让全世界苦逼的互联网er都联合起来,一起解决问题.在线课程社区正是在这种情况下诞生的,应对不同需求的在线社区为需要学习的用户们提供了大量的辅助学习资料以及名师们的课程视频和文字教程,在社区中,你会发现一些传统经典的问题的解决方案,还能找到新兴技术和趋势的深度解读. 这些网站里有大量的第一手的学习资料,只要你用心学习,它们绝对不会让你失望. 1. Udemy Udemy是一个在线学习平台,如果你是技术大牛,可以在此销售自己的教学视频;如果你想在此学习技术,可以购买符合自己需求的

网页设计技巧:学习网页设计的网格系统

文章描述:网格系统是一种好的习惯,也是一种格式化的设计工具.有了它,你能更专注于内容呈递,更专注于强调重点. 网格确保了设计结构的组织分明.结构明晰.我们可以通过网格系统更好的打造设计的信息层级,让设计阅读起来更具有韵律感.就跟编码一样,编码需要有机的组织结构,而网页设计的网格系统也是同样的作用. The Grid System 设计师用起来舒服,开发者用起来顺手,当然,网格系统对于用户也是大有裨益的.我一直在强调设计要注重用户体验--毕竟,客户为你的内容消费,因此你要向他们提供有价值的体验.使

学习网页标准总结文章:关于网页设计知识

标准|设计|网页|网页设计 Web用户界面的开发在一个基于web的整体项目中起到至关重要的核心作用.  项目能否被客户所接受,70%的重心在于用户界面是否良好或优秀.  Web Design并非是一个中学生草草两笔能够负担得起的行当.  Web Design并非是一个程序员学习一周html能够胜任的职业.  experience + creativity + circumspection + afflauts + techon = web design. 使用dw或其他visual tools制

网页设计师学习网页设计的经验和技巧

随着公司影响力的壮大和产品的不断提升,相关的形象设计要逐步跟得上,需要逐渐提升,所以就招一个应届生网页设计师,算是一块成长.应届生有拼劲.肯学,但也好高骛远,起点都差不多,如何培养网页设计师就变得至关重要了.总结自己接触和学习设计的一点经验与大家分享,希望得到大家更多的建议. 一.配色 其实对色彩的感觉是设计师应具备的最基本素质,其作品不管是对网页界面.系统界面.还是产品包装等等都有广泛应用.基本的一些理论,什么冷暖色.对比色/补色.色彩心理.搭配原则等等,满大街都是,有意者随便搜一两篇看看就行

来和小伙伴一起学习响应式网页设计

  响应式网页设计 过去,上网需要一台电脑,一个猫. 现在呢,手机.平板.电视都可以上网. Responsive Web Design, 由Ethan Marcotte编写, A Book Apart出版,对响应式设计的原则进行了详尽的阐述. 多种设备均能支持联网,有利有弊: 好消息是,我们可以随时随地登入互联网. 坏消息是,设计师的工作量成倍的增加了,而且用户变得越来越挑剔,越来越不耐心. 在这种大环境下,响应式设计变成了主流. 响应式设计所带来的挑战 进行响应式设计,挑战有很多. 首先,设备

网页设计教学或学习计划

节次 教学内容 时数 1 网页设计概述 2 2 HTML的基本标志与格式标志 2 3 HTML的文本.图片与超级链接标志 2 4 HTML表格.表单与框架标志 2 5 HTML标志综合运用案例 2 6 Dreamweaver中简单WEB站点建立与管理 2 7 Dreamweaver中静态网页设计 2 8 Dreamweaver中动态网页设计 2 9 Dreamweaver综合性网页设计案例 2 10 VBScript概述 2 11 VBScript的基本元素与输入输出 2 12 VBScript

网页设计也要先对网站有全面形象定位

    ⑴ 内容决定形式 先把内容充实上,再分区块,再定色调,再处理细节. ⑵ 先整体,后局部,最后回归到整体. 全局考虑,把能填上的都填上,占位置.然后定基调,分模块设计.最后调整不满意的几个局部细节. ⑶ 功能决定设计方向 看网站的用途,决定设计思路,商业性的就要突出赢利目的:政府型的就要突出形象和权威性的文章:教育性的,就要突出师资和课程. 内容和功能决定表现形式和界面设计 常常拿到的任务是一张小纸条,上面两句话,叫你去做一个网站设计.有的人看看纸条就去设计页面了,凭两句话,你就可以为客户