การออกแบบและสร้างเว็บไซต์ด้วย Adobe Dreamweaver CS6

การออกแบบและสร้างเว็บไซต์ด้วย Adobe Dreamweaver CS6
อ.ดร. นัฐพงศ์ ส่งเนียม การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

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

เนื้อหา ประวัติความเป็นมาของโปรแกรม Adobe Dreamwaver CS6 รู้จักกับ Adobe Dreamweaver CS6 เริ่มต้นการใช้งานโปรแกรม Adobe Dreamwaver CS6 ส่วนประกอบของหน้าจอโปรแกรม Adobe Dreamwaver CS6 การสร้างไซต์ การสร้างเว็บเพจ การจัดเก็บไฟล์เว็บเพจ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

เนื้อหา (ต่อ) การปิดไฟล์เว็บเพจ การเปิดไฟล์เว็บเพจ การกาหนดภาษาให้กับเว็บเพจ การปรับแต่งหน้าเว็บเพจด้วยคาสั่ง CSS การทดสอบเว็บเพจกับบราวเซอร์ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

จุดประสงค์การเรียนรู้
1. บอกส่วนประกอบและหน้าที่ของเครื่องมือในโปรแกรม Adobe Dreamwaver CS6 ได้ 2. สร้างไซต์ด้วย โปรแกรม Adobe Dreamwaver CS6 ได้ 3. สร้าง จัดเก็บ เปิดและปิดเว็บเพจได้ 4. ปรับแต่งภาษาให้กับเว็บเพจได้ 5. ปรับแต่งหน้าเว็บเพจด้วยคาสั่ง CSS ได้ 6. ทดสอบเว็บเพจกับบราวเซอร์ได้ 7. มีความรับผิดชอบต่องานที่ได้รับมอบหมาย 8. เก็บอุปกรณ์การเรียนได้อย่างเรียบร้อยและถูกต้อง การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

