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
 


  สร้าง Style แบบเส้น ใน Dreamweaver
 

บทความนี้เราจะมาสร้าง Style แบบเส้น ใน Dreamweaver กันค่ะ ก็เป็นการกำหนด CSS Style อีกแบบหนึ่งค่ะ ลองเข้ามาดูกันค่ะ

     
 
 
     

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

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

ซึ่งบทความนี้จะเป็นการสร้าง Style เพิ่มเข้าไป ขั้นตอนก็คือคลิกที่เครื่องหมาย + เพื่อเป็นการ New CSS Style ตามตำแหน่งที่ 1

 
 
     

จากนั้นจะปรากฏไดอะล็อกบ๊อก New CSS Style ให้ทำการตั้งชื่อ Style ในที่นี้ขอตั้งชื่อว่า line เพราะจะทำ Style ที่เป็นเส้น (จริง ๆ แล้วก็ตั้งชื่อให้สื่อความหมาย เพราะสร้างแล้วภายหลังเราต้องเรียกใช้งาน ยังไงก็ตั้งให้ตัวเองจำได้ละกันค่ะ อิอิ) จากนั้นก็กด OK ตามตำแหน่งที่ 2

 
 
     

เมื่อกด OK แล้วก็จะขึ้นไดอะล็อกบ๊อก CSS Style Definition .line in style.css (จะบันทึกลงในไฟล์ Style ที่เราเคยสร้างไว้) ตามภาพตำแหน่งที่ 3

จากนั้นให้เราเลือก Category เป็น Border แล้วกำหนดรายละเอียดของ Border โดยในที่นี้ Webmaster จะสร้างเส้นสองเส้นให้เป็นเส้นขอบบนและเส้นขอบล่าง โดยกำหนดลักษณะเส้นแบบ Solid ความหนาของเส้น 1 pixels แล้วก็กำหนดสีเส้นเป็น #cccccc จากนั้นเมื่อกำหนดเสร็จแล้วก็กดปุ่ม OK

 
 
     

แค่นี้ก็เป็นสร้าง Style ชื่อ line ไว้ในไฟล์ style.css เรียบร้อยแล้ว

เอาละมาดูวิธีเอาไปใช้งานกัน จริง ๆ แล้วเราสร้างไฟล์ใหม่ใน Dreamweaver แล้วคลิกที่ Stye ที่ชื่อชื่อ line ก็จะปรากฏเส้นขึ้นมาแล้ว แต่จริง ๆ แล้ว Webmaster กะจะสร้าง Style ชื่อ line นี้ขึ้นมาเพื่อทำเส้นของ Menu ซึ่ง Webmaster จะสร้าง Table ขึ้นมาแล้วใส่ Style ตัวนี้เข้าไปใน Cell ของ Table เพื่อที่จะได้พิมพ์หัวข้อเมนูลงไปได้ ตามภาพที่ 3 แล้วเมื่อลองทดสอบผลของการใส่ Style ก็จะได้ผลลัพธ์ตามภาพสุดท้ายค่ะ

 

จริง ๆ แล้วในการสร้าง Style แต่ละอันขึ้นมา เราจะต้องมีไอเดียร์อยู่ก่อนแล้ว ว่าจะกำหนด Style นั้น ๆ ขึ้นมาเพื่อที่จะเอาไปใช้ทำอะไร แล้วจึงสร้าง Style แต่ละอันขึ้นมา

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

เออ... ลืมไปเลย ลองเปลี่ยน Style จาก Solid เป็น Dot ดูนะค่ะ แค่นี้ก็ได้เส้นแบบ Dot แล้วค่ะ

 
   
   
   
วันที่บทความ : 01 มี.ค. 2552              ที่มา : Webmaster

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