1. กรณีเริ่มจากหน้า siam2webให้กรอกชื่อและรหัสผ่านเพื่อขอเข้าพื้นที่ใช้งาน

2.เมื่อเข้าสู่หน้าเมนูหลักให้คลิกที่รูปแก้ไขเนื้อหา

3.ในหน้าแก้ไขเนื้อหา ให้คลิกที่หน้าแรก ในช่องระบบจัดการเนื้อหา เพื่อเข้าไปแก้ไข ปรับปรุงหน้าแรกของ web sit ที่เราขอพื้นที่ไว้

4.siam2web ได้สร้างโครงร่างไว้ให้แล้ว แต่เพื่อให้ง่ายต่อการสอนอและวางรูปแบบโดยอิสระ จึงจำเป็นต้องลบบางส่วนออก

 5.ซึ่งเราจะเก็บกรอบที่เกี่ยวเสียงเพลงไว้ใช้งานต่อไป โดยให้คลิกที่สี่เหลี่ยมตามภาพ จะปรากฏกรอบและปุ่มเล็กๆขึ้น 8 ปุ่ม

6.จากนั้นใช้เมาส์คลิกที่ภาพแล้วลากลงมาวางนอกกรอบเส้นประ

 7.ภาพดังกล่าวจะเลื่อนลงมาอยู่นอกกรอบเส้นประตามภาพ

8.คลิกที่มุมล่างสุดของกรอบเส้นประ

 9.กดปุ่ม back space เพื่อลบกรอบเส้นประออกทั้งหมด

10.คลิกวางเคอร์เซอร์เหนือกรอบสี่เหลี่ยม เพื่อกำหนดตำแห่นงที่จะสร้างตารางข้นใหม่

 11.คลิกที่ปุ่มสร้างตารางบนแถบเครื่องมือใต้รูปกรรไกร

12.ในหน้า generalให้กรอก col=2 , , rows=2 ,width=810 หมายถึงสร้างตารางมีแถวแนวตั้ง 2 แถว แถวแนวนอน 2 แถว ยาว 810 pixcels โดยไม่แสดงกรอบตาราง

 13.คลิกadvance ตามรูป12จากนั้นคลิกตรงสามเหลี่ยมตามภาพเพื่อเลือกสีพื้นหลังของตาราง

14.คลิกวางเคอร์เซอร์บริเวณสีที่ต้องการ ซึ่งตามตัวอย่างเราต้องการสีพื้นเป็นสีเทา

 15.คลิกวางเคอร์เซอร์เพื่อเลือกระดับความเข้มของสี โดยสังเกตแถบสี่เหลี่ยมมุมขวาจะแสดงสีตัวอย่างให้เห็น เมื่อตรงตามต้องการแล้ว กดAPPLY

16.กลับสู่หน้า advanced คลิก Insert

 17.จะปรากฏตารางสีเทาขึ้นเหนือกล่องเสียง มีสี่ช่องแต่ละช่องแบ่งด้วยเส้นประ

18.คลิกวางตำแหน่งทำงานในช่องที่1 เพื่อเตรียมวางภาพลงในตาราง

19.คลิกปุ่มเครื่องมือรูปต้นไม้ เพื่อเลือกรูปตามที่ Uploadไว้

20.ในหน้า General ให้คลิกที่ปุ่มตามภาพ

 21.ระบบจะแสดงชื่อไฟด์ที่เรา upload ขึ้นมาให้เห็น แต่เราจะจำไม่ได้ว่า เป็นภาพใด

22.จึงให้คลิกที่ชื่อไฟด์ภาพ ชื่อใดชื่อหนึ่ง 

 23.ระบบจะแสดงภาพให้เราเห็นว่าไฟด์ดังกล่าวภาพเป็นเช่นไร จากนั้นให้เลื่อนไปคลิกที่ช่องตามภาพ แล้วใช้wheel mouseหรือปุ่มเลื่อนขึ้นลงรูปสามเหลี่ยม บนแป้นคีย์บอร์ด ขยับขึ้นลงเพื่อเลือกภาพตามต้องการ เมื่อได้แล้วให้กด INSERT

24.รูปที่เลือกไว้จะมาปรากฏในตารางช่องแรกตามที่กำหนด จากนี้นคลิกกำหนดตำแหน่งการทำงานในตารางช่องที่2

 25.คลิกปุ่มเครื่องมือเลือกภาพ แล้วดำเนินตามขั้นตอนข้อ 19-23

