ความจำเป็น
การมีเว็บเพจเป็นของคุณเองและเผยแพร่ผ่านเครือข่ายอินเทอร์เน็ต
จะทำให้ผู้ใช้อื่นๆได้ทราบถึงข้อมูลของคุณ
-เพื่อนำเสนอข้อมูลที่น่าสนใจ
-เพื่อเรียนรู้ทักษะใหม่ๆ
-เพื่อบริการดูแลทางด้านเทคนิค
-เพื่อแลกเปลี่ยนความรู้
-เพื่อประชาสัมพันธ์องค์กร
กลุ่มเป้าหมาย
เวลาออกแบบเว็บไซต์ คุณจะต้องทราบก่อนว่าใครจะเป็นกลุ่มเป้าหมาย
หรือคนที่ต้องการให้เข้ามาดูเว็บไซต์ของคุณ
- กลุ่มเฉพาะเจาะจง
- กลุ่มทั่วไป
สถิติผู้ใช้เว็บ
- อายุ
- เพศ
- รายได้
- ภาษา
- การศึกษา
- เป้าหมาย
ขั้นตอนการสร้างเว็บเพจ
การสร้างเว็บเพจให้ไปแสดงบนเครือข่ายเวิลด์ไวด์เว็บนั้นก็คล้ายๆกับการ
ทำสิ่งพิมพ์ออกเผยแพร่คือ คุณจะต้องทำให้เสร็จก่อนจะนำออกมาให้คนอื่นๆได้เห็น
ขั้นตอน
1. วางแผนการจัดทำ
2. พิมพ์ข้อความ
3. แทรกการเชื่อมต่อ
4. แทรกรูปภาพประกอบ
5. นำเว็บเพจขึ้นสู่เว็บไซต์
เนื้อหาของเว็บเพจ
มีหลายสิ่งที่คุณต้องคำนึงถึงในการสร้างและดูแลเว็บเพจซึ่งต่อไปนี้เป็น
หลักเบื้องต้น 2-3 ประการในการปรับปรุงเว็บไซต์ของคุณ
- ตรวจสอบความซ้ำซ้อน
- ตรวจสอบเรื่องลิขสิทธิ์
- ใส่เนื้อหาให้เต็มในแต่ละหน้า
- ให้ข้อมูลทั่วไปอื่นๆด้วย
- ปรับปรุงอัปเดตข้อมูล
โฮมเพจหรือหน้าหลักของเว็บไซด์
โฮมเพจ คือหน้าหลักของเว็บเพจทั้งหมด ซึ่งส่วนใหญ่จะเป็นหน้าแรก
ของเว็บไซต์นั้นๆ เพื่อให้ผู้เข้ามาเยี่ยมชมได้พบเห็นก่อนหน้าอื่นๆ
- ใช้ข้อความแบบรวบรัด
- สารบัญ
- เตือนผู้อ่านให้บุ๊คมาร์ก
- มีส่วนที่ให้ความช่วยเหลือ
- แสดงข้อความให้เกียรติแก่ผู้ออกแบบ
การเชื่อมโยง
คุณสามารถเชื่อมโยงข้อความหรือรูปภาพในเว็บเพจของคุณกับเว็บไซต์
อื่นที่มีความสัมพันธ์กันได้ ซึ่งถือว่าเป็นเครื่องมือที่มีประสิทธิภาพมากในการสร้าง
เว็บเพจ ข้อคามในเว็บเพจที่มีการเชื่อมโยงไว้จะเป็นข้อความแบบไฮเปอร์เท็กซ์
( hypertext ) แต่เว็บเพจในปัจจุบันได้มีการพัฒนาไปจนถึงให้มีรูปภาพหรือไฟล์
วิดีโอเชื่อมโยงไปยังเว็บไซต์อื่นได้แล้ว ซึ่งเราเรียกแทน ไฮเปอร์เท็กซ์ว่า ไฮเปอร์ลิงก์
( hyperlink )
เหตุผลที่ต้องมีการเชื่อมโยง
- เพื่อส่งอีเมล์
- เพื่อติดต่อกับกลุ่มสนทนา
- เพื่อดึงไฟล์มาใช้ได้สะดวก
- เพื่อการอธิบายความเพิ่มเติม
ภาพกราฟฟิก
คุณสามารถใส่รูปภาพกราฟิก ( Image ) ลงไปในเว็บเพจของคุณได้
เลือกแสดงเฉพาะข้อความ
เพราะมีผู้ใช้บางคนไม่สามารถใช้เบราเซอร์ที่แสดงผลในลักษณะของ
ข้อความอย่างเดียวเพื่อคสามเร็วในการแสดงผล ดังนั้นจึงควรแสดงชื่อภาพไว้ด้วย
ภาพพื้นหลัง
เราสามารถนำรูปเล็ก ๆ มาใส่เพื่อทำเป็นพื้นหลัง แต่ควรระวังเรื่อง
อุปสรรคในการแสดงผลของตัวอักษร
ชนิดของรูปภาพที่จะใช้บนเว็บไซด์
GIF
Graphics Interchange Format จะแสดงผลที่ 256 สี ส่วนมากใช้
เป็นโลโก้ แบนเนอร์ หรือภาพเคลื่อนไหวนามสกุลเป็น .gif
JPEG
Joint Photographic Experts Group แสดงผลที่ 16 ล้านสี มักใช้
กับไฟล์ที่มีรายละเอียดมาก ๆ นามสกุลเป็น .jpg หรือ .jpeg
PNG
Portable Network Graphics แสดงผลได้ 16 ล้านสี มักใช้แทนรูป
ประเภท gif นามสกุลเป็น .png , .ping
**ไฟล์ที่มีความละเอียดมากจะทำให้ไฟล์มีขนาดใหญ่และการแสดงผลช้าลง***
**************************
การทดสอบเว็บเพจ
คุณควรทดสอบเว็บเพจของคุณให้แน่ใจเสียก่อนว่าตรงตามที่วางเป้าหมาย
เอาไว้เพราะมีผู้อ่านหลายคนที่ไม่ยอมเข้ามายังเว็บไซต์ที่มีความผิดพลาดซ้ำเป็น
ครั้งที่สอง เช่นบอกว่าลิ้งไปที่ www.sanook.com แต่พอเข้าแล้วกลับไปที่ www.hotmail.com
เว็บเพจ (Validation Service) ตรวจสอบว่าการใช้ภาษา HTML ของคุณมีข้อผิด
พลาดตรงจุดไหน
- ทดสอบการนำเสนอ
- ตรวจสอบการเชื่อมโยง
- ใช้การทดสอบกลุ่มผู้อ่าน
เผยแพร่เว็บเพจ
เมื่อเว็บเพจของคุณสามารถไปปรากฏในเวิลด์ไวต์เว็บได้ คุณก็คงต้องการ
ให้ชาวโลกได้รู้ว่ามีเว็บเพจใหม่ที่น่าสนใจเกิดขึ้นอีกแห่งหนึ่งแล้วคุณควรทำอย่างไรเพราะ
ไม่มีศูนย์รวมแห่งใดที่ให้คุณแสดงเว็บเพจของคุณแล้วจะรับทราบทั่วถึงกัน ดังนั้น
คุณต้องใช้เครื่องมืออีกหลายตัวต่อไปนี้ข่วยในการประชาสัมพันธ์
- แลกเปลี่ยนการเชื่อมโยง
- ป้ายโฆษณาเว็บเพจ สำหรับบริการนี้ก็อยู่ที่ http://www.linkexchange.com
- เครื่องมือค้นหา โดยให้เข้าไปที่เว็ปไซต์ http://www.mmgco.com/top100.html
- กลุ่มสนทนาหรือนิวส์กรุ๊ป
อ้างอิงจาก:http://www.fortunecity.com/oasis/blackpool/8/makeweb.html
ใบความรู้ที่1 ส่วนประกอบต่างๆ
ของโปรแกรม Dreamweaver
หน้าจอลักษณะการทำงานต่างๆของ
Dreamweaver
 |
 |
 |
