Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Webmaster Tip ตอนที่1.3 เรียนรู้หลักการใช้ ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 1887|ตอบ: 0
go

ตอนที่1.3 เรียนรู้หลักการใช้ Objacts และ Properties

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 6-8-2008 19:55 |แสดงโพสต์ทั้งหมด
สวัสดีครับ... เมื่อตอนที่แล้วนั้นเราได้รู้หลักการใช้ Menu bar กันไปแล้ว ในวันนี้เราจะมารู้เรื่อง Objacts และ Properties ของ Objacts ที่สำคัญเป็นหลัก ว่ามีหลักการใช้อย่างไร เรามาเริ่มเรียน รู้กันเลยนะขอรับ...

Propertise = ส่วนปรับแต่งเพิ่มเติมของ Objacts เช่น การปรับขนาดรูปภาพและการปรับขนาดและใส่สี ตารางและตัวอักษรเป็นต้น

ตรงจุดนี้เราควรทำความเข้าใจให้มากๆ น่อย เริ่มจากส่วนที่สำคัญๆ คือ

การปรับแต่งส่วนของ Text ( ตัวอักษร ) จะมีหลายส่วนด้วยกันดังนี้

ก่อนอื่นต้องทำการเลือกตำแหน่งของตัวอักษรที่เราต้องการโดยการนำเอาเคอเซอร์ปิดทับตัวอักษร ดังภาพ แล้วก็ทำการปรับเปลี่ยนในส่วนต่างๆดังจะเห็นจากรายละเอียดดังนี้

1. Format คือรูปแบบขนาดของตัวอักษร เช่น Heading1ก็จะเกี่ยวหัวข้อใหญ่ตัวอักษร ก็จะใหญ่ขึ้น Heading2 ก็จะเกี่ยวหัวข้อลองลงมาขนาดตัวอักษรก็จะลดลง

2. Default font คือ แบบตัวอักษรหลักที่ใช้ในที่นี้ขอแนะนำให้ใช้แบบ Ms Sans Serif เป็น font ที่ เว็บมาสเตอร์ส่วนใหญ่นิยมใช้กันในปัจจุบัน ใช้ในการทำเวป ในโปรแกรม Dreamweaver เราสามารถ Add fontได้โดยการคลิ๊กตรง Default font แล้วจะเห็นคำสั่ง Edit font list เมื่อทำการเลือกแล้วจะมีส่วน ต่างๆดังนี้

Font list ส่วนของ Font ที่มีอยู่แล้วใน List เมื่อเราติดตั้งโปรแกรมใหม่ๆ จะมี Font ใน List เยอะเลยให้เราทำการลบ Font เหล่านั้นให้หมด โดยคลิ๊กเลือกที่ font แล้วคลิ๊กตรงเครื่องหมายลบเพื่อทำ การลบ font ใน list ให้หมด จากนั้นให้มาที่ส่วน Available Fonts: เพื่อทำการเลือก Font ในที่นี้ให้เลือก Font Ms Sans Serif เมื่อคำการเลือกได้แล้วทำการเลือกโดยการคลิ๊กที่ปุ่ม Font ที่เราทำการเลือกก็ จะไปอยู่ใน Chosen Fonts แล้วทำการ OK ตอนนี้ใน List ของเราก็จะมี Font Ms Sans Serif

3. ส่วนจัดการเกี่ยวกับ Size ก็คือขนาดของตัวอักษร และ ส่วน Color เกี่ยวสีของตัวอักษร เมื่อทำการ เลือกจะมีส่วนที่แสดง Code สีออกมา เช่น สีขาว Code สีก็เป็น #FFFFFF ตัวอักษรหนาและเอียง แล้ว Align เกี่ยวกับตำแหน่งตัวอักษร เราต้องการให้อยู่ ด้านข้างซ้ายขวา หรือตรงกลาง

