การสร้างเว็บไซต์เบื้องต้น

การพฒั นาเวบ็ ไซต์และการประยกุ ตใ์ ชง้ านในรูปแบบต่างๆ (Website Design And Development) โรงเรยี นเทศบาล 6 (วดั ตันตยาภิรม)

1 สารบัญ 1. รู้จักกับโปรแกรม Dreamweaver CS6 2 2. เริ่มต้นการใชง้ านโปรแกรม ..............................................................................................................................................2 3.สว่ นประกอบของ Dreamweaver .......................................................................................................................................3 4. การสร้างเว็บไซต์เบอ้ื งตน้ .................................................................................................................................................5 4.1 การกาหนดโครงสรา้ งของไฟลแ์ ละโฟลเดอร์ในเว็บไซต์ ...........................................................................................5 4.2 การสร้างและจัดการไซต์.............................................................................................................................................5 4.3 การจดั การเว็บเพจ .......................................................................................................................................................8 5. การสรา้ งขอ้ ความ ............................................................................................................................................................18 5.1 เริ่มต้นใส่ขอ้ ความ................................................................................................................................................18 5.2 การตกแต่งและจดั รปู แบบให้ขอ้ ความ.................................................................................................................18 5.3 การแทรกสัญลกั ษณพ์ เิ ศษลงในเว็บเพจ...............................................................................................................23 5.4 การนาเอกสารอื่นมาใชร้ ่วมกบั Dreamweaver CS6.............................................................................................24 6. การตกแตง่ ด้วยภาพ.........................................................................................................................................................28 6.1 การเตรยี มรูปภาพสาหรบั ใชใ้ นเวบ็ เพจ.................................................................................................................28 6.2 การใส่รูปภาพลงในเว็บเพจ .................................................................................................................................28 6.3 การกาหนดคณุ สมบัติของรปู ภาพ........................................................................................................................30 6.4 การตกแตง่ ภาพพ้ืนหลังหรือการแสดงภาพเป็นพื้นหลงั ......................................................................................30 7. การใส่ตาราง....................................................................................................................................................................33 7.1 โครงสร้างและส่วนประกอบของตาราง ..............................................................................................................33 7.2 การใสต่ ารางลงในเว็บเพจ .......................................................................................................................................33 7.3 การปรับแต่งคุณสมบตั ขิ องตาราง........................................................................................................................36 7.4 การแทรกข้อความและรูปภาพลงในตาราง..........................................................................................................39 8. การเชื่อมโยงข้อมลู ในเวบ็ ...............................................................................................................................................41 8.1 การเชื่อมโยงภายในหน้าเวบ็ เพจ...........................................................................................................................41 8.2 การเชื่อมโยงภายในเว็บไซต์................................................................................................................................43 8.3 การเช่อื มโยงภายนอกเว็บไซต์.............................................................................................................................45 8.4 การเชือ่ มโยงไปยังอีเมล.......................................................................................................................................45 8.5 การเชื่อมโยงเพ่ือดาวน์โหลด...............................................................................................................................46

2 Adobe dreamweaver CS6 1. รู้จักกับโปรแกรม Dreamweaver CS6 Dreamweaver เป็นโปรแกรมของบริษัท Macromedia Inc. ที่ใชส้ าหรับออกแบบ และพัฒนาเวบ็ ไซต์ เวบ็ เพจและ เวบ็ แอปพลเิ คช่ัน ด้วยโปรแกรม Dreamweaver เราสามารถท่ีจะออกแบบและพัฒนาเว็บไซต์โดยการเขียนโค๊ดภาษา HTML หรือใชเ้ ครื่องมือ ทโ่ี ปรแกรม Dreamweaver มใี ห้ ซึง่ เครอ่ื งมือเหลา่ นีจ้ ะสร้างโคด้ ภาษา HTML ให้เราโดย อัตโนมัติ โดยที่เราไมจ่ าเป็นต้องเขียนโค๊ดภาษา HTML เอง ในปัจจบุ ันโปรแกรม Dreamweaver นอกจากจะสนบั สนนุ การใชง้ านกับภาษา HTML และยงั สนบั สนนุ การใชง้ านร่วมกบั เทคโนโลยที างดา้ นเว็บอนื่ ๆ ด้วย เช่น CSS และ Java Script เปน็ ต้น การสร้างเวบ็ แอปพลิเคชน่ั (Web Application) ด้วยโปรแกรม Dreamweaver นั้นสามารถทจี่ ะสร้าง การ ตดิ ต่อกบั ฐานข้อมลู และดงึ ข้อมูลจากฐานข้อมลู โดยไม่จาเป็นท่ีตอ้ งเขียนโค้ดของเซริ ์ฟเวอร์สครปิ ต์ (Server Script)เลย ตัว โปรแกรมจะสรา้ งให้เองโดยอตั โนมัติ ซึ่งจะทาให้เวลาทใ่ี ช้ในการพฒั นาเวบ็ แอปพลเิ คช่นั นั้นน้อยลง 2. เร่ิมต้นการใชง้ านโปรแกรม 1. Open a Recent Item : แสดงชื่อเว็บเพจท่เี คยใช้งานมาแล้ว หรอื คลิกท่ีปมุ่ Open เพ่ือค้นหาไฟล์ที่ต้องการ 2. Create New : เป็นการสร้างไฟล์งานใหม่ เชน่ HTML, ColdFusion, PHP, ASP, JavaScript เปน็ ต้น - HTML : สร้างหนา้ เว็บธรรมดา เหมาะสาหรบั ผเู้ ริ่มต้นสรา้ งเว็บ - ColdFusion : สรา้ งหน้าเวบ็ แอพพลเิ คช่ันทพ่ี ฒั นาดว้ ยเทคโนโลยีฝ่งั เซิรฟ์ เวอร์ ColdFusion - PHP : สร้างหนา้ เว็บแอพพลิเคชั่นทพ่ี ัฒนาด้วยเทคโนโลยฝี ่งั เซิรฟ์ เวอร์ PHP - CSS : สร้างไฟล์เกบ็ รูปแบบตัวอกั ษร ตาราง สีพ้ืนหลงั เพอื่ นาไปใชใ้ นทกุ ๆ หน้าเวบ็ เพจ - JavaScript : สร้างไฟลส์ คริปต์ท่ที างานฝ่ังไคลเอนต์ และทางานท่ีเคร่ืองของผู้เขา้ ชมเวบ็ ไซต์ - Dreamweaver Site : สร้างเว็บไซต์ใหม่ 3. Top Features (Videos) : เขา้ สหู่ น้าเว็บ Adobe TV ดูวีดิโอสาธติ การใชง้ าน

