ใบงานที่ 1 การสร้างเว็บไซต์ร้านค้าออนไลน์ การสมัครสมาชิกเว็บไซต์ขายสินค้าฟรีมี 8 ขั้นตอนดังนี้
1.พิมพ์ชื่อเว็บไซต์ www.own-free-website.com
2.คลิกปุ่ม to registration
3.ปรากฏหน้าต่างกรอกข้อมูลทุกช่อง
4.คลิกปุ่ม Send registration
5.รอสักครู่จะปรากฏหน้าต่างแสดงหน้าเว็บเพจตอบรับการเป็นสมาชิก
6.คลิกที่ชื่อเว็บไซต์ของนักศึกษาด้านซ้ายบน เพื่อเปิดเว็บไซต์ที่สร้าง
7.รอสักครู่จะปรากฏหน้าต่างที่สร้างไว้
8.สามารถเปลี่ยนแปลงหน้าเว็บไซต์ไม่ได้
ใบงาน 2 เริ่มต้นปรับเว็บไซต์ออนไลน์ของนักศึกษา
1.พิมพ์เว็บไซต์ www.own-free-website.com
2.คลิกเมนู Login ใส่ชื่อเว็บไซต์ของนักศึกษาและรหัสผ่าน
3.คลิกปุ่ม Login
4.จะเข้าสู่หน้าต่าง Your Homepage ปรากฏชื่อเว็บไซต์ของนักศึกษาช่อง Address:
5.คลิกรายการ Ddit desing
6.ปรากฏ Base desing ให้คลิก เลือกรูปแบบของเว็บไซต์ ตอนนี้เลือก Iceblue General-Popular
ให้ทดลองเลือกแบบอื่นเช่น Butterfly General-Popular หรือ รูปแบบอื่น ๆ หลายรูปแบบ คลิกเลือกดูแต่ละรูปแบบ
7.คลิกปุ่ม Save จะปรากฏหน้าต่างรูปแบบที่เลือกเช่นแบบ Iceblue General-popular
8.ให้เลื่อน Scroll ลงมาเลือกส่วนของ Desing Options จะมีรายละเอียดดังนี้
9.Title of navigation Column:เมนูหลัก (มุมซ้าย)
10.title of right box#1:สินค้าคุณภาพ (มุมขวาสุด)
11.คลิกปุ่ม Save
12.คลิกขวาชื่อเว็บไซต์ด้านซ้าย --> เลือก Open in New Window ทดลองดูหน้าเว็บไซต์
13.คลิกปุ่ม X ปิด
14.ให้คลิกแท็บ Clock ปรับแต่งเพื่อเติมรายละเอียด ให้แสดงนาริฬกา
15.คลิกปุ่ม Save
16.คลิกขวาที่ชื่อเว็บไซต์เพื่อ ดูผลลัพธ์ที่เลือกรายการนาฬิกา
17.สามารถเลือกแท็บ Poll Log-in Top List
18.ต่อไปสร้างกล่องข้อความที่ 2 ให้คลิกแท็บ Extended Settings
19.กำหนดรายละเอียดแต่ละกล่องข้อความ เช่น
Title of right box#2 พิมพ์ สินค้าคุณภาพ จากโรงงานมีสินค้าจำนวนจำกัดหากซื้อวันนี้มีส่วนรถทันที 70% ก็ว่ากันไปค่ะ
20.คลิกปุ่ม Save เหมือนเดิม
21.เลื่อนคลิกขวาชื่อเว็บไซต์ด้านซ้าย -- > เลือก Open in New window ทดลองดูหน้าเว็บไซต์
22.หากต้องการแสดงนาฬิกา ให้คลิกที่แท็บ Clock แล้วคลิกปุ่ม Save อีกครั้ง
23.แล้วคิลกขวาชื่อเว็บไซต์ของนักศึกษา -- > เลือก Open in New Window ทดลองดูหน้าเว็บไซต์
ใบงานที่ 3 การเตรียมรูปภาพ และสร้าง Header / ส่วนหัวของเว็บเป็นภาพของนักศึกษาตัวเราเอง
ปรับแต่ง Header/ส่วนหัวเว็บไซต์ เพื่อแสดงภาพที่เป็นโลโก้ของนักศึกษา/ภาพแสดงสินค้าต่าง ๆ ของนักศึกษา เพื่อความสวยงามของเว็บไซต์ และเป็นที่สะดุดตาให้กับผู้เข้าเยี่ยมชม
1.คลิกเมนู Edit design
2.คลิกแท็บ Extended Settings
3.เลื่อน Scroll ลงมาที่ Header picture (921 * 104) เป็นการสร้างภาพขนาดมาตรฐานของส่วนหัว (Header)
4.เข้าสู่โปรแกรม Adobe Photoshop
5.กำหนดขนาด Width:921 Height:104 Resolution:150 Color Mode: RGB Color 16 bit
6.คลิกปุ่ม OK
7.นำรูปภาพเข้ามา โดยใช้คำสั่ง File -- > Open
8.กด Ctrl เลือกภาพทั้งหมด แล้วคลิก Open
9.คลิกที่ภาพแล้วลากมาวางที่พื้นที่ว่างเอกสารใหม่
10.คลิกปุ่ม T พิมพ์ตัวอักษรเช่น ชื่อเว็บไซต์ กดปุ่ม Ctrl+A เลือกตัวอักษรทั้งหมด
11.คลิก Style เลือกที่รูปแบบที่ต้องการ
12.ดับเบิ้ลคลิกที่ Layer ของตัวอักษร จะแสดงหน้าต่าง Layer Style
13.คลิกสี Gradient Overlay เลือกสีที่ต้องการ แล้วคลิก OK
14.คลิกเลื่อน Layer ของตัวอักษรไว้ด้านบนสุด
15.คลิกปุ่ม Select เพื่อเพิ่มพื้นหลังให้กับตัวอักษร จะปรากฏเส้นประ เทพื้นสีขาว
16.เลื่อน Layer พื้นหลังลง กำหนด Opacity 60%
17.ดับเบิ้ลคลิก Layer ตัวอักษร กำหนดความหน้าของเส้นขอบ 3
18.บันทึกไฟล์ คลิกเมนู File -- > Save for web เลือก Jpg -- > Medium
ใบงานที่ 4 สร้างภาพสไลด์โชว์ด้วยโปรแกรม Adobe ImageReady
1.เปิดโปรแกรม Adobe Photoshop
2.คลิกเมนู File -- > Open เลือกรูปภาพ 5 ภาพ วางบนหน้าจอเพื่อทำสไลด์โชว์
3.คลิกเมนู File -- > New เพื่อเปิดหน้าต่างเอกสารใหม่
4.กำหนด Width: 216 pixels Heitht: 187 pixls Resolution: 72 pixels/inch Color Mode: RGB Clolr 16 bit ,Background Contents:White
5.คลิก OK
6.กดปุ่ม Ctrl+A หรือคลิกเมนู Select -- > All ที่หน้าต่างรูปภาพนำภาพทั้งหมดมาว่างที่หน้าเอกสารใหม่ (ให้แสดงภาพเป็นเลเยอร์แต่ละเลเยอร์)
7.กดปุ่ม Ctrl+C คัดลอก
8.คลิกเมาส์ที่หน้าเอกสารใหม่ แล้วกดปุ่ม Ctrl+V
9.ให้คัดลอกภาพทั้งหมดมาวางที่หน้าเอกสารใหม่ ถ้ารูปภาพขนาดไม่เท่ากันจะต้องปรับให้เท่ากันทุกรูปก่อน
10.คลิกปุ่ม โปรแกรม Adobe ImageReady เพื่อนำภาพเข้ามาหน้าต่าง Adobe ImageReady
11.คลิกเฟรมแรกให้หน้าต่างแอนนิเมชั่น
12.คลิกรูปดวงตาที่ Layer 5 ออกเพื่อแสดงภาพต่อมา
14.ทำข้อ 12-13 กับภาพต่อ ๆ มาจนครบ 5 ภาพ
15.คลิกเมาส์ที่เฟรม 1
16.คลิกที่ปุ่ม Tween
17.ปรากฏหน้าต่าง Tween
18.กำหนด Tween With: เลือก Next Frame
19.กำหนด Frames to Add: 6
20.คลิกปุ่ม OK
21.จะแสดงการเฟรมของภาพเฟรม 1 เพิ่มอีก 6
22.ให้คลิกภาพที่ 2 เหรม โดยคลิกที่เหรม 8
23.คลิกปุ่ม Tween กำหนด Frames to Add: 6 เฟรม แล้วคลิก OK (ทำเช่นนี้กับอื่นต่อไปจนครบ 5 ภาพ)
24.กำหนดภาพ 1.8.15.22 แสดง 1 วินาที
25.คลิกปุ่ม Play เพื่อดูผลลัพธ์
26.การบันทึกไฟล์ภาพแอนนิเมชั่นไปใช้งาน แบบ Flash คลิกเมนู File -- > Export -- > Macromedia Flash SWF…
27.ปรากฏหน้าต่างให้กำหนดคุณภาพของภาพ ถ้ากำหนดมาก ไฟล์ภาพก็จะใหญ่ กำหนด 80 คลิก OK
28.เลือกโฟลเดอร์ที่ต้องการจัดเก็บ พิมพ์ชื่อ File name คลิกปุ่ม Save
29.ทดลองดับเบิ้ลคลิกไฟล์ Flash เพื่อดูภาพสไลด์โชว์ที่สร้างเสร็จ
ใบงานที่ 5 Upload รูปภาพทั้งหมดที่เตรียมไว้
ขั้นตอนการอัพโหลดรูปภาพเพื่อเข้าไปไว้ในเซิฟเวอร์ของผู้ให้บริการ หลังจากนั้นสามารถนำภาล่านั้นเข้ามากำหนดวางในตำแหน่งต่างๆ ที่ต้องการในหน้าเว็บเพจของเราได้
1.ทำการ login ก่อนทำการแก้ไขหน้าเว็บไซต์
2.คลิกเมนู Manage images
3.คลิกแท็บ Add new Picture
4.ช่อง Category: ให้เลือก Create new Category
5.ช่อง Name of the Category: ให้ใส่ชื่อกลุ่มของสินค้า เช่น พิมพ์ Products
6.คลิกเครื่องหมาย Downsize the pictures: เพื่อย่อภาพ ให้เล็กลงอัตโนมัติ
7.คลิกปุ่ม Browse -- > เลือกรูปภาพ -- > แล้วคลิกปุ่ม Open
8.คลิกปุ่ม Upload picture จะเข้าสู่การอัพโหลดรูปภาพไปเก็บไว้ที่เซิฟร์เวอร์
9.หากต้องการ Upload ได้หลายไฟล์ไห้กดที่ Personal Preferences
10.เลื่อน Scroll ลงมาด้านล่าง ตรง Manage images
12.ช่อง How many pictures to upload at once ให้กำหนดจำนวนไฟล์ 6
13.ช่อง If you Select “Resize image ” resize it to which width (when you upload a new image) ให้เลือก 400 Pixel (Standard)
14.คลิกปุ่มเมนู Save
15.คลิกที่เมนู Manage images
16.คลิก Add new picture
17.จะแสดงหน้าต่างให้เลือกไฟล์ตามที่กำหนด 6 ไฟล์
18.ช่อง Category: ให้เลือก Products (1 image)
19.ให้ทำการ Upload ไฟล์ 6 ภาพ -- > คลิกปุ่ม Upload picture
20.ให้สร้าง Name of the category: Animation
21.คลิก Browse เลือกไฟล์ gif -- > Open
22.แล้วคลิกปุ่ม Upload picture
23.คลิกปุ่ม Submit
ใบงานที่ 6 สร้างหน้าโอมเพจและหน้าเว็บเพจแต่ละหน้า
การสร้างโฮมเพจเพื่อกำหนดให้เป็นหน้าหลักและหน้าเว็บเพจแต่ละหน้า โดยกำหนดให้มีข้อมูลเมนูหน้าแรก รายการสินค้า วิธีชำระเงิน ตำต่อเรา เป็นต้น
1.คลิกเมนู manage pages
2.ให้คลิกรายการ Home เปลี่ยน Home เป็น หน้าแรก คลิกลักษณะ Blod Italic เลือกสี
3.คลิกปุ่ม Save
4.คลิกที่ Contact -- > เปลี่ยน contact เป็น ติดต่อเรา เปลี่ยนสี -- > คลิก Seve
5.หากต้อการสร้างหน้าเว็บเพจขึ้นมาใหม่ คลิก Add new page
6.พิมพ์รายการสินค้า คลิก Blod เลือกสี
7.คลิก Save จะปรากฏรายการสินค้าเพิ่มขึ้น
9.พิมพ์ วิธีชำระเงิน
10.ต้องการเลื่อนรายการใดให้คลิก เมาส์ว้าค้างแล้วลากเลื่อนขึ้นลง เช่น หน้าแรก รายการสินค้า วิธีชำระเงิน ติดต่อเราทดลองดูหน้าเว็บไซต์ของเรา
ใบงานที่ 7 การจัดการเนื้อหา
สร้างเนื้อหาหน้าเว็บเพจแต่ละหน้า เช่นการสร้างตาราง การแทรกหรือแก้ไขรูปภาพ แทรกไฟล์ Flash แทรกรูปภาพสื่ออารมณ์ การปรับแต่งตัวอักษร
1.คลิกที่รายการ หน้าแรก
2.เลื่อน Scroll bar ลงด้านล่าง
3.พิมพ์ข้อความและแทรกรูปภาพดังตัวอย่าง
4.ให้ทดลองดูที่หน้าเว็บไซต์ที่แก้ไข
5.คลิกที่เมนู รายการสินค้า
6.เลื่อน Scroll ลงเพื่อแทรกตาราง
7.พิมพ์ แถว : 4 สดมน์:3 ขนาดเส้นขอบ 2
8.คลิกปุ่ม ตกลง
9.ปรับขยายตารางและพิมพ์ข้อความ แทรกรูปภาพ
10.คลิกปุ่ม Save และทดลองดูผลลัพธ์ที่ได้บนเว็บไซต์
12คลิก วิธีชำระสินค้า
13.แทรกรูปภาพสื่ออารมณ์
พิมพ์ข้อความตังต่อไปนี้
ขั้นตอนการชำระเงิน
1.โอนเงินเข้าบัญชีธนาคารดังต่อไปนี้
-ธนาคารกรุงเทพ สาขา จรัญสนิทวงศ์
เลขที่บัญชี +++++++++++++++++
-ธนาคารกรุงไทย สาขา จรัญสนิทวงศ์
เลขที่บัญชี+++++++++++++++++++
14.คลิกปุ่ม Save แล้วทอดลองดูผลลัพธ์ที่ได้บนหน้าเว็บไซต์
ใบงานที่ 8สร้าง Gallery ให้กับภาพสินค้า
การสร้าง Gallery เพื่อแสดงภาพสินค้าทั้งหมด เมื่อมีผู้เข้าเยี่ยมชมเว็บไซต์คลิกที่ภาพแต่ละภาพใน Gallery จะแสดงภาพสินค้าที่จยายให้แสดงขึ้นมา
1.คลิกเมนู Manage extras
2.คลิกแท็ก Add extra
3.ช่อง Sesct extra: ให้เลือก Gallery
4.คลิกที่ปุ่ม Add extra
5.คลิกช่อง Enter a title for the gallery page: เลือกชื่อของส่วนหัวเรื่องของหน้า gallery พิมพ์ว่า แสดงสินค้า
6.คลิกแท็บ New album สร้างอัลบั้มรูปภาพ
7.ช่อง Title of the albums: รูปสินภาพสินค้า
8.ช่อง Eescription of the albums:สินค้าคุณภาพ ราคาประหยัด
9.คลิกปุ่ม Continue
10.จะปรากฏหน้าต่างนำรูปภาพเข้ามา แล้วคลิกปุ่ม Add pictures จะปรากฏภาพส่วนล่าง
11.คลิกปุ่ม Continue
13.คลิกปุ่ม Complete album
14.ทอลองเปิดเว็บไซต์ของเราดูผลลัพธ์ที่ได้
15.ใส่เสียง เข้าเว็บไซต์ www.esnips.com
16.พิมพ์ Search : background music
17.คลิกเลือก music.mp3 ให้คัดลอก code ที่ช่อง Embed : มาวางที่เนื้อหาบรรทัดสุดท้ายของหน้าแรก
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น