Rss

  • youtube
  • linkedin
  • google

Archives for : Basic WebDesign

การใส่รูปภาพลงในเว็บเพจ…แบบ HTML

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

             คำสั่ง ในการ ใส่รูปภาพ ลงใน เว็บเพจ นั้น เราต้อง มารู้ จัก เกี่ยวกับ รูปภาพ ที่เรา 
จะนำมาใส่ในเว็บเพจเสียก่อน รูปภาพที่จะนำมาใช้ใส่ลงในเว็บเพจ นั้น ส่วนมาก มีนามสกุล เป็น GIF และ JPG ไฟล์

                รูปภาพ แบบ GIF ย่อมาจาก Graphics Interchange Format เป็นไฟล์ ชนิดบิตแมป (Bitmap) ภาพ ไฟล์ GIF นี้ ส่วนใหญ่ จะนิยม ใช้กับ ภาพถ่าย และภาพการ์ตูน แสดงผลเป็น ภาพนิ่ง แต่ใน ปัจจุบันมี โปรแกรม สำหรับทำ หน้าที่ รวบรวม ภาพ GIF หลาย ๆ ภาพ เข้าเป็น ไฟล์เดียวกัน เมื่อนำ ภาพมา แสดง ทำให้เกิด เป็นภาพ เคลื่อนไหวขึ้น 

                 ไฟล์รูปแบบ JPG ย่อมาจาก Joint Photographic Expers Group เป็นไฟล์ใน รูปแบบ ที่ผ่าน กระบวน การบีบย่อย ข้อมูล มาก่อน มีการ นำเอา ข้อมูล ส่วนที่ ไม่สำคัญ ออกไป แล้วทำการ บีบอัด ข้อมูล  

การใส่รูปภาพลงในเว็บเพจ 
รูปแบบ  <IMG ALIGN=align-type BORDER=n HEIGHT=n WIDTH=n HSPACE=n VSPACE=n SRC=address ALT=text>

ALIGN           =     align-type(ตำแหน่ง) เป็นการ กำหนด ตำแหน่ง รูปภาพ ถ้าภาพไม่ ใหญ่ ข้อความ นั้นจะ อยู่ ที่ตำแหน่ง ส่วนล่าง 
                              ของภาพ ทางขวา มือเสมอ เราสามารถ กำหนดได้ โดยใช้คำต่าง ๆ เหล่านี้
LEFT             =     วางภาพที่ตำแหน่งทางซ้าย
RIGHT           =     วางภาพที่ตำหน่งทางขวา
TOP              =      วางภาพ ที่ตำแหน่ง ด้านบน
MIDDLE       =      วางภาพ ที่ตำหน่ง กึ่งกลาง
BOTTOM     =      วางภาพ ที่ตำแหน่ง ด้านล่าง
BORDER    =       n    เป็นการ กำหนด กรอบให้ รูปภาพ n มีค่ามาก กรอบจะ มีความหนา มากขึ้น
HEIGHT       =       n    เป็นการ กำหนด ความสูง ของภาพ
WIDTH         =      n    เป็นการ กำหนด ความกว้างของภาพ ถ้าต้องกา ให้ภาพได้สัดส่ว ให้กำหน เป็นเปอร์เซนต์ โดยไม จำกัดความสูง
VSPACE     =      n    กำหนด ระยะ ห่างบน ล่างของ ภาพ
HSPACE     =      n    กำหนด ระยะ ห่าง ซ้าย – ขวา ของภาพ
SRC             =      ใส่รูปภาพที่ต้องการลงไป
ALT              =      text   ใส่ข้อควา เพื่อเป็นคำอธิบายรูปภาพที่นำมาวางสำหรับผู้ใช้อินเตอร์เนตแบบเท็กซ์

ข้อสังเกต ALIGN ไม่สามารถ กำหนดให้ รูปภาพ ไปปรากฎยังกึ่งกลาง ของจอภาพ ได้ ถ้าต้อง การให้ อยู่ตำแหน่งดังกล่าว ให้ใช้คำสั่ง <CENTER>…<CENTER>

การแสดงภาพฉากหลัง
รูปแบบ BACKGROUND="picture"


กำหนด แอตทริบิวต์ BACKGROUND="picture" ในคำสั่งของ <BODY> เช่น <BODY BACKGROUND="hot.gif">

ขอขอบคุณแหล่งที่  : https://sites.google.com/site/class0223/learnhtml

รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ WEBFONT เพื่อใช้แสดงผลในเว็บไซต์

รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont เพื่อใช้แสดงผลในเว็บไซต์

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

ต่อมาเทโนโลยีพัฒนามาสู่ Webfont (CSS3 @font-face) ที่สามารถดึง font จากเรื่อง Server มาแสดงผลได้ เช่น Google Webfont แต่อย่างไรก็ตาม ภาษาไทยก็ยังไม่มีให้ใช้ การใช้ฟอนต์ภาษาไทยสวยๆในเว็บด้วย CSS3 @font-face รวมไปถึงการแปลงฟอนต์จากเว็บ Fontsquirrel ก็อาจจะมีปัญหาบ้าง เพราะตัวเครื่องมือที่ใช้ในการแปลงนั้นไม่มี Preset

จนถึงวันนี้ ข่าวดี 13 ฟอนต์ไทยแห่งชาติ ถูกบรรจุใน Webfont แล้ว ที่สำคัญ ฟรี วันนี้เลยได้รวบรวม 13 ฟอนต์ฟรีมาตรฐาน จากสำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ (SIPA) มาแปลงเป็นเว็บฟอนต์เพื่อให้ดาวน์โหลดไปใช้งานกันได้เลย

 

