บทนำ - @@ Home - KKU Web Hosting · Web viewการแก ไขข อความ...

บทนำ

FrontPage 2003 เปนโปรแกรมกรบรหรจดกรและสรงเวบไซตททรงประสทธภพเพอชวยเหลอกรออกแบบเวบไซตใหดยงขน สรงโคดไดรวดเรวขน และขยยศกยภพของเวบดวยกรทำงนรวมกบ XML และเชอมโยงกบแหลงขอมลภยนอก

FrontPage 2003 มคณลกษณะตงๆ ควมยดหยน และกรทำงนทจะชวยใหสรงเวบไซตทดยงขน FrontPage 2003 มเครองมอออกแบบ กรเขยนแก ขอมล และกรประกศเวบไซตระดบมออชพทจำเปนตอกรสรงเวบไซตแบบไดนมกและเวบไซตทมควมสลบซบซอน

FrontPage 2003 จะชวยปรบปรงกรพฒนเวบใน 3 ดน bull กรออกแบบ ใชเครองมอออกแบบทไดเพมประสทธภพขนเพอ

สรงเวบไซตทดสวยงมยงขน เครองมอเคโครงและกรฟกแบบใหมจะชวยใหกรออกแบบไซตตมทตองกรเปนเรองงยยงขน

bull กรเขยนโคด ใชเครองมอออกแบบตงๆ เพอสรงโคดททำงนไดดยงขน หรอเพมทกษะกรเขยนโคดโดยใชเครองมอกรเขยนสครปตทมอยแลวภยในเพอกรสรงผลลพธแบบโตตอบได และดวยเครองมอกรเขยนโคดแบบมออชพ จะสมรถเขยนโคดไดเรวขน มประสทธภพมกขน และมควมถกตองแมนยำมกขน

bull กรเพมควมสมรถ เชอมตอกบบคคลและขอมลในรปแบบใหมโดยกรสรงเวบไซตททำงนดวยขอมลแบบ Extensible Markup Language (XML) โดยใชโปรแกรมแกไขแบบ Extensible Stylesheet Language Transformations (XSLT) แบบ WYSIWYG ซงวงตลดเปนรยแรก คณลกษณะและตวเลอกกรประกศทไดเพมประสทธภพขนจะชวยใหเวบเพจออนไลนไดอยงรวดเรวยงขน หมยเหต กรทำงนรวมกบ XML จำเปนตองใช Microsoft Windows Servertrade 2003

คอมพวเตอรสำหรบงนเวชระเบยน

1

รปท1 ตวอยงของเวบเพจทสรงขนจก FrontPage 2003

1 รายละเอยดของ Microsoft FrontPage 2003

11 รจกกบ Microsoft FrontPage 2003

FrontPage 2003 เปนผลตภณฑของบรษท Microsoft เปนโปรแกรมสำหรบใชสรงเวบเพจ โดยจะจดองคประกอบขอมล เนอหหนเวบเพจนนๆ และทำกรเชอมโยงเวบเพจแตละหนเขไวดวยกน โดยพอสรปประโยชนของโปรแกรม FrontPage 2003 ในกรสรงเวบเพจได ดงน

1 สรงเวบเพจโดยทเรไมตองมควมรเกยวกบภษ HTML ซงเปนภษทใชในกรเขยนเวบเพจทเปนเชนนเพระ FrontPage 2003 จะทำกรแปลงหนเวบเพจทเรสรง โดยกรวงภพและพมพเนอหในภษ HTML ใหเรโดยอตโนมต โดยเรไมจำเปนตองเขยนภษ HTML ขนเอง

2 ชวยในกรสรงและจดกรเวบไซต โดยนอกจกสรงเวบเพจ FrontPage 2003 จะทำกรเชอมโยงเวบเพจทงหมด และจดกรขอมลทประกอบกนเปนเวบไซตใหโดยอตโนมต


2

3 นอกจกกรสรงเวบเพจ FrontPage 2003 ยงเปนเครองมอในกรแตงภพเบองตนดวย เชน ปรบควมเขม ควมสวงของภพ จดวงตำแหนงภพ

4 อำนวยควมสะดวกในกรนำเวบไซตทเรสรงไปไวทเครองเวบเซฟเวอร เพอเผยแพรในอนเทอรเนต

5 ชวยตรวจสอบควมสมบรณ ของเวบไซตท เรสรง เชน รยงนเวบเพจทมขนดใหญมกจนใชเวลนนในกรโหลด รยงนผลกรตรวจสอบกรเชอมโยงเวบเพจแตละหน ซงจะทำใหเรทรบวมกรเชอมโยงไปยงเวบเพจทไมมตวตนหรอไม (กรเชอมโยงประเภทน เรยกว Lost Link ซงเปนขอผดพลดทเกดขนบอยในกรสรงเวบไซต)

6 เปนตวชวยบรหรกรจดทำเวบไซตเปนทม โดยในกรณทเวบไซตมขนดใหญ และตองมกรประสนงนกบหลยคนในกรจดทำ เรสมรถใช FrontPage 2003 ตรวจสอบสถนกรณทำงนของทกไฟลในเวบไซตไดตลอดเวลว อยระหวงกรจดทำ หรอวไดทำเสรจเรยบรอยแลว นอกจกนนกสมรถมอบหมยงนใหกบทมงน และตดตมควมคบหนได

12 มอะไรใหมใน Microsoft FrontPage 20031) กรออกแบบเวบไซต Microsoft Office FrontPage 2003 มสภพแวดลอมกร

