การพัฒนาเว็บไซต์ทางธุรกิจ รหัสวิชา 30204-2103

หน่วยการเรียนที่ 1 การทางานของระบบเวบ็ เพจ การสร้างเวบ็ เพจ เพ่ือนาผลงานไปแสดงผลในอินเทอร์เน็ต นกั เรียนจึงตอ้ งมีความรู้ และความ เขา้ ใจการทางานของระบบเวบ็ เพจ ก่อนวา่ เราสร้างงานไปใชใ้ นส่วนใดของระบบ และจะแสดงผลได้ อยา่ งไรมีหวั ขอ้ ดงั น้ี 1.ความรู้พ้ืนฐานเกี่ยวกบั อินเทอร์เน็ต อินเทอร์เน็ต (Internet) เป็ นระบบเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่ครอบคลุมไปทว่ั โลกการนา เครือข่ายระดับแวนหลาย ๆ เครือข่ายมารวมเขา้ ดว้ ยกนั เพ่ืออานวยความสะดวกในการให้บริการข้อมูล ข่าวสาร Internet เป็นคายอ่ ของ Inter connection network หมายถึงเครือข่ายคอมพวิ เตอร์ท่ีใหญ่ที่สุดในโลก การทางานของอินเทอร์เน็ตจะอยู่ภายใตก้ ฎมาตรฐานหรือโปรโตคอลเดียวกนั ทวั่ โลก 3 มาตรฐาน คือ อินเทอร์เน็ตโปรโตคอล (Internet Protocol:IP) ซิมเปิ ลเมลท์ รานซ์เฟอร์โปรโตคอล (Simple Mail Transfer Protocol:SMTP) และ โดเมนเนมซีสเต็ม(Doman Name System:DNS) ทาให้ เคร่ืองคอมพิวเตอร์ และ อปุ กรณ์ที่ใชเ้ ช่ือมตอ่ เขา้ ระบบทุกระบบสามารถติดตอ่ รับ-ส่งขอ้ มูลกนั ได้ การแสดงขอ้ มลู ขา่ วสาร สารสนเทศตา่ ง ๆ ในเครือข่ายอินเทอร์เน็ตท่ีแสดงทางจอคอมพิวเตอร์หรือ อปุ กรณ์แสดงผลอ่ืน ๆ เช่น โทรศพั ทม์ ือถือ แฟกซ์ ฯลฯ เป็นขอ้ มูลเอกสารอิเลก็ ทรอนิกส์ ที่อาจมีท้งั ขอ้ มูล ท่ีเป็นขอ้ ความ รูปภาพ เสียง หรือวิดีโอ เราเรียกช่ือเอกสารอิเล็กทรอนิกส์น้ีวา่ เอกสารเวบ็ โดยจะ เรียก ส้ัน ๆ วา่ “เวบ็ เพจ” ดว้ ยเหตุท่ีเวบ็ เพจเหลา่ น้ีตอ้ งนาไปแสดงในอินเทอร์เน็ต ที่ผชู้ มทว่ั ท้งั โลกสามารถเขา้ ชม ได้ อีกท้งั ตอ้ งมี ขอ้ ความ รูปภาพ เสียง วิดีโอ นอกจากน้ียงั ตอ้ งสามารถติดต่อสื่อสารระหว่างกนั ไดอ้ ีกดว้ ย การสร้างหนา้ เวบ็ เพจจึงตอ้ งใชค้ วามรู้ ความสามารถมากกว่าการสร้างหนา้ เอกสารธรรมดาทว่ั ไปและการที่ มีความตอ้ งการใชง้ านมาก การสร้างค่อนขา้ งยาก อาชีพการสร้างเว็บจึงเป็นอาชีพ ท่ีสร้างรายไดส้ ูงจึงเป็น อาชีพท่ีน่าเรียนรู้ท่ีสาคญั อาชีพหน่ึงในโลกไอทียคุ ปัจจุบนั 1.1 ประวตั ิความเป็นมาของอินเทอร์เนต็ อินเทอร์เน็ตเป็นเครือขา่ ยคอมพิวเตอร์ ท่ีเร่ิมก่อต้งั โดยกระทรวงกลาโหมสหรัฐอเมริการวมกบั มหา วิยาลยั ในมลรัฐแคลิฟอร์เนีย ประมาณปี ค.ศ. 1969(พ.ศ.2512) สาเหตุสาคญั เน่ืองมาจากระหว่างน้ันมี สงครามเยน็ ระหว่างฝ่ ายคอมมิวนิสต์นาโดยรัสเซีย กบั ฝ่ ายเสรีประชาธิปไตยนาโดยสหรัฐอเมริกา โดยแต่ ละฝ่ายต่างระวงั ขีปนาวธุ ท่ีอาจยงิ ถลมจุดยุทธศาสตร์ สหรัฐฯ กลวั วาหากศนู ยค์ วบคุมคอมพิวเตอร์ถกู ทาลาย จะทาใหข้ อ้ มูลเสียหายจึงคิดสร้างศูนยค์ อมพิวเตอร์ออกเป็นหลายจุดและสามารถเชื่อมโยงขอ้ มูลเขา้ หากนั ไดท้ ้งั หมด หากศูนยค์ อมพิวเตอร์ใดถูกทาลาย ก็สามารถใชศ้ ูนยค์ อมพิวเตอร์อื่นซ่ึงมีขอ้ มูลเหมือนกนั ไดจ้ ึง

ได้มอบหมายให้มหาวิยาลัยในมลรัฐแคลิฟอร์เนีย 4 แห่งรวมกันทาการวิจัยทดลองสร้างเครื อข่าย คอมพิวเตอร์สามารถเชื่อมโยงข้อมูลเข้าหากัน โดยให้หน่วย งานวิจัยทางทหารช่ือ อาร์ปา ( ARPA : Advanced Research Project Agency ) เป็นผรู้ ับผดิ ชอบใชช้ ่ือใหม่วา่ ARPAnet (Advanced Research Project Agency Network) เม่ือโครงการทดลองสาเร็จ โครงการARPAnetจึงเปล่ียนชื่อใหม่เป็ น DARPAnet ถือ เป็นเครือข่ายท่ีใชง้ านจริง มหาวทิ ยาลยั ตา่ ง ๆ ในสหรัฐอเมริกาไดข้ อเขา้ รวมโครงการและขอเชื่อมต่อระบบ คอมพิวเตอร์เขา้ กับเครือข่าย DAPAnet เพ่ือใช้ในการศึกษาและวิจยั มากข้ึน ในปี ค.ศ.1975 (พ.ศ.2518) DARPAnet ได้โอนหน้าท่ีรับผิดชอบโดยตรงให้แก่ หน่วยการส่ือสารของกองทัพสหรัฐ (Defense Communications Agencyปัจจุบนั คอื Defense Information’s Systems Agency) เมื่อเครือข่ายขยายใหญมาก ทาให้เกิดปัญหาความปลอดภยั ในปี ค.ศ.1983ทางการทหารของสหรัฐอเมริกาจึงแยกเครือข่ายเฉพาะของ กองทพั ออกมาบริหาร โครงการ DARPAnet จึงแบง่ เป็น 2 เครือข่ายคือ ดา้ นงานวิจยั ใชช้ ื่อ ดาร์ปาเน็ต สวน เครือขายของกองทพั ใชช้ ่ือ มิลเน็ต (MILNET: Military Network) และเพื่อกาหนดมาตรฐานการสร้างขอ้ มูล สารสนเทศต่างๆ ให้ทุก เครือข่ายสามารถรับ-สงข้อมูลกนได้ใน ค.ศ.1983 (พ.ศ.2526) DARPAnet ได้ ประกาศใช้ โปรโตคอล TCP/IP (Transmission Control Protocol/Internet Protocol) เป็ นมาตรฐานการ สื่อสารขอ้ มลู ในอินเทอร์เนต็ DARPAnet ไดท้ าหน้าท่ีรับผิดชอบดูแลระบบอินเทอร์เน็ตเร่ือยมาจนถึง ค.ศ.1980 (พ.ศ.2533) จึงให้มูลนิธิ วิทยาศาสตร์แห่งชาติ (National Science Foundation - NSF) เขา้ มาดูแลแทนรวม กบั อีกหลายหน่วยงาน นับต้งั แต่น้ันมาไดม้ ีเครือข่ายย่อยของสถาบนั และองคก์ รตางๆ ท้งั ในประเทศสหรัฐอเมริกาและประเทศ ต่างๆ ท่ีมีความสัมพนั ธ์ เขา้ มาเชื่อมต่อเพิ่มข้ึนไปเรื่อย ๆ ความตอ้ งการใชอ้ ินเทอร์เน็ตได้เพิ่มข้ึนอย่าง รวดเร็วจนปัจจุบนั เครือข่ายอินเทอร์เน็ตได้ครอบคลุมไปทว่ั โลกในการควบคุมจานวนใช้หมายเลขไอพี ประจาเครื่องท่ีไมซ้ากันซ่ึงสหรัฐอมริกาจะเป็ นผูค้ วบคุมให้เท่าน้ัน การท่ี \"ไอพี\" หรือ อินเทอร์เน็ต โปรโตคอล เป็ นสวนที่ใชค้ วบคุมเครื่องคอมพิวเตอร์ในระบบและเป็ นมาตรฐานการเชื่อมต่อสาคัญของ เครือขา่ ยอินเทอร์เนต็ จึงใชช้ ื่อเรียกเครือขายน้ีแบบยอ่ วา่ \"อินเทอร์เนต็ \" มาจนปัจจุบนั รูปที่ 1.1 แสดงเครือขา่ ยอินเทอร์เน็ต

