เอกสารประกอบการเรียน

เรื่อง

การสร้างเว็บไซต์ด้วย Dreamweaver CS6

โดย

ครูสุนทร ยี่สุ้น

โรงเรียนธิดานุเคราะห์ อ าเภอหาดใหญ่ จังหวัดสงขลา

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:admin@dkd.ac.th

8.5 การเชื่อมโยงเพื่อดาวน์โหลด

การเชื่อมโยงเพื่อดาวน์โหลดมีจุดประสงค์ เพื่อต้องการเชื่อมโยงไปยังแฟ้มข้อมูล เช่น ไฟล์รูปภาพ ไฟล์เอกสาร หรือไฟล์อ่ืน ๆ มีวิธีการดังนี้

47

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

3. จะปรากฏหน้าต่าง Select File ให้เลือกโฟลเดอร์ที่เก็บไฟล์ 4. เลือกไฟล์ที่ต้องการ 5. คลิกที่ปุ่ม OK

----------------------------------------------------

อ้างอิงจาก : https://sites.google.com/site/nur1910200065246/hna-raek