หมายเลขบอกการทำงานลักษณะต่างๆบนหน้าจอ
ดังนี้
1.
แถบเมนูต่าง
 |
2.
แถบ insert
 |
3.
แถบเครื่องมือ
 |
4.
พื้นที่สำหรับสร้างเว็บเพจ
5.
แถบ properties
 |
การกำหนดตำแหน่งในการจัดเก็บเว็บไซด์
ก่อนที่เราจะออกแบบเว็บนั้น ผู้ใช้ต้องระบุตำแหน่งที่เก็บไฟล์เว็บเพจต่าง
ๆ ที่สร้างขึ้น
นั่นคือ
เป็นการสร้างโฟลเดอร์มาเก็บไฟล์ต่าง ๆ ที่มาประกอบกันเป็นเว็บไซต์
มีการสร้างดังนี้
1. เลือกเมนู site > new site
 |
2. เลือกแท็บ advance
3. กำหนดชื่อไซต์
4.
เลือกโฟลเดอร์ที่ต้องการเก็บไฟล์
 |
5.
คลิกปุ่ม
ok Dreamweaver จะสร้างหน้าต่าง
file ที่แท็บ site
Form
Forms
คือช่องกรอกแบบฟอร์มที่เราเจอตามตามเวบทั่วไป
เวบมาสเตอร์ใช้ส่วนนี้รับข้อมูลจากผู้เข้าชมเวบ ไม่ว่าจะเป็นประวัติส่วนตัว
ผลโวตต่างๆ หรือ Search หาข้อมูล
การรับข้อมูลของการกรอกแบบฟอร์ม
สามารถรับได้สองทางคือให้ส่งมาทางเมล์หรือส่งเข้าโปรแกรมที่เราได้เขียนไว้ที่ Server
เช่น ( perl , C , java )
การสร้าง Form
·
ใน Object palette ให้คลิกสามเหลี่ยมด้านซ้ายบนค้างไว้แล้วเลือก Form
·
 |
ใน Form panel ให้กดปุ่ม Insert Form ดังรูป
·
 |