เทคโนโลยีแบบ Client/Server
การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

 ยุคของ Web Good afternoon, lady and gentleman and welcome to this presentation. I'm very glad to see you all in this room today. The first, I would like introduce myself. My name is Sirichai Namburi. I'm studying Doctor of Philosophy in Computer Education at Department of Computer Education, King Mongkut's Institute of Technology North Bangkok. About my work,I'm a lecturer and working at Department of Computer, Faculty of Science and Technology,Yala Rajabhat University, Yala Province, Thailand Today I would like to talk about "Internet use habit in Thailand between year 2000 and 2004" I think that the Internet have more influence for our life, our family and our society. The interesting information about the Internet use, could help you make decision and select the Internet services. could help you to protect your children and your family from the hamful of internet use. and Additionally, the government can use the main point of the Internet use information from this report, to plan and support the efficiency ICT policy in the future. All the information of this presentation is derived from NECTEC or The National Electronic and Computer Technology Center which is the ICT government organization. Now, I would like to starting by saying about the the outline to present for today. Okey, Let's start with the outline presentation, look at the next slide. การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม Dr. Sirichai Namburi : Faculty of Science Technology and Agriculture : YRU : 15-Sep-2010

 ยุคของ Web Web 1.0 (World Wide Web) การเผยแพร่ข้อมูลผ่านเว็บไซต์ของ หน่วยงาน/ผู้มีความรู้เรื่อง Web Technology ในยุคแรก ๆ ของ WWW เป็นเว็บที่มีลักษณะของการสื่อสารทาง เดียว คือ เจ้าของเว็บไซต์เป็นผู้ผลิต เนื้อหาและให้ข้อมูลข่าวสาร ต้องมีเว็บมาสเตอร์ เป็นผู้ดูแลเอา เนื้อหาขึ้นเว็บไซต์ ถึงแม้ว่าจะมี เว็บบอร์ด ซึ่งผู้ที่ตั้ง กระทู้เป็นผู้ใช้ทั่วไป ก็ยังไม่นับว่า เป็น Web2.0 เพราะว่าไม่มีการจัดเก็บ อย่างเป็นระบบ มีที่อยู่แน่นอนเฉพาะ ผู้เขียนคนนั้นๆ (น่าจะหมายถึง blog) การเชื่อมโยงไปแสดงที่เว็บอื่นทำได้ ยาก Good afternoon, lady and gentleman and welcome to this presentation. I'm very glad to see you all in this room today. The first, I would like introduce myself. My name is Sirichai Namburi. I'm studying Doctor of Philosophy in Computer Education at Department of Computer Education, King Mongkut's Institute of Technology North Bangkok. About my work,I'm a lecturer and working at Department of Computer, Faculty of Science and Technology,Yala Rajabhat University, Yala Province, Thailand Today I would like to talk about "Internet use habit in Thailand between year 2000 and 2004" I think that the Internet have more influence for our life, our family and our society. The interesting information about the Internet use, could help you make decision and select the Internet services. could help you to protect your children and your family from the hamful of internet use. and Additionally, the government can use the main point of the Internet use information from this report, to plan and support the efficiency ICT policy in the future. All the information of this presentation is derived from NECTEC or The National Electronic and Computer Technology Center which is the ICT government organization. Now, I would like to starting by saying about the the outline to present for today. Okey, Let's start with the outline presentation, look at the next slide. การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม Dr. Sirichai Namburi : Faculty of Science Technology and Agriculture : YRU : 15-Sep-2010

 ยุคของ Web Web 2.0 (WWW, Social Network Web) เริ่มเป็นที่รู้จักในวงกว้าง หลังจาก งานประชุม โอไรล์ลีย์มีเดีย เว็บ 2.0 ที่จัดขึ้นในปี 2547 เป็นแพลตฟอร์มหนึ่ง ที่อยู่เหนือ การใช้งานของซอฟต์แวร์ โดยไม่ ยึดติดกับตัวซอฟต์แวร์เหมือนระบบ คอมพิวเตอร์ที่ผ่านมา โดยมีข้อมูล ที่เกิดจากผู้ใช้หลายคน มีการพัฒนารูปแบบ/วิธีการโต้ตอบ ระหว่าง ผู้ให้บริการ และผู้ใช้งาน โดยสะดวก มีลักษณะส่งเสริมให้เกิดการแบ่งปัน ข้อมูล ตัวอย่างเช่นเว็บไซต์ประเภท Blogs, Wikis, Social Sharing, Social Groups, Media Sharing, etc. Good afternoon, lady and gentleman and welcome to this presentation. I'm very glad to see you all in this room today. The first, I would like introduce myself. My name is Sirichai Namburi. I'm studying Doctor of Philosophy in Computer Education at Department of Computer Education, King Mongkut's Institute of Technology North Bangkok. About my work,I'm a lecturer and working at Department of Computer, Faculty of Science and Technology,Yala Rajabhat University, Yala Province, Thailand Today I would like to talk about "Internet use habit in Thailand between year 2000 and 2004" I think that the Internet have more influence for our life, our family and our society. The interesting information about the Internet use, could help you make decision and select the Internet services. could help you to protect your children and your family from the hamful of internet use. and Additionally, the government can use the main point of the Internet use information from this report, to plan and support the efficiency ICT policy in the future. All the information of this presentation is derived from NECTEC or The National Electronic and Computer Technology Center which is the ICT government organization. Now, I would like to starting by saying about the the outline to present for today. Okey, Let's start with the outline presentation, look at the next slide. การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม Dr. Sirichai Namburi : Faculty of Science Technology and Agriculture : YRU : 15-Sep-2010

 ยุคของ Web Web 3.0 (Semantic Web) เว็บเชิงความหมาย (Semantic Web) คือ ส่วนขยายของเว็บปัจจุบันเพื่อทำให้ การใช้ข้อมูลบนเว็บสามารถ นำมาใช้ใหม่ (Reuse)ได้ และเอื้อต่อ เครื่องจักรในการสืบค้น (Query) อย่างเป็นอัตโนมัติ ข้อมูลในเว็บปัจจุบัน ขาด โครงสร้างและเป็นเพียงชิ้นส่วนของ ข้อความ (Text) ซึ่งมนุษย์สามารถ เข้าใจความหมาย แต่เครื่องจักร ไม่สามารถเข้าใจความหมายหรือ ตีความได้ เพื่อแก้ปัญหาดังกล่าวข้างต้น จึงมี แนวคิดในการพัฒนาเว็บที่มี ความหมายเชิงเนื้อหา (เครื่องจักร สามารถประมวลความสัมพันธ์และ ตีความได้) อ่านเพิ่มเติมที่นี่… Good afternoon, lady and gentleman and welcome to this presentation. I'm very glad to see you all in this room today. The first, I would like introduce myself. My name is Sirichai Namburi. I'm studying Doctor of Philosophy in Computer Education at Department of Computer Education, King Mongkut's Institute of Technology North Bangkok. About my work,I'm a lecturer and working at Department of Computer, Faculty of Science and Technology,Yala Rajabhat University, Yala Province, Thailand Today I would like to talk about "Internet use habit in Thailand between year 2000 and 2004" I think that the Internet have more influence for our life, our family and our society. The interesting information about the Internet use, could help you make decision and select the Internet services. could help you to protect your children and your family from the hamful of internet use. and Additionally, the government can use the main point of the Internet use information from this report, to plan and support the efficiency ICT policy in the future. All the information of this presentation is derived from NECTEC or The National Electronic and Computer Technology Center which is the ICT government organization. Now, I would like to starting by saying about the the outline to present for today. Okey, Let's start with the outline presentation, look at the next slide. การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม Dr. Sirichai Namburi : Faculty of Science Technology and Agriculture : YRU : 15-Sep-2010

สิ่งที่ควรรู้ในการออกแบบและพัฒนาเว็บไซต์ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

ความรู้ที่เกี่ยวข้อง / ที่จำเป็นต้องใช้
Programming Language HTML : Hypertext Markup Language Server Side Technology : PHP , ASP.NET , JSP(Java Server Page) Client Side Technology : Java script , VB script, AJAX PHP, ASP.NET , JSP, ASP HTML, Java script การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

