vJoomla模板CSS解析
08-03
Joomla模板CSS解析Joomla模板CSS解析【助你更好的了解Joomla模板】高手可以略過此貼了 ：）如果自己需要改模板的話，先要了解以下Joomla的模板的特色，於是找了些教程，自學... ...QUOTE:<body><!-- 1 --><?php echo $mosConfig_sitename;?><!-- 2 --><?php mospathway()?><!-- 3 --><?php mosLoadModules(『top『);?><!-- 4 --><?php mosLoadModules(『left『);?><!-- 5 --><?php mosMainBody();?><!-- 6 --><?php mosLoadModules(『right『);?><!-- 7 --><?php include_once( $mosConfig_absolute_path .『/includes/footer.php『 );?></body></html>邏輯順序一目了然：1. name of the site 網站名稱2. the pathway 模塊路徑3. top module 頂部模塊4. left modules 左側模塊5. main content 主要內容6. right modules 右側模塊7. the default footer module 默認的底部模塊這就是一個結構化的語義標記(semantic markup)的典型例子。它的目的十分單純和明確：讓任何人在瀏覽器端可以閱讀網頁的內容，讓任何瀏覽器都沒有障礙地展現網頁的全部內容，讓任何網頁閱讀裝置如網路蜘蛛都可以準確地抓取網頁信息。語義標記是奠定網站親和度(accessibility)的基石。有了這樣一個結構化的語義標記邏輯框架並不等於大功告成。Joomla!的模板世界豐富多彩，變幻詭譎。這些層出不窮的主題都不是由一個模子刻出來的。世界上也沒有哪個設計師能把大千世界鑲嵌進一個千篇一律的模板里。每誕生一個新主題，第一件要做的事情，就是跑到W3C的官方網站去驗證網頁代碼(xml和css)的合法性。二、CSS布局我們打算用CSS來謀劃一個三欄布局的Joomla模板，而且這個三欄布局是可變寬窄的(fluid)。頁面的寬窄布局迄今有兩種主要的模式，一種是固定寬窄(fixed)，還有一種就是可變寬窄。這兩種布局模式都是控制頁面寬度的。頁面的寬窄一直是困擾設計師的問題。由於人們使用不同解析度的瀏覽器，在設計頁面時不得不考慮解析度和人們的瀏覽習慣等因素。大約20%的衝浪者使用800X600解析度，這個數字正在下降。76%的人使用1024X768解析度，這是主流趨勢(數據來源：www.upsdell.com)。採用可變寬窄的頁面布局意味著你的網頁既不會在1024解析度下變得很窄，同時也可以在低解析度的顯示器上獲得完美展現。我們用float來給內容定位。下面是template_css.css文件的內容：QUOTE:<?php defined( 『_VALID_MOS『 ) or die( 『Direct Access to this location is not allowed.『 ); ?><!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" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>"<head><meta http-equiv="Content-Type" c /><?phpif ($my->id) { initEditor(); } ?><?php mosShowHead(); ?><script type="text/javascript"> </script><!--http://www.bluerobot.com/web/css/fouc.asp--><link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" /><style type="text/css"> <!--#wrap {width:80%;}#header {}#sidebar {float:left;width:20%;}#content {float:left;width:60%;}#sidebar-2 {float:left;width:20%;}#footer {clear:both;}--> </style></head><body><div id="wrap"><div id="header"><?php echo $mosConfig_sitename; ?> <?php mospathway() ?></div><div id="sidebar"><?php mosLoadModules(『left『);?></div><div id="content"><?php mosLoadModules(『top『);?> <?php mosMainBody(); ?></div><div id="sidebar-2"><?php mosLoadModules(『right『);?></div><div id="footer"><?php include_once( $mosConfig_absolute_path .『/includes/footer.php『);?></div></div> <!--end of wrap--></body></html>Joomla模板默認的層疊樣式表(Cascading Style Sheet,簡稱CSS)是template_css.css文件，它統領全局，是網頁整體布局的靈魂。CSS將所有的元素視為一個盒子(box)，由內容(content)、留白(padding)、外框(border)與邊界(margin)所組成。在此例中，全部內容都被裝填到一個叫「盒子」或「元素」的容器中。Joomla中的CSS圖示：轉載請保留出處，謝謝！此帖轉自智聯網信[http://bbs.13925.com/]原帖地址：http://bbs.13925.com/viewthread.php?tid=20616
推薦閱讀：
推薦閱讀：
※套用模板快速創建文檔：Word提高工作效率(10)
※初試PS：3、摳圖換背與PSD圖層模板
※十款基本拼布圖案 拼布模板自己動手做
※看這裡！績點證明的開具方式及模板！