จากนั้นภายในหน้า Document จะมีเส้นประแสดงขอบเขตของ Form คือไม่ว่าจะเป็น Text Field Checkbox Radio Button ต้องสร้างไว้ภายในเส้นประสีแดงนี้เท่านั้นเพราะจะมีผลในตอนใส่ Action ไปที่ Server
·
เราจะได้ Form area มาเป็นกรอบเส้นประสีแดง Form Object ที่เหลือในเส้นประนี้ (สำหรับคนที่มองไม่เห็นให้กำหนด View > Visual Aida > invisible element ก็จะเห็นได้)
เราจะได้ Form area มาเป็นกรอบเส้นประสีแดง Form Object ที่เหลือในเส้นประนี้ (สำหรับคนที่มองไม่เห็นให้กำหนด View > Visual Aida > invisible element ก็จะเห็นได้)
การสร้างฟอร์มใดๆ
จำเป็นจะต้องสร้างในกรอบสีแดงนี้เท่านั้น เมื่อดูใน Browser ถึงจะแสดงเป็นรูปฟอร์มให้กรอกขึ้นมา
ถ้าเห็นว่าช่องเล็กไปให้คลิกในกรอบสีแดง จากนั้นให้กด Enter เพื่อขยายกรอบให้มีหลายบรรทัดก็ได้
 |
Form properties
·
Form Name : ชื่ออ้างอิงของ Form
จำเป็นมาก มีประโยชน์ในการเขียนโปรแกรม ปกติโปรแกรมจะตั้งไว้ให้คือ Form1
·
Action : เรียกไฟล์จะมาจัดเก็บข้อมูลให้กับ
Form ซึ่งอาจจะเป็น ไฟล์ Java หรือที่เขียนจาก
Perl
·
Method : ลักษณะการส่งข้อมูลมีอยู่สองแบบคือ
Get , Post
·
Get : การส่งข้อมูลแบบ get จะรวมข้อมูลเป็น URL ส่งไปที่ Server ข้อมูลจะได้ไม่เกิน 8192 ตัวอักษร
ดังนั้นไม่ควรใช้กับฟอร์มยาวๆ (นิยมใช้กับ search
engine )
·
Post : การส่งข้อมูลแบบ post
ส่งแบบฟอร์มโดยรวมมาเป็น massage
·
ค่า defaule จะตั้งค่าเป็นแบบ
get
Add object to form
 |
 |
||
Text filds
·
คลิกที่ Insert text filds จะมีช่องสำหรับกรอกข้อความ
·
ให้มาที่ Properties
inspector สามารถกำหนดค่าต่างได้ดังนี้
·
 |
Type : Single line เป็นค่าที่โปรแกรมเลือกให้อยู่แล้ว เป็นแบบใส่ข้อความได้แถวเดียว สามารถกำหนดความกว้างของช่องได้ตามจำนวนตัวอักษรในช่อง Char Width และยังสามารถกำหนดตัวอักษรให้พิมพ์ได้ไม่เกินตามที่เรากำหนด
·
Type : Multiline เป็นการกำหนดให้กรอกข้อความได้หลายบรรทัดดังรูปด้านบน
เราสามารถกำหนดความกว้างได้ที่ Num Line ในตัวอย่างระบุ 10
บรรทัด ส่วน Char Width กำหนดเป็น 20 ตัวอักษรต่อแถว ในช่อง Wrap ให้กำหนดเป็น Defaul
จะเป็นการตัดบรรทัดให้ถ้าครบจำนวน 20 ตัวอักษร
·
Type : Password เป็นการกำหนดให้กรอกเป็นรหัส ไม่ว่าจะพิมพ์อะไรลงไปจะแสดงออกมาเป็นเครื่องหมาย ******* ตลอด สามารถกำหนดจำนวนตัวอักษรได้เหมือน Single line
Type : Password เป็นการกำหนดให้กรอกเป็นรหัส ไม่ว่าจะพิมพ์อะไรลงไปจะแสดงออกมาเป็นเครื่องหมาย ******* ตลอด สามารถกำหนดจำนวนตัวอักษรได้เหมือน Single line
Button
มีอยู่สองแบบคือ ส่งและลบข้อความทั้งหมด ( Submi
/ Reset ) หรือ Send / Clear เราสามารถตั้งชื่อเป็นชื่ออะไรก็ได้ตามต้องการ
·
 |
คลิก Button ใน Form Object
·
 |
ในตัวอย่างเป็นการใช้ปุ่ม Submit ซึ่งเป็นค่าที่ทางโปรแกรมได้กำหนดให้ เราสามารถเปลี่ยนชื่อได้ในช่อง Label ส่วนในช่อง Action ถ้ากำหนดให้ปุ่มนี้เป็นปุ่มส่งข้อความให้เลือก Submit Form
·
ตัวอย่างต่อไปเป็นการใช้ปุ่มลบข้อความทั้งหมดที่ได้กรอกในแบบฟอร์ม
·
ในช่อง Label กำหนดชื่อเป็น Clear ส่วนช่อง Action ให้กำหนดเป็น Reset form ซึ่งจะเป็นการลบข้อความทั้งหมดของฟอร์ม
ในช่อง Label กำหนดชื่อเป็น Clear ส่วนช่อง Action ให้กำหนดเป็น Reset form ซึ่งจะเป็นการลบข้อความทั้งหมดของฟอร์ม
Checkbox
รูปแบบคล้ายกับ radio button เพียงแต่สามารถทำเครื่องหมายได้หลายช่องส่วนมาจะใช้ในการสอบถามความต้องการต่างๆ
·
 |
 |
