การสร้างlinkในMacromedia Dreamweaver 8

วีธีการสร้าง
1.การสร้างLinkแบบพื้นฐานแบบเข้าตามตัวอักษร

ให้เขียนตัวอะไรก็ได้บนMacromedia Dreamweaver 8
แล้วก็ใช้เมาท์ลากให้เป็นแถบสีดำๆ แล้วดูข้างล่างจะมีแถบล่างขวาให้เราเขียนLinkลงไป ยกตัวอย่างเช่นhttp://getamped.in.th เวลาเขียนLinkไปด้านนอก
ต้องให้มีตัวhttp://
อยู่ข้างหน้าตลอดเวลาไม่งั้นโปรแกรมจะคิดว่าLinkโปรแกรมของตัวเอง
ถ้าจะLinkโฮมเพตของตัวเอง ให้เรากดโพสเดอร์สีเหลืองๆ แล้วก็เลือกไฟล์งาน

2.การสร้างLinkแบบรูปภาพ

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

3.การสร้างLinkแบบรูปภาพ แต่เป็นสัดส่วน
ให้ใส่รูปอะไรก็ได้ลงไปเหมือนข้อ2 แต่ให้ดูที่มุมล่างซ้าย จะเห็นมีMapพร้อมกับตัวรูปภาพต่างๆ
ให้กดเลือกที่รูปภาพต่างๆ
จะมีดังนี้
สี่เหลี่ยม วงกลม รูปแบบอิสระ ตามลำดับ
พอกดแล้ว ให้เราลากไปที่รูปภาพของ แล้วครอบตรงที่จะให้กดแล้วกดLinkเข้าไป

4.การสร้างLinkแบบในPageของตัวเอง
ให้ดูแถบของบน แล้วดูว่าเป็นCommonใช่หรือเปล่า ถ้าใช่ ให้ดูตรงแถบของCommon แล้วให้กดตรงรูปสมอเรือ แล้ววางไว้ ตรงที่อยากจะให้มันLinkกลับไปที่เดิมแล้วพอทำเสร็จแล้ว
ให้เขียนตัวอักษรหรือไม่ก็รูปภาพก็ได้ เขียนเสร็จแล้วครอบตัวอักษรให้เป็นแถบสีดำ แล้วดูตรงมุมขวาล่าง
จะเห็นคล้ายๆเป็นรูปเป้าปืน ให้กดตรงรูปเป้าปืน แล้วลากไปที่สมอเรือที่ต้องการจะLinkกลับ

ตัวอย่าง

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

5.การสร้างแบบ ตัวเลือก หรือ แบบMenu
ให้สังเกตุจากแถบข้างบนซ้ายว่าเป็นFromsหรือเปล่า ถ้าไม่ใช่ให้เปลี่ยนเป็นFroms แล้วดูตัวรูปที่มีตัวอักษรชี้เฉียงไปด้านบนขวา(หรือนับจากซ้ายไปขวา9ตัว)
ให้กดรูป พอกดแล้ว จะมีแถบขึ้นมา ให้เราเขียนชื่อLinkพร้อมLinkไปด้วย
Text = คำอธิบาย
ถัดจากText = ตัวLinkไปที่เราสร้าง
เราสามารถสร้างต่อได้ โดยการกด แถบ+ แล้วเราก็ได้ สร้างเหมือนเดิม เสร็จแล้วกด Ok
(เพิ่มเติม)
ถ้าต้องการให้Linkอย่างอื่นอยู่ด้านหน้าให้กดรูปตัวขึ้นลง ตรงถัดจาก + -
ถ้าต้องการ-Linkให้กดตรงที่Linkที่อยาก-แล้วกด-

การสร้างตารางของMacromedia Dreamweaver 8

การสร้างตารางนั่น

จุดประสงค์

ทำให้การโหลดภาพได้มาทีละชิ้นทำให้สะดวกได้ดีขึ้น แทนที่จะรอรูปเดียว

วีธีการทำ

1. ดูแถบบน

ถ้าไม่มีให้ดูตรงวงกลมสีดำว่าเป็นCommonหรือเปล่า วงกลมสีแดงคือกดสร้าง

2.กดแล้วหน้าต่างนี้จะขึ้นมา

วงกลมสีแดงคือเพิ่มช่องในตาราง วงกลมสีเหลืองคือค่าความกว้างของแต่ละช่องกำหนดแล้วกดOK

3.เราจะได้ตารางมาเป็นแบบนี้

4.เราสามารถกำหนดต่อได้จากช่องข้างล่าง

Rows,Cols จำนวนช่อง CellPad CellSpace Borderเป็นการกำหนดว่าจะให้รูปภาพไม่มีช่องว่างใช่มั้ย(ถ้าไม่ให้มีช่องว่างของรูปภาพให้ตารางรูปภาพติดให้เติมเป็น0)

