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

 
 
 
Jake Rocheleau
 
นักเขียนอิสระ & นักพัฒนาเว็บ
  ฮัดสัน, แมสซาชูเซต, สหรัฐอเมริกา  [email protected] ผลงานของฉัน • @jakerocheleau 
 
  
 
 

ก่อนที่เราจะเข้าสู่ CSS แบบละเอียดฉันต้องการอธิบายเพิ่มเติมเกี่ยวกับการใช้ microdata หากคุณมองอย่างใกล้ชิดฉันได้ทิ้งคุณลักษณะภายในองค์ประกอบที่แตกต่างมากมายที่มีชื่อ ประเภทรายการ, itemscope, และ itemprop. ทั้งหมดนี้เกี่ยวข้องกับโครงการ Schmea ซึ่งหวังที่จะเสนอโครงสร้างข้อมูลสำหรับเว็บ.

การจัดรูปแบบมีประโยชน์ Microdata

เครื่องมือค้นหาสำคัญ ๆ ทั้งหมดรวมถึง Google, Yahoo !, และ Bing ยอมรับ Schema ว่าเป็นไวยากรณ์ที่ดีที่สุดสำหรับมาร์กอัปข้อมูล การติดป้ายรายละเอียดเกี่ยวกับตัวคุณเองจะช่วยให้เครื่องมือค้นหาเหล่านี้แสดงผลลัพธ์ที่เกี่ยวข้องสำหรับเนื้อหาของคุณทางออนไลน์ เรามาดูวิธีการตั้งค่าเหล่านี้กันดีกว่า.

คุณลักษณะ itemscope ถูกนำไปใช้กับคอนเทนเนอร์ใด ๆ ที่เก็บข้อมูลเกี่ยวกับรายการสคีมา ตามด้วยแอตทริบิวต์ itemtype เสมอซึ่งในภาพจำลองนี้จะอธิบายถึงบุคคล ภายใน wrapper นี้ฉันสามารถติดฉลากเนื้อหาใด ๆ โดยใช้ itemprop พร้อมกับรายละเอียดใด ๆ ที่ระบุไว้ในหน้าเอกสารของพวกเขา.

วิธีที่แนะนำคือการห่อเนื้อหาของคุณภายในแท็ก span แทนการผนวกเข้ากับองค์ประกอบโดยตรง เมื่อคุณกำลังติดป้ายกำกับสิ่งที่คล้ายกับภาพถ่ายคุณควรแนบ itemprop กับ img องค์ประกอบโดยตรง แต่ไม่เช่นนั้นคุณจะมีมาร์กอัปที่สะอาดกว่าโดยห่อข้อมูลของคุณเป็นแท็กแบบขยาย.

เท่าไหร่มากเกินไป?

ฉันจะยืนยันว่าไม่มีการ จำกัด จำนวนรายละเอียดที่คุณสามารถทำได้ Microdata พร้อมใช้งานเพื่อช่วยให้คอมพิวเตอร์รู้จักผู้คนองค์กรผลิตภัณฑ์และรายการอื่น ๆ ภายในบริบทออนไลน์ ข้อมูลเพิ่มเติมที่คุณสามารถนำเสนอที่ดีกว่า.

คุ้มค่าที่จะเก็บและเปิดใจและดูว่าคุณสามารถใช้ microdata นี้ในแง่มุมของเว็บไซต์ของคุณเองได้อย่างไร หากคุณใช้เวลา 10-15 นาทีในการอ่านเอกสาร Schema มันง่ายกว่าที่คุณคิด เราสามารถดูสองตัวอย่างที่ชัดเจนได้จากการสาธิตเรซูเม่:

 
 
skillset
 
 
พัฒนาการ
 
 
HTML5 / CSS3
 
JavaScript & jQuery
 
PHP แบ็กเอนด์
 
ฐานข้อมูล SQL
 
Wordpress
 
Pligg CMS
 
บาง Objective-C
 
 
 
 
ซอฟต์แวร์
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

เมื่อรายการทักษะต่าง ๆ ของฉันฉันได้ติดตั้งคอนเทนเนอร์ใหม่ที่กำหนด schema ของรายการ ไม่มีชุดทักษะหรือประสบการณ์ใด ๆ ที่จะแสดงไว้ภายใต้บุคคลดังนั้นนี่จึงเป็นทางเลือกที่ปลอดภัย คุณค่าที่นี่คือที่ Google สามารถเข้าใจได้ itemListElement เกี่ยวข้องกัน ในกรณีนี้เรามีรายการภาษาและซอฟต์แวร์ที่ฉันรู้วิธีทำงานกับ.

 
 