||
คลิก Checkbox ใน Form Object
·
ในตัวอย่างกำหนดให้ทำการเลือกสีที่ชอบ
เป็นสี Red , Green , Blue
·
Checked Value ให้ใส่ชื่อให้สอดคล้องกับหัวข้อที่ได้กำหนด
จะมีผลในตอนเก็บรวบรวมข้อมูล
·
Initial State สามารถเลือกได้ว่าจะ Check
ไว้ล่วงหน้าหรือไม่
RadioButton
สามารถเลือกได้เพียงช่องเดียว ยกตัวอย่างเช่นการเลือกเพศ เช่น ชาย หรือ
หญิง
·
คลิกที่ Radiobutton ใน Form Object
 |
 |
||
·
Checked Value ให้กำหนดข้อมูลที่ต้องการทราบ
เช่น Man หรือ Woman
·
Initial State สามารถกำหนดเลือก Checked
ไว้ที่ช่องใดช่องหนึ่งก็ได้
List/menu list
จะเป็น list option ให้เลือกเช่น
จำนวนสมาชิกในบ้านท่าน มีให้เลือกแบบ list กับแบบ menu
โดยเซ็ตคำที่เลือกได้ใน list value ค่า value
จะเป็นค่าที่โปรแกรมนำมาเก็บไว้ในตัวแปร
 |
 |
||
·
คลิกที่ list menu ใน Form Object
·
มาที่ Properties inspector
·
Type เลือกว่าจะให้เป็นแบบไหนระหว่าง Menu กับ List
Type เลือกว่าจะให้เป็นแบบไหนระหว่าง Menu กับ List
·
คลิกที่ List Value เพื่อกำหนดค่าตัวแปร
·
คลิกเครื่องหมาย + เพื่อเพิ่มตัวแปร ตัวอย่างเป็นการสำรวจว่าผู้ใช้ส่วนมากใช้ E-mail ที่ใด
คลิกเครื่องหมาย + เพื่อเพิ่มตัวแปร ตัวอย่างเป็นการสำรวจว่าผู้ใช้ส่วนมากใช้ E-mail ที่ใด
·
คลิก Ok
·
ผลลัพธ์ที่ได้
 |
File Field
 |
ให้ผู้ชม Upload ไฟล์มาเก็บไว้ที่เราได้ เช่น การส่งภาพเข้าประกวด จะสังเกตุได้จากผู้ให้บริการ e-mail จะใช้ในการแนบไฟล์
 |
Image Filed
เลือกรูปมาใช้แทนปุ่ม Submit
Hidden filed
เป็น Form ที่ผู้เข้าชมไม่สามารถมองเห็นได้ ไว้ใช้ comment
หรือส่ง Value ให้โปรแกรมเท่านั้น
Jump Menu
ลักษณะการทำงานของ Jump menu จะเหมือนกับการนำคุณสมบัติของ
Navigation bar กับ Listbox แบบ menu มาผสมกัน
โดยหน้าตาของมันจะเหมือนกับ Listbox ทุกอย่าง
คือมีรายการให้เลือกได้ เพียงแต่หลังจากที่ผู้ใช้เลือกรายการเรียบร้อยแล้ว
จะลิงค์ไปยังหน้าโฮมเพจอื่นๆ เหมือนกับการลิงค์ที่ Navigation bar นั้นเอง
ทันทีที่คลิกปุ่ม Insert Jump menu ก็จะปรากฏ
Dialog box ซึ่งใช้สำหรับกำหนดรายการตัวเลือกและหน้าโฮมเพจที่ต้องการลิงค์
·
เพิ่มรายการตัวเลือกลงในช่อง Menu
Items โดยคลิกที่เครื่องหมาย + ที่ปุ่มบนซ้าย
·
ป้อนชื่อหัวข้อหรือรายการลงในช่อง Text
·
กำหนดหน้าโฮมเพจที่จะลิงค์ไปในช่อง When
Selected Go To URL
·
ทำซ้ำข้อ 1-3 เพื่อเพิ่มรายการตัวเลือกจนครบ
·
กำหนดวินโดว์หรือเฟรมที่จะแสดงหน้าโฮมเพจทุกๆ
หน้าที่ลิงค์ไปในช่อง Open URL In
·
กำหนดชื่อของ Jump Menu ในช่อง Menu Name
·
เลือก Checkbox “ Insert Go
Button After Menu “ หากต้องการกำหนดให้มีปุ่มคลิก GO อยู่ข้างๆ Jump Menu ซึ่งใช้กำหนดว่าหลังจากที่ผู้ใช้เลือกหัวข้อรายการแล้ว
จะยังไม่ลิงค์ไปหน้าโฮมเพจอื่น จนกว่าจะคลิกปุ่ม GO
·
เลือก Checkbox “ Select
First Item After URL Chang “ สำหรับกำหนดให้แทบสีฟ้าแสดงอยู่ที่ตัวเลือกรายการแรก
หลังจากที่มีการลิงค์ไปยังหน้าโฮมเพจอื่นแล้ว
·
จากนั้นคลิก OK
การแทรกตาราง
 |
 |
 |