1.2 อินเทอร์เน็ตในประเทศไทย ประเทศไทยมีการติดต่อใชง้ านอินเทอร์เน็ตต้งั แต่ปี พ.ศ.2530 ในลกั ษณะการใชบ้ ริการจดหมาย อิเล็กทรอนิกส์หรืออีเมล์ เป็ นการติดต่อระหว่างมหาวิทยาลยั สงขลานครินทร์ วิทยาเขตหาดใหญ่ (PSU) และสถาบนั เทคโนโลยีแห่งเอเชียหรือสถาบนั เอไอที (AIT) การติดตออินเทอร์เน็ตของท้งั สองสถาบนั เป็ น การใชบ้ ริการจดหมายอิเล็กทรอนิกส์ โดยความรวมมือกบั ประเทศออสเตรเลีย ตามโครงการ IDP ซ่ึงเป็ น การติดตอเชื่อมโยงเครือข่ายดว้ ยสายโทรศพั ท์ จนกระทง่ั ปี พ.ศ.2531 มหาวิทยาลยั สงขลานครินทร์วิทยา เขตหาดใหญ่ ได้ยื่นขอท่ีอยูอินเทอร์เน็ต (Url) ในประเทศไทย และได้รับท่ีอยู่อินเทอร์เน็ตใช้ชื่อว่า Sritrang.psu.th ซ่ึงนบั วาเป็น Url แห่งแรกของประเทศไทย ตอมาปี พ.ศ.2534 บริษทั DEC (Thailand) จากดั ไดข้ อ Url เพ่ือใชใ้ นกิจจกรรมของบริษทั และไดร้ ับ Url เป็น dect.co.th ถือเป็นการใชใ้ นภาคธุรกิจรายแรก ปี พ.ศ.2535 นบั วา่ เป็นปี ท่ีอินเทอร์เน็ตเขา้ มาในประเทศไทยอย่างเตม็ ตวั กล่าวคือจุฬาลงกรณ์มหาวิทยาลยั ไดจ้ ดั ต้งั เครือข่ายคอมพิวเตอร์ข้นึ และไดเ้ ช่าสายลีสไลน์ (leased line) ซ่ึงเป็นสายความเร็วสูงเพอื่ เช่ือมต่อกบั อินเทอร์เน็ต โดยเช่ือมต่อเขา้ กบั เครือข่าย ยูยูเน็ต (UUNET) ของบริษทั ยูยูเน็ตเทคโนโลยีจากด (UUNET Technologies Co., Ltd.) ตงั อยทู ่ีมลรัฐเวอร์จิเนียประเทศสหรัฐอเมริกา ต้งั ชื่อเครือขา่ ยวา่ จุฬาเน็ต (ChulaNet) มีสถาบนั การศึกษาขอเชื่อมตอเครือข่ายอินเทอร์เน็ตผ่านจุฬาลงกรณ์มหาวิทยาลยั ไดแ้ ก่ สถาบนั เอไอที มหาวทิ ยาลยั มหิดลมหาวทิ ยาลยั เชียงใหม่ สถาบนั เทคโนโลยพี ระจอมเกลา้ วิทยาเขตเจา้ คุณทหารลาดกระบงั และมหาวิทยาลยั อสั สัมชญั บริหารธุรกจ ใชช้ ่ือเครือข่ายน้ีว่าเครือข่าย\"ไทยเน็ต\" (THAInet) ปัจจุบนั เครือ ขายไทยเน็ตประกอบดว้ ยสถาบนั การศึกษาเพียง 4 แห่งเท่าน้ันเนื่องจากส่วนใหญ่ยา้ ยการเชื่อมโยงมาท่ี เนคเทค (NECTEC) เครือข่ายไทยเน็ตนับเป็ นเครื อข่ายท่ีมีเกตเวย์ (gateway) หรือประตูสู่เครื อข่าย อินเทอร์เนต็ เป็นแห่งแรกของประเทศไทย ปี พ.ศ.2535 เนคเทคได้จดั ต้งั กลุ่มจดหมายอิเล็กทรอนิกส์เพ่ือ การศึกษาและวิจยั โดยมีชื่อวา NWG : NECTEC E-mail Working Groupไดจ้ ดั ต้งั เครือข่ายชื่อวา ไทยสาร เครือขา่ ยไทยสารไดพ้ ฒั นาอยางตอเน่ืองการที่มีความตอ้ งการ ในการใชอ้ ินเทอร์เน็ตมากข้ึน ในปี พ.ศ. 2537 การสื่อสารแห่งประเทศไทย (กสท.) ซ่ึงดูแลการให้บริการช่องทางการส่งข้อมูลในระบบเครื อข่าย (Bandwidth) จึงไดร้ ่วมมือกับบริษทั เอกชนเปิ ดบริการอินเทอร์เน็ตให้แก่บุคคลและผูส้ นใจทว่ั ไป ต่อมามี การใหส้ ัมปทานแก่บริษทั เพ่ือให้รับช่วงการบริการดูแลหมายเลข IP ข้ึนบริษทั ผใู้ ห้บริการอินเทอร์เน็ตเชิง พาณิชย์ เรียกวา ISP (Internet Service Provider) ปัจจุบนั ประเทศไทยมีผใู้ หบ้ ริการอินเทอร์เน็ตเชิงพาณิชย์ จานวน 18 แห่ ง คือ A-Net, Asia Access, AsiaNet, CS-Coms, CWN, FarEast, IDN, JI-Net, Internet Thailand, KSC, Line Thai, Loxinfo, Samart, SGA, WorldNet, EZNet, RoyNet, และ CWT และศนู ยบ์ ริการ อินเทอร์เน็ตเพื่อการศึกษาและวิจยั จานวน 5 ศูนย์ ไดแ้ ก่ Scoolet, UniNet, PubNet, ThaiSarn และ GITS จากสถิติที่เนคเทคสารวจ ในปี พ.ศ.2547 มีผใู้ ชป้ ระมาณ 6.9 ลา้ นในเดือนกนยายน 2551 มีถึง 13.4 ลา้ น คน (ท่ีมา : http://www.bloggang.com 13 ต.ค. 2551) นับว่าเพิ่มข้ึนเร็วมาก จานวนความต้องการใช้ อินเทอร์เนต็ ถือเป็นตวั ช้ีใหเ้ ห็นการพฒั นาเทคโนโลยกี ารสื่อสาร

2.การบริการตา่ ง ๆ ในอินเทอร์เนต็ การท่ีอินเทอร์เน็ต เป็ นเครือข่ายคอมพิวเตอร์ท่ีเชื่อมต่อกันทวั่ โลกสามารถใชป้ ระโยชน์ ท้งั การ พฒั นาประเทศ สังคม เศรษฐกิจ การศึกษา ดว้ ยเหตุน้ีจึงมีการคิดสร้างโปรแกรมการให้บริการ ในรูปแบบ ตา่ ง ๆ ข้นึ หลากหลายรูปแบบ เพอ่ื สนองความตอ้ งการของผใู้ ชแ้ ละประโยชนท์ างธุรกิจ 2.1 รูปแบบการบริการบนระบบอินเทอร์เน็ต แบง่ ออกเป็น 5 ลกั ษณะ คือ 2.1.1 บริการดา้ นการรับส่งข่าวสารและแสดงความคดิ เห็น การรับส่งข่าวสารและแสดงความคิดเห็นเป็ นบริ การท่ีได้รับความนิยมมากท่ีสุดในระบบ อินเทอร์เน็ต จะมีเคร่ืองมือในการรับส่งข่าวสาร และแสดงความคิดเห็นระหวา่ งผใู้ ช้บริการอินเทอร์เน็ตมี หลายวิธีดงั น้ี ไปรษณียอ์ ิเล็กทรอนิกส์ (E-mail) เป็ นการให้บริการพ้ืนท่ีรับ-ส่งจดหมายหรือขอ้ ความมีท้งั แบบจดั ต้งั Mail-Server ข้ึนเฉพาะกลุม ผูใ้ ชต้ อ้ งเสียค่าใช้จ่าย และแบบให้บริการพ้ืนที่ฟรี เจา้ ของServerจะ เก็บเงิน จากค่าโฆษณา ซ่ึงการใชบ้ ริการ E-Mail ส่วนใหญ่จะใชบ้ ริการแบบฟรีซ่ึงนอกจากไม่เสียเงินแลว้ อาจเพราะมาตรฐานการดูแล และความเร็วค่อนขา้ งสูง ผูร้ ับจะไดร้ ับขอ้ มูลในเวลาเกือบทนั ทีที่ส่งไปผู้ ให้บริ การ E-Mail ฟรี ของต่างประเทศ เช่น hotmail หรื อ yahoo mail ในประเทศไทย thaimail.com chaiyo.com E-Mail ฟรีเหล่านีจะให้บริการไปเรื่อย ๆ การหมดอายุหรือตดั การใช้ จะเกิดไดเ้ ม่ือผูใ้ ชเ้ ลิกใช้ เป็นเวลานานเกินไปการขอใช้ E-Mail กบั ผใู้ ห้บริการฟรี ผใู้ ชจ้ ะตอ้ งสมคั รเป็นสมาชิกขอใชบ้ ริการ และจะ ไดร้ ับ user id และ password ประจาตวั เพื่อ login เขา้ ใชบ้ ริการ E-Mailกลมุ่ อภิปราย (Newsgroup) หรือ ยสู เน็ต (Use Net) กลุ่มอภิปรายเป็นการรวมกลุ่มของผใู้ ชอ้ ินเทอร์เน็ตท่ีมีความสนใจในเรื่องเดียวกนั เช่นกลมุ่ ที่สนใจเรื่อง คอมพิวเตอร์ รถยนต์ การเล้ียงปลาการปลกู ไมป้ ระดบั เป็นตน้ เพ่ือส่งขา่ วสารหรือแลกเปลี่ยน ขอ้ คดิ เห็นระหวา่ งกนั ในลกั ษณะของกระดานขาว (Bulletin Board)บนอินเทอร์เน็ตผใู้ ชส้ ามารถเลือกหัวขอ้ ท่ีสนใจ และสามารถแสดงความคิดเห็นไดโ้ ดยการงขอ้ ความไปยงั กลุ่มและผอู้ ่านภายในกลุ่มจะมีการวมกนั อภิปราย แสดงความคิดเห็นและส่งขอ้ ความกลบั มายงั ผูส้ ่งโดยตรง หรือส่งเขา้ ไปในกลุ่ม เพ่ือให้ผอู้ ื่นอ่าน ดว้ ยก็ได้ ตวั อยา่ ง เช่น กระดานขาว พนั ทิพ ที่ URL : www.pantip.com การสนทนา (Talk) การสนทนาเป็นบริการท่ีผใู้ ชส้ ามารถพูดคุยโตต้ อบกบั ผใู้ ชค้ นอ่ืนพิมพข์ อ้ ความ ผา่ นทางแป้นพิมพ์ หรือพดู คุยผ่านทางคอมพิวเตอร์ มีการตอบโตก้ นั ทนั ที การสนทนาผา่ นทางอินเทอร์เน็ต น้ี สามารถใชโ้ ปรแกรมไดห้ ลายโปรแกรม เช่น โปรแกรม Talk สาหรับการสนทนา เพียง 2 คน โปรแกรม Chat หรือ IRC (Internet Relay Chat) สาหรับการสนทนาเป็นกลุ่ม หรือโปรแกรม ICQ (มาจากคาวา I Seek You: ฉันหาคุณ) ตวั อย่างเช่น โปรแกรม Pirch, ICQ, Windows Messenger (MSN), Yahoo Messenger เป็ น ตน้

