Dreamweaver CS3
เป็นโปรแกรมที่ดีตัวหนึ่งในการใช้สร้างเว็ปไซด์ มันเป็นโปรแกรมในแบบ WYSIWYG หรือ What you see is what you get หมายถึงถ้าคุณเห็นรูปแบบของหน้าเว็ปที่คุณออกแบบเป็นแบบไหนเวลาที่อยู่ในโปรแกรม มันก็จะออกมาเป็นแบบนั้นในบราวเซอร์หรือโปรแกรมที่ใช้ดูหน้าเว็ป มันช่วยให้คุณสร้างหน้า html ได้ โดยที่คุณไม่จำเป็นต้องรู้ code html เลย คุณสามารถ download โปรแกรมเพื่อทดลองใช้ภายใน 30 วันได้จาก link นี้
http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver
การ define site ใหม่ใน Dreamweaver
01. สร้างโฟล์เดอร์ที่คุณจะใช้เก็บไฟล์ต่างๆที่จะใช้ในเว็ปไซด์ของคุณขึ้นมาใหม่ คุณควรตั้งชื่อของโฟล์เดอร์ให้คุณจำได่ง่ายว่ากำลังทำงานกับเว็ปไซด์อะไรอยู่ เช่น ถ้าคุณกำลังสร้างเว็ปไซด์ชื่อ samplesite.com คุณก็ควรตั้งชื่อโฟล์เดอร์ว่า samplesite ภายในโฟล์เดอร์นั้นคุณก็สร้างโฟล์เดอร์ย่อยขึ้นมาอีกอันหนึ่งตั้งชื่อว่า images แล้วคุณก็ copy ไฟล์ที่เป็นรูปภาพทั้งหมดที่จะใช้ในเว็ปไซด์ ไปไว้ในโฟล์เดอร์ images
02. เปิดโปรแกรม Dreamweaver CS3
03. Define ไซด์ใหม่ โดยไปที่เมนู Site แล้วเลือก New Site แล้วก็เลือกที่ Tab “Advanced”
04. ตั้งชื่อไซด์ของคุณในช่อง Site Name คุณควรตั้งชื่อเพื่อให้คุณจำได้ว่าคุณกำลังทำงานอยู่กับ
ไซด์อะไร
05. คลิกที่ไอค่อนรูปโฟล์เดอร์สีเหลืองที่อยู่ทางขวาของช่อง Local Root Folder แล้วก็ browse หาโฟล์เดอร์ที่จะใช้เป็นเว็ปไซด์ของคุณ ที่คุณได้สร้างขึ้นในข้อที่ 01 เลือกโฟล์เดอร์นั้น แล้วคลิกปุ่ม open แล้วคลิกที่ปุ่ม select แล้วก็คลิกที่ปุ่ม OK ใน window Site Definition
06. ตอนนี้คุณก็น่าจะเห็นโฟล์เดอร์ชื่อ images ตรง File panel ทางขวามือแล้ว ถ้ายังไม่เห็นให้คุณไปที่เมนู Window แล้วก็เลือก Files
การสร้าง Dreamweaver Template
ข้อดีของการสร้าง Template ใน Dreamweaver เพื่อเป็นต้นแบบของหน้าเว็ป
- ทุกหน้าที่ใช้ Template เดียวกันเป็นต้นแบบในการสร้างจะมีล้กษณะคล้ายกัน
- ถ้าคุณต้องการจะเปลี่ยนรูปแบบของหน้าตาของหน้าเว็ปในทั้งเว็ปไซด์ของคุณ ถ้าคุณใช้ Template ตัวเดียวกัน ในการสร้างหน้าเว็ปทั้งไซด์ คุณก็แค่เปลี่ยนแปลงรูปแบบของ Template ตัวนั้น Dreamweaver ก็จะมีตัวเลือกให้ update ทุกหน้าที่ใช้ Template ตัวนั้น รูปแบบของหน้าเว็ปทุกหน้าในไซด์คุณก็จะเปลี่ยนแปลงไปโดยอัตโนมัติ ไฟล์ Template ใน Dreamweaver จะมี extension หรือนามสกุลเป็น .dwt และจะถูก save ไว้ในโฟล์เดอร์ชื่อ template การสร้าง Template ใน Dreamweaver ทำได้โดยการทำตามขั้นตอนต่อไปนี้
1. ไปที่เมนู File แล้วเลือก New
2. ในหมวดของ Blank Page ตรงช่อง Page Type ให้เลือก HTML template
3. ส่วนตรงช่อง Layout คุณสามารถเลือกจากรูปแบบของ Layout ที่มีให้แล้วใน Dreamweaver และคุณก็สามารถสร้างรูปแบบของตัวคุณเองได้โดยเลือก
การใส่ตัวหนังสือ
คุณสามารถพิมพ์ตัวหนังสือลงไปในหน้าเว็ป ในแบบเดียวกับที่คุณทำในโปรแกรมพวก Microsoft Word หลังจากนั้น คุณก็สามารถเปลี่ยนแปลงรูปแบบของตัวหนังสือได้โดยใช้ Proprety Inspector ดังรูปตัวอย่างข้างล่าง แต่ในกรณีที่คุณจะทำแบบนี้ได้ คุณต้องได้กำหนดรูปแบบของ style ไว้ก่อนแล้ว แบบที่เราพูดถึงการสร้าง style sheets ในบทก่อน(ตอนที่ 04 : การสร้าง CSS Style Sheet) นอกจากนี้แล้ว คุณยังสามารถตั้ง style ได้ โดยใช้ tags html ทั่วๆไป แบบรูปตัวอย่างข้างล่าง ซึ่งคุณสามารถเปลี่ยนแปลงรูปแบบของสิ่งที่อยู่ใน tags html ได้โดยกำหนดรูปแบบใหม่ได้ในไฟล์ CSS การใส่รูปภาพ คุณสามารถใส่รูปภาพไปในหน้าเว็ปได้ โดยไปที่เมนู Insert > Image แล้วก็เลือกรูปที่คุณต้องการ แล้วคลิก OK คุณสามารถจัดระเบียบการวางรูปภาพ เป็นชิดซ้าย ชิดขวา ตรงกลาง หรืออื่นๆ โดย
1. คลิกที่รูป เพื่อเลือกมัน
1. คลิกที่รูป เพื่อเลือกมัน
2. ตรง Property Inspector ข้างล่าง(ถ้าคุณไม่เห็นมัน ให้ไปที่เมนู Window แล้วเลือก Properties) แล้วก็เลือกการจัดระเบียบอย่างที่คุณต้องการ จากเมนู Align ดังรูปตัวอย่างข้างล่าง และคุณก็ยังสามารถจัดระเบียบของสิ่งที่อยู่ภายใน cell หรือ tag div ที่คลุมรูปนี้ โดยใช้เมนูตรงนี้เช่นเดียวกัน
การสร้างตัว include ทำได้โดย
การสร้างตัว include ทำได้โดย
1. Copy ส่วนใดส่วนหนึ่งในหน้าเว็ปที่คุณต้องการจะทำเป็นตัว include
2. สร้างหน้า html ขึ้นใหม่ โดยไปที่เมนู File แล้วเลือก Blank Page ตรงช่อง Page Type: เลือก HTML ตรงช่อง Layout: เลือก แล้วคลิก Create
3. เข้าไปดูที่ code html ของหน้าใหม่ที่เพิ่งสร้างขึ้น โดยไปที่เมนู View แล้วเลือก Code หรือกดปุ่ม Code ดังรูปตัวอย่างข้างล่าง หลังจากนั้นก็เลือก code ทั้งหมดที่ dreamweaver สร้างไว้ให้ แล้วก็ delete มันออกไป
3. เข้าไปดูที่ code html ของหน้าใหม่ที่เพิ่งสร้างขึ้น โดยไปที่เมนู View แล้วเลือก Code หรือกดปุ่ม Code ดังรูปตัวอย่างข้างล่าง หลังจากนั้นก็เลือก code ทั้งหมดที่ dreamweaver สร้างไว้ให้ แล้วก็ delete มันออกไป
4. กลับไปที่ design view โดยกดปุ่ม Design หรือไปที่เมนู View แล้วเลือก Design หลังจากนั้นก็ paste สิ่งที่คุณได้ copy มาจากข้อที่ 1 ลงไป
5. ถ้าคุณมีสิ่งที่เป็น link และรูปภาพ อยู่ในสิ่งที่จะเป็นตัว include คุณต้องเช็คให้แน่ใจว่าทั้ง link และรูปภาพทั้งหมดของสิ่งที่อยู่ในนั้น จะตั้งเป็นแบบ Relative to: Site Root ไม่ใช่แบบ Document คุณสามารถเช็คได้โดยเลือกสิ่งที่ใช้เป็นตัว link หรือรูปภาพ แล้วคลิกที่รูปโฟลเดอร์เพื่อเปิด dialog box ของ Select File คุณสามารถดูตัวอย่างวิธีทำได้จากรูปข้างล่าง รูปแรกเป็นแบบที่สิ่งที่ใช้ link เป็นตัวหนังสือ ส่วนรูปที่สองเป็นแบบที่สิ่งที่ใช้ link เป็นรูปภาพ ซึ่งตัวนี้คุณต้องตั้งทั้งตรงช่อง Src และ Link ใหม่ หลังจากที่ dialog box ของ Select File เปิดขึ้นมาแล้ว คุณก็เลือกตรงช่อง Relative to: เป็น Site Root
ไม่มีความคิดเห็น:
แสดงความคิดเห็น