Un title page
Thainextstep.com สอนทำเว็บไซต์ด้วย Dreamweaver Photoshop  PHP & MySql และ การทำ SEO  
Un title page
Thainextstep.com สอน HTML บทความ Dreamweaver สอน Photoshop บทความ PHP & MySql Web Tips SEO Guide
Un title page
สอน Dreamweaver
  ทำความรู้จัก Dreamweaver
  การสร้าง Site
  การกำหนดคุณสมบัติพื้นฐาน
  การสร้าง CSS Style
  การเรียกใช้งาน CSS Style
  การใส่สี Background
  การใส่ลิงค์ข้อความและรูป
  การสร้างตาราง
  การปรับแต่งตาราง
  การใส่คำอธิบายให้รูปภาพ
  การเพิ่มอักขระพิเศษ
  การทำภาพ Swap Image
 


  การปรับแต่งตาราง ด้วยการใส่สีพื้นและเส้นขอบ
 

บทความนี้เป็นบทความต่อจากบทความสอน Dreamweaver ในบทความที่แล้วค่ะ หลังจากที่บทความที่แล้วเราทำ Workshop Photoshop สร้างตารางได้แล้ว ในบทความนี้เราจะมาปรับแต่งตารางของเราโดยการเพิ่มสีสันให้พื้นตารางและเส้นขอบ

     
 

ขั้นตอนแรก ก่อนอื่นเราต้องสร้างตารางขึ้นมาก่อนนะค่ะ จะกี่แถวกี่คอลัมน์ก็ได้ Webmaster ขอใช้ Table จากบทความ การสร้างตารางใน Dreamweaver ที่ได้สร้างไว้ในบทความที่แล้วนะค่ะ

เมื่อสร้างตารางแล้ว หากเราไม่ได้กำหนดเส้นขอบตาราง (เหมือนบทความที่ผ่านมาตอนสร้าง Table กำหนด Border=0) ตั้งแต่เริ่มต้นสร้าง เมื่อเราจะใส่สีของเส้นขอบ ถ้าเราใส่สีไปจะทำให้ไม่เห็นสีของเส้นขอบตาราง ดังนั้นเราจึงต้องไปกำหนดเส้นขอบของตารางกันก่อน โดยการใช้เมาส์จับที่ตาราง จากนั้นกำหนดค่า Border ที่ส่วน Properties ให้มีค่าเท่ากับ 1 ดังที่ปรากฏตามภาพที่ 1

 
   
 
 
     

เมื่อเรากำหนด Border=1 แล้ว เส้นขอบของตารางจะเปลี่ยนไปดังภาพที่ 2 และ เมื่อทดสอบดูผ่าน Browser ก็ทำให้เราสามารถเห็นขอบของตารางได้

ขั้นตอนที่ 2 เมื่อเราได้เส้นขอบของตารางแล้ว ให้เราใช้เมาส์จับที่ที่ตาราง จากนั้น สังเกตที่ส่วนของ Properties แล้วคลิกเลือก Brdr Color เพื่อใส่สีให้กับเส้นของตาราง และเมื่อใส่สีแล้วก็จะได้เส้นขอบตารางเหมือนภาพที่ 3 ค่ะ

 
 
     

ขั้นตอนที่ 3 ขั้นตอนนี้เราจะมาใส่สีให้กับพื้นหลังของตารางกันค่ะ เริ่มต้นโดยให้เราใช้เมาส์จับที่ที่ตาราง จากนั้นใส่สีให้ Background ของตารางโดยคลิกเลือกสีที่ Bg Color ของ Properties จากนั้นคลิกเลือกสีที่ต้องการค่ะ

 
 
     

และแ้ล้วก็เสร็จเรียบร้อย ได้ผลลัพธ์ของการปรับแต่งตาราง ตามภาพที่ 4 ค่ะ

 
 
     

   
   
วันที่บทความ : 14 ก.พ. 2552              ที่มา : Webmaster

สอนทำเว็บไซต์   |   สอนภาษา HTML   |   สอน Dreamweaver   |   สอน Photoshop   |   สอนภาษา PHP & MySql   |   รวมทิป เทคนิคการทำเว็บไซต์   |   สอนการทำ SEO
:: Copyright © 2005 by Chatta design. All rights reserved. Do not duplicate or redistribute in any form.::