ออกแบบทปรบปรงขน เครองมอกรออกแบบและเครองมอเคโครงใหมๆ แมแบบตงๆ และชดรปแบบทปรบปรง ทงหมดนจะชวยใหสรงเวบไซตจกภพในใจไดโดยไมจำเปนตองมควมรใดๆ เกยวกบ HTML

2) สภพแวดลอมกรทำงนทไดรบกรปรบปรงและพนทออกแบบท กวงขวงขน


3

FrontPage 2003 รวบรวมคณลกษณะกรออกแบบเวบทงหมดมไวในทเดยวกน และชวยใหคณมองเหนภพรวมเวบไซตของคณทงหมด ทำใหกรออกแบบไซตและเพจตงๆ สะดวกงยดยอยงไมเคยเปนมกอน พนทออกแบบทกวงขวงขนยงชวยลดกรเลอนหนจออกดวย

3) เคโครงตรงและเคโครงเซลล สมรถสรงเคโครงเวบเพจระดบมออชพไดโดยใชเคโครงตรง

และเคโครงเซลล เคโครงตรงคอ กรอบทสรงสำหรบเพจ สวนเคโครงเซลลคอขอบเขตภยในกรอบโครงสรงดงกลวซงมเนอหสำหรบเพจนน เชน ขอควม รปภพ Web Part และองคประกอบอนๆ สมรถเลอกจกรยกรเคโครงทกำหนดไวลวงหน หรอสมรถวดดวยตวเองได และยงสมรถทดลองใชเคโครงหลยๆ แบบกอนทจะตดสนใจขนสดทยได

เคโครงตรงจะอยในบนหนตงงนทเขถงไดงย สมรถใชเครองมอตงๆ เพอจดรปแบบเพมเตม เชน มมโคง เสนขอบ กรยดโดยอตโนมต และลกษณะพเศษอนๆ ทมองเหนได

4) ชดรปแบบทปรบปรง FrontPage 2003 จะใช Cascading Style Sheet แทนทจะใช

HTML ในกรนำชดรปแบบไปใช ดงนนแฟมจงมขนดเลกลง เขใจไดงยขน และสมรถควบคมและปรบเปลยนไดสะดวกขน นอกจกน เพจทมกรใชชดรปแบบ HTML ในรนกอนหนนจะยงคงรกษกรตงคเหลนนไดใน FrontPage 2003

5) แมแบบของเวบแบบไดนมก สมรถสรงเพจ HTML ทใชเคโครงเดยวกนไดอยงรวดเรวได

โดยกรแนบแมแบบของเวบแบบไดนมกใหกบเพจดงกลว สมรถระบใหขอบเขตทตองกรภยในแมแบบสมรถแกไขได ในขณะทขอบเขตอนๆ จะ


4

ถกปองกนไว ซงหมยควมวอจอนญตใหผอนสมรถเพมและแกไขเนอหได แตยงคงรกษเคโครงของเพจและตวแมแบบไว

สมรถใชแมแบบของเวบแบบไดนมกจำนวนเทใดกไดในหนงเวบไซต และสมรถแนบแมแบบของเวบแบบไดนมกใหกบจำนวนเพจตงๆ ไดมกเททตองกร ยงสมรถบนทกแฟม Dynamic Web Template (dwt) ไวบนตำแหนงทตงใดกได ถเลอกทจะแยกแมแบบของเวบแบบไดนมกออกจกเพจอยงนอยหนงเพจขนไป นนไมไดเปนกรเอเนอหออกจกเพจเหลนนแตเปนกรจดรปแบบทมกบแมแบบออกเทนน

6) ไมบรรทดบนเพจและเสนตรงเคโครง กรออกแบบและกรวงตำแหนงทแมนยำจะเปนเรองงยดยดวย

เครองมอระบตำแหนงทมประโยชน เชน ไมบรรทดบนเพจ และเสนตรงเคโครงพนหลง สมรถกำหนดคไมบรรทด และเสนตรงไดดวยตวเองโดยกรเลอกตวเลอกหนวยวด ลกษณะ สเสน และระยะหง

7) เลเยอรขณะออกแบบ ใน FrontPage 2003 เลเยอรตงๆ สมรถมองคประกอบตงๆ

ของ HTML ได เชน ขอควม และกรฟก ในบนหนตงงน เลเยอร สมรถดรยกรแตละรยกรของเลเยอรทงหมดบนเวบเพจได สมรถวงเหลอมซอนทบแสดง และซอนเลเยอรตงๆ ไดบนเพจ ยงสมรถทำใหเลเยอรเคลอนไหวไดโดยกรใชบนหนตงงน ลกษณะกรทำงน ซงจะใหสมรถเพมสครปต Dynamic HTML (DHTML) ใหกบองคประกอบใดๆ บนเวบเพจ

13 ความตองการของระบบ ในกรท ำงนของโปรแกรม FrontPage 2003 เป นโปรแกรมขนดใหญ จงตองใชฮรดแวรทมประสทธภพสง ดงน


5

สงทตองกร ขอแนะนำระบบปฏบตกร 32 บต (OS)

ร ะ บ บ ป ฏ บ ต ก ร windows 98 Me2000XP และถเปน windows NT 40 ควรตดตง Service Pack 3 เขไปดวย

เคร องคอมพวเตอร พช (CPU)

ควรใชหน วยประมวลผลระดบ Pentium 133 MHz เปนอยงนอย

ห น ว ย ค ว ม จ ำ (RAM)

