๑ เข้าไปที่บอร์ดด้วย account ของ ผู้บริหารระบบ > เข้าไปที่ แผงควบคุมของผู้บริหารระบบ ( ACP )
๒ เลือก skins & templates > html template
๓ เลือก manage html ของ template set ที่เราใช้อยู่
๔ เลือก global html elements
๕ หา css_inline ให้เจอ แล้วเลือก edit single
๖ จะพบหน้าต่างที่มี source code อยู่ ลองดูเปรียบเทียบ ว่า ถ้าเหมือนกับ code ใน หน้าต่าง "code เดิม" ด้านล่าง ละก็แสดงว่ามาถูกที่แล้ว ถ้าไม่เหมือน ลองย้อนกลับไปทำใหม่ตั้งแต่ต้น
๗ copy code จากหน้าต่าง "code ใหม่" ไปแทนที่ได้เลย
๘ เลือก update template เป็นอันเรียบร้อย

ถ้าคุ้นเคยกับ html บ้าง ก็จะทราบว่า html tag นั้น ต้อง มีเปิด และ ปิด เป็นส่วนมาก <tag>

คือเปิด </tag> คือปิด  เปิดแล้วต้องไม่ลืมปิดด้วยนะครับ มาดูกันทีละอย่าง

<!--ตัวอย่างการใช้ table เพื่อตกแต่ entry ให้สวยงาม-->

        <table style="width:350px;height:300px" bordercolor="#000000" cellspacing="0" cellpadding="3" align="center" background="http://i230.photobucket.com/albums/ee8/maha-oath/leaves_bg.jpg" border="1">
                <tbody>
                             <tr>
                                      <td valign="center" align="center"><font size="5" color="white">ตัวอย่างการนำรูปมาเป็น background</font></td>
                             </tr>                  
               </tbody>
         </table>

<!--end ตัวอย่างการใช้ table เพื่อตกแต่ entry ให้สวยงาม-->

สีม่วง คือ comment ของเราเองเพื่อเตือนความจำ หรือเพื่อง่ายต่อการกลับมา

แก้ไขในภายหลัง ไม่มีผลต่อการแสดงบน browser

สีแดง คือ ค่า parameter ที่เราสามารถกำหนดเองได้

สีน้ำเงิน คือ url ของรูปภาพที่ใช้เป็น background

สีเขียวคือ สิ่งที่ต้องการให้ปรากฏ หรือ object ต่าง ๆ 

   ข้อมูลนี้นำมาจาก yakyaihost.net มีคำแนะนำดีมากมาย ลองเข้าไปดูกันครับ

   ตาราง (Table) เป็นส่วนที่สำคัญอย่างยิ่งในการทำเว็บเพจ (Web Page) โดยจะแบ่งพื้นที่ในหน้าเว็บเพจออกเป็นสัดส่วน เป็นระเบียบดูสวยงาม สามารถสื่อสารกับผู้ชมเว็บเพจได้อย่างสบายตา

   และสิ่งแรกที่ควรทำในการออกแบบเว็บเพจก็คือการจัดวางรูปร่าง (Lay Out) ให้เหมาะสมกับลักษณะข้อมูลของเรา ที่จะนำเสนอในหน้าเว็บเพจ

การใช้ตาราง ไม่มีเครื่องมือใดที่ใช้เขียน Code HTML มีประโยชน์เท่ากับ Code ตาราง ตารางช่วยให้คุณสามารถจัดวางวัตถุและส่วนต่างๆได้อย่างถูกต้อง ทำให้คุณสามารถสร้างสรรค์รูปแบบอย่างไร้ขอบเขต

และข้อควรรู้ประกอบอีกอย่างคือในการแสดงผล บราวเซอร์ (Browser) จะทำการ ดาวน์โหลด (Download) ข้อมูลในตารางทั้งหมดก่อน แล้วจึงแสดงผลตารางบนเว็บเพจ