4. ส่วนลิ้งค์์ คือ การเชื่อมโยงเอกสาร HTML และเอกสารอื่น ในการที่จะลิ้งค์ข้อความ ให้เอาเม้าลากปิดทับตัวอักษร จากนั้นให้ทำการพิมพ์ URL ของเอกสารหรือ Brow หาไฟล์ เอกสาร HTML และเอกสารอื่น จะเห็นจากตัวอย่างลักษณะการลิงค์ดังนี้

- การลิ้งค์แบบเชื่อมไฟล์เอกสาร HTML โดยการเลือกที่โฟลเดอร์ ลักษณะจะเป็นอย่างนี้ file:///D|/webdesign/mobile_sv.html

- การลิงค์แบบเชื่อมโยงไปยังเวปไซต์ โดยการพิมพ์ URL ของเวปไซต์ลงในช่องลิ้งค์ http://www.thaigraph.com/about/show_piccs.html

- การลิงค์แบบเชื่อมโยงไฟล์ต่างๆภายในเวป การลิงค์แบบนี้ส่วนใหญ่จะลิ้งค์ให้เขาดาวโหลดไฟล์ http://www.thaigraph.com/download/info01.zip เมื่อคำการคลิ๊กลิ้งค์ตัวนี้แล้วสามารถจะ ดาวโหลดไฟล์ info1.zip มายังเครื่องได้

Target คือ การกำหนดให้ไฟล์ที่เราลิงค์ ไปยังตำแหน่งใดของแฟรม หรือ ต้องการให้เปิดหน้าใหม่ ทันทีเมื่อทำการลิงค์ การใส่ Target เราสามารถกำหนดชื่อเป็นอะไรก็ได้ถ้าต้องการให้เปิดหน้าใหม่ แต่ถ้าต้องการให้ออกไปยังเฟรม เราต้องใส่ชื่อให้ตรงเฟรมที่เรากำหนด จุดเราจะเรียนรู้กันในบท ต่อไป

การปรับแต่งส่วนของ Table จะมีหลายส่วนด้วยกันที่เราจะต้องทำความเข้าใจ

Table ถือว่าเป็นส่วนที่สำคัญที่ทำให้เราออกแบบเวปได้สวยงามและเป็นสัดส่วนมากที่สุด และ Option หลักที่เราต้องรูปและเข้าใจก็จะมีดังนี้

ก่อนอื่นก็ทำการเลือกตำแหน่งของ Table ที่เราจะทำการปรับเปลี่ยนโดยเอาเม้าคลิ๊กเลือก ที่ Table หน้าตาของ Option Table ก็จะออกมาดังภาพ

.ส่วนที่1. Option เกี่ยวกับการจัดการขนาดลักษณะต่างๆของ Table ก็จะประกอบไปด้วย

Rows = Table แนวนอนหรือแนวขวางมีจำนวน 1 Table ถ้าเราต้องการเพิ่ม Rows ก็ให้ เพิ่มตัวเลขเข้าไปเช่น 2 แถวของ Table ก็จะเพิ่มเป็นสองแถวทันที

Cols = Table แนวตั้งหรือแนวด้านข้างมีจำนวน 3 Table ถ้าเราต้องการเพิ่ม Cols ก็ให้ เพิ่มตัวเลขเข้าไปเช่น 2 แถวของ Table ด้านข้างก็จะเพิ่มเป็นสองแถวทันที

W = ความกว้างของ Table H = ความสูงของ Table เราต้องการเพิ่มความกว้างและความสูง ของ Table ก็ใส่ค่าตัวเลขลงไป Table ก็จะมีความสูงความกว้างตามที่เรากำหนด

Cellpad = ระยะห่างจาก Table ภายใน CellSpace = ระยะห่างจาก Table ภายนอก เราต้องการ เพิ่มระยะห่างของ Table ทั้งภายในและภายนอกก็สามารถใส่ค่าตัวเลขลงไป

Align = ตำแหน่งของ Table เราต้องการให้ Table มาอยู่ตรงตำแหน่งต่างๆของเวปเราก็มาปรับ ตรง Align ตามตำแน่งที่เราต้องการ

