| การออกแบบ joomla 1.5 template ตอนที่ 4 จบ |
 |
 |
 |
| เขียนโดย Administrator |
| วันอังคารที่ 12 มกราคม 2010 เวลา 20:24 น. |
|
รวบรัดตัดตอนเลย เอาเป็นว่า วางรูปแบบต่างเสร็จเรียบร้อยหมดแล้ว คราวนี้ก็ลอง enable โมดูลให้อยู่ตามตำแหน่งต่าง ๆ บน template ให้หมดแล้วดูว่า ผิดเพี้ยนหรือไม่ ถ้าไม่ได้ตามต้องการให้ไปปรับแก้ที่ css เอา ในการดูตำแหน่ง module position ของ joomla ให้เติม ?tp=1 ต่อท้าย url ลงไป ก็จะเห็นตำแหน่ง module ทั้งหมดบนหน้า template เช่น http://www.you.com/?tp=1
คราวนี้ก็ลอง preview ดู กับหลาย ๆ เบราเซอร์ ว่าการแสดงผลเป็นปกติหรือไม่ ดังรูปบน เป็นการ ดูใน firefox ปกติดี
ส่วนอันนี้เป็นการดูใน IE6 (Internet Explorer 6) จะเห็นว่าในส่วนของ content นั้น ชิดซ้ายอยู่ ส่วน head นั้นอยู่ที่เดิม วิธีแก้ไขคือ สร้างไฟล์ CSS อีกชุดหนึ่งเอาไว้ใช้กับ เฉพาะ ie6 โดยเฉพาะ โดยการก็อปปี้ โค๊ด css อันเดิมที่ใช้ (template.css) แล้วนำมาตั้งชื่อใหม่ เป็น ie6.css
แล้วเพิ่มโค๊ดนี้ลงไปใน index.php ของ template ในแท็ก <head> เพื่อเรียก css ตัวนี้ขึ้นมาเฉพาะเมื่อเปิดกับ ie6  ก็จะเป็นแบบนี้ <?php
defined('_JEXEC') or die('Restricted access');
?>
<!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" xml:lang="language; ?>" lang="
language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/joomla/baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/joomla/baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/joomla/baseurl ?>/templates/template ?>
/css/template.css" type="text/css" />
countModules('user1')): ?>
params->get('user1Type') == 'css'): ?>
<link rel="stylesheet" href="/joomla/baseurl ?>/css/sosdmenu.css" type="text/css" />
<script language="javascript" type="text/javascript" src="/joomla/template ?>
/js/cssmenu.js"></script>
<?php else: ?>
<link rel="stylesheet" href="/joomla/baseurl ?>/templates/template ?>
/css/sosdmenu.css" type="text/css" />
<script language="javascript" type="text/javascript" src="/joomla/template ?>/templates/
template ?>/js/moomenu.js"></script>
<?php endif; ?>
<?php endif; ?>
<!--[if lte IE 6]>
<link href="/joomla/baseurl ?>/templates/template ?>
/css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body id="page_bg">
<a name="top"></a>
<div id="mainbody">
<div id="header1">
<div class="logo"><a href="/joomla/index.php">getCfg('sitename') ;?></a></div>
<a href="/joomla/index.php" title="กลับสู่หน้าแรก"><div id="headerimage"></div></a>
countModules('user1')) : ?>
<div id="user1">
<div id="mainnav">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
</div>
countModules('header')) : ?>
<div id="header">
<jdoc:include type="modules" name="header" style="xhtml" />
</div>
countModules('user2 or user3')) : ?>
countModules('user2')) : ?>
<div id="user2">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
countModules('user3')) : ?>
<div id="user3">
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<div id="maincolumn_full">
<div class="top_full">
<div class="bottom_full">
<jdoc:include type="message" />
params->get('showComponent')) : ?>
<jdoc:include type="component" />
</div>
</div>
</div>
<div id="userall">
<div id="breadcrumbs">
<jdoc:include type="modules" name="breadcrumb" style="raw" />
</div>
</div>
<div id="userall">
<table width="980">
<tr>
countModules('user4 or user5 or user6')) : ?>
countModules('user4')) : ?>
<td>
<jdoc:include type="modules" name="user4" style="raw" />
</td>
countModules('user5')) : ?>
<td>
<jdoc:include type="modules" name="user5" style="raw" />
</td>
countModules('user6')) : ?>
<td>
<jdoc:include type="modules" name="user6" style="raw" />
</td>
</tr>
</table>
</div>
<div id="userall">
<div id="user7">
<jdoc:include type="modules" name="user7" style="xhtml" />
</div>
</div>
<div id="userall">
<div id="footer">
<div id="footer_holder">
Powered by <a href="http://www.joomlathaiclub.com/" target="_blank">Joomla!</a>
and designed by joomlathaiclub <a href="http://www.joomlathaiclub.com/" target="_blank">joomla thai</a>
</div>
</div>
</div>
</div>
<div id="userall">
<div id="debug">
<jdoc:include type="modules" name="debug" style="none" />
</div>
</div>
</body>
</html>
css ของ ie6 จริง ๆ ไม่ต้องหยิบ css มาจาก css หลักมาทั้งหมด เอามาเฉพาะส่วนที่แสดงผลผิดเพี้ยนเท่านั้นก็พอครับ
multiple IE โปรแกรมที่บรรจุ Internet Explorer หลาย ๆ เวอร์ชั่นเอาไว้ข้างใน ทำให้คุณสามารถใช้ ie หลายๆ เวอร์ชั่นเพื่อทดสอบเว็บไซต์ได้ในเครื่องเดียวกัน ดูรายละเอียดเพิ่มเติมที่นี่ http://tredosoft.com/Multiple_IE
เมื่อดูในทุกเบราเซอร์ลงตัวดีแล้ว จากนั้นก็มาสร้างรูปย่อ สำหรับ template โดยใช้โปรแกรม photoshop ขนาดรูปไม่ต้องใหญ่นักประมาณ 200*150px บันทึกเป็นไฟล์ชื่อ template_thumbnail.png เก็บไว้ในโฟล์เดอร์เดียวกัน
จากนั้นก็สร้างรายชื่อไฟล์ ว่าใน template มีไฟล์อะไรมั่ง เพื่อใช้ในการติดตั้ง แล้วทำการบันทึกรายชื่อไฟล์ต่าง ๆ ที่มีใน template ไว้ใน templateDetails.xml
บางท่านอาจจะมีไฟล์รูปภาพเยอะมาก อาจจะตกหล่นในการเก็บรายชื่อ มีเครื่องมือที่ช่วยลิสต์รายชื่อไฟล์ ให้ก็อปปี้โค๊ดด้านล่างแล้ว เซฟเป็นไฟล์ชื่อ remove.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>templateDetails.xml generator REMOVE PRIOR TO PACAKGING!!</title>
</head>
<body>
<h2>Remove this file prior to packaging your template!</h2>
<?php
$dir="html"; // change this to template directory where files are stored. "." = root.
if ($dir_list = opendir($dir)){
if ($dir == "."){
$dir = "";
}else{
$dir = $dir."/";
}//if/else
while(($filename = readdir($dir_list)) !== false){
if ($filename != ".DS_Store" && $filename != "." && $filename != ".." && $filename != "remove.php"
&& $filename != "css" && $filename != "html" && $filename != "images" && $filename != "js"){
?>
<filename></filename><br/>
<?php
}//if
}//while
closedir($dir_list);
}//if
?>
</body>
</html>
นำไปวางไว้ในโฟล์เดอร์ของ template จากนั้นก็รันไฟล์นี้ผ่านทางเบราเซอร์ แก้ไขส่วนนี้นิดหน่อยเพื่อให้เข้าไปลิสต์รายชื่อไฟล์ในโฟล์เดอร์ที่ลึกกว่านี้ $dir="html"; // change this to template directory where files are stored. "." = root.
แก้ไขที่ "html" ให้เป็นชื่อโฟล์เดอร์ที่ต้องการจะลิสต์รายชื่อไฟล์ หรือกำหนด เป็น (.) จุด เพื่อเป็น root โฟล์เดอร์
ก็จะแสดงผลลิสต์รายชื่อไฟล์ออกมาให้แถมใส่แท็กคำสั่งให้อีกต่างหากก็ทำการก็อปปี้รายชื่อไฟล์ดังกล่าวมาใส่ไว้ในไฟล์ templateDetails.xml
จากนั้นก็ทำการบีบไฟล์ทั้งหมดให้เป็นไฟล์ซิป (zip)
จากนั้นก็ลองติดตั้งดู
ถ้าขึ้น Install Template Success ก็แสดงว่าผ่าน ถ้า error ลองตรวจสอบว่าไฟล์อะไรขาดไปหรือเปล่าครับ จบครับ ขอให้สนุกกับการออกแบบเว็บไซต์
tip
การแทรกไฟล์แฟลชให้แสดงใน template <div id="flashHeader">
<object data="/templates/
/green-flash-sample.swf"
type="application/x-shockwave-flash"
width="320"
height="75"
FlashVars="itemID=">
<param name="movie" value="
/templates//green-flash-sample.swf" />
<param name="menu" value="false" />
<param name="FlashVars" value="itemID="/>
<param name="wmode" value="transparent" />
<param name="quality" value="best" />
</object> * เท่าที่ผมสังเกตุดูหน้าเพจที่มี แฟลชนั้นค่อนข้างจะกินกำลัง cpu ของเครื่องผู้ใช้พอสมควร อาจจะสักประมาณ 60-90 เปอร์เซ็นต์เลยที่เดียว นั้นก็อาจจะเป็นเหตุผลหนึ่งที่ทำให้ดูอืด ๆ เลื่อนหน้าเพจขึ้นลงก็รู้สึกหน่วง ๆ ทำให้ดูเหมือนเว็บอืด เพื่อไม่ให้หน้าเว็บโหลดช้าหรืออืด แบบเต่าแรกพี่ ก็ควรหลีกเลี้ยงการใช้ แฟลชเป็นหัวเว็บ (header) ใช้โมดูลที่เป็นรูปสไลด์จะทำให้หน้าเพจโหลดได้เร็วมากกว่าใช้ แฟลช css (หรือไม่จำเป็นต้องใช้ css ก็ได้) #flashHeader{
margin: 0;
margin-top: 1px;
width: 320px;
height: 75px;
}เปลี่ยนตรงชื่อไฟล์แฟลช green-flash-sample.swf เป็นของคุณเอง กำหนดความกว้างความสูงตามชอบใจ
ดาวน์โหลด template ชุดสุดท้าย (ทำเสร็จแล้ว)
To view rest of this section, please login or register.. ไฟล์สคริปสำหรับลิสต์รายชื่อไฟล์
To view rest of this section, please login or register..
|
| แก้ไขล่าสุด ใน วันพุธที่ 28 เมษายน 2010 เวลา 22:59 น. |