<Table> Tag Attributes : ส่วนขยายของแท็กตาราง เริ่มต้นด้วย <TABLE> แท็กนี้จะแจ้งกับบราวเซอร์ของคุณว่าคุณต้องการเริ่มสร้างตารางหลังจากแท็กนี้ , <TABLE> tag มีส่วยขยายซึ่งคุณสามารถใช้เปลี่ยนแปลงรูปร่างหน้าตาและคุณสมบัติของตารางตามที่คุณต้องการได้

Border=
ถ้าคุณต้องการให้ตารางของคุณแสดงเส้นขอบ คุณสามารถกำหนดค่าตัวเลขซึ่งจะแจ้งกับบราวเซอร์ถึงความกว้าง (Pixels Wide) ที่ต้องการได้ โดยใช้ Border=5 ซึ่งหมายถึงเส้นขอบขนาด 5 Pixels Wide เป็นต้น

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

 

ตารางที่มีเส้นขอบบาง Cell A Cell B Cell C Cell D Cell E Cell F

ตารางที่มีเส้นขอบหนา Cell A Cell B Cell C Cell D Cell E Cell F

ตารางที่ไม่มีเส้นขอบ Cell A Cell B Cell C Cell D Cell E Cell F

*** คำแนะนำ : ปกติผมจะตั้งค่าเส้นขอบของตารางไว้ที่ 1 ขณะที่ผมกำลังสร้างตารางซึ่งจะทำให้คุณดูผลของตารางที่สร้าง และเมื่อเสร็จการสร้างตารางและทุกอย่างเป็นไปตามที่ผมต้องการ ผมค่อยเปลี่ยนขนาดเส้นขอบของตารางเป็น Border=0.

Width=
โดยการใช้ส่วนขยายนี้ คุณสามารถกำหนดความของตารางที่คุณต้องการ ถ้าคุณไม่กำหนดความกว้างของตาราง ตารางจะปรากฏควมกว้างของตารางเท่ากับวัตถุที่คุณใส่เข้าไป มี 2 วิธีที่คุณสมารถใช้กำหนด Width= Attribute:

วิธีเปอร์เซนต์ (Percentage Method)

Width=60%
ใช้วิธีนี้จะสร้างตารางซึ่งมีความกว้าง 60% ของจอภาพของคุณ แนะนำวิธีนี้เพราะผู้คนใช้ขนาดความละเอียดของจอที่แตกต่างกันซึ่งจะทำให้เห็นตารางขนาดความกว้าง 60% ของจอภาพเหล่านั้น ไม่ว่าจะพวกเขาจะใช้ขนาดความละเอียดของจอ 640x480, 800x600 หรืออะไรก็ตาม

วิธีความกว้าง Pixel จริง (Absolute Method)

Width=450
ใช้วิธีนี้คุณสามารถกำหนดความกว้างที่แท้จริง PIXEL width. เหมาะกับการใช้เมื่อคุณวางวัตถุได้เที่ยงตรงบนเว็บเพจของคุณ มีข้อเตือนใจดังตัวอย่าง ถ้าคุณกำหนดความกว้าง 800 Pixels และผู้ชมดูด้วยความละเอียดของจอ 640x480 (กว้าง 640 สูง 480) พยายามจะดูตารางของคุณ พวกเขาจะไม่สามารถเห็นตารางได้ทั้งหมดบนหน้าจอ จะต้องเลื่อนสกอร์บาร์เพื่อจะดูทุกอย่างได้

BGcolor=
คุณสามารถใช้ส่วนขยายนี้กำหนดสีพื้นหลัง (background color) ทุกๆ เซลล์ในตารางของคุณ ทั้งหมด ของเซลล์ของตารางจะมีสีพื้นเดียวกัน Code BGcolor= Attribute ดังนี้

BGcolor=#ff0000

ALIGN=
โดยการใช้ส่วนขยายนี้ คุณสามารถกำหนดจัดวางตำแหน่งของ ทุกส่วน ของตาราง ค่าที่ถูกต้องของส่วนขยายนี้คือ right, left and center กลาง ซ้าย และขวา ตามลำดับ เราเขียน Code ได้ดังนี้

ALIGN=right

Cellpadding=
ค่าตัวเลขนี้ทำให้คุณกำหนดจำนวน Pixels ระหว่างวัตถุและข้อความในเซลล์และผนังของเซลล์ ค่านี้จะมีผลต่อ ทุกส่วน ของเซลล์ในตาราง Code ของคุณมีดังนี้