3 3.ส่วนประกอบของ Dreamweaver 1. Menu bar เปน็ แถบรวบรวมคาสัง่ ท้ังหมดของโปรแกรม - Code สาหรับแสดงการทางานในรูปแบบ HTML นอกจากนีย้ งั สามารถเขยี นคาส่ัง HTML หรือคาสั่งภาษา สครปิ ต์ (Script) อน่ื ๆ ไดด้ ว้ ย - Split สาหรับแสดงการทางานแบบ HTML กบั การแสดงพน้ื ท่อี อกแบบ โดยจะแสดงส่วนของคาสงั่ ไว้ด้านบน และแสดงเว็บเพจปกติไว้ ด้านลา่ ง - Design สาหรับแสดงเวบ็ เพจคล้ายกับทเี่ ราเห็นในบราวเซอร์ เช่น ข้อความ กราฟิก หรือออปเจก็ ตอ์ ่นื ๆ และ สามารถแกไ้ ขเนือ้ หาลงเวบ็ เพจได้ - Title สาหรบั แสดงชือ่ ของเวบ็ เพจ ในสว่ นของแถบหวั เร่ือง 2. Toolbar เป็นแถบรวบรวมคาส่งั ทีใ่ ชง้ านบ่อยๆ 3. Document Windows เปน็ พืน้ ทีส่ าหรบั สรา้ งหน้าเวบ็ เพจ และสามารถเลอื กพ้ืนทีก่ ารทางานได้หลายมุมมอง เชน่ - Code View สาหรับแสดงการทางานในรปู แบบ HTML นอกจากน้ียงั สามารถเขียนคาสง่ั HTML หรอื คาสัง่ ภาษาสครปิ ต์ (Script) อน่ื ๆ ไดด้ ว้ ย - Code and Design สาหรับแสดงการทางานแบบ HTML กับการแสดงพ้นื ที่ออกแบบ โดยด้านบนจะแสดงสว่ น ของคาสง่ั และดา้ นลา่ งแสดงเวบ็ เพจปกตไิ ว้ - Design View สาหรบั แสดงเวบ็ เพจคล้ายกบั ทเี่ ราเห็นในบราวเซอร์ เช่น ขอ้ ความ กราฟิก หรือออปเจก็ ต์อนื่ ๆ และสามารถแกไ้ ขเน้ือหาลงเว็บเพจได้

4 4. Status bar เป็นแถบแสดงสถานะ ซ่ึงประกอบดว้ ย 2 ส่วน คอื ทางด้านซา้ ยเรียกวา่ Tag Selector ใช้สาหรบั แสดงคาสง่ั HTML ของสว่ นประกอบในเว็บเพจที่เลือกอยู่ และทางดา้ นขวาเปน็ สว่ นที่บอกขนาดหน้าจอการแสดงผลและ เวลาท่ีใชใ้ นการดาวน์โหลดเวบ็ เพจ 5. Properties Inspector เป็นส่วนทก่ี าหนดคณุ สมบัติตา่ ง ๆ ในการปรบั แตง่ องคป์ ระกอบของหนา้ เว็บเพจ 6. Insert Bar เป็นแถบทีป่ ระกอบดว้ ยปมุ่ คาสง่ั ทีใ่ ชใ้ นการแทรกออบเจ็กต์ (องค์ประกอบต่างๆ) ลงในเว็บเพจ โดย แบ่งเป็นหมวดหมซู่ ึ่งมรี ายละเอียดดังน้ี - Common เปน็ กลุม่ เคร่ืองมือพน้ื ฐานในการสร้างเว็บเพจ เช่น รูปภาพ กราฟิก ตาราง ไฟลม์ ีเดีย เปน็ ตน้ - Layout เปน็ กล่มุ เคร่ืองมือท่ชี ว่ ยในการจดั องค์ประกอบของหน้าเว็บเพจ - Forms เป็นกลุ่มเครอ่ื งมือที่ใชส้ รา้ งแบบฟอร์มรับข้อมลู จากผู้ชม เช่น ช่องรับขอ้ ความ และฟลิ ด์ชนิดต่างๆ - Data เป็นกล่มุ เคร่อื งมือท่ีใช้สาหรบั สรา้ งหน้าเว็บติดตอ่ กับฐานข้อมูล - Spry เป็นกลุ่มเคร่อื งมือท่ีใชใ้ นการจัดการหน้าเวบ็ เพจ โดยจะชว่ ยในการทางานเพม่ิ เตมิ หรือแกไ้ ขในส่วนที่ ผิดพลาดหรือต้องการปรบั เปลีย่ นให้สะดวกขน้ึ - jQuery Mobile เปน็ กลุ่มเคร่อื งมือทชี่ ว่ ยในการสรา้ งหน้าเว็บบนมือถอื - InConext Editing เปน็ กลมุ่ เคร่ืองมอื ทีช่ ่วยอานวยความสะดวกใหผ้ ู้ใชง้ านสามารถแกไ้ ขเวบ็ เพจได้ - Text เป็นกลุ่มเคร่ืองมอื ท่ีใชจ้ ัดรูปแบบข้อความในเว็บเพจ - Favorite เปน็ กล่มุ เคร่ืองมอื ทีใ่ ช้งานบ่อยๆ เพ่ือความสะดวกในการใชง้ าน - Color Icons แสดงสขี องปุ่มเครอื่ งมือ - Hide Labels ซอ่ นชือ่ เรียกของปุ่มเคร่ืองมอื 7. Panel Group เปน็ กลุ่มหน้าต่างพาเนล ซ่งึ ชว่ ยเพ่มิ ความสามารถในการจดั การและออกแบบเว็บเพจ

