Bloggang.com : lozocat - สไตล์การตกแต่งหน้าเวปไซน์ด้วยตัวเองมาฝากค่ะ

สไตล์การตกแต่งหน้าเวปไซน์ด้วยตัวเองมาฝากค่ะ

สวัสดี ค่ะเพื่อนๆ.. วันนี้ จขบ.ได้นำ โครงสร้าง ของ HTML หรือ MarkupLanguage เพื่อใช้ในการสร้างเวปไซน์ เพื่อนๆ สามารถตกแต่ง หน้าเวปไซน์ ได้ด้วยตัวเอง โดยไม่ต้องพึ่ง รูปแบบ StyleSheet แต่อย่างใด..... เพื่อนๆยังสามาถใช้ จาวา Script และ คำสัง HTML ช่วยในการตกแต่งได้ด้วยค่ะ ลองหัดทำดูนะคะ หากว่ามีข้อผิดพลาด โคดไม้ขึ้น ฝากข้อความไว้ด้วยนะคะ จขบ. จะได้แก้ไขเพื่อเป็นประโยชน์กับทุกๆคน และขอให้เพื่อนๆมีความสุขกับการตกแต่งเวปไซน์ ทุกๆคนนะคะ..ขอบคุณค่ะ

แบบ และ สไตล์..HTML ตกแต่งหน้าเวปไซน์ด้วยตัวเอง

หมายเหตู....ไม่สามารถ ใช้ รูปแบบ StyleSheet ได้ในการตกแต่ง

แต่สามารถใช้ จาวา Script และ คำสัง HTML ได้ แบบเดียวกันกับโคดที่เราใช้ตกแต่งบล้อคอ่ะค่ะ...

ที่เห็นด้านล่างเป้นตัวอย่าง Tag ที่ใช้เพื่อกำหนดว่า
เอกสารต่อไปนี้ เป็นเอกสาร HTML หรือ MarkupLanguage

เอกสาร HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title>...หัวข้อเรื่อง...</title>
</head>

<body>

...วาง HTML โคด
ที่เราจัดและตกแต่งเรียบร้อยแล้ว ที่นี่....

</body>

...พื้นที่สำหรับ วาง
จาวา Script และ คำสัง HTML...

</html>

เมื่อจัดวางเรียบร้อยแล้ว ให้ก็อปปี้ดคดทั้งหมดไปไว้ที่ Notepad เพื่อทำการเซฟ

เพื่อนที่กำลังหัดทำดู ตัวอย่าง การเซฟ เอกสาร HTML หรือ Markup Language คลิกที่ลิงค์ด้านล่างนะคะ...

ตัวอย่าง..และขั้นตอนการเซฟ เอกสาร HTML

แนะนำ ตัวอย่างเวปสำหรับ อัพโหลดไฟล์ คลิกที่ลิงค์ด้านล่างเลยค่ะ

//www.fileave.com/

โครงสร้าง..แบบที่มีเมนูด้านขวามือ

คลิกดู..ตัวอย่างโครงสร้างของเวปไซน์ เมนูขวา

...พื้นที่สำหรับตกแต่งส่นของหัวเวปไซน์.......

</td></tr><tr><td align="center" valign="middle">

.....พื้นที่สำหรับใส่แถบลิงค์ใต้หัวเวปไซน์.....

</td></tr><tr><td align="center" valign="middle"><table border="0" cellspacing="0" cellpadding="0" width="100%" align="center"><tbody><tr><td align="center" valign="middle">

....พื้นที่สำหรับเขียนลายละเอียด เรื่องราว หรือ รูปถ่าย ฯ...

</td><td align="center" valign="top" style="width: 30%">

เมนูด้านขวามือ สำหรับ โปรไฟล์ ข้อความทักทาย หรือ กล่อง Cbox ข้อแนะนำ..ในส่วนนี้ไม่ควรใส่รูปที่มีขนาด มากกว่า 320 x 240px