Cellpadding=2

Cellspacing=
ค่าตัวเลขนี้ทำให้คุณกำหนดจำนวน Pixels ระหว่าง แต่ละเซลล์ ค่านี้จะมีผลต่อ ทุกๆ เซลล์ในตารางเหมือนกัน Code ของคุณมีดังนี้

Cellspacing=3

*** คำแนะนำ : ถ้าคุณมีปัญหาในการแยกแยะความแตกต่างระหว่าง cellpadding และ cellspacing ลองนึกภาพลังที่บรรจุเบียร์หลายๆลัง ระยะห่างระหว่างขวดและลังก็คือ CELLPADDING ระยะห่างระหว่างลังและลังก็คือ CELLSPACING

คุณสามารถผสมผสานคำสั่งส่วนขยายหลายๆอันในหนึ่งแท็กตาราง <TABLE> tag ดังนี้

<TABLE Width=60% Cellpadding=2 ALIGN=RIGHT Border=1>

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

แท็ก (Tag) ที่ใช้สร้างตาราง	หน้าที่ของแท็ก (Tag)
<TABLE>	บอกบราวเซอร์ว่าเป็นจุดเริ่มต้นของตาราง
<TH>...</TH>	บอกบราวเซอร์ว่าเป็นจุดเริ่มต้นและสิ้นสุดของหัวตาราง
<TR>...</TR>	บอกบราวเซอร์ว่าเป็นจุดเริ่มต้นและสิ้นสุดของแถว (Row)
<TD>...</TD>	บอกบราวเซอร์ว่าเป็นจุดเริ่มต้นและสิ้นสุดของเซลล์ (Cell)
</TABLE>	บอกบราวเซอร์ว่าเป็นจุดสิ้นสุดของตาราง

Code ตาราง 1 แถว
นี่เป็นตารางแบบง่ายๆซึ่งกำหนดค่าเส้นขอบเท่ากับ 1:

 

Cell A Cell B Cell C	Row 1
Column 1      Column 2      Column 3

ไปดู Code ของตารางตัวอย่าง

<TABLE Border=1>      <-- แท็กเปิดของตารางพร้อมเส้นขอบ

<TR>      <-- แท็กเริ่มต้นแถวแรก

<TD> Cell A </TD>      <-- กำหนดเซลล์แต่ละเซลล์
<TD> Cell B </TD>      <-- กำหนดเซลล์แต่ละเซลล์
<TD> Cell C </TD>      <-- กำหนดเซลล์แต่ละเซลล์

</TR>      <-- แท็กสิ้นสุดแถวแรก

</TABLE>      <-- แท็กปิดของตาราง

Code ตาราง 2 แถวหรือมากกว่า

 

Cell A Cell B Cell C Cell D Cell E Cell F	Row 1 Row 2
Column 1      Column 2      Column 3

ไปดู Code ของตารางข้างบน

<TABLE Border=1>      <-- แท็กเปิดของตารางพร้อมเส้นขอบ

<TR>      <-- แท็กเริ่มต้นแถวแรก

<TD> Cell A </TD>      <-- กำหนดเซลล์แต่ละเซลล์
<TD> Cell B </TD>      <-- กำหนดเซลล์แต่ละเซลล์
<TD> Cell C </TD>      <-- กำหนดเซลล์แต่ละเซลล์

</TR>      <-- แท็กสิ้นสุดแถวแรก

(นี่คือ แถวที่ 2)

<TR>      <-- แท็กเริ่มต้นแถวที่สอง

<TD> Cell D </TD>      <-- กำหนดเซลล์แต่ละเซลล์
<TD> Cell E </TD>      <-- กำหนดเซลล์แต่ละเซลล์
<TD> Cell F </TD>      <-- กำหนดเซลล์แต่ละเซลล์

</TR>      <-- แท็กสิ้นสุดแถวที่สอง

</TABLE>      <-- แท็กปิดของตาราง

