[Comicclub2/2006] ทำเวบอย่างง่าย1

แนะนำเทคนิคเบาๆ ที่จะช่วยอัพเกรดฝีมือการวาดการ์ตูนสำหรับนักวาดมือใหม่

Moderator: B.Comics, พี่บี

ตอบกลับโพส
ภาพประจำตัวสมาชิก
honeynut
โพสต์: 129
ลงทะเบียนเมื่อ: ศุกร์ 12 พ.ค. 2006 1:01 pm
ที่อยู่: Lake of Souls
ติดต่อ:

[Comicclub2/2006] ทำเวบอย่างง่าย1

โพสต์ โดย honeynut »

รูปภาพทำเวบอย่างง่าย (1)


สวัสดีค่ะ ผู้อ่านทุกท่าน

ถึงแม้จะมีทั้งไดอารี่ออนไลน์ แกลอรี่ออนไลน์ และเว็บบอร์ดไว้เป็นช่องทางการแสดงผลงานแล้ว แต่การมีเว็บไซต์เป็นของตัวเองก็ยังน่าปลื้มใจอยู่ เพราะว่าได้เป็นคนออกแบบเอง ดูแลเองทั้งหมด

ดังนั้นวันนี้เรามาคุยเรื่องการทำเว็บไซต์กันเถอะ ^____^ คงจะต้องอธิบายยาวกว่าตอนแนะนำเรื่องติดสกรีนแน่ๆ แต่ต้องบอกไว้ก่อนว่าเราเองก็พอทำได้แบบเรียบๆ ง่ายๆ ไม่ใช่ว่าเป็นไปซะทั้งหมด ที่จะแนะนำในคอลัมน์นี้ก็จะบอกเฉพาะที่ทำเป็นอ่ะนะ คิดซะว่าเป็นพื้นฐานก็แล้วกัน โดยโปรแกรมที่ใช้ก็ Dreamweaver 4 จริงๆ ออกใหม่จน Dreamweaver MX 2004 แล้วยังใช้ของเก่าสอนอยู่... ไม่เป็นไรเนอะ เพราะที่จะสอนนี่ก็ไม่ได้หวือหวาอะไรมากอยู่แล้ว

มาดูคำศัพท์กันก่อน
Website : ตัวเว็บทั้งหมดของเรา เปรียบได้กับหนังสือ 1 เล่ม
Webpage : หน้าใดหน้าหนึ่งในเว็บ เปรียบได้กับหน้า 1 หน้า ภายในหนังสือ
Homepage : หน้าแรกของเว็บ
URL (Universal Resource Locater) : ที่อยู่ของเว็บแต่ละหน้า เรียกอีกอย่างว่า ลิงค์ (Link) ก็คงได้มั้ง
Browser : โปรแกรมที่เราไว้เปิดเว็บ ส่วนใหญ่ก็จะใช้ Internet explorer (IE)
FTP : โปรแกรมที่ทำให้เราสามารถอัพโหลด หรือดาวน์โหลดไฟล์ในเว็บได้
HTML : ภาษามาตราฐานที่ใช้ในการทำเว็บ (จริงมันยังมีภาษาอื่นๆ เช่น PHP, CGI, ASP บลาๆ แต่มันยาก เราก็ไม่เป็นด้วย เอา HTML นี่แหละง่ายสุดแล้ว เพราะโปรแกรม Dreamweaver นี่มันก็แค่พิมพ์ๆ แปะๆ ก็ได้เป็นเว็บแล้ว)
IP address : หมายเลขที่ใช้ยืนยันตัวตนของเว็บไซต์ เช่น 203.114.xxx.xxx (ตัว x ข้างหลังขอสงวนไว้ เดี๋ยวไปตรงกับไอพีของใครเข้า)
Domain name : ตัวอักษรที่ใช้แทน IP address เช่น honeyhachi.com แต่ไม่ได้มีแต่ .com อย่างเดียว ยังมีอื่นๆ ด้วย เช่น
.net ใช้กับหน่วยงานเกี่ยวกับเครือข่าย
.org ใช้กับหน่วยงานที่ไม่หวังผลกำไร
.gov ใช้กับหน่วยงานรัฐบาล
.co.th ใช้กับบริษัทที่จดทะเบียนในประเทศไทย
ไหนๆ พูดถึงโดเมนแล้วก็แนะนำการตั้งชื่อเว็บนิดนึง
สำหรับเว็บแกลอรี่เล็กๆ ที่ไว้โชว์ผลงานของตัวเอง ส่วนมากก็จะใช้ชื่อเฉพาะ แต่ควรจะมีจำนวนตัวอักษรไม่ยาวเกินไป?. อ่าน หรือจดจำได้ง่าย แล้วก็แสดงถึงความเป็นตัวเองของเจ้าของเว็บด้วย อาจจะใช้ชื่อที่มีความหมายกับเรา อย่างชื่อสัตว์เลี้ยง คณะที่เรียน หรือกระทั่งของกินที่ชอบก็ยังได้ ถ้าเป็นไปได้ ให้เป็นชื่อเฉพาะประมาณว่ามีคนเดียวในโลกก็ดีนะ