64 MB หรอมกกว

พ นท ใ นฮร ดด สต (HDD)

250 MB หรอมกกวสำหรบตดตง Office XP

ช ด ไ ด ร ฟ (CD ROM)

ควรม

จ อ แ ส ด ง ผ ล (Monitor)

จอภพ Super VGA (800x600) แสดงผลท 256 ส หรอมกกว

ตารางท 1 แสดงควมตองกรของระบบ

2 เรมตนใชงาน Microsoft FrontPage 2003

หล งจกท เ ร ได ท ำกรต ดต ง โปรแกรม FrontPage 2003 เรยบรอยแลว กสมรถเรยกใชงนโปรแกรมไดดวยวธกรตอไปน คอ

1) คลกเมสทปมเรม (Start)

2) เลอนเมสเลอกคำสงโปรแกรม Microsoft FrontPage สกครก จะปรกฏหนตงแรกของ FrontPage 2003 ทจะประกอบดวย องคประกอบตง ๆ ทเรจะเรยนรจกกน ดงน

21 สวนประกอบตาง ๆ บนหนาจอ FrontPage 2003


6

รปท 2 หนตงแรกของ FrontPage 2003

1) มมมอง (Views Bar)

เปนปมทอยด นซยของหนจอ ใชสลบมมมองกรทำงนของ FrontPage โดยแตละมมมองจะมกรใชงนทแตกตงกนไป โดยมมมมองตง ๆ ดงน


7

รปท 3 แสดงหนตงมมมองของ FrontPage 2003

หนา (Page view) เปนมมมองทแสดงหนเวบเพจทละหน ซ งประกอบดวย 2 สวนหลก ไดแก Folder List ทแสดงไฟลและโฟลเดอร ทงหมดทประกอบเปนเวบไซต โดยจะแสดงกรจดขอมลทงหมดเปนโครงสรงเหมอนตนไม และสวนทใชแสดงผลในหนเวบเพจ

โฟลเดอร (Folders view) จะรยงนสถนะโฟลเดอร และไฟลในเวบไซต โดยมมมองนจะมลกษณะเหมอนโปรแกรม Explore ประกอบไปดวย 2 สวน ไดแก Folder List ทแสดงรยชอไฟลและโฟลเดอร สวนทแสดงรยละเอยดเพมเตม เชน ขนดของไฟล และชนดของไฟล

รายงาน (Reports View) แสดงขอมลและสถต โดยรวมของเวบไซต เชน จำนวนไฟลทงหมด ขนด จำนวนรปภพ จำนวนกรเชอมโยง และไมไดเชอมโยงไปยงไฟลอน และจำนวนหนเวบเพจทมขนดใหญ จนทำใหเปดดไดชกวมตรฐน

การนำาทาง (Navigation View) แสดงกรเช อมโยงเวบเพจแตละหน ใชสำหรบชวยเตอนใหเรทรบวเวบไซตมโครงสรงเปนอยงไร มกรเชอมโยงขอมลไปทใดบง ทำใหกรจดกรกบเวบไซตทำไดสะดวกยงขน เรสมรถจดกรแสดงกรเชอมโยงของเวบไซตของเรโดย ใชเมสลกไฟลทอยในหนตง Folder List เขมวงภยในเพอจดโครงสรงตมควมตองกร


8

เชอมโยงหลายมต (Hyperlinks View) แสดงกร Link ของเวบเพจวมกรเชอมโยงกบเวบเพจใดบง

งาน (Tasks View) ในกรสรงเวบไซตหนงทมกรทำงนหลยคน เรสมรถใชมมมอง Tasks View ประสน และมอบหมยงนกรจดทำเวบไซตแตละสวนได โดยเรสมรถกำหนด Tasks ใหมขนมได โดยกรคลกเมสขวมอเลอก Add Tasks และทำกรตงช อใหก บ Tasks ชนนน หลงจกนนเรสมรถมอบหมยและตดตมควมคบหนของงนผนมมมองน

2) รหนาตาง Folder List

FrontPage2003 จะแสดงขอมลทงหมดบนเวบไซตในหนตง Folder List เปนสวนทแสดงไฟลและโฟลเดอรซงอยในเวบไซตของเร ซงแสดงไฟลทงหมดในโฟลเดอร


9

รปท 4 แสดงหนตง Folder List สวนทแสดงไฟลและโฟลเดอรทงหมด

3) รจกกบแถบเครองมอ (Toolbar) แบบตาง ๆ

แถบเครองมอ (Toolbar) เปนทรวบรวมปมคำสงตง ๆ ทใชแทนคำสงในเมนบร มลกษณะเปนไอคอนรปภพ สมรถเรยกใชงนไดงยเพยงคลกเมสปมคำสงทตองกรเทนน

เมอเปดโปรแกรมขนมจะปรกฏแถบเครองมอ (Toolbar) ขนม 2 อนทกคร ง คอ ชดเคร องมอมตรฐน (Standard toolbar) และชดเคร องมอจดรปแบบ (Formatting toolbar) นอกจกนยงมแถบเครองมอทใชทำงนอยอกหลยชด ใน FrontPage 2003 จะมแถบเครองมอในชดตง ๆ ทงหมด 13 ชด ดงน

1 ชดเครองมอมาตรฐาน (Standard Toolbar) เปนชดเครองมอทรวบรวมคำสงทมกรใชงนบอย ๆ เชน กรเปดหนเวบเพจเปล กรเปดไฟล กรบนทกไฟล กรทำลงค กรปดหนตง Folder list กรแทรกรปภพ กรแทรกตรง ฯลฯ ดงรป

