BasicWeb

รายวชิ า การพฒั นาเวบ็ ไซตท์ างธรุ กจิ เบอ้ื งตน้ Basic Business Website Development BC10203 3(2-2-5) ส่วนประกอบและคำสงั่ ต่ำงๆ ของ Adobe Dreamweaver CS5 สอนโดย อาจารยส์ ดุ ารัตน์ หนองหารพทิ กั ษ์ สาขาคอมพิวเตอรธ์ รุ กิจ คณะวิทยาการจดั การ มหาวิทยาลยั ราชภฏั อดุ รธานี Aj.Sudarat Nongharnpitak 1

หวั ขอ้ ที่จะเรยี น (Part1) • กำรกำหนดโฟลเดอร์เพอื่ เกบ็ เวบ็ ไซตท์ ีส่ รำ้ งใหม่ • กำรสร้ำงโฟลเดอร์และไฟล์ • กำรสรำ้ งหน้ำเวบ็ เพจใหม่ Aj.Sudarat Nongharnpitak 2

หวั ขอ้ ทจ่ี ะเรียน (Part2) 3 • กำรแทรกข้อควำมและกำหนดรูปแบบขอ้ ควำม – กำรคดั ลอกขอ้ ควำมจำก Word / Excel – กำรกำหนดขนำดหัวขอ้ หลกั (Heading 1-6) – กำรแทรกคอมเมนตใ์ นโคด้ – กำรแทรกเสน้ ตำมแนวนอน – กำรแทรกเคร่ืองหมำยพิเศษ – กำรแทรกวันท่ใี นหน้ำเว็บเพจ • กำรใส่หัวเรื่อง (Title) และกำรตกแต่งขอ้ ควำมในหัวเรื่อง • กำรใส่สีข้อควำมและลงิ ค์ Aj.Sudarat Nongharnpitak

กำรกำหนดโฟลเดอรเ์ พอื่ เกบ็ เวบ็ ไซตท์ ี่สรำ้ งใหม่ กำรสร้ำง Site เพอ่ื จัดเกบ็ ไฟล์ Aj.Sudarat Nongharnpitak 4

กำรสรำ้ งโฟลเดอร์และไฟล์ Aj.Sudarat Nongharnpitak 5

กิจกรรมทำ้ ยบทท่ี 4 (INCLASS ch4) ให้ นศ. สรำ้ ง Site เพอ่ื จดั เก็บไฟลเ์ ว็บไซต์ โดย 1. ตงั้ ชือ่ เวบ็ ไซต์ตำมควำมต้องกำรของนกั ศึกษำ 2. จัดเกบ็ ไฟล์ไวใ้ นตำแหน่ง D:\\รหัสนศ.\\ช่อื โฟลเดอร์เว็บไซต์ท่ีตงั้ 3. สรำ้ งโฟลเดอร์เพ่ือจัดเกบ็ ไฟล์แยกตำมประเภทต่ำง ๆ ได้แก่ โฟลเดอร์ Images, Javascript, Video 4. สร้ำงไฟล์ HTML โดยเก็บไว้ในโฟลเดอร์เว็บไซตห์ ลัก ไดแ้ ก่ ไฟลช์ อื่ index.html, main.html และอกี 3 ไฟล์ ใหส้ อดคล้องกบั ชื่อเวบ็ ไซต์ จำกนัน้ ใหส้ ร้ำงโฟลเดอร์ รหัสนกั ศึกษำ_ช่อื (ไมใ่ สน่ ำมสกุล) นำโฟลเดอรท์ สี่ ร้ำง+ไฟล์ มำวำง และอัพโหลดส่งทโี่ ฟลเดอร์สง่ งำน INCLASS_ch4 Aj.Sudarat Nongharnpitak 6

Aj.Sudarat Nongharnpitak 7

กำรแทรกข้อควำมและกำรกำหนดรปู แบบข้อควำม Aj.Sudarat Nongharnpitak 8

