设计、网站、推广
始于2004年
当前位置:首页 > 网站制作

XHTML网页与HTML网页制作技术对比

发表日期:2013-12-4 作者来源:派谷网络 浏览次数:0

    目前看来关于XHTML网页的制作大家还存在很多的困惑,一一解答有些困难,我现在就XHTML网页与HTML网页制作技法上的不同来做一下说明。

    首先说一下HTML网页的制作方法:

    1.拿到美工设计图开始切图

    2.用表格把切的图拼成一个网页

    3.把内容放在已经编排好的空白处

    而XHTML网页在制作技法与顺序上是截然不同的,XHTML想要做的就是内容与版式的分离,那么自然制作人员与设计师的工作可以做到一定程度的分离。

    我们以我给理想做的FarideaRSS网页来进行一下XHTML网页制作流程的说明:

    1.内容划分

    将内容大刀阔斧的进行划分:Logo,导航,文章标题,作者,发布时间,Copyright等等,用代码表示就是:

<div id="context">
<div id="logo"></div>
<ul>
<li>菜单1</li>
<li>菜单2</li>
</ul>
<div id="items">
<div class="item">
<span class="title"></span>
<span class="author"></span>
<span class="time"></span>
<div class="memo">
</div>
</div>

    内容应当就是线性的排列下来,标签的目的仅仅是为了区分内容的结构,而并不用关心设计师的设计稿,忘记阴影、颜色、背景图吧,因为你和设计师在设计前已经商量好了网页内有哪些内容,所以设计也是为内容服务。

    2.简单排版

    这时我们拿到了设计师的设计稿,设计师们已经用很漂亮的颜色,很漂亮的版式为我们设计出了这个网页,这时就是CSS发挥威力的时候了,我们将原来定义的内容用CSS进行排版,用颜色块(先不要着急切图)对内容进行区分,先不要着急加背景图,因为那样只会扰乱你自己。示例如下:
此主题相关图片

    这时就是对制作人员的CSS功力的考验了,只要坚信一个信念,没有CSS做不到的就可以了:)

    3.细细品位

  这是网页的大体架构已经出来了,但是需要对设计师的页面进行细细品位了,为了效果设计师多会加一些阴影或者好看的背景图片,或者渐进式的图片,此时我们可能要在原有内容中加入一些辅助的标签来放置这些背景或点缀图片,但原则是尽可能的少加,能用原标签背景做的就用背景做,此处也比较考验制作人的CSS功力。

    4.兼容性

  我们还要在多款浏览器中做一下测试,看一下是否在每个浏览器中均正常,然后把代码尽可能的向XHTML标准靠拢。咱们的FarideaRSS已经顺利通过了XHTML的检验。 

    然后咱们再来回顾一下,XHTML网页制作步骤:

  1.内容大刀阔斧划分

    2.简单排版

    3.细细品位设计

    4.兼容性与标准

    总体来说XHTML网页制作时间要比传统HTML网页耗时,但出来的网页容量小兼容性好,最主要的是,不知大家是否注意到了,可以脱离DW这种可视化工具依赖,只要有一个好的CSS编辑器就可以了,这种依赖的脱离是不容小视的。

本文章系本站编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本站联系,我们将在第一时间删除内容!

相关网站设计案例

相关推荐新闻

缂傚啯鍨归悵顖炲嫉瀹ュ懎顫ら柛锝冨妿濞堟垹绱掔€涙ê袘缂佺媴绱曢幃锟�...

缂傚啯鍨归悵顖炲嫉瀹ュ懎顫ら柛锝冨妿濞堟垹绱掔€涙ê袘缂佺媴绱曢幃濠囧及椤栨壕鈧ɑ绌卞┑鍫㈢Ч缂佹梹鐟ц彊閻庤鍝庨埀顑跨閻c劑宕楅妸锝傚亾娓氣偓閻濐噣寮崼锝囩閻炴稑鐬煎▓鎴﹀礂閹惰姤鏆涚€规悶鍎扮紞锟�...

闁哄啨鍎插﹢锟犳晬閿燂拷2025-4-3

缂傚啯鍨归悵顖炲极閻楀牆绁﹂幖瀛樻尭閻c劑宕楅妸褎鐣遍悽顖涚摃椤棙绻涢敓锟�...

缂傚啯鍨归悵顖炲极閻楀牆绁﹂幖瀛樻尭閻c劑宕楅妸鈺傛〃濞戞挸顕ḿ鍐╁緞濮橀硸娼氶悽顖涚摃椤棙绻涙担钘夊墾闁挎稑鐭佺换鏍ㄧ濞戞ǚ鏋嗛柤鍏呯瑜版煡鎳楅挊澶樺殼闁煎嘲鐡ㄩ弳鐔煎箲椤旂晫顢ラ梻鍥х湴閳ь剨鎷�...