รปท 5 แสดงชดเครองมอมตรฐน

2 ชดเคร องมอจดร ปแบบ (Formatting toolbar) เปนชดเคร องมอทรวบรวมคำสงในกรจดรปแบบตวอกษรและขอควม เชน ลกษณะตวอกษร ขนดตวอกษร ตำแหนงตวอกษรในหนเวบเพจ สตวอกษร ฯลฯ ดงรป


10

รปท 6 แสดงชดเครองมอจดรปแบบ

3 ชดเครองมอลกษณะพเศษ DHTML เปนชดเคร องมอ ทใชในกรสรงเอฟเฟคใหกบรปภพ เชน ทำใหรปภพเปลยนไปเมอเอเมสไปวง ทำใหตวอกษรมกรเคลอนทเมอเปดหนเวบขนม ดงรป

รปท 7 แสดงชดเครองมอลกษณะพเศษ DHTML

4 ชดเครองมอรปวาด (Drawing Toolbar) เปนชดเครองมอทใชในกรวดรปพนฐน เชน วดเสนตรง วงกลม สรงขอควมศลป ฯลฯ ดงรป

รปท 8 แสดงชดเครองมอรปวด (Drawing Toolbar)

5 เครองมอเขยนรหส (Code Toolbar) เปนชดเคร องมอทใชในกรชวยเขยน HTML ดงรป

รปท 9 แสดงชดเครองมอเขยนรหส (Code Toolbar)

6 ชดเครองมอ (Dynamic Web Template Toolbar) เปนชดเครองมอทใชในกรกำหนดพนทตงๆ ใน ไฟลทเปน Dynamic Web Template ดงรป


11

รปท 10 แสดงชดเครองมอ (Dynamic Web Template Toolbar)

7 ชดเครองมอรปภาพ (Picture Toolbar) เปนชดเครองมอทใชในกรปรบแตงรปภพในหน เวบเพจ เชน ปรบควมเขม ควมสวงของภพ หมนภพ ซอนภพ ฯลฯ ดงรปท

รปท 11 แสดงชดเครองมอรปภพ (Picture Toolbar)

8 ช ด เ ค ร อ ง ม อ ก า ร ว า ง ต ำา แ ห น ง (Positioning Toolbar) เปนชดเครองทใชจดองคประกอบในเวบเพจ ดงรปท

รปท 12 แสดงชดเครองมอกรวงตำแหนง (Positioning Toolbar)

9 ชดเครองมอเพมเงา (Shadow Settings Toolbar) เปนชดเครองมอทใชในกรเพมเงใหทเกดจกกรวดโดยใชเครองมอวด ดงรป

รปท 13 แสดงชดเครองมอเพมเง (Shadow Settings Toolbar)

10 ชดเคร องมอล กษณะ (Style Toolbar) เป นช ดเครองมอทใชเรยกหนตงในกรสรงสไตลซท ดงรป


12

รปท 14 แสดงชดเครองมอลกษณะ(Style Toolbar)

11 ช ดเคร องมอตาราง (Table Toolbar) เป นช ดเคร องมอทใชในกรปรบแตงตรง เชน กรกำหนดเสนขอบ กรเตมส ฯลฯ ดงรป

รปท 15 แสดงชดเครองมอตรง (Table Toolbar)

12 ชดเครองมอ WordArt Toolbar เปนชดเครองมอทใชในกรปรบแตงขอควมศลป ดงรป

รปท 16 แสดงชดเครองมอ WordArt Toolbar

3 การเรยกใชงานโปรแกรม Microsoft FrontPage 2003

โปรแกรม Microsoft FrontPage 2003 สมรถเรยกใชงนจก Start Menu โดยคลกเลอก Start Menu Program Microsoft Office Microsoft FrontPage ตมขนตอนดงน

1 คลกปม เลอก Programs ดงรปท 31


13

รปท 31 แสดงปม Start Menu

3 คลกเลอก Microsoft Office และคลกเลอกท Microsoft FrontPage 2003 ดงรปท 32

รปท 32 แสดงกรเขโปรแกรม Microsoft FrontPage 2003

4 ซงจะปรกฏหนตงโปรแกรม Microsoft FrontPage 2003 ดงรปท 33


14

รปท 33 แสดงหนตงโปรแกรม Microsoft FrontPage 2003

4 กำาหนดไซตกอนสรางงานโปรแกรม Microsoft FrontPage 2003 กรสรงเวบในแตละครง จำเปนจะตองสรงขนดของเวบขนมกอน เพอระบใหโปรแกรมทรบวจะเรมตนทำงนจกทใด หรอหมยถงใหโฟลเดอรใดเปนโฟลเดอรหลก(Root Folder) ของเวบนนๆ โดย

1 คลกปมลกศรของไอคอน ดงรป

รปท 41 แสดงกรสรงงนจกโปรแกรม Microsoft FrontPage 2003


15

2เลอกคำสง Web Sitehellip จะปรกฏหนตงดงรป

รปท 42 แสดงหนตง Web Site Template

3 พมพชอโฟลเดอรทตองกรใหเปนโฟลเดอรในกรเกบเอกสรเวบในรยกร Specify the location of the new web เชน ตองกรเกบเอกสรเวบไวในโฟลเดอรชอ testweb01 ของไดรฟ C ใหพมพดงรป

รปท 43 แสดงกรตงชอโฟลเดอรในกรเกบเอกสรเวบ