5 4. การสร้างเวบ็ ไซต์เบื้องต้น 4.1 การกาหนดโครงสร้างของไฟล์และโฟลเดอร์ในเวบ็ ไซต์ ก่อนทาการสร้างเว็บไซต์ ต้องกาหนดโครงสร้างเว็บไซตก์ ่อน เพ่ือสรา้ งความสัมพนั ธ์ระหวา่ งเวบ็ เพจและไฟลต์ า่ ง ๆ ให้เป็นไปอยา่ งถกู ต้อง โดยภายในเว็บไซต์ประกอบด้วยโฟลเดอรแ์ ละไฟล์เปน็ จานวนมาก ซง่ึ ไฟลห์ น้าแรกของเวบ็ ไซต์ (Homepage) จะต้องอยใู่ นตาแหน่งโฟลเดอร์หลักเสมอ ตัวอยา่ งเช่น ต้องการสร้างเวบ็ ไซตข์ ายสนิ คา้ จะมโี ครงสรา้ งของ ไฟล์และโฟลเดอร์ จากภาพดา้ นบน โครงสรา้ งของโฟลเดอร์ภายในเว็บไซต์จะมีลักษณะเช่นเดียวกับโครงสรา้ งของโฟลเดอรใ์ น ระบบไฟล์ของวินโดว์ คือ ประกอบด้วยโฟลเดอร์ Product ซึง่ เปน็ โฟลเดอรห์ ลกั (Root) และสามารถสรา้ งโฟลเดอร์ยอ่ ย ๆ เปน็ ชนั้ ๆ เพื่อจัดเกบ็ ไฟล์ใหเ้ ปน็ หมวดหมู่ เชน่ ไฟลร์ ูปภาพ ก็จะถกู เก็บไว้ในโฟลเดอร์ images ไฟล์เว็บเพจสินคา้ ก็จะถกู เกบ็ ไวใ้ นโฟลเดอร์ catalog สาหรับไฟล์ index.html ซ่ึงเป็นไฟลห์ น้าแรกของเว็บไซต์ จะต้องอยใู่ นตาแหน่งโฟลเดอรห์ ลัก เสมอ 4.2 การสร้างและจัดการไซต์ จากทไ่ี ดก้ าหนดโครงสร้างของไฟลแ์ ละโฟลเดอร์ในเวบ็ ไซต์ สิ่งที่ตอ้ งทาเปน็ ข้นั ตอนต่อไป คือ การสรา้ งเว็บไซต์ หรอื เรยี กส้นั ๆ วา่ สร้างไซต์ (New Site) โดยมีขัน้ ตอนแสดงดังภาพด้านล่าง

6

7

8 4.3 การจัดการเวบ็ เพจ 4.3.1 การสร้างเว็บเพจใหม่ การสรา้ งเว็บเพจใหม่มหี ลายวิธดี งั นี้ 1. สร้างเว็บเพจใหม่จาก Welcome Screen เม่ือเปิดโปรแกรม Adobe Dreamweaver CS6 จะ ปรากฏหนา้ ต่าง Welcome Screen สร้างเว็บเพจใหมไ่ ด้ มขี ั้นตอนแสดงภาพ

9 2. สร้างเวบ็ เพจใหม่จากเมนู File มขี นั้ ตอนแสดงดงั ภาพ

10 3 สรา้ งเวบ็ เพจใหมจ่ ากพาเนล File มขี น้ั ตอนแสดงดงั ภาพ 4.3.2 การกาหนดคณุ สมบัตขิ องเว็บเพจ ก่อนการสรา้ งเว็บเพจ จาเป็นต้องกาหนดคุณสมบตั ิพื้นฐานใหก้ บั เว็บเพจแตล่ ะหนา้ เพื่อความ เหมาะสมในการทางาน ซง่ึ มีวิธีการดังนี้

11 1. คลกิ ทีเ่ มนู Modify 2. เลือก Page Properties... หรือ Ctrl + J 3. หรือ คลกิ ทปี่ ุ่ม Page Properties... จะปรากฎหนา้ ตา่ ง Page Properties แบ่งรายละเอียดออกเป็น 6 หมวด ได้แก่ Appearance (CSS) กาหนดคณุ สมบตั ทิ ัว่ ๆ ไปของหน้าเว็บเพจ (การกาหนดหนา้ ตาเวบ็ เพจดว้ ย CSS) Page Font : กาหนดรูปแบบของตวั อกั ษร Size : กาหนดขนาดของตวั อักษร Text Color : กาหนดสขี องตัวอกั ษร Background Color :กาหนดสพี น้ื หลงั ของเวบ็ เพจ Background Image : กาหนดภาพให้เป็นพืน้ หลังของเวบ็ เพจ Repeat : กาหนดการแสดงซา้ ของภาพพืน้ หลัง Left Margin : กาหนดระยะขอบด้านซา้ ยของเว็บเพจ Right Margin : กาหนดระยะขอบด้านขวาของเว็บเพจ Top Margin : กาหนดระยะขอบด้านบนของเว็บเพจ Bottom Margin : กาหนดระยะขอบด้านลา่ งของเว็บเพจ

12 Appearance (HTML) กาหนดคุณสมบัติท่วั ๆ ไปของหนา้ เว็บเพจ (การกาหนดหน้าตาเวบ็ เพจดว้ ย HTML) จะ เหมือนกับ Appearance (CSS) Background Image : กาหนดภาพให้เป็นพ้ืนหลงั ของเวบ็ เพจ Background : กาหนดสพี น้ื หลงั ของเว็บเพจ Text : กาหนดสีของตัวอักษร Visited links : กาหนดสขี องลิงค์ เม่ือถูกเมาส์คลกิ ไปแล้ว Link : กาหนดสขี องขอ้ ความท่ีเป็นจดุ ลงิ ค์ Active links : กาหนดสขี องลงิ ค์ เมื่อถกู เมาส์คลิก Left Margin : กาหนดระยะขอบดา้ นซ้ายของเว็บเพจ Right Margin : กาหนดระยะขอบด้านขวาของเวบ็ เพจ Top Margin : กาหนดระยะขอบดา้ นบนของเว็บเพจ Bottom Margin : กาหนดระยะขอบด้านลา่ งของเว็บเพจ Links (CSS) กาหนดคณุ สมบตั พิ ื้นฐานของการสร้างจุดเชื่อมโยงหรือลิงค์