การใส่ข้อความและการแก้ไขข้อความ
|
 |
2.
คลิกเมาส์เพื่อวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการใส่ข้อความ
|
3. พิมพ์ข้อความ
4. กดคีย์ เมื่อจบย่อหน้าและ ต้องการขึ้นย่อหน้าใหม่ แต่ถ้าต้องการขึ้นบรรทัดใหม่โดยยังอยู่ในย่อหน้าเดิมให้กดคีย์ + แทน |
ทูบาร์จัดรูปแบบ
1. กำหนดฟอนต์ ที่ต้องการ
2. การกำหนดขนาดข้อความ
3. การใส่สีข้อความ
4. การจัดตำแหน่งข้อความ
การแทรกภาพลงในหน้าเว็บเพจ
กด F8 เพื่อเรียก Site ให้สร้างไฟล์ขึ้นใหม่ดังนี้ index.html , address_book.html , my_picture.html
ต่อมาให้การเลือกข้อความ My Picture ให้พร้อมที่จะทำการลิงค์ ให้เริ่มทำการลิงค์เหมือนกับข้อความแรกแต่ให้เลือกไฟล์ใน Dialog box เป็น my_picture.htm จากนั้นคลิก Select
หลังจากเลือกไฟล์แล้วให้ทดสอบการโดยการกด F12 เป็นการดูผ่าน Browser ทดลองคลิกที่ลิงค์ที่ได้ทำไว้
การทำลิงค์สามารถพิมพ์เข้าโดยตรงในกรณีที่เราสามารถจำชื่อได้ โดยพิมพ์ในช่อง Link
หรืออีกวิธีหนึ่งจัดว่าเป็นวิธีที่แน่นอนไม่ผิดพลาดในการลิงค์ แต่เราต้องเปิด Site Local Folder และย่อ Window ของทั้งสองให้เล็กสามารถมองเห็นได้ทั้งสองหน้าต่าง
จากนั้นทำการคลิกที่ Point to file ค้างแล้วลากมายังชื่อไฟล์ใน Local Folder ที่ต้องการลิงค์
Yahoo
ทดสอบโดยการกด F12 แต่ยังไม่ต้องคลิกใน Browser เพราะเรายังไม่ได้ทำการต่อเชื่อมอินเตอร์เน็ต
ให้ทดสอบโดยการเอาเมาส์มาวางทับข้อความโดยไม่ต้องคลิก จากนั้นให้สังเกตจาก Task
bar ด้านล่างจะระบุที่ไปถ้าทำการคลิก
แต่ถ้าได้ทำการต่อเชื่อมอินเตอร์เน็ตก็สามารถคลิกได้เลย
ให้เปิดไฟล์ index.html
จากนั้นทดสอบโดยการกด F12 คลิกข้อความจากนั้นโปรแกรมจะเรียกโปรแกรม Outlook ขึ้นมาให้ใส่ข้อความจากนั้นคลิกส่ง ( send )
เลือกรูปจาก Dialog box
ให้มาที่ Properties ในช่องลิงค์ให้คลิกที่รูปโฟล์เดอร์เหมือนกับการทำลิงค์ตัวอักษรดังที่ได้นำเสนอไปแล้ว
จากนั้นให้คลิกที่ขอบที่ได้ทำการลากไว้ให้ทำงาน
ให้คลิกขอบให้ Hotspot ทำงานในตัวอย่างดูได้จากรูปวงกลม จะมีปุ่มขึ้นรอบรูป
ในตัวอย่างเป็นการลิงค์ไปที่ Yahoo.com
ให้เอาเมาส์มาคลิกที่เราได้ทำการลิงค์แบบ Hotspot จะสังเกตได้ว่าบริเวณอื่นที่ไม่ได้ทำ Hotspot ไม่สามารถที่จะลิงค์ได้ถึงแม้ว่าจะเป็นภาพเดียวกัน
จะมี Dialog box ขึ้นมาให้ใส่ค่าดังนี้
*************************************************
1.
คลิกปุ่ม insert picture
2.
เลือกตำแหน่งที่เก็บภาพ
3.
เลือกไฟล์รูปภาพ
4.
คลิก
ok
 |