การตกแต่งเซลล์ตารางของคุณ
แต่ละเซลล์ของตารางต้องการแท็กเปิด <TD> tag และแท็กปิด </TD> tag เพื่อทำงานได้สมบูรณ์ คุณสามารถแทรกข้อความ รูปภาพ และอะไรก็ได้ที่คุณต้องการในแต่ละส่วนของหน้าเว็บเพจลงในเซลล์ของตาราง มีหลายคำสั่งส่วนขยายที่คุณสามารถใช้ปรัปปรุงเซลล์ของคุณ

ALIGN=
ส่วนขยายนี้ทำให้คุณกำหนด จัดวางตำแหน่งในแนวนอน (HORIZONTAL ALIGNMENT) ของข้อความหรือวัตถุในเซลล์ ค่าที่ถูกต้องของส่วนขยายนี้คือ left, center และ right กลาง ซ้าย และขวา ตามลำดับ เราเขียน Code ได้ดังนี้

ALIGN=right

VALIGN=
ส่วนขยายนี้ทำให้คุณกำหนด จัดวางตำแหน่งในแนวตั้ง (VERTICAL ALIGNMENT) ของข้อความหรือวัตถุในเซลล์ ค่าที่ถูกต้องของส่วนขยายนี้คือ top, middle และ bottom บน กลาง และล่าง ตามลำดับ เราเขียน Code ได้ดังนี้

VALIGN=bottom

COLSPAN=
ส่วนขยายนี้ทำให้คุณกำหนดจำนวนกี่คอลัมน์ที่เซลล์ 1 เซลล์จะขยายคร่อม ค่าที่ถูกต้องคือตัวเลขที่ใส่ดังนี้

COLSPAN=2

คุณจะใช้จำนวนเท่าไรขึ้นกับคอลัมน์กี่คอลัมน์ที่คุณต้องการให้เซลล์ 1 เซลล์ขยายคร่อม

ROWSPAN=
ส่วนขยายนี้ทำให้คุณกำหนดจำนวนกี่แถวที่เซลล์ 1 เซลล์จะขยายคร่อม ค่าที่ถูกต้องคือตัวเลขที่ใส่ดังนี้

ROWSPAN=2

คุณจะใช้จำนวนเท่าไรขึ้นกับแถวกี่แถวที่คุณต้องการให้เซลล์ 1 เซลล์ขยายคร่อม

BGcolor=
ส่วนขยายนี้ทำให้คุณกำหนดสีพื้นหลัง (background color) ของแต่ละเซลล์ คุณใช้ส่วนขยายนี้อย่างสมบูรณ์โดยใส่ค่าของสีเลขฐาน 16 (Hexadecimal color) ดังนี้

BGcolor=#000000

Width=
ส่วนขยายนี้ทำให้คุณกำหนดความกว้างของเซลล์ตามที่ควรจะเป็น คุณสามารถใช้วิธีเปอร์เซนต์หรือวิธีความกว้าง Pixel จริง

วิธีเปอร์เซนต์ (Percentage Method)

Width=35%

วิธีความกว้าง Pixel จริง (Absolute Method)

Width=150

นี้คือความกว้างของตารางในหน่วย Pixels PIXELS.

Spanning Columns and Rows
Spanning เป็นเครื่องมือสร้างตารางที่มีประโยชน์มาก การขยายเซลล์ทำให้คุณสามารถเปลี่ยนขนาดของเซลล์ตามที่คุณต้องการ ต่อไปนี้คือตารางตัวอย่าง

 

Cell A Cell B Cell C Cell D Cell E Cell F

Row 1 Row 2

คุณจะสังเกตเห็นว่าแต่ละแถวมี 3 เซลล์ แต่เราจะทำอย่างไรถ้าเราต้องการให้แถวที่สองมีเพียง 2 เซลล์

ทำดังต่อไปนี้ เราจำเป็นต้องแก้ไข <TD> tag ด้วยส่วนขยายซึ่งทำให้เราสามารถขยายเซลล์ 1 เซลล์ ข้ามไปถึง 2 เซลล์เดิม ถ้าเราใช้ COLSPAN= Attribute เราสามารถยืด 1 เซลล์ข้ามไปถึง 2 เซลล์หรือมากกว่า คอลัมน์ของตาราง

 

