วิธีออกแบบเทมเพลตเว็บไซต์ใหม่

สารบัญ:

วิธีออกแบบเทมเพลตเว็บไซต์ใหม่
วิธีออกแบบเทมเพลตเว็บไซต์ใหม่

วีดีโอ: วิธีออกแบบเทมเพลตเว็บไซต์ใหม่

วีดีโอ: วิธีออกแบบเทมเพลตเว็บไซต์ใหม่
วีดีโอ: การสร้างเทมเพลตเว็บไซต์ ตอนที่1 2024, อาจ
Anonim

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

วิธีออกแบบเทมเพลตเว็บไซต์ใหม่
วิธีออกแบบเทมเพลตเว็บไซต์ใหม่

คำแนะนำ

ขั้นตอนที่ 1

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

ขั้นตอนที่ 2

แม้ว่าคุณจะไม่ได้ทำเทมเพลตใหม่ทั้งหมด ให้แทนที่รูปภาพส่วนใหญ่ และโดยเฉพาะอย่างยิ่งรูปภาพที่อยู่เป็นโลโก้ แทนที่รูปภาพแต่ละภาพด้วยวิธีนี้:

- เปิดไฟล์กราฟิกในโปรแกรม Photoshop

- ในเมนู "รูปภาพ" - "ขนาดรูปภาพ" ดูพารามิเตอร์

- เปิดแผ่นงานใหม่ที่มีขนาดเท่ากันทุกประการ

- สร้างภาพที่ต้องการโดยใช้เครื่องมือแอปพลิเคชัน

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

ดังนั้น แทนที่จะปรากฏภาพหนึ่ง ภาพอื่นควรปรากฏขึ้น

ขั้นตอนที่ 3

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

ขั้นตอนที่ 4

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

ขั้นตอนที่ 5

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

ขั้นตอนที่ 6

เปิด style.css ใน Notepad ++ คุณสามารถใช้โปรแกรมอื่นที่ออกแบบมาเพื่อแก้ไขโค้ดได้ แต่เพื่อจุดประสงค์นี้ คุณไม่สามารถใช้ "Notepad" มาตรฐานได้ ไม่เช่นนั้นจะเกิดข้อผิดพลาดเนื่องจากการเข้ารหัส ใช้ FireBug เพื่อค้นหาพารามิเตอร์ที่คุณต้องการเปลี่ยนและแก้ไขใน Notepad ++ พร้อมกัน

ขั้นตอนที่ 7

บันทึก css สุดท้ายและอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์