13 Link Font : กาหนดรปู แบบของข้อความทใี่ ช้เป็นลงิ ค์ Size : กาหนดขนาดของข้อความทใี่ ชเ้ ป็นลงิ ค์ Link Color : กาหนดสีของข้อความทีใ่ ช้เป็นลงิ ค์ Rollover links : กาหนดสีของข้อความลิงค์ เมื่อถูกเมาสช์ ้ี Visited links : กาหนดสีของข้อความลิงค์ เมือ่ ถูกเมาส์คลกิ ไปแลว้ Active links : กาหนดสีของข้อความลิงค์ เมอ่ื ถกู เมาส์คลิก Underline Style :กาหนดรูปแบบการขีดเสน้ ใต้ของข้อความลิงค์ Headings (CSS) กาหนดคณุ สมบัตขิ ้อความที่ใชเ้ ป็นหัวเรื่องในหนา้ เว็บเพจ Heading font : กาหนดรูปแบบตวั อกั ษรของหัวข้อหรอื หัวเรื่อง Heading 1-6 : กาหนดขนาดและสีตวั อกั ษรของหัวข้อหรือหวั เร่ือง

14 Title/Encoding กาหนดหัวเรื่องและรูปแบบภาษาของเวบ็ เพจ Title : กาหนดช่ือหัวเร่ืองของเวบ็ เพจ (ส่วนน้ีสาคัญมาก ๆ) Document Type(DTD) : กาหนดประเภทของหน้าเว็บเพจ Encoding : กาหนดภาษาท่จี ะใช้ในเวบ็ เพจ (นยิ มกาหนดเป็น Unicode (UTF-8) ในการแสดงขอ้ ความบน หน้าเวบ็ เพจเป็นภาษาไทย) Tracing Image กาหนดรปู ภาพให้แสดงอยดู่ า้ นหลงั ของเนื้อหา แต่จะไมป่ รากฏรูปภาพเม่ือแสดงผลหนา้ เบราว์เซอร์ Tracing image : กาหนดไฟลภ์ าพทจ่ี ะใชเ้ ปน็ แบบ Transparency : ปรับแต่งความโปร่งใสของภาพ

15 4.3.3 การบนั ทกึ เว็บเพจ

16 4.3.4 การปิดเวบ็ เพจ 4.3.5 การเปดิ เวบ็ เพจ

17 4.3.6 การทดสอบเว็บเพจผ่านบราวเซอร์ เม่อื สร้างหรือแก้ไขเวบ็ เพจเรียบรอ้ ยแลว้ จะต้องบันทึกเว็บเพจเสมอ เม่อื บันทึก เว็บเพจแล้วสามารถทดสอบเวบ็ เพจผ่านบราวเซอรไ์ ด้โดยมขี นั้ ตอนแสดงดงั ภาพ

18 5. การสรา้ งขอ้ ความ 5.1 เรมิ่ ต้นใสข่ ้อความ ขอ้ ความนบั ว่าเปน็ ข้อมลู พน้ื ฐานในการสอ่ื สารถงึ ผู้เข้าชมเว็บไซต์ การใส่ข้อความบนหน้าเวบ็ เพจ สามารถกระทา ไดเ้ หมอื นกบั การพิมพ์ในโปรแกรม Microsoft Word โดยสามารถพิมพ์บนหนา้ เวบ็ เพจไดเ้ ลย 1. คลิกวางเคอร์เซอรต์ รงตาแหนง่ ท่ีต้องการพิมพ์ข้อความ 2. พิมพ์ขอ้ ความทต่ี ้องการ การขึ้นบรรทัดใหม่ การข้นึ บรรทัดใหม่ ใชว้ ธิ กี ดปุ่ม Enter จะเว้นบรรทัดท่ีวา่ งก่อนและหลงั ให้ 1 บรรทัด การข้นึ บรรทดั ใหมไ่ มต่ ้องเว้นทว่ี ่าง ถ้าตอ้ งการใหก้ ารข้ึนบรรทัดใหม่โดยไมต่ ้องเว้นท่ีวา่ ง ให้คลกิ หนา้ ขอ้ ความหรอื บรรทดั ทตี่ ้องการจะขึ้นบรรทัด ใหมแ่ ล้วกดปมุ่ Shift + Enter 5.2 การตกแต่งและจัดรปู แบบใหข้ อ้ ความ เมือ่ พมิ พ์ขอ้ ความลงในเวบ็ เพจแล้ว การเลือกขอ้ ความ เพ่ือจดั การกับขอ้ ความน้ัน ๆ เช่น กาหนดรปู แบบของ ตวั อกั ษร การลบ คดั ลอก ย้าย ฯลฯ มีรายละเอียดดังน้ี 1. การเลอื กข้อความ - เลือกข้อความเฉพาะส่วนทต่ี ้องการ

19 1. คลิกเมาส์วางเคอร์เซอรห์ น้าข้อความและลากเมาสไ์ ปจนถึงคาสดุ ท้าย แล้วปลอ่ ยเมาส์ 2. บรเิ วณเมาส์ลากผ่านจะมีแถบสีดาขน้ึ มา - เลอื กข้อความท้งั หมด 1. คลิกท่ีเมนู Edit 2. เลือก Select All หรือ Ctrl + A 3. ขอ้ ความทั้งหมดจะถูกเลอื ก โดยเป็นแถบสดี าคลุมขอ้ ความ หมายเหตุ ถา้ ตอ้ งการยกเลกิ การเลอื กเอกสาร ทาได้โดยคลิกพน้ื ทีว่ า่ งบนหนา้ เว็บเพจ 2. การตกแต่งและจัดรปู แบบของขอ้ ความ ขอ้ ความท่พี มิ พ์ลงในเว็บเพจ สามารถจัดรปู แบบของข้อความ เชน่ กาหนดรูปแบบตวั อักษร ขนาด สี ลกั ษณะ 1. เลอื กข้อความท่ีตอ้ งการตกแต่งหรือจดั รูปแบบของข้อความ

20 2. เครื่องมอื สาหรบั จัดรปู แบบข้อความใน Properties Inspector ซ่ึงมีใหเ้ ลือก 2 รูปแบบ คือ แบบ HTML และ แบบ CSS ดังนี้ - จัดรปู แบบดว้ ย HTML หมายเลข 1 : เปดิ การทางานกับ HTML หมายเลข 2 : Format : เลอื กรูปแบบหัวข้อ Heading (ขนาดตัวอกั ษร) ระดับ 1-6 หมายเลข 3 : Class : ดึงสไตลข์ อง CSS มาใช้กับข้อความ หมายเลข 4 : กาหนดลักษณะตวั อกั ษรให้เปน็ ตวั หนา หมายเลข 5 : กาหนดลักษณะตัวอกั ษรใหเ้ ปน็ ตัวเอียง หมายเลข 6 : ใส่ Bullet หรือหวั ข้อย่อย หมายเลข 7 : จัดย่อหนา้ ของขอ้ ความ

