Web dreamcs5

1. การสร้างเว็บเพจด้วยโปรแกรม Adobe Dreamweaver CS5
ภาพที่ 1 แสดงหน้าจอส่วนประกอบของโปรแกรม Dreamweaver CS5
การสร้างเว็บไซต์ (Dreamweaver Site)
ก่อ นที่ จ ะเริ่ม สร้ า งเว็ บ เพจและเนื้อ หาต่า ง ๆ สิ่งแรกที่ ต้ อ งทํา ในการสร้ างเว็ บไซต์ ด้ ว ยโปรแกรม
Adobe Dreamweaver คือ การสร้าง Site เพื่อเป็นการกําหนดชื่อเว็บไซต์และระบุโฟลเดอร์ เพื่อใช้สําหรับ
จัดเก็บไฟล์ต่าง ๆ ซึ่งภายในโฟลเดอร์จะเป็นแหล่งเก็บเว็บเพจ รูปภาพ และไฟล์อื่น ๆ ที่เกี่ยวข้องให้อยู่ในพื้นที่
เดียวกัน เพื่อความสะดวกในการอัพโหลดไฟล์ขึ้นสู่เครื่องคอมพิวเตอร์แม่ข่ายจริง อีกทั้งยังช่วยในการบริหาร
จัดการข้อมูลต่าง ๆ ได้อย่างสะดวกยิ่งขึ้น
วิธีการในการสร้าง Site ทําได้โดย
1. เลือกคําสั่ง Site -> New Site
2. เข้าสู่หน้าจอ Site Setup ให้คลิกที่ Tab ชื่อ Site
3. จากนั้นในช่อง Site Name (ด้านขวา) ให้ทําการตั้งชื่อของเว็บไซต์ที่เราต้องการ แล้วคลิกปุ่ม
Save
คู่มือการสร้างเว็บเพจ ด้วยโปรแกรม Adobe Dreamweaver CS5
โดย กลุ่มงานสารสนเทศภูมิศาสตร์ ศูนย์เทคโนโลยีสารสนเทศและการสื่อสาร
หน้า 1

2. กรณีที่ต้องการพัฒนาเว็บไซต์ด้วยภาษาสคริปต์ เช่น PHP , ASP ต้องทําการกําหนด Server ให้กับ
เว็บไซต์นั้น ๆ ด้วย เพื่อให้สามารถทดสอบกับเว็บเพจที่เราได้พัฒนาขึ้นมาได้ สามารถทําได้โดย
4. คลิกที่ Tab ชื่อ Servers ให้คลิกเครื่องหมาย
5. กําหนดค่าในช่องต่าง ๆ ดังภาพ จากนั้นให้กดปุ่ม Save
คู่มือการสร้างเว็บเพจ ด้วยโปรแกรม Adobe Dreamweaver CS5
โดย กลุ่มงานสารสนเทศภูมิศาสตร์ ศูนย์เทคโนโลยีสารสนเทศและการสื่อสาร
หน้า 2

3. หมายเลข 1 เป็นการระบุว่าชื่อเครื่องคอมพิวเตอร์ของเราที่เราได้ทําการจําลองขึ้นมาเป็นเครื่อง
คอมพิวเตอร์แม่ข่าย (Server) ชื่ออะไร ในที่นี้กําหนดชื่อ localhost
หมายเลข 2 เป็นการกําหนดค่าการเชื่อมต่อของเครื่อง Server เพื่อให้สามารถทํางานเชื่อมต่อ
กันได้ ในที่นี้กําหนดเป็น Local/Network
หมายเลข 3 ระบุ directory ของโฟลเดอร์ ที่ เ ครื่ อ งของเราว่ า ไฟล์ ข องเว็ บ เรานั้ น เก็ บ ไว้ ที่
directory ใด (ระบุให้อยู่ภายใต้ directory ที่เราติดตั้ง AppServ และโฟลเดอร์ www)
หมายเลข 4 เป็นการกําหนดว่า Web URL ของเราเวลาทําการทดสอบบนเว็บเบราเซอร์นั้น จะ
เรียก URL ว่าอย่างไร
6. กลับมาที่หน้าจอส่วนของ Servers หลังจากที่เรากําหนดค่าต่าง ๆ แล้ว ให้คลิกเลือกเครื่องหมาย
ที่ช่อง Testing เพื่อใช้ในการทดสอบระบบ จากนั้นคลิกปุ่ม Save
7. คลิกที่ Tab ชื่อ Advanced Settings
กําหนดค่า Default Images Folder ให้ระบุ directory ที่ใช้สําหรับเก็บรูปภาพ
กําหนดค่า Web URL ให้ตรงกับที่เราได้กําหนดไว้ใน Site
จากนั้นคลิกปุ่ม Save
คู่มือการสร้างเว็บเพจ ด้วยโปรแกรม Adobe Dreamweaver CS5
โดย กลุ่มงานสารสนเทศภูมิศาสตร์ ศูนย์เทคโนโลยีสารสนเทศและการสื่อสาร
หน้า 3