บทความล่าสุด
 
  10 วิธีทางเลือกที่มีประโยชน์สำหรับ CSS และ Javascript • ตีพิมพ์ใน กรกฎาคม 2012
 
  เขียนใหม่ URL ใน WordPress: คำแนะนำและโปรแกรมเสริม • ตีพิมพ์ใน กรกฎาคม 2012
 
  การเพิ่มประสิทธิภาพ JPEG สำหรับเว็บ - คู่มือขั้นสูง • ตีพิมพ์ใน กรกฎาคม 2012
 
  9 เทคนิคในการออกแบบจดหมายข่าว HTML ที่สมบูรณ์แบบ • ตีพิมพ์ใน พฤษภาคม 2012
 
  คำแนะนำเกี่ยวกับการทดสอบ A / B ด้วยเครื่องมือเพิ่มประสิทธิภาพเว็บไซต์ของ Google • ตีพิมพ์ใน มีนาคม 2012
 
 

อีกตัวอย่างที่ดีคือรายชื่อบทความที่อยู่ด้านล่างสุด มีการตั้งค่าสคีมาสำหรับบทความและบล็อกโพสต์ซึ่งเกี่ยวข้องกับเนื้อหาที่พบทางออนไลน์ ฉันได้ระบุ URL บทความและวันที่เผยแพร่ซึ่งเป็นข้อมูลที่เพียงพอสำหรับซอฟต์แวร์รวบรวมข้อมูลของเครื่องมือค้นหาเหล่านี้.

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

CSS สไตล์สัมพัทธ์

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

* margin: 0; การเติมเต็ม: 0;  html height: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); ขนาดตัวอักษร: 62.5%; padding-bottom: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; สี: # 454545; ขนาดตัวอักษร: 3.6em; ระยะขอบล่าง: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; สี: # 484848; ขนาดตัวอักษร: 2.5em; ระยะขอบล่าง: 10px; การตกแต่งข้อความ: ขีดเส้นใต้;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; สี: # 777; น้ำหนักตัวอักษร: ปกติ; ขนาดตัวอักษร: 1.8em; ระยะขอบล่าง: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; สี: # 656565; น้ำหนักตัวอักษร: ตัวหนา; ขนาดตัวอักษร: 1.75em; ระยะขอบล่าง: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; สี: # 565656; ขนาดตัวอักษร: 1.8em; ความสูงของเส้น: 1.4em; ระยะขอบล่าง: 15px; padding-left: 35px;  ขนาดเล็ก font-family: "Balthazar", serif; สี: # 656565; ขนาดตัวอักษร: 1.6em; จอแสดงผล: บล็อก; ระยะขอบล่าง: 6px;  ul display: block; รายการสไตล์: ไม่มี;  ul li padding-left: 45px; list-style-type: none; จัดแนวตั้ง: ด้านบน; พื้นหลัง: URL ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px ไม่ต้องทำซ้ำ ระยะขอบล่าง: 5px; แบบอักษรตระกูล: "Balthazar", serif; สี: # 666; ขนาดตัวอักษร: 1.6em; ความสูงของเส้น: 2.3em;  img border: 0; ความกว้างสูงสุด: 100%;  a color: # 5582d6; การตกแต่งข้อความ: ไม่มี;  a: hover text-decoration: ขีดเส้นใต้;  

ไม่มีอะไรน่าสนใจมากไปกว่าฟอนต์ที่กำหนดเองบางตัว ฉันยังคว้าไอคอนสัญลักษณ์แสดงหัวข้อย่อยที่ไม่ซ้ำกันแทนการใช้ค่าเริ่มต้น “จาน”. คุณสามารถลองค้นหาในไดเรกทอรีเช่น Icon Finder เมื่อพยายามค้นหาการออกแบบที่คล้ายกัน.

/ ** @ โครงร่างหลักของกลุ่ม ** / #w ส่วนต่าง: 0px 50px; การขยาย: 20px 40px; padding-top: 35px; พื้นหลัง: #fff; ความกว้างขั้นต่ำ: 260px; ความกว้างสูงสุด: 900px เส้นขอบล่างล่างขวารัศมี: 8px; ขอบล่างซ้าย - รัศมี: 8px; -webkit-border-bottom-radius รัศมี: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  ส่วนหัว ความกว้าง: 100%;  / ** @group การตั้งค่าส่วนตัว ** / #info float: left; ระยะขอบล่าง: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; รัศมี - ชายแดน: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); กล่องเงา: 0 2px 4px rgba (0, 0, 0, 0.2); พื้นหลังสี: #fff; เส้นขอบ: 1px solid #ccc; การขยาย: 5px;  

มีพื้นที่บล็อกที่สำคัญเพียงไม่กี่หน้าเท่านั้นที่ต้องการความสนใจ แน่นอน div wrapper มีการตั้งค่าด้วยระยะขอบและช่องว่างภายในเพิ่มเติม ความกว้างสูงสุดยัง จำกัด อยู่ที่ 900px เพราะขนาดที่ใหญ่กว่านั้นให้ความรู้สึกเหมือนกับว่าหน้ามีช่องว่างมากเกินไป ฉันยังใช้มุมโค้งมนที่ด้านล่างของหน้าเพื่อให้ดวงตาดูนุ่มนวลขึ้น.