5.
คลิกที่ภาพเมื่อต้องการปรับแต่ง
Link
ลิงค์สามารถแยกเป็นประเภทใหญ่ๆ
ได้สองประเภทคือการลิงค์แบบ
·
Absolute Link : เป็นลิงค์ที่ต้องอ้างอิงข้ามระหว่างโดเมน
เช่นการลิงค์ไปยังเวบไซท์อื่น และจะต้องระบุชื่อโดเมนทั้งหมด เช่น ทำการลิงค์ไปที่
Hotmail ต้องระบุคือ http://www.hotmail.com ถึงจะสามารถลิงค์ได้
·
Relative : เป็นการลิงค์ภายในเวบของเราเอง
จะอยู่ในโฟลเดอร์เดียวกัน การลิงค์ไม่ยากมากนัก
การทำลิงค์สามารถที่จะทำได้หลายวิธี
และสามารถที่จะลิงค์ไปยังหน้าอื่นหรือหน้าเดียวกันก็ทำได้
วิธีการทำลิงค์มีหลายวิธีด้วยกันแล้วแต่ความถนัดของผู้ใช้แต่ละคน
แต่ในที่นี้จะขอนแนะนำตั้งแต่วิธีที่ง่ายที่สุดจนไปถึงวิธีที่ซับซ้อน
การทำลิงค์ข้อความ
เป็นการลิงค์ที่ง่ายและไม่ยุ่งยากก่อนที่จะทำการลิงค์จำเป็นต้องสร้างไฟล์ที่เป็นเป้าหมายที่จะทำการลิงค์
ให้ทำดังนี้
·
 |
กด F8 เพื่อเรียก Site ให้สร้างไฟล์ขึ้นใหม่ดังนี้ index.html , address_book.html , my_picture.html
·
หลังจากที่ได้สร้างไฟล์เรียบร้อยแล้วให้เริ่มทำงานที่หน้า
index.html โดยการดับเบิ้ลคลิกที่ไฟล์ index
·
จากนั้นจะมาเริ่มต้นที่หน้า
Document index.html ให้ทำการพิมพ์ข้อความว่า
Address Book และ My Picture
·
ขั้นตอนต่อไปเป็นขั้นตอนการลิงค์ทำได้โดยการป้ายทับข้อความ Address Book จากนั้นให้มาที่ Porperties inspector ในช่องลิงค์ให้คลิกที่สัญลักษณ์รูปโฟลเดอร์ดังรูปด้านล่าง
ขั้นตอนต่อไปเป็นขั้นตอนการลิงค์ทำได้โดยการป้ายทับข้อความ Address Book จากนั้นให้มาที่ Porperties inspector ในช่องลิงค์ให้คลิกที่สัญลักษณ์รูปโฟลเดอร์ดังรูปด้านล่าง
·
จากนั้นจะมี
Dialog box ให้เลือกไฟล์ address_book.htm
จากนั้นคลิก Select
·
 |
ต่อมาให้การเลือกข้อความ My Picture ให้พร้อมที่จะทำการลิงค์ ให้เริ่มทำการลิงค์เหมือนกับข้อความแรกแต่ให้เลือกไฟล์ใน Dialog box เป็น my_picture.htm จากนั้นคลิก Select
·
 |
หลังจากเลือกไฟล์แล้วให้ทดสอบการโดยการกด F12 เป็นการดูผ่าน Browser ทดลองคลิกที่ลิงค์ที่ได้ทำไว้
·
หลังจากคลิกที่
Address Book ทาง Browser จะเปิดหน้าเพจขึ้นใหม่เป็นหน้าเพจของ address_book.htm
จะสังเกตได้จากช่อง Address
·
 |
การทำลิงค์สามารถพิมพ์เข้าโดยตรงในกรณีที่เราสามารถจำชื่อได้ โดยพิมพ์ในช่อง Link
·
 |
หรืออีกวิธีหนึ่งจัดว่าเป็นวิธีที่แน่นอนไม่ผิดพลาดในการลิงค์ แต่เราต้องเปิด Site Local Folder และย่อ Window ของทั้งสองให้เล็กสามารถมองเห็นได้ทั้งสองหน้าต่าง
·
 |
จากนั้นทำการคลิกที่ Point to file ค้างแล้วลากมายังชื่อไฟล์ใน Local Folder ที่ต้องการลิงค์
·
แต่วิธีดังกล่าวจะใช้เนื้อที่ในการทำงานมากและมีข้อจำกัดสำหรับหน้าจอที่เล็กเนื้อที่ในการทำงานก็จะน้อยลงไปด้วย
แต่แนะนำให้ใช้วิธีแรกดีเพราะสะดวกและไม่เกิดการผิดพลาด
การลิงค์ไปยังเวบไซท์อื่น
·
เราสามารถที่จะทำเวบของเราเป็นเวบบริการหรือรวมลิงค์ให้ผู้อื่นสามารถไปยังเวบไซท์อื่นได้อีกด้วยเพื่อเป็นความหลากหลายในเวบของเรา
และยังสะดวกกับเจ้าของเวบเองอีกด้วยโดยไม่ต้องพิมพ์ URL เข้าไปใหม่
แต่สามารถคลิกที่เวบของตัวเองก็สามารถไปยังเวบที่ต้องการได้
เราอาจจะทำลิงค์เฉพาะเวบที่เราใช้บ่อยๆ เช่น เช็คเมล์ ส่งเพจ และอื่นๆ
ขั้นตอนการทำลิงค์
·
ให้เปิดไฟล์
index.html พร้อมที่จะทำงาน
·
พิมพ์ข้อความลงไปดังนี้
·
Hotmail
·
 |
