ตัวอย่างหัวเว็บไซต์กูเกิ้ลไซต์
ทิปส์กูเกิ้ลไซต์ (Google site Tips)

การใส่หัวเว็บ (Header) ภายในกูเกิ้ลไซต์

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

เริ่มต้นเตรียมความพร้อม สิ่งที่ท่านจะต้องเตรียมพร้อมก่อนเริ่มใส่หัวเว็บภายในกูเกิ้ลไซต์
1.เบราว์เซอร์ Chrome (Google Chrome) ดาวน์โหลดและติดตั้งได้จาก https://goo.gl/n6hGY8 จำเป็น
2.โปรแกรมตกแต่งรูปภาพ อะโดบี โฟโต้ชอป (Adobe Photoshop) ดาวน์โหลดและติดตั้งได้จาก https://goo.gl/2B3bJ7

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

และอีกหนึ่งโปรแกรมคือโปรแกรมอะโดบี โฟโต้ชอปไว้สำหรับตกแต่งรูปภาพหัวเว็บของเรานั่นเองซึ่งโปรแกรมตัวนี้หากท่านใดมีอยู่แล้วก็ไม่ต้องติดตั้งเพิ่มเติมให้ท่านใช้ตัวที่ท่านมีอยู่ได้เลย หรือ หากท่านสามารถตกแต่งหัวเว็บด้วยโปรแกรมอื่นๆ ที่สามารถตั้งค่าขนาดความกว้างและความสูงของรูปภาพเป็นพิกเซล (Pixels) ได้และท่านถนัดใช้งานโปรแกรมนั้นๆ อยู่แล้วท่านก็สามารถใช้งานโปรแกรมที่ท่านถนัดได้เลยครับ
เริ่มต้นการใส่หัวเว็บในกูเกิ้ลไซต์
1.เข้าสู่กูเกิ้ลไซต์ของเราโดยเข้าไปที่ https://sites.google.com หากเรายังไม่ได้เข้าสู่ระบบ ให้ทำการเข้าสู่ระบบก่อน จากนั้นคลิกเลือกกูเกิ้ลไซต์ที่เราต้องการใส่หัวเว็บระบบจะพามายังหน้าหลักของกูเกิ้ลไซต์
2.ขั้นตอนแรกเราจะมากำหนดความสูงของหัวเว็บของเราก่อนโดยคลิกที่ รูปเฟือง (อยู่บริเวณมุมขวาบน) จากนั้นคลิกเลือก “แก้ไขการออกแบบไซต์” หรือ สามารถกดคีย์ลัดบนแป้นคีย์บอร์ทคือ Shift+L จากนั้นให้เรานำเมาส์มาคลิกบริเวณหัวเว็บไซต์ของกูเกิ้ลไซต์หรือบริเวณชื่อเว็บไซต์ของเรา (ดูภาพประกอบจากรูปภาพ)

3.จากนั้นในส่วน “กำหนดค่าส่วนหัวของไซต์” ให้เรามองหาในส่วนของ “ความสูง” ติ๊กถูกที่ช่องกำหนดเอง (ไม่มีชื่อช่องกำหนดเอง แต่จะเป็นช่องเปล่าๆ ให้เรากรอกค่า) จากนั้นกรอกค่าความสูง หน่วยความสูงจะเป็น พิกเซล (Pixel) ความสูงหรือค่าที่แนะนำให้กรอกคือ 150,200,250 หรือ 300 ครับ โดยเมื่อกรอกเสร็จแล้วให้เรากดปุ่ม “ตกลง” และสังเกตความเปลี่ยนแปลงจะเห็นได้ว่าหัวเว็บของเรามีขนาดที่สูงขึ้น หากไม่พอใจในขนาดความสูงของหัวเว็บสามารถแก้ไขค่าได้โดยการคลิกเข้าไปบริเวณหัวเว็บดังที่กล่าวมาก่อนหน้านี้ เมื่อปรับขนาดจนเป็นที่พอใจแล้วให้เรากดปุ่ม “ปิด” ซึ่งอยู่บริเวณด้านขวาบนของหน้าเว็บ

กำหนดส่วนหัวของไซต์

4.เมื่อเรากำหนดขนาดของความสูงของหัวเว็บเป็นที่เรียบร้อยแล้วต่อไปเราจะมาหาขนาดที่แท้จริงของหัวเว็บของเราซึ่งจะประกอบไปด้วย ความสูง และ ความกว้าง ซึ่งขนาดที่เราจะหาต่อไปนี้คือขนาดที่แท้จริงที่เราจะเอาไปสร้างและตกแต่งหัวเว็บภายในโปรแกรมอะโดบี โฟโต้ชอป (Adobe Photoshop) โดยขั้นตอนที่เราจะทำต่อไปนี้จะต้องใช้เบราว์เซอร์ Chrome (Google Chrome) เท่านั้น