4. การสร้างเว็บเพจใหม่
เมื่อเราได้สร้าง Site ไว้ใช้สําหรับเก็บไฟล์เว็บเพจต่าง ๆ แล้ว ในขั้นตอนการสร้างเว็บเพจใหม่นี้
สามารถดําเนินการได้โดย
o การสร้างเว็บเพจเปล่า
1. ให้คลิกที่เมนู File -> New
2. ให้คลิกที่ Tab ชื่อ Blank Page (1) จากนั้นให้เลือก Page Type (2) ว่าเรา
ต้องการสร้างเว็บเพจชนิดใด เช่น html , php เป็นต้น ที่ช่อง Layout (4) ให้เลือกเป็น none เสร็จแล้วคลิก
ปุ่ม Create (4)
คู่มือการสร้างเว็บเพจ ด้วยโปรแกรม Adobe Dreamweaver CS5
โดย กลุ่มงานสารสนเทศภูมิศาสตร์ ศูนย์เทคโนโลยีสารสนเทศและการสื่อสาร
หน้า 4

5. o การสร้างเว็บเพจจากรูปแบบโครงสร้าง CSS (CSS Layout)
1. ให้คลิกที่เมนู File -> New
2. ให้คลิกที่ Tab ชื่อ Blank Page (1) จากนั้นให้เลือก Page Type (2) ว่าเรา
ต้องการสร้างเว็บเพจชนิดใด เช่น html , php เป็นต้น ที่ช่อง Layout (4) ให้เลือกรูปแบบโครงสร้างที่
ต้องการ เสร็จแล้วคลิกปุ่ม Create (4)
o การสร้างเว็บเพจใหม่จากไฟล์ตัวอย่าง
1. ให้คลิกที่เมนู File -> New
2. ให้คลิกที่ Tab ชื่อ Page from Sample (1) จากนั้นให้เลือก Sample Folder (2)
ชนิดของเว็บเพจตัวอย่างว่าเราต้องการสร้างเว็บเพจชนิดใด และที่ช่อง Sample Page (3) ให้เลือกเว็บเพจ
ตัวอย่างที่ต้องการ เสร็จแล้วคลิกปุ่ม Create (4)
คู่มือการสร้างเว็บเพจ ด้วยโปรแกรม Adobe Dreamweaver CS5
โดย กลุ่มงานสารสนเทศภูมิศาสตร์ ศูนย์เทคโนโลยีสารสนเทศและการสื่อสาร
หน้า 5

