ดูตัวอย่างที่ดีขึ้นสำหรับเว็บไซต์สมัยใหม่

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

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

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

ความแตกต่างในอินเทอร์เน็ตยุคปัจจุบัน

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

ตอนนี้เป็นไปได้ทั้งหมดที่จะรวมแบบอักษรของคุณเองด้วย CSS @ font-face คุณสมบัติ คุณสามารถใช้ใด ๆ TrueType(.ttf) หรือ OpenType(.otf) ไฟล์และเก็บสำเนาไว้ในเซิร์ฟเวอร์ของคุณ จากนั้นด้วยเวทมนตร์ CSS3 จะรวมครอบครัวไว้ที่ใดก็ได้บนหน้าเว็บของคุณ!

ภายใต้เทคนิคนี้เพียงอย่างเดียวเป็นไปได้ที่จะเห็นว่าอินเทอร์เน็ตยุคใหม่ของเราพัฒนาขึ้นมาได้อย่างไร.

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

วิธีนี้มีความน่าเชื่อถือมากกว่าเดิมเนื่องจากคุณไม่ต้องการเบราว์เซอร์รุ่นใหม่ที่รองรับมาตรฐาน CSS3 เพื่อให้สามารถใช้งานได้ แต่แน่นอนว่าเบราว์เซอร์ดั้งเดิมเช่น Internet Explorer 6 จะพยายามแสดงผลอย่างถูกต้อง.

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

วัตถุประสงค์ของการทำตัวพิมพ์แบบดิจิทัล

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

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

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

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

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

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

ส่วนหัวของหน้าเว็บ

หนึ่งในสินทรัพย์ที่สำคัญที่สุดสำหรับการพิมพ์เว็บของคุณคือแท็กส่วนหัว หากคุณไม่คุ้นเคยกับส่วนหัว HTML ช่วง

ไปยัง

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

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

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

ตัวอย่างเช่นของคุณ

แท็กควรโดดเด่นที่สุดในบรรดาส่วนหัวของหน้าเว็บของคุณ.

และ

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

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

การสร้างไฮเปอร์ลิงก์ที่ไม่ซ้ำใคร

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

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

เมื่อไปที่รูปแบบลิงค์ของคุณคุณควรพิจารณาดังต่อไปนี้ - การเปลี่ยนแปลงของหน้าตาจะเป็นอย่างไรในการตั้งค่าหน้ากระดาษของคุณ, คุณใช้สีพื้นหลังแบบใด, และ ข้อความสีใดที่ตัดกัน?

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

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

การสร้างรายการสไตล์

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

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

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

วิธีสร้างราคาในหน้า

วันนี้การปรากฏตัวของใบเสนอราคาและการอ้างอิงมี จำกัด มาก ในเว็บแรก ๆ คุณจะไม่เห็นองค์ประกอบเหล่านี้ใช้งานมากนัก บางทีในบทบรรณาธิการบทความหรือเอกสารเพื่อการศึกษา แต่ HTML5 ได้ปรับปรุงกฎเล็กน้อยซึ่งทำให้การอ้างอิง blockquotes ง่ายขึ้นมาก.

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