ก่อนลงมือทำเว็บก็ต้องคิดก่อนว่าเว็บเราจะมีอะไรบ้าง เขียนไว้ในกระดาษเลย
ส่วนมากเว็บแกลอรี่ก็จะมี?
หน้าแรก (index)/แนะนำตัว + ประวัติคร่าวๆ (Profile)/ไดอารี่/แกลอรี่/เว็บบอร์ด หรือไอคอนบีบีเอส/ลิงค์เพื่อนบ้าน จากนั้นก็คิดก่อนว่าเว็บเราควรจะใช้สีหลักเป็นสีอะไร เลือกสีให้เข้ากับภาพของตัวเองด้วยนะ
หน้าตาเว็บจะเป็นอย่างไรนั้นก็อาจจะดูจากเว็บที่เคยไปเที่ยวๆ มา แล้วนำมาปรับปรุง ไม่ใช่ไปก๊อปเขามาทั้งเว็บนะเอ้อ! อาจจะดูไม่ถูกใจในครั้งแรกที่เปิดเว็บ ก็ค่อยๆ แก้ไขไปเรื่อย เดี๋ยวก็ถูกใจเองล่ะ

รู้จัก Dreamweaver
เป็นโปรแกรมทำเว็บที่สะดวกสบาย ไม่ต้องมานั่งพิมพ์ HTML ทีละตัว ลำพังว่าพิมพ์ แล้วก็ใส่รูป ใส่ลิงค์ ก็คล้ายกับการพิมพ์งานใน Microsoft word เลยล่ะ
สเป็คขึ้นต่ำของเครื่องคอมพิวเตอร์ที่สามารถใช้โปรแกรมนี้ได้ (ตามที่บริษัทผู้ผลิตกำหนดมา)
1. Window98SE, 2000, ME, XP
2. Pentium 3 600MHz
3. RAM 256
4. พื้นที่ว่างในฮาร์ดดิสก์ 800 MB
หาซื้อได้ที่..... เอ่อ... รู้ๆ กันอยู่น้อ.. ^ ^; ที่ไหนที่มีแผ่นโปรแกรมขายเยอะๆ ก็ที่นั่นแหละ?.. แต่คงจะหาซื้อได้เป็น Dreamweaver MX 2004 หรือใหม่กว่านี้แล้ว หน้าตาอาจจะต่างออกไป แต่ประยุกต์ใช้กันได้

เปิดมามันก็จะโล่งๆ แบบนี้แหละ
http://www.comicclubmag.com/honeychan/c02_06/01.jpg

จากนั้นก็กด Ctrl+J เพื่อกำหนดคุณสมบัติของหน้าอันว่างเปล่านี้ ขาดเหลือตรงไหนมาแก้ไขทีหลังได้
รูปภาพ

ตรง Title ถ้าเป็นไปได้ก็ควรพิมพ์ชื่อเว็บ หรืออะไรซักอย่างลงไป ไม่ควรปล่อยให้เป็น Untitled Page เผื่อว่าใคร add favorite หน้านี้เอาไว้ เค้าจะได้รู้ว่าหน้าที่เค้า add ชื่อว่าอะไร
Background จะใส่ หรือไม่ก็ได้ แต่ถ้าจะใส่ ควรใช้ภาพที่โหลดได้เร็ว หรือเป็นภาพลวดลายเล็กๆ ก็ได้ บางคนอาจเลือกใส่สีที่พื้นหลังแทน โดยเลือกสีตรงคำว่า Background ทั้งนี้ ยังสามารถกำหนดนี้ตัวอักษรเป็นสีอื่นนอกจากสีดำ แบบไม่ต้องมาคอยนั่งเติมสีขณะพิมพ์ได้ด้วยการเลือกสีที่ช่อง Text
สำคัญที่สุดก็ตรง Document Encoding จะต้องเป็น Thai Window874 ถึงจะพิมพ์ภาษาไทยในตัวโปรแกรมได้