ความรู้ที่เกี่ยวข้อง / ที่จำเป็นต้องใช้
การใช้ซอฟต์แวร์ โปรแกรมออกแบบเว็บไซต์ Adobe Dreamweaver CS5 โปรแกรม ตกแต่งรูปภาพ Adobe Photoshop CS5 โปรแกรมสร้างกราฟิก เคลื่อนไหว Adobe Flash CS5 โปรแกรมตัดต่อ วิดีโอ Maya ฯลฯ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

ความรู้ที่เกี่ยวข้อง จำเป็น
ความรู้เกี่ยวกับศิลปะ สี การใช้สี แสง การใช้แสง ขนาด รูปร่าง การจัดวางตำแหน่ง การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

Logo ทำไมเว็บต้องมี Logo การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

Layout ความสวยงาม การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

Layout เทคนิคที่ใช้ได้แก่ Frame Table Layer การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

หลักการใช้แสง การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

จิตวิทยาเกี่ยวกับสี จิตวิทยาเกี่ยวกับสี สี นั้นมีความสำคัญอย่างยิ่งในการออกแบบเว็บไซต์ การเลือกสีให้เข้ากับเนื้อหาของเว็บไซต์ จะทำให้เว็บไซต์มีความน่าเชื่อถือยิ่งขึ้น และยังส่งผลอย่างมากกับความสวยงามของเว็บไซต์ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

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

ตัวอย่าง ความรู้สึกที่คนส่วนใหญ่มีต่อสีต่างๆ สีเหลือง แสดงถึงความสดใส ความเบิกบาน โดยเรามักจะใช้ดอกไม้สีเหลือง ในการไปเยี่ยมผู้ป่วย และแสดงความรุ่งเรืองความมั่งคั่ง และฐานันดร ศักดิ์ ในทางตะวันออกเป็นสีของกษัตริย์ จักรพรรดิของจีนใช้ฉลอง พระองค์สีเหลือง ในทางศาสนาแสดงความเจิดจ้า ปัญญา พุทธศาสนา และยังหมายถึงการเจ็บป่วย โรคระบาด ความริษยา ทรยศ หลอกลวง สีม่วง แสดงถึงพลัง ความมีอำนาจ ในสมัยอียิปต์สีม่วงแดงเป็นสีของกษัติรย์ ต่อเนื่องมาจนถึงสมัยโรมัน นอกจากนี้ สีม่วงแดงยังเป็นสีชุดของพระ สังฆราช สีม่วงเป็นสีที่มีพลังหรือการมีพลังแอบแฝงอยู่ และเป็นสีแห่ง ความผูกพัน องค์การลูกเสือโลกก็ใช้สีม่วง ส่วนสีม่วงอ่อนมักหมายถึง ความเศร้า ความผิดหวังจากความรัก การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

ประวัติความเป็นมาของโปรแกรม Adobe Dreamwaver CS6
โปรแกรม Adobe Dreamweaver CS6 เป็นโปรแกรมที่ใช้ในการสร้างเว็บ สามารถเขียน HTML CSS PHP Javascript และ ภาษาอื่นๆ อีกมากมายแม้กระทั่ง Jquery Dreamweaver ก็มี add on อีกด้วย โดยโปรแกรม Macromedia Dreamweaver ตั้งแต่เวอร์ชั่น 1-8 เจ้าของคือ บริษัท Macromedia ( ) ต่อมาเมื่อปี 2007 ได้ออก เวอร์ชั่น CS3 ในค่ายของ Adobe จนพัฒนามาเป็นเวอร์ชั่น CS6 ในปัจจุบัน โดยมีลาดับความเป็นมาดังนี้ Macromedia Dreamweaver 1 เมื่อ เดือน ธันวา 1997 เป็นรุ่นแรกของ Macromedia Dreamweaver สามารถใช้งานกับ Max OS เท่านั้น การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

Macromedia Dreamweaver 2 เมื่อ เดือน มีนา 1998 Macromedia Dreamweaver 3 เมื่อ เดือน ธันวา 1999 Macromedia Dreamweaver 3 ออก เวอร์ชั่น ย่อย UltraDev 1.0 มิถุนา 1999 Macromedia Dreamweaver 4 เดือน ธันวา 1999 และ UltraDev 4.0 เวอร์ชั่นนี้ ออกมาแข่งกับ Frontpage ของค่าย Microsoft และ มีผู้พัฒนาเว็บหลายท่านเปลี่ยนใจมาก Frontpage มาใช้ Dreamweaver ซึ่งทั้งสองโปรแกรมมีความสามารถของพอๆ กัน แต่หลังจาก เวอร์ชั่นนี้ออกมาแล้วทาง Dreamweaver สามารถใช้งานได้ดีกว่า ทาให้โปรแกรม Frontpage และ Frontpage หายไปจากนักพัฒนาเว็บ Macromedia Dreamweaver 6 MX(Dreamweaver MX) เมื่อเดือนพฤษภาคม 2002 การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