Yahoo
·
Pantip
·
จากนั้นให้ป้ายทับข้อความ
Hotmail ให้ทำงาน
·
มาที่ Properties
inspector
·
ส่วน Yahoo และ Pantip ให้ทำขั้นตอนเดียวกันโดยเปลี่ยนลิงค์ไปที่ http://www.yahoo.com และ http://www.pantip.com
ส่วน Yahoo และ Pantip ให้ทำขั้นตอนเดียวกันโดยเปลี่ยนลิงค์ไปที่ http://www.yahoo.com และ http://www.pantip.com
·
 |
ทดสอบโดยการกด F12 แต่ยังไม่ต้องคลิกใน Browser เพราะเรายังไม่ได้ทำการต่อเชื่อมอินเตอร์เน็ต
ให้ทดสอบโดยการเอาเมาส์มาวางทับข้อความโดยไม่ต้องคลิก จากนั้นให้สังเกตจาก Task
bar ด้านล่างจะระบุที่ไปถ้าทำการคลิก
แต่ถ้าได้ทำการต่อเชื่อมอินเตอร์เน็ตก็สามารถคลิกได้เลย
การทำลิงค์เมล์ Link E-mail
การทำลิงค์เมล์ส่วนมากจะเป็นการให้ผู้ที่ชมเวบไซท์ได้ติดต่อกับเจ้าของเวบไซท์
กล่าวคือก็เป็นการส่งเมล์ธรมดานั้นเองแต่พิเศษอยู่ที่ผู้ชมไม่ต้องพิมพ์ที่อยู่ E-mail
Address ของเรา
เพียงพิมพ์ข้อความติชมเท่านั้น
เหมือนเป็นการส่งเมล์อัตโนมัติโดยไม่ต้องไปที่ผู้ให้บริการเมล์
โดยหลังจากคลิกลิงค์เมล์ทางBrowser จะทำการเปิดโปรแกรมส่งเมล์ให้โดยอัตโนมัติส่วนมากถ้าเป็น
IE จะเปิดโปรแกรม Outlook ให้
วิธีลิงค์เมล์
·
 |
ให้เปิดไฟล์ index.html
·
ให้พิมข้อความว่า
คำติชม
·
หรืออีกวิธีคือ
หรืออีกวิธีคือ
·
ใช้
Object โดยเลือกที่ Insert
Email Link
 |
·
ภายใน
Dialog box ให้กำหนดดังนี้
 |
·
Text ให้ใส่ข้อความ
คำติชม
·
E-mail ให้ใส่ที่อยู่ของเมล์
·
คลิก OK
·
 |
จากนั้นทดสอบโดยการกด F12 คลิกข้อความจากนั้นโปรแกรมจะเรียกโปรแกรม Outlook ขึ้นมาให้ใส่ข้อความจากนั้นคลิกส่ง ( send )
การใช้รูปภาพเป็นลิงค์
ส่วนมากจะมีสองประเภทใหญ่คือ
การใช้ภาพทั้งภาพทำลิงค์ หรืออีกอย่างก็คือการใช้บางส่วนของภาพทำลิงค์โดยใช้
Hotspot เลือกเฉพาะที่
การใช้ภาพทั้งภาพเป็นลิงค์
การใช้ภาพเป็นลิงค์นิยมสร้างภาพขึ้นมาเองทำเป็นรูปปุ่มกดจะใช้ร่วมกับ
Rollover คือลักษณะก่อนเอาเมาส์ผ่านจะเป็นอีกรูปพอเอาเมาส์ผ่านหรือวางที่รูปก็จะเปลี่ยนเป็นอีกรูปหนึ่งและยังสามารถเป็นลิงค์ได้อีกด้วย
การทำดังกล่าวจะกล่าวถึงในหัวข้อ Rollover ในที่นี้จะกล่าวถึงการทำลิงค์แบบธรรมดา
·
สร้างรูปเก็บไว้ในโฟลเดอร์
image ที่ได้สร้างไว้
·
มาที่หน้า
Document index.html
·
คลิก Insert
image จาก Object
·
 |
เลือกรูปจาก Dialog box
·
คลิก Select
·
จากนั้นให้คลิกที่รูปภาพในหน้า
Document ที่ได้ Insert มา
·
 |
ให้มาที่ Properties ในช่องลิงค์ให้คลิกที่รูปโฟล์เดอร์เหมือนกับการทำลิงค์ตัวอักษรดังที่ได้นำเสนอไปแล้ว
·
จากนั้นเลือกไฟล์ที่ต้องการลิงค์ไปหา
หรือจะลิงค์ไปยังเวบไซท์นอกก็ได้
การลิงค์ภาพแบบ
Hotspot
การลิงค์แบบ Hotspot การใช้ส่วนมากเป็นการลิงค์เพียงบางส่วนของภาพ ภาพส่วนมากจะเป็นภาพที่มีขนาดใหญ่เพียงภาพเดียว
ขั้นตอนการทำ Hotspot
·
มาที่หน้า
Document พร้อมทำงาน
·
Insert รูปภาพที่ได้เตรียมไว้
( การดึงรูปภาพเหมือนปกติที่ได้กล่าวมาแล้ว
)
·
ในตัวอย่างนี้เป็นรูปภาพใหญ่และมีส่วนประกอบย่อยที่จะทำเป็นที่ลิงค์
·
คลิกที่ภาพให้ทำงาน
·
มาที่ Properties inspector
มาที่ Properties inspector
·
ใหทำการขยาย
Properties inspector เป็นแบบ Full
·
ช่อง Map ให้กำหนดชื่อ
ช่อง Map ให้กำหนดชื่อ
·
คลิกรูปสี่เหลี่ยมดังภาพ
·
จากนั้นให้มาที่รูปภาพในส่วนที่ต้องการทำเป็นลิงค์
 |