6. การใส่ข้อความลงบนเว็บเพจ
สามารถทําได้เหมือนกับโปรแกรมเวิร์ดโปรเซสเซอร์ทั่วไป คือ เริ่มจากคลิกเพื่อวางเคอร์เซอร์ ณ
ตําแหน่งที่ต้องการใส่ข้อความ แล้วพิมพ์ข้อความลงไป หรือ สามารถสําเนาข้อความจากโปรแกรมอื่นมาวางลง
บนเว็บเพจได้ สามารถตกแต่งให้แต่ละส่วนต่างกันได้ ตามความสําคัญหรือประเภทของเนื้อหา
การจัดรูปแบบข้อความด้วย CSS
CSS (Cascading Style Sheet) เป็นชุดคําสั่งสําหรับจัดรูปแบบการแสดงผลบนหน้าเว็บเพจ
ประกอบด้วย การกําหนดสีของตัวอักษร , ขนาด . ชนิดของตัวอักษร , ลักษณะแบบตัวหนา-ตัวเอียง ตลอดจน
การจัดตําแหน่งและคุณสมบัติของย่อหน้าภายในเว็บเพจ จะใช้การจัดรูปแบบโดยกําหนด CSS
ลักษณะการใช้งานสไตล์ CSS แบ่งออกเป็น 3 แบบ คือ
External Style Sheet เป็นการนําสไตล์ที่เก็บอยู่ในไฟล์ .css เข้ามาใช้บนเว็บเพจ
Embedded Style Sheet เป็นการใช้สไตล์ที่เก็บอยู่ภายในเว็บเพจนั้นเอง
Inline Style เป็นการใช้คําสั่ง CSS กํากับไว้กับแท็ก HTML โดยตรงเลย
ประเภทของสไตล์ CSS แบ่งออกเป็น 4 ประเภท คือ
Class Style เป็นสไตล์ที่สามารถนําไปใช้ร่วมกับ tag ใด ๆ ก็ได้ เพื่อให้ tag นั้นมี
คุณสมบัติตามที่กําหนดไว้ โดยจะไม่มีผลต่อแท็กเดียวกันที่อยู่ในส่วนอื่น ๆ การเรียกใช้สไตล์แบบนี้จะใช้
ร่วมกับ attribute class เช่น <div class="Sheet">การเรียกใช้ class ชื่อ Sheet</div>
ID Style สไตล์แบบนี้สามารถใช้ร่วมกับออบเจ็คใด ๆ ก็ได้ โดยจะต้องระบุชื่อสไตล์ด้วย
attribute ID และต้องไม่มีออบเจ็คอื่นที่มีชื่อซ้ํากันบนเว็บเพจเดียวกัน และชื่อของสไตล์จะมีเครื่องหมาย #
นําหน้า
คู่มือการสร้างเว็บเพจ ด้วยโปรแกรม Adobe Dreamweaver CS5
โดย กลุ่มงานสารสนเทศภูมิศาสตร์ ศูนย์เทคโนโลยีสารสนเทศและการสื่อสาร
หน้า 6

7. Tag Style เป็นการใช้คําสั่ง CSS ในการกําหนดค่าให้กับ tag ในเว็บเพจที่มีชื่อเดียวกัน
ทุก tag ให้มีผลเหมือนกันทั้งเอกสาร
Compound Style เป็นการดัดแปลงคุณสมบัติของ tag บางชุดที่ใช้ร่วมกัน
ตัวอย่างการเขียนไฟล์ CSS (ดูเพิ่มเติมจากไฟล์ style.css)
อธิบาย การกําหนด style ส่วนนี้เป็นการกําหนดค่าเริ่มต้นให้กับเอกสารเว็บเพจ ภายใต้ tag
body (บรรทัดที่ 1)
บรรทัดที่ 3 margin หมายถึง เป็นการกําหนดระยะห่างระหว่างขอบเขตของออบเจ็ค
กับเนื้อหาอื่นโดยรอบ
คู่มือการสร้างเว็บเพจ ด้วยโปรแกรม Adobe Dreamweaver CS5
โดย กลุ่มงานสารสนเทศภูมิศาสตร์ ศูนย์เทคโนโลยีสารสนเทศและการสื่อสาร
หน้า 7