Macromedia Dreamweaver 6 MX(Dreamweaver MX) เมื่อเดือนพฤษภาคม 2002 Macromedia Dreamweaver 7 MX 2004 เมื่อเดือนกันยายน 2003 Macromedia Dreamweaver 8 ออกเมื่อเดือน กันยายน 2005 ซึ่งสามารถเขียน โค้ด CSS, php แบบมีตัวช่วย AutoComplete ทาให้ไม่ต้องจา function หรือ selector ของ css ออกรุ่น Adobe Dreamweaver CS3 เมื่อ ปี 2007 แล้วเปลี่ยนค่าไปเป็น ของ Adobe ออกรุ่น Adobe Dreamweaver CS4 เมื่อ ปี 2008 ออกรุ่น Adobe Dreamweaver CS5 เมื่อ 12 เมษายน 2010 ออกรุ่น Adobe Dreamweaver CS6 เมื่อ 12 เมษายน 2012 การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

รู้จักกับ Adobe Dreamweaver CS6
Fluid grid layout เนื่องจากการออกแบบหน้าเว็บเป็นการออกแบบหน้าจอสาหรับเครื่องคอมพิวเตอร์พีซี และเครื่องโน้ตบุ๊ก อย่างเดียว แต่ในปัจจุบันอุปกรณ์พกพาอย่าง แท็บเล็ตและมือถือที่หน้าจอมีการแสดงผลไม่มีรูปแบบตายตัว Adobe Dreamweaver CS6 ได้มีการปรับปรุงรูปแบบการทางานให้ทันกับความต้องการของโลก โดยเพิ่มเติม Fluid Grid Layout Template เพื่อให้คุณสามารถออกแบบ Website แบบ Responsive ได้สะดวกขึ้น รูปที่ 2.1 หน้าจอ เลือกการออกแบบหน้าเว็บแบบ Fluid Grid Layout ที่มา : วันที่สืบค้น : 23 มกราคม 2555. การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

รู้จักกับ Adobe Dreamweaver CS6
2. JQuery Mobile Framework updates ในเวอร์ชั่นนี้เพิ่มส่วนช่วยในการทางานกับ JQuery Mobile Framework ได้สะดวกขึ้นไปอีก โดยการนา Theme ที่ออกแบบด้วย Adobe Firework CS6 มาเลือกใช้กับ Mobile Web project เพื่อใช้ในการกาหนดไอคอนต่างๆ ให้กับ ปุุมbutton เป็นต้น การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การเปิด Adobe Dreamweaver CS6
คลิก Start เลือก Adobe Dreamweaver CS6 วิธีที่ 2 ดับบิลคลิกไอคอน ที่หน้าจอ Desktop การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

หน้าโลโก้ Adobe Dreamweaver CS6 การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

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 ดูวีดิโอสาธิตการใช้งาน การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

หน้าเริ่มต้นโปรแกรม การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การสร้างเอกสารใหม่ ไปที่เมนู File เลือก New หรือกดแป้น Ctrl + N การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การสร้างเอกสารใหม่ คลิก การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

ส่วนประกอบของ Adobe Dreamweaver CS6

แถบเมนู(Menu bar) 1. Menu bar เป็นแถบรวบรวมคำสั่งทั้งหมดของโปรแกรม - File - Edit - View - Insert - Modify - Format - Commands - Site - Windows - Help การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

2. Toolbar เป็นแถบรวบรวมคำสั่งที่ใช้งานบ่อยๆ - Code สำหรับแสดงการทำงานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคำสั่ง HTML หรือคำสั่งภาษาสคริปต์ (Script) อื่นๆ ได้ด้วย - Split สำหรับแสดงการทำงานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดยจะแสดงส่วนของคำสั่ง ไว้ด้านบนและแสดงเว็บเพจปกติไว้ ด้านล่าง - Design สำหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในบราวเซอร์ เช่น ข้อความ กราฟิก หรือออปเจ็กต์อื่นๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้ - Title สำหรับแสดงชื่อของเว็บเพจ ในส่วนของแถบหัวเรื่อง การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

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

แถบเครื่องมืออื่นๆ 4. Status bar เป็นแถบแสดงสถานะ ซึ่งประกอบด้วย 2 ส่วน คือ ทางด้านซ้ายเรียกว่า Tag Selector ใช้สำหรับแสดงคำสั่ง HTML ของส่วนประกอบในเว็บเพจที่เลือกอยู่ และทางด้านขวาเป็นส่วนที่บอกขนาดหน้าจอการแสดงผลและเวลาที่ใช้ในการดาวน์ โหลดเว็บเพจ 5. Properties Inspector เป็นส่วนที่กำหนดคุณสมบัติต่าง ๆ ในการปรับแต่งองค์ประกอบของหน้าเว็บเพจ 6. Insert Bar เป็นแถบที่ประกอบด้วยปุ่มคำสั่งที่ใช้ในการแทรกออบเจ็กต์ (องค์ประกอบต่างๆ) ลงในเว็บเพจ โดยแบ่งเป็นหมวดหมู่ซึ่งมีรายละเอียดดังนี้ (ดังรูป..หน้าถัดไป) การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

