# การสร้างเว็บไซต์ด้วย Dreamweaver CS4 ตอนที่ 1
การกำหนด CSS บนเว็บเพจจะแตกต่างจากแบบ static แบบเดิมหรือแบบใช้ตารางช่วยในการจัดวางองค์ประกอบของเว็บ กล่าวคือ CSS จะช่วยให้การปรับเปลี่ยนง่ายขึ้นและส่งผลต่อทั้งเว็บไวต์ในครั้งเดียว ไม่ต้องมานั่งแก้ทีละหน้าเว็บเพจเหมือนแบบเดิม จึงสะดวกและง่ายกว่านั้นเอง โดยเฉพาะอย่างยิ่งถ้าเรามีจำนวนของเว็บเพจมากๆ นั้นเอง อย่างไรก็ตามการสร้าง layout แบบ CSS ก็ไม่ได้ง่ายเหมือนแบบตารางแบบเดิม มันมีความซับซ้อนและยุ่งยากพอสมควร อย่างไรก็ตามมันก็ไม่ยากเกินไปที่เราจะทำความเข้าใจและศึกษามัน แบบค่อยๆ เป็นค่อยไป ตามตัวอย่างของบนเรียนนี้ ซึ่งจะช่วยให้เราเข้าใจ CSS และนำไปประยุกต์ใช้งานได้กับเวบของเราต่อไป
ขั้นตอนการสร้างแบบ step by step
1 สร้างไฟล์ใหม่ คลิก File,New
2 เลือก Blank page ,Html, คลิก Create
3 คลิก File,save บันทึกเป็น index.html
การแทรก DIV tags คือส่วนสำคัญของการสร้าง CSS Layout เนื่องจาก DIV tags ก็คือส่วนที่จะทำการแบ่งหน้าเว็บเพจ ออกเป็นส่วนต่างๆ กัน เช่น ส่วนหัวสำหรับใส่ Logo หรือ Banner ส่วนกลางสำหรับรูปภาพและเนื้อหา และส่วนท้าย ซึ่งแบ่งออกเป็นสามคอลัมภ์ด้วยกัน ดูภาพตัวอย่างจากข้อมูลที่เราโหลดมา โดยเราจะเริ่มจากพื้นฐานที่สำคัญที่สุดในการสร้าง CSS คือ ตัวบรรจุ หรือ container tag นั้นเอง ซึ่ง container tag นี้จะเป็นตัวที่เก็บหรือถังบรรจุ Tag ชนิดอื่นๆ ใน Layout ของเรานั้นเอง เปรียบเทียบว่า CSS Layout คือกะบะทราย และเรากำลังใส่ลูกบอล ,ถังน้ำ , เปลือกหอย และ ร่มในกล่องทราย ซึงจะเป็นตัวกำหนดรูปร่าง มิติ และข้อจำกัของกล่องทราย และมันก็จะเป็นตัวรองรับทุกสิ่งทุกอย่างเข้าด้วยกัน
4 คลิกลงไปในหน้าเว็บเพจ ที่มุมบนซ้าย ตามภาพประกอบ ,คลิกเมนู Insert Div Tag
5 คลิก Layout
6 คลิกคำสั่ง Insert Div Tag
7 จะปรากฏกรอบโต้ตอบขึ้นมา ตรงช่อง ID ,ให้พิมพ์คำว่า container , คลิก ok
8 สลับไปที่มุมมอง code
9 เอาเม้าส์คลิกท้ายบรรทัด Goes Here ,กด Enter
10 คลิก Insert Div Tag
11 ชอง ID ,พิมพ์ main_image ,คลิก ok
12 ถึงตอนนี้เราควรจะได้ภาพตามตัวอย่าง
13 การสร้างไฟล์ css,คลิก File,New,เลือก css,คลิก create
14 พิมพ์ข้อความตามภาพตัวอย่างลงไป ,คลิก File ,save, บันทึกชื่อเป็น chech_magazine.css
15 เปิดไฟล์ index.html ขึ้นมา ,คลิกเม้าส์ลงไปช่องแรก ,คลิกเมนู CSS STYLES
16 คลิกคำสั่ง Add css styles (ดูภาพประกอบ)
17 คลิกปุ่ม browse เข้าไป
18 เลือก check_magazine.css ,คลิก ok
19 ในช่อง selector name พิมพ์ #container#banner ลงไป คลิก ok
20 selector type เลือก ID ,selector name #banner ,คลิก ok
21 คลิกเข้าไปที่โฟลเดอร์ Image เลือกภาพ banner ,คลิก ok
22 Positioning ,width 968,Hight 100, คลิก ok
23 ในมุมมอง code ของ chech_magazine.css เราควรได้ภาพตามตัวอย่าง
24 คลิก add new css rule ,selector type เป็น ID , selector name เป็น #main_image,คลิก ok
25 เลือกภาพ main,คลิก ok
26 Positioning ,width 968,Hight 376, คลิก ok
27 เราควรจะได้ภาพตามตัวอย่าง ซึ่งมีผลต่อช่อง 1 และ 2 ส่วนช่องที่สามซึ่งมี 3 คอลัม เราจะมาเรียนรู้วิธีการใส่ภาพและเนื้อหาเข้าไป ในตอนหน้าครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น