Fast web design

349 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
349
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Fast web design

  1. 1. เทคนิคออกแบบเว็บเพจให้ แสดงผลได้รวดเร็ว
  2. 2. 1. ลดขนาดไฟล์ HTML โดยกำา จัด คำา สั่ง หรือ Tag ที่ไ ม่จ ำา เป็น• การ Copy เนื้อ หาจากโปรแกรม microsoft word จะมี tag ที่ไ ม่จ ำา เป็น ติด มาด้ว ย ดัง นั้น ให้ล บแท็ก ที่ไ ม่เ กี่ย วข้อ งหรือ Copy เนื้อ หาลงโปรแกรม Notepad ก่อ นแล้ว ค่อ ยนำา มาวางลง Dreamweaver• หรือ ใช้ค ำา สั่ง Clean Up HTML และ Clean Up Word HTML จะกำา จัด Empty tag(แท็ก ว่า งเปล่า ) , combine nested Font tag (แท็ก ตัว อัก ษรซำ้า ซ้อ น )ออกไป
  3. 3. 2. ใช้ต ัว อัก ษรหรือ ลิง ค์แ บบ HTML ช่ว ยลดจำา นวนกราฟิก• พยายามให้จ ำา กัด ขนาดไฟล์ HTML และขนาดกราฟิก และภาพ เคลือ นไหว ่
  4. 4. 3. ใช้ไฟล์กราฟิกให้ถูก ประเภท• GIF เหมาะกับรูปที่มสพื้นๆไม่ซับซ้อน ี ี เป็นบริเวณกว้าง เช่นโลโก้ ตัวอักษร ลายเส้น และภาพการ์ตน ู• JPG เหมาะกับรูปที่มการไล่ระดับสี ี อย่างละเอียดและซับซ้อน เช่น รูปถ่าย ภาพวาด รูปทีมสีหลายๆระดับ การ ่ ี เลือกใช้ไฟล์ให้ถูกประเภทจะได้รูปทีมี ่ คุณภาพและทำาให้ไฟล์มีขนาดเล็กอีก
  5. 5. 4. กำาหนดค่า width and height ของกราฟิก• กำาหนดค่า Width และ Height ของ กราฟิก ใน html เพือให้บราวเซอร์ ่ เตรียมพืนทีขนาดตามที่กำาหนดไว้ ้ ่ ขณะทีกำาลังดาวน์โหลดกราฟิกนัน ่ ้ บราวเซอร์จะแสดงข้อมูลตัวอักษรก่อน แล้วค่อยดาวน์โหลดกราฟิกสำาเร็จ• และกำาหนดค่า alt ของกราฟิกทีเป็น ่ ส่วนของเนวิเกชันจะช่วยให้รู้ว่ารูปนัน ้
  6. 6. 5. การกำาหนดค่า lowsrc และ alt<img src=“high_quality_picture.jpg”LOWSCR=“low_quality_picture.jpg”height=100 widht=100><img scr=“hight_quality_pic.jpg”ALT=“loading picture of Mark (500K)”height=100 width=100>
  7. 7. 6. การนำากราฟิกมาใช้ใหม่ในหน้าอื่น ๆ (Recycling graphic)• บราวเซอร์มระบบแคช (cache) จะ ี เก็บรวบรวมไฟล์ทเคยดาวน์โหลดมา ี่ แล้ว เมื่อเปิดหน้าใหม่ทใช้กราฟิกเดิม ี่ ก็จะเรียกจากแคชมาแสดงได้เร็วขึ้น
  8. 8. 7. ใช้ Style Sheet (CSS) ในการ ออกแบบ• กำาหนดตัวสไตล์อกษรและองค์ ั ประกอบต่างๆ และนำาไปใช้ได้กบทุกๆ ั หน้า• ช่วยประหยัดเวลาและลดปริมาณคำาสัง่ เกี่ยวกับรูปแบบต่างๆของภาษา HTML• ไฟล์มีขนาดเล็กลงกว่าปกติและแสดง ผลได้รวดเร็วมากขึ้น
  9. 9. 8. ตัดแบ่งภาพที่มีขนาดใหญ่ให้เป็น ภาพชิ้นเล็กๆ• แบ่งซอยภาพที่มีขนาดใหญ่ให้เป็นภาพชินเล็กๆ ้ โดยใช้ Photoshop
  10. 10. 8. ตัดแบ่งภาพที่มีขนาดใหญ่ให้เป็น ภาพชิ้นเล็กๆ• แบ่งซอยภาพที่มีขนาดใหญ่ให้เป็นภาพชินเล็กๆ ้ โดยใช้ Photoshop

×