การออกแบบ joomla 1.5 template ตอนที่ 3

Design Articles

Random Articles

Template Design

( 1 Vote )

เขียนโดย Administrator

วันเสาร์ที่ 09 มกราคม 2010 เวลา 20:34 น.

ต่อจากตอนที่ 2

จากที่ได้ออกแบบโครงสร้างเรียบร้อยแล้วคราวนี้ก็มาใส่ลวดลาย ให้ template กันเพื่อให้เกิดความสวยงาม

จาก template เปล่า ๆ หน้าขาว ๆ ก็จะเติมพื้นหลังให้กับ template โดยใช้รูป

โดยใช้รูปด้านบนนี้ พอจะเห็นรูปกันไหมครับนี่ เพราะมันบางมาก ๆ ^

โดยการกำหนดที่ <body> โดยใส่ id ของ css ลงไป <body id="page_bg"> ตั้งชื่อเป็น page_bg

css กำหนดเป็น อ้อ เกือบลืม เอารูปบาง ๆ นั้น(ที่อยู่ด้านบน) ใส่ไว้ในโฟล์เดอร์ images ด้วยนะครับ ชื่อของไฟล์รูปคือ page_bg.png

#page_bg {
    background: #fff url(../images/page_bg.png) repeat-x top left;
}

สวยขึ้นมาหน่อย พื้นหลังเป็นสีเทา ๆ

กำหนดพื้นหลังเป็นอย่างอื่นก็ได้นะครับ เช่นกำหนดพื้นหลังเป็นสี

#page_bg {
    background: #000000; <---เปลี่ยนเป็นโค๊ดสี
}

จากนั้นก็จะใส่รูปสักหน่อย โดยเอารูปด้านล่างนี้ใส่ที่บริเวณ header คลุมไปถึง user1

ชื่อรูป headerimg.jpg ขนาด 960*340 px เช่นเดิมก็เอารูปนี้ใส่ไว้ในโฟล์เดอร์ images

โดยจะเอา <div id="header1"> </div> ครอบส่วน header, user1 ไว้

<div id="header1">
 
<div id="user1">
    <jdoc:include type="modules" name="user1" style="xhtml" />
</div><!---end user1-->
 
 
 
 
<div id="header">
    <jdoc:include type="modules" name="header" style="xhtml" />
</div><!---end header-->
<?php endif; ?>
</div> <!---end header1--->

เขียน css "header1" เพิ่ม ดังนี้

#header1 {
    position:relative;
    margin:0 auto;
    height:301px;
    width:744px;
    padding:64px 0 0 216px;
    background: transparent url(../images/headerimg.jpg) no-repeat top center;
}

ก็จะออกมาเป็นแบบนี้ครับ

หัวโล่ง ๆ แบบนี้ไม่ดีแน่ เติมต้นคริสมาส เข้าไปที่หัวเว็บสักหน่อย โดยใช้รูปนี้

โดยการเพิ่ม <div id="headerimage"></div> เข้าไปใต้แท็ก <div id="header1"> เป็นแบบนี้

<div id="header1">
<div id="headerimage"></div>  <------ที่ได้เพิ่มเข้าไป
 
<div id="user1">
    <jdoc:include type="modules" name="user1" style="xhtml" />
</div><!---end user1-->
 
 
 
 
<div id="header">
    <jdoc:include type="modules" name="header" style="xhtml" />
</div><!---end header-->
<?php endif; ?>
</div><!---end header1--->

เขียน css "headerimage" เพิ่ม ดังนี้

#headerimage {
    position:absolute;
    top:0;
    left:0;
    width:216px;
    height:365px;
    background: transparent url(../images/img.jpg) no-repeat top left;
}

เริ่มดูดีขึ้นมาทันที

เพื่อให้รูปสามารถเป็นลิ้งก์เพื่อกลับสู่หน้าแรกได้ด้วยก็ใส่ <a href="/joomla/index.php" title="กลับสู่หน้าแรก"></a> ครอบ <div id="headerimage"></div>

<a href="index.php" title="กลับสู่หน้าแรก"><div id="headerimage"></div></a>

ในส่วน footer ดูโล่ง ๆ ใส่เส้นไปซักหน่อย โดยใช้รูปนี้

เหมือนเดิมครับใช้ <div> ครอบ footer ไว้

<div id="footer_holder">
    <jdoc:include type="modules" name="footer" style="none" />
</div><!---end footer_holder--->

คราวนี้ ผมจะเอาเส้นที่ระบุขอบเขตของพื้นที่ออก border: 1px solid #008080; ที่อยู่ในส่วนต่าง ๆ ของ css

จากนี้ก็ใส่เส้นของที่ main content โดยใช้รูปภาพที่ทำไว้แล้ว เป็นลักษณะเส้นเล็ก ๆ ดังในรูปด้านล่าง

โดยใส่ <div id="maincolumn_full"> ครอบ <jdoc:include type="component" /> ไว้

<div id="maincolumn_full">
        <jdoc:include type="message" />
        <jdoc:include type="component" />
</div>

เขียน css maincolumn_full โดยใช้รูปเส้นเล็ก ๆ

#maincolumn_full {
    width:960px;
    margin:0 0 10px 0;
    background: transparent url(../images/content_m_full.gif) repeat-y top center;
}

จากนั้นก็ใส่เส้นล้อมรอบ main content ไว้ ซ้าย ขวา บน ล่าง

<div id="maincolumn_full">
        <div class="top_full">
            <div class="bottom_full">
                        <jdoc:include type="message" />
                        <jdoc:include type="component" />
            </div>
        </div>
    </div>

เขียน css ดังนี้

.top_full {
    background: transparent url(../images/content_t_full.gif) no-repeat top center;
}
 
.bottom_full {
    padding: 10px;
    background: transparent url(../images/content_b_full.gif) no-repeat bottom center;
}