4 เมอคลกปม ok โปรแกรมจะทำกรสรงโฟลเดอรตมทระบใหโดยอตโนมตพรอมไฟลหลกของเวบคอ indexhtm และโฟลเดอรยอย


16

ชอ imagesสำหรบเกบไฟลรปภพตงๆ ทจำเปนตองใชในกรสรงเวบดงรป

รปท 44 แสดงกรสรงไฟลหลกของเวบคอ Indexhtm และโฟลเดอรยอยชอ images

หมายเหตทกคร งทมกรสรงเวบไซตใหม จะตองทำกรสรงไซตของเวบ

ลกษณะนเสมอ โดยแตละเวบไซตจะมโฟลเดอรแยกกน เนองจกทกเวบไซตจำเปนตองกำหนดไฟลแรกเปน Indexhtm เหมอนกนทงหมด

41 การสรางเอกสาร indexhtmไฟล indexhtm (ช อ ไฟล น เป นค default ของโปรแกรม

สมรถเปลยนไดจกระบบ) นบเปนไฟลหลกของเวบไซตทกเวบไซต ซง MS FrontPage จะสรงไฟลนใหโดยอตโนมตทกคร งทมกรสรงไซต ดงปรกฏในหนตง Folder List เมอตองกรพมพหรอสรงวตถใดๆ


17

กทำกรดบเบลคลกทไฟล indexhtm เพอเปดเปนหนตงกรทำงน แลวทำกรพมพหรอสรงวตถตมทตองกรดงรปท 45

รปท 45 แสดงกรกรสรงเอกสร indexhtm

42 การพมพขอความ

สงสำคญทผใชมกจะคำนงถงในกรสรงเอกสรเวบกคอ กรพมพขอควมลงในไฟลเอกสรเวบ โดยมหลกกรพมพดงน

1 เลอกฟอนตทตองกรจกตวเลอก Font โดยเอกสรภษไทยควรกำหนดฟอนตเปน MS Sans Serif หรอ Tahoma สำหรบเอกสรภษองกฤษ กำหนดเปน Arial

2 ขนดตวอกษร สมรถกำหนดไดอสระ และ เมอกำหนดแลวผใชปลยทงยงสมรถปรบเปลยนไดอสระอก ดงนนไมควร


18

กงวลกบขนดตวอกษรมกเกนไป โดยเฉพะเอกสรภษไทย จะมปญหอยงมกในเรองควมสวยงม และกรตดคำ แตเปนสงทควรรบรวแกไขไมไดในขณะน วธกรทดทสด คอ ขณะทพมพเอกสรภษไทย ควรเวนวรรคใหกบประโยคเปนระยะๆ อยพมพตดกน ทงนขนดตวอกษรทนยมใชในกรสรงเอกสรเวบโดยปกตกำหนดไวท 1 ndash 2 หนวย ซงสมรถกำหนดใหใหญหรอเลกไดตมลกษณะของชนงน

3 กรพมพขอควมไมตองสนใจระยะกนหลง เพระโปรแกรมจะ ตดคำใหโดยอตโนมต สำหรบเอกสรภษไทย ควรเวนวรรคใหกบประโยคเปนระยะๆ อยพมพตดกน

4 กรกดปม ltEntergt จะกระทำเมอตองกรขนบรรทดใหม เวนบรรทด หรอจบพรกรฟ

5 หกตองกรขนบรรทดใหม กอนจบพรกรฟใหกดปม ltShift gtltEntergt

6 กรยอหน หรอเวนระยะขอควม สมรถใชปม ltTabgt เขมชวยควบคมโดยกรกดปม ltTabgt แตละคร งจะเทกบกรใสรหส ampnbsp 3 ครง

43 การจดแตงขอความขอควมทพมพไปแลว สมรถจดแตงไดโดยทำกรเลอกขอควม

นนๆ กอน ดวยเทคนคระบยดำ (Selection) จกนนคลกเลอกเครองมอตงๆ ดงน

- เครองมอควบคมลกษณะตวหน ตวเอยง และตวอกษรขดเสนใต

- เครองมอกำหนดสใหกบขอควม


19

- เครองมอกำหนดขนดตวอกษร

นอกจกนสมรถใชเมนคำสง Format Fontshellip เพอเปดหนตงตวเลอกกรกำหนดลกษณะขอควม แลวเลอกรยกรตงๆ จกบตรรยกร ซงมรยกรเลอกมกกวปมเครองมอ ดงรปท 46

รปท 46 แสดงตงหนตวเลอกกรกำหนดลกษณะขอควม

ทงน Effect ในกรจดรปแบบขอควมทนสนใจไดแก Underline ควบคมกรใสเสนใตขอควม


20

Blink ควบคมกรแสดงผลตวกระพรบ Superscript ควบคมกรทำตวยก เชน A2

Subscript ควบคมกรทำตวหอย เชน H2O

44การกำาหนดตำาแหนงขอความ

ขอควมตงๆ ทพมพลงไปโดยปกตจะจดตำแหนงชดขอบซยของเอกสร ซ งผ ใช สมรถปรบ เปล ยนต ำแหน งได โดยใช เคร องมอ

ทงนกรใชเครองมอน ไมจำเปนตองเลอกขอควม เพยงแตนำเมสไปคลกในบรรทดทตองกรจดตำแหนงแลวคลกปมเคร องมอทตองกร กจะไดผลตมทตองกร

45 การแกไขขอความ