2.1.2 บริการดา้ นการติดต่อสื่อสาร เป็ นบริการท่ีผูใ้ ช้สามารถติดต่อส่ือสารกบั เครื่องคอมพิวเตอร์ที่อ่ืนได้ ในขณะท่ีน่ังอยู่ท่ีหน้าจอ คอมพวิ เตอร์ของตนเอง ซ่ึงบริการดา้ นการติดตอ่ สื่อสารมีหลายลกั ษณะ ดงั น้ี Telnet เป็ นโปรแกรมที่ใชใ้ นการเขา้ สู่ระบบคอมพิวเตอร์อ่ืน ๆ บนอินเทอร์เน็ต และ สามารถใช้ บริการสาธารณะต่าง ๆ เช่น บริการหอ้ งสมดุ ขอ้ มูลการวิจยั และสารสนเทศของเครื่องคอมพิวเตอร์เหล่าน้นั ได้ราวกับว่ากาลงั ทางานอยู่บนเครื่องคอมพิวเตอร์น้ัน ๆช่วยให้ไม่ตอ้ งเดินทางไปทางานอยู่หน้าเคร่ือง เหล่าน้ันโดยตรง จึงถือเป็ นบริการหลกั ท่ีสาคญั ย่างยงิ่ ของอินเทอร์เน็ต การใชโ้ ปรแกรม Telnet ติดต่อกบั คอมพิวเตอร์ในอินเทอร์เน็ตน้นั จาเป็นตอ้ งไดร้ ับสิทธิเป็นผใู้ ชใ้ นระบบน้นั ก่อน แต่ก็มี ระบบคอมพิวเตอร์ ในเครือข่ายจานวนมากท่ีอนุญาตใหผ้ ใู้ ชท้ ว่ั ไปเขา้ ใชบ้ ริการไดโ้ ดยไม่ตอ้ งรับอนุญาต The Internet Telephone และ The Videophone ปกติการสื่อสารทางโทรศพั ท์ ผูใ้ ชจ้ ะตอ้ งยกหูจาก เคร่ืองรับโทรศัพท์และพูดข้อความต่าง ๆ ระหว่างผูร้ ับและผูส้ ่งแต่เมื่อใช้บริการ อินเทอร์ เน็ตซ่ึงเป็ น เครือข่ายการสื่อสารทว่ั โลกผูใ้ ช้สามารถเลือกหมายเลขโทรศพั ท์ท่ีตอ้ งการติดต่อโดยพูดผ่านไมโครโฟน เล็กๆ และฟังเสียงสนทนาผ่านทางลาโพง ท้งั นีผูใ้ ช้จะตอ้ งมีโปรแกรมสาหรับใช้งานรวมท้งั ใช้เคร่ือง คอมพิวเตอร์ที่เป็ นระบบมัลติมีเดีย ตัวอย่างการบริการแบบ Telephone เช่น โปรแกรม Net2Phone นอกจากน้ีหากมีการติดตังกล้องวีดิทัศน์ท่ีเคร่ื องคอมพิวเตอร์ของคูสนทนาท้ัง 2ฝ่ าย เมื่อเช่ือมตอ คอมพิวเตอร์เขา้ กบระบบอินเทอร์เน็ตแลว้ ภาพที่ไดจ้ ากการทางานของกลอ้ งวีดิทศั น์กสามารถส่งผ่านไป ทางอินเทอร์เน็ตถึงผูร้ ับได้ การสนทนาทางโทรศพั ท์จึงปรากฏภาพของคูสนทนาท้งั ผูร้ ับ และผูส้ ่งบน จอคอมพิวเตอร์ไปพร้อมกบั เสียงดว้ ย ตวั อยา่ งโปรแกรมแบบ Videophone เช่น Net meeting 2.1.3 บริการการถา่ ยโอนแฟ้มขอ้ มูล บริ การการถ่ายโอนแฟ้มข้อมูล หรื อบริ การ FTP (File Transfer Protocol) เป็ นบริ การของ อินเทอร์เน็ตท่ีผใู้ ช้อินเทอร์เน็ตนิยมใช้ โดยผใู้ ชส้ ามารถแลกเปล่ียน ถ่ายโอนขอ้ มูล ไม่ว่าจะเป็นไฟลข์ อ้ มูล ตวั หนงั สือ รูปภาพ เสียง วีดิทศั น์ หรือโปรแกรมต่าง ๆ คลา้ ยกบั การ Copy ขอ้ มูลแต่วิธีการของ FTP จะ ซับซ้อนและปลอดภยั กวาการ Copy การใชง้ านผูใ้ ห้บริการจะมีเคร่ือง FTP Server ไวบ้ ริการเฉพาะ น้ันคือ ผใู้ ชจ้ ะตอ้ งมีพืนที่บนเวบ็ (ใน FTP Server)เป็นของเราเองก่อน จะโดยการเช่าพ้ืนที่หรือ แบบฟรีกไ็ ด้ จึงจะมี พ้ืนที่ให้เก็บหรือฝากขอ้ มูล การใชง้ านจะมีโปรแกรม FTP สาหรับส่ง(Upload) หรือรับ (Download) ซ่ึง สามารถหาไดจ้ ากอินเทอร์เนต็ ดงั ตวั อยา่ ง รูปท่ี 1.1

รูปที่ 1.2 แสดงการถา่ ยโอน FTP ในอินเทอร์เนต็ ดว้ ย WS FTP 2.1.4 บริการคน้ หาขอ้ มูล การบริการคน้ หาขอ้ มูลบนอินเทอร์เน็ต ซ่ึงมีแฟ้มขอ้ มูลต่าง ๆ มากมายหลายพนั ลา้ นแฟ้มบรรจุอยู่ ให้ผูใ้ ช้สามารถสืบค้นมาใช้งาน นับว่าได้เป็ นรูปแบบการบริการท่ีเขา้ มามีบทบาทต่อทุกส่วนของผูใ้ ช้ โดยเฉพาะ ดา้ นการศึกษา และภาคธุรกิจที่ตอ้ งใชข้ อ้ มูลเพ่ือการตดั สินใจ หรือวางแผนการการทางาน ซ่ึง โปรแกรมช่วยคน้ หาแฟ้มขอ้ มูล มีดงั น้ี อาร์คี (Archie) เป็นโปรแกรมที่ช่วยในการคน้ หาแฟ้มท่ีผใู้ ชท้ ราบชื่อแฟ้มแต่ไม่ทราบว่าแฟ้มขอ้ มูล น้นั อยใู นเครื่องบริการใดในอินเทอร์เน็ต โปรแกรมน้ีจะสร้างบตั รรายการแฟ้มไวใ้ นฐานขอ้ มูลเม่ือตอ้ งการ ค้นควา้ แฟ้มตามชื่อในฐานข้อมูล อยู่ในเครื่องบริการใด เพียงเรียกใช้โปรแกรมอาร์คีแล้วพิมพ์ช่ื อ แฟ้มขอ้ มูลท่ีตอ้ งการลงไป โปรแกรมอาร์คีจะตรวจคน้ ชื่อแฟ้มจากฐานขอ้ มูล และแสดงชื่อแฟ้มพร้อม

หน่วยการเรียนที2่ หลกั การออกแบบสร้างเว็บเพจ หลกั การออกแบบสร้างเว็บ การเริ่มตน้ สร้างเวบ็ ไซตจ์ ะตอ้ งมีความรู้และสามารถออกแบบระบบงานก่อนเขียนดว้ ยโปรแกรม จริงดงั น้ี 1.ความรู้ทวั่ ไปในการออกแบบสร้างเวบ็ เพจ การสร้างเวบ็ เพจ คือการออกแบบสร้างหนา้ เอกสารอีเล็กทรอนิกส์เพื่อนาเสนอขอ้ มูล ความรู้ต่างๆ ขององคก์ รหรือขอ้ มูลส่วนตวั ไปแสดงในเครือข่ายอินเทอร์เน็ตแสดงออกทางหนา้ จอคอมพิวเตอร์หรือส่ือ อื่นๆท่ีสามารถแสดงภาพได้โดยการออกแบบที่กล่าวถึงทว่ั ไปจะคานึงถึงการแสดงผลท่ีจอคอมพิวเตอร์ เท่าน้ัน การส่งขอ้ มูลส่ือสารบนอินเทอร์เน็ตมีคาศพั ท์เฉพาะที่ใช้ เรียกช่ืองานหรือโปรแกรมที่เก่ียวขอ้ ง คาศพั ทท์ ่ีจะพบมากในการสร้างเวบ็ มีดงั น้ี เว็บเพจ (Web page) คือหน้าเอกสารอิเล็กทรอนิกส์ท่ีใช้แสดงข้อมูลบนเครือข่ายอินเทอร์เน็ตมี คุณสมบตั ิพิเศษกวา่ เอกสารทว่ั ไปคือสามารถเชื่อมโยงไปยงั หนา้ เอกสารอื่นๆได้ โฮมเพจ (Home page) คือ เว็บเพจที่ใช้เป็ นหน้าหลกั ในการเช่ือมโยงเขา้ หน้าเน้ือหาอื่นในเว็บไซต์เปรียบเหมือนหน้าสารบัญของ หนงั สือ เว็บไซต์(Web site) คือช่ือเรียกที่อยูของเว็บเพจที่ใช้แสดงเร่ืองราวในองค์กรท้งั หมดเช่นเว็บไซต์ วิทยาลยั เทคนิคราชบุรี www.rtc.ac.th ก็จะมีจานวนเวบ็ เพจแสดงข้อมูลของฝ่ ายงานต่างๆในองคก์ รจานวน มากโดยมีการลิงคห์ รือเช่ือมโยงน้นั จากรายการในหนา้ โฮมเพจ เว็บบราวเซอร์คือโปรแกรมท่ีใช้เปิ ดเว็บเพจในอินเทอร์เน็ตสามารถส่งไฟล์ขอ้ มูลไปยงั เคร่ือง คอมพิวเตอร์ท่ีเช่ือมต่อในอินเทอร์เน็ตไดโ้ ดยการแปลคาส่ังภาษา HTML แลว้ แสดงผล ออกทางหนา้ จอได้ ท้งั ตวั อกั ษร รูปภาพ ภาพเคลื่อนไหว เสียง หรือวีดิทศั น์ โปรแกรมบราวเซอร์ ในปัจจุบนั มีหลายโปรแกรม เช่น Internet Explorer , Mozilla Firefox , Opera , Safari เป็นตน้ ภาษา HTML (Hyper Text Markup Language) เป็ นโปรแกรมภาษาที่ใชเ้ ขียนเว็บเพจ ซ่ึง สามารถ สร้างการเชื่อมโยง (Link) ไปยงั หน้าเวบ็ เพจอ่ืนๆไดเ้ รียกการเช่ือมโยงน้ีว่า Hypertext ในการเขียนเว็บจะมี การใช้โคด้ คาสั่งของโปรแกรมภาษาอื่นมาใช้รวมกบั ภาษาHTML ไดเ้ รียกว่าScript เพื่อเพิ่มเทคนิค สีสัน ให้กับหน้าเว็บ เช่นJava , Java Script , MySQL , PHP, ASP เป็ นต้น WYSIWYG (What You See Is What You Get) อ่านว่า วิสสิวิกคือช่ือเรียกโปรแกรมรูปภาพหรืองานกราฟิ กมาจัดวางบนหน้าเว็บท่ีออกแบบ แล้วสังแสดงผลด้วยโปรแกรมบราวเซอร์สร้างเว็บท้ังหลายท้่ีสามารถออกแบบได้โดยนาข้อความ จะ ปรากฏผลบนเวบ็ เพจเหมือนการออกแบบท่ีจดั วางไวใ้ นโปรแกรมสร้างเหล่าน้นั ทาให้การสร้างเวบ็ เพจง่าย และรวดเร็วและโปรแกรมเหล่าน้ันจะสร้างโคด้ คาสั่งHTML ให้ด้วย ทาให้ไดร้ ับความนิยมใช้งาน มาก ตวั อยา่ งโปรแกรมแบบ WYSIWYG เช่น FrontPage , Dreamweaver , Homesite, Namo Editor เป็นตน้

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

รปแบบการเช่ือมโยง การสร้างการเชื่อมโยงถือวาเป็นเคร่ืองม่ือท่ีสาคญั ของเวบ็ เพจ โดย จะตอ้ ง สามารถสร้างเชื่อมโยงดว้ ยขอ้ ความ รูปภาพ หรือวีดิทศั น์คือสามารถติดตามเน้ือหาได้ ทุกจุดเพื่อใหค้ วาม สะดวกแก่ผใู้ ชม้ ากที่สุด ภาพกราฟิ ก (Image) รูปภาพท่ีสามารถนามาใชบ้ นเวบ็ ไซตจ์ ะไดจ้ ากที่ใดขนาดความจุไฟลไ์ มท่ าให้ เวบ็ โหลดชา้ (ไม่ควรเกิน50 KB) และเลือกชนิดของไฟลใ์ หเ้ หมาะสม การทดสอบเว็บเพจ การสร้างเวบ็ ตอ้ งมีการทดสอบตลอดเวลาในระหวา่ งการสร้างจะทดสอบที่ ไหน จะตอ้ งเตรียมพ้ืนที่วา่ งเวบ็ ไซตบ์ นอินเทอร์เนต็ ก่อนหรือไม่ การเผยแพร่เวบ็ เพจ เมื่อเวบ็ ไซตเ์ ผยแพร่ในอินเทอร์เน็ตการประชาสมั พนั ธจ์ ะใชว้ ธิ ีใด การลงมือออกแบบสร้างเวบ็ ไซต์ มีลาดบั ขนั การทางานด้งั น้ี 2.1 การเขียนผงั ระดมความคดิ การระดมความคิด สร้างกรอบเน้ือหาเป็นจุดเริ่มตน้ ของการลงมือออกแบบสร้างเวบ็ ไซตก์ ารทางาน จะตอ้ งนาขอ้ มูลที่ไดศ้ ึกษา และสารวจมาท้งั หมดเขียนลงในหน้ากระดาษโดยยงั ไม่ตอ้ งคานึงถึงหมวดหมู่ มากนัก ให้ทีมงานหรือเจา้ ของโครงการช่วยสารวจดูว่างานท่ีจะนาเสนอในเวบ็ ไซต์ครบหรือไม่ การเขียน นิยมทาเป็ นผงั ระดมความคิด จะเขียนด้วยลายมือเพราะสะดวกต่อการปรับแกไ้ ขหรือเพ่ิมเติมขอ้ มูลโดย ขอ้ มูลที่ไดจ้ ากผงั ระดมความคิดจะถูกจดั กลุ่มเป็ นหนา้ เว็บเพจเสนอเรื่องราวแต่ละส่วนงานไดอ้ ย่างชัดเจน ดงั ตวั อยา่ งในรูปท่ี2.1 รูปท2ี่ .1 แสดงการเขยี นผังระดมความคดิ