การออกแบบที่ตอบสนอง

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

หน้าจอ @ สื่อเท่านั้นและ (ความกว้างสูงสุด: 740px) h1 ขนาดตัวอักษร: 4.5em;  h3 font-size: 2.2em;  h2 display: block; จัดข้อความ: ศูนย์;  #info float: none; จอแสดงผล: บล็อก; จัดข้อความ: ศูนย์;  #photo float: none; จอแสดงผล: บล็อก; จัดข้อความ: ศูนย์;  #w padding: 20px 15px;  p padding: 0;  

เริ่มต้น 740px อยู่ใกล้กับที่ที่รูปถ่ายจะปะทะกับข้อความส่วนหัวของเรา แทนที่จะปล่อยให้ภาพถ่ายหล่นลงไปทางด้านขวาเราจะล้างทั้งองค์ประกอบและจัดกึ่งกลางของเค้าโครงทั้งหมด ฉันได้เพิ่มขนาดข้อความส่วนหัวเพื่อให้มีผลกระทบที่มั่นคงยิ่งขึ้น.

เมื่อหน้าต่างเล็กลงฉันได้ลบช่องว่างพิเศษบางส่วนออกจาก div wrapper และย่อหน้า ปัญหาต่อไปที่เราพบหลังจากส่วนหัวมาจากรายการทักษะ UL ฉันทำลายวิธีสองคอลัมน์และมีรายการที่ลอยอยู่ติดกันแทน.

@media only screen และ (ความกว้างสูงสุด: 570px) ul li display: inline-block; padding-left: 15px; ความกว้าง: 140px; พื้นหลังตำแหน่ง: -5px 0px; ระยะขอบ - ขวา: 6px; ความสูงของเส้น: 1.7em;  # skills-left, ทักษะ-right margin-bottom: 15px;  

สิ่งนี้ยังต้องมีการจัดตำแหน่งคุณสมบัติข้อความเริ่มต้นจำนวนมาก เราต้องอัปเดตความสูงของบรรทัดและเปลี่ยนตำแหน่งไอคอนสัญลักษณ์แสดงหัวข้อย่อยของรายการแต่ละรายการ ฉันได้ตั้งค่าความกว้างคงที่ดังนั้นกริดจะปรากฏเป็นระเบียบมากขึ้นจนกระทั่งถึงจุดหยุดถัดไป.

การเข้ารหัสสำหรับสมาร์ทโฟน

ข้อความค้นหาสามสื่อสุดท้ายมีขนาดเล็ก แต่มีความสำคัญมาก เมื่อคุณสลับระหว่างโหมดแนวนอนและแนวตั้ง iPhone จะปรับขนาดเบราว์เซอร์มือถือใด ๆ นี่เป็นกรณีที่มีอุปกรณ์ Android และโทรศัพท์ Windows Mobile ส่วนใหญ่.

@ สื่อหน้าจอเท่านั้นและ (ความกว้างสูงสุด: 480px) ul li ความกว้าง: 120px;  #w margin: 0 20px;  @media only screen และ (ความกว้างสูงสุด: 320px) #w margin: 0 10px;  / ** iPhone เท่านั้น ** / @media หน้าจอและ (ความกว้างของอุปกรณ์สูงสุด: 480px) ul li width: 150px;  

เมื่อกดปุ่มครั้งแรกที่ 480px หรือเล็กกว่าเราจะเพิ่มช่องว่างภายในเพิ่มเติมจาก wrapper และปรับขนาดรายการอีกครั้ง จากนั้นที่ 320px ฉันได้ลบพื้นที่มาร์จิ้นออกไปด้านนอกเอกสาร คุณยังสามารถเห็นพื้นหลังที่มีพื้นผิวได้ แต่มันไม่สำคัญมากสำหรับวิวพอร์ตแนวตั้งที่บางเฉียบ.

สุดท้ายนี้ฉันกำลังใช้ สูงสุดกว้างของอุปกรณ์ เพื่อกำหนดเป้าหมายอุปกรณ์ iPhone หรือหน้าจอมือถืออื่น ๆ ที่มีความกว้างสูงสุด 480px ในกรณีนี้ฉันต้องการอัปเดตรายการให้กว้างขึ้นเล็กน้อยเพื่อให้เต็มหน้าจอ มันจะส่งผลต่อรายการทักษะในมุมมองแนวนอนเท่านั้นเนื่องจากแนวตั้งผอมเกินไปที่จะสังเกตเห็นความแตกต่าง.

• การสาธิต
• ดาวน์โหลดซอร์สโค้ด

ความคิดสุดท้าย

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

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