26.ภาพที่เลือกไว้เป็นท้องฟ้ายามเช้า ตรงตามต้องการแล้วให้กด INSERT

 27.ภาพท้องฟ้าจะปรากฏในช่องที่ 2 ของตาราง แต่เนื่องจากขนาดความสูงของภาพไม่เท่ากันจึงปรับขนาดภาพให้สูงเท่ากัน

28.คลิกเลือกที่ภาพแรก เพื่อปรับลดขนาด จะปรากฏปุ่มเล็กๆขึ้น 8 จุด รอบภาพแรก

 29.คลิกที่ปุ่มมุมขวาบน จะเปลี่ยนเคอร์เซอร์เป็นลูกศรชี้ขึ้นลงแนวทะแยง ให้เลื่อนลงในแนว 45 องศา มาทางซ้าย

30.จะเห็นเส้นประแสดงเส้นแนวการลดขนาดของภาพ ให้ลดขนาดลงเรื่อยจนกระทั่งความสูงของภาพแรกเท่ากับภาพที่สอง

 31.หากความกว้างของภาพแรกไม่ได้สัดส่วนให้ขยายหรือลด โดยคลิกที่ปุ่มด้านข้างตามภาพ

32.เราก็จะได้ภาพตามต้องการ(ให้ฝึกปรับขนาดภาพให้คล่องเพราะต้องใช้เป็นประจำ)จากนั้นคลิกที่ช่องแรกแถวที่สอง เพื่อกำหนดพื้นที่ทำงานต่อไป

 33.พิมพ์คำว่า welcome to my web site จากนี้นคลิกแล้วลาก ให้ปรากฏแถบทีบแสงตามภาพ เพื่อกำหนดพื้นที่การทำงานกับตัวอีกษร

34.คลิกปุ่มสามเหลี่ยมข้างตัวอักษรA เพื่อเปิดตัวอย่างสีขึ้นมา ในการกำหนดสีของตัวอักษร

 35.ซึ่งตัวอย่างนี้เราเลือกสีขาวเป็นสีของตัวอักษร จึงคลิกเลือกปุ่มสีขาว

36.จากนั้น คลิกปุ่มสามเหลี่ยมเพื่อกำหนดขนาดของตัวอักษร

 37.คลิกเลือกขนาด 12 pt เนื่องจากเป็นตัวอักษรของ BANNER

38.คลิกที่ปุ่มตัว B บนแถบเครื่องมือ เพื่อกำหนดให้ตัวอักษรเป็นแบบตัวหนา

 39.ขัอความที่กำหนดไว้ก็จะเปลี่ยนเป็นสีขาว ขนาด 12 pt และเป็นตัวอักษรหนาตามต้องการ

40.จากนั้น ลองพิมพ์ข้อความ http://katathon.siam2webลงในช่องที่สองของแถวที่สอง และปรับแต่งสีตัวอักษร ขนาดตัวอักษร และความหนาของตัวอักษรดู ผื

 41.ลองกดดูที่หน้าสำหรับทำลิงค์ด้านล่าง

42.จะปรากฏหน้าweb ที่ทำมาแล้วตั้งแต่ต้น โดยในช่องเสียงจะบรรเลงเพลงค้างคาวกินกล้วย จากนั้นให้ปิดไปก่อน

 43.กลับมาที่พื้นทำงานต่อ ให้คลิกวางเคอร์เซอร์ข้างกล่องเสียง จากนี้นกด Enter เพื่อขึ้นบรรทัดใหม่

44.คลิกที่ปุ่มสร้างตารางในแถบเครื่องมือ เพื่อเตรียมสร้างเนื้อหาของweb

45.กำหนด spec ในตารางตามภาพ

46.ดำเนินขั้นตอนในการเลือกสีพื้นหลังของตาราง โดยเลือกเป็นสีแดงอมชมพูอ่อน แล้วกด Insert

 47.จะได้ตารางสีแดงชมภู 6 ช่อง แต่เราต้องการวางภาพแนวตั้ง ซึ่งสูงสองเท่าของภาพปกติ จึงจำเป็นต้องรวมตารางในช่องแรก แถวบนและแถวล่างเข้าด้วยกัน