วิธีการใช้งานก็แค่ดาวน์โหลดชุด Webfont ของฟอนต์ใดๆด้านล่าง และเมื่อแตกไฟล์ออกมาจะมีไฟล์ index.html ซึ่งภายในจะมีวิธีการติดตั้งฟอนต์ลงในเว็บไซต์ไว้เรียบร้อย

อ่านต่อได้ที่นี่ครับ

สร้างเว็บไซต์แบบไม่ต้องเขียนโค๊ดซักตัวด้วย Muse กันเถอะ

Logo Adobe MUSE
Logo Adobe MUSE

Adobe บริษัทซอฟแวร์ยักษ์ใหญ่ด้านการออกแบบ พยายามมาโดยตลอดที่จะสร้าง โปรแกรมที่ใช้งานง่าย ลดความยุ่งยากในการเขียนโปรแกรม
Adobe Muse สามารถทำให้ ดีไซน์ดเนอร์ที่อยู่คนละขั้ว กับบรรดาโปรแกรมเมอร์ สามารถออกแบบเว็บไซต์อย่างง่ายๆ แค่ลากวาง ดีไม้หล่ะท่าน

Download มาลองใช้กันได้ 15 วัน ที่เว็บไซต์ Adobe ตาม Link Download Adobe MUSE

http://www.bakerymedia.com/wp-admin/post.php?post=440&action=edit&message=6

พื้นฐานการออกแบบเว็บไซต์

เว็บไซต์ (Website) และเว็บเพจ (Webpage) เอกสารหรือส่วนที่ติดต่อกับผู้ใช้ในเว็บ เรียกว่า เว็บเพจ (Webpage) หมายถึงเอกสารหนึ่งหน้า การใช้เว็บก็คือการเปิดอ่านหรือเปิดใช้เว็บแต่ละหน้านั่นเอง เว็บเพจอาจสร้างขึ้นด้วยภาษาคอมพิวเตอร์ เช่น HTML, ASP, PHP, JAVA ฯลฯ เมื่อนำเว็บเพจหลาย ๆ หน้ามารวมกัน และระบุอยู่ในอินเตอร์เน็ต หรือ ยูอาร์แอล(Uniform Resource Locator – URL) ให้กับเว็บเพจกลุ่มนั้นจะเรียกว่า เว็บไซต์ (Web Site) เมื่อเปิดเว็บไซต์ขึ้นมาจะพบกับหน้าแรกของเว็บไซต์ ซึ่งเรียกว่าโฮมเพจ (Homepage) ซึ่งเป็นหน้าที่ สำคัญที่สุดและเป็นหน้าที่จะเชื่อมโยงไปยังเว็บเพจและเว็บไซต์อื่น ๆ

อ่านต่อได้ที่ www.bakerymedia.com

 

ขั้นตอนการออกแบบเว็บไซต์

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

  1. เราจะทำเว็บไซต์เกี่ยวกับอะไรกันแน่
  2. เราจะทำให้ใครดู
  3. เราจะจริงจังกับมันแค่ไหน ถ้าต้องลงทุน ความคุ้มค่าอยู่ตรงไหน

คำถามเหล่านี้ บอกอะไรได้บ้าง

  1. เราต้องชัดเจนกับตัวเองก่อนว่า เว็บไซต์ที่เราคิดจะทำ คือเว็บไซต์อะไร เช่น เราอยากขายของผ่านเว็บไซต์ คำถามคือ ขายอะไร ขายอย่างไร สินค้าเรา เป็นสินค้าประเภทไหน สินค้าแต่ละประเภทมีความแตกต่างกันในตัวเอง สินค้านั้น อาจจะหมายถึง บริการก็ได้ หรือ อาจจะหมายถึง การขายเนื้อหาที่เป็นรูปแบบ Digital อยู่แล้ว อย่าง เพลง หรือ e-Book
  2. คำถามต่อไป เราทำให้ใคร ใครในที่นี้คือ คนที่เราต้องการให้เข้ามาดูเว็บไซต์ของเรา เช่น กลุ่มลูกค้าเป้าหมายของเรา เป็นต้น สิ่งเหล่านี้ บอกอะไรได้หลายๆอย่าง และเราจะใช้ข้อมูลเหล่านี้ มาประกอบการตัดสินใจ สำหรับการ ออกแบบเว็บไซต์ต่อไป ไม่ว่าจะเป็นเรื่องของ สี ตัวอักษร ภาษาที่ใช้สื่อสาร รายละเอียดเล็กๆน้อยๆ ต่างมีความสำคัญในการออกแบบเว็บไซต์ทั้งสิ้น
  3. ผมไม่ได้บอกว่า ห้ามทำเว็บไซต์เล่นๆ แต่ผมหมายถึง การลงทุนลงแรงกับมัน หากมองอย่างนัก เศรฐศาตร์ ก็ต้องถามว่า จุดคุ้มทุนอยู่ที่ไหน   การสร้างเว็บไซต์ เหมือนกับการสร้างบ้านนั้นเอง บ้านราคา 5 แสน กับ บ้าน ราคา 50 ล้าน ก็คือบ้านเหมือนกัน แต่สิ่งที่ต่างกัน คือรายละเอียดต่างๆ ของบ้าน ไม่ว่าจะเป็น ขนาดของบ้าน วัสดุที่ใช้ ความซับซ้อนของโครงสร้างบ้าน ดังนั้น การสร้างบ้าน ให้เหมาะสมกับเรา ก็ไม่ต่างอะไรกับการสร้างเว็บไซต์นั่นเอง

อ่านต่อ ได้ ในเว็บไซต์ Bakerymedia.com

Top 10 Best Product in Home Kit 2017 Top 10 Best Product in Women Fashion 2017 Top 10 Best Product in Technology 2017 Top 10 Best Product in Car Accessories 2017