กรแกไขขอควม ใชหลกกรเดยวกบกรแกไขขอควมดวย MS Word ทวๆ ไปโดยปม ltBackspacegt จะหมยถงกรลบอกขระทอยหน Cursor และกรกดปม ltDeletegt จะเปนกรลบอกขระทอยหลง Cursor รวมทงสมรถใชเทคนคกรเลอกขอควม แลวทำกรลบรยกรทเหลอไดทนท หกมขอผดพลดใดๆ เกดขน ควรทำกรยกเลกควมผดพลดนนๆ โดยกรเลอกเมนคำสง Edit Undohellip หรอกดปม ltCtrlgtltZgt หรอคลกทไอคอน

รปท 47 แสดงกรกรเลอกเมนคำสง Edit Undo Typing

46 การกำาหนดชอเรอง (Title) ใหกบเอกสารเวบ


21

เอกสรเวบทกเอกสรจะตองทำกรกำหนดชอเร องไวดวยเสมอ เนองจกจะเปนรยกรทนำไปใชในกรแสดงผลเมอผใชทำกรบนทกเกบไว (Bookmark) เพอเรยกใชอกคร ง และชอเร องของเวบ ยงเปนสวนสำคญสำหรบ Search Engine ในกรกำหนดเวบไซตของเรเขไวในระบบฐนขอมลของระบบ เพอใหผใชอนๆ สมรถคนหไดดงนนหกเวบไซตใด ไมกำหนดชอเร องไวกบเอกสรเวบ จะสงผลใหเวบนนไมถกบนทกไวในระบบฐนขอมลของ Search Engine และผอนกหเวบเรไมเจอดวย กรกำหนดชอเร องของเอกสรเวบ กระทำไดโดยกรคลกขวในพนทวงๆ ของเอกสรเวบทเปดอย แลวเลอกรยกรคำสง Page Propertie ดงรปท 48 ซงจะปรกฏหนตงกรทำงนดงรปท 49

รปท 48 แสดงกรเขหนตง Page Propertie


22

รปท 49 แสดงหนตง Page Properties

รายการทควรกำาหนดไดแก1 บตรรายการ General

Title ขอควมแสดงชอเร องของเอกสรเวบ ควรเปนภษองกฤษ ยวไมเกน 56 ตวอกษร ควรเปนช อทประกอบดวยค ำทผ ใช สมรถนกถงไดงย เมอตองกรคนห

2 บตรรายการ BackgroundBackground Picture เลอกรปภพทตองกรนำมใช

เปนพนของเอกสรเวบ ทงนจะตองทำกรคดลอกไฟลรปภพทตองกรใชงนนมเกบไวในโฟลเดอร images กอนทจะทำกรสรงเอกสรเวบ Color กำหนดสของเอกสรเวบ อนประกอบดวย

1048707 Background Color สของพนเวบ1048707 Text Color สตวอกษรปกต1048707 Hyperlink Color สของจดเชอม


23

1048707 Visited Hyperlink Color สของจดเชอมทผนกรเรยกดแลว

1048707 Active Hyperlink Color สของจดเชอมขณะเรยกดขอมล

5 จดการไฟลเอกสารเวบ51 การบนทกไฟลไฟลเอกสรทสรงไว ควรทำกรบนทกเปนระยะๆ โดยคลกทไอคอน

Save โดยไฟลทเคยกำหนดชอหรอผนกรบนทกมกอน โปรแกรมจะทำกรบนทกซ ำใหโดยอตโนมต ในขณะนไฟลใหม โปรแกรมจะแสดงหนตงบนทก ดงรปท 51

รปท 51 แสดงกรบนทกไฟล

สมรถกำหนดชอไฟลจกรยกร File Name แลวกดปม save เพอทำกรบนทกไฟลเอกสรทผนกรบนทกแลว เมอมกรบนทกดวยปมsave ในครงถดไป โปรแกรมจะบนทกโดยอตโนมต แตถตองกร


24

เปลยนชอไฟลหรอตำแหนงในกรเกบไฟล สมรถใชคำสง File Save Ashellip เพอระบชอไฟล หรอโฟลเดอรไดใหม

52 การปดไฟลเอกสรทสรงไวเสรจแลว หรอตองกรยกเลกกรสรงกอนชวครว

ควรทำกรปดออกจกระบบ เพอคนหนวยควมจำใหกบระบบดวยคำสง File Close

รปท 52 แสดงกรปดไฟล

53 การสรางไฟลใหมไฟลเอกสรเวบไฟลใหม สมรถสรงไดโดยคลกทไอคอน New

โดยโปรแกรมจะเปดหนตงเอกสรใหมใหโดยอตโนมต

6 ตาราง

ตรงเปนองคประกอบของเวบลกษณะหนงทนยมนำมใชงนหลยๆ ลกษณะ กรใชตรงมทงกรนำมเปนโครงรงของหนเวบ (Layout) กรทำกรอบขอควม กรอบรปภพ ควบคมกรจดรปภพ และฟอรมตงๆ

61 การสรางตาราง1) นำเมสไปคลก ณ ตำแหนงทตองกรสรงตรง


25

2) เลอกเมนคำสง Table Insert Table ดงรปท 61 ซงจะปรกฏหนตงดงรปท 62

รปท 61 แสดงกรเลอกเมนคำสง Table Insert Table

รปท 62 แสดงหนตง Insert Table1 กำหนดคตงๆ ทเกยวกบกรสรงตรง

Rows กำหนดจำนวนแถวของตรง Columns กำหนดจำนวนคอลมนของตรง


