JoomlaHitz สอนทำเว็บไซต์ด้วย Joomla แนะนำการใช้งานจูมล่า! Extensions Template

3 องค์ประกอบหลักในการทำเว็บไซต์

3 องค์ประกอบหลัก ในการทำเว็บไซต์

   สวัสดีครับ ก่อนอื่นเราคงต้องมาทำความเข้าใจกันก่อนนะครับ ถึงแนวความคิดในการออกแบบ Template ของ Joomla ในสไตร์ของผม ซึ่งอาจจะไม่ได้ตรงต่อหลักการของการสร้าง Template ทั่วไปสักเท่าไหร เนื้องจากผมใช้ประสบการณ์ในการทำ Template นำมาแนะนำให้เพื่อนๆได้ฟังกัน ดังนั้น จึงต้องของออกตัวก่อนนะครับ เอาละลองมาดูกันครับ


   เริ่มต้นนี้ เพื่อนๆต้องมองรูปแบบของเว็บไซต์ก่อนนะครับว่ามีองค์ประกอบที่สำคัญอะไรบ้าง โดยผมจะแยกออกเป็น 3 ส่วนที่สำคัญให้กับเพื่อนๆได้ทราบนะครับ 

 

โครงสร้าง ของเว็บไซต์

   การสร้างูรูปแบบโครงสร้างของเว็บไซต์นั้น ไม่ได้หมายความว่าเพื่อนๆจะต้องสร้างแบบตายตัวเสมอไปนะครับ เพราะโครงสร้างของเว็บไซต์ เราสามารถออกแบบได้หลากหลายสไตร์มาก ขึ้นอยู่กับความต้องการของเรา โดย โครงสร้างหรือตำแหน่งต่างๆของเว็บไซต์นั้น เบื้องต้น จะถูกกำหนดด้วย การใช้ Div ในไฟล์ index.php ของเทมเพลท เป็นตัวบอกตำแหน่งต่างๆ ดังรูปที่.1

3 องค์ประกอบหลัก ในการทำเว็บไซต์

รูปที่.1

โดยในรูปตัวอย่างเทมเพลทที่ผมสร้างขึ้นมานั้น ผมแยกตำแหน่งเลเอาท์ออกเป็นส่วนๆ ดังเลขที่ 1-4 ซึ่งถ้ามองในมุมของ code ในไฟล์ index.php ของเทมเพลท ก็จะได้ ดังนี้

<div id="top-main">
	<div id="top-body">        
		<div id="top-module" >
			<jdoc:include type="modules" name="user-4" style="xhtml" />
		</div>
	</div>        
</div>
<div id="head-main" >
	<div id="head-body" >        
		<div id="logo-module" >
			<jdoc:include type="modules" name="logo" style="xhtml" />
		</div>
	</div>        
</div>
<div id="menu-main" >
	<div id="menu-body" >        
		<div id="menu-module" >
			<jdoc:include type="modules" name="menu" style="xhtml" />
		</div>
	</div>        
</div>
<div id="slide-main" >
	<div id="slide-body" >        
		<div id="slide-module" >
			<jdoc:include type="modules" name="slide" style="xhtml" />
		</div>
	</div>        
</div>

 

   ถ้าดูจาก code เพื่อนๆจะเห็นว่า ผมแทบจะทำ Div ซ้ำๆ กัน (ต่างกันที่ชื่อ ของ Div นะครับ ) ในตำแหน่งต่างๆ แต่รูปแบบที่แสดงในหน้าเว็บกลับแตกต่างกัน ก็เพราะ เราใช้เจ้า div นี้เป็นพื้นฐาน การกำหนดตำแหน่งต่่างๆก่อน เท่านั้นเอง ส่วนรูปแบบที่แตกต่างกันก็จะมาจาก css และ module ที่เราใช้นั้นเอง เอาเป็นว่าในเรื่องของ div ผมจะมาอธิบายในบทต่อไปถึงพื้นฐานที่ผมใช้ในการกำหนดตำแหน่งนะครับ 

 

Images หรือ รูปภาพ


   ในทุกเว็บไซต์จะต้องมีรูปภาพเข้ามาเกียวข้องเสมอ ดังนั้นเราต้องทราบก่อนว่า รูปภาพที่จะนำมาแสดงในเว็บไซต์นั้น จะมาจากส่วนไหนบ้าง ซึ่งมีคร่าวๆ ดังนี้


2.1 รูปภาพพื้นหลัง หรือ Background เป็นรูปภาพที่ถูกกำหนดการแสดงรูปภาพ จาก css เป็นหลัก นะครับ ซึ่งไม่ได้หมายถึงแค่ Background ของเว็บอย่างเดี่ยวนะครับ ผมรวมถึง Background ของ Div ในตำแหน่งต่างๆ ด้วยนะครับ ดังรูปที่.2

3 องค์ประกอบหลักในการทำเว็บไซต์

รูปที่.2