8. บรรทัดที่ 4 padding หมายถึง เป็นการกําหนดระยะห่างระหว่างเนื้อหาจริงของออบเจ็ค
กับขอบเขตด้านบน (Top) , ด้านล่าง (Bottom) , ด้านซ้าย (Left) , ด้านขวา (Right) ไม่ว่าจะถูกกําหนดให้
แสดงเส้นกรอบหรือไม่
บรรทัดที่ 5 background-color หมายถึง การกําหนดสี้พื้นของเว็บเพจ
บรรทัดที่ 6 font-family หมายถึง การกําหนดชุดของตัวอักษรว่าในหน้าเว็บเพจจะใช้
ชุดตัดอักษรอะไรบ้าง
บรรทัดที่ 7 font-size หมายถึง ขนาดของตัวอักษรที่จะใช้
บรรทัดที่ 8 font-style หมายถึง เป็นการกําหนดลักษณะของตัวอักษร ได้แก่ แบบปกติ
(normal) , แบบตัวเอียง (italic) และตัวเอียงแบบ oblique
บรรทัดที่ 9 font-weight หมายถึง เป็นการกําหนดน้ําหนักหรือความหนาของตัวอักษร
ได้แก่ normal น้ําหนักปกติ , bold ให้ตัวอักษรมีน้ําหนักมากกว่าปกติ , bolder , lighterให้ตัวอักษรมี
น้ําหนักมากหรือน้อยกว่าตัวอักษรปกติ
บรรทัดที่ 10 color หมายถึง สีของตัวอักษรทั้งหมด
อธิบาย การกําหนด class ภายใต้ชื่อ Sheet (บรรทัดที่ 47) เป็นการกําหนดค่าให้กับเอกสาร
เว็บเพจเมื่อมีการเรียกใช้ class นี้
บรรทัดที่ 49 overflow หมายถึง การกําหนดวิธีแสดงเนื้อหาที่มีขนาดใหญ่กว่าขอบเขต
ที่กําหนด
บรรทัดที่ 50 min-width หมายถึง กําหนดค่าความกว้างของออบเจ็คเป็นอย่างน้อยว่า
มีความกว้างเท่าไหร่
บรรทัดที่ 51 min-height หมายถึง กําหนดค่าความสูงของออบเจ็คเป็นอย่างน้อยว่ามี
ความสูงเท่าไหร่
บรรทัดที่ 52 margin หมายถึง เป็นการกําหนดระยะห่างระหว่างขอบเขตของออบเจ็ค
กับเนื้อหาอื่นโดยรอบ
บรรทัดที่ 53
position หมายถึง เป็นวิธีการแยกออบเจ็คออกจากเว็บเพจ
ประกอบด้วย
o absolute ให้ออบเจ็คเป็นอิสระจากเนื้อหาปกติ โดยค่าตําแหน่งจะคิดเทียบับ
มุมซ้ายบนของเว็บเพจ
o fixed คล้ายกับแบบ absolute แต่ออบเจ็คจะไม่เลื่อนไปตามหน้าเว็บเพจ
o relative เป็นการย้ายออบเจ็คไปยังตําแหน่งใหม่ โดยเทียบกับตําแหน่งปกติที่ถูก
วางไว้
o static ไม่แยกออบเจ็คออกจากเว็บเพจ
บรรทัดที่ 54 z-index หมายถึง การกําหนดลําดับชั้นของออบเจ็ค ระดับ 0 อยู่นอกสุด
บรรทัดที่ 55 width หมายถึง เป็นการกําหนดความกว้างของออบเจ็ค
การเรียกใช้ไฟล์ CSS มาใช้บนเว็บเพจ
การนําสไตล์จากไฟล์ CSS เข้ามาใช้บนเว็บเพจ จะต้องบอกให้เว็บเพจรู้จักกับไฟล์นั้น
สามารถทําได้โดย วิธีนําเข้า (Import) และวิธีเชื่อมโยง (Link) ทําได้โดย
คู่มือการสร้างเว็บเพจ ด้วยโปรแกรม Adobe Dreamweaver CS5
โดย กลุ่มงานสารสนเทศภูมิศาสตร์ ศูนย์เทคโนโลยีสารสนเทศและการสื่อสาร
หน้า 8

9. 1. เปิดเว็บเพจที่ต้องการเรียกใช้สไตล์ CSS
2. คลิกปุ่ม
3. คลิกปุ่ม Browse เพื่อเลือกไฟล์ CSS
4. เลือกวิธีนําเข้าไฟล์มาใช้ (Link , Import)
5. เลือกสื่อที่จะใช้แสดงผล (ถ้าต้องการ) ซึ่งชนิดของสื่อประกอบด้วย
o all (หรือไม่ระบุ) หมายถึง ใช้กับสื่อทุกประเภท
o print หมายถึง ใช้กับเครื่องพิมพ์ โดยสไตล์ในไฟล์ css จะมีผลเมื่อเราได้ทําการสั่ง
พิมพ์เว็บเพจเท่านั้น
o screen หมายถึง แสดงผลบนจอภาพ
6. คลิกปุ่ม OK
คู่มือการสร้างเว็บเพจ ด้วยโปรแกรม Adobe Dreamweaver CS5
โดย กลุ่มงานสารสนเทศภูมิศาสตร์ ศูนย์เทคโนโลยีสารสนเทศและการสื่อสาร
หน้า 9