21 - จัดรูปแบบดว้ ย CSS หมายเลข 1 : เปิดการทางานกับ CSS หมายเลข 2 : Targeted Rule : สรา้ งหรือกาหนดสไตล์ CSS หมายเลข 3 : Font : เลอื กรปู แบบของตัวอักษร หมายเลข 4 : Size : ขนาดของตวั อกั ษร หมายเลข 5 : สีของตวั อกั ษร หมายเลข 6 : กาหนดลกั ษณะตัวอกั ษรให้เป็นตัวหนา หมายเลข 7 : กาหนดลักษณะตวั อักษรให้เปน็ ตวั เอยี ง หมายเลข 8 : จดั ตาแหนง่ ของข้อความ เชน่ ชดิ ซา้ ย กึง่ กลาง ชิดขวา จดั ให้ตรงกันทั้งซ้ายและขวา หมายเหตุ หมายเลข 2 : Targeted Rule : สรา้ งหรือกาหนดสไตล์ CSS - ถา้ เลอื ก <New Inline Style> คุณสมบัติท่กี าหนดจะมผี ลต่อข้อความที่เลือกทันที - ถา้ เลอื ก <New CSS Rule> จะเปน็ การสรา้ ง CSS ใหม่ ซึ่งสามารถนาไปใชซ้ า้ ได้ มีวิธีการดงั นี้

22 1. เลอื กขอ้ ความ 2. ช่อง Targeted Rule เลือก <New CSS Rule> 3. ตกแตง่ หรือจัดรปู แบบตาม หมายเลข 3-8 (กรณีนี้ สาธิตการกาหนดสขี องตัวอกั ษร) 4. ช่อง Selector Name ใหพ้ มิ พ์ชื่อทีเ่ ราต้องการสรา้ งเป็น CSS 5. ชอ่ ง Rule Definition เลอื ก (This document only) เพ่ือกาหนดเฉพาะข้อความท่เี ลือกไว้

23 6. คลกิ ท่ปี ุ่ม OK เพือ่ บนั ทึก 7. ผลจากการจัดรูปแบบด้วย CSS 5.3 การแทรกสัญลกั ษณพ์ เิ ศษลงในเวบ็ เพจ การแทรกสัญลกั ษณ์พเิ ศษลงในเว็บเพจ เช่น สกุลเงนิ หรือสญั ลกั ษณแ์ สดงลขิ สทิ ธิ์ตา่ ง ๆ มวี ธิ กี ารดงั น้ี 1. คลกิ วางเคอร์เซอร์ตรงตาแหนง่ ท่ีต้องการวางสัญลักษณ์

24 2. คลกิ ทเี่ มนู Window แลว้ เลือก Insert (สงั เกตต้องมีเครือ่ งหมายถูก อย่ดู ้านหนา้ Insert) 3. Insert Panel เลอื ก Text 4. คลิกที่ปมุ่ Characters แลว้ เลอื กสญั ลกั ษณท์ ่ีตอ้ งการ 5.4 การนาเอกสารอืน่ มาใชร้ ่วมกบั Dreamweaver CS6 Adobe Dreamweaver CS6 สามารถนาขอ้ มูลจากโปรแกรมอ่ืน ๆ เช่น Microsoft Word , Excel , PowerPoint มี วธิ กี ารดงั น้ี 1. การใช้ Import 1. คลกิ วางเคอร์เซอรต์ รงตาแหน่งท่ีตอ้ งการนาเข้าไฟลเ์ อกสาร 2. คลิกที่เมนู File 3. คลิกท่ี Import แลว้ เลือกประเภทไฟลน์ าเขา้ (กรณนี ้ี เลือกเป็นไฟล์ Word)

25 4. เลอื กโฟลเดอร์ท่ีอย่ขู องไฟลเ์ อกสาร 5. เลือกไฟล์ทตี่ อ้ งการ 6. คลิกทปี่ ุ่ม Open 7. รายละเอยี ดของไฟล์ทัง้ หมด (ทัง้ ขอ้ ความและภาพ) จะถกู นาเขา้ มาในเว็บเพจ ดงั รูป 2. การคดั ลอกข้อมูลจากไฟลเ์ อกสาร

26 1. เปิดไฟล์เอกสารท่ตี ้องการ แลว้ เลือกข้อความหรอื เน้ือหาท่ตี ้องการคัดลอก จากนน้ั ให้คัดลอก หรือกดปุ่ม Ctrl + C 2. นาเนื้อหาท่คี ดั ลอกวางลงในโปรแกรม Adobe Dreamweaver โดยคลกิ เคอร์เซอร์ตรงตาแหน่งท่ตี ้องการวาง ข้อความ จากนั้นคลิกทเี่ มนู Edit เลือก Pate หรอื กดป่มุ Ctrl + V 3. จะไดเ้ น้ือหาตามทีต่ อ้ งการ (ทั้งข้อความและรปู ภาพ)

27 ----------------------------------------------------