2.2 เขียนผังโครงสร้างเว็บไซต์(Site structure Design) โครงสร้างเวบ็ ไซต(์ Site Structure Design) เป็นแผนผงั การลาดบั เน้ือหาหรือการจดั วาง ตาแหน่งเวบ็ เพจท้งั หมด โดยจะจดั เฉพาะรายการหลกั รายการรองท่ีสาคญั ไวก้ ่อน ผงั โครงสร้างจะทาให้เรารู้ว่าท้งั เว็บไซต์ประกอบไปด้วยหัวข้อเน้ือหาอะไร มีเว็บเพจหน้าใดเป็ นส่วนหัวเรื่อง หลกั หน้าใดเก่ียวข้อง เช่ือมโยงถึงนัี่ โดยจะทาการกาหนดช่ือไฟลเ์ วบ็ เพจไวด้ ว้ ยเลยก็ไดจ้ ะทาใหเ้ รา มองเห็นหนา้ ตาของเวบ็ ไซต์ เป็ นรูปธรรมมากข้ึนการวางโครงสร้างเว็บไซต์ที่ช่วยให้ดีผูช้ มไม่สับสนคน้ หาขอ้ มูลที่ตอ้ งการได้อย่าง รวดเร็ววธิ ีจดั โครงสร้างเวบ็ ไซตม์ ีรูปแบบดงั น้ี แบบเรียงลาดบั (Sequence) เหมาะสาหรับเวบ็ ไซตท์ ่ีมีจานวนเวบ็ เพจไม่มากนกั หรือเวบ็ ไซตท์ ี่มีการ นาเสนอขอ้ มูลแบบทีละข้นั ตอน Home Page Web page Web page Web page Web page รูปท2่ี .2 ผงั โครงสร้างเวบ็ ไซต์แบบระดับ กล่มุ ยอ่ ยแแบตบ่ละรเะร่ด้่่ือบั งชค้ันน้ (หHาiงerา่ aยrเcปh็นyร)ูปเหแมบาบะทสี่มาหีกรารับใเชวบ็ม้ าไกซตท์ ี่มีจานวนเน้ือหาเวบ็ เพจมากข้ึนจะจดั เน้ือหาเป็น Home Page Web page Web page Web page Web page Web page Web page รูปที่2.3 ผงั โครงสร้างเวบ็ ไซต์แบบระดับช้ัน

แบบผสม (Combination) เหมาะสาหรับเวบ็ ไซตท์ ่ีซบั ซอ้ นเน้ือหามากเป็นการนาขอ้ ดีของรูปแบบ ท้งั สองขา้ งตน้ มาผสมกนั Home Page Web page Web page Web page Web page Web page Web page Web page รูปที่2.4 ผงั โครงสร้างเวบ็ ไซต์แบบผสม เมื่อพิจารณางานท้งั หมดแลว้ ให้เลือกรูปแบบโครงสร้างที่เหมาะสมออกแบบโครงสร้างเว็บไซต์ ท้งั หมด ดงั ตวั อยา่ ง 2.3 ออกแบบระบบเนวเิ กชันหรือระบบการเชื่อมโยงเว็บ(Navigation Design) โครงสร้างการเชื่อมโยงของหนา้ เวบ็ เป็นการบอกให้รู้ว่าเวบ็ เพจแต่ละหนา้ มีการลิงคถ์ ึงกนั อยา่ งไร การออกแบบการเช่ือมโยงภายในเวบ็ ไซตจ์ ะตอ้ งนาผงั โครงสร้างแต่ละส่วนมาพิจารณา เป็นส่วนๆ ไปและ ลงรายละเอียดหนา้ เน้ือหาใหค้ รบ

หน่วยการเรียนที่ 3 การสร้างเพจด้วยโปรแกรมภาษา HTML การจัดการโฟล์เดอร์(Folder) เกบ็ ข้อมูลเวบ็ ไซต์ การเขียนโปรแกรมใดๆ ในเคร่ืองคอมพิวเตอร์ ส่ิงแรกท่ีตอ้ งดาเนินการคือการสร้างโฟลเดอร์ เก็บ ขอ้ มูลรวมไวใ้ นท่ีเดียวกนั เพ่ือความปลอดภยั จากการถูกลบทิ้ง และการเรียกใชง้ านท่ีสะดวก สาหรับการ สร้างเวบ็ ไซต์โฟลเดอร์เก็บไฟลข์ อ้ มูลต่างๆ ที่นามาประกอบเป็ นหนา้ เอกสารเวบ็ และไฟล์ .html ท่ีจะตอ้ ง เชื่อมโยงถึงมกั จะตอ้ งมีการอา้ งอิงตาแหน่งแบบชดั เจนเปล่ียนแปลงไมไดจ้ ึงใหเ้ ก็บไวภ้ ายในโฟลเดอร์หลกั (Local Root Directory ) เดียวกนั แลว้ สร้างโฟลเดอร์ยอ่ ยๆ (Sub-Directories)เช่น image , CSS,Templateไว้ ภายใตโ้ ฟลเดอร์หลกั หากเคร่ืองคอมพิวเตอร์ที่ใชส้ ร้างเวบ็ มีผูใ้ ชห้ ลายคนการสร้างโฟลเดอร์เวบ็ ไซต์ควร สร้างเก็บไวใ้ นที่ปลอดภยั แลว้ ใส่รหสั ผา่ นกนั ไวด้ ว้ ย ตวั อยา่ งการ สร้างโฟลเดอร์ที่ไดร์ฟ D: มีลาดบั ข้นั ตอนการสร้างดงั รูปท่ี 3.1 1.เขา้ ไดร์ฟ D: → คลิกขวาบริเวณที่วา่ ง → เลือก New → Folder 2.เมื่อไดโ้ ฟลเดอร์ชื่อ์ New Folder ทาการเปลี่ยนช่ือโฟลเดอร์ ชื่อโฟลเดอร์ควรสอดคลอ้ งกบั ชื่อ องค์กรหรืองานที่จดั ทาเว็บไซต์เช่น สร้างเวบ็ ไซต์บริษทั ฮอนดา้ ต้งั ช่ือว่า Web-Honda ที่สาคญั การต้งั ช่ือ โฟลเดอร์หรือไฟล์ต่างๆตอ้ งใชภ้ าษาองั กฤษใชส้ ีสนั ๆเพราะจะมีผลต่อการสร้างลิงคท์ ่ีตอ้ งเขียนคาสง่ั อา้ งอิง ช่ือภายหลงั การใชช้ ื่อภาษาไทยจะมีปัญหาต่อโปรแกรมบราวเซอร์จะหาไม่พบ รูปที่ 3.1 แสดงการสร้างโฟล์เดอร์เพ่ือเกบ็ ข้อมูลเว็บ การเขยี นโปรแกรมภาษา HTML ภาษา HTML (Hyper Text Markup Language) เป็ นภาษาหลกั ท่ีใช้ในการสร้างเว็บเพจ เป็ นภาษา ประเภท Markup Language เกิดข้ึนจากการพัฒนาเทคโนโลยี ระบบ World Wide Web:WWW.ใช้เพื่อ กระจายข้อมูลในองคก์รอินเทอร์เน็ต พฒั นาและกาหนดมาตรฐานโดยองค์กร W3C (World Wide Web Consortium) ระบบ WWW. พฒั นาข้นึ โดยนกั วจิ ยั จากสถาบนั CERN (Conseil European Pour La Recherche

Nucleaire) ชื่อทิม เบอร์เนอร์ - ลี (Tim Berners-Lee) ใน ปี ค.ศ.1989 เมืองเจนีวา ประเทศสวิสเซอร์แลนด์ ภาษาHTML เป็นภาษาท่ีมีลกั ษณะของขอ้ มลู ท่ีเป็นตวั อกั ษรในมาตรฐานของรหสั แอสกี (ASCII Code) โดย เขียนอยู่ในรูปของเอกสารขอ้ ความ (Text Document) ปัจจุบนั พฒั นาเป็ นเวอร์ชนั 4.01 หรือ XHTML1.0 เพื่อรองรับมาตรฐานภาษาXML (ซ่ึงจะนามาใชแ้ ทนภาษาHTML)สามารถแสดงภาพกราฟิ กและระบบเสียง ไดส้ มบรู ณ์ตอบสนองเทคโนโลยปี ัจจุบนั ครอบคลุมการใชร้ ่วมในระบบโทรศพั ทไ์ ด้ การเขียนภาษา HTML สามารถแทรกคาส่ังท่ีตอ้ งการได้ง่ายโปรแกรมจะไม่ยึดความเป็ นโครงสร้างการเขียนคาส่ังผิดไม่มีผลต่อ โปรแกรมเพียงแต่จุดที่ผิดจะไม่แสดงผลออกมานบั เป็ นจุดอ่อนของโปรแกรม (ทาใหต้ ามหาจุดผิดได้ยาก และเป็นเหตผุ ลที่มีการพฒั นาภาษา XML มาใชแ้ ทน) ไฟลท์ ี่ไดจ้ ากการสร้างเอกสารเวบ็ HTML จะเป็นไฟล์ นามสกลุ .htm หรือ .html ใชไ้ ดท้ ้งั ระบบปฏิบตั ิการ ยนู ิกซ์ (UNIX) และระบบปฏิบตั ิการ Windows เวลา เรียกใชห้ รือสัง่ แสดงผล เรียกใชไ้ ดจ้ ากโปรแกรมเวบ็ บราวเซอร์ (Web Browser) 2.1 โปรแกรมเขียนภาษา HTML โปรแกรมท่ีนิยมนามาใช้เขียนภาษาHTML ท่ีนิยมมี 2 โปรแกรมคือ Notepad และ Edit Plus ดัง ตวั อยา่ งดงั น้ี โปรแกรม Note Pad Note Pad เป็นโปรแกรม Text Editor มาตรฐานท่ีมีมาก Windows วธิ ีเรียกใชท้ าไดด้ งั รูปท่ี 3.2 1. การเขา้ สู่โปรแกรม เริ่ม ที่หนา้ ต่าง Desk top คลิกท่ีป่ ุม START → All PROGRAMS → ACCESSARIES → NOTE PAD รูปท่ี 3.2 แสดงการเปิ ดโปรแกรม Note pad

