ข้อมูลองค์ความรู้โดย
นิลาวัลย์ กุลประดิษฐ์
ตำแหน่ง เจ้าหน้าที่สารสนเทศ

โปรแกรม Dreamweaver 8 ใช้สำหรับสร้างเว็ป

ประเภททางด้าน IT หลัก :   Development & Integration
ประเภททางด้าน IT ย่อย :   Web Design
  ลงข้อมูลเมื่อ 10:00:30 20/05/2013
  Page View (2191) แบ่งปัน

1. โปรแกรม Dreamweaver 8

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

การติดตั้งโปรแกรม 
                การติดตั้งโปรแกรม  Dreamweaver 8  มีขั้นตอนดังนี้

  • ใส่แผ่นซีดีรอม  โปรแกรม  Dreamweaver 8  เข้าไปในไดร์ฟซีดีรอม
  • โปรแกรมจะเริ่มทำงานโดยอัตโนมัติ  หรือถ้าเปิดเข้าไปที่ไดรฟ์ซีดีรอม  ดับเบิลคลิกที่ไอคอน Setup โปรแกรม

  •  จะได้หน้าต่างข้อตกลงสิทธิการใช้งาน (License Agreement)  คลิกเลือก  I accept …  แล้วคลิกปุ่ม  Next

  • เลือกไดเรกทอรี่ที่ต้องการ  เช่น  C:\Program File … ถ้าต้องการเปลี่ยนให้คลิกปุ่ม  Change …  เลือกไดรฟ์และโฟลเดอร์ที่ต้องการแล้วคลิกปุ่ม  Next

  • เลือกชนิดของโปรแกรมที่จะใช้ร่วมกับ  Dreamweaver (Default Editor)  ถ้าเลือกทั้งหมดแล้วคลิกปุ่ม  Select All  แล้วคลิกปุ่ม  Next

  • คลิกปุ่ม  Install  เพื่อติดตั้งโปรแกรม

  • เริ่มติดตั้งโปรแกรมลงในเครื่องจนเสร็จสมบูรณ์

  • คลิกปุ่ม  Finish


การเปิดใช้งานโปรแกรม 
                หลังจากติดตั้งโปรแกรมบนเครื่องคอมพิวเตอร์แล้ว  สามารถเรียกใช้งานโปรแกรม ดังนี้  เรียกผ่านปุ่ม  Start  มีวิธีทำ คือ

  • คลิกที่ปุ่ม  Start  บนทาสก์บาร์
  • เลือกคำสั่งย่อย  Programs >> Macromedia >> Macromedia Dreamweaver 8

เรียกผ่านไอคอนบนเดสก์ทอป

 กรณีที่ได้สร้างไอคอน  Dreamweaver 8  ไว้บนเดสก์ทอป  สามารถดับเบิลคลิกที่ไอคอนได้
                เมื่อเปิดโปรอกรมแล้วจะเข้าสู่หน้าต่างที่เรียกว่า  หน้าเริ่มต้น (Start Page)  เพื่อให้ผู้ใช้เรียกใช้งานได้อย่างรวดเร็ว  ซึ่งประกอบด้วยส่วนต่าง ๆ  ดังรูป

2.  ส่วนต่าง ๆ ของโปรแกรม Dreamweaver 8

  • แถบชื่อเรื่อง (Title Bar) แสดงชื่อแฟ้มข้อมูลที่กำลังใช้งานอยู่
  • แถบคำสั่ง (Menu Bar) เป็นส่วนที่เก็บคำสั่งต่าง ๆ ที่ใช้งานในโปรแกรม Dreamweaver 8
  • แถบเครื่องมือ (Document Tool Bar) เป็นส่วนที่ใช้ในการจัดการกับเว็บเพจ ณ ขณะนั้นเช่นการเปลี่ยนมุมมองในการดูหน้าเว็บเพจ
  • แถบแทรก (Insert Bar) เป็นกลุ่มเครื่องมือที่ใช้สร้างองค์ประกอบต่าง ๆ ในเว็บเพจซึ่งประกอบด้วยชุดเครื่องมือ 8 ชุดด้วยกัน
  • พื้นที่ออกแบบ (Document Window) เป็นส่วนที่ใช้สำหรับใส่เนื้อหาและจัดองค์ประกอบของเว็บเพจ โดยประกอบด้วยมุมมองการทำงาน 3 รูปแบบด้วยกันคือ 
    Design, Code และ Code and Design
  • แถบสถานะ (Status Bar) เป็นส่วนที่แสดงสถานะของการใช้งานโปรแกรม ณ ขณะนั้น หน้าต่าง Properties เป็นส่วนของคำสั่งที่ใช้ในการกำหนดคุณสมบัติของ
    องค์ประกอบต่าง ๆ ที่เราต้องการเปลี่ยนแปลงหรือตกแต่ง
  • กลุ่มพาเนล (Panel Group) เป็นกลุ่มของแผงควบคุมที่ใช้แทนคำสั่งและติดต่อกับฐานข้อมูล