28 6. การตกแตง่ ด้วยภาพ 6.1 การเตรยี มรูปภาพสาหรับใช้ในเวบ็ เพจ รูปภาพนบั วา่ เปน็ ส่ิงสาคัญอย่างมากในการสร้างเวบ็ เพจ ทาให้ผู้อา่ นเข้าใจเรื่องราวท่นี าเสนอมากยิง่ ข้ึน และช่วยให้ เว็บเพจมีสีสันสวยงาม สงิ่ ที่จะต้องคานึงถงึ คือ ภาพควรจะตอ้ งมีขนาดเลก็ เพอ่ื นาไปเรียกใช้บนเว็บเพจได้อยา่ งรวดเรว็ เช่น GIF, JPEG และ PNG เพราะแตล่ ะแบบมีลกั ษณะการบีบอัดข้อมูลและสามารถเลอื กใช้ตามความเหมาะสม การนาภาพกราฟกิ มาใช้ในเวบ็ เพจนิยมใชภ้ าพ 3 ฟอร์แมต (นามสกลุ ) คือ .gif , .jpg และ .png ซง่ึ มีรายละเอยี ดของ ภาพแตล่ ะชนดิ ดังนี้ 1. ภาพ GIF (Graphic Interchange Format) เป็นรปู แบบไฟล์ภาพทีพ่ ัฒนาขึ้นโดย CompuSever สาหรบั บบี อัด ขอ้ มลู ภาพลายเสน้ กาหนดสีได้สูงสุด 256 สี มคี ณุ ลักษณะโปรง่ แสงและสรา้ งภาพเคล่ือนไหวได้ สามารถแสดงผลบน เบราว์เซอร์ไดท้ กุ ชนดิ มกั เป็นรูปทม่ี สี พี ืน้ เป็นสว่ นใหญ่ ไม่ค่อยมีการไล่สี แตถ่ ้ามกี ารขยายภาพทาให้ภาพแตกได้ เช่น โล โก้ รปู การ์ตูนต่างๆ 2. ภาพ JPEG (Joint Photographic Experts Group) เป็นรูปแบบไฟล์ที่บบี อัดขอ้ มูลให้เล็กลง หลงั การบีบอัด ยงั คงแสดงสไี ด้สูงถงึ 16.7 ลา้ นสี แต่ถา้ บีบอัดมากๆ คณุ ภาพจะเสยี ไป ไฟลท์ บ่ี บี อัดทาใหข้ นาดเลก็ กวา่ ภาพ .gif ก็ได้ สามารถดาวนโ์ หลดไดเ้ รว็ แต่เมื่อนามาแสดงผลก็อาจจะชา้ บา้ ง เพราะต้องขยายไฟลข์ ณะแสดงผลสามารถแสดงผลบน เบราว์เซอร์ไดท้ กุ ชนดิ เช่นกัน ส่วนใหญ่มักจะเป็นภาพถา่ ย หรอื ภาพทีม่ ีรายละเอยี ดสมี ากๆ 3. ภาพ PNG (Portable Network Graphic) พัฒนาขน้ึ มาใช้งานบนเบราว์เซอร์ แตข่ ณะนยี้ งั ไมไ่ ดค้ วามนิยมมาก นกั เม่อื เทียบกับไฟล์ .gif และ .jpg ขยายไดโ้ ดยภาพไม่แตก 6.2 การใสร่ ูปภาพลงในเว็บเพจ 1. คลกิ วางเคอร์เซอร์ตรงตาแหน่งที่ต้องการวางรูปภาพ 2. คลิกท่เี มนู Insert แล้วเลอื ก Image 3. หรอื คลิกท่ีแถบ Insert ให้เลือก Common

29 4. คลกิ แลว้ เลอื ก Image 5. เลือกโฟลเดอรท์ เ่ี ก็บรูปภาพ 6. เลอื กรูปภาพ ซงึ่ จะแสดงภาพตวั อยา่ งดา้ นขวามือ 7. คลิกปุ่ม OK 8. ใส่คาอธิบายรูปภาพ (ไมใ่ ส่กไ็ ด)้ 9. คลกิ ปมุ่ OK 10. รูปภาพทเ่ี ลือกจะถกู นามาแสดงในเว็บเพจ และจัดเกบ็ ไฟล์รูปภาพในโฟลเดอร์ทใ่ี ชใ้ นเว็บไซต์

30 6.3 การกาหนดคณุ สมบัตขิ องรปู ภาพ การกาหนดคณุ สมบัติของรูปภาพ สามารถปรบั รายละเอียดไดท้ ่ี Properties Inspector 1. คลิกเลือกรปู ภาพที่ตอ้ งการ 2. ใสช่ ่อื ของรูปภาพ 3. แหล่งทเ่ี กบ็ รปู ภาพ 4. คาอธิบายรูปภาพ 5. ความสูง (H) ของรูปภาพ 6. ความกวา้ ง (W) ของรปู ภาพ 7. ไฮเปอร์ลิงคข์ องรูปภาพ 8. เปิด/แก้ไขรูปภาพดว้ ยโปรแกรมอน่ื 9. ปรบั ลดความละเอียดของรปู ภาพ 10. อพั เดตรูปภาพ (กรณไี ม่แสดงภาพตามต้นฉบับ เฉพาะไฟล์ .PSD) 11. ตัดรูปภาพ 12. ปรับขนาดของรูปภาพ 13. ปรับค่าสี/แสงของรปู ภาพ 14. ปรับความคมชดั ของรูปภาพ 6.4 การตกแต่งภาพพ้ืนหลงั หรือการแสดงภาพเป็นพ้ืนหลัง

31 1. คลิกท่ปี มุ่ Page Properties... 2. ชอ่ ง Category เลือก Appearance (CSS) 3. คลิกที่ปุ่ม Browse... 4. ช่อง Look in ใหเ้ ลือกโฟลเดอรท์ ่ีเก็บไฟล์รปู ภาพ

32 5. คลิกเลอื กรูปภาพ เพื่อนาไปเปน็ ภาพพื้นหลัง 6. คลกิ ท่ีปุ่ม OK 7. จะปรากฏภาพพนื้ หลงั ในหน้าเวบ็ เพจ ดงั รปู

33 7. การใส่ตาราง 7.1 โครงสร้างและส่วนประกอบของตาราง การสรา้ งตารางจะช่วยจดั หนา้ เว็บเพจใหเ้ ป็นระเบยี บเรยี บรอ้ ย รวมถงึ การปรับแต่งคา่ ต่างๆ เช่น เสน้ ขอบของ ตาราง สีพน้ื หลงั ขอ้ ความในเซลล์ การรวมหรอื แยกเซลล์ เพอ่ื ใช้ในการแสดงข้อมลู ซึ่งตาราง ประกอบดว้ ย 1. คอลัมน์ (Column) หรือเซลลใ์ นแนวตง้ั 2. แถว (Row) หรือเซลล์ในแนวนอน 3. เซลล์ (Cell) หรอื ช่องของตาราง 7.2 การใส่ตารางลงในเวบ็ เพจ การสรา้ งตารางมีหลายวธิ ี ซงึ่ มีวิธีการดังนี้ วิธีท่ี 1

34 วิธที ี่ 2 1. คลิกวางเคอร์เซอร์ตรงตาแหน่งที่ต้องการ 2. แทบ็ Insert ใหเ้ ลือก Common 3. คลิกเลอื ก Table 4. จะปรากฏหนา้ ตา่ งของ Table โดยแบ่งออกเป็น 3 กล่มุ ดงั รปู