หน้าต่างออบเจ็กต์ (Objects Palette)

คลิกเมาส์ขวาที่แถบเมนู
คลิกเมาส์ขวาที่เมนู จะปรากฏเมนูย่อยสำหรับจัดการเอกสารดังรูป การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

หน้าต่าง code การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

เริ่มต้นสร้างเว็บไซต์ใน Adobe Dreamweaver CS6
เว็บไซต์ประกอบด้วยเว็บเพจและไฟล์ต่างๆ จำนวนมาก เพื่อทำให้สามารถจัดการเว็บเพจได้อย่างเป็นระเบียบและง่ายต่อการแก้ไขข้อมูล จึงควรจัดเก็บไฟล์หน้าเว็บไว้ในโฟลเดอร์แยกตามหัวข้อ ดังตัวอย่าง การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

1. คลิกที่เมนู Site 2. เลือก New Site... จากนั้นจะปรากฏหน้าต่าง Site Setup for ... (ตามชื่อไซต์) การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การตั้งชื่อ Site 4 ในที่นี้ตั้งชื่อ STOU_site เก็บไว้ใน STOU_Web 5 3. คลิกที่แท็บ Site 4. ช่อง Site Name : ตั้งชื่อเว็บไซต์ที่ต้องการ 5. ช่อง Local Site Folder : กำหนดโฟลเดอร์ที่จัดเก็บเว็บไซต์ จากนั้นคลิกที่ปุ่ม Save การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

6. คลิกที่แท็บ Advanced Settings 7. เลือก Local Info 8. ช่อง Default Images folder : กำหนดโฟลเดอร์ในการจัดเก็บรูปภาพ ต้องอยู่ในโฟลเดอร์ย่อยของโฟลเดอร์ที่จัดเก็บเว็บไซต์ (ตามข้อ 5) 9. คลิกที่ปุ่ม Save การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

จะได้หน้าต่าง site ดังรูป

ถ้าต้องการแก้ไขไซต์ที่สร้างไว้ มีวิธีการดังนี้
1. คลิกที่เมนู Site 2. เลือก Manage Site... 3. ดับเบิลคลิกที่ชื่อเว็บไซต์ 4. คลิกที่ปุ่ม Done การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

ถ้าต้องการแก้ไขไซต์ที่สร้างไว้ มีวิธีการดังนี้
3. ดับเบิลคลิกที่ชื่อเว็บไซต์ 4. คลิกที่ปุ่ม Done การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การจัดการโครงสร้าง Files
พาเนล(Panel) Files เป็นส่วนแสดงชื่อเว็บไซต์ โฟลเดอร์ สำหรับเก็บไฟล์เอกสารต่าง ๆ ของเว็บไซต์ มีวิธีการดังนี้ 1. คลิกขวาที่แท็บพาเนล Files 2. เลือก New File สำหรับสร้างไฟล์ 3. หรือ เลือก New Folder สำหรับสร้างโฟลเดอร์ 4. หรือ เลือกจัดการเกี่ยวกับไฟล์และโฟลเดอร์ในคำสั่งอื่น ๆ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การกำหนดคุณสมบัติของเว็บเพจ
ก่อนการสร้างเว็บเพจ จำเป็นต้องกำหนดคุณสมบัติพื้นฐานให้กับเว็บเพจแต่ละหน้า เพื่อความเหมาะสมในการทำงาน ซึ่งมีวิธีการดังนี้ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การกำหนดคุณสมบัติของเว็บเพจ(ต่อ……………….. )
1. คลิกที่เมนู Modify 2. เลือก Page Properties... หรือ Ctrl + J 3. หรือ คลิกที่ปุ่ม Page Properties... จะปรากฎหน้าต่าง Page Properties แบ่งรายละเอียดออกเป็น 6 หมวด ได้แก่ Appearance (CSS) กำหนดคุณสมบัติทั่ว ๆ ไปของหน้าเว็บเพจ (การกำหนดหน้าตาเว็บเพจด้วย CSS) Appearance (HTML) กำหนดคุณสมบัติทั่ว ๆ ไปของหน้าเว็บเพจ (การกำหนดหน้าตาเว็บเพจด้วย HTML) จะเหมือนกับ Appearance (CSS) Links (CSS) กำหนดคุณสมบัติพื้นฐานของการสร้างจุดเชื่อมโยงหรือลิงค์ Headings (CSS) กำหนดคุณสมบัติข้อความที่ใช้เป็นหัวเรื่องในหน้าเว็บเพจ Title/Encoding กำหนดหัวเรื่องและรูปแบบภาษาของเว็บเพจ Tracing Image กำหนดรูปภาพให้แสดงอยู่ด้านหลังของเนื้อหา แต่จะไม่ปรากฏรูปภาพเมื่อแสดงผลหน้าเบราว์เซอร์ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

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