เลขที่ 1 คือ รูปภาพ Background ของเว็บไซต์นะครับ

ส่วนเลขที่ 2 เป็น Background ของ div สไลด์โชว์

ส่วนเลขที่ 3 เป็น Background ของ Div Intro (อันนี้เป็น Background ที่แสดงเป็น ตัวอักษร นะครับ)


2.2 รูปภาพจาก Module หรือ Plugin ต่างๆ ในส่วนนี้ จะเป็นตัวกำหนดการแสดงรูปภาพผ่านทางโมดูลที่เราใช้ โดยเว็บไซต์จะสวย หรือ ลงตัว ก็อยู่ที่การเลือกใช้รูปภาพ และการกำหนดการแสดงผลของรูปภาพผ่านทางโมดูลหรือปลั๊กอิน ที่ดีนั้นเอง ดังรูปที่.3

3 องค์ประกอบหลักในการทำเว็บไซต์

รูปที่.3


ในตำแหน่งเลขที่ 1 เป็นการแสดงรูปใหญ่ สลับไปมา 2 รูป

เลขที่ 2 เป็นโมดูลที่แสดงรูปสไลด์ไปทางซ้าย จำนวน 6 รูป โดยสไลด์หายไปและขึ้นมาที่ละรูปนะครับ

ดังนั้น ถ้าเราสามารถที่จะมองการใช้รูปภาพในเว็บไซต์ของเราออกและรู้ว่าควรวางที่ตำแหน่งไหน ก็จะทำให้เว็บไซต์เราสวยขึ้นนะครับ

ตัวอักษร 

ตัวอักษร หรือ Text นั้น จะเป็นตัวแปรสำคัญ ในการที่จะทำให้เว็บเราดูดี และมีความสำคัญในเรื่องต่่างๆ มากมาย ดังนั้น เราก็ต้องทราบก่อนว่า เราจะกำหนดการแสดง Text ได้จากส่วนไหนบ้าง
3.1 ตัวอักษร จาก Module ที่แสดงในหน้าเว็บไซต์ ไม่ว่าคุณจะเขียน Content หรือ เนื้อหา ดียังไง แต่ถ้า การนำเนื้อหาเหล่านั้นมาแสดงที่หน้าเว็บไซต์ไม่ลงตัว ก็อาจจะทำให้เว็บคุณดูไม่ดีไปเลยก็ได้นะครับ ซึ่งการจะกำหนดการแสดงตัวอักษรของ Content หรือเนื้อหาต่างๆ คุณจำเป็นต้องเลือก Module ที่ดี ที่สามารถจัดการและปรับเปลียนรูปแบบการแสดงตัวอักษรของคุณได้


3.2 ตัวอักษรที่กำหนดผ่าน template นอกจากเราจะสามารถกำหนดรูปแบบการแสดงตัวอักษรด้วยโมดูลต่างๆแล้ว เรายังสามารถกำหนดรูปบบของตัวอักษร จากเทมเพลทที่เราใช้ได้ด้วย โดยการกำหนดผ่านทาง css ของเทมเพลทนั้นเอง เช่น ขนาดตัวอักษร สีตัวอักษร สีลิงค์ต่างๆ ระยะห่างของบรรทัดตัวอักษร เป็นต้น เช่น 

font-family:HelveticaNarrow,Arial;
font-size:17px;
color:#333;
font-weight: bold;
text-transform:uppercase;

 เป็นการกำหนดใช้ฟอร์น ที่ชื่อ HelveticaNarrow หรือ Arial มีขนาด 17px สี เทาดำ เป็นตัวหนา เป็นตัวพิมพ์ใหญ่ นะครับ ซึ่งการกำหนดในส่วนนี้ เราสามารถกำหนดให้แสดงแตกต่างกันได้ในแต่ละส่วนหรือแต่ละ Div ก็ได้นะครับ 


ตอนนี้เพื่อนๆก็ทราบถึงส่วนหลักๆ ของเว็บไซต์ที่เราจะออกแบบว่ามาจากส่วนไหนกันไปบ้างแล้วนะครับ เอาละครับ วันนี้คงพอแค่นนี้ก่อน ไว้ในบทต่อไปเราจะมาพูดถึงเรื่องของเทมเพลทกันต่อนะครับ

ขอบคุณครับ
Webmaster JoomlaHitz.com (ริว)

  • No comments found

Leave your comments

Post comment as a guest

0
Powered by Komento

แนะนำบทความ

พื้นฐานการใช้งาน Plugin ใน Joomla
สวัสดีครับ หลังจากที่เรารู้จักวิธีใช้ในส่วน Module ใน Joomla กันไปแล้ว ในบทนี้ก็จะเป็นในส่วนของ Plugin กันบ้าง ...

สถิติผู้เข้าชม

0.png3.png3.png9.png1.png5.png
Today34
Yesterday500
This week1966
This month10799
Total33915

Who Is Online

4
Online

23 มิถุนายน 2560