a. Cài đặt template
Trước khi tinh chỉnh lại Template cho phù hợp, chúng ta tiến hành cài đặt Template.
Chúng ta đặt các file vừa tạo vào một thư mục, tiếp đó nén thư mục đó với đuôi .Zip. Cài đặt và kích hoạt như một template thông thường.
Trang web đã có giao diện theo ý chúng ta ban đầu.
b. Tinh chỉnh việc thêm mới một module ở vị trí bất kỳ
Trong Administrator, chúng ta có thể thêm mới một module ở bất cứ vị trí nào chúng ta muốn, nhưng trước tiên module đó phải được sắp xếp thứ tự không trùng với các module ở cùng vị trí.
<html>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/<?php echo $this- >template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="header">
<div class="inside">
<?php echo $mainframe->getCfg('sitename');?>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php if($this->countModules('left')) : ?>
<div id="sidebar">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<?php endif; ?>
<div id="content">
<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<jdoc:include type="component" style="xhtml" />
</div>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2"> (adsbygoogle = window.adsbygoogle || []).push({});
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?>
<?php if($this->countModules('footer')) : ?>
<div id="footer">
<jdoc:include type="modules" name="footer" style="raw" /> </div> <?php endif; ?> </body> </html> Trong đó:
Kiểm tra đếm số module tại vị trí này, nếu không có module nào thì sẽ tạo vị trí tại đây
<?php if($this->countModules('vị trí')) : ?>
c. Tinh chỉnh phần thể hiện nội dung
Ở đây, chúng ta sẽ tinh chỉnh sao cho phần nội dung tự động thay đổi kích cỡ tùy thuộc vào sự có mặt hay không của hai vị trí left và right:
Trong file index.php: <html>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/<?php echo $this- >template ?>/css/template.css" type="text/css" />
<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60"; ?> </head> <body> <div id="header"> <h1><?php echo $mainframe->getCfg('sitename');?></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<?php if($this->countModules('left')) : ?>
<div id="sidebar">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">
<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
</div> (adsbygoogle = window.adsbygoogle || []).push({});
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?>
<?php if($this->countModules('footer')) : ?>
<div id="footer">
<jdoc:include type="modules" name="footer" style="raw" /> </div> <?php endif; ?> </body> </html> Trong đó:
Kiểm tra có sự xuất hiện các Module ở vị trí left, right.
Tùy vào từng trường hợp mà biến contentwidth được gán các giá trị tương ứng như 100,80,60.
<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?> Minh họa:
Contentwidth=80 – Tồn tại Module ở một trong hai vị trí left và right
Cần khai báo kiểu ở phần component:
<div id="content<?php echo $contentwidth; ?>"> Tùy vào từng trường hợp ở trên mà lấy định kiểu CSS
Trong file CSS, sẽ lấy 3 định kiểu css là content60, content80, content100 . body {
text-align:center;
}
#header {}
#sidebar {float:left;width:20%; overflow:hidden; }
#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}
#sidebar-2 {float:left;width:20%; overflow:hidden;}
#footer {clear:both;}
body {
font-size:76%; (adsbygoogle = window.adsbygoogle || []).push({});
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
d. Tinh chỉnh lại khoảng cách giữa viền và phần nội dung:
Thêm vào file CSS:
.inside {padding:10px;}
Đây là lớp CSS quy định khoảng cách giữa viền và phần nội dung là 10px theo cả 4 phía trên, dưới, trái, phải.
Ta có thể chèn lớp này vào bất cứ thành phần nào của index.php <body>
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg('sitename');?></h1>
<jdoc:include type="modules" name="top" style="xhtml" /> </div> </div> <?php if($this->countModules('left')) : ?> <div id="sidebar"> <div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">
<div class="inside">
<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<jdoc:include type="component" style="xhtml" />
</div>
</div>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2">
<jdoc:include type="modules" name="right" style="xhtml" /> </div> </div> <?php endif; ?> <?php if($this->countModules('footer')) : ?> <div id="footer"> <div class="inside">
<jdoc:include type="modules" name="footer" style="raw" />
</div>
</div> (adsbygoogle = window.adsbygoogle || []).push({});
<?php endif; ?>
</body>
e. Thiết kế khung định dạng cho các thành phần của trang Web.
Để có thể địnhd ạng một cách thống nhất các thành phần của trang Web như định dạng dòng, ảnh nền, màu chữ .v..v. ta sử dụng một thẻ div gom tất cả các thành phần vào một kiểu định dạng CSS.
Trong VD này, chúng ta sử dụng thẻ <div id=”wrap”> để nhóm tất cả các thành phần của trang web:
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg('sitename');?></h1>
<jdoc:include type="modules" name="top" style="xhtml" /> </div> </div> <?php if($this->countModules('left')) : ?> <div id="sidebar"> <div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">
<div class="inside">
<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<jdoc:include type="component" style="xhtml" />
</div>
</div>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" /> </div> </div> <?php endif; ?> <?php if($this->countModules('footer')) : ?> <div id="footer"> <div class="inside">
<jdoc:include type="modules" name="footer" style="raw" /> </div> </div> <?php endif; ?> </div> </body>
Trong file CSS, ta tạo ra 1 item như sau: #wrap{
background:# 999999; (adsbygoogle = window.adsbygoogle || []).push({});
text-align:left;
margin:0 auto;
}
Tạo font mặc định cho cả trang web: body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
background:#333;
}
Giao diện trang Web:
Việc thiết kế Tempate đẹp hay xấu chủ yếu phụ thuộc vào khả năng tinh chỉnh từng bước của người thiết kế.