Rowsเพิ่มจำนวนด้านยาว

Colsด้านกว้าง

เพิ่มเติม ภาพตัวอย่างที่ไม่ได้มีช่องว่าง(ปรับ เป็น0)

ถ้าต้องการจะใส่Blogของตัวเอง ให้Copy Code จากDreamweaver ตรงนี้

(ส่วนของBody)

ให้ก๊อปมาแล้ววางไว้ที่ตรงที่จะเขียนบล๊อกของตัวเอง

ตัวอย่าง

กระชวดคอซะ	กระชวดคอซะ	กระชวดคอซะ
กระชวดคอซะ	กระชวดคอซะ	กระชวดคอซะ
กระชวดคอซะ	กระชวดคอซะ	กระชวดคอซะ

การเซพบนเว็บให้ถูกต้องกับการแต่งหน้า(กิจกรรมที่4)

การเซพไฟล์ใช้งานให้เหมาะสมบนเว็บเราสามารถเลือกเซพงานไฟล์เป็นนามสกุล
1.Gif ให้เป็นงานแบบย่อไฟล์เล็กๆ
2.JPEGงานที่ทำการบีบสีย่อส่วนได้ แต่กว่ามีสีได้เยอะกว่า แต่ความละเอียดของรูปอาจจะลดลงก็ได้3.Pngงานเป็นภาพเหมาะสำหรับการทำเครื่อข่ายกับเครื่องได้ถูกต้อง บีบข้อมูลบางส่วนก็จริงแต่ การสูญเสียของข้อมูลจะน้อยนิด แต่พื้นที่จะกว้างไปหน่อย

แน่ะนำ เซพแบบJPEGการเซพงาน1.เลือกFile > Save For Web

2.เลือกเซพไฟล์เป็นนามสกุลต่างๆ

3.คลิกเซพ


การแต่งหน้า
ต้องดูด้วยว่าเหมาะสมหรือเปล่า ไม่ใช่เอาภาพน่ารักๆมาทำโหดๆ หรือเอาภาพโหดๆๆมาแต่งเป็นสีชมพู

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

การ ตกแต่งภาพ (กิจกรรมที่2)

รูปเดิมคับ

มาตกแต่งแล้ว....

อืม.....ทำให้เขาภาพเสื่อมอีกสินะ

- - (มือใหม่อ่ะคับ)

การตัดต่อ (กิจกรรมที่3)

เอารูปนี้ กับรูปนี้

มาผสมกัน
..........................................................................................................









......(นี้เราทำให้ภาพเขาเสื่อมไปมั้ยนะ....)
ใช้ฟิวเตอร์Liquifyช่วยบางส่วน

......ผมมือใหม่คับ ไม่ต้องว่าหรอก ผมดูออกว่าผมห่วยแค่ไหน - -"

การทำ ก็ เอารูปที่เราต้องการตัดต่อมา2รูปแล้ว
เอาอีกรูปมาตัดแล้ว วางไว้ที่รูปที่เราต้องการตัดต่ออีกรูป
แล้วให้เราไว้แถวๆลำคอ หรือที่ใกล้เคียงที่สุด

เสร็จแล้ว เข้าฟิลเตอร์ แล้วเข้าLiquifyแล้วตัดให้ไม่เห็นทรงผมอีกรูป

อืม....ผลที่ได้คือเป็นอย่างนี้สินะ = ="

การปรับภาพด้วยฟิวเตอร์ (กิจกรรมที่1)

ภาพฟิวเตอร์






ก่อนหน้านี้






















หลังจากนี้ ใช้Blur กับ Ariusticในการช่วย
การทำก็เอาภาพที่เราต้องการตกแต่ง มาไว้ แล้วเข้าฟิวเตอร์ ไปตกแต่ง

การทำให้มือ สว่าง



เอารูปที่ต้องการมาแล้วกดเลเยออันที่4 เป็นวงกลม ขาวดำ แล้วเลือกLevels

การเซพไฟล์ใช้งานให้เหมาะสมบนเว็บ

เราสามารถเลือกเซพงานไฟล์เป็นนามสกุล
1.Gif
ให้เป็นงานแบบย่อไฟล์เล็กๆ
2.JPEG
งานที่ทำการบีบสีย่อส่วนได้ แต่กว่ามีสีได้เยอะกว่า แต่ความละเอียดของรูปอาจจะลดลงก็ได้
3.Pngงานเป็นภาพเหมาะสำหรับการทำเครื่อข่ายกับเครื่องได้ถูกต้อง บีบข้อมูลบางส่วนก็จริงแต่ การสูญเสียของข้อมูลจะน้อยนิด แต่พื้นที่จะกว้างไปหน่อย

แน่ะนำ เซพแบบJPEG

การเซพงาน
1.เลือกFile > Save For Web
2.เลือกเซพไฟล์เป็นนามสกุลต่างๆ
3.คลิกเซพ