Cell A Cell B Cell C Cell D Cell F

Row 1 Row 2

ให้สังเกต Cell D ตอนนี้ได้ถูกยืดออก หรือถูกขยาย (SPANNED), คร่อม 2 เซลล์

นี้คือ Code ที่ใช้ในการสร้างตารางข้างบน

<TABLE Border=1> <-- แท็กเปิดของตารางพร้อมเส้นขอบ

<TR> <-- แท็กเริ่มต้นแถวแรก

<TD> Cell A </TD> <-- กำหนดเซลล์แต่ละเซลล์
<TD> Cell B </TD> <-- กำหนดเซลล์แต่ละเซลล์
<TD> Cell C </TD> <-- กำหนดเซลล์แต่ละเซลล์

</TR> <-- แท็กสิ้นสุดแถวแรก

<TR> <-- แท็กเริ่มต้นแถวที่สอง

<TD COLSPAN=2> Cell D </TD> <-- กำหนดเซลล์แต่ละเซลล์

(สังเกตว่าผมตัด CELL E ออกทั้งหมด)

<TD> Cell F </TD> <-- กำหนดเซลล์แต่ละเซลล์

</TR> <-- แท็กสิ้นสุดแถวที่สอง

</TABLE> <-- แท็กปิดของตาราง

และมีการเปลี่ยนแปลงเล็กน้อยในการใช้ ROWSPAN= attribute:

 

Cell A Cell B Cell C Cell D Cell E

Row 1 Row 2

ให้สังเกต Cell C ตอนนี้ได้ถูกยืดออกหรือถูกขยายคร่อม 2 เซลล์ และ 2 แถว

นี้คือ Code ที่ใช้ในการสร้างตารางข้างบน

<TABLE Border=1> <-- แท็กเปิดของตารางพร้อมเส้นขอบ

<TR> <-- แท็กเริ่มต้นแถวแรก

<TD> Cell A </TD> <-- กำหนดเซลล์แต่ละเซลล์
<TD> Cell B </TD> <-- กำหนดเซลล์แต่ละเซลล์
<TD ROWSPAN=2> Cell C </TD> <-- กำหนดเซลล์แต่ละเซลล์

</TR> <-- แท็กสิ้นสุดแถวแรก

<TR> <-- แท็กเริ่มต้นแถวที่สอง

<TD> Cell D </TD> <-- กำหนดเซลล์แต่ละเซลล์
<TD> Cell E </TD> <-- กำหนดเซลล์แต่ละเซลล์

(สังเกตว่าผมตัด CELL F ออกทั้งหมดเพราะ CELL C ได้ใช้พิ้นที่แล้ว)

</TR> <-- แท็กสิ้นสุดแถวที่สอง

</TABLE> <-- แท็กปิดของตาราง

   ต่อไปนี้เป็นตัวอย่างการเขียน Code HTML สำหรับตารางในรูปแบบต่างๆ เพื่อเป็นแนวคิดในการจัดทำตารางต่อไป

R1C1 R1C2 R1C3 R1C4 R2C1 R2C2 R2C3 R2C4 R3C1 R3C2 R3C3 R3C4 R4C1 R4C2 R4C3 R4C4 Code HTML สำหรับตารางนี้ <TABLE border=2> <TR> <!-- Row 1 --> <TD align=center> R1C1 </TD> <TD align=center> R1C2 </TD> <TD align=center> R1C3 </TD> >TD align=center> R1C4 </TD> </TR> <TR> <!-- Row 2 --> <TD align=center> R2C1 </TD> <TD align=center> R2C2 </TD> <TD align=center> R2C3 </TD> <TD align=center> R2C4 </TD> </TR> <TR> <!-- Row 3 --> <TD align=center> R3C1 </TD> <TD align=center> R3C2 </TD> <TD align=center> R3C3 </TD> <TD align=center> R3C4 </TD> </TR> <TR> <!-- Row 4 --> <TD align=center> R4C1 </TD> <TD align=center> R4C2 </TD> <TD align=center> R4C3 </TD> <TD align=center> R4C4 </TD> </TR> </TABLE>