Links (CSS) กำหนดคุณสมบัติพื้นฐานของการสร้างจุดเชื่อมโยงหรือลิงค์
Link Font : กำหนดรูปแบบของข้อความที่ใช้เป็นลิงค์ Size : กำหนดขนาดของข้อความที่ใช้เป็นลิงค์ Link Color : กำหนดสีของข้อความที่ใช้เป็นลิงค์ Rollover links : กำหนดสีของข้อความลิงค์ เมื่อถูกเมาส์ชี้ Visited links : กำหนดสีของข้อความลิงค์ เมื่อถูกเมาส์คลิกไปแล้ว Active links : กำหนดสีของข้อความลิงค์ เมื่อถูกเมาส์คลิก erline Style :กำหนดรูปแบบการขีดเส้นใต้ของข้อความลิงค์ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

Headings (CSS) กำหนดคุณสมบัติข้อความที่ใช้เป็นหัวเรื่องในหน้าเว็บเพจ
Heading font : กำหนดรูปแบบตัวอักษรของหัวข้อหรือหัวเรื่อง Heading 1-6 : กำหนดขนาดและสีตัวอักษรของหัวข้อหรือหัวเรื่อง การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

Title/Encoding กำหนดหัวเรื่องและรูปแบบภาษาของเว็บเพจ
Document Type(DTD) : กำหนดประเภทของหน้าเว็บเพจ Encoding : กำหนดภาษาที่จะใช้ในเว็บเพจ (นิยมกำหนดเป็น Unicode (UTF-8) ในการแสดงข้อความบนหน้าเว็บเพจเป็นภาษาไทย) การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

Tracing Image กำหนดรูปภาพให้แสดงอยู่ด้านหลังของเนื้อหา แต่จะไม่ปรากฏรูปภาพเมื่อแสดงผลหน้าเบราว์เซอร์ Tracing image : กำหนดไฟล์ภาพที่จะใช้เป็นแบบ Transparency : ปรับแต่งความโปร่งใสของภาพ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การสร้างหน้าเว็บเพจใหม่
การสร้างหน้าเว็บเพจใหม่ (เว็บเพจเปล่า) มีวิธีการดังนี้ 1. คลิกที่เมนู File 2. เลือก New... การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การสร้างหน้าเว็บเพจใหม่ (ต่อ..)
3. คลิกที่แท็บ Blank Page 4. ช่อง Page Type : ประเภทของเว็บเพจให้เลือก HTML 5. ช่อง Layout : รูปแบบโครงสร้างให้เลือก <none> จากนั้นคลิกที่ปุ่ม Create 6. จะปรากฏหน้าเว็บเพจเปล่า ดังรูป การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การสร้างหน้าเว็บเพจใหม่ (ต่อ..)
จะได้หน้าต่างเว็บเพจว่างเปล่าดังรูป การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การบันทึกไฟล์เว็บเพจ
เมื่อสร้างเว็บเพจได้เสร็จเรียบร้อยแล้ว ให้ทำการบันทึกไฟล์เว็บเพจ ซึ่งมีวิธีการดังนี้ 1. คลิกที่เมนู File 2. เลือก Save... หรือ Save As... การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การบันทึกไฟล์เว็บเพจ(ต่อ..)
3. ช่อง Save in ให้เลือกตำแหน่งเก็บไฟล์เว็บเพจ 4. ช่อง File name ให้ตั้งชื่อไฟล์เว็บเพจที่ต้องการบันทึก 5. คลิกที่ปุ่ม Save เพื่อบันทึกไฟล์ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การเปิดเว็บเพจเดิม การเปิดเว็บเพจเดิมที่เคยสร้าง เพื่อปรับปรุงหรือแก้ไขเนื้อหา มีวิธีการดังนี้ 1. คลิกที่เมนู File 2. เลือก Open... การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การเปิดเว็บเพจเดิม(ต่อ)
3. เข้าโฟลเดอร์แล้วเลือกไฟล์เว็บเพจที่ต้องการ 4. คลิกที่ปุ่ม Open การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การทดสอบเว็บเพจผ่านเบราว์เซอร์
เมื่อสร้างเว็บเพจได้ตามต้องการแล้วให้เปิดดูหน้าเว็บ เพื่อทดสอบเว็บเพจผ่านเบราว์เซอร์ มีวิธีการดังนี้ 1. คลิกที่ปุ่ม Preview/Debug in browser 2. เลือกโปรแกรมสำหรับการแสดงผลหน้าเว็บ เช่น Firefox, IExplore, Chrome 3. หน้าเว็บเพจจะแสดงขึ้นมาด้วยโปรแกรม Web Browser หรือ กดแป้น F12 การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

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