graphic designทริค งาน

การประกวด กราฟฟิกนั่นต้องคำหนึ่งถึง

ประโยชน์การใช้สอย 30%
ความสวยงาม 40%
แล้วสื่อความหมาย 30%

ต้องท่องจำอยู่เสมอว่า

หนึ่งต้อง เวิร์ก
สอง ต้อง สวย
สาม ต้อง สื่อ

วีธีเริ่ม
ขั้นแรกต้องวิเคราะห์โจทย์ด้วยว่า
1.What เราจะทำงานอะไร?กำหนดป้าหมายของเราเอาไว้ก่อน ซึ่งเป็นเรื่องเบื้องต้นในการออกแบบที่เราต้องรู้ก่อนว่า จะกำหนดให้งานของเราบอกอะไร(Inform)เช่นเผยแพร่ตามประชาสัมพันธ์ต่างๆ หรือบอกทฤษฎี หลักการ หรือเพื่อความบันเทิงต่างๆเป็นต้อง
2.Where แน่นอน ทำเสร็จแล้ว งานของเราจะนำไปใช้ที่ไหนกันแน่? เช่น ถ้าเราออกแบบแนวเกม เราคงต้องออกแบบให้เด็กๆชอบมากขึ้นหรือ เสื้อผ้าต่างๆ ก็ให้มีสีส้นหน่อย จะได้มีคนมาสนใจบ้าง
3.Who ใครละ ที่จะมาเป็นคนใช้งานของเรา หรือเรียกได้อีกอย่างหนึ่งว่า กลุ่มผู้ใช้งานเป้าหมาย(User Target Group) เป็นเรื่องสำคัญมากที่สุดในการวิเคราะห์โจทย์เพื่อออกแบบ เพราะผู้ใช้งาน
ของเราอาจจะเป็นตัวกำหนดแนวคิดและรูปลักษณ์ของเราได้ เช่นงานโปสเตอร์สำหรับผู้ใหญ่ก็ไม่ควรใส่สีเยอะเกิน ใช้ตัวอักษรใหญ่ๆหน่อยๆ รวมถึงการจัดเรียบง่ายต่ออายุผู้ใช้ในวัยอื่นๆไปเป็นต้น
4.How แล้วงานชิ้นนี้ละ ทำอย่างไร การคิดวิเคราะห์สุดท้าย อาจจะยากนิดๆ แต่เป็นการคิดที่รวบรวมการวิเคราะห์ที่มีมาทั้งหมด มาเป็นแนวทางเลยก็ได้

ขั้นที่2 การสร้างแนวคิดหลักในการออกแบบให้ได้(Conceptual Design)
งานที่ดีต้องมีแนวคิด (Concept) แต่ก็ไม่ได้หมายความว่า งานที่ไม่มีแนวคิด ก็ไม่ได้เป็นงานที่ดีเสมอไป งานบางงานเนี่ย ไม่ได้มีแนวคิด แต่เป้นงานออกแบบทีตอบสนองต่อกฏเกณฑ?การออกแบบ(Design Criteria) ก็ได้ ที่มีอยู่ก็จะเป็งานที่ดีได้เช่นกัน เพียงแต่ถ้าเราลองเอางานที่ดี มาเทียบกัน 2ชิ้น เราอาจจะไม่รู้สึกถึงความแตกต่างอะไรมากเท่าไหร่ ในตอนแรก แต่เมื่อรู้ว่า งานอีกงานความคิดดี งานอีกงานไม่มีแนวคิดเลย งานที่มีแนวคิด จะดูมีคุณค่าสูงกว่า

ขั้นที่3 ศึกษางานที่ตัวอย่างอยู่แล้ว
ก็ดูตัวอย่างไปบางว่า จะต้องทำยังไง หรือเรียกว่า ดูดซึมซับ ความรู้จากชาวบ้านคนอื่น แต่ไม่ถึงกับการลอกเลียนแบบจนเหมือนหมดจนเกินไป

ขั้นที่4 การออกแบบร่าง
ต้องควรมี ถ้าไม่งั้น เราทำแล้ว เราอาจจะเข้าใจแค่คนเดียวก็ได้ ควรใช้แบบร่างนำออกแบบในโปรแกรมต่างๆ ทีตัวเองถนัดก่อน

ขั้นที่5 ออกแบบจริง
ออกแบบจริงจากที่ร่างแล้ว จากออกแบบที่ร่างแล้ว นำมาคัดเลือกแล้วนำมาใช้ออกแบบจริง ซึ่งตอนนี้คงไม่ต้องบอกยังไง เพราะเป็นเรื่องที่ศึกษากันเองหรือแนวเรื่องที่ทำกันนั่นเอง

อ้างอิงจาก
http://student.nu.ac.th/nackie/Instruction/lesson5.html

ตัวอย่างครับ