เมื่อเข้าโปรแกรม ก็สามารถพิมพ์ขอ้ ความหรือ Code HTML ได้ทันทีตามรูปแบบคาสั่ง ของ โปรแกรม หากไมส่ ามารถพิมพภ์ าษาไทยไดใ้ หเ้ ขา้ ไปต้งั ที่เมนู Format เลือก Font เช่น Angsana New เลือก ขนาด Font ตามตอ้ งการ โปรแกรมภาษา HTML ไม่ยดึ ติดกบั ตวั พมิ พเ์ ลก็ หรือตวั พมิ พใ์ หญ่สามารถใชไ้ ด้ ให้ พิจารณาความสวยงาม การดูง่ายเป็ นหลกั การบนั ทึกไฟล์ เม่ือเขียน Code HTML เสร็จแลว้ ให้บนั ทึกไฟล์ เลือกนามสกลุ เป็น .htm หรือ .html เกบ็ ไวใ้ นFolder ท่ีเตรียมไวส้ าหรับเกบ็ ทรัพยากรเวบ็ ไซต์ ดงั รูปท่ี 3.3 และ รูปที่ 3.4 รูปท่ี 3.3 แสดง Code HTML ท่เี ขียนด้วยโปรแกรม Note pad รูปท่ี 3.4 แสดงการบนั ทึกไฟล์ นามสกุล .html

โปรแกรม EDIT PLUS Edit Plus เป็ นโปรแกรม Text Editor ท่ีใช้บน Windows 95/98/Me/NT/2000/XP ผลิตโดย บริษัท ES-Computing ขนาดโปรแกรม 1.02 MB เป็ นโปรแกรมท่ีมีเคร่ืองมือช่วยให้เขียนโปรแกรมภาษาสะดวก ข้ึน เช่นมีสีเน้น คาส่ัง หมายเลขบอกบรรทดั ตวั ช่วยในการเขียน Tag คาสั่งต่าง ๆ การใช้งานเขียนภาษา HTML ทาดงั รูปที่ 3.5 1.เม่ือเขา้ สู่โปรแกรม File → New → HTML Page กด Enter (จะเห็นว่าสามารถใช้โปรแกรม EditPlus เขยี นโปรแกรมภาษาไดห้ ลายโปรแกรม) รูปท่ี 3.5 การใช้ โปรแกรม Edit Plus สร้างไฟล์เว็บ HTML 2.เม่ือเลือกการสร้างเอกสารแบบ HTML Page แลว้ โปรแกรมจะสร้างรูปแบบคาส่ัง HTML ใหเ้ รา สามารถเขียนเพ่ิมเติม และสามารถเลือกคาสั่งจาก Tool bar ท่ีมีมาให้ทาให้ สามารถเลือกใชค้ าสั่งสาเร็จลง ในตาแหน่งท่ีตอ้ งการไดเ้ ลยดงั รูปที่ 3.6 รูปที่ 3.6 แสดงแบบฟอร์ม HTML ของโปรแกรม EDIT PLUS

หน่วยการเรียนที่ 4 การสร้างเว็บเพจด้วยโปรแกรม Dreamweaver การสร้างเวบ็ เพจด้วยโปรแกรม Dreamweaver 8.0 การสร้างเว็บตอ้ งสามารถสร้างงานไดเ้ ร็วมีเทคนิคสร้างความน่าสนใจทาให้ผูใ้ ช้ติดตามได้อย่าง เหมาะสมในขณะสร้างตอ้ งสามารถแกป้ ัญหาคาสั่งHTMLได้ดงั่ ใจจดเน้ือหาภาษาHTMLไวใ้ นหน่วยการ เรียนท่ี3 แลว้ ต้งั แต่หน่วยการเรียนท่ี4 เป็นตน้ ไปนกั เรียนจะเรียนรู้การใชโ้ ปรแกรม Dreamweaver 8.0 สร้าง เวบ็ ไซตเ์ พื่อใหไ้ ดเ้ รียนรู้และสร้างผลงานได้ รวดเร็ว ดงั หวั ขอ้ ตอ่ ไปน้ี 1.ประวตั กิ ารพฒั นาโปรแกรม Dreamweaver อะโดบี ดรีมวีฟเวอร์ (Adobe Dreamweaver) ช่ือเดิมคือแมโครมีเดีย ดรีมวีฟเวอร์ (Macromedia Dreamweaver) พฒั นาโดยบริษทั แมโครมีเดีย ปัจจุบนั ควบกิจการรวมกบั บริษทั อะโดบีซิสเต็มส์คนส่วน ใหญเ่ รียกช่ือวา่ “โปรแกรมดรีมวฟี เวอร์”โปรแกรมDreamweaverเป็นโปรแกรมออกแบบเวบ็ ไซตใ์ นรูปแบบ WYSIWYG กบั การควบคุมของส่วนแกไ้ ขรหัส HTML การพฒั นาโปรแกรมที่มีการ รวมท้งั สองแบบเขา้ ดว้ ยกนั แบบน้ีทาใหผ้ อู้ อกแบบสามารถออกแบบงานในมมุ มองเหมือนจริงอยา่ งท่ีตอ้ งการไปพร้อมๆกบั การ มองเห็นรหัสภาษาHTMLผูอ้ อกแบบที่มีพ้ืนความรู้ภาษาHTMLบา้ งจึงสามารถออกแบบงานแกไ้ ขคาสั่งที่ ตอ้ งปรับแกไ้ ขความกระชบั หรือตดั ส่วนที่โปรแกรมสร้างมาแต่ไมไ่ ดใ้ ชอ้ อกไดเ้ พ่ือใหแสดงผลไดต้ รงความ ตอ้ งการมากท่ีสุด จึงทาใหเ้ ป็นโปรแกรมที่ได้ รับความนิยมใชม้ ากปี พ.ศ. 2544 ดรีมวีฟเวอร์ มีสัดส่วนตลาด การใช้โปรแกรมประเภทสาเร็จรูปมากกว่า 70% ประวัติการพัฒนาโปรแกรมเวอร์ชันต่างๆ ของ Dreamweaver มีดงั น้ี Dreamweaver 1.0 (ธ.ค.1997) Dreamweaver 1.2 (มี.ค.1998) Dreamweaver 2.0 (ธ.ค.1998) Dreamweaver 3.0 (ธ.ค.1999) Dreamweaver UltraDev 1.0 (มิ.ย.2000) Dreamweaver 4.0 (ธ.ค.2000) Dreamweaver UltraDev 4.0 (ธ.ค.2000) Dreamweaver MX (พ.ค.2002) Dreamweaver MX 2004 (พ.ย.2003) Dreamweaver 8 หรือ CS2 (พ.ย. ค.ศ.2005) Dreamweaver 9 หรือ CS3 (มี.ค.2007) Dreamweaver 10 หรือ CS4 ( ต.ค. 2008) 2.ลกั ษณะและความสําคญัของโปรแกรม โปรแกรม Dream weaver เป็นโปรแกรมออกแบบเวบ็ สาเร็จรูปที่รวมการทางาน 2 รูปแบบไว้ ใน โปรแกรมคือ รูปแบบ WYSIWYG(What -You – See- Is-What-You-Get ) และ การควบคุมของส่วนแกไ้ ข รหัส HTML ทาให้ผูใ้ ชง้ านสามารถออกแบบเว็บเพจไดง้ ่ายไม่ตอ้ งมีความรู้ดา้ นโปรแกรมภาษา มากนัก

เพราะโปรแกรมจะทาการสร้างรหสั HTML ให้ทนั ทีเมื่อมีการออกแบบในมุมมองออกแบบ ตามรูปแบบ WYSIWYG คือเราสามารถใส่เน้ือหา ใส่กราฟิ กง่ายๆ ลงในหนา้ เอกสารเวบ็ พร้อมกบั สามารถดูรูปแบบ จริงไดใ้ นระหว่างการสร้าง หรือแกไ้ ข หากตอ้ งการเพ่ิมเติมหรือแกไ้ ขรหัส HTML ก็สามารถทา ได้ และดูผลไดท้ นั ที เน่ืองจากภาษา HTML เป็นโปรแกรมที่ไมย่ ึดติดกบั โครงสร้างภาษา ปัญหาการเขียน รหัสคาส่ังจึงแทบไมมีเลย การเรียนรู้การใช้งานโปรแกรม Dreamweaver หากไดเ้ ริ่มตน้ ดว้ ยภาษา HTML เพียงเลก็ นอ้ ยเป็นพ้ืนฐาน รู้คาส่ังหลกั ๆ พอสมควร ก็จะสามารถเรียนรู้การใชง้ าน โปรแกรม Dreamweaver ไดง้ ่ายและรวดเร็วยงิ่ ข้นึ ความสามารถของโปรแกรม กบั การใชง้ านร่วมกบั โปรแกรมภาษาอื่น ๆ Dream weaver สามารถทางานกบั โปรแกรมภาษาคอมพวิ เตอร์ในการเขยี นเวบ็ ไซตแ์ บบไดนามิคซ่ึง มีการใช้ HTML เป็นตวั แสดงผลของเอกสาร เช่น ASP, ASP.NET, PHP, JSP และ Cold Fusion รวมถึงการ จดั การฐานขอ้ มูลต่างๆและยงั สามารถทางานร่วมกบั XML และ CSS ไดอ้ ยา่ งง่ายดาย สรุปจุดเด่นของโปรแกรม Macromedia Dreamweaver 8 โปรแกรมจะทาการแปลงรหสั ใหเ้ ป็นภาษา HTML โดยอตั โนมตั ิ ดงั น้นั ผใู้ ชท้ ่ีไม่มีความรู้ดา้ นน้ีก็สามารถ ทาได้ 1. มีแถบเครื่องมือหรือแถบคาส่งั ท่ีใชใ้ นการควบคมุ การทางานแบง่ ออกเป็นหมวดหมู่จึงช่วยในการ ทา งานที่ดีข้นึ และรวดเร็วยงิ่ ข้นึ 2. สนบั สนุนเวบ็ เพจท่ีเป็นภาษาไทยไดด้ ี 3. มีคณุ สมบตั ิท่ีสามารถจดั การกบั รูปภาพเคลื่อนไหว ไดโดยไม่ตอ้ งอาศยั โปรแกรมเสริม 4. สามารถเรียกใชต้ ารางจากภายนอก โดยการอิมพอร์ทจาก Text File 5. เป็นโปรแกรมที่สนบั สนุนการใชง้ าน CSS (Cadcading Style Sheet) 6. มีความสามารถในการทาDrop Down Menuรวมไปถึงการทาใหร้ ูปภาพเปล่ียน เมื่อนาเมาส์ไปช้ี 3.การติดต้งั โปรแกรม Dreamweaver 8.0 ในท่ีนีจะแสดงการติดต้งั กรณีใชแ้ ผน่ ชุด Studio 8 มีข้นั ตอนดงั รูปที่ 4.1 1.ใส่แผน่ Dreamweaver 8 ลงในไดร์ฟ CD-ROM ใหคลิกเลือกท่ี Dreamweaver 8 > Install โปรแกรม จะดา เนินการข้นั ต่อไป 2.โปรแกรมติดต้งั จะเริ่มทางานโดยอตั โนมตั ิหากไม่ทางานให้เลือกคาสั่ง Start > Run คลิกท่ี ป่ ุม Browse... แลว้ เลือกไฟล์ Dreamweaver 8 .exe ในแผ่น Dreamweaver 8 จากน้นั คลิกที่ป่ มุ OK เพ่ือเริ่มติดต้งั หรือกรณีไมใ่ ชแ้ ผน่ ชุด Studio 8.0 ใหเ้ ริ่มจาก Start > Run…เช่นกนั