·
ทำการลากเมาส์ค้างให้เป็นดังรูปตัวอย่าง
·
 |
จากนั้นให้คลิกที่ขอบที่ได้ทำการลากไว้ให้ทำงาน
·
ในตัวอย่างด้านบนเป็นการใช้
Hotspot หลายรูปแบบทั้ง สี่เหลี่ยม
วงกลม และรูปทรงอิสระ
·
 |
ให้คลิกขอบให้ Hotspot ทำงานในตัวอย่างดูได้จากรูปวงกลม จะมีปุ่มขึ้นรอบรูป
·
ให้มาที่
Properties inspector
·
Link ให้กำหนดลิงค์ตามปกติโดยหากเป็นเวบนอกให้พิมพ์เข้าไปเลย
หากเป็นลิงค์ภายในให้ทำตามขั้นตอนที่ได้กล่าวมาแล้ว
·
 |
ในตัวอย่างเป็นการลิงค์ไปที่ Yahoo.com
·
ทดสอบโดยการกด
F12
·
 |
ให้เอาเมาส์มาคลิกที่เราได้ทำการลิงค์แบบ Hotspot จะสังเกตได้ว่าบริเวณอื่นที่ไม่ได้ทำ Hotspot ไม่สามารถที่จะลิงค์ได้ถึงแม้ว่าจะเป็นภาพเดียวกัน
Rollover Image
เป็นเทคนิคที่ใช้กันแพร่หลายให้ทั้งความสวยงามและความตื่นตาตื่นใจกับผู้ชมได้เป็นอย่างดี
ในสมัยก่อนต้องมีความรู้ด้านภาษา JavaScript ถึงจะทำได้
แต่ด้วยความสามารถของ Dreamweaver ช่วยให้ผู้ที่ไม่รู้ภาษา JavaScript
ก็สามารถเพิ่มลูกเล่นนี้เข้าไปได้
ขั้นตอนการทำ
·
คลิก Cursor ให้อยู่ในตำแหน่งที่ต้องใส่
Rollover Image
·
กดปุ่ม Rollover ใน Object palette หรือที่เมนู Insert >
Rollover Image
·
 |
จะมี Dialog box ขึ้นมาให้ใส่ค่าดังนี้
·
Image Name ใส่ชื่อถ้าไม่ใส่ทางโปรแกรมจะกำหนดให้เป็น
Image1 ,2,3,4…………
·
Original Image ให้คลิกรูปจาก Browser
แล้วเลือกรูปที่ต้องการ ( เป็นรูปที่กำหนดให้เป็นปุ่มก่อนที่เม้าส์จะลากผ่าน
·
Rollover Image ให้คลิกรูปจาก Browser
แล้วเลือกรูปที่ต้องการ ( เป็นรูปที่กำหนดให้เป็นปุ่มเวลาที่ลากเม้าส์ผ่าน
·
ใส่เครื่องหมายถูกหน้า Preload
Rollover Image ( เพื่อเป็นการ Load รูปภาพล่วงหน้าเพื่อให้การทำงานของ
Rollover เป็นไปอย่างราบรื่น )
·
When Clicked, Go To URL ใส่ลิ้งค์ที่ต้องการให้เรียกขึ้นมาหลังจากที่คลิกปุ่มแล้ว
·
หลังจากเรียบร้อย คลิก OK แล้วจากนั้นให้ทำงานการทดสอบดูใน Browser โดยการกดปุ่ม F12 เมื่อ Browser เปิดขึ้นมาให้ลองเลื่อนเมาส์ผ่านรูปดู
การสร้าง Popup Manu
1.
ทำการตกแต่งหน้าเว็บเพจตามที่ได้เรียนไปแล้ว โดยส่วนที่ต้องการทำเป็น Popup Menu ต้องแทรกรูปภาพเพื่อทำเป็นลิ้งค์
2. เลือกเมนู Windows à Behaviors จากนั้นทำการ Save ชิ้นงานก่อนทำขั้นต่อไป
3. เลือกรูปที่ต้องการทำเป็น Popup Menu แล้วเลือกปุ่ม
+ à Show Popup Menu
4
ในช่อง Text ใส่คำอธิบายลิ้ง
– ช่องลิ้ง ใส่เว็บไซด์ปลายทางลงไป (ถ้าต้องการปรับแต่งสีของเมนู
ให้เข้าที่หัวข้อ Appearance หรือถ้าต้องการปรับแต่งส่วนที่ต้องการให้
Popup Show ให้เข้าที่หัวข้อ Position
5.
ทำเมนูให้ครบ จากนั้น Save
ชิ้นงาน แล้วกด คีย์ F12 เพื่อดูผลงาน
เสร็จแล้วครับ
Popup Menu ง่ายๆ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น