กำรแทรกข้อกคำวรำกมำแหลนะดกรำปู รแกบำหบนขด้อรคูปวแำบมบข้อควำม 1. ใชเ้ มาส์คลิกเลอื กท่ีขอ้ ความทต่ี อ้ งการ กาหนดเป็นรูปแบบทต่ี ้องการ ไดแ้ ก่ ตัวหน้า ตวั เอยี ง ขีดเส้นใต้ และอื่น ๆ หรอื ไปท่ี Panel Insert >> Text 2. ไปทีเ่ มนู Format >> Style >> เลอื กรูปแบบท่ีต้องการ 3. เมื่อกาหนดรปู แบบขอ้ ความแล้ว ให้สงั เกตในหนา้ Code จะมแี ทก็ ท่ี ถกู สรา้ งขน้ึ มาครอบระหว่างขอ้ ความ เชน่ ในหนา้ Design กาหนดให้คาว่า “สวัสดี” เปน็ อกั ษรเอยี ง ในหนา้ Code จะแสดงเป็น <em> สวสั ดี </em Aj.Sudarat Nongharnpitak 9

กำรแทรกขอ้กคำวรำกมำแหลนะดกรำปูรกแำบหบนขดร้อปู คแวบำบมขอ้ ควำม Aj.Sudarat Nongharnpitak 10

กำรแทรกข้อควำมและกำรกำหนดรปู แบบขอ้ ควำม http://vrisad.blogspot.com/p/blog-page_30.html Aj.Sudarat Nongharnpitak 11

กำรคดั ลอกขอ้ ควำมจำก Word / Excel Aj.Sudarat Nongharnpitak 12

กำรแทรกคอมเมนต์ในโคด้ 1. เลอื กแทรก คอมเมนต์ในหนา้ ต่าง Code 2. ไปท่ีเมนู Insert >> Comment 3. จะแสดงแท็ก <!-- --> ใหพ้ ิมพข์ อ้ ความลงไป <!--พมิ พข์ อ้ ความท่นี ่ี --> Aj.Sudarat Nongharnpitak 13

กำรแทรกเสน้ ตำมแนวนอน 1. ไปทีเ่ มนู Insert >> HTML >> Horizontal Rule จะปรากฏแท็ก ขึ้นมาในหน้าจอ Code และสามารถปรับขนาดได้ใน ส่วนของ Properties Panel Aj.Sudarat Nongharnpitak 14

กำรแทรกเครื่องหมำยพิเศษ 1. ใน Panel Insert >> Text >> Character >> เลอื กสญั ลักษณ์ เชน่ Copyright © 2015 BC, MSUDRU Aj.Sudarat Nongharnpitak 15

กำรแทรกวนั ที่ในหน้ำเวบ็ เพจ 1. ไปที่เมนู Insert >> Date >> เลือกรปู แบบวนั ท่ี Aj.Sudarat Nongharnpitak 16

Aj.Sudarat Nongharnpitak 17

Aj.Sudarat Nongharnpitak 18

Aj.Sudarat Nongharnpitak 19

กำรใส่สขี อ้ ควำมและลิงค์ กรณีกำหนดสีขอ้ ควำม “ทงั้ หนำ้ เวบ็ เพจ” 1. คลิกปุ่ม Page Properties.. ใน Panel Properties 2. ในหมวด Category ให้ผใู้ ชเ้ ลอื ก Appearance (HTML) 3. กาหนดสีข้อความใหค้ ลิกปุ่ม Text จากนัน้ ขอ้ ความจะเปลยี่ นเป็นสีเดยี วกัน ทั้งหนา้ เวบ็ เพจ Aj.Sudarat Nongharnpitak 20

