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
 


  การใช้งาน CSS Style กำหนดรูปแบบตัวอักษร
 

การทำเว็บเพจนั้นบางครั้ง เราจะต้องมีการทำงานหลาย ๆ อย่าง และบางครั้งก็ต้องทำซ้ำ ๆ หลาย ๆ ครั้ง ซึ่งจะทำให้เกิดความไม่สะดวก และทำให้เสียเวลาได้ ซึ่งโปรแกรม Macromedia Dreamweaver ก็เตรียมเครื่องมือที่เรียกว่า CSS Style มาช่วยแก้ปัญหานี้ จะมีวิธีแก้ปัญหาอย่างไร ดูได้ที่บทความนี้ค่ะ

     
 
 
     

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

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

เพื่อแก้ไขปัญหานี้ Macromedia Dreamweaver ก็เตรียมเครื่องมือที่เรียกว่า CSS Style มาช่วยลดขั้นตอนการทำงานซ้ำ ๆ แบบที่กล่าวมา โดยแค่กำหนดค่าไว้ที่ CSS Style แล้วเรียกใช้ CSS Style แค่เพียงครั้งเดียวก็เป็นอันเสร็จเรียบร้อยค่ะ

ก่อนจะไปพบวิธีการสร้าง CSS Style เรามารู้จัก CSS Style กันสักหน่อย CSS Style ย่อมาจาก Cascading Style Sheets เป็นเครื่องมือที่ช่วยกำหนดคุณสมบัติของสิ่งต่าง ๆ ในหน้าเว็บเพจ ไม่ว่าจะเป็นการกำหนดคุณสมบัติของฟอนต์ เช่น ลักษณะของฟอนต์ ขนาด กำหนดคุณสมบัติของสี เกี่ยวกับพื้นหลัง เกี่ยวกับตาราง และอื่น ๆ อีกมากมาย รูปร่างหน้าตา CSS Style ใน Macromedia Dreamweaver Mx 2004 ก็มีลักษณะดังภาพด้านบนค่ะ ซึ่งก็ประกอบไปด้วยส่วนต่าง ๆ ตามที่เห็นในภาพค่ะ


เอาละค่ะ เรามาเริ่มสร้าง CSS Style เพื่อกำหนดรูปแบบตัวอักษรและข้อความกันเลยค่ะ

ขั้นตอนแรก ให้คุณคลิกที่ปุ่ม สร้างสไตล์ใหม่ ซึ่งอยู่บริเวณด้านล่าง (ตำแหน่ง สร้างสไตล์ใหม่ ตามรูปที่ 1 ค่ะ)

ขั้นตอนที่ 2 ถ้าทำขั้นตอนแรกถูกต้องคุณก็จะเจอไดอะล็อกบ็อกซ์ New CSS Style ตามภาพที่ 2 ค่ะ ให้คุณทำการตั้งชื่อของ Style ที่ช่อง Name ต้องตั้งชื่อให้สื่อความหมายนะค่ะ เพราะชื่อนี้จะปรากฏให้เราเลือกเมื่อต้องการใช้งาน ตั้งให้สื่อความหมายจะได้จำได้ (บางครั้งเราก็สร้าง Style หลาย ๆ ตัวค่ะ สร้างเยอะถ้าชื่อไม่สื่อความหมายเดียวจะลืมเอาได้)

Webmaster ตั้งชื่อ Style ว่า "tahoma_12" เพราะจะสร้างรูปแบบฟอนต์ที่ใช้ฟอนต์แบบ tahoma และจะกำหนดขนาดฟอนต์เท่ากับ 12 pixels

เมื่อตั้งชื่อและกำหนดรายละเอียดตามภาพแล้ว กด OK ค่ะ

 
 
     


ขั้นตอนที่ 3 จะปรากฏไดอะล็อกบ็อกซ์ เพื่อให้ทำการเซฟ Style Sheets ให้ทำการตั้งชื่อ Style Sheets จากนั้นเซฟไว้ในโฟลเดอร์ Site งานที่กำหนดไว้สำหรับเก็บข้อมูลเว็บไซต์ที่เราจะสร้างขึ้น


 
 
     


ขั้นตอนที่ 4 เมื่อเราได้เซฟ Style Sheets เรียบร้อยแล้วจะมีไดอะล็อกบ็อกซ์ปรากฏขึ้น เพื่อให้เรากำหนดลักษณะของ Style Sheets ในที่นี้เราจะกำหนดลักษณะของตัวอักษรและข้อความ ดังนั้นให้เลือก Type

สังเกตบริเวณทางขวามือ จะมีลักษณะของ Type ให้เรากำหนด ซึ่ง Webmaster ก็ได้กำหนดฟอนต์แบบ tahoma และกำหนดขนาดฟอนต์เท่ากับ 12 pixels และกำหนดสีของฟอนต์ เป็น รหัสสี #333333 และเลือกเป็นแบบตัวอักษรแบบธรรมดา เมื่อกำหนดค่าต่าง ๆ เรียบร้อยแล้วก็กดปุ่ม OK

 
 
     


เพียงแค่นี้เราก็สร้าง Style Sheets ได้แล้วค่ะ สังเกตที่บริเวณ CSS Style จะปรากฏชื่อ Style Sheets ที่เราสร้างขึ้น พร้อมทั้งรายละเอียดลักษณะของสไตล์ และที่บริเวณ File Panel ก็จะปรากฏไฟล์ CSS Style ที่เราได้สร้างขึ้นปรากฏให้เห็นค่ะ

 
 
     



ขั้นตอนการสร้าง CSS Style ก็เสร็จเรียบร้อยแล้วค่ะ เดียวบทความหน้าเราจะมาเรียนรู้วิธีการใช้งาน CSS Style ที่เราได้สร้างไว้กันค่ะ ติดตามอ่านในบทความถัดไปค่ะ

   
   
วันที่บทความ : 26 ส.ค. 2550              ที่มา : Webmaster

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