โดย: Jason Arber ที่มา: netmag.co.uk
ความแตกต่างระหว่างนักออกแบบเวบที่ดีและสิ่งที่ยิ่งใหญคือความสามารถที่จะรู้วิธีจัดการและประหยัดเวลาโดยไม่ทำให้เวบเสียคุณภาพ
นี่คือสุดยอด 20 เคล็ดลับและเกล็ดเล็กน้อยที่คุณควรใช้กับงานของคุณซึ่งสำคัญสำหรับมืออาชีพ
1. การวางแผน : เมื่อคุณรีบร้อนที่จะเริ่มต้นมันง่ายมากที่จะทำให้คุณข้ามขั้นตอนที่สำคัญคือ การวางแผน: ไม่ว่าจะเป็นการเขียนรูปแบบและ
ไดอะแกรมไซท์ใน OmniGraffle or Visio หรือแม้แต่บนเศษกระดาษเล็กๆ คุณจะประหยัดเวลาโดยมีคำแนะนำคร่าวๆถึงการออกแบบไซท์
ของคุณก่อนที่จะเริ่มต้นสร้าง ข้อผิดพลาดจะถูกตรวจสอบและแก้ปัญหาก่อนที่จะสายเกินกว่าจะกลับมาแก้ไขและัยังสามารถอธิบายแนวคิด
ของคุณให้กับลูกค้าและเพื่อนร่วมงานที่ง่ายกว่าการอธิบายโดยการแสดงการวาดมือไปในอากาศ
2. ทำมันด้วยมือเอง : ถืงแม้ว่าจะมีเครื่องมือชั้นยอดสำหรับการสร้างเวบเช่น Adobe GoLive และ Adobe (ต้นแบบ Macromedia) Dreamweaver
เป็นมืออาชีพในการเลียนแบบรหัสโดยการใช้มือ พวกเขาเป็นพวกบ้ามาโซคิสต์เหรอ? เป็นไปได้ทีเดียว
มีทางเดียวเท่านั้นที่จะเรียนรู้ HTML และนั่นเพื่อการม้วนแขนเสื้อของคุณและมื่อที่เปรอะเปื้อนของคุณด้วยโค๊ดจริงๆ
แต่กลัวว่าจะไม่ใช่ : HTML มีการเรียนรู้ทีง่ายแสนง่ายที่คุณจะได้พบและคุณสามารถสร้างเวบเพจพื้นฐานได้ด้วยสองบรรทัดเท่านั้น
การเขียนโค๊ดด้วยมือยังทำให้คุณแน่ใจว่าคุณได้เขียนรหัสที่เป็นไปได้ซึ่งเป็นเป้าหมายของนักเขียน HTML สมัครเล่นทั้งหมด
อย่าทิ้งการคัดลอก Golive หรือ Dreamweaver เครื่องมือทั้งสองอย่างมีโค๊ดที่เขียนขึ้นมายอดเยี่ยมและมีความสามารถที่เป็นประโยชน์ เช่น
การมีการแยกโค๊ดและการดููผลการแสดงได้ในเวลาเดียวกัน ถ้าคุณต้องการเพียงดูโค๊ดเท่านั้น แล้วตัวแก้ไขโต๊ดซึ่งสามารถบันทึกในรูปแบบ
ไฟล์ .txt ได้ แต่ผู้ใช้ MAC อาจจะต้องการใน Bare Bones Software’s BBEdit ได้ และผู้ใช้ Windows ควรที่จะใช้ฟรีแวร์อย่าง AceHTML จาก
Visicome Media
3. สไตล์ชีท : การนำเข้า และ การเชื่อมต่อ: มีอยู่สองทางที่จะแนบสไตล์ชีทจากภายนอกไว้ในเวบเพจ HTML แต่ไม่ใช่บราวเซอร์ทั้งหมดที่จะ
เข้าใจถึงวิธีการทั้งสองอย่าง นี่เป็นความได้เปรียบของคุณเพื่อใช้ feed กับบราวส์เซอร์รุ่นใหม่ๆและอื่นๆของ Netscape 4.x ซึ่งมิฉะนั้นจะสับสนกับความสัมพันธ์
กับ CSS
CCS ได้ถูกออกแบบให้ไหลเลื่อนไปในแต่ละอัน ความลับคือการสร้างที่ง่ายกว่าการทำงานใน Netscape 4 ด้วยความสัมพันธ์ที่ขับเคลื่อนด้วยการเพิ่มสไตล์ชีท
ซึ่งแนบโดยการใช้ @import ซึ่งจะทำให้ Netscape 4 เกิดปัญหา:
<link rel=”stylesheet” href=”simple. css” type=”text/css” media=”screen”>
<style type=”text/css” media=”screen”> @import url(simple.css); </style>4. แบ่งชั้นแบ๊คกราวน์ให้ดูดี : CSS ให้คุณควบคุมได้มากกว่าและดัดแปลงภาพพื้นหลังได้ดี และสิ่งที่เยียมก็คือภาพที่เป็นชิ้นไม่มีจำกัดที่จะทำภาพแบ็คกราวน์
ในส่วนของแท็ก
<body> แต่ยังสามารถใช้เป็นประโยชน์สำหรับ DIV ใดๆด้วยเพื่อปิดกั้นส่วนที่เกินออกมาภาพที่จัดเรียงเป็นชิ้นหรือตามแกน X หรือ Y สามารถทำให้เลื่อนได้ด้วยหน้าเวบเพจหรือยังคงเป็นเหมือนเดิมขณะที่มีการเลื่อนหน้าเวบขึ้นไปเรื่อยๆ ภาพพื้นหลัง
สามารถวัดระยะได้เช่นกัน นี่หมายความว่ามันง่ายที่จะสร้างภาพพื้นหลังในระดับแนวลึกที่จะไม่มีการวนซ้ำกลับมาหน้าเพจให้นานถูกใช้ประโยชน์จากภาพกราฟฟิก
ที่จะมีขนาดไม่กี่กิโลไบท์เท่านั้น
การใช้โค๊ดต่อไปนี้ ไฟล์ background.png จำเป็นต้องมีระดับชั้นความสูงและกว้างเท่ากัับหนึ่งพิกเซลเท่านั้น ตัวอย่างนี้ให้สมมุติว่าระดับสีเป็นขาวแต่คุณสมบัติ
สีพื้นหลังควรจะใส่ค่าไว้
body { background-color: white; background-image: url(background.png); background-repeat: repeat-x; }
5. คำอธิบาย : เมื่อคุณกลับมาที่เวบไซท์ที่คุณออกแบบไว้เมื่อเดือนที่ผ่านมา มีสิ่งที่แย่กว่าการพยายามที่ไม่รู้ว่าคุณทำอะไรและการพยายามทำความเข้าใจกับโค๊ด
ที่ยุ่งเหยิง ทำสิ่งที่จะช่วยเหลือคุณ(และคนอื่นที่ต้องการตรวจสอบโค๊ดของคุณ)โดยการใส่คำอธิบายใน HTML ของคุณ
คำอธิบายยังสามารถช่วยให้โค๊ดของคุณเป็นระเบียบเรียบร้อยขึ้น คนเขียนโค๊ดบางคนยังใช้คำอธิบายในการสร้างหัวข้อโค๊ดสำหรับหน้าโค๊ดนั้นซึ่งจะดูได้ในโค๊ดนั้น
เท่านั้น
โปรดทราบว่าการใช้คำอธิบายของ HTML และ CSS นั้นใช้ต่างกัน ดังนั้นคุณอาจจะต้องการเรียนรู้ความแตกต่าง
<!-- คำอธิบายของ HTML จะเป็นเช่นนี้และอยู่ภายในเครื่องหมายมากกว่าน้อยกว่าและขีดสองขีด การเปิดแท๊กจะต้องใส่เครื่องหมายตกใจไว้ด้วย -->/* คำอธิบาย CSS จะอยู่ภายในเครื่องหมายทับ(/)และเครื่องหมายดอกจัน */
No comments:
Post a Comment