48.จึงให้คลิกวางเคอร์เซอร์ในช่องแรกแถวแรก ตามภาพ

 49.คลิกปุ่มรวมตารางในแถบเครื่องมือตามภาพ

50.กำหนด ช่อง cell ที่ต้องการนำมารวมกับช่องcell ที่กำหนด คือช่องคอลั่มภ์ที่ 1 แถวที่ 2 แล้วกด update

51.ผลที่ได้จะปรากฏตามภาพ

52.จากนั้นให้วางภาพชายหญิงบนพื้นดอกกุหลาบลงในช่องดังกล่าว ตามขั้นตอนการวางภาพ

 53.วางเคอร์เซอร์ในช่องที่สาม แถวบน แล้ววางภาพคอมพิวเตอร์ตามขั้นตอน (ภาพแทน)

54.หากขนาดภาพไม่พอดีให้ปรับลดภาพให้พอดี โดยใช้ปุ่มปรับเพิ่มลดขนาด ตามภาพ

55.วางภาพนาฬิกาทรายในช่องที่สาม แถวที่สอง จะได้ผลลัพภ์ตามภาพ จากนั้นให้วางเคอร์เซอร์ ที่ช่องสองแถวบนตามภาพ

56.พิมพ์ข้อความแนะนำร้าน การดำเนินการโดยสังเขป และสินค้าที่มีอยู่ ในภาพรวม

57.คลิกแล้วลาก ให้ปรากฏแถบทึบ เพื่อกำหนดพื้นที่ในการแก้ไขปรับปรุงตัวอักษร

58.ปรับสีเป็นสีเหลือง ปรับขนาด เป็น 10 pt ไม่ต้องปรับความหนา เนื่องจากเป็นส่วนเนื้อหา

59.วางเคอร์เซอร์ที่มุมขวามือ ซึ่งเป็นส่วนที่ล่างสุด

60.กดปุ่ม shift + enter เพื่อให้เคอร์เซอร์เลื่อนลง 1 บรรทัด (กดenter อย่างเดียวเลื่อน 2 บรรทัด)

61.กำหนดค่าเพื่อสร้างตาราง ให้ cols=4,rows=4,wide=810,border=1จากนั้นกด insert

62.วางภาพตัวอย่างสินค้าลงในแต่ละช่อง สองแถวบนรวม 8 ภาพ ตามขั้นตอนการวางภาพ จะได้ภาพตามตัวอย่าง

 63.จะเหลือช่องว่างอีกสองแถวล่าง ซึ่งเราสมมุติว่าตัวอย่างสินค้าหมดแล้ว จึงจำเป็นต้องตัดออก โดยให้คลิกวางเคอร์เซอร์ตรงแถวที่จะตัดออก

64.คลิกปุ่มถอดแถวตาราง ในแถบเครื่องมือตามภาพ แถวส่วนเกินจะหายไปที่ละแถว ให้ทำซ้าจนครบสองแถว

 65.จากนั้นเตรียมตบแต่งกล่องเสียงให้สวยงาม โดยวางเคอร์เซอร์ข้างกล่อง

66.วางภาพลายเส้นตามตัวอย่าง

 67.ปรับขนาดสัดส่วนของภาพลายเส้นให้พอเหมาะกับกล่องเสียง

68.วางเคอร์เซอร์ต่อจากภาพลายเส้น เพื่อพิมพ์ชื่อ ร้านค้าคฑาธร

69.คลิกลากเพื่อกำหนดพื้นที่ตกแต่งตัวอักษร เลือกตัวอักษรสีแดง

70.เลือกขนาดตัวอักษรเป็น 14 pt และปรับตัวอักษรให้หนา เนื่องจากเป็นชื่อร้านจำเป็นต้องให้เห็นเด่นชัด

 71.จากนั้นเลื่อนลงมาเหนือตารางตัวอย่างสินค้า พิมพ์คำว่า ตัวอย่างสินค้า แล้วปรับปรุงสี ขนาดและความหนาให้เหมาะสม เป็นอันเสร็จสิ้นการสร้าง web ในหน้าแรก

72.ทำการบันทึกข้อมูล โดยคลิกที่ปุ่มบันทึกข้อมูล

 73.จากนั้นลองดูผลงานของท่าน โดยคลิกตามภาพ

74.ระบบก็จะแสดงภาพที่กำลังonline ในหน้าแรกให้ท่านเห็น