การตกแต่งและจัดรูปแบบให้ข้อความ
เมื่อพิมพ์ข้อความลงในเว็บเพจแล้ว การเลือกข้อความ เพื่อจัดการกับข้อความนั้น ๆ เช่น กำหนดรูปแบบของตัวอักษร การลบ คัดลอก ย้าย ฯลฯ มีรายละเอียดดังนี้ 1. การเลือกข้อความ - เลือกข้อความเฉพาะส่วนที่ต้องการ 1. คลิกเมาส์วางเคอร์เซอร์หน้าข้อความและลากเมาส์ไปจนถึงคำสุดท้าย แล้วปล่อยเมาส์ 2. บริเวณเมาส์ลากผ่านจะมีแถบสีดำขึ้นมา การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การทำตัวหนา Bold 1. ลากเมาส์คลุมข้อความที่ต้องการ 2. คลิกเลือก B ในหน้าต่าง Properties การตกแต่งและจัดรูปแบบให้ข้อความ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การทำตัวเอียง Italic 1. ลากเมาส์คลุมข้อความที่ต้องการ 2. คลิกเลือก I ในหน้าต่าง Properties การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การแทรกสัญลักษณ์พิเศษลงในเว็บเพจ
การแทรกสัญลักษณ์พิเศษลงในเว็บเพจ เช่น สกุลเงิน หรือสัญลักษณ์แสดงลิขสิทธิ์ต่าง ๆ มีวิธีการดังนี้ 1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการวางสัญลักษณ์ 2. คลิกที่เมนู Window แล้วเลือก Insert (สังเกตต้องมีเครื่องหมายถูก อยู่ด้านหน้า Insert) 3. Insert Panel เลือก Text 4. คลิกที่ปุ่ม Characters แล้วเลือกสัญลักษณ์ที่ต้องการ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การเปลี่ยนสีพื้นหลัง

การเปลี่ยนพื้นหลังให้เป็นรูปภาพ

การใส่ชื่อให้กับเว็บเพจ (webpage)

การแทรกเส้นคั่น 1. Insert > Horizontal Rules
2. กำหนดรายละเอียดในหน้าต่าง Properties

การแทรก E-mail Link 1. Insert > E-mail Link 2. กำหนดรายละเอียด
3. กด OK

การแทรกตาราง (Table) 1. Insert > Table 2. กำหนดรายละเอียด 3. กด OK

การแทรกรูปภาพ (Image)
1. Insert > Insert Image 2. เลือกรูป 3. กด OK

ประเภทของรูปภาพที่สามารถใช้ได้ใน Adobe Dreamweaver CS6
รูปภาพที่สามารถอ่านได้บนเว็บ มี 4 ประเภท .bmp แสดงสีได้ละเอียด ไฟล์ขนาดใหญ่มาก (ไม่นิยม) .jpg แสดงสีได้ 16.7 ล้านสี เหมาะกับภาพถ่าย , ภาพสแกน .gif แสดงสีได้ 256 สี เหมาะกับภาพการ์ตูน , ภาพเคลื่อนไหว .png แสดงสีได้ 16.7 ล้านสี ขนาดเล็กเหมือน gif (ยังไม่นิยม)

การสร้าง Link จากตัวอักษร
พิมพ์ข้อความที่ต้องการเชื่อมโยง ทำการ hilight ข้อความที่ต้องการเชื่อมโยง พิมพ์ URL ที่ต้องการจะทำ Link ไป เมื่อพิมพ์ URL เสร็จแล้วให้กดแป้น Enter พิมพ์ URL ที่ต้องการจะทำ Link ไป

วิธีการสร้าง Link แบบ map
ใส่รูปภาพที่ต้องการสร้างลิ้งก์ คลิ๊กที่รูปภาพ เลือกเครื่องมือ map จากคุณสมบัติของรูปภาพ

กำหนดพื้นที่ที่ต้องการสร้างลิ้งก์
ใส่ไฟล์หรือส่วนที่ต้องการลิ้งก์ลง ลิ้งในไฟล์เดียวกัน ลิ้งก์ไปไฟล์อื่น ลิ้งออกเว็บไซต์ข้างนอก

เลเยอร์ Layer Layer เปรียบเสมือนแผ่นใส่ ที่สามารถนำมาวางเรียงซ้อนกันได้ layer

Layer 2 Layer 1

ที่แถบเครื่องมือ ให้เลือก Layout
วิธีการสร้าง layer ที่แถบเครื่องมือ ให้เลือก Layout เลือก draw AP Div

สถานะของเม๊าส์จะเปลี่ยนจะเปลี่ยนเป็น +
นำมากำหนดพื้นที่วาดกรอบสี่เหลี่ยมในส่วนออกแบบ

คุณสมบัติของ layer

สิ่งที่สามารถนำมาใส่ใน layer
ข้อความ ตาราง รูปภาพ สื่ออื่นๆ

Rollover Image เป็นเทคนิคที่ใช้กันแพร่หลายให้ทั้งความสวยงามและความตื่นตาตื่นใจกับผู้ชมได้เป็นอย่างดี ในสมัยก่อนต้องมีความรู้ด้านภาษา JavaScript ถึงจะทำได้ Insert > Common > Rollover Image ใส่ชื่อภาพ เลือกไฟล์ต้นฉบับ เลือกไฟล์ที่ให้ Load รูปภาพล่วงหน้า เชื่อมโยงไปที่ใด

การแทรกคำสั่ง Marquee