3.  การเริ่มต้นการสร้างเว็บไซต์และเว็บเพจ
การกำหนดโครงสร้างเว็บไซต์

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

  • โฟล์เดอร์รูปภาพ
  • โฟล์เดอร์เสียง
  • โฟล์เดอร์ภาพเคลื่อนไหว

อีกทั้งยังสามารถสร้างโฟลเดอร์ย่อย (Sub folder) 
ลงในโฟลเดอร์ต่าง ๆ ได้อีกด้วย

การสร้างไซต์ (Site) งาน

  • คลิกที่เมนู  Site  แล้วเลือกคำสั่ง  New Site …

  • จะเข้าสู่หน้าต่าง  Site Definition เพื่อกำหนดชื่อไซต์พิมพ์ชื่อไซต์ที่ต้องการ เช่น  Com-learning2u.com  แล้วคลิกปุ่ม  Next

  • เลือกไม่ต้องติดต่อไปยังเซิร์ฟเวอร์ในขณะนี้ (No, I don’t …)  แล้วคลิกปุ่ม  Next

  • กำหนดวิธีแก้ไขงานและโฟลเดอร์ที่เก็บเว็บไซต์  แล้วคลิกปุ่ม Next

  • เลือกรูปแบบการเชื่อมต่อกับเว็บเซิร์ฟเวอร์เป็น None  แล้วคลิกปุ่ม  Next

  • จะได้รายละเอียดที่เราตั้งค่าไว้ทั้งหมด  คลิกปุ่ม  Done

  • โฟล์เดอร์ที่สร้างจะปรากฏอยู่ที่พาเนลไฟล์

การสร้างไฟล์และโฟลเดอร์ใหม่

หลังจากได้สร้างไซต์งานไว้แล้ว  ขั้นตอนต่อไปคือการสร้างโฟลเดอร์ย่อย  และไฟล์งานตามที่ได้วางแผนไว้  ซึ่งมีวิธีการสร้าง  ดังนี้

  • คลิกขวาที่ไซต์  ในพาเนลไฟล์  จะได้เมนูลัด  และเลือกคำสั่ง  New Folder

  • จะปรากฏโฟลเดอร์ใหม่ชื่อ Untitled  ให้พิมพ์เปลี่ยนชื่อโฟลเดอร์ใหม่  เช่น  Images

  • สร้างโฟลเดอร์ต่าง ๆ  ตามที่ต้องการ  ส่วนการสร้างไฟล์งานให้เลือกคำสั่ง  New File  จะได้ไฟล์งานชื่อ  Untitled  ให้เปลี่ยนชื่อใหม่  เช่น  index.html

  • การแก้ไขไฟล์และโฟลเดอร์ให้คลิกขวาที่ไฟล์หรือโฟลเดอร์ที่ต้องการ  แล้วเลือกคำสั่ง  Edit  จะมีคำสั่งย่อยให้เลือก  เช่น  Copy Delete  ฯลฯ

  • เมื่อสร้างโฟลเดอร์และไฟล์ต่าง ๆ ในไซต์งานของเราครบแล้ว  ถ้าเปิดดูโฟลเดอร์จะพบรายการที่ได้สร้างไว้ 