รูปท่ี 4.1 แสดงหน้าต่างเมนูโปรแกรมชุด Macromedia Studio 8 1. โปรแกรมติดต้งั จะแสดงขอ้ ความเก่ียวกบั ลิขสิทธ์ิในการใชง้ านใหเ้ ขา้ ใจแลว้ เลือกหวั ขอ้ I accept… แลว้ คลิกป่ มุ Next ดงั รูปท่ี 4.2 รูปท่ี 4.2 แสดงหน้าต่างยอมรับลขิ สิทธิของโปรแกรม 2.โปรแกรมจะบอกตาแหน่งท่ีจะติดต้งั อยทู่ ่ีไหน โดยปกติจะติดต้งั ที่ C:\\ProgramFiles\\Macromedia\\ \\Dreamweaver 8 หากตอ้ งการเปลี่ยนท่ีติดต้งั ให้เลือก Change… และเลือกตาแหน่งในการติดต้งั ใหม่ตาม ตอ้ งการ และถา้ ตอ้ งการให้ Shortcut ไวห้ นา้ จอใหค้ ลิกเลือก Create Shortcut on Desktop (for All Users) ดงั รูปท่ี 4.3 รูปที่ 4.3 แสดงตําแหน่งตดิ ต้งั โปรแกรม

3. เลือกชนิดของไฟล์ที่จะใชง้ านร่วมกบั Dreamweaver 8 เลือกตวั ท่ีเราตอ้ งการให้เลือกท้งั หมดแลว้ คลิก Next ดงั รูปท่ี 4.4 รูปที่ 4.4 แสดงการเลือกโปรแกรมท่ีสามารถใช้ร่วมกันได้ 4. โปรแกรมพร้อมทาการติดต้งั ใหเ้ ลือกป่ ุม Install > โปรแกรมจะกาลงั ทาการติดต้งั ให้สงั เกตคุ วามกา้ วหนา้ > จนถึง แสดงป่ ุม Finish > คลิกป่ มุ Finish เป็นอนั วา่ การลงโปรแกรมเสร็จสามารถใชง้ านไดด้ งั รูปที่ 4.5 รูปที่ 4.5 แสดงลาํ ดบั การ Install โปรแกรม

หน่วยการเรียนที่ 5 การตกแต่งความน่าสนใจ และ สร้างจุดเช่ือมโยงบนเวบ็ เพจ การปรับขนาดความของจไุ ฟล์กราฟิ ก กรณีเป็ นภาพถ่าย ตอ้ งใชน้ ามสกุล .jpg ปรับขนาดไดด้ งั น้ี เปิ ดไฟลท์ ี่ตอ้ งการดว้ ย Photoshop ตกแต่งให้เรียบร้อย > ทาการบนั ทึกเลือก Save for Web > ที่ หนา้ ต่างบนั ทึก Save for Web เลือกมุมมองแบบ 4 up (แสดง 4 ภาพ) หมายเลข 1 เป็นภาพตน้ ฉบบั (Original) ใตภ้ าพบอกขนาด 2.25 KB หมายเลข 2 – 4 เป็นภาพท่ีเราจะเลือกบนั ทึก มีขนาดไฟลบ์ อกใตภาพพร้อมท้งั บอกเวลาท่ีใช้ ในการ ดาวนโ์ หลดท่ีความเร็ว (โมเดม็ ) 28.8 Kbps ใหเ้ ลือกภาพที่มีขนาดไมเ่ กิน 50 KB หมายเลข5กลุ่มรายละเอียดการเลือกบนั ทึกและการปรับความละเอียดไฟล(์ Quality)ใชป้ รับ ลด ความละเอียดลงอีก กรณีขนาดไฟลย์ งั มากกวา่ 50 KB ดงั รูปท่ี 5.1 รูปที่ 5.1 แสดงหน้าต่าง Save for Web สามารถปรับขนาดไฟล์ให้ลงได้ 1. เลือกไฟลท์ ี่ตอ้ งการแลว้ เลือกชนิดไฟลใ์ นท่ีน้ีเลือก .jpg 2. ท่ีQualityคลิก>เพ่ือให้แสดงแกนปรับค่าความละเอียดโดยขณะปรับเลื่อนลูกศรที่แกนปรับให้สังเกตุค่า ความจุของไฟลต์ ามหมายเลข 3 จะปรับขนาดความจุตามใหข้ นาดไฟลไ์ ม่ควรเกิน 50 KB 3. แสดงรายละเอียดไฟล์ท่ีจะบนั ทึกในที่น้ี ไดแ้ ก่ ชนิดเป็ น .jpeg ขนาดไฟล์ 48.39 KB ใช้เวลาโหลด 18 วินาที เมื่อความเร็วโมเดม็ เท่ากบั 28.8 Kbps (กิโลบิตต่อวินาที) ดงั รูปที่ 5.2

รูปท่ี 5.2 แสดงรายการทใี่ ช้ปรับขนาดไฟล์.JPEG ให้เหมาะสมกบั การลงบนเว็บ แสดงการปรับขนาดไฟลใ์ นกรณีบนั ทึกเป็ น .png (PNG8 , PNG24) ภาพ PNG มีให้เลือก 2 แบบ คอื PNG-8 มีสีสูงสุด 256 สี และ PNG-24 มี 24 บิต หรือ16.7 ลา้ นสี การปรับเลือกขนาดไฟลท์ าไดโ้ ดยเลือก colors ที่หมายเลข 2 ดงั รูปที่ 5.3 รูปท่ี 5.3 แสดงรายการที่ใช้ปรับขนาดไฟล์.PNG ให้เหมาะสมกบั การลงบนเว็บ

หน่วยการเรียนที่ 6 การออกแบบด้วยเทคนิค Layout, Layer การออกแบบด้วยเทคนคิ Layout, Layer การนาเสนอเน้ือหาขอ้ มูลต่างๆ บนเว็บเพจ ส่ิงท่ียากคือการจดั ระเบียบเน้ือหาให้อยู่ในตาแหน่งที่ ตอ้ งการตามแบบที่ร่างไวใ้ นStoryboardซ่ึงเราสามารถใชต้ ารางมาเป็นเครื่องมือกาหนตาแหน่งเน้ือหาไดเ้ ป็น อยา่ งดีโปรแกรมDreamweaverมีเคร่ืองมือสร้างตารางใหเ้ ร็วข้ึนเหมือนการวาดภาพคือตอ้ งการสร้างตาราง ตรงจุดใดก็สามารถ Drag เมาส์ลากเหมือนการวาดรูป เคร่ืองมือดงั กล่าวมี 2ชนิด คือเคร่ืองมือ Layout และ เครื่องมือ Layer เพ่อื ใหส้ ามารถใชเ้ ครื่องมือ Layout และเครื่องมือ Layer ตามลาดบั ดงั น้ี 1.ความรู้เก่ียวกบั เครื่องมือ Layout, Layer เลเอาท์ (Layout) เป็ นเคร่ื องมือสาหรับจัดวางเน้ือหา แบ่งสัดส่วนหน้าเว็บ ที่โปรแกรม Dreamweaver ไดเ้ ตรียมไวช้ ่วยใหส้ ามารถออกแบบเวบ็ ไดง้ ่ายและสะดวกยง่ิ ข้นึ เราสามารถออกแบบ หนา้ เวบ็ ไดโ้ ดยการแดร็กเมาส์วาดรูปร่างของตาราง ตามกรอบเน้ือหาของส่วนต่าง ๆ ในหนา้ เวบ็ ตามแผนท่ี คดิ ตามแบบร่าง Storyboard เม่ือลากเลเอาทเ์ สร็จพ้ืนท่ีท่ีไดก้ ค็ อื บลอ็ กของตารางนนั่ เอง เลเยอร์ (Layer) คือพ้ืนท่ีทางานที่วาดข้ึนสาหรับใส่เน้ือหาเช่นเดียวกบั เลเอาท์แต่เลเยอร์เปรียบ เหมือนชิ้นกระจกใสท่ีสามารถยกไปวางตรงไหนก็ได้ วางซอ้ นกนั ปรับขนาดใหม่ไดท้ าใหเ้ มื่อใส่เน้ือหา ดู มีเทคนิคมากข้นึ สามารถสร้างความน่าสนใจไดด้ ี เม่ือวา่ งตาแหน่งไดก้ ็สามารถแปลงเป็นตารางได้ เป็น เคร่ืองมือท่ีโปรแกรม Dreamweaver เตรียมมาใหท้ างานไดส้ ะดวกมากข้นึ 2.การใชเ้ ทคนิคเลเอาท์ (Layout) ออกแบบเวบ็ การใชเ้ ทคนิคเลเอาทด์ ว้ ยโปรแกรมสร้างเวบ็ ท่ีนกั ออกแบบเวบ็ ใชก้ นั มากมี 2 โปรแกรม คือ ดว้ ยย เคร่ืองมือของโปรแกรมสร้างแบบ WYSIWYG เช่น Dreamweaver ที่เรากาลงั ใชง้ านอยู่ และดว้ ย โปรแกรม วาด ตกแต่งภาพกราฟิ ก เช่น Photoshop ซ่ึงให้รูปแบบที่สวยงามมากกว่า Dreamweaver ดงั ตวั อย่างท่ีได้ นามาเสนอ ดงั น้ี 1. เทคนิค Layout ดว้ ยโปรแกรม Dreamweaver การออกแบบดว้ ยเลเอาท์ อาศยั เครื่องมือ 2 ชนิด คือ เลเอาท์ เทเบิล(Layout Table) สาหรับสร้าง ตาราง และ เลเอาท์ เซลล์ (Layout Cell) สาหรับวาดเซลลล์ ในตารางเพ่ือใสเน้ือหาซ่ึงเราสามารถปรับ ขนาด เคลื่อนยา้ ยตาแหน่งตารางและเซลลไ์ ดก้ ่อนใส่เน้ือหาข้นั ตอนการใชง้ านทาได้ ดังน้ี รู ปท่ี 6.1, 6.2 และ 6.3 ดงั น้ี

รูปท่ี 6.2 1.เลือกคาสง่ั (Insert bar) → Layout 2.เลือกแทบ็ คาส่งั → Layout 3.เลือกคาสั่ง → Layout Table → วาดเลเอาท์ เทเบิลลงในพ้ืนที่สามารถวาดซ้อนกันได้ใน ตวั อยา่ งจะวาดเลเอาทเ์ ทเบิลคลุมพ้ืนท่ีหนา้ เวบ็ เพจท้งั หมดก่อนแลว้ วาดเลเอาท์ เทเบิลยอ่ ยซอ้ นใน พ้ืนที่เลเอาท์ใหญ่อีก 3 เลเอาท์ เทเบิล เพ่ือเตรียมพ้ืนท้ี่ ส่วนหัวส่วนเมนูและส่วนเน้ือหาจะ สังเกตเห็นมีป้ายสีเขียวอย่บู นดา้ นซ้ายของทุกเลเอาท์ เทเบิล ป้ายสีเขียวน้ีเราสามารถคลิกเมาส์คา้ ง (Drag mouse) ลาก เพื่อยา้ ยตาแหน่งเลเอาท์ เทเบิล ไดก้ ารปรับขนาดเลเอาท์ เทเบิลทาไดโ้ ดยคลิกใน พ้ืนท้ี่ เส้นขอบสีเขียวของ แต่ละ เลเอาท์ เทเบิล รูปที่ 6.3 4.Draw Layout Cell เม่ือวาดเลเอาท์ เทเบิลแลว้ จะตอ้ งวาดเลเอาทเ์ ซลล์ ลงไปเพ่ือใชเ้ ป็ นพ้ืนท้ี่ใส่ เน้ือหาต่างๆ ก็คือพ้ืนท่ีของแท็ก TD นน่ั เอง (< TD >…< TD >) จะสังเกตเห็นวา่ พ้ืนที่เลเอาทเ์ ทเบิล มีสีเทาไม่สามารถพิมพข์ อ้ ความไดส้ ่วนพ้ืนที่เลเอาทเ์ ซลลจ์ ะมีสีขาวเส้นขอบสีน้าเงินสามารถพิมพ์ ขอ้ ความได้ ปรับขนาดไดโ้ ดยคลิกที่เสน้ ขอบสีน้าเงินเมื่อเกิดจุดแสดงข้นึ ปรับเช่นเดียวกบั เลเอาท์ เท เบิล ทกุ อยา่ ง รูปที่ 6.3 การวาดและปรับขนาดเลเอาท์ เซลล์ 5.ตาแหน่งป้ายของเลเอาท์ เทเบิลมีสีเขยี วสามารถDragลากที่ป้ายเพื่อยา้ ยตาแหน่ง เลเอาท์ เทเบิลได้ 6.แสดงตาแหน่งเลเอาท์ เซลล์ ที่วาดลงบนเลเอาท์ เทเบิล มมุ มองการทํางานใน Layout การทางานดว้ ยเครื่องมือเลเอาท์ ของโปรแกรม Dreamweaver มีมุมมอง (Mode) การทางานที่ ผอู้ อกแบบสามารถสลบั ไปมาเพื่อการจดั การ ใส่ขอ้ มูลตา่ ง ๆ ลงในเวบ็ มีท้งั หมด 3 โหมด ดงั รูปที่ 6.4