</td></tr></tbody></table></td></tr><tr><td align="center" valign="middle">

ส่วนล่างสุดคือ..พื้นที่สำหรับตกแต่ง หรือ ใส่ที่อยู่ของเจ้าของเวปไซน์
</td></tr></tbody></table>

โครงสร้าง..แบบที่มีเมนูด้านซ้ายมือ

คลิกดู..ตัวอย่างโครงสร้างของเวปไซน์ เมนูซ้าย

...พื้นที่สำหรับตกแต่งส่นของหัวเวปไซน์.......

</td></tr><tr><td align="center" valign="middle">

.....พื้นที่สำหรับใส่แถบลิงค์ใต้หัวเวปไซน์.....

</td></tr><tr><td align="center" valign="middle"><table border="0" cellspacing="0" cellpadding="0" width="100%" align="center"><tbody><tr><td align="center" valign="top" style="width: 30%">

</td><td align="center" valign="middle">

....พื้นที่สำหรับเขียนลายละเอียด เรื่องราว หรือ รูปถ่าย ฯ...

</td></tr></tbody></table></td></tr><tr><td align="center" valign="middle">

โครงสร้าง..แบบที่มีเมนูทั้ง 2 ด้าน

คลิกดู..ตัวอย่างโครงสร้างของเวปไซน์ เมนูซ้าย และ เมนูขวา

...พื้นที่สำหรับตกแต่งส่นของหัวเวปไซน์.......

</td></tr><tr><td align="center" valign="middle">

.....พื้นที่สำหรับใส่แถบลิงค์ใต้หัวเวปไซน์.....

</td></tr><tr><td align="center" valign="middle"><table border="0" cellspacing="0" cellpadding="0" width="100%" align="center"> <tbody><tr><td align="center" valign="top" style="width: 20%">

....พื้นที่ เมนู ด้านซ้าย..
ในส่วนนี้ไม่ควรใส่รูปที่มีขนาด มากกว่า 320 x 240px...

</td><td align="center" valign="top">

....พื้นที่ เมนูด้านขวา
..ในส่วนนี้ไม่ควรใส่รูปที่มีขนาด มากกว่า 320 x 240px....

</td></tr></tbody></table></td></tr><tr><td align="center" valign="middle">

ในส่วนของ พิมพ์สีเขียว สามารถเปลี่ยนแปลงแก้ไขได้..จะใส่เป็น "80%" หรือ "60%" หรือ เป็นตัวเลขเฉยๆ ก็ได้ค่ะ เช่น "800" มากกว่า หรือ น้อยกว่า ตามชอบ...........

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

คลิกดู...ตัวอย่างของโครงสร้างเวปไซน์ ทั้ง 3 แบบ ได้ที่ลิงค์ด้านล่าง

คลิกดู..ตัวอย่างโครงสร้างของเวปไซน์ เมนูขวา

คลิกดู..ตัวอย่างโครงสร้างของเวปไซน์ เมนูซ้าย

...ตัวอย่างโครงสร้างของเวปไซน์ ที่มี เมนูซ้าย และ เมนูขวา...

Create Date : 01 พฤศจิกายน 2552
Last Update : 24 กันยายน 2553 20:21:39 น.
Counter : 2936 Pageviews.

7 comments

อ่านะ
คุณแคทเก่งมากๆ ค่ะ
กำลังจะลองหัดทำเว็บของตัวเองอยู่เลยแต่เห้นว่าการเขียนโค้ดทำเว็บยากมากเอาการ ขนาดทำบลีอกยังไม่สามารถเลยฉัตรน่ะ อิอิ

ขอบคุณสำหรับการแบบ่งปันสิ่งที่ดีๆ ให้เพื่อนๆ เสมอมานะคะ จุ๊บๆๆ ค่ะ

โดย: ณ ปลายฉัตร

วันที่: 1 พฤศจิกายน 2552 เวลา:11:42:35 น.