การสร้างหน้าเว็บเพจใหม่ 

 เมื่อเปิดโปรแกรมแล้วจะเข้าสู่หน้าสำหรับสร้างเว็บเพจมีชื่อว่า  Untitled-1  โดยอัตโนมัติ  เราสามารถสร้างเว็บเพจได้ทันที  อย่างไรก็ตามหากต้องการสร้างหน้าเว็บเพจใหม่ ก็สามารถทำได้ดังนี้

  • เลือกคำสั่ง  File >> New  จะได้หน้าต่าง  New Document

  • คลิกเลือกแท็บ  General  แล้วเลือก  Category  เป็น  Basic Page
  • คลิกปุ่ม  Create

  • ในตัวเลือก  Category  จะมีลักษณะของเว็บเพจให้เลือกใช้งาน  ดังนี้

Basic Page สำหรับสร้างเว็บเพจใหม่ทั่วไป  เช่น  HTML, XML เป็นต้น

Dynamic Page สร้างเว็บเพจแบบไดนามิก สนับสนุนเว็บเซิร์ฟเวอร์ ASP,PHP

Template Page สร้างหน้าแม่แบบสำหรับใช้งานครั้งต่อไป

Other    สร้างเว็บเพจจากภาษาอื่น ๆ เช่น VBscript

CSS Style Sheets  เลือกใช้รูปแบบ CSS

Framesets  เลือกใช้งานเฟรมเซตแบบต่าง ๆ ที่โปรแกรมออกแบบไว้

Page Design (CSS)  เลือกรูปแบบ CSS

Starter Pages               เลือกรูปแบบตามหมวดหมู่ที่โปรแกรมออกแบบไว้ให้ เลือกใช

Page Design  เลือกการออกแบบที่เหมาะสมกับการใช้งาน หรือ ประเภท ธุรกิจของผู้ใช้งาน

  • การเปิดใช้เว็บเพจที่ได้สร้างไว้แล้ว  ให้เลือกคำสั่ง  File >> Open   แล้วเลือกไฟล์ที่ต้องการ

การใส่หัวเรื่องหรือแถบชื่อเรื่อง

หัวเรื่องหรือแถบชื่อเรื่องของหน้าเว็บเพจ  เป็นส่วนที่ปรากฏอยู่บนแถบชื่อของเว็บเพจหน้านั้น ๆ  เพื่อบอกให้ผู้อ่านทราบว่ากำลังเปิดดูเว็บเพจหน้าอะไร  ดังตัวอย่าง

การใส่หัวเรื่องทำได้  ดังนี้




  • คลิกที่ช่อง  Title  บน  Toolbar  แล้วพิมพ์ชื่อเรื่องที่ต้องการ

  • หรือคลิกปุ่ม  Page  Properties  จะได้หน้าต่าง  Page Properties  แล้วคลิกที่ตัวเลือก  Title/Encoding  จะได้ตัวเลือก  ดังรูป

  • พิมพ์ข้อความแถบชื่อเรื่อง  เช่น  Com-learning2u  ในช่อง  Title:  แล้วคลิก  OK
  • จะได้แถบชื่อเรื่องตามต้องการ

4.  การบันทึกเว็บเพจ
                การบันทึกเว็บเพจทั้งเว็บเพจที่สร้างใหม่และเว็บเพจที่เปิดขึ้นมาใช้งาน  มีวิธีการดังนี้
การบันทึกไฟล์ใหม่

  • คลิกคำสั่ง  File >> Save As
  • จะได้หน้าต่าง  Save As  เลือกโฟลเดอร์และพิมพ์ชื่อไฟล์

  • คลิกปุ่ม  Save
  • คำสั่ง  Save All  หมายถึงบันทึกไฟล์ทั้งหมดที่เปิดใช้งานหรือแก้ไข
  • คำสั่ง  Save to Remote Server  หมายถึง  บันทึกเว็บเพจและอัพโหลดไปสู่เซิร์ฟเวอร์
  • คำสั่ง  Save as Template  หมายถึง  บันทึกเป็นแม่แบบสำหรับใช้งาน 

5. การทดสอบกับเว็บเบราเซอร์