รูปท่ี 6.4 แสดงมุมมอง Mode การทํางานด้วยเคร่ืองมือ 1.Layout Mode เป็นกลุ่มเคร่ืองมือวาดแบบตาราง (เลเอาท์ เทเบิล) และวาดเซลล์ (เลเอาท์ เซลล)์ สามารปรับแตง่ ขนาดตามตอ้ งการ ดว้ ยการคลิกเมาส์ลาก เหมือนการวาดรูป 2.Expanded Tables Mode เป็นมุมมองภาพที่ขยายเส้นตารางและเส้นขอบเซลล์ ให้ หนา้ ชดั เจน ร่วมท้งั ขยายช่องตารางช่องไฟส่วนท่ีแคบปรับแตง่ ยากใหส้ ามารถคลิกเมาส์ปรับ ขยายไดง้ า่ ยข้ึน เป็นโหมดช่วยการทางานในการปรับตารางใหส้ ามารถทางานได้

หน่วยการเรียนที่ 7 การออกแบบด้วยเทคนิค Template การออกแบบเว็บด้วยเทคนคิ Template การออกแบบเว็บด้วยเทคนิค Template เป็ นการเรียนรู้การใชเคร่ืองมือของ Dreamweaver สร้าง แม่แบบสาหรับใช้สร้างหน้า เว็บเพจ .html ที่มีจานวนมากในเว็บไซต์ข้ึนได้อย่างรวดเร็ว เป็ นการ เสริม ประสิทธิภาพการสร้างเวบ็ ใหไ้ ดง้ านที่รวดเร็ว มีโอกาสผิดพลาดนอ้ ย มีเน้ือหาการเรียนรู้ดงั น้ี 1. ความรู้เกยี่ วกบั Template การสร้างเว็บเพจโดยทวั่ ไปจะสร้างหรือออกแบบไปทีละหน้า ในการออกแบบเว็บในเว็บไซต์ หน่ึงๆ จะมีส่วนท่ีซ้าๆ กนั เช่นส่วนหวั เวบ็ จะมีโลโกภ้ าพสัญลกั ษณ์เมนูสาคญั หรือส่วนของเมนู เขา้ สู่เน้ือหา ซ่ึงมกั ออกแบบไวใ้ นส่วนซา้ ยของเวบ็ ผอู้ อกแบบจะใหแ้ สดงในทุกหนา้ เอกสารเพ่ืออานวย ความสะดวกแก่ ผใู้ ชใ้ นการเขา้ ถึงขอ้ มูล จะเห็นวา่ หากมีการออกแบบหนา้ เวบ็ ที่มีส่วนเหมือนหรือซ้ากนั เกือบทุกหนา้ หาก ตอ้ งออกแบบใหม่ทุกหนา้ จะเสียเวลา โปรแกรม Dream weaverมีเคร่ืองมือช่วยสร้างงาน เรียกวา่ เทมเพลท (Template) หรือแม่แบบ มาใหใ้ ชง้ านทาใหก้ ารสร้างเวบ็ ขนาดใหญ่สามารถทาไดร้ วดเร็ว การสร้างแม่แบบ (Template) สาหรับเป็ นตน้ แบบสร้างเว็บจะทาการสร้างหน้าเอกสารโดยมีการ กาหนดใหม้ ีส่วนท่ีแกไ้ ขได้ และแกไ้ ขไม่ได้ เช่น ส่วนหวั ส่วน Hyper link ที่ไม่ใหแ้ กไ้ ขไวเ้ ม่ือจะ สร้าง หนา้ เวบ็ เพจ ก็เปิ ดแม่แบบข้ึนมา เม่ือมีการคลิกเมาส์ในพ้นื ท่ีแมแ่ บบ หนา้ เอกสารน้นั จะเปล่ียนสถานะเป็นหนา้ เอกสารเวบ็ ใหเ้ ราใส่เน้ือหาในส่วนที่กาหนดใหส้ ามารถ แกไ้ ขได้ จนไดห้ นา้ เวบ็ เพจตามตอ้ งการแลว้ สง่ั บนั ทึกเป็นเอกสารเวบ็ .html การทางานดว้ ยเทมเพลทจึงเป็น การช่วยใหก้ ารออกแบบเวบ็ ไซตข์ นาดใหญ่ทาไดอ้ ย่างรวดเร็วการผิดพลาดจากการลิงคไ์ ม่มี เพราะเม่ือสั่ง บนั ทึกโปรแกรมจะถามว่าจะอพั เดทการลิงค์ภายในไซตห์ รือไม่เมื่อเราตอบอพั เดท โปรแกรมจะปรับปรุง การลิงคถ์ ูกตอ้ งท้งั หมด การทางานเทมเพลทมีข้นั ตอนโดยสรุปดงั น้ี

2. สร้างเทมเพลทจากเว็บเพจ (ไฟล์ HTML) การสร้างเทมเพลทจากเวบ็ เพจ (ไฟลH์ TML) ที่มีอยแู่ ลว้ เป็นการนาเวบ็ ท่ีออกแบบไวแ้ ลว้ มาใช้เป็น แม่แบบหรือเทมเพลท ข้นั ตอนทาาไดเ้ พียงส่งบนั ทึกแฟ้มเป็ นเทมเพลทดงั น้ีเปิ ดไฟล์ HTML (ท่ีออกแบบ เรียบร้อยแลว้ ) > เมนู File > Save as Template ที่หนา้ ตา่ ง Save as Template ตรวจสอบ Site > ต้งั ช่ือ (Save as) > Save ตามลาดบั ดงั รูปท่ี 7.1 รูปที่ 7.1 แสดงหน้าต่างบนั ทึกไฟล์ .html เป็ นเทมเพลท (.dwt) 2. การสร้าง Template จากไฟล์ใหม่ การสร้าง Template มี 2 วธิ ีดงั น้ี 1. สร้างจากเมนู File มีข้นั ตอนดงั น้ีเลือกเมนู File > new > เขา้ หนา้ าต่าง New Document แลว้ ปฏิบตั ิตาม ข้นั ตอนดงั รูปที่ 7.2 1.เลือกเมนู General 2.เลือก Template page 3.เลือกรายการในส่วน Template page ตามตอ้ งการเช่นในที่น้ีเลือก HTML Template 4.แลว้ คลิกป่ มุ Create รูปท่ี 7.2 สร้าง Template ใหม่จากเมนู File > New

2.สร้างจากหน้าต่างพาเนล Assets โดยทว่ั ไปการสร้างเทมเพลทจะใชก้ ารสร้างจากหนา้ ต่าง Assets เพราะสะดวกและสามารถเห็นไฟล์ Template ท่ีมีอยเู่ ดิมไดว้ ิธีสร้างเทมเพลทจากพาเนล Assets ทาไดด้ งั ในรูปที่ 7.3 a. เร่ิมจากที่เมนู Windows > เลือกเปิ ด พาเนล Assets b. เลือกไอคอน Template c. คลิกป่ มุ New Template d. จะได้ Template ใหม่ใหต้ ้งั ชื่อ แลว้ กด Enter ซ่ึงจะทาให้เราได้ เทมเพลทใหม่ ที่ทา การบนั ทึก ไฟล์ .dwt เรียบร้อยแลว้ การนาเทมเพลทไปใชส้ ร้างหนา้ เวบ็ เพจทาไดโ้ ดยดบั เบิลคลิกท่ีไฟลเ์ ทมเพลทเพื่อเปิ ดไปท่ีหนา้ ต่าง ออกแบบเม่ือออกแบบเสร็จกบ็ นั ทึกเป็นไฟล์ .html เรากจะไดห้ นา้ เอกสารเวบ็ เพจ . html รูปท่ี 7.3 การสร้างไฟล์เทมเพลทใหม่จากพาเนล Assets

หน่วยการเรียนที่ 8 การออกแบบเว็บด้วยเทคนคิ Frame การออกแบบเว็บด้วยเทคนิคเฟรม (Frame) การออกแบบหนา้ เวบ็ ดว้ ยเทคนิคการแบ่งส่วนการทางานเป็ นส่วน ๆ ให้แต่ละส่วนมีอิสระต่อ กนั เช่นส่วนเน้ือหา สามารถเล่ือนไปแต่เมนูอยกู่ บั ทาใหผ้ ชู้ มสามารถคลิกเลือกดูรายการเน้ือหาไดอ้ ย่างสะดวก วิธีแบ่งหนา้ เอกสารเวบ็ เป็นส่วน ๆ โดยแต่ละส่วนแสดงผลอยหู่ นา้ เดียวกนั ไดน้ ้นั เรียกว่าการแบ่ง หนา้ เวบ็ ดว้ ย เฟรม ซ่ึงมีรายละเอียดการสร้างดงั น้ี 1. ความรู้เก่ียวกบั Frame เฟรม (Frame) คือ การแบ่งส่วนพ้ืนท่ีการแสดงผลบนเวบ็ บราวเซอร์ออกเป็นส่วน ๆ แต่ละส่วนจะ แสดงไฟล์ เวบ็ เพจหรือไฟล์ HTML ท่ีแตกต่างกนั ไดอ้ ยา่ งเป็นอิสระจากนกั การสร้างเวบ็ ดว้ ยเฟรมจะใชพ้ ้ืนที่ เต็มหนา้ จอคอมพิวเตอร์ท้งั หมดดงั น้นั การออกแบบจะตอ้ งคานวณขนาดความกวา้ งของแต่ละเฟรม คือไฟล์ HTML ใหต้ ้งั ตรงหนา้ จอคอมพิวเตอร์เพื่อให้ตาแหน่งขอ้ มูลอยูใ่ นตาแหน่งท่ีเราออกแบบ ขอ้ ดีของการใช้ เฟรมเข้ามาช่วยในการจดั หน้าเว็บเพจ คือ สามารถแสดงเว็บเพจได้หลายหน้าในจอภาพเดียวกนั และ เน่ืองจากเฟรมสามารถแบ่งพ้นื ที่หนา้ จอของเวบ็ บราวเซอร์ได้ จึงสะดวกต่อการกาหนดพ้ืนท่ีในการนาเสนอ เน้ือหาตามตอ้ งการได้ เฟรมเซ็ต (Frameset) คอื ไฟล์ HTML ที่ประกอบไปดว้ ยกลุ่มของเฟรม และคุณสมบตั ิ ต่างๆ ของ เฟรม เช่นขนาดของแตล่ ะเฟรม จานวนเฟรม ไฟล์ HTML ท่ีจะนามาใชใ้ นแต่ละเฟรม รวมท้งั การ เชื่อมโยงในแตละเฟรม ดงั รูปท่ี 8.1 รูปท่ี 8.1 แสดงตวั อย่างเฟรมและเฟรมเซ็ต