การใช้ Web Font Manager ใน Dreamweaver CS6
วันนี้ผมข้อพูดถึงขั้นตอนการใช้ Web Font Manager หนึ่งใน feature ใหม่ๆร้อนแรงของ Dreamweaver CS6 เนื่องจากบ้านเราตอนนี้เริ่มตื่นตัวเรื่อง Web Font Manager กันมาก ถ้าหากคุณเข้าเว็บไซต์ แนว HTML5 +CSS3 หน้าโล่งๆ ขาวๆ คลีนๆ ฟอนต์แปลกๆ ที่แสดงบนหน้าเว็บ พอเอาเม้าส์ (Cursor) ไปแตะหรือลากคลุมจะพบว่ามันไม่ใช่รูปภาพ แต่มันเป็น Font สวยๆ แปลกตาออกไปจากเว็บธรรมดาหรือเว็บแบบเดิมที่คุ้นเคยกัน จะทำให้เว็บของคุณดูเก๋ น้ำหนักเบา แบบเท็กซ์ ไร้กราฟฟิคมาทำให้หน้าเว็บคุณแสดงผลช้า (จะแสดงเฉพาะ Browser ใหม่ๆ ที่หนับหนุน เล่น Chrome, Firefox จะเห็นผลชัด ในวงการ Web Font Manager เขาเรียกว่าเป็นการ “ฝังฟ้อนท์” ลงบนเว็บซึ่งจะทำได้เฉพาะ CSS3 เท่านั้น แต่ไม่ใช่ว่าอยู่ๆ จะเอาฟอนต์ใน Web Font Manager ใน เครื่องอัพขึ้น Server แล้วเรียกมาใช้ได้ มันต้องมีกระบวนการแปลงให้เข้ากับมาตรฐานเว็บก่อน ซึ่งจะมีเว็บไซต์ที่สามารถอัพโหลด Font ขึ้นไป Convert ได้เลยไม่ยาก การใช้ Web Font Manager ใน Dreamweaver CS6

เว็บที่ใช้ Convert font หลัง Convert เราจะได้ฟ้อนเพิ่มมาในนามสกุลต่างๆ เพื่อให้สามารถแสดงผลได้ในหลาย Browser (ที่สนับสนุน CSS3 แนะนำ Chrome และ Firefox) การใช้ Web Font Manager ใน Dreamweaver CS6

ตอนนี้เรามาดูความหมายของนามสกุลฟอนต์ ชนิดต่างๆ กัน TTF : ไฟล์ฟ้อนที่ไม่แสดงใน IE และ iPhone (Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome ) EOT : แสดงใน IE อย่างเดียว (Internet Explorer 4+) WOFF (Web Open Font Format) : ฟ้อนสำหรับ Firefox 3.6+, Internet Explorer 9+, Chrome 5+ SVG : ฟ้อนสำหรับแสดงใน iPad and iPhone ทีนี้ เรามาทดสอบกันดีกว่า ด้วยภาษาไทยของเรา และแน่นอน ผมก็ลองไปหาฟ้อนถูกลิขสิทธิ์มาสักฟ้อน ที่ไหนดีล่ะ ใน ของ Free สไตล์ไทยๆ เพียบเลย การใช้ Web Font Manager ใน Dreamweaver CS6

ขออนุญาตแนะนำ Font Free จาก มหาวิทยาลัยขอนแก่น ซึ่งเป็นฟอนต์ที่มีเอกลักษณ์ดี การใช้ Web Font Manager ใน Dreamweaver CS6

Step 1 : คลิก Open

Step 2 : กำหนดชนิด Web page เป็น HTML5

Step 3 : ลองพิมพ์ภาษาไทยดูครับ

Step 4 : คลิกที่ Modify > Web Fonts
(ใหม่ล่าสุดมีเฉพาะใน CS6 เท่านั้น)

ขอบคุณแหล่งที่มา เอกสารประกอบการสอน วิชา การสร้างเว็บเพจ ( ) หลักสูตรประกาศนียบัตรวิชาชีพ (ปวช.) พ.ศ (ปรับปรุง พ.ศ. 2546) หน่วยที่ 2 เริ่มต้นการพัฒนาเว็บเพจ การออกแบบและพัฒนาเว็บไซต์โดย อ.ดร. นัฐพงศ์ ส่งเนียม

การออกแบบและสร้างเว็บไซต์ด้วย Adobe Dreamweaver CS6

งานนำเสนอที่คล้ายกัน

งานนำเสนอเรื่อง: "การออกแบบและสร้างเว็บไซต์ด้วย Adobe Dreamweaver CS6"— ใบสำเนางานนำเสนอ:

งานนำเสนอที่คล้ายกัน

เรื่องโครงการ

การติดต่อกลับ

เข้าสู่ระบบ

ลงทะเบียนผ่านเครือข่ายสังคม:

การออกแบบและสร้างเว็บไซต์ด้วย Adobe Dreamweaver CS6

งานนำเสนอที่คล้ายกัน

งานนำเสนอเรื่อง: "การออกแบบและสร้างเว็บไซต์ด้วย Adobe Dreamweaver CS6"— ใบสำเนางานนำเสนอ:

งานนำเสนอที่คล้ายกัน

เรื่องโครงการ

การติดต่อกลับ