35 กลุม่ ที่ 1 : Table size (กาหนดรายละเอยี ดของตาราง) - Rows : จานวนแถว - Columns : จานวนคอลมั น์ - Table width : ความกว้างของตาราง (หนว่ ยท่ีใช้วดั เป็นเปอร์เซน็ ต์หรือพกิ เซล) - Border thickness : ความหนาของเส้นขอบตาราง - Cell padding : ระยะหา่ งระหวา่ งขอบเซลลก์ ับเน้ือหา - Cell spacing : ระยะหา่ งระหว่างเซลล์ในตาราง กลมุ่ ที่ 2 : Header (เลอื กตาแหนง่ ของหวั เร่ืองภายในตาราง) - None : ไมใ่ ชห้ วั เรื่องในตาราง - Left : กาหนดให้มหี ัวเร่อื งทางด้านซา้ ย - Top : กาหนดใหม้ หี ัวเรอื่ งทางดา้ นบน - Both : กาหนดให้มีหวั เรอ่ื งดา้ นซ้ายและดา้ นบน กลุ่มท่ี 3 : Accessibility (กาหนดขอ้ มูลทัว่ ไปในตาราง) - Caption : กาหนดหัวข้อของตาราง - Summary : คาอธบิ ายกากับตาราง

36 5. เม่ือกาหนดคุณสมบตั ิต่าง ๆ เสร็จเรยี บรอ้ ยแลว้ ไดต้ ารางตามท่ีเราต้องการ 7.3 การปรับแตง่ คณุ สมบัติของตาราง เมอื่ เราคลกิ เลือกท่ีตาราง เราสามารถปรับแต่งรายละเอียดต่าง ๆ ของตารางในสว่ นของ Properties Inspector ดงั นี้ 1. Table : ชอ่ื ของตาราง 2. Rows : จานวนแถว 3. Cols : จานวนคอลัมน์ 4. w : ความกว้างของตาราง 5. Direction : เปลย่ี นทศิ ทางของตาราง 6. Cellpad : ระยะห่างระหวา่ งขอบเซลล์กับเนื้อหา 7. CellSpace : ระยะหา่ งระหว่างเซลล์แต่ละเซลล์ 8. Align : การจัดตาแหน่งของตาราง 9. Border : ความหนาของเสน้ ขอบตาราง 106. Class : กาหนดคา่ CSS ให้กบั ตาราง

37 1. การเพิ่ม/ลบ (แถวหรือคอลมั น์) เมอ่ื เราสรา้ งตารางเสรจ็ เรยี บร้อยแลว้ และตอ้ งการท่จี ะเพิ่ม/ลบ (แถวหรอื คอลัมน์) สามารถทาไดต้ ามข้ันตอน ดงั น้ี 1. คลิกเมาส์วางเคอรเ์ ซอร์ตรงตาแหน่งของเซลลท์ ี่ตอ้ งการ 2. คลิกเมาส์ปมุ่ ขวา จะปรากฏเมนูยอ่ ย ใหเ้ ลือก Table 3. จะปรากฏรายการให้เลอื ก ดังน้ี - Insert Row : แทรกแถว - Insert Column : แทรกคอลมั น์ - Insert Rows or Columns : แทรกแถวหรือแทรกคอลัมน์ - Delete Row : ลบแถว - Delete Column : ลบคอลัมน์

38 2. การรวมเซลล์ / การแบ่งเซลล์ หากเราต้องการรวมเซลลห์ ลายๆ เซลล์เขา้ ดว้ ยกัน หรือต้องการแบ่งเซลล์ มวี ธิ กี ารดงั น้ี 1. เลอื กเซลล์ทต่ี ้องการรวม (ต้องเป็นเซลล์ที่ติดกัน) 2. คลกิ เมาส์ป่มุ ขวา จะปรากฎเมนยู อ่ ย ใหเ้ ลือก Table 3. จะปรากฏรายการให้เลอื ก ดงั นี้ - Merge Cells : แทรกเซลล์ - Split Cell : แบง่ เซลล์ 4. เซลลท์ ี่ถูกเลือกจะรวมเซลล์เข้าด้วยกัน ดงั รูป หมายเหตุ กรณีแบ่งเซลล์ เมอื่ คลิกที่ Split Cell จะปรากฏหนา้ ตา่ ง Split Cell ดงั รูป

39 Rows : เลือกแบง่ เซลล์ออกเป็นแถว Columns : เลือกแบ่งเซลล์ออกเปน็ คอลมั น์ Number of ... : กาหนดจานวนเซลล์ทตี่ ้องการจะแบ่ง 7.4 การแทรกข้อความและรูปภาพลงในตาราง 1. คลิกเซลล์ทต่ี ้องการจะแทรกข้อความ แล้วพิมพ์ขอ้ ความลงไปเหมอื นโปรแกรม Microsoft Excel 2. คลกิ เซลลท์ ่ีตอ้ งการจะแทรกรูปภาพ 3. คลกิ ท่เี มนู Insert

40 4. เลือก Image หรือ กดปมุ่ Ctrl + Alt + I จะปรากฏหน้าตา่ ง Select Image Source 5. คลกิ ทีช่ อ่ ง Look in เพื่อเลอื กโฟลเดอร์ที่เกบ็ รูปภาพ 6. คลิกเลือกรูปภาพ ซ่ึงจะแสดงภาพตวั อยา่ งดา้ นขวามอื 7. คลิกปุ่ม OK 8. รูปภาพจะแทรกในเซลล์นั้นทนั ที สามารถปรับแต่งได้ตามต้องการ ----------------------------------------------------

41 8. การเชื่อมโยงข้อมูลในเว็บ 8.1 การเชือ่ มโยงภายในหน้าเวบ็ เพจ ในกรณที ี่เวบ็ เพจมเี นอื้ หาและมขี นาดยาวมาก ทาใหต้ ้องใชเ้ มาสเ์ ล่ือนแถบ Scroll bar เราสามารถสร้างการ เชือ่ มโยงภายในเว็บเพจ เพ่อื ใหส้ ะดวกในการดูเน้อื หาในหน้าเวบ็ เพจ มวี ิธกี ารดงั นี้ กาหนดจดุ เปา้ หมาย ท่ตี อ้ งการจะเชือ่ มโยง 1. คลกิ วางเคอร์เซอร์ตรงตาแหน่งที่ตอ้ งการ 2. คลิกทีเ่ มนู Insert แล้วเลือก Named Anchor หรือ กดปมุ่ Ctrl + Alt + A 3. หรือ แถบ Insert ใหเ้ ลอื ก Common แลว้ คลกิ Named Anchor 4. จะปรากฏหน้าต่าง Named Anchor ใหต้ งั้ ชื่อจดุ เช่อื มโยง แล้วคลิกท่ปี ่มุ OK 5. จะปรากฏสัญลักษณก์ ารเช่ือมโยง ดังรูป