Boder = ความหนาของ Table 0 คือการไม่ให้มีการโชว์ให้เห็น Table ใน Browser ถ้าใส่ค่าตัวเลขเข้าไป Table ก็จะมีความหนาตามค่าที่เราปรับแต่ง

ส่วนที่2. ส่วนปรับแต่งสีของ Table และระยะห่างจากขอบของ Table ก็จะแยกได้ดังนี้

- V Space = ระยะห่างจากขอบด้านบน H Space = ระยะห่างจากขอบด้านล่าง

- Light Brdr และ Dark Brdr = สีของขอบตาราง จะปรากฏก็ต่อเมื่อเรากำหนดให้ Table มี Border เท่านั้น

- Bg = พื้นหลังใน Table เราสามารถเรียกใช้จากโฟล์เดอร์ต่างๆได้ โดยการ Brow หาไฟล์

- Bg = พื้นหลังที่เป็นสี

.- Brdr = สีพื้นของ Border

นี่คือรายละเอียดคราวๆ ของการปรับแต่ง Table ยังมีเทคนิคต่างๆอีกในการปรับแต่ง เราจะมาพูดกันในบทต่อไป

การปรับแต่ง Option ของรูปภาพ มีอยู่หลายส่วนที่สำคัญๆ ที่เราควรรู้ดังนี้

รูปภาพเป็นอีกส่วนหนึ่งที่จะทำให้เวปเราดูสวยงามและสื่อถึงเวปของเราได้ ในการปรับแต่ง ก่อนอื่นเราต้องทำการคลิ๊กเลือกที่รูปภาพเสียก่อนก็จะมีหน้าตา Option ออกมาดังภาพ

ส่วนที่สำคัญๆ ของการปรับแต่งรูปภาพก็จะมี

W = ขนาดความกว้างของรูปภาพ H = ขนาดความสูงของรูปภาพ

Src = ที่อยู่ของรูปภาพ

Link = การใช้การเชื่อมโยงเอกสาร HTML และเอกสารอื่นๆ รวมทั้ง URL ด้วย

Alige = ตำแน่งของรูปภาพซึ่งจะสัมพันธ์กับตัวอักษรและตาราง อย่างเช่น เมื่อทำการเลือกแบบ Middle ตัวอักษรก็จะมาอยู่ตรงกลางรูปภาพดังตัวอย่าง

Alt เป็นการแสดงข้อความเมื่อเราเอาเม้าไปชี้ที่รูปภาพ

Border = เกี่ยวการเสริมขอบรูปภาพทำให้รูปภาพดูดีมีมิติขึ้น

Refrech = การทำให้รูปภาพมีขนาดเท่าเดิม ก็คือเวลาเราย่อหดรูปภาพแล้ว เราต้องการให้รูปภาพนั้นเหมือนเดิมก็กดปุ่ม Refrech

.นี่คือ Objacts และ Option อย่างคราวๆที่เราควรรู้เกี่ยวกับรูปภาพจะมีรายละเอียดการนำ ไปใช้ประกอบในการทำเวป อีกเยอะเราจะพูดถึงในบทต่อไป

คราวหน้า เราจะเริ่มก้าวแรกของการทำเวป 1 Page ง่ายๆ ว่ามีหลักการทำอย่างไร จากนั้นก็ลองมาฝึกการศึกษา Source HTML ด้วยตนเองกัน

*** คำเตือนบทความนี้ได้ถ่ายทอดมาจากประสบการณ์การเรียนรู้ด้วยตนเองจริง มิได้ทำการลอกเรียนแบบจากใคร เพราะฉะนั้นถือเป็นลิขสิทธิทางปัญญา อนุญาติให้นำบทความไปใช้เพื่อ การศึกษา เท่านั้น มิให้ใช้ในทางการค้า ถ้าต้อง การนำไปใช้ในการค้าโปรดติดต่อผู้จัดทำด้วย ***

ธนา Mastertana


Thaigraph

GMT+7, 12-11-2019 23:23 , Processed in 0.059243 second(s), 19 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books