48 Notepad++ เป็นโปรแกรมที่ให้ดาวน์โหลดมาใช้ได้ฟรีที่สามารถใช้ได้หลากหลายภาษาและทำงานบนระบบ Microsoft Windows ภายใต้การอนุญาตของ GPS (General Public License ) ซึ่งเป็นสัญญาอนุญาตให้ใช้ ซอฟแวร์โปรแกรม Notepad ++ นี้ถูกเขียนขึ่นด้วยภาษา C++ และใช้ Win32 API และ STL แท้ ทำให้ ประมวลผลได้อย่างรวดเร็วและโปรแกรมมีขนาดเล็ก
49 Gedit เป็นโปรแกรมช่วยในการเขียนโค้ดคำสั่ง HTML ให้ง่ายขึ้นด้วยการป้ายสีหรือแสดงการเน้นให้กับแท็ก คำสั่ง ทำให้ผู้เขียนสามารถแยกแยะแท็กคำสั่งและข้อความต่างๆจากกันได้อย่างชัดเจน Adobe Dreamweaver Dreamweaver จัดเป็นเครื่องมือในการสร้างเว็บที่ได้รับความนิยมสูงมาก สามารถนำมาใช้เพื่อการ สร้างเว็บได้อย่างรวดเร็วสวยงาม และถือเป็นโปรแกรมที่นักพัฒนานำมาใช้เพื่อการจัดการกับการสรร้าง เว็บไซต์มากที่สุดโดยมีทั้งเวอร์ชั่นที่นำมาใช้บนระบบปฏิบัติการ Microsoft Windows และ Mac OS
50 4.2 เว็บเบราว์เซอร์ (Web Browser) เป็นส่วนที่ใช้เรียกเอกสาร HTML ออกมาแสดงผลบนจอภาพในระบบอินเทอร์เน็ตเปรียบเสมือนการ คอมไพล์ (Compiled) และการรัน (Run) โปรแกรมในภาษาทางคอมพิวเตอร์แต่ต่างกันตรงที่ถ้าเกิดการ ผิดพลาดใดๆ ในเอกสาร HTML ผลที่แสดงออกมาทางเว็บเบราว์เซอร์จะไม่บ่งบอกถึงจุดผิดพลาดนั้น เว็บเบราว์เซอร์ที่นิยมใช้กัน จะมีดังนี้ Microsoft Internet Explorer เป็นเบราว์เซอร์หลักสำหรับผู้ที่ใช้ระบบ Windows ซึ่งมักจะถูกติดตั้งมาพร้อมกับระบบ แต่ถ้ายังไม่มี สามารถดาวน์โหลดได้ที่ www.microsoft.com Google Chrome เป็นเบราว์เซอร์ที่มาใหม่แต่ได้รับความนิยม อย่างรวดเร็ว เนื่องจากมีดีทางด้านความเร็ว ความเสถียร และการรองรับที่หลากหลาย ใช้ได้ทั้งระบบ Windows และ Mac สามารถดาวน์โหลด ได้ที่ www.google.com/chrome
51 Mozilla Firefox เป็นหนึ่งในเบราว์เซอร์ที่เป็นที่นิยม สามารถใช้ได้ กับระบบหลักๆทุกระบบ (Windows, Mac และ Linux) ดาวน์โหลดโปรแกรมได้ที่ www.mozilla.org Safari เป็นเบราว์เซอร์ดาวเด่นบนระบบของ Mac แต่ ก็ใช้ได้ดีกับระบบ Windows ด้วย สามารถดาวน์โหลด ได้ที่ www.apple.com/safari/download
52 Opera เป็นเบราว์เซอร์ในเชิงพาณิชย์ที่เน้นฟังชั่น การทำงานที่มีประสิทธิภาพ ดูรายละเอียดได้ที่ www.opera.com แต่ละเบราว์เซอร์จะรองรับการทำงานของ HTML5 แตกต่างกัน จึงอาจต้องติดตั้งไว้สัก 2-3 ตัว เพื่อ ทดสอบการทำงานของเอกสาร HTML5 ที่เราเขียน เช่น เราอาจใช้ Google Chrome เป็นตัวเริ่มต้นในการ ทดสอบจากนั้นให้ไปทดสอบด้วย Internet Explorer และ FireFox ด้วย 4.3 ขั้นตอนในการสร้างและทดสอบไฟล์เอกสาร HTML 1. สร้างโฟลเดอร์สำหรับจัดเก็บไฟล์ HTML ที่เราจะสร้างขึ้น เช่น D:/HTML 2. เปิดใช้โปรแกรมเท็กซ์เออดิเตอร์ โดยใช้โปรแกรม Notepad คลิกปุ่ม Start > All Programs> Accessories แล้วคลิกเลือก Notepad
53 3. พิมพ์คำสั่งต่างๆ ในภาษา HTML เพื่อสร้างเว็บเพจ ที่ต้องการ เช่น 4. บันทึกไฟล์เก็บไว้ เลือกคำสั่ง File > Save as เลือกไดร์ฟและโฟลเดอร์ที่จะใช้จัดเก็บ พิมพ์ชื่อไฟล์ ที่ต้องการแล้วตามด้วย .html แล้วคลิกปุ่ม Save
54 5. เข้าสู่โปรแกรมเว็บเบราว์เซอร์ ในที่นี้จะใช้ Internet Explorer 6. เรียกใช้ไฟล์เอกสาร HTML จากเว็บเบราว์เซอร์ ด้วยคำสั่ง File > Open คลิกปุ่ม Browse เพื่อ เลือกไฟล์HTML ที่ต้องการ แล้วเลือกปุ่ม OK
55 ผลที่ได้ของเอกสาร HTML บนเว็บเบราว์เซอร์ 7. หากผลที่ได้ไม่เป็นไปตามที่คิด ให้กลับไปทำการแก้ไขข้อความเอกสาร HTML ในขั้นตอนที่ 3 หมายเหตุรูปแบบคำสั่งและข้อความที่กำหนดในไฟล์ HTML จะใช้อักษรตัวพิมพ์เล็กหรืออักษร ตัวพิมพ์ใหญ่ก็ได้ 4.4 การแสดงเว็บเพจภาษาไทย หากการแสดงผลบนเว็บเบราว์เซอร์ไม่ปรากฎเป็นภาษาไทย แสดงว่ายังไม่มีการกำหนดให้แสดงผล แบบตัวอักษรที่เป็นภาษาไทย การปรับให้เว็บเพจสามารถแสดงภาษาไทยได้ถูกต้อง ให้กระทำดังนี้ ในโปรแกรมเว็บเบราว์เซอร์จาก เมนู View เลือกคำสั่ง Encoding เลือก Thai (Windows)
56 ผลลัพธ์ที่ได้จะเป็นภาษาไทยแล้ว
57 2. ภาษา CSS Cascading Style Sheets (CSS) คือภาษาที่ใช้กำหนดรูปแบบการแสดงผล HTML CSS ถูกสร้างขึ้น เพื่อใช้ร่วมกับ HTML กล่าวคือ HTML ใช้สำหรับกำหนดโครงสร้างข้อมูล และ CSS ใช้สำหรับกำหนดรูปแบบ การแสดงผล ตัวอย่างเช่น ในตัวอย่างข้างต้นเราใช้แท็ก <h1> เพื่อกำหนดหัวข้อเท่านั้น และแยกส่วนรูปแบบการแสดงผลให้ เป็นหน้าที่ของ CSS และกำหนดให้แสดงผลสีฟ้า ดังนั้นจึงกล่าวได้ว่า CSS คือภาษาที่ใช้ในการกำหนดรูปแบบ หรือสไตล์ (Style) สำหรับ HTML การแยกการแสดงผลออกจากข้อมูลช่วยให้ง่ายต่อการเปลี่ยนแปลงรูปแบบในอนาคต เช่น ถ้าเรา ต้องการเปลี่ยนสีให้กับหัวข้อในแท็ก <h1> ในทุกๆเว็บเพจ เราเพียงเปลี่ยนที่ไฟล์ CSS เท่านั้น (ไฟล์ CSS สามารถใช้ได้กับทุกๆเว็บเพจที่ต้องการ) ปัจจุบัน CSS เป็นที่นิยมอย่างมากในการจัดรูปแบบให้กับเว็บเพจ ซึ่ง ก่อนการมาของ CSS นั้นเราใช้ตารางในการจัดเลย์เอาท์ และใช้พร็อพเพอร์ตี้ของ HTML ในการจัดรูปแบบ ซึ่ง ยุ่งยากมากหากเราต้องการเปลี่ยนรูปแบบของทุกเว็บเพจในเว็บไซต์ สำหรับสเปคและข้อมูลอย่างละเอียดของ CSS สามารถดูได้ที่ http://www.w3.org/Style/CSS ซึ่งกำกับและดูแลโดย World Wide Web Consortium (W3C) เวอร์ชันของ CSS เวอร์ชันของ CSS มีดังต่อไปนี้ CSS 1 CSS 1 หรือ CSS Level 1 คือเวอร์ชันแรกที่ออกสู่สาธารณะและเป็น W3C Recommendation ซึ่ง ออกในเดือนธันวาคมปีค.ศ. 1996 CSS 1 นั้นมีฟีเจอร์เพียงไม่มาก CSS 2 CSS 2 ออกในเดือนพฤษภาคมปีค.ศ. 1998 โดยเพิ่มเติมฟีเจอร์ให้กับ CSS 1 อย่างไรก็ตาม CSS 2 ไม่ ประสบความสำเร็จมากนักในแง่ของการยอมรับและการรองรับจากเว็บเบราว์เซอร์ต่างๆ ทำให้ CSS 2.1 ต้อง ออกมาเพื่อแก้ไขปัญหาต่างๆในเวอร์ชัน 2 CSS 2.1 ได้เป็น Recommendation ในเดือนกรกฎาคมปีค.ศ. 2007
58 CSS 3 CSS 3 ยังอยู่ระหว่างการพัฒนา และการกำหนดสเปคใน CSS 3 นั้น จะถูกแบ่งออกเป็นส่วน (Module) ต่างๆ ซึ่งบางส่วนก็เสร็จสมบูรณ์แล้ว บางส่วนก็กำลังพัฒนาอยู่ แต่บางเว็บเบราว์เซอร์ก็เริ่ม รองรับสเปคในบางส่วนบ้างแล้ว เราเขียนโค้ด CSS ที่ใดได้บ้าง? หลังจากรู้ความเป็นมาและอะไรคือ CSS แล้ว เรามาดูว่าจะเขียนโค้ด CSS ไว้ที่ใดได้บ้าง ก่อนอื่นเรา มาเตรียมตัวอย่างโค้ด HTML กันก่อนดังนี้ เราสามารถเขียนโค้ด CSS ได้ 3 ที่หรือ 3 แบบหลักๆดังนี้ • Inline • Embedded • External รายละเอียดของแต่ละรูปแบบจะอธิบายในหัวข้อถัดไป
59 1. การเขียนโค้ด CSS แบบ Inline แบบ Inline คือการเขียนโค้ด CSS ลงไปในแท็ก HTML ที่ต้องการให้เกิดการแสดงผลเลย และจะมีผล ต่อแท็กนั้นๆเท่านั้น โดยมี Syntax ดังนี้ <tag style="property:value; property:value; . . ."> แอททริบิวท์ style ใช้ในการกำหนดค่าสไตล์พร็อพเพอร์ตี้ต่างๆ ซึ่งจะอยู่ในรูปของ "property:value" หากมีมากกว่าหนึ่งชุดให้ใช้เครื่องหมาย Semicolon ";" คั่น ตัวอย่างเช่น <h1 style="color:#0000FF">Where to Put CSS?</h1>? ในตัวอย่างข้างต้นเรากำหนดสไตล์ให้กับแท็ก <h1> โดยให้ข้อความเป็นสีฟ้าด้วยสไตล์พร็อพเพอร์ตี้ color การเขียนแบบ Inline ไม่เป็นที่นิยมนัก เนื่องจากต้องเขียนโค้ด CSS ลงไปในแท็กHTML ดังนั้นจึงไม่ สามารถนำสไตล์ไปประยุกต์ใช้กับแท็กอื่นๆได้ ลองนึกดูว่าถ้าต้องระบุค่าสีให้กับทุกๆแท็ก <h1> ในทุกๆเว็บ เพจ คงจะลำบากน่าดูหากว่าต้องการเปลี่ยนสีในภายหลัง 2. การเขียนโค้ด CSS แบบ Embedded แบบที่ 2 แบบ Embedded เป็นการเขียนโค้ด CSS ลงไปในไฟล์ HTML เช่นกัน แต่จะรวมโค้ด CSS ทั้งหมดไว้ภายใต้แท็ก <head> โดยมี Syntax ดังนี้
60 การกำหนดสไตล์จะถูกกำหนดไว้ภายในแท็ก <style> ซึ่งอยู่ภายในแท็ก <head> อีกที การกำหนด สไตล์จะเริ่มต้นด้วยการระบุแท็กที่ต้องการ (Selector) จากนั้นจึงเป็นสไตล์พร็อพเพอร์ตี้ "property:value" ต่างๆภายในเครื่องหมายปีกกา แต่ละชุดจะถูกคั่นด้วยเครื่องหมาย Semicolon ";" ตัวอย่างเช่น ในตัวอย่างข้างต้นเรากำหนดสีให้กับแท็ก <h1> เป็นสีฟ้า และใช้ตัวอักษรแบบตัวเอียง นอกจากนี้ยัง กำหนดให้แต่ละหัวข้อของลิสต์ (<li>) แสดงเป็นเลขโรมันเรียงตามลำดับ เช่น i, ii, iii, iv เป็นต้น ตัวอย่าง ข้างต้นมีข้อสังเกตุว่า คุณสมบัติต่างๆที่กำหนดจะมีผลต่อแท็ก <h1> และ <li> ทุกๆแท็กที่ปรากฏในไฟล์ HTML ถ้ามี (ส่วนในกรณีที่ต้องการเลือกเพียงแค่บางแท็ก ไม่เอาทั้งหมด เช่น แท็ก <p> เฉพาะที่ย่อหน้าแรก ก็ทำได้นะครับ ซึ่งจะกล่าวถึงในลำดับถัดๆไป ) การเขียนแบบ Embedded ก็ไม่เป็นที่นิยมอีกนะครับ เพราะก็ต้องเขียนรวมอยู่ในไฟล์ HTML เช่นเดียวกับแบบ Inline หากจะนำไปใช้กับไฟล์ HTML อื่นๆ ก็ต้องก็อปปี้โค้ดเอา ดังนั้นการเปลี่ยนแปลงแก้ไข จึงค่อนข้างยุ่งยาก เพราะต้องตามไล่แก้ในทุกๆไฟล์
61 3. การเขียนโค้ด CSS แบบ External แบบสุดท้ายแบบ External เป็นการเขียนแบบแยกโค้ด CSS ออกมายังไฟล์แยกต่างหาก ซึ่งชื่อก็บอก อยู่แล้วนะครับว่า External โดยมี Syntax ดังนี้ รูปแบบนี้จะแยกโค้ด CSS ไปไว้ที่ไฟล์แยก โดยมีนามสกุลเป็น ".css" ส่วนโครงสร้างการเขียนโค้ดจะ เหมือนกับแบบ Embedded คือเริ่มต้นด้วยการระบุแท็ก (Selector) แล้วตามด้วยสไตล์พร็อพเพอร์ตี้ "property:value" ต่างๆภายในเครื่องหมายปีกกา และโปรดสังเกตุว่าในไฟล์แยกไม่ต้องมีแท็ก <style> นะ ครับ ให้มีแต่โค้ด CSS เท่านั้น จากนั้นในไฟล์ HTML ก็ให้ลิงค์มายังไฟล์ CSS ด้วยแท็ก <link> ตัวอย่างเช่น
62 ในตัวอย่างข้างต้นไฟล์ HTML และ CSS จะต้องอยู่ในไดเรกทอรี่เดียวกัน (ไฟล์ CSS จะใช้ชื่ออะไรก็ ได้) และถ้าไฟล์ HTML ใดอยากใช้สไตล์ที่กำหนดในไฟล์ External.css ก็สามารถลิงค์มาได้ โดยแค่เพิ่มแท็ก <link> เข้าไป ไม่เพียงเท่านี้ไฟล์ HTML ยังสามารถลิงค์ไปยังไฟล์ CSS ได้มากกว่าหนึ่งไฟล์ด้วย ทำให้เรา สามารถแยกเป็นไฟล์ CSS ตามแต่ละจุดประสงค์ได้ เช่น Menu.css สำหรับจัดการกับเมนู, Layout.css จัดการกับเลย์เอาท์ เป็นต้น เว็บไซต์ใหญ่ๆก็ใช้รูปแบบนี้ในการสร้างธีม (Theme) นะครับ แล้วก็ประยุกต์ใช้มัน กับทุกหน้าในเว็บไซต์นั้น การเขียนแบบ External เป็นรูปแบบที่นิยมที่สุดเพราะสามารถนำกลับมาใช้ใหม่ได้ ถ้าทุกหน้ามีสไตล์ ที่ตรงกัน ก็ให้ลิงค์ไปที่ไฟล์ CSS เดียวกัน ดังนั้นหากต้องการเปลี่ยนแปลงรูปลักษณ์ใหม่ ก็เปลี่ยนมันที่เดียวเลย สะดวกดี
63 3. พื้นฐานภาษา JavaScript JavaScript เป็นภาษาสคริปต์เชิงวัตถุ (ที่เรียกกันว่า “สคริปต์” (script) ซึ่งในการสร้างและพัฒนา เว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น ซึ่ง ก่อนที่จะเริ่มเรียนเรื่อง JavaScrip นั้น จำเป็นต้องมีความรู้พื้นฐานเรื่อง HTML และ CSS เสียก่อน การใช้งาน JavaScript ในการใช้งาน JavaScript นั้น จำเป็นต้องใส่ Code ให้อยู่ระหว่างแท็ก <script> และ </script> โดย ตัวคำสั่ง JavaScript นี้จะอยู่ในส่วนแท็ก <head> และ <body> ของเอกสาร HTML เช่น JavaScript ใน แท็ก <body> ตัวอย่างเช่น รู้จักกับตัวแปรใน Javascript การประกาศตัวแปร var let และ const 1. var เป็นการประกาศตัวแปรแบบ global scope คือ ประกาศค่าและใช้ค่าร่วมกันได้ var test = 123; if (true) { var test= 456; } console.log(test); // 456 Global Variable เป็นตัวแปรที่สามารถเรียกใช้ได้ทุกที่ นั่นคือประกาศไว้นอกฟังก์ชัน Local Variable เป็นตัวแปรที่สามารถเรียกได้เฉพาะในฟังก์ชันใดฟังก์ชันหนึ่ง ที่มีการกำหนดตัวแปร ไว้เท่านั้น นั่นคือได้ประกาศตัวแปรไว้ภายในฟังก์ชัน
64 2. let เป็นการประกาศตัวแปรแบบ block scope 3. Const เป็นการประกาศตัวแปรแบบ block scope ไม่สามารถเปลี่ยนแปลงค่าได้แต่การเปลี่ยนค่า ภายใน object Array ชุดของข้อมูล เป็นตัวแปรพิเศษซึ่งสามารถเก็บมากกว่าหนึ่งค่าในแต่ละครั้งหากต้องการมีรายการสินค้า (ตัวอย่างเช่นชื่อรถ) การจัดเก็บรถยนต์ในตัวแปรเดี่ยวอาจมีลักษณะดังนี้: ในการเข้าถึงของอาร์เรย์ค่าเริ่มต้นของ Index จะมีค่าเท่ากับ 0 เสมอ let test = 123; if (true) { let test= 456; } console.log(test); // 123 const PI = 3.14 PI = 1 // "PI" is read-only เปลี่ยนค่าไม่ได้อีกแล้วนะ const obj = { a: 1 } const obj = { a: 2} // แต่การเปลี่ยนค่าภายใน object ไม่ได้ทำให้ memory address เปลี่ยนไป obj.a = 2 console.log(obj) // { a: 2 } var cars = ["Saab", "Volvo", "BMW"];
65 Index Car[0] = Saab function ( ) ฟังก์ชั่น ฟังก์ชั่น หรือชุดคำสั่งทีรวม Statement การทำงานเอาไว้ สามารถเรียกชื่อมาใช้งานตามที่เรา ต้องการใช้ได้ ตัวอย่างการเรียกใช้ฟังก์ชั่น เมื่อสร้างไว้เบื้องต้น Loop ใช้ทำซ้ำตามเงื่อนไขที่กำหนด 1. Loop for ตัวอย่างการทำงาน Loop for function ชื่อฟังก์ชั่น( ตัวแปรพารามิเตอร์ถ้ามี ){ Statement ที่ต้องการให้ทำงาน เมื่อมีการเรียก function return <- ถ้าต้องการส่งค่าบางอย่างกลับไปนอกฟังก์ชั่น เมื่อการทำงานมาถึงจุดนี้ } function hello() { } hello(); // เรียกใช้งาน for ( ตัวแปรเริ่มต้น ; กรณีเทียบ (Condition) ; เพิ่มค่าตัวแปร ) { Statement ที่ต้องการให้ทำงาน ถ้ากรณีเทียบยังเป็นจริงอยู่ } for (var i = 1; i < 5 ; i++ ){ console.log(i); } /* ผลลัพธ์เราจะได้ 1 2 3 4 เพราะรอบสุดท้าย i มีค่าเป็น 5 ซึ่งจะทำให้ส่วนเทียบเป็นเท็จ เป็นการหยุด loop */
66 หน่วยที่ 6 การจัดเว็บไซต์ด้วย 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 เป็นต้น
67 - HTML : สร้างหน้าเว็บธรรมดา เหมาะสำหรับผู้เริ่มต้นสร้างเว็บ - ColdFusion : สร้างหน้าเว็บแอพพลิเคชั่นที่พัฒนาด้วยเทคโนโลยีฝั่งเซิร์ฟเวอร์ ColdFusion - PHP : สร้างหน้าเว็บแอพพลิเคชั่นที่พัฒนาด้วยเทคโนโลยีฝั่งเซิร์ฟเวอร์ PHP - CSS : สร้างไฟล์เก็บรูปแบบตัวอักษร ตาราง สีพื้นหลัง เพื่อนาไปใช้ในทุก ๆ หน้าเว็บเพจ - JavaScript : สร้างไฟล์สคริปต์ที่ทางานฝั่งไคลเอนต์ และทำงานที่เครื่องของผู้เข้าชมเว็บไซต์ - Dreamweaver Site : สร้างเว็บไซต์ใหม่ 3. Top Features (Videos) : เข้าสู่หน้าเว็บ Adobe TV ดูวีดิโอสาธิตการใช้งาน 3.ส่วนประกอบของ Dreamweaver 1. Menu bar เป็นแถบรวบรวมคำสั่งทั้งหมดของโปรแกรม - Code สำหรับแสดงการทำงานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคำสั่ง HTML หรือ คำสั่งภาษาสคริปต์ (Script) อื่นๆ ได้ด้วย - Split สำหรับแสดงการทำงานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดยจะแสดงส่วนของ คำสั่ง ไว้ด้านบนและแสดงเว็บเพจปกติไว้ ด้านล่าง - Design สำหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในบราวเซอร์ เช่น ข้อความ กราฟิก หรือออป เจ็กต์อื่นๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้ - Title สำหรับแสดงชื่อของเว็บเพจ ในส่วนของแถบหัวเรื่อง 2. Toolbar เป็นแถบรวบรวมคำสั่งที่ใช้งานบ่อยๆ 3. Document Windows เป็นพื้นที่สำหรับสร้างหน้าเว็บเพจ และสามารถเลือกพื้นที่การทำงานได้ หลายมุมมอง เช่น
68 - Code View สาหรับแสดงการทำงานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคำสั่ง HTML หรือคำสั่งภาษาสคริปต์ (Script) อื่นๆ ได้ด้วย - Code and Design สำหรับแสดงการทำงานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดย ด้านบนจะแสดงส่วนของคำสั่ง และด้านล่างแสดงเว็บเพจปกติไว้ - Design View สำหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในบราวเซอร์ เช่น ข้อความ กราฟิก หรือ ออปเจ็กต์อื่นๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้ 4. Status bar เป็นแถบแสดงสถานะ ซึ่งประกอบด้วย 2 ส่วน คือ ทางด้านซ้ายเรียกว่า Tag Selector ใช้สำหรับแสดงคำสั่ง HTML ของส่วนประกอบในเว็บเพจที่เลือกอยู่ และทางด้านขวาเป็นส่วนที่บอก ขนาดหน้าจอการแสดงผลและเวลาที่ใช้ในการดาวน์โหลดเว็บเพจ 5. Properties Inspector เป็นส่วนที่กำหนดคุณสมบัติต่าง ๆ ในการปรับแต่งองค์ประกอบของหน้า เว็บเพจ 6. Insert Bar เป็นแถบที่ประกอบด้วยปุ่มคาสั่งที่ใช้ในการแทรกออบเจ็กต์ (องค์ประกอบต่างๆ) ลง ในเว็บเพจ โดยแบ่งเป็นหมวดหมู่ซึ่งมีรายละเอียดดังนี้ - Common เป็นกลุ่มเครื่องมือพื้นฐานในการสร้างเว็บเพจ เช่น รูปภาพ กราฟิก ตาราง ไฟล์มีเดีย เป็นต้น - Layout เป็นกลุ่มเครื่องมือที่ช่วยในการจัดองค์ประกอบของหน้าเว็บเพจ - Forms เป็นกลุ่มเครื่องมือที่ใช้สร้างแบบฟอร์มรับข้อมูลจากผู้ชม เช่น ช่องรับข้อความ และฟิลด์ ชนิดต่างๆ - Data เป็นกลุ่มเครื่องมือที่ใช้สาหรับสร้างหน้าเว็บติดต่อกับฐานข้อมูล - Spry เป็นกลุ่มเครื่องมือที่ใช้ในการจัดการหน้าเว็บเพจ โดยจะช่วยในการทางานเพิ่มเติมหรือ แก้ไขในส่วนที่ผิดพลาดหรือต้องการปรับเปลี่ยนให้สะดวกขึ้น
69 - jQuery Mobile เป็นกลุ่มเครื่องมือที่ช่วยในการสร้างหน้าเว็บบนมือถือ - InConext Editing เป็นกลุ่มเครื่องมือที่ช่วยอานวยความสะดวกให้ผู้ใช้งานสามารถแก้ไขเว็บ เพจได้ - Text เป็นกลุ่มเครื่องมือที่ใช้จัดรูปแบบข้อความในเว็บเพจ - Favorite เป็นกลุ่มเครื่องมือที่ใช้งานบ่อยๆ เพื่อความสะดวกในการใช้งาน - Color Icons แสดงสีของปุ่มเครื่องมือ - Hide Labels ซ่อนชื่อเรียกของปุ่มเครื่องมือ 7. Panel Group เป็นกลุ่มหน้าต่างพาเนล ซึ่งช่วยเพิ่มความสามารถในการจัดการและออกแบบเว็บ เพจ 4. การสร้างเว็บไซต์เบื้องต้น 4.1 การกำหนดโครงสร้างของไฟล์และโฟลเดอร์ในเว็บไซต์ ก่อนทำการสร้างเว็บไซต์ ต้องกำหนดโครงสร้างเว็บไซต์ก่อน เพื่อสร้างความสัมพันธ์ระหว่างเว็บเพจ และไฟล์ต่าง ๆ ให้เป็นไปอย่างถูกต้อง โดยภายในเว็บไซต์ประกอบด้วยโฟลเดอร์และไฟล์เป็นจำนวนมาก ซึ่ง ไฟล์หน้าแรกของเว็บไซต์ (Homepage) จะต้องอยู่ในตำแหน่งโฟลเดอร์หลักเสมอ ตัวอย่างเช่น ต้องการสร้าง เว็บไซต์ขายสินค้า จะมีโครงสร้างของไฟล์และโฟลเดอร์ จากภาพด้านบน โครงสร้างของโฟลเดอร์ภายในเว็บไซต์จะมีลักษณะเช่นเดียวกับโครงสร้างของ โฟลเดอร์ในระบบไฟล์ของวินโดว์ คือ ประกอบด้วยโฟลเดอร์ Product ซึ่งเป็นโฟลเดอร์หลัก (Root) และ สามารถสร้างโฟลเดอร์ย่อย ๆ เป็นชั้น ๆ เพื่อจัดเก็บไฟล์ให้เป็นหมวดหมู่ เช่น ไฟล์รูปภาพ ก็จะถูกเก็บไว้ใน
70 โฟลเดอร์ images ไฟล์เว็บเพจสินค้าก็จะถูกเก็บไว้ในโฟลเดอร์ catalog สาหรับไฟล์ index.html ซึ่งเป็นไฟล์ หน้าแรกของเว็บไซต์ จะต้องอยู่ในตาแหน่งโฟลเดอร์หลักเสมอ 4.2 การสร้างและจัดการไซต์ จากที่ได้กาหนดโครงสร้างของไฟล์และโฟลเดอร์ในเว็บไซต์ สิ่งที่ต้องทาเป็นขั้นตอนต่อไป คือ การ สร้างเว็บไซต์ หรือเรียกสั้น ๆ ว่าสร้างไซต์ (New Site) โดยมีขั้นตอนแสดงดังภาพด้านล่าง
71
72 4.3 การจัดการเว็บเพจ 4.3.1 การสร้างเว็บเพจใหม่ การสร้างเว็บเพจใหม่มีหลายวิธีดังนี้ 1. สร้างเว็บเพจใหม่จาก Welcome Screen เมื่อเปิดโปรแกรม Adobe Dreamweaver CS6 จะปรากฏหน้าต่าง Welcome Screen สร้างเว็บเพจใหม่ได้ มีขั้นตอนแสดงภาพ 2. สร้างเว็บเพจใหม่จากเมนู File มีขั้นตอนแสดงดังภาพ
73
74 3. สร้างเว็บเพจใหม่จากพาเนล File มีขั้นตอนแสดงดังภาพ 4.3.2 การกำหนดคุณสมบัติของเว็บเพจ ก่อนการสร้างเว็บเพจ จำเป็นต้องกำหนดคุณสมบัติพื้นฐานให้กับเว็บเพจแต่ละหน้า เพื่อความ เหมาะสมในการทำงาน ซึ่งมีวิธีการดังนี้
75 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 : กำหนดระยะขอบด้านล่างของเว็บเพจ Appearance (HTML) กำหนดคุณสมบัติทั่ว ๆ ไปของหน้าเว็บเพจ (การกำหนดหน้าตาเว็บเพจด้วย HTML) จะเหมือนกับ Appearance (CSS)
76 Background Image : กำหนดภาพให้เป็นพื้นหลังของเว็บเพจ Background : กำหนดสีพื้นหลังของเว็บเพจ Text : กำหนดสีของตัวอักษร Visited links : กำหนดสีของลิงค์ เมื่อถูกเมาส์คลิกไปแล้ว Link : กำหนดสีของข้อความที่เป็นจุดลิงค์ Active links : กำหนดสีของลิงค์ เมื่อถูกเมาส์คลิก Left Margin : กำหนดระยะขอบด้านซ้ายของเว็บเพจ Right Margin : กำหนดระยะขอบด้านขวาของเว็บเพจ Top Margin : กำหนดระยะขอบด้านบนของเว็บเพจ Bottom Margin : กำหนดระยะขอบด้านล่างของเว็บเพจ Links (CSS) กำหนดคุณสมบัติพื้นฐานของการสร้างจุดเชื่อมโยงหรือลิงค์
77 Link Font : กำหนดรูปแบบของข้อความที่ใช้เป็นลิงค์ Size : กำหนดขนาดของข้อความที่ใช้เป็นลิงค์ Link Color : กำหนดสีของข้อความที่ใช้เป็นลิงค์ Rollover links : กำหนดสีของข้อความลิงค์ เมื่อถูกเมาส์ชี้ Visited links : กำหนดสีของข้อความลิงค์ เมื่อถูกเมาส์คลิกไปแล้ว Active links : กำหนดสีของข้อความลิงค์ เมื่อถูกเมาส์คลิก Underline Style : กำหนดรูปแบบการขีดเส้นใต้ของข้อความลิงค์ Headings (CSS) กำหนดคุณสมบัติข้อความที่ใช้เป็นหัวเรื่องในหน้าเว็บเพจ Heading font : กำหนดรูปแบบตัวอักษรของหัวข้อหรือหัวเรื่อง Heading 1-6 : กำหนดขนาดและสีตัวอักษรของหัวข้อหรือหัวเรื่อง Title/Encoding กำหนดหัวเรื่องและรูปแบบภาษาของเว็บเพจ
78 Title : กำหนดชื่อหัวเรื่องของเว็บเพจ (ส่วนนี้สำคัญมาก ๆ) Document Type(DTD) : กำหนดประเภทของหน้าเว็บเพจ Encoding : กำหนดภาษาที่จะใช้ในเว็บเพจ (นิยมกำหนดเป็น Unicode (UTF-8) ในการ แสดงข้อความบนหน้าเว็บเพจเป็นภาษาไทย) Tracing Image กำหนดรูปภาพให้แสดงอยู่ด้านหลังของเนื้อหา แต่จะไม่ปรากฏรูปภาพเมื่อแสดงผล หน้าเบราว์เซอร์ Tracing image : กำหนดไฟล์ภาพที่จะใช้เป็นแบบ Transparency : ปรับแต่งความโปร่งใสของภาพ 4.3.3 การบันทึกเว็บเพจ
79 4.3.4 การปิดเว็บเพจ
80 4.3.5 การเปิดเว็บเพจ
81 4.3.6 การทดสอบเว็บเพจผ่านบราวเซอร์ เมื่อสร้างหรือแก้ไขเว็บเพจเรียบร้อยแล้ว จะต้องบันทึกเว็บเพจเสมอ เมื่อบันทึก เว็บเพจแล้ว สามารถทดสอบเว็บเพจผ่านบราวเซอร์ได้โดยมีขั้นตอนแสดงดังภาพ 5. การสร้างข้อความ 5.1 เริ่มต้นใส่ข้อความ ข้อความนับว่าเป็นข้อมูลพื้นฐานในการสื่อสารถึงผู้เข้าชมเว็บไซต์ การใส่ ข้อความบนหน้าเว็บเพจ สามารถกระทำได้เหมือนกับการพิมพ์ในโปรแกรม Microsoft Word โดยสามารถ พิมพ์บนหน้าเว็บเพจได้เลย
82 1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการพิมพ์ข้อความ 2. พิมพ์ข้อความที่ต้องการ การขึ้นบรรทัดใหม่ การขึ้นบรรทัดใหม่ ใช้วิธีกดปุ่ม Enter จะเว้นบรรทัดที่ว่างก่อนและหลังให้ 1 บรรทัด การขึ้นบรรทัดใหม่ไม่ต้องเว้นที่ว่าง ถ้าต้องการให้การขึ้นบรรทัดใหม่โดยไม่ต้องเว้นที่ว่าง ให้คลิกหน้าข้อความหรือบรรทัดที่ ต้องการจะขึ้นบรรทัดใหม่แล้วกดปุ่ม Shift + Enter 5.2 การตกแต่งและจัดรูปแบบให้ข้อความ เมื่อพิมพ์ข้อความลงในเว็บเพจแล้ว การเลือกข้อความ เพื่อจัดการกับข้อความนั้น ๆ เช่น กำหนด รูปแบบของตัวอักษร การลบ คัดลอก ย้าย ฯลฯ มีรายละเอียดดังนี้ 1. การเลือกข้อความ - เลือกข้อความเฉพาะส่วนที่ต้องการ 1. คลิกเมาส์วางเคอร์เซอร์หน้าข้อความและลากเมาส์ไปจนถึงคาสุดท้าย แล้วปล่อยเมาส์ 2. บริเวณเมาส์ลากผ่านจะมีแถบสีดำขึ้นมา - เลือกข้อความทั้งหมด 1. คลิกที่เมนู Edit 2. เลือก Select All หรือ Ctrl + A 3. ข้อความทั้งหมดจะถูกเลือก โดยเป็นแถบสีดาคลุมข้อความ หมายเหตุ ถ้าต้องการยกเลิกการเลือกเอกสาร ทำได้โดยคลิกพื้นที่ว่างบนหน้าเว็บเพจ
83 2. การตกแต่งและจัดรูปแบบของข้อความ ข้อความที่พิมพ์ลงในเว็บเพจ สามารถจัดรูปแบบของข้อความ เช่น กำหนดรูปแบบตัวอักษร ขนาด สี ลักษณะ 1. เลือกข้อความที่ต้องการตกแต่งหรือจัดรูปแบบของข้อความ 2. เครื่องมือสำหรับจัดรูปแบบข้อความใน Properties Inspector ซึ่งมีให้เลือก 2 รูปแบบ คือ แบบ HTML และแบบ CSS ดังนี้ - จัดรูปแบบด้วย HTML หมายเลข 1 : เปิดการทำงานกับ HTML หมายเลข 2 : Format : เลือกรูปแบบหัวข้อ Heading (ขนาดตัวอักษร) ระดับ 1-6 หมายเลข 3 : Class : ดึงสไตล์ของ CSS มาใช้กับข้อความ หมายเลข 4 : กำหนดลักษณะตัวอักษรให้เป็นตัวหนา หมายเลข 5 : กำหนดลักษณะตัวอักษรให้เป็นตัวเอียง หมายเลข 6 : ใส่ Bullet หรือหัวข้อย่อย หมายเลข 7 : จัดย่อหน้าของข้อความ
84 - จัดรูปแบบด้วย 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 ใหม่ ซึ่งสามารถนำไปใช้ซ้ำได้ มีวิธีการ ดังนี้
85 1. เลือกข้อความ 2. ช่อง Targeted Rule เลือก <New CSS Rule> 3. ตกแต่งหรือจัดรูปแบบตาม หมายเลข 3-8 (กรณีนี้ สาธิตการกำหนดสีของตัวอักษร) 4. ช่อง Selector Name ให้พิมพ์ชื่อที่เราต้องการสร้างเป็น CSS 5. ช่อง Rule Definition เลือก (This document only) เพื่อกำหนดเฉพาะข้อความที่เลือกไว้ 6. คลิกที่ปุ่ม OK เพื่อบันทึก 7. ผลจากการจัดรูปแบบด้วย CSS
86 5.3 การแทรกสัญลักษณ์พิเศษลงในเว็บเพจ การแทรกสัญลักษณ์พิเศษลงในเว็บเพจ เช่น สกุลเงิน หรือสัญลักษณ์แสดงลิขสิทธิ์ต่าง ๆ มีวิธีการดังนี้ 1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการวางสัญลักษณ์ 2. คลิกที่เมนู Window แล้วเลือก Insert (สังเกตต้องมีเครื่องหมายถูก อยู่ด้านหน้า Insert) 3. Insert Panel เลือก Text 4. คลิกที่ปุ่ม Characters แล้วเลือกสัญลักษณ์ที่ต้องการ
87 5.4 การนาเอกสารอื่นมาใช้ร่วมกับ Dreamweaver CS6 Adobe Dreamweaver CS6 สามารถนำข้อมูลจากโปรแกรมอื่น ๆ เช่น Microsoft Word, Excel, PowerPoint มีวิธีการดังนี้ 1. การใช้ Import 1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการนำเข้าไฟล์เอกสาร 2. คลิกที่เมนู File 3. คลิกที่ Import แล้วเลือกประเภทไฟล์นำเข้า (กรณีนี้ เลือกเป็นไฟล์ Word)
88 4. เลือกโฟลเดอร์ที่อยู่ของไฟล์เอกสาร 5. เลือกไฟล์ที่ต้องการ 6. คลิกที่ปุ่ม Open 7. รายละเอียดของไฟล์ทั้งหมด (ทั้งข้อความและภาพ) จะถูกนำเข้ามาในเว็บเพจ ดังรูป 2. การคัดลอกข้อมูลจากไฟล์เอกสาร 1. เปิดไฟล์เอกสารที่ต้องการ แล้วเลือกข้อความหรือเนื้อหาที่ต้องการคัดลอก จากนั้นให้คัดลอก หรือกดปุ่ม Ctrl + C
89 2. นำเนื้อหาที่คัดลอกวางลงในโปรแกรม Adobe Dreamweaver โดยคลิกเคอร์เซอร์ตรงตำแหน่ง ที่ต้องการวางข้อความ จากนั้นคลิกที่เมนู Edit เลือก Pate หรือกดปุ่ม Ctrl + V 3. จะได้เนื้อหาตามที่ต้องการ (ทั้งข้อความและรูปภาพ) 6. การตกแต่งด้วยภาพ 6.1 การเตรียมรูปภาพสาหรับใช้ในเว็บเพจ รูปภาพนับว่าเป็นสิ่งสำคัญอย่างมากในการสร้างเว็บเพจ ทาให้ผู้อ่านเข้าใจเรื่องราวที่นาเสนอมาก ยิ่งขึ้น และช่วยให้เว็บเพจมีสีสันสวยงาม สิ่งที่จะต้องคานึงถึง คือ ภาพควรจะต้องมีขนาดเล็ก เพื่อนำไปเรียกใช้ บนเว็บเพจได้อย่างรวดเร็ว เช่น GIF, JPEG และ PNG เพราะแต่ละแบบมีลักษณะการบีบอัดข้อมูลและสามารถ เลือกใช้ตามความเหมาะสม การนาภาพกราฟิกมาใช้ในเว็บเพจนิยมใช้ภาพ 3 ฟอร์แมต (นามสกุล) คือ .gif , .jpg และ .png ซึ่งมี รายละเอียดของภาพแต่ละชนิด ดังนี้ 1. ภาพ GIF (Graphic Interchange Format) เป็นรูปแบบไฟล์ภาพที่พัฒนาขึ้นโดย CompuSever สาหรับบีบอัดข้อมูลภาพลายเส้น กาหนดสีได้สูงสุด 256 สี มีคุณลักษณะโปร่งแสงและสร้างภาพเคลื่อนไหวได้ สามารถแสดงผลบนเบราว์เซอร์ได้ทุกชนิด มักเป็นรูปที่มีสีพื้นเป็นส่วนใหญ่ ไม่ค่อยมีการไล่สี แต่ถ้ามีการขยาย ภาพทาให้ภาพแตกได้ เช่น โลโก้ รูปการ์ตูนต่างๆ
90 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 4. คลิกแล้วเลือก Image 5. เลือกโฟลเดอร์ที่เก็บรูปภาพ 6. เลือกรูปภาพ ซึ่งจะแสดงภาพตัวอย่างด้านขวามือ
91 7. คลิกปุ่ม OK 8. ใส่คำอธิบายรูปภาพ (ไม่ใส่ก็ได้) 9. คลิกปุ่ม OK 10. รูปภาพที่เลือกจะถูกนามาแสดงในเว็บเพจ และจัดเก็บไฟล์รูปภาพในโฟลเดอร์ที่ใช้ในเว็บไซต์ 6.3 การกำหนดคุณสมบัติของรูปภาพ การกำหนดคุณสมบัติของรูปภาพ สามารถปรับรายละเอียดได้ที่ Properties Inspector 1. คลิกเลือกรูปภาพที่ต้องการ 2. ใส่ชื่อของรูปภาพ 3. แหล่งที่เก็บรูปภาพ 4. คำอธิบายรูปภาพ 5. ความสูง (H) ของรูปภาพ 6. ความกว้าง (W) ของรูปภาพ 7. ไฮเปอร์ลิงค์ของรูปภาพ 8. เปิด/แก้ไขรูปภาพด้วยโปรแกรมอื่น 9. ปรับลดความละเอียดของรูปภาพ 10. อัพเดตรูปภาพ (กรณีไม่แสดงภาพตามต้นฉบับ เฉพาะไฟล์ .PSD) 11. ตัดรูปภาพ 12. ปรับขนาดของรูปภาพ 13. ปรับค่าสี/แสงของรูปภาพ 14. ปรับความคมชัดของรูปภาพ
92 6.4 การตกแต่งภาพพื้นหลังหรือการแสดงภาพเป็นพื้นหลัง 1. คลิกที่ปุ่ม Page Properties... 2. ช่อง Category เลือก Appearance (CSS) 3. คลิกที่ปุ่ม Browse... 4. ช่อง Look in ให้เลือกโฟลเดอร์ที่เก็บไฟล์รูปภาพ 5. คลิกเลือกรูปภาพ เพื่อนาไปเป็นภาพพื้นหลัง 6. คลิกที่ปุ่ม OK 7. จะปรากฏภาพพื้นหลังในหน้าเว็บเพจ ดังรูป
93 7. การใส่ตาราง 7.1 โครงสร้างและส่วนประกอบของตาราง การสร้างตารางจะช่วยจัดหน้าเว็บเพจให้เป็นระเบียบเรียบร้อย รวมถึงการปรับแต่งค่าต่างๆ เช่น เส้น ขอบของตาราง สีพื้นหลัง ข้อความในเซลล์ การรวมหรือแยกเซลล์ เพื่อใช้ในการแสดงข้อมูล ซึ่งตาราง ประกอบด้วย 1. คอลัมน์ (Column) หรือเซลล์ในแนวตั้ง 2. แถว (Row) หรือเซลล์ในแนวนอน 3. เซลล์ (Cell) หรือช่องของตาราง 7.2 การใส่ตารางลงในเว็บเพจ การสร้างตารางมีหลายวิธี ซึ่งมีวิธีการดังนี้ วิธีที่ 1
94 วิธีที่ 2 1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการ 2. แท็บ Insert ให้เลือก Common 3. คลิกเลือก Table 4. จะปรากฏหน้าต่างของ Table โดยแบ่งออกเป็น 3 กลุ่ม ดังรูป
95 กลุ่มที่ 1 : Table size (กำหนดรายละเอียดของตาราง) - Rows : จำนวนแถว - Columns : จำนวนคอลัมน์ - Table width : ความกว้างของตาราง (หน่วยที่ใช้วัดเป็นเปอร์เซ็นต์หรือพิกเซล) - Border thickness : ความหนาของเส้นขอบตาราง - Cell padding : ระยะห่างระหว่างขอบเซลล์กับเนื้อหา - Cell spacing : ระยะห่างระหว่างเซลล์ในตาราง กลุ่มที่ 2 : Header (เลือกตำแหน่งของหัวเรื่องภายในตาราง) - None : ไม่ใช้หัวเรื่องในตาราง - Left : กำหนดให้มีหัวเรื่องทางด้านซ้าย - Top : กำหนดให้มีหัวเรื่องทางด้านบน - Both : กำหนดให้มีหัวเรื่องด้านซ้ายและด้านบน กลุ่มที่ 3 : Accessibility (กาหนดข้อมูลทั่วไปในตาราง) - Caption : กำหนดหัวข้อของตาราง - Summary : คำอธิบายกำกับตาราง 5. เมื่อกำหนดคุณสมบัติต่าง ๆ เสร็จเรียบร้อยแล้ว ได้ตารางตามที่เราต้องการ 7.3 การปรับแต่งคุณสมบัติของตาราง เมื่อเราคลิกเลือกที่ตาราง เราสามารถปรับแต่งรายละเอียดต่าง ๆ ของตารางในส่วนของ Properties Inspector ดังนี้ 1. Table : ชื่อของตาราง 2. Rows : จานวนแถว 3. Cols : จานวนคอลัมน์
96 4. w : ความกว้างของตาราง 5. Direction : เปลี่ยนทิศทางของตาราง 6. Cellpad : ระยะห่างระหว่างขอบเซลล์กับเนื้อหา 7. CellSpace : ระยะห่างระหว่างเซลล์แต่ละเซลล์ 8. Align : การจัดตาแหน่งของตาราง 9. Border : ความหนาของเส้นขอบตาราง 10. Class : กาหนดค่า CSS ให้กับตาราง 1. การเพิ่ม/ลบ (แถวหรือคอลัมน์) เมื่อเราสร้างตารางเสร็จเรียบร้อยแล้วและต้องการที่จะเพิ่ม/ลบ (แถวหรือคอลัมน์) สามารถทาได้ตาม ขั้นตอน ดังนี้ 1. คลิกเมาส์วางเคอร์เซอร์ตรงตำแหน่งของเซลล์ที่ต้องการ 2. คลิกเมาส์ปุ่มขวา จะปรากฏเมนูย่อย ให้เลือก Table 3. จะปรากฏรายการให้เลือก ดังนี้ - Insert Row : แทรกแถว - Insert Column : แทรกคอลัมน์ - Insert Rows or Columns : แทรกแถวหรือแทรกคอลัมน์ - Delete Row : ลบแถว - Delete Column : ลบคอลัมน์
97 2. การรวมเซลล์ / การแบ่งเซลล์ หากเราต้องการรวมเซลล์หลายๆ เซลล์เข้าด้วยกัน หรือต้องการแบ่งเซลล์ มีวิธีการดังนี้ 1. เลือกเซลล์ที่ต้องการรวม (ต้องเป็นเซลล์ที่ติดกัน) 2. คลิกเมาส์ปุ่มขวา จะปรากฎเมนูย่อย ให้เลือก Table 3. จะปรากฏรายการให้เลือก ดังนี้ - Merge Cells : แทรกเซลล์ - Split Cell : แบ่งเซลล์ 4. เซลล์ที่ถูกเลือกจะรวมเซลล์เข้าด้วยกัน ดังรูป หมายเหตุ กรณีแบ่งเซลล์ เมื่อคลิกที่ Split Cell จะปรากฏหน้าต่าง Split Cell ดังรูป Rows : เลือกแบ่งเซลล์ออกเป็นแถว Columns : เลือกแบ่งเซลล์ออกเป็นคอลัมน์ Number of ... : กำหนดจำนวนเซลล์ที่ต้องการจะแบ่ง