5.ไปที่หน้าแรกของกูเกิ้ลไซต์ของเรา จากนั้นคลิกเมาส์ขวาที่พื้นที่ว่างบนหน้าเว็บไซต์กูเกิ้ลไซต์ของเราจากนั้นเลือก “ตรวจสอบ”
*หมายเหตุวิธีการในข้อที่ 5 ใช้ได้กับบราวเซอร์กูเกิ้ลโครมเท่านั้น

คลิกขวาใน google site เลือกตรวจสอบ

5.1 ท่านจะพบกับหน้าต่างดังรูปต่อไปนี้

5.2 ให้นำเมาส์มาคลิก (คลิก 1 ครั้ง) บริเวณที่หน้าต่างดังกล่าวปรากฎบรรทัดใดบรรทัดหนึ่งก็ได้จากนั้นกดปุ่ม ctrl+f บนคีย์บอร์ท ท่านจะกับกับช่องค้นหาเล็กๆ บริเวณมุมล่างซ้ายของหน้าเว็บ ดังรูปต่อไปนี้

5.3 ให้ท่านพิมพ์คำค้นหาว่า “sites-header-primary-row” หรือคัดลอกไปวางก็ได้ จะรวดเร็วกว่า เมื่อท่านพิมพ์คำค้นหาดังกล่าวแล้ว ผลลัพธ์ภายในหน้าเว็บจะวิ่งไปหาผลการค้นหาที่ท่านพิมพ์ โดยผลการค้นหาจะเป็นข้อความซึ่งถูกเน้นด้วยสีเหลืองดังรูปภาพต่อไปนี้

5.4 เมื่อเราเจอผลการค้นหาเป็นที่เรียบร้อยแล้ว ให้เรานำเมาส์ไปชี้ที่บรรทัดของผลการค้นหาที่เราเจอ (บรรทัดที่มีสีเหลืองนั่นแหละ) เมื่อเรานำเมาส์ไปชี้ จะเห็นได้ว่าภายในหน้าเว็บไซต์เกิดการเปลี่ยนแปลงอะไรบางอย่าง อะไรบางอย่างที่กลาวคือหน้าเว็บมีการเลือกเซคชั่นซึ่งเป็นผลมาจากการที่เรานำเมาส์ไปชี้ที่โค๊ดบรรทัดของผลการค้นหา สำหรับผู้ที่ไม่เคยลองวิธีนี้อย่าพึ่งประหลาดใจไปครับ เรามาถูกทางแล้ว ต่อกันเลยนะครับ ตอนนี้เรายังเอาเมาส์ไปชี้ที่บรรทัดที่เป็นสีเหลืองอยู่นะครับจากนั้นให้เราไปสังเกตุบริเวณหัวเว็บไซต์กูเกิ้ลไซต์ของเรา จะเห็นได้ว่าตอนนี้หน้าเว็บมีการเลือกเซคชั่นของหัวเว็บเราอยู่ให้เราสังเกตุที่แถบสีเทา (ไปทางดำซะมากกว่า) ด้านหลังจะมีตัวเลขอยู่นั้นแหละครับ คือขนาดที่แท้จริงของหัวเว็บกูเกิ้ลไซต์ของเราหน่วยของมันก็คือพิกเซล ยกตัวอย่างเช่น ตัวเลขของผมในแถบสีเทาคือ 1215×252 ขนาดหัวเว็บของผมก็คือ 1215×252 pixel ครับ(ดูรูปด่านล่างประกอบ) ซึ่งในส่วนของการทำหัวเว็บ หรือการตกแต่งหัวเว็บไซต์ในโปรแกรมอะโดบี โฟโต้ชอป ผมจะไม่ลงลึกในเรื่องนี้นะครับ

ดูแถบสีเทาในกูเกิ้ลไซต์

สำหรับผู้ที่ต้องการศึกษาเรื่องการสร้างหัวเว็บในโปรแกรมอะโดบี โฟโต้ชอป ผมแนะนำวีดีโอพื้นฐานให้นะครับ แต่ตอนสร้างหน้ากระดาษงานใหม่ในโปรแกรมอะโดบี โฟโต้ชอป ซึ่งในวีดีโอที่ท่านกำลังจะดูจะให้ท่านกรอกค่าตอนสร้างหน้ากระดาษคือ 800 กับ 300 แต่เวลาท่านนำไปสร้างเป็นหัวเว็บของท่านจริงๆ ให้ท่านกรอกขนาดตามขนาดหัวเว็บที่ท่านได้หามานะครับ หามาจากใหน? ก็หามาจากขนาดข้างต้นที่ผมได้กล่าวไปเมื่อสักครู่ซึ่งขนาดของผมคือ 1215×252 เวลาท่านกรอกท่านก็กรอก 1215 ในช่องแรก และ 252 ในช่องถัดไปส่วนการตั้งค่าอื่นๆ ก็ให้ทำตามวีดีโอที่สอนเลยครับ