闁哄啨鍎插﹢锟犳晬閿燂拷2025-4-3

缂傚啯鍨归悵顖炲极閻楀牆绁﹂幖瀛樻尵濞堟垹鈧懓顦崣蹇曟媼閹规劦鍚€闂傚偊鎷�...

缂傚啯鍨归悵顖炲极閻楀牆绁﹂幖瀛樻尭閻°劑宕掗妸褎绲诲鍫嗗洤娅ら梺鎻掔Х椤╋箓鎯冮崟顒佹闁硅鍣槐婵囦繆閸屾粍鏆忛柟纾嬫腹娣囧﹪骞侀妯峰亾娴i攱鍞夐柡鍕崄椤斿洩銇愰弴妯峰亾娴i鐟归柛鏂哄墲閺嗭拷...

闁哄啨鍎插﹢锟犳晬閿燂拷2025-4-3

缂傚啯鍨块妴澶愬礆閺堢數绋婇悽顖氭憸閺併倕顔忛妷銉ュ緮闁告粌鏈俊褔寮甸敓锟�...

缂傚啯鍨块妴澶愬礆閺堢數绋婃繛鎴濐槸瀵兘宕氶弶娆炬▼濞戞搩浜為獮鍡涙嚍閸岋妇绀夊ù鐘劙缁楀懏绋夋潪鎵☉濞寸姴顑囩划娑氭暜閸濄儲鏆忛柣銊ュ娴兼劙宕楀畡鐗堝闁瑰灈鍋撻柡鍫灲缁辨壆鏁崫銉︽殢鐎归潻鎷�...

闁哄啨鍎插﹢锟犳晬閿燂拷2025-4-2

缂傚啯鍨归悵顖滄媼閹规劦鍚€闁艰褰冮崓鐢稿箹椤撱垹甯抽柛妯煎枔閹拷...

缂傚啯鍨归悵顖滄媼閹规劦鍚€濞戞搩鍘惧▓鎴︽嚌閹绘帒鍏婇柟纰卞弮閸樸倝宕㈤悢鐑樺€炴繛鎴濐槸瀵攱寰勫顐﹀殝闁哄倸缍婂ḿ浼存晬鐏炶姤鍊ら柣鐐叉缁诲秹鎮介妸銊х濞存粍绋戠敮顐︽偠閸℃璁插ù鐘劚閸拷...

闁哄啨鍎插﹢锟犳晬閿燂拷2025-4-2

网站建设解决方案
缂傚啯鍨归悵顖滅磼鐎涙ê袘閻熸瑱绲介崰鍛村棘鐟欏嫷鏀� 濞撮棿妞掔粭鐔兼⒒閵婏箑鐓曠紓鍐╁灩閻濐垶姊块崱娆忣唺闁告牗鐗炶闁告劘娅曢弻鐔奉浖閿燂拷 闁解偓閵夆晜鏁橀柛銊ヮ儑缂嶅绮╁▎鎹帡宕橀搹顐g厵婵℃鎷� 闁稿繑妲掗埀顑跨窔濞呭瞼鎮扮仦鑲╃懝缂傚啯鍨归悵顖氼嚈妤︽鍟庨悷娆欑到閸犲懘寮憴鍕垫敵 闁告牕顭峰▍宀€鎷犳繝鍐暡缂傚啯鍨归悵顖氼嚈妤︽鍟庨悷娆欑到閸犲懘寮憴鍕垫敵 闁归潧顑嗗┃鈧柡浣瑰閻栨粎鎮扮仦鑲╃懝缂傚啯鍨归悵顖氼嚈妤︽鍟庨柡鍌濐潐椤拷 濠㈣埖鐗為柨銈夊礂椤掆偓瀵板啰绱旈幋鐘靛讲鐎点倝缂氶鏇犳喆閿濆懎鏋€闁哄倽顫夐、锟� 闂佸弶鍨奸悗铏圭磾閹寸姷褰茬€点倝缂氶鏇犳喆閿濆懎鏋€闁哄倽顫夐、锟� 閻炴稑濂旂粭鐔煎础韫囧海绐楃紒顐ュ吹缂嶅绮╁▎蹇曠处閻犱焦宕樿闁告劘娅曢弻鐔奉浖閿燂拷 闁告繀鑳舵晶婵堚偓瑙勧缚缂嶅绱旈幋鐘靛讲鐎点倝缂氶鏇㈠棘鐟欏嫷鏀