เว็บเพจที่สร้างและบันทึกไว้แล้ว  สามารถทดสอบเพื่อดูผลงานกับเว็บเบราเซอร์แบบออฟไลน์ (Offline)  ได้  โดยปกติ  Dreamweaver 8  จะเลือกเว็บเบราเซอร์ให้เองโดยอัตโนมัติ  ส่วนใหญ่ก็จะแป้น  Internet  Explorer    แต่มีบางคนที่ใช้  Firefox    ทั้งนี้  การแสดงผลอาจจะไม่ตรงกันเสียทีเดียว
                การทดสอบกับเว็บเบราเซอร์  ทำได้ดังนี้

  • กดแป้น  < F12 >  บนคีย์บอร์ด
  • หรือดับเบิลคลิกที่ไฟล์  .html  นั้น ๆ
  • หรือ เลือกคำสั่ง  File >> Preview in Browser >> iexplorer.exe (หรือ  Firefox.exe)
  • จะได้เว็บเพจดังตัวอย่าง

6. การออกจากโปรแกรม

การออกจากโปรแกรมทำได้  4  วิธี  ดังนี้
วิธีที่ 1  คลิกเมาส์ที่ปุ่ม  Close  ที่  Control Box
วิธีที่ 2  คลิกที่ปุ่ม  บน Title Bar  แล้วเลือกคำสั่ง  Close
วิธีที่ 3  คลิกที่คำสั่ง  File  >> Exit
วิธีที่ 4  ใช้แป้นพิมพ์  < Ctrl > + < Q >

ที่มาจาก : com-learning2u.com



องค์ความรู้ที่มีผู้อ่านมากสุด
ก า ร ทำ Sc a n d i s k ใ ห้ ร ว ด เ ร็ ว ทั น ใ จ
-

โดย... นิลาวัลย์ กุลประดิษฐ์

ม า รู้ จั ก F i r e w a l l ส่ ว น ตั ว กั น เ ถ อ ะ
-

โดย... นิลาวัลย์ กุลประดิษฐ์

เคล็ดลับและไม่ลับที่ดีใน Windows 7
-

โดย... นิลาวัลย์ กุลประดิษฐ์

:: WAP ::
WAP (Wireless Application Protocal) WAP ย่อมาจาก Wireless Application Protocol เป็นเทคโนโลยีสื่อสารแบบไร้สายเป็นโปรโตคอล(Protocol) ที่พัฒนาขึ้นจากผู้ผลิตโทรศัพท์มือถือในปี ค.ศ. 1977 ได้แก่ Ericcson, Nokia, Motorola เป็นต้น เพื่อให้ผู้ใช้งานโทรศัพท์มือถือ และอุปกรณ์ไร้สาย สามารถติดต่อเข้าระบบเครือข่ายอินเตอร์เน็ตได้จากทุกที โดยใช้งานผ่านซอฟต์แวร์ที่เรียกว่า WAP Browser และฝั่งผู้ให้บริการเครือข่ายจะต้องมี WAP Gateway ไว้รองรับการใช้งานหรือให้บริการ

โดย... นิลาวัลย์ กุลประดิษฐ์

ความรู้พื้นฐานก่อนสร้างเว็ปไซต์
ความรู้พื้นฐานก่อนสร้างเว็ปไซต์

โดย... นิลาวัลย์ กุลประดิษฐ์

:: BLUETOOTH ::
ความเป็นมาของ Bluetooth คำว่า "บลูทูธ"ชื่อนี้ได้ยินกันมานานอยู่พอสมควร แต่ผมเชื่ออยู่อย่างหนึ่งว่า มีหลายท่านเคยใช้ประโยชน์จากมันมาแล้ว และ ทราบรายละเอียดของเจ้าอุปกรณ์ไฮเทคตัวนี้ดีครับ

โดย... นิลาวัลย์ กุลประดิษฐ์

8 วิธี ทำเพจให้ติดอันดับดีใน FB Graph Search
นักการตลาดดิจิตอลหลายคน คุ้นเคยและรู้จักคำว่า SEO มาบ้าง ซึ่งก็หมายถึงการทำเว็บให้ติดอันดับบนๆ หรือติดหน้าแรกในผลเสิร์ชใน Google ของคำที่คาดว่ากลุ่มเป้าหมายเราจะเสิร์ชนั่นเอง

โดย... นิลาวัลย์ กุลประดิษฐ์

Hashtag ใน Facebook คืออะไร?
ถ้าใครเล่นทวิตเตอร์มาจะรู้จักว่า Hashtag (#) หรือเครื่องหมายชาร์ปนั้นมีประโยชน์อย่างไร

โดย... นิลาวัลย์ กุลประดิษฐ์