มาดูการจัดเรียงไฟล์กันนิดนึง
รูปภาพ
สังเกตนะคะว่าไฟล์ html จะอยู่ภายนอก หรือโฟลเดอร์เดียวกับ โฟลเดอร์รูปภาพที่จะนำมาใส่ในหน้านั้นๆ เสมอ และจะต้องจัดเรียงไฟล์ในลักษณะเดียวกันนี้ ตอนที่อัพไฟล์ขึ้นพื้นที่เช่นกัน

การใส่ข้อความ
พิมพ์ลงไปได้เหมือนการพิมพ์งานใน Microsoft word แต่ไม่ควรเลือก font ที่แปลกประหลาดเกินไป เพราะถ้าเครื่องไหนที่ไม่มีฟอนต์แบบเดียวกับคุณ ข้อความนั้นจะเละ หรือเสียรูปไปทันที ฟอนต์ไทยที่เหมาะจะใช้ในการทำเว็บ คือ MS Sans Serif หรือMicrosoft Sans Serif ทางที่ดีควรเลือกฟอนต์ที่มีมาให้ในช่องสำหรับเลือก และกำหนดขนาดอักษรที่แน่นอนโดยการเลือกตัวเลข 1-7 ที่ช่องด้านข้าง เพื่อจะได้แสดงผลกับคอมทุกเครื่องเหมือนๆ กัน
การกด Enter จะเป็นการขึ้นบรรทัดใหม่ทีละ 2 บรรทัด
การกด Shift + Enter จะเป็นการขึ้นบรรทัดใหม่ทีละ 1 บรรทัด

การวางรูปภาพ
ให้ไปที่ insert >> image แล้วเลือกรูปที่จะนำมาใส่
รูปที่วางนั้นสามารถย่อ หรือขยายได้ในโปรแกรมนี้ก็จริง แต่ไม่แนะนำให้ทำหากไม่จำเป็นจริงๆ เพราะจะทำให้ภาพแตก และไม่ได้สัดส่วนที่ถูกต้อง ควรจะย่อรูปในโปรแกรม Photoshop หรือโปรแกรมแต่งภาพอื่นๆ ให้ได้ขนาดที่ต้องการเสียก่อน
ขนาดของภาพที่นำมาวาง ไม่ควรมีความละเอียดสูงเกินไป จะทำให้เปิดหน้าเว็บได้ช้า
ไฟล์รูปภาพ ชนิดที่สามารถแสดงผลบน Browser ได้แก่
1. jpg / jpeg ใช้กับรูปถ่าย หรือรูปวาดที่มีการไล่สีมากๆ ไม่สามารถทำให้โปร่งใสได้
2. gif ใช้กับรูปที่มีส่วนที่โปร่งใส สามารถสะท้อนเห็นสีพื้นของหน้าเว็บได้ ภาพเคลื่อนไหวดุ๊กดิ๊ก หรือเป็นรูปที่ไม่มีภาพไล่โทนสี
3. png ใช้กับรูปที่มีลักษณะสีคล้ายกับ gif ได้ยังไม่นิยมเพราะยังไม่สามารถแสดงผลได้กับทุก browser

การแบ่งเฟรม
รูปภาพ
ในหน้านี้ซึ่งเป็นเว็บเราเอง มีการแบ่งเป็น 3 Frame คือ TopFrame ซึ่งเป็นส่วนที่ใส่เมนู และแบนเนอร์ MainFrame ไว้ใส่รายละเอียด และประกาศต่างๆ Right Frame ไว้ใส่ history ว่าเราได้อัพเดทอะไรไปแล้วบ้าง กับ sitemap ไว้อธิบายว่าแต่ละเมนูที่ทำไว้ให้คลิกนั้น มีอะไรข้างในบ้าง
ควรจะร่างไว้ก่อนเลยว่าจะทำกี่เฟรม จริงอยู่ที่ว่ามาแก้ไขภายหลังได้ แต่จะยุ่งยากกว่าทำเลยซะแต่แรก
การแบ่งเฟรมทำได้โดย
ไปที่ insert >> Frame จากนั้นเลือกเฟรมที่ต้องจากจะเพิ่มว่า จะเพิ่มเฟรมบนสุด ซ้าย ขวา ล่าง ตามใจ การปรับขนาดเฟรมให้ไปที่ Window >> Frames จะมีคล้ายๆ แผนผังบอกว่าตอนนี้เราอยู่ที่เฟรมไหนแล้ว
รูปภาพ
ในหน้าต่างนี้ให้คลิกที่กรอบหนาๆ ให้ขึ้นเป็นเส้นสีดำ จะเห็นว่ามีหน้าต่างนี้ปรากฎ
รูปภาพ