26

Alignment กำหนดตำแหนงของตรง กรณทตรงไมกวงเทกบควมกวงของจอภพ

Border size กำหนดคควมหนของเสนกรอบตรง

Cell padding กำหนดขอบเขตกรพมพขอควมในเซลลของตรงถไมกำหนด จะทำใหตวอกษรตวแรกของแตละแถว ชดขอบซยของเซลล

Cell spacing กำหนดคควมหนของเสนตดระหวงเซลลภยในตรง

Specify width กำหนดควมกวงของตรง โดยเลอกไดทงหนวย อนสงผลใหตรงยดหดได เมอมกรปรบขนดของตรง และเลอกใหตรงมขนดคงท เมอกำหนดคเปน Pixels

ตวอยง ตองกรสรงตรงสำหรบวงเนอหแบบ 3 คอลมน 2 แถว โดยมควมกวงครงหนงของจอภพ ตรงอยชดขอบซยของจอภพ ควมหนของเสนกรอบตรง 5 pixels ควมหนของเสนตดเซลล 2 pixels และกำหนดพนทขอบเขตกรพมพ 5 pixels เชนกน จะตองกำหนดรยกร ดงรปท 63


27

รปท 63 แสดงตวอยงกรกำหนด Insert Table

7 การทำา Office Pivot Chart1 เลอกเมนคำสง Insert Web Component ดงรปท71

รปท 71 แสดงกรเลอกเมนคำสง Insert Web Component2 จะแสดงหนตง Insert Web Component จอดงรปท 72

ใ ห ใ ช เ ม ส ค ล ก ใ น ช อ ง Component type โ ด ย ค ล ก ไ ป ท


28

Spreadsheets and chart และเล อนเมสไปในชอง Choose a control แลวคลกท Office Chart แลวคลก

รปท 72 แสดงหนตง Insert Web Component3 ซ งจะปรกฏหนตง Commands and Options ดงรปท

73

รปท 73 แสดงหนตง Commands and Options

71 การทำา Data typed into a data sheetใชสำหรบในกรกรอกขอมลดบลงไปเพอทำ Chart ไดเลย


29

ใชสำาหรบในการกรอกขอมลดบลงไปเพอทำา Chart ไดเลยใชสำาหรบในการนำาขอมลจากฐานขอมลทมอยแลวเพอนำามาทำาChart

1) คลกเลอก Data typed into a data sheet ดงรปท 74

รปท 74 แสดงกรคลกเลอก Data typed into a data sheet

2) คลกท ดงรปท 75 ซงจะปรกฏหนตงดงรปท 76

รปท 75 แสดงหนตง Commands and Options เพอคลกปม Data Sheethellip


30

รปท 76 แสดงหนตง Commands and Options In to Data Sheet

3) จกรปท 76 ทนสมรถกรอกขอมลได ดงตวอยงรปท 77

รปท 77 แสดงตวอยงกรกรอกขอมลใน Data Sheet


31

4) เมอกรอกขอมลเสรจใหทนคลกเลอก Type ซงจะปรกฏหนตงดงรปท 78 ซงสมรถเลอกรปแบบของ Chart ไดตมตองกร และจะไดตวอยงดงรปท 79

รปท 78 แสดงหนตงสำหรบกรเลอก Type ของ Chart ตมตองกร

รปท 79 แสดงตวอยง Chart


32

72 การทำา Data form a database table or queryใชสำหรบในกรนำขอมลจกฐนขอมลทมอยแลวเพอนำมทำ Chart ดงน

1) คลกเลอก Data form a database table or query ดงรปท 710

รปท 710 แสดงกรเลอก Data form a database table or query

2) ใหคลกเลอกท Data Details ซงจะปรกฏหนจอดงรปท 711


33

รปท 711 แสดงกรหนตง Data Details

3) ใหทนคลกท เพอเลอกเชอมตอกบฐนขอมลททนตองกรนำมทำ Chart จะไดดงรปท 712

รปท 712 แสดงกรเลอกเชอมตอกบฐนขอมลททนตองกร

4) ใหทนคลกท จะไดหนตงดงรปท 713 ใหทนเลอกแหลงขอมลชนดใดทคณตองกรเชอมตอเพอนำมจดทำ Chart เมอเลอกเสรจแลวใหทนคลก


34

รปท 713 แสดงกรเลอกแหลงขอมลสำหรบกรเชอมตอเพอนำมจดทำ Chart

5) ซงจะปรกฏไดหนตงดงรปท 714 ใหทนพมพชอเซรฟเวอรททนตองกร นำขอมลมทำ Pivot Chart ในกรณทไม ตองใสขอมลประจำตวในกรเขสระบบกคลก ได

รปท 714 แสดงกรใหทนพมพชอเซรฟเวอรททนตองกร


35

6) จะปรกฏหนตงดงรปท 715 ทนสมรถเลอกฐนขอมลทมขอมลททนตองกรแลวกคลก

รปท 715 แสดงหนตงสำหรบกรเลอกฐนขอมล7) จะปรกฏหนตงดงรปท 716 ทนสมรถคลก

ไดเลย


36

รปท 716 แสดงขนตอนกรเชอมตอขอมลและจบกรทำงน

8) จะปรกฏหนตงดงรปท 717 ใหทนคลก เปนอนเสรจสนกรทำ Office Pivot Chart

รปท 717 แสดงขนตอนกรเสรจสนกรทำ Office Pivot Chart8 การทำา Office Pivot Table