R1C1 R1C2 R1C4 R2C1 R2C4 R3C1 R3C4 R4C1 R4C4 Code HTML สำหรับตารางนี้ <TABLE border=2> <TR> <!-- Row 1 --> <TD align=center> R1C1 </TD> <TD align=center colspan=2 rowspan=4> R1C2 </TD> <TD align=center> R1C4 </TD> </TR> <TR> <!-- Row 2 --> <TD align=center> R2C1 </TD> <TD align=center> R2C4 </TD> </TR> <TR> <!-- Row 3 --> <TD align=center> R3C1 </TD> <TD align=center> R3C4 </TD> </TR> <TR> <!-- Row 4 --> <TD align=center> R4C1 </TD> <TD align=center> R4C4 </TD> </TR> </TABLE>

R1C1 R2C1 R2C2 R2C3 R2C4 R3C1 R4C1 R4C2 R4C3 R4C4 Code HTML สำหรับตารางนี้ <TABLE border=2> <TR> <!-- Row 1 --> <TD align=center colspan=4> R1C1 </TD> </TR> <TR> <!-- Row 2 --> <TD align=center> R2C1 </TD> <TD align=center> R2C2 </TD> <TD align=center> R2C3 </TD> <TD align=center> R2C4 </TD> </TR> <TR> <!-- Row 3 --> <TD align=center colspan=4> R3C1 </TD> </TR> <TR> <!-- Row 4 --> <TD align=center> R4C1 </TD> <TD align=center> R4C2 </TD> <TD align=center> R4C3 </TD> <TD align=center> R4C4 </TD> </TR> </TABLE>

การสร้าง slide presentation

1 เข้าไปที่ docs.google.com
2 เลือก new > presentation
3 เข้าสู่หน้า presentation editor แล้ว เริ่มจากเลือก theme ซึ่งทุก slide จะมี theme เดียวกันทั้งหมด
4 เลือก layout ของแต่ละ slide ( แต่ละ slide เป็นอิสระ ไม่ีเหมือนกันได้ )
5 ใส่ content
6 เพิ่ม slide แล้วทำอย่างเดิม จนครบทุกหน้าที่ต้องการ
7 save
8 กลับไปที่ doc.google.com จะเห็น presentation ของเราอยู่ที่นั่น

การนำไปใช้

บน sites.google.com เลือกหรือสร้างหน้าที่เราต้องการ แล้ว เลือก insert
เลือก presentation จะปรากฎหน้าต่างให้เลือกว่า จะ show   presentation
ไหน เลือกที่ต้องการแล้ว กด save เป็นอันเรียบร้อย

นำไปใช้ที่อื่น เช่น googlepages.com ต้องนำ code html ไปติดไว้ในส่วน
ที่ต้องการ  code html หาได้จาก ปุ่ม menu มุมล่างขวาของ slide player
หรือ ด้วยการไปที่ docs.google.com เข้าไปที่ presentation ที่ต้องการ
แล้วเลือก publish อยู่แถว ๆ ขวา-บน เสร็จแล้วเลือก ตกลง สักครู จะได้
code จัดการ copy และนำไปแปะได้เลย

download  มาไว้ในเครื่องของเรา โดยเข้าไปที่ docs.google.com แล้ว
ทำเครื่องหมายถูก หน้า presentation ที่เราต้องการ เลือก more actions
แล้วเลือก save as PPT สักครู การ download ก็จะเริ่มขึ้น

สำหรับ การทำ slide presentation บน slideshare.net นั้น หลังจากที่ quick tour ดูแล้ว
ไม่น่าจะสร้างได้ ต้องสร้าง slide presentation ขึ้นมาก่อน โดย powerpoint เป็นต้น หลัง
จากนั้นจึง upload ขึ้นไป เหมือน youtube.com ที่ไม่สามารถสร้าง video บนนั้นได้ เป็น
เพียงที่เก็บรวบรวม หรือ host เท่านั้น แต่ก็มีดีที่สามารถ upload ได้มากถึง 100 MB/file

หากใครมีฝีมือในการสร้าง slide presentation ก็น่าสนใจดีครับ  เห็นว่ามีการประกวดด้วยนะ