กำรใส่สขี ้อควำมและลิงค์ กรณีกำหนดสขี อ้ ควำม “เฉพำะข้อควำมทเี่ ลอื ก” จะเป็นการสร้างรูปแบบข้อความโดยใช้ CSS เขา้ มาช่วยโดย 1. คลิกเลอื กข้อความท่ีต้องการใส่สี 2. ท่ี Properties Panel ให้เลือกในส่วนของ CSS 3. เลือก Edit Rule จะปรากฏหนา้ ต่างเพอ่ื สรา้ ง ชื่อรปู แบบของ CSS Aj.Sudarat Nongharnpitak 21

กำรใส่สีข้อควำมและลิงค์ กรณีกำหนดสขี ้อควำม “เฉพำะขอ้ ควำมท่ีเลือก” 3. ตง้ั ช่ือรูปแบบ และคลิกปุ่ม OK >> จะปรากฏหนา้ จอให้ต้งั คา่ รปู แบบ Aj.Sudarat Nongharnpitak 22

กำรใส่สขี ้อควำมและลงิ ค์ กรณกี ำหนดสขี ้อควำม “เฉพำะข้อควำมท่เี ลอื ก” 4. เลือกรูปแบบขอ้ ความทต่ี ้องการ แล้วคลิกที่ปุม่ OK Aj.Sudarat Nongharnpitak 23

กำรใส่สีขอ้ ควำมและลิงค์ กรณีกำหนดสขี อ้ ควำม “เฉพำะข้อควำมทเ่ี ลือก” 5. ข้อความในส่วนท่ีเลอื กจะเปลี่ยนไปตามการต้งั ค่า และปรากฏแท็กขนึ้ มา 2 สว่ นคอื 1> ส่วนของโคด้ CSS ซ่งึ จะปรากฏอยใู่ นส่วนของแท็ก <head> ดา้ นบน Aj.Sudarat Nongharnpitak 24

กำรใสส่ ีข้อควำมและลงิ ค์ กรณีกำหนดสีข้อควำม “เฉพำะข้อควำมทเี่ ลือก” 2> สว่ นของข้อความ จะมสี ่วนขยายของแท็ก <p> เพิ่มเขา้ มาในข้อความ คอื <p class=“style1\"> สวัสดี </p> (กรณที ่ีข้อความอยใู่ นแท็ก <p> อยู่แล้ว) ------------------------------------------------------------------------------------------------------------ **กรณีข้อความทตี่ ้องการเปลยี่ นส/ี รูปแบบ เป็นรูปแบบเดยี วกบั style ทเ่ี คยสรา้ งไว้แล้ว ให้ คลิกเลอื กทขี่ อ้ ความ >> เลอื ก Targeted Rule เป็น style1(ท่ีได้สรา้ งไว้) Aj.Sudarat Nongharnpitak 25

กจิ กรรมท้ำยบทที่ 4 Part2 (INCLASS ch4_2) ใหส้ ร้ำงเว็บเพจขน้ึ มำใหม่ และคดั ลอกข้อควำม \"ยนิ ดีตอ้ นรบั .....\" จำกเวบ็ ไซต์ขำยสินค้ำมำวำงในเพจ และตกแต่งขอ้ ควำม โดยให้.. 1. หวั ข้อบรรทดั แรก = Heading1 และตกแต่งให้เป็นอกั ษรเคลอ่ื นไหวใน รูปแบบท่ตี ้องกำร 2. ตกแตง่ ตัวอักษรให้สวยงำม 3. ใหเ้ ว้นบรรทัดโดยใช้แทก็ <br> จำนวน 5 ครงั้ และแทรกเสน้ คน่ั 4. พิมพร์ หัสนกั ศกึ ษำ และชื่อ-สกุล ภำยใต้แทก็ <br>บรรทัดสดุ ท้ำย แลว้ ใสล่ งิ ค์ตรง ช่ือ-สกลุ ใหล้ งิ ค์ไปท่ี Facebook ของนศ. 5. นำข้อควำมยินดีตอ้ นรบั มำใส่ใน Title โดยทำให้เปน็ อักษรเคล่ือนไหว Aj.Sudarat Nongharnpitak 26