บทที่ 2...
TRANSCRIPT
บทท 2
เอกสารและงานวจยทเกยวของ หลกการโปรแกรมบนทกขอมลผลงานนกเรยนนกศกษาแผนกเทคนคคอมพวเตอร ในครง
นผจดท าไดรวบรวมแนวคดทฤษฏและหลกการตางๆทเกยวของ โดยแบงออกเปนหวขอ ดงตอไปน 1. ทฤษฏทเกยวของ 1.1 ประวตAdobe Dreamweaver 1.2 การท างานของภาษาตางๆ 1.3 ประวตของโปรแกรม HTML 1.4 โครงสรางค าสงของ HTML
1.5 โครงสรางหลกของHTML 1.6 ค าสงในหวขอของ head(Head Section) 1.7 ค าสงแสดงสญลกษณพเศษตางๆ 1.8 เชอมตอเอกสารดวย hyperlink 1.9 ลงคเวบภายนอก 1.10 รปแบบของ from 1.11 การใสในรปเวบเพจ 1.12 การใสภาพพนหลง ใหกบเวบเพจ 1.13 การใชงานสในเวบเพจ 1.14 ประวตความเปนมาของ Adobe Photohop 1.15 การใชงานของ adobe photoshop
2. งานวจยทเกยวของ
4
2.1 ทฤษฏทเกยวของ 2.1.1 ประวตของโปรแกรม Adobe Dreamweave อะโดบดรมวฟเวอรชอภาษาองกฤษคอ (Adobe Dreamweaver) หรอชอเดมคอแมโครมเดย ดรมวฟเวอร (Macromedia Dreamweaver) เปนโปรแกรมแกไข HTML พฒนาโดยบรษทแมโครมเดย (ปจจบนควบกจการรวมกบบรษทอะโดบซสเตมส) ส าหรบการออกแบบเวบไซตในรปแบบ WYSIWYG กบการควบคมของสวนแกไขรหส HTML ในการพฒนาโปรแกรมทมการรวมทงสองแบบเขาดวยกนแบบน ท าให ดรมวฟเวอรเปนโปรแกรมทแตกตางจากโปรแกรมอนๆ ในประเภทเดยวกน ในชวงปลายปทศวรรษ 2533 จนถงปพ.ศ. 2544 ดรมวฟเวอรมสดสวนตลาดโปรแกรมแกไข HTML อยมากกวา 70% ดงแสดงในภาพท 2-1
ภาพท 2-1 Adobe Dreamweaver
ดรมวฟเวอรมทงในระบบปฏบตการแมคอนทอช และไมโครซอฟทวนโดวส ดรมวฟเวอรยงสามารถท างานบนระบบปฏบตการแบบยนกซ ผานโปรแกรมจ าลองอยาง WINEได รนลาสดคอ ดรมวฟเวอร CC (2015) ค าวา Dreamweaver หรอ ดรมวฟเวอร หมายถง ทอฝนหรอสานฝนในภาษาองกฤษโปรแกรม Dreamweaver ไดรบการพฒนาขนโดยบรษท Macromedia ใชชอวา Macromedia Dreamweaver โดยเรมออกจ าหนายเมอเดอน ธนวาคม พ.ศ. 2540 ตามมาดวย Version 1.2 เมอเดอนมนาคม พ.ศ. 2541 และออกรนตางๆ โดยสรป คอ เดอน ธนวาคม พ.ศ. 2541 ออกรน Dreamweaver 2.0 เดอน ธนวาคม พ.ศ. 2542 ออกรน Dreamweaver 3.0 เดอน มถนายน พ.ศ. 2543 ออกรน Dreamweaver Ultradev 1.0 เดอน ธนวาคม พ.ศ. 2543 ออกรน Dreamweaver 4.0 เดอน พฤษภาคม พ.ศ. 2545 ออกรน Dreamweaver MX 6.0 เดอน กนยายน พ.ศ. 2546 ออกรน Dreamweaver MX 2004 เดอน กนยายน พ.ศ. 2548 ออกรน Dreamweaver 8 เดอน เมษายน พ.ศ. 2550 ออกรน Dreamweaver CS3 เปนเวอรชนแรก เดอน กนยายน พ.ศ. 2551 ออกรน Dreamweaver CS4 เดอน เมษายน พ.ศ. 2553 ออกรน Dreamweaver CS5
5
เดอน เมษายน พ.ศ. 2555 ออกรน Dreamweaver CS6 2.1.2 การท างานกบภาษาตางๆ
ดรมวฟเวอร สามารถท างานกบภาษาคอมพวเตอรในการเขยนเวบไซตแบบไดนามค ซงมการใช HTML เปนตวแสดงผลของเอกสาร เชน ASP, ASP. NET, PHP, JSP และ ColdFusion รวมถงการจดการฐานขอมลตางๆ อกดวย และในเวอรชนลาสด (เวอรชน 8) ยงสามารถท างานรวมกบ XML และ CSS ไดอยางงายดาย
2.1.2.1 มมมองใน dreamwever (1) มมมองแบบ Code เปนมมมองทใชในการแกไขโคด HTML หากผทจะใช
มมมอง Code ในการจดการกบไฟลตองมความรเกยวกบโคด HTML (2) มมมองแบบ split เปนมมมองทแสดงใหเหนทงโคด HTML และมมมอง
ปรกต ซงจะบอกใหทราบวาการท างานกบไฟล ขณะนนอยในสวนใดของโคด HTML กบมมมองปรกต
(3) มมมองแบบ Design เปนมมมองการท างานปรกต ทแสดงเหมอนจรงของ เอกสาร 2.1.3 ประวตของโปรแกรม HTML
เอชทเอมแอล (HTML: Hypertext Markup Language ภาษามารกอปขอความหลายมต) เปนภาษามารกอปหลกในปจจบนทใชในการสรางเวบเพจ หรอขอมลอนทเรยกดผานทางเวบเบราวเซอร ซงตวโคดจะแสดงโครงสรางของขอมลในการแสดงหวขอ ลงก ยอหนา รายการ รวมถงการสรางแบบฟอรมเชอมโยงภาพหรอวดโอดวย โครงสรางของโคดเอชทเอมแอลจะอยในลกษณะภายในวงเลบสามเหลยม เอชทเอมแอลเรมพฒนาโดย ทม เบอรเนอรส ล (Tim Berners Lee) ส าหรบภาษา SGML
ในปจจบน HTML เปนมาตรฐานหนงของ ISO ซงจดการโดย World Wide Web Consortium (W3C) ในปจจบน ทาง W3C ผลกดน รปแบบของ HTML แบบใหม ทเรยกวา XHTML ซงเปนลกษณะของโครงสราง XML แบบหนงทมหลกเกณฑในการก าหนดโครงสรางของโปรแกรมทมรปแบบทมาตรฐานกวา มาทดแทนใช HTML รน 4.01 ทใชกนอยในปจจบน [1] ขณะท HTML รน 5 ยงคงยงอยในระหวางการพจารณา โดยไดมการออกดราฟตมาเสนอเมอวนท 22 มกราคม 2551 HTML ยงคงเปนรปแบบไฟลอยางหนง ส าหรบ .html และ ส าหรบ .htm ทใชในระบบปฏบตการทรองรบ รปแบบนามสกล 3 ตวอกษร
6
2.1.4 โครงสรางค าสงของ HTML 2.1.4.1 การใชงานรายละเอยดค าสงของ HTML โดยการใชงานหลกจะมดงน (1) ค าสง หรอ Tag เปนลกษณะเฉพาะของภาษา HTML ใชในการระบรปแบบ
ค าสง หรอการลงรหสค าสง HTML ภายในเครองหมาย less-than bracket ( < ) และ greater-than bracket( > ) โดยท Tag HTML แบงได 2 ลกษณะ คอ
Tag เดยว เปน Tag ทไมตองมการปดรหส เชน <HR>, <BR> เปนตน Tag เปด/ปด รปแบบของ tag นจะเปนแบบ <tag></tag> โดยท<tag> เรา
เรยกวา tag เปด </tag> เราเรยกวา tag ปด 2.1.4.2 Attributes เปนตวบอกรายละเอยดของ tag นนเชน <span align = 'left'> ...
</span> เปนการบอกวาใหอกษรทอยใน tag นชดซาย 2.1,4.3 not case sensitive หมายถง คณจะพมพ <BR> หรอ <br> กได ผลลพธออกมา
ไมตางกน 2.1.5 โครงสรางของหลกของ HTML
โครงสรางหลกของ HTML กจะเรมดวย <html> และจบดวย </html> เสมอ ซงชดค าสงทใชจะแยกเปน 2 สวนคอ
2.1.5.1 head ค าสงทอยในสวนนจะใชบรรยายรายละเอยดเกยวกบ web page ซงจะไมแสดงผลท web page โดยตรง
2.1.5.2 body ค าสงทอยในสวนนจะใชในการจดรปแบบตวอกษร จดหนา ใสรปภาพ ซงตวอกษรในสวนนจะแสดงท web brower โดยตรง ดงแสดงในภาพท 2-2
<html> <head> ค าสงในหวขอของ head </head> <body> ค าสงในหวขอของ body ในสวนนจะเปนสวนทใชแสดงผล </body> </html>
ภาพท 2-2 โครงสราง HTML
7
2.1.6 ค าสงในหวขอของ head (Head Section) Head Section เปนสวนทใชอธบายเกยวกบขอมลเฉพาะของหนาเวบนนๆ เชน ชอเรอง
ของหนาเวบ (Title), ชอผจดท าเวบ (Author), คยเวรดส าหรบการคนหา (Keyword) โดยม Tag ส าคญ ดงแสดงในภาพท 2-3
<HEAD> <TITLE>ขอความอธบายชอเรองของเวบ</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME="Author" CONTENT="ชอผพฒนาเวบ"> <META NAME="KeyWords" CONTENT="ขอความ 1, ขอความ 2 "> </HEAD>
ภาพท 2-3 ค าสงในหวขอของ head (Head Section) 2.1.6.1 TITLE ขอความทใชเปน TITLE ไมควรพมพเกน 64 ตวอกษร, ไมตองใสลกษณะพเศษ เชน ตวหนา, เอยง หรอส โดยขอความในสวนนจะแสดงผลใน title bar ของ web browser 2.1.6.2 META Tag META จะไมปรากฏผลบนเบราเซอร แตจะเปนสวนส าคญ ในการจดอนดบบญชของเวบส าหรบผทใหบรการการสบคนเวบหรอหาขอมลตางๆ (Search, Engine, เชน google,yahoo) 2.1.6.3 charset TIS-620 ใชบอกวาใชชดตวอกษรแบบใดในการแสดงผล ภาษาไทยเราใช charset=TIS-620 หรออาจเปน charset=windows-874 กได ตอนนแนะน าใหใชเป charset=utf-8 2.1.6.4 keyword ดงภาพดานบนจะเหนวาเราสามารถใช keywords มากกวา 1 ค าไดโดยใชเครองหมาย (,) ในการคนระหวางค า
8
2.1.7 ค าสงแสดงสญลกษณพเศษตางๆ สญลกษณพเศษบางตวเชน เครองหมายมากวา (>) หรอ เครองหมายนอยกวา (<) ซงเครองหมายเหลานใชในภาษา HTML ดวยท าใหตวอกษรทอยในเครองหมายเหลานกลายเปน Tag หมด หรอเครองหมายทไมมบนคบอรด แตถาเราตองการแสดงเครองหมายเหลานตองใช Entity Name แทน ตามแบบ ดงแสดงในภาพท 2-4
ภาพท 2-4 สญลกษณ
2.1.8 เชอมตอเอกสารของเราดวย hyperlink hyperlink หรอเราเรยกกนสนวา link ซงเราจะเหนอยในทกเวบไซต ใชเพอเปดเวบเพจ
อนๆใน เวบไซตของเรา หรอเชอมโยงไปท web site หรอ เวบเพจอนๆ ซงมความส าคญมากในเวบไซตดงแสดงในภาพท 2-5 และ 2-6
9
ภาพท 2-5 การสรางhyperlink
ภาพท 2-6 หลกการสราง hyperlink
10
รปแบบของ hyperlink ภายใน directory เดยวกน ดงแสดงในภาพท 2-7
<a href='ชอไฟลทตองการลงค'> ตวอกษรทจะใชแสดง </a>
ภาพท 2-7 รปแบบของ hyperlink ภายใน directory เดยวกน รปแบบของ hyperlink จาก directory ทสงกวา ดงแสดงในภาพท 2-8
<a href='ชอ directory ทเกบไฟลไว/ชอไฟลทตองการลงค'> ตวอกษรทจะใชแสดง </a>
ภาพท 2-8 รปแบบของ hyperlink จาก directory ทสงกวา รปแบบของ hyperlink จาก directory ทต ากวา 1 ขน ดงแสดงในภาพท 2-9
<a href='../ชอไฟลทตองการลงค'> ตวอกษรทจะใชแสดง </a>
ภาพท 2-9 รปแบบของ hyperlink จาก directory ทต ากวา 1 ขน 2.1.9 ลงคกบเวบภายนอก รปแบบของ hyperlink กบเวบภายนอก ดงแสดงในภาพท 2-10
<a href='http://domain name'> ตวอกษรทจะใชแสดง </a>
ภาพท 2-10 รปแบบของ hyperlink กบเวบภายนอก 2.1.10 รปแบบของ form ดงแสดงในภาพท 2-11
<form> ชนดของคาทรบเชน text , password </form>
ภาพท 2-11 รปแบบของ form ในตวอยางเปนการเขยน Text form ผใชงานสามารถกรอกขอมลทเปนตวอกษรลงไปได จะสงเกตวา ใน input tag จะม Attibute name อยซงเราจะใชในการอางองเมอเขยน CGI Program เราสามารถก าหนดขนาดของ text form ไดโดย ใช Attibute ค าสง size="ขนาดทตองการ ดงแสดงในภาพท 2-12
11
ภาพท 2-12 แบบฟอรมรบคาอกษร
2.1.10.1 แบบฟอรมรบคา password ตวอยางเปนการเขยน Password form เมอผใชกรอกขอมลลงไปในฟอรมจะแสดงสญลกษณ " ? " เพอไมใหคนอนเหน password ทเรากรอก ดงแสดงในภาพท 2-13
ภาพท 2-13 แบบฟอรมรบคา password
12
2.1.10.2 ratio form ดงแสดงในภาพท 2-14
ภาพท 2-14 รปแสดง ratio form
2.1.10.3 Checkboxes form ดงแสดงในภาพท 2-15
ภาพท 2-15 รปแสดง checkboxes form
13
2.1.10.4 การสรางปมยนยนรบคา สงเกตท search เปนปม ปมหนงทใชในการยนยนวาเราพมพขอมลเสรจแลวหรอเลอกเสรจแลวเราตองการใหสงคานไปให CGI program ประมวลผล ปมยนยนจะใชในทกฟอรมของ html ซงการสงคาไปประมวลผลจะมดวยการ 2 method คอ get , post ซงเราจะพดกนในหวขอของ PHP ดงแสดงในภาพท 2-16
ภาพท 2-16 รปแสดงการสรางปมยนยนรบคา
2.1.10.5 drop down box drop down เมนในการเลอกขอมลแบบหนง ทใหคณเลอกขอมลไดขอมล
เดยว เหมาะกบการใชกบขอมลทมากๆ เชน กรอกขอมลทอย โดยใช dropdown ใหเลอกจงหวด ดงแสดงในภาพท 2-17
ภาพท 2-17 รปแสดง drop down box
14
2.1.10.6 text area text area เหมาะส าหรบแบบฟอรมทตองกรอกขอมลจ านวนมากๆเชน ทอย ดงแสดงในภาพท 2-18
ภาพท 2-18 รปแสดง text area
2.1.10.7 Fieldset fieldset จะสรางขอบใหขอมลของคณและมหวขอใหท าใหอาขอมลไดงายขนดงแสดงในภาพท 2-19
ภาพท 2-19 รปภาพตวอยางค าสง fieldset
15
2.1.11 การใสรปในเวบเพจ รปนนสามารถบรรยายรายละเอยดไดดกวาค าพดมาก ดงนนแทบทกเวบไซตจงมรปอยเกอบทกเวบไซต ในบทความนเราจะมาใสรปในเวบเพจกน ดงแสดงในภาพท 2-20
ภาพท 2-20 การใสรปในเวบเพจ
2.1.11.1 การใสรปพนหลง รปพนหลงจะถกแสดงผลซ ากนเองโดยแมวารปจะรปจะมขนาดเลก หรอสนเพยงใดกตาม ดงแสดงในภาพท 2-21
ภาพท 2-21 การใสรปพนหลง
16
2.1.11.2 การจดต าแหนงของรปในตวอกษร จะเปนการจดต าแหนงของรปในตวอกษร เมอเรามตวอกษรกบภาพอยดวยกน เราจะใช Align Attribute เพอจดต าแหนงของภาพ ดงแสดงในภาพท 2-22
ภาพท 2-22 การจดต าแหนงของรปอกษร
17
2.1.11.3 การจดต าแหนงของรปใหชดซาย หรอขวา จะเปนการจดรปของเราใหชดซายหรอชดขวา เมอแสดงผล ดงแสดงใน ภาพท 2-23
ภาพท 2-23 การจดต าแหนงใหรปชดซาย หรอ ขวา
18
2.1.11.4 การใชค าสงก าหนดขนาดของรป การใสขนาดของรปนนเราจะใสหรอไมใสกได ถาเราใสขนาด การแสดงผลของรปกจะเปลยนแปลงตามทเราใส แตขนาดของรปจรงๆจะไมเปลยนแปลง ดงแสดงในภาพท 2-24
ภาพท 2-24 ค าสงก าหนดขนาดของรปภาพ
19
2.1.11.5 ท าใหรปภาพเปน hyperlink การท าใหรปภาพเปน hyperlink กใหใสค าสงของ hyperlink ครอบค าสงแสดงภาพ เทานนเอง ดงแสดงในภาพท 2-25
ภาพท 2-25 ค าสงใหรปภาพเปน hyperlink
2.1.11.6 ค าสงทใชในการแสดงพกดในภาพ เปนการแสดงพกดทอยในภาพโดยจะแสดงท status bar เปนพกดคา X,Y ตามจดทเมาสของเราอยดานบน โดยจด 0,0 จะอยทดายซายบนของภาพ ดงแสดงในภาพท 2-26
ภาพท 2-26 ค าสงแสดงพกดของรปภาพ
20
2.1.11.7 สราง hyperlink ดวยพกดในรปภาพ ในหวขอทแลวเราทราบพกดจดของภาพแลว ในหวขอนจะใชพกดจดในภาพมาสราง hyperlink ซงในตวอยางจะเหนวาม hyperlink ในรปภาพอย 2 ทคอ keyboard,mouse ดงแสดงในภาพท 2-27
ภาพท 2-27 การสราง hyperlink ดวยพกดรปภาพ
2.1.12 การใสภาพพนหลง ใหเวบเพจ ภาพพนหลงเปนสงทท าใหเวบของเราดสวยงามแตถาเราใชภาพพนหลงทไมด อาจสงผลเสยกบเวบเราได ในบทความนจะเปนตวอยางของการใสพนหลงทด และไมด 2.1.12.1 สพนหลงทด ตวอยางของภาพพนหลงทด สของตวหนงสอและพนหลงแตกตางกนเหนไดชดเจน และสพนหลงเปนสทออนท าใหอานแลวสบายตา ดงแสดงภาพท 2-28
ภาพท 2-28 การแสดงตวอยางค าสงใสพนหลง
21
2.1.12.2 สพนหลงทไมด ตวอยางพนหลงทไมดเนองจากวาสพนหลง และตวหนงสอเปนสสวางเหมอนกน ท าใหอานไดยาก ดงแสดงในภาพท 2-29
ภาพท 2-29 การใสสพนทไมด
2.1.12.3 ตวอยาง code ทใชกบสพนหลง ดงแสดงในภาพท 2-30
<body bgcolor="#000000"> ก าหนดสโดยใช hexadecimal number <body bgcolor="rgb(0,0,0)"> ก าหนด ส โดย ใ ช RGB value <body bgcolor="black"> ก าหนดสโดยใชชอของสเอง
ภาพท 2-30 ตวอยาง code ทใชกบสพนหลง
2.1.12.4 การใชภาพพนหลง ภาพพนหลงเปนสงทท าใหเวบของเราดดขน แตเราตองค านงถง เรองตอไปนดวย
(1) การใสภาพพนหลงทใหญมาก จะท าใหเวบของเราโหลดไดชาลง (2) การใสภาพพนหลงทไมดจะท าใหอานขอความไดยาก (3) การใสภาพพนหลงอาจท าใหสบสนระหวางภาพทเราใชสอความหมาย
กบภาพ (4) การใสภาพพนหลงท าใหตวอกษรอาจลดความเดนชดลงไป
22
2.1.12.5 code ทใชใสภาพพนหลง เราใส code อางองทอยของภาพ ไดแบบเดยวกบทเราเขยนอางอง hyperlink ดงแสดงในภาพท 2-31
<body background="logo.jpt"> <body background="http://www.hellomyweb.com/images/logo.jpg">
ภาพท 2-31 การใสภาพพนหลง
2.1.12.6 การใสภาพพนหลงทด ตวอยางการใสภาพพนหลงทด ท าใหเวบไซตดนาสนใจขน ดงแสดงใน ภาพท 2-32
ภาพท 2-32 ตวอยางการใสภาพทเขากบเวบ
23
2.1.12.7 การใสภาพพนหลงทไมด ตวอยางการใสภาพพนหลงทไมดท าใหเวบไซตมประสทธภาพลดลงไป ดงแสดงในภาพท 2-33
ภาพท 2-33 ตวอยางทใสพนหลงไมด
24
2.1.13 การใชงานสในเวบเพจ สสนนนอยคกบเวบเพจอยแลว เพราะนอกจากจะท าใหเวบดสวยงามนาสนใจแลว ยงชวยใหการอธบายขอความดขนอก ในบทความนเราจะมดการใชงานสกน 2.1.13.1 รายชอสแบบ HEX value และ แบบ RGB value ตารางท 2.1 ตารางรายชอสแบบ HEX value และ แบบ RGB value
Color Color HEX Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
25
2.1.13.2 ตวอยาง code สในแบบ hex value และแบบ ชอของส ตารางท 2.2 ตวอยาง code สในแบบ hex value และแบบ ชอของส
Color Name Color HEX Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
26
Color Name Color HEX Color
DarkGray #A9A9A9
DarkGrey #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DimGrey #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
ตารางท 2.3 ตวอยาง code สในแบบ hex value และแบบ ชอของส (ตอ)
27
Color Name Color HEX Color
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Grey #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGray #D3D3D3
LightGrey #D3D3D3
LightGreen #90EE90
ตารางท 2.4 ตวอยาง code สในแบบ hex value และแบบ ชอของส (ตอ)
28
Color Name Color HEX Color
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSlateGrey #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
ตารางท 2.5 ตวอยาง code สในแบบ hex value และแบบ ชอของส (ตอ)
29
Color Name Color HEX Color
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
ตารางท 2.6 ตวอยาง code สในแบบ hex value และแบบ ชอของส (ตอ)
30
Color Name Color HEX Color
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
SlateGrey #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
2.1.14 ประวตความเปนมาของAdobe Photoshop ประวตความเปนมา Adobe Photoshop เปนโปรแกรมของบรษท Adobe (อานวา อะ-โด-บ) ซงเปนผพฒนาโปรแกรมกราฟครายใหญ ไมวาจะเปนโปรแกรม Illustrator, PageMaker และ Acrobat
ตารางท 2.7 ตวอยาง code สในแบบ hex value และแบบ ชอของส (ตอ)
31
โปรแกรม Photoshop เวอรชนแรกนนเรมตนสรางขนในป ค.ศ. 1990 และไดรบการพฒนามาเรอย ๆ จากเวอรชน 2, 2.5, 3, 4, 5, 5.5 เวอรชน 6, 7, CS จนถงเวอรชนลาสดในปจจปน ทเรยกกนวาเวอรชน CS3 , CS4 โดยไดท าการเพมประสทธภาพการจดการกบภาพกราฟคขนเรอย ๆ จากเดมทเนนใชงานเพอการสรางภาพสงพมพ กหนมาเนนเกยวกบการจดการภาพกราฟคทใชบนเวบมากยงขน และนอกจากนแลวยงไดสรางโปรแกรม ImageReady ซงเปนโปรแกรมทใชสรางภาพเคลอนไหวควบคมากบโปรแกรม Photoshop อกดวย เพอเพมความสามารถเกยวกบการท าภาพกราฟคทใชส าหรบการท าเวบโดยเฉพาะปจจบนโปรแกรม Photoshop เปนโปรแกรมทไดรบความนยมอยางมากจากผ สรางเวบไซต ไมวาจะเปนการน ามาสรางหรอตกแตงภาพ เนองมาจากคณสมบตทโดดเดน ใชงานงาย มเอฟเฟคตาง ๆ ใหเลอกใชงานมากมาย 2.1.14.1 จดก าเนดจรงๆ ของ Photoshop หลายคนคงคดวา Photoshop เกดมาจากทมโปรแกรมเมอรของ Adobe แตจรงๆ มนถกสรางโดยสองพนองนกศกษาปรญญาเอก กบพนกงานของ ILM พนองคนคอ Thomas Knoll นกศกษาปรญญาเอกท University of Michigan ในขณะนน เขาท าโปรแกรมแสดงผลกราฟกบน Mac Plus โดยใชชอวา Display เมอนองชายของเขา คอ John ซงเปนนกถายภาพสมครเลน และท างานท ILM มาเหนโปรแกรมเขา กบอกวามนเหมอนกบโปรแกรม Pixar Image Computers (สมยท Pixar ยงอยกบ LucasFilm และยงไมท าหนง) ทงสองคนจงมองเหนโอกาสธรกจ Display เพมความสามารถในการแปลงภาพเขามาตามท John เหนสมควรกอนจะเปลยนชอเปน ImagePro และไปเรขายตามบรษทซอฟตแวร แตกไมประสบความส าเรจ สดทายมาเจอกบ Adobe และกกลายเปน Photoshop
32
2.1.15 การใชงานของ adobe photoshop 2.1.15.1 สวนประกอบของโปรแกรม Adobe photoshop (1) สวนประกอบของโปรแกรม Adobe photoshop ดงแสดงภาพท 2-34
ภาพท 2-34 หนาตาของโปรแกรม Adobe photoshop
33
(1.1) Menu bar แถบควบคมโปรแกรม เปนชดค าสงส าหรบท างานทกรปแบบในการจดการกบไฟล เชน เปด/ปดหรอบนทกไฟล ไปจนถงค าสงในการตกแตงภาพ เมนสวนนถอวาเปนเมนตายตวเกอบทกๆ โปรแกรมกวาได เพราะวาทกๆ อยางของการท างานในโปรแกรม จะตองมเมนน เพอไวเกบค าสงการท างานตางๆ ใหกบโปรแกรม และเพอเพมความสะดวกสบายตอผใชงานอกดวย ในโปรแกรม Adobe Photoshop CS4 นไดมเมน เพมขนมาใหมหรอเรยกงายๆ วาเปนเมนเสรมขนมาอก เพอใหงายตอการใชงาน ยกตวอยางเชน เมน ขยายเขา/ออก, ปรบหนาตางโปรแกรมใหเตมจอหรอ Full Screen หรอ การจดวางต าแหนงของเอกสารหรอต าแหนงงานทเราจะท านนเอง เปนตน ซงจะมสวนประกอบของเมน ดงแสดงในภาพท 2-35
ภาพท 2-35 ภาพแสดงแถบบนMenu Bar
(1.2) ออปชนบาร(Options Bar) เปนสวนทใชก าหนดคณสมบตของเครองมอทเลอกท างานอยเชน การก าหนดขนาดของหวพกนในเครองมอส าหรบวาดภาพ ซงตวเลอกนจะแสดงไดกตวเมอ ไดมการเลอกใชเครองมอใน Tool box เพอเปนการก าหนดตวเลอกเพมเตมใหแกเครองมอนนๆ ดงแสดงในภาพท 2-36
ภาพท 2-36 สวนของ Options Bar
34
(1.3) กลองเครองมอ (Toolbox) คอ กลองทโปรแกรมใชเกบเครองมอส าหรบตกแตงภาพเอาไว โดยเครองมอในกลองนจะถกแยกออกเปนหมวดหมตามลกษณะการท างาน เชน ดนสอ พกน หรองยางลบ เปนตน ซงกลองเครองมอนเปนสงทจ าเปน ขาดไมได และถกใชงานบอยทสด โดยทวไปแลว กลองเครองมอนจะมสวนคลายกบรนกอนหนานพอสมควร และในกรณทเกดการบดบงพนทงาน ลกศรคดานซายมอของแถบสด านมไวเพอเปลยนการแสดงปมเครองมอ จากแถวคใหเปนแถวเรยงเดยว เพอเพมพนทหนาตางใหกวางขน การเลอกใชเครองมอชนดตางๆกท าดวยการคลกทปมนนๆ สวนลกศรสด าเลกๆตรงมมขวาดานลางของปมเครองมอจะมเครองมอตาง ชนดซอนอย การเรยกใชกคลกเมาสทลกศรคางไวแลวเลอนเมาไปเลอกเครองมอท ตองการแลวปลอยเมาส เครองมอบางชนดตองใชควบคไปกบคยบอรดดวยถงจะใชงานได เชน Clone stamp tool ตองใชคกบ Alt เปนตน ดงแสดงในภาพท 2-37
ภาพท 2-37 ภาพแสดงเครองมอ
(1.4) พนทการท างานและกระดาษวาดภาพ(Canvas) ในตอนเรมตนจะเปนพนทวางๆ ตองใชค าสงเปดภาพขนมากอนหลงจากเปดภาพขนมาแลว บรเวรนจะกลายเปนพนทส าหรบตกแตงภาพภาพทเลอกเปดจะมาปรากฏบนกระดานวาดภาพและสามารถยายต าแหนงไปมาหรอขยายภาพใหใหญขนภายในพนทท างานได ดงแสดงในภาพท 2-38
35
ภาพท 2-38 พนทการท างานและกระดาษวาดภาพ
(1.5) ชดพาเลท (Palettes) คอกลมของหนาตางทชวยควบคมรายละเอยดปลกยอยในขนตอนการท างาน เชน พาเลท History ทชวยบนทกขนตอนการตกแตงภาพเอาไวส าหรบกลบมาแกไข หรอพาเลท Navigator ส าหรบควบคมการซมภาพ ตรงสวนนเราสามารถทจะเพม/ลบ พาเลทไดท เมนบาร ในชอ Windows แลวใหตกเลอกตามความตองการวา จะใหแสดงพาเลทใดบาง เชน พาเลทของฟอนตหรอแบบอกษร พาเลทภาพสามมต พาเลทแอคชนและอนๆ เปนตน การเปด Palette ใหมกดวยการคลกค าสง Window ท Menu bar แลวเลอกเปด Pallet ทตองการ Palette ใหมจะไมรวมกลมกบของทเปดไวกอนหนานแลว ถาอยากจดเกบใหเขากลมกท าไดดวยการ คลกท Tab ของหวขอ แลวลากไปวางไวในกลมทมอยกอนแลวจงคอยปลอยเมาส การปด Pal-ette ใด Palette หนง กใหคลกท Tab ของหวขอ แลวลาก Palette นนออกมา แลวคลกท กากบาท x ทอยมมบนขวาเพอท าการปด ลกศรคสเทาบนแถบสด าบนสดของ Palette มไวเพอยอให Palette มขนาดเลกลง เพอเพมพนทในการท างาน สวนลกศรสด าหนหวลงดานลางและมขดสเสนอยดานขวามไวเพอเปด เลอกค าสงการใชงานตางๆ ทเปนค าสงในสวนของ Layer ดงแสดงในภาพท 2-39
36
ภาพท 2-39 ภาพแสดงพาเลท
(1.6) แถบปรบมมมองการท างาน (Application Bar) เปนสวนทใชควบคมตวโปรแกรมและหนาตางโปรแกรมเชน เปด ปด หรอ ยอขยายขนาดของ Photoshop นอกจากนนผใชงานยงสามารถก าหนดรปแบบการแสดงภาพในโปรแกรมไดอกดวย ดงแสดงในภาพท 2-40
ภาพท 2-40 แถบปรบมมมองการท างาน
37
(1.7) กลองเครองมอ (Toolbox) ประกอบดวยเครองมอตางๆ ทจ าเปนตอการใชงานและมจ านวนมาก จงมการรวบรวมเครองมอไวใหอยในกลมเดยวกน ซงจะมรปสามเหลยมอยทมมขวาลางบนรปเครองมอเพอบอกใหรวาในเครองมอนนมเครองมออนซอนอยอก เราจะใชงานเครองมอนนได โดยการคลกเมาทคางทปมเครองมอเครองมอทซอนไวจะแสดงออกมาโดยจะประกอบไปดวยเครองมอยอยดงตอไปน ดงแสดงในภาพท 2-41
ภาพท 2-41 รปประกอบ แสดงกลมเครองมอตางๆ ใน Toolbox
38
(1.7.1) สวนประกอบดวยกลมเครองมอตาง ๆ ดงแสดงใน ภาพท 2.42 ถงภาพท 2-43
ภาพท 2-42 สวนประกอบเครองมอตางๆ
39
ภาพท 2-43 สวนประกอบเครองมอตางๆ(ตอ)
40
(1.7.2) รายละเอยดของเครองมอทใชส าหรบตกแตงรปภาพ ดงแสดงในภาพท 2-44 ถงภาพท 2-45
ภาพท 2-44 รายละเอยดของเครองมอทใชส าหรบตกแตงรปภาพ
41
ภาพท 2-45 รายละเอยดของเครองมอทใชส าหรบตกแตงรปภาพ(ตอ)
2.2 งานวจยทเกยวของ ปถมาภรณ (2542) การออกแบบรปแบบโปรแกรมสะสมงานอเลกทรอนกสเพอการประเมน
ตามสภาพจรง การวจยนมวตถประสงค 1) เพอออกแบบรปแบบโปรแกรมสะสมงานอเลกทรอนกส
เพอการประเมนตาม สภาพจรง รายวชาโครงงานนกศกษาดานเทคโนโลยมลตมเดย ส าหลบ
นกศกษาระดบปรญญาตร สาขาวชา เทคโนโลยสารสนเทศ มหาวทยาลยราชภฏนครปฐม 2) เพอ
ประเมนความเหมาะสมของรปแบบโปรแกรมสะสมงาน อเลกทรอนกสฯ โดยมขนตอนการวจย
แบงออกเปน 2 ขนตอน คอ การออกแบบรปแบบเวบไซตสะสมงาน อเลกทรอนกสฯ และการ
ประเมนความเหมาะสมของรปแบบโปรแกรมสะสมงานอเลกทรอนกสฯกลมเปาหมายคอ
ผเชยวชาญดานหลกสตรและการสอน ดานการวดผลทางการศกษาดานเทคโนโลยสารสนเทศและ
การสอสาร จ านวน 5 ทาน โดยการเลอกแบบเจาะจงเครองมอทใชในการวจย คอ รปแบบโปรแกรม
สะสมงานอเลกทรอนกสฯและ แบบประเมนความเหมาะสมของรปแบบโปรแกรมสะสมงาน
อเลกทรอนกสฯ
42
จนทรทรา (2556) การใชโปรแกรมสะสมงานแบบอเลกทรอนกส ในรายวชาแนวคดพนฐานของศาสตร การวจยครงนเปนการวจยเชงส ารวจ (Survey research) มวตถประสงคเพอ 1) ศกษาระดบ คะแนน e-Portfolio 2) ศกษาการรบรประโยชนและอปสรรคการใช e-Portfolio 3) ศกษาความพงพอใจของนกศกษาพยาบาลศาสตรทมตอการใช e-Portfolio และ 4) ศกษาความสมพนธระหวาง เกรดเฉลยสะสมการรบรประโยชน การรบรอปสรรคความพงพอใจผลลพธการใช e-Portfolio กบ ผลสมฤทธทางการเรยนในรายวชา 619205 แนวคดพนฐานของศาสตรทางการพยาบาล สนตา (2557) การประเมนผลการสอนรายวชาโครงงานภาษาองกฤษโดยใชโปรแกรมสะสม
ผลงานของ นกศกษาสาขาวชาภาษาองกฤษ ชนปท 4 คณะศกษาศาสตร มหาวทยาลยศลปากร การ
วจยครงนมวตถประสงคเพอ 1) ประเมนโปรแกรมสะสมผลงานซงเปนสวนหนงของการ สอน
รายวชาโครงงานภาษาองกฤษโดยใชการประเมน 4 ประเภท คอ การประเมนตนเอง การ ประเมน
โดยเพอน การประเมนโดยครสอนภาษาองกฤษ และการประเมนโดยผปกครอง 2) ศกษาความพง
พอใจของนกศกษาตอการใชโปรแกรมสะสมผลงานเพอประเมนผลการท าโครงงานภาษาองกฤษ
เครองมอทใชในการวจยประกอบดวย 1) แผนการสอนทมการด าเนนกจกรรมตาม แนวการสอน
โดยใชโครงงานเปนฐานจ านวน 8 แผน 2) แบบประเมนโปรแกรมสะสมผลงาน 4 แบบ ไดแก แบบ
ประเมนโปรแกรมสะสมผลงานโดยตนเอง แบบประเมนโปรแกรมสะสมผลงานโดยเพอน แบบ
ประเมนโปรแกรมสะสมผลงานโดยครสอนภาษาองกฤษ และ แบบประเมนโปรแกรมสะสมผลงาน
โดยผปกครอง 3) แบบสอบถามความพงพอใจตอการใชโปรแกรมสะสมผลงานเพอประเมนผลการ
ท าโครงงานภาษาองกฤษ
จากการศกษาเอกสารและงานวจยทเกยวของกบการสรางและออกแบบโปรแกรม สรปไดวา โปรแกรมเปนชองทางในการศกษาขอมล ขาวสาร หรอ แมกระทงผลงานตางๆ และยงสามารถน าขอมลทไดจากการสบคนมาประกอบการเรยนการสอนไดอกดวย ดงน น ผจดท าจงไดน าเอาหลกการตางๆจากเอกสารนมาเปนแนวทางในการสรางโปรแกรมบนทกขอมลผลงานนกเรยนนกศกษาแผนกเทคนคคอมพวเตอร