42 การสรา้ งจดุ เชอื่ มโยงไปยังเปา้ หมาย การกาหนดตาแหน่งการสรา้ งจดุ เช่ือมโยง อาจใช้ขอ้ ความหรอื รูปภาพเปน็ จุดเช่อื มโยงกไ็ ด้ 1. เลอื กขอ้ ความหรือรปู ภาพที่จะสร้างเป็นจดุ เชอื่ มโยง 2. คลกิ ทีป่ ุ่ม HTML 3. ชอ่ ง Link ให้พิมพเ์ คร่ืองหมาย # แล้วตามด้วยช่ือจดุ เป้าหมาย (ตามหัวข้อ กาหนดจุดเปา้ หมาย ท่ตี อ้ งการจะ เชอื่ มโยง) 4. ทดสอบการแสดงผลจากเวบ็ เบราวเ์ ซอร์ โดยกดปมุ่ F12

43 8.2 การเชอื่ มโยงภายในเวบ็ ไซต์ การจัดทาเวบ็ ไซต์ ซ่ึงประกอบไปด้วยหลาย ๆ เวบ็ เพจ แตล่ ะเวบ็ เพจสามารถเช่ือมโยงกนั ได้ มวี ิธกี ารดงั น้ี 1. เลือกข้อความหรือรปู ภาพทตี่ ้องการใชเ้ ป็นจุดเชื่อมโยง 2. ที่ Properties Inspector ในช่อง Link ใหค้ ลิกที่ปมุ่ Browse เพือ่ เลือกไฟลท์ ่จี ะทาการเชอ่ื มโยง 3. จะปรากฏหนา้ ต่าง Select File ให้เลือกโฟลเดอร์ท่เี กบ็ ไฟลเ์ ว็บเพจ 4. เลือกไฟล์เว็บเพจที่ตอ้ งการจะเชอ่ื มโยง 5. คลกิ ท่ปี ุ่ม OK

44 6. ชอ่ ง Link จะปรากฏไฟลเ์ วบ็ เพจทเ่ี ลอื ก 7. ช่อง Target เปน็ การกาหนดวิธเี ปดิ หน้าเวบ็ ที่เช่ือมโยง ดังนี้ _blank ให้เปดิ หน้าเวบ็ ท่เี ช่ือมโยงในหน้าตา่ งเบราว์เซอรใ์ หม่ new ใหเ้ ปดิ หน้าเว็บทเี่ ชอื่ มโยงในหนา้ ตา่ งเบราว์เซอรใ์ หม่อกี หน้าตา่ ง _parent ให้เปิดหน้าเว็บที่เช่ือมโยงในหน้าตา่ งเบราว์เซอร์เดมิ _self ใหเ้ ปิดหน้าเวบ็ ทีเ่ ชื่อมโยงในเฟรมเดมิ _top ใหเ้ ปิดหนา้ เว็บท่ีเชอ่ื มโยงในหนา้ ตา่ งเบราวเ์ ซอร์เดมิ โดยจัดให้เต็มเฟรม 8. ทดสอบการเช่ือมโยง โดยกดปุม่ F12 เพื่อดูการแสดงผลจากเว็บเบราวเ์ ซอร์ แล้วคลิกจุดเชอ่ื มโยง

45 8.3 การเช่ือมโยงภายนอกเว็บไซต์ การเชื่อมโยงไปยงั เว็บไซต์อื่น ๆ ท่อี ยู่ภายนอก เพ่ือต้องการใหผ้ ู้ชมเว็บไซต์ของเราสามารถศกึ ษาขอ้ มลู เพิม่ เติมได้ มีวธิ กี ารดงั นี้ 1. เลอื กขอ้ ความหรือรูปภาพทต่ี ้องการใช้เป็นจุดเชื่อมโยง 2. ท่ี Properties Inspector ในชอ่ ง Link ใหพ้ มิ พ์ช่อื URL ของเว็บไซตท์ ่ีเราตอ้ งการเชื่อมโยง โดยพิมพ์คาวา่ http:// แล้วตามด้วยชือ่ ของเวบ็ ไซต์ เชน่ http://www.dkd.ac.th 8.4 การเช่อื มโยงไปยงั อีเมล การเช่ือมโยงไปยังอเี มล เปน็ ช่องทางในการสอ่ื สารสาหรับให้ผู้ต้องการจะตดิ ต่อผา่ นอีเมลได้อย่างสะดวก รวดเร็วข้ึน มีวิธีการดงั นี้

46 1. เลอื กขอ้ ความหรือรปู ภาพทต่ี ้องการใชเ้ ป็นจดุ เช่ือมโยง 2. ที่ Properties Inspector ในชอ่ ง Link ใหพ้ มิ พช์ ่ือ URL ของเวบ็ ไซต์ที่เราตอ้ งการเชื่อมโยง โดยพิมพ์คาวา่ mailto: แลว้ ตามด้วยชื่อของเว็บไซต์ เชน่ mailto:[email protected] 8.5 การเช่ือมโยงเพ่ือดาวน์โหลด การเชอื่ มโยงเพื่อดาวน์โหลดมีจดุ ประสงค์ เพ่ือต้องการเชือ่ มโยงไปยังแฟ้มข้อมลู เชน่ ไฟล์รูปภาพ ไฟล์เอกสาร หรือไฟล์อ่ืน ๆ มีวิธกี ารดังน้ี

47 1. เลอื กข้อความหรือรูปภาพที่ต้องการใชเ้ ป็นจดุ เชื่อมโยง 2. ที่ Properties Inspector ในชอ่ ง Link ให้คลิกทป่ี มุ่ Browse เพื่อเลอื กไฟล์ที่จะทาการเชอ่ื มโยงเพ่ือดาวน์โหลด 3. จะปรากฏหนา้ ต่าง Select File ใหเ้ ลือกโฟลเดอร์ทเี่ กบ็ ไฟล์ 4. เลอื กไฟลท์ ่ตี ้องการ 5. คลกิ ที่ปมุ่ OK ----------------------------------------------------