1) ไปทเมน Insert เลอก Web Component ดงรปท 81 จะปรกฏหนตงดงรปท 82


37

รปท 81 แสดงเมน Insert เลอก Web Component

2) ใ ห ค ล ก เ ล อ ก Component type โ ด ย ค ล ก ไ ป ท Spreadsheets and chart และเล อนเมสไปในชอง Choose a control แลวคลกท Office Pivot Table แลวคลก

รปท 82 แสดงขนตอนแรกในกรจดทำ Office Pivot Table3)จะแสดงหนตงดงรปท 83


38

รปท 83 แสดงหนจอสำหรบกรจดทำ Office Pivot Table4) ใหทนคลกท คลกทน เพอเชอมตอกบขอมล จะปรกฏ

หนตงดงรปท 84

รปท 84 แสดงหนตงคำสงและตวเลอกในกรเชอมตอฐนขอมล


39

5) ใหทนเลอก กรเชอมตอ และคลกแกไข จะปรกฏหนตงดงรปท 85

รปท 85 แสดงหนตงสำหรบกรเลอกแหลงขอมล

6) ใหทนคลกท จะปรกฏหนตงดงรปท 86 แลวเลอกแหลงขอมลทคณตองกรเชอมตอ เมอเลอกเสรจแลวใหทนคลก

ซงจะปรกฏหนตงดงรปท 87


40

รปท 86 แสดงหนตงขนตอนในกรเลอกแหลงขอมล7)ใหทนพมพชอเซรฟเวอรททนตองกรนำขอมลมทำ Pivot

Table ในกรณไมตองใสขอมลประจำตวในกรเขสระบบกคลก ซงจะปรกฏหนตงดงรปท 88

รปท 87 แสดงหนตงสำหรบปอนขอมลในกรเชอมตอเซรฟเวอร

7 ทนสมรถเลอกฐนขอมลทมขอมลททนตองกรแลวกคลก


41

รปท 88 แสดงหนตงสำหรบเลอกฐนขอมลและตรง8 จะปรกฏหนตงดงรปท 89 ใหทนคลก

รปท 89 แสดงหนตงแสดงกรเสรจสนกรเชอมตอขอมล

9 จะปรกฏหนตงดงรปท 810 คลก เปนอนเสรจสนในกรทำ Office pivot table ดงตวอยงรปท 811 รปท 812 และรปท 813


42


รปท 811 แสดงตวอยงหนตงทเสรจสนในกรทำ Office pivot table


43



44



45

2) สภาพแวดลอมการทำงานทไดรบการปรบปรงและพนทออกแบบทกวางขวางขน

5) แมแบบของเวบแบบไดนามก

7) เลเยอรขณะออกแบบ

รปท1 ตวอยงของเวบเพจทสรงขนจก Front003

1 รายละเอยดของ Microsoft FrontPage 2003

11 รจกกบ Microsoft FrontPage 2003

FrontPage 2003 เปนผลตภณฑของบรษท Microsoft เปนโปรแกรมสำหรบใชสรงเวบเพจ โดยจะจดองคประกอบขอมล เนอหหนเวบเพจนนๆ และทำกรเชอมโยงเวบเพจแตละหนเขไวดวยกน โดยพอสรปประโยชนของโปรแกรม FrontPage 2003 ในกรสรงเวบเพจได ดงน

1 สรงเวบเพจโดยทเรไมตองมควมรเกยวกบภษ HTML ซงเปนภษทใชในกรเขยนเวบเพจทเปนเชนนเพระ FrontPage 2003 จะทำกรแปลงหนเวบเพจทเรสรง โดยกรวงภพและพมพเนอหในภษ HTML ใหเรโดยอตโนมต โดยเรไมจำเปนตองเขยนภษ HTML ขนเอง

2 ชวยในกรสรงและจดกรเวบไซต โดยนอกจกสรงเวบเพจ FrontPage 2003 จะทำกรเชอมโยงเวบเพจทงหมด และจดกรขอมลทประกอบกนเปนเวบไซตใหโดยอตโนมต


2









3










4









5










ควรม










6





7







8






9









10










11










12










13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45












3










4









5










ควรม










6





7







8






9









10










11










12










13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45













4









5










ควรม










6





7







8






9









10










11










12










13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45












5










ควรม










6





7







8






9









10










11










12










13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45













ควรม










6





7







8






9









10










11










12










13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45








7







8






9









10










11










12










13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45










8






9









10










11










12










13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45









9









10










11










12










13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45












10










11










12










13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45













11










12










13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45













12










13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45













13






14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45









14






15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45









15







16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45










16








17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45











17








18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45











18











19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45














19






20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45









20











21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45














21




22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45







22








23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45











23








24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45











24







6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45










6 ตาราง




25






26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45









26








27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45











27






28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45









28



73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45






73




29







30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45









30





31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45








31





32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45








32






33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45









33






34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45









34





35



ไดเลย


36






37





38





39






40






41





42




43



44



45








35



ไดเลย


36






37





38





39






40






41





42




43



44



45






ไดเลย


36






37





38





39






40






41





42




43



44



45









37





38





39






40






41





42




43



44



45








38





39






40






41





42




43



44



45








39






40






41





42




43



44



45









40






41





42




43



44



45









41





42




43



44



45








42




43



44



45







43



44



45






44



45






45




บทนำ - @@ Home - KKU Web Hosting · Web viewการแก ไขข อความ...

Documents

Transcript of บทนำ - @@ Home - KKU Web Hosting · Web viewการแก ไขข อความ...