6.มาถึงขั้นตอนนี้ผมจะถือว่าทุกท่านได้จัดเตรียมรูปภาพหัวเว็บซึ่งเป็นไฟล์ เจเพ็ก (JPEG), พิง (PNG) หรือไฟล์ที่เป็นนามสกุลอื่นๆ ตามที่ท่านถนัดไว้เรียบน้อยแล้ว ขั้นตอนดังต่อไปนี้เราจะมาเริ่มอัพโหลดไฟล์หัวเว็บกันครับ
6.1 ให้เราเข้าไปที่หน้าแรกของกูเกิ้ลไซต์ของเรา โดยการไปที่ลิ้งก์ https://sites.google.com/site/sites/ จากนั้นคลิกที่กูเกิ้ลไซต์ของเราที่ต้องการใส่หัวเว็บ หรือใครทราบที่อยู่ยูอาร์แอล (URL) ของเว็บไซต์ของเราเองก็สามารถพิมพ์เพื่อเข้าถึงกูเกิ้ลไซต์ของเราได้เลย เมื่อมายังหน้าแรกของกูเกิ้ลไซต์ของเราแล้ว ต่อไปให้เราคลิกที่ปุ่ม “เฟือง” ซึ่งอยู่บริเวณด้านมุมขวาบนของเว็บไซต์จากนั้นเลือก “จัดการไซต์” (ดูภาพประกอบ)

คลิกเลือกจัดการไซต์

6.2 เมื่อเรามาที่ “จัดการไซต์” แล้ว ให้เรามองไปที่เมนูด้านซ้ายมือจากนั้นคลิกที่คำว่า “ธีม สี และแบบอักษร” เมื่อคลิกเข้ามาแล้วท่านจะพบกับเมนูดังภาพด้านล่างนี้

จะเจอหน้าแก้ไขรูปแบบเทมเพลต

6.3 ขั้นตอนต่อไปให้เราสังเกตุเมนูด้านซ้ายมือ คลิกไปที่ “ส่วนหัวของไซต์” จากนั้นสังเกตุด้านขวามือ ในหัวข้อของ “ภาพ” ให้คลิกเลือกในหัวข้อที่ 3 ซึ่งจะมีสัญลักษณ์รูปกรอบรูปอยู่ ให้เราคลิกที่หัวข้อนี้ (ดังภาพด้านล่าง) จากนั้นให้เราดำเนินการเลือกรูปภาพที่เราจะทำมาทำเป็นหัวเว็บไซต์กูเกิ้ลไซต์ของเรา (ดังภาพด้านล่าง ภาพถัดไป) เมื่อเลือกรูปภาพแล้วก็รอให้รูปภาพดำเนินการอัพโหลดให้เสร็จสิ้น

คลิกส่วนหัวของไซต์

เลือกไฟล์รูป

6.4 เมื่อทำการอัพโหลดรูปภาพเป็นที่เรียบร้อยแล้วขั้นตอนต่อไปคือการตั้งค่าตำแหน่งรูปภาพให้อยู่กึ่งกลางของเว็บไซต์ทำได้โดยการคลิกที่ข้อความ “ัตัวเลือก” แล้วดำเนินการตั้งค่าดังนี้
– แสดงซ้ำ : ไม่ซ้ำ
– ตำแหน่งแนวนอน : กึ่งกลาง
– ตำแหน่งแนวตั้งกึ่งกลาง

ตัั้งค่ากึ่งกลาง

6.5 เมื่อดำเนินการตั้งค่าทุกอย่างเสร็จสิ้นให้กดปุ่ม “บันทึก” (ปุ่มสีแดง)
6.6 กลับไปดูผลงานของการเปลี่ยนหัวเว็บของเราโดยอีกวิธีหนึ่งของการกลับไปยังหน้าแรกของกูเกิ้ลไซต์เมื่อเราอยู่ในหน้าของการจัดการไซต์นั่นคือการคลิกปุ่ม “< ชื่อกูเกิ้ลไซต์ของเรา” วิธีการนี้ก็สามารถนำท่านไปยังหน้าแรกของกูเกิ้ลไซต์ได้เช่นกัน (ตัวอย่างดังภาพ)

กลับไปหน้าแรกกูเกิ้ลไซต์

7.เป็นอันเสร็จสิ้นขั้นตอนของการเปลี่ยนหัวเว็บไซต์บนกูเกิ้ลไซต์

เสร็จสินการแทรกหัวเว็บในกูเกิ้ลไซต์

sopanatc
เขียนบทความไอทีไปเรื่อย, ทำสิ่งที่อยากทำให้เป็นจริง :)
http://www.sopanat.com/

Leave a Reply

Your email address will not be published. Required fields are marked *