แถบสีเทาเข้มที่ด้านขวาเป็นการบอกให้เรารู้ว่าตอนนี้อยู่ที่ TopFrame ที่มีขนาด 80 pixel สามารถแก้ไขให้ใหญ่ขึ้นหรือเล็กลงได้ตามใจเรา Borders คือ เส้นกรอบ หากไม่อยากให้มีก็เลือก No หากเลือกให้มีแล้วต้องการเพิ่มสีสันก็ไปเลือกสีต่อได้ที่ Border Color
รูปภาพ
ถ้าคลิกที่หน้าต่างนี้ ตรงกลางเฟรมใดก็ได้ (สังเกตได้ว่าขอบดำๆ จะเล็กกว่าภาพบน) ให้เรากำหนดหน้าตาของเฟรมที่เราเลือกอยู่ในขณะนั้นที่หน้าต่างนี้
รูปภาพ

ตรง Src คือ ตำแหน่งที่เราจะเซฟเฟรมนี้ (ซึ่ง 1 เฟรม เราจะได้ไฟล์ html 1 ไฟล์)
Scroll คือ ตัวกำหนดว่าในเฟรมนี้เราจะให้มี Scroll Bar (ตรงที่เอาไว้เลื่อนหน้าเว็บขึ้นๆ ลงๆ ) ให้เลื่อนขึ้นลงได้หรือไม่ หากเลือก Default หมายความว่า ถ้าเราวางรูปภาพเกินขนาดหน้าเว็บ Scroll Bar จะขึ้นอัตโนมัติ
ทีนี้เพื่อความปลอดภัย เรามาเซฟงานกันก่อน
ในกรณีที่มีเฟรม ให้เราคลิกเม้าส์ภายในเฟรมที่เราต้องการเซฟ แล้วไปที่ file >> save frame as จากนั้นเลือกโฟลเดอร์ที่ต้องการเซฟ ทำไล่ไปเรื่อยจนครบทุกเฟรมที่มี จากนั้นเซฟรวมเฟรมทั้งหมดด้วยการเลือก save all frames แล้วตั้งชื่อใหม่
กด F12 เพื่อดูการแสดงผลใน Browser
ถ้าเป็นหน้าเว็บที่มีเฟรม หากได้ทำการเปลี่ยงแปลงลงไปแล้ว จะมีป๊อปอัพอันนี้ขึ้น
รูปภาพ

คือ เราจะต้องเซฟทุกเฟรมก่อนที่โปรแกรมจะแสดงผลให้ดูใน Browser แต่ถ้าเป็นหน้าเว็บที่ไม่มีเฟรมก็จะแสดงผลได้เลย ไม่มีการถาม
อา...เล่ายาวจริงๆ ด้วยเห็นมั้ย ^ ^' ครั้งนี้พักไว้แค่นี้ก่อนนะคะ เดี๋ยวจะหนักเกินไป ระหว่างนี้ก็ทดลองหาโปรแกรมมาลองไปพลางๆ ก่อนก็ได้ค่ะ แล้วจะรู้ว่าสร้างเว็บ ไม่ได้ยากอย่างที่คิด

ติดตามอ่านได้ใน รูปภาพ
รูปภาพ
รูปภาพ

สึคิชิมะ-คิราริ>o<
โพสต์: 2
ลงทะเบียนเมื่อ: อังคาร 28 เม.ย. 2009 2:02 pm

Re: [Comicclub2/2006] ทำเวบอย่างง่าย1

โพสต์ โดย สึคิชิมะ-คิราริ>o< »

ทำยากจังเลย คอมหนูไม่มีโปรแกมนี้

ตอบกลับโพส

ย้อนกลับไปยัง “แนะนำเทคนิคการวาดการ์ตูน”