2. การสร้าง Frame และ Frameset การสร้างเว็บดว้ ยเฟรมเป็ นการใชเ้ ฟรมเซ็ต(Frameset)มาสร้างหนา้ เว็บเพจเพื่อให้การแสดงแสดง เน้ือหาในหนา้ เวบ็ แบ่งออกเป็นส่วนๆโดยแตล่ ะส่วนท่ีแบ่งเรียกวา่ เฟรม(Frame)เพ่อื ใหแ้ ต่ละส่วนของเน้ือหา เป็นอิสระตอ่ กนั เทคนิคการออกแบบดว้ ยเฟรมเราจะพบมากในเวบ็ ประเภท E-Learningซ่ึงใชว้ ิธีตรึงรายการ หวั ขอ้ เน้ือหา (เมนูลิงค)์ ไวด้ า้ นซา้ ยของจอภาพ และใหส้ ่วนของเน้ีอหาซ่ึงจะจดั ไวด้ า้ นขวาสามารถเลื่อนไป ไดโ้ ดยใชแ้ ถบเล่ือน (Scrollbar) ทาให้ผูเ้ รียนทราบว่ากาลงั ศึกษาเน้ือหาอะไรอยู่หรือบางกรณีมีการใชพ้ ียง เฟรมเดียวแทรกในหน้าเว็บเป็ นกรอบเล็กๆโดยภายในกรอบเน้ือหามีแถบเล่ือนเพ่ือนาเสนอรายละเอียด เน้ือหาเพม่ิ เป็นการเนน้ สร้างความน่าสนใจและใชพ้ ้นื ที่หนา้ เวบ็ เพจใหเ้ สนอเน้ือหาใหม้ ากท่ีสุดการออกแบบ เวบ็ ดว้ ยเทคนิคเฟรมจะตอ้ งวางแผนการออกแบบอย่างเป็นข้นั ตอนและตอ้ งรู้ว่าเรากาลงั ทางานอยู่ในเฟรม หรือเฟรมเซ็ตเอกสารประกอบการเรียนการสอนน้ีจะเนน้ การเสนอเน้ือหาการสร้างเวบ็ แบบเฟรมเซ็ตเท่าน้นั สาหรับการแทรกเฟรมเด่ียวในเน้ือหาได้ นาCode HTML ไวใ้ นตอนทา้ ยของบทเรียนซ่ึงสามารถนาไปใช้ แทรกเน้ือหาเวบ็ ทว่ั ไปไดเ้ ลย การสร้างเฟรม และเฟรมเซ็ต เพื่อนาเสนอหนา้ เวบ็ เพจแบบแบ่งเป็นส่วนๆดว้ ยโปรแกรมDreamweaver8.0สามารถสร้างได้ 2 วิธี คือ 1. สร้างโดยใชแ้ บบสาเร็จของโปรแกรม 2. สร้างโดยการวาดใหมด่ ว้ ยตนเอง 1.สร้างโดยใช้แบบสําเร็จของโปรแกรม การสร้างเฟรมจากแบบสาเร็จที่เป็นโปรแกรมเตรียมไวใ้ หม้ ีวธิ ีใชค้ าสั่งเรียกมาได้ 2 วธิ ี 1.1สร้างจากเมนู File มีข้นั ตอนดงั รูปที่ 8.2 1. เริ่มจากคลิกเลือกเมนูคาสงั่ File > New 2. จะปรากฏกรอบโตต้ อบ New Document ใหค้ ลิกท่ีแทบ็ General เลือก Framesetsในส่วน Category แลว้ เลือกรูปแบบของเฟรมเซ็ตในส่วน Framesets โดยสามารถดูตวั อย่างไดจ้ าก Preview ทางดา้ นขวามือจากน้นั คลิกป่ ุม Create 1.จะปรากฏเฟรมเซ็ตตามแบบท่ีเลือกไวต้ ามที่แสดงหมายเลข3เป็นพาเนลเคร่ืองมือควบคุม เฟรม เซ็ตและหนต้ ่างProperties Inspectorดา้ นลา่ งจะเป็นของเฟรมเซ็ตแตห่ ากคลิกเมาส์ที่เฟรมยอ่ ยๆ กจ็ ะเปลี่ยน Properties ไปเป็นแบบเวบ็ เพจ HTML ธรรมดา

รูปที่ 8.2 แสดงการสร้างเฟรมจากคาํ ส่ัง File > New 1.1 สร้างจากเมนู Layout มีข้นั ตอนดงั รูปที่ 8.3 1. คลิกท่ีแทบ็ Layout จาก Insert Bar 2. จากน้นั คลิกที่ไอคอน Standard Mode 3. คลิกที่ไอคอน Frame เพื่อเลือกรูปแบบเฟรมที่ตอ้ งการสร้าง 4. เลือกรูปแบบเฟรมตามตอ้ งการกจ็ ะไดช้ ุดเฟรมเซ็ตทาการปรับแตง่ ขนาดเฟรมต่อไป

หน่วยการเรียนท่ี 9 การสร้างฟอร์ม การสร้างฟอร์มส่งข้อมูลบนเวบ็ การส่งขอ้ มลู บนเวบ็ จากเครื่องลกู ข่าย (Client) หรือผใู้ ชง้ านไปยงั เคร่ือง Server เพื่อนาขอ้ มูลไปเก็บ หรือประมวลผลจะตอ้ งมีแบบฟอร์มกรอกขอ้ มูลให้ผูใ้ ชก้ รอกแบบฟอร์มท่ีใช้มีหลายแบบให้เลือกใช้ตาม ความตอ้ งการของผูอ้ อกแบบฐานขอ้ มูลในหน่วยการเรียนน้ีจะแนะนาการสร้างฟอร์มแบบต่างๆที่มีใชบ้ น อินเทอร์เนต็ เพอื่ ใหน้ กั เรียนไดฝ้ ึกสร้างและนาไปใชง้ านต่อไป 1. การใช้งาน Form ในเวบ็ ไซต์ ฟอร์ม(Form) เป็ นเคร่ืองมือโต้ตอบในเว็บประเภทไดนามิก (Dynamic Web) ระหว่างเครื่ อง ผใู้ ช(้ Client)กบั เคร่ืองบริการหรือServerเพ่ือนาขอ้ มูลไปประมวลผลต่อเช่นการส่งใบสมคั รเป็ นสมาชิกการ ส่ังซ้ือของผ่านอินเทอร์เน็ตดงั ตวั อยา่ งฟอร์มการสมคั รสมาชิกรูปที่9.1 การออกแบบเวบ็ ประเภท ไดนามิก ต้องใช้ภาษา CGI Script ข้ึนมาเสริมกับภาษา HTML เช่น Java , JavaScript , ASP , JSP , PHP, MySQL, CGI , PERL เป็ นตน้ เพื่อเขียนคาส่ังใหม่การประมวลผลขอ้ มูลและนาผลแจ้งต่อผูใ้ ชง้ านต่างๆใน ที่น้ีจะ กล่าวถึงเฉพาะการสร้างรูปแบบ ฟอร์มที่ใชส้ ่งขอ้ มูเทา่ น้นั รูปท่ี 9.1 ตวั อย่างฟอร์มทีใ่ ช้ในอนิ เทอร์เน็ต

การทาํ งานของฟอร์มส่งข้อมูลในเวบ็ ไซต์มดี งั นี้ 1. ผใู้ ชง้ านป้อนขอ้ มลู ลงในฟอร์ม เลือกตาแหน่ง (Server) เป้าหมายแลว้ คลิก Sent หรือ Submit 2. เม่ือ Server ไดร้ ับขอ้ มูลจะส่งให้CGI Script ทาการประมวลผล 3. CGI Script ประมวลผลแลว้ แสดงผลลพั ธ์ท่ีได้ การส่งขอ้ มลู จากฟอร์ม ไป Server ให้ CGI Script ทาการประมวลผลมี 2 วธิ ีคือ 1. GET เป็นการส่งขอ้ มูลจากฟอร์มพร้อมกนั ท้งั หมดผา่ น Url ไปยงั CGI Script (ทาใหม้ ีขอ้ เสีย ตรงท่ีระหวา่ งการส่ง Url จะแสดงเสน้ ทางช่ือไฟลท์ ้งั หมดทาใหง้ า่ ยต่อการ Hack) 2. POST เป็นการส่งขอ้ มลู จากฟอร์มไปยงั CGI Script ทีละบรรทดั ซ่ึงเป็นแบบที่นิยมใช้ 2. เครื่องมือสร้างฟอร์ม โปรแกรม Dreamweaver ไดเ้ ตรียมเคร่ืองมือสร้าง from แบบต่างๆ ไวใ้ ห้ในการนาไปใชจ้ ริงผูใ้ ช้ ตอ้ งเขยี นโปรแกรมสคริปต์ เช่น PHP, ASP, JAVA, CGI, PERL เป็นตน้ ส่งใหท้ างานดว้ ยเสมอดงั รูปท่ี 9.2 รูปท่ี 9.2 เคร่ืองมือสร้าง Form ของ Dreamweaver 8.0 1. คาสั่งสร้าง Form 8. แบบลิสรายการ 2. ฟิ ลดก์ รอกขอ้ ความ 9. แบบรายการเช่ือมโยง 3. ฟิ ลดซ์ ่อน 10. ฟิ ลดร์ ูปภาพ 4. ฟิ ลดก์ รอกขอ้ ความแบบหลายบรรทดั 11. กรอบสาหรับเลือกไฟล์ 5. แบบเช็คบอ็ กซ์ 12. ป่ ุมกด 6. แบบตวั เลือก 13. ฟิ ลดแ์ ถบขอ้ ความ 7. แบบกล่มุ ตวั เลือก 14. ฟิ ลดจ์ ดั กลุม่ ฟอร์ม การเรียกใชเ้ คร่ืองมือสร้างฟอร์มเม่ือกาหนดตาแหน่งโดยคลิกวางเคอร์เซอร์ เรียบร้อยแลว้ เลือก Insert bar > Form จะเห็นรายการ ฟอร์มใหเ้ ลือกใชง้ านซ่ึงการเลือกใชจ้ ะตอ้ งเร่ิมท้่ีไอคอน Form ตาม หมายเลข1ก่อนเม่ือคลิกFormจะปรากฏเสน้ ประสีแดงเป็นเสน้ แสดงขอบเขต Formซ่ึงภายในเส้นขอบเขตน้ี เราสามารถสร้างแบบฟอร์มโดยใชต้ ารางมากาหนดพ้นื ที่ออกแบบเหมือน ออกแบบหนา้ เวบ็ เพจทว่ั ไปและ สามารถใชค้ าสงั่ สร้างฟอร์มไดล้ ายแบบในกรอบเส้นประสีแดงดงั รูปที่ 9.3

1. เส้นประสีแดง แสดงขอบเขตท่ีสามารถสร้างฟอร์มได้ 2. แสดงสถานะ Tag Form 3. แสดง Properties ของ Form 3.1 From name ใหต้ อ้ งชื่อเพ่ือใชเ้ ขียนสคริปตค์ าสั่ง 3.2 Actionใหร้ ะบุปลายทางหรือServerที่จะส่งขอ้ มลู จากฟอร์มน้ีไปประมวลผล 3.3 Method เลือกวิธีการส่งขอ้ มลู (แบบ GET หรือ POST) ไปประมวลผลที่ CGI Script 4. ตารางที่เรียกมาเพื่อกาหนดพ้ืนที่สร้างฟอร์ม รูปท่ี 9.3 กรอบพืน้ ท่สี ร้างฟอร์มและการกาํ หนดรายละเอยี ด