นักออกแบบเว็บไซต์มืออาชีพพัฒนาเทมเพลตเว็บไซต์ ซึ่งมักจะใช้โปรแกรมแก้ไขกราฟิกที่ทรงพลัง เช่น Adobe Photoshop ผลงานเป็นไฟล์ที่มีรูปภาพซึ่งในแบบฟอร์มนี้จัดเตรียมให้กับลูกค้า เพื่อที่จะใช้การออกแบบสำเร็จรูป นั่นคือ ในการจัดวางหน้าเว็บ คุณต้องตัดแม่แบบ
จำเป็น
โปรแกรมแก้ไขกราฟิกแรสเตอร์ Adobe Photoshop
คำแนะนำ
ขั้นตอนที่ 1
เปิดไฟล์เทมเพลตในตัวแก้ไขกราฟิก Adobe Photoshop เลือก ไฟล์ และ เปิด จากเมนู หรือกดคีย์ผสม Ctrl + O ในกล่องโต้ตอบที่ปรากฏขึ้นหลังจากนั้น ไปที่ไดเร็กทอรีที่มีไฟล์ เลือกในรายการแล้วคลิกปุ่ม "เปิด"
ขั้นตอนที่ 2
เลือกมาตราส่วนที่สะดวกสำหรับการดูรูปภาพเทมเพลต ใช้เครื่องมือซูมหรือรายการเมนูบริบท เลือกมาตราส่วนที่ให้คุณวางตำแหน่งเคอร์เซอร์ด้วยความแม่นยำของพิกเซล นี่เป็นสิ่งจำเป็นในการตั้งค่าบรรทัดอ้างอิงให้ถูกต้อง
ขั้นตอนที่ 3
สร้างชุดของเส้นอ้างอิงเหนือรูปภาพเทมเพลต เปิดการแสดงไม้บรรทัดในหน้าต่างเอกสารหากยังไม่ได้เปิด ในการดำเนินการนี้ ให้กด Ctrl + R หรือเลือก View and Rulers จากเมนู
ขั้นตอนที่ 4
เลื่อนเคอร์เซอร์ของเมาส์ไปที่ไม้บรรทัดด้านบนเพื่อเพิ่มเส้นอ้างอิงแนวนอน กดปุ่มซ้ายค้างไว้ เลื่อนเคอร์เซอร์ของเมาส์ลงไปที่พื้นที่ภาพ ในทำนองเดียวกัน คุณสามารถเพิ่มเส้นแนวนอนได้ด้วยการใช้ไม้บรรทัดที่ถูกต้อง
ขั้นตอนที่ 5
เพิ่มจำนวนบรรทัดอ้างอิงที่ต้องการและจัดตำแหน่งตามขอบเขตของการแบ่งขอบเขตของเทมเพลต เส้นควรผ่านทุกตำแหน่งที่คุณต้องการตัดแม่แบบ พวกเขาควรจำกัดรูปภาพและพื้นที่ตรรกะทั้งหมด (โลโก้ ส่วนหัวของไซต์ เมนูแนวนอนและแนวตั้ง ฯลฯ) ที่จะนำเสนอบนหน้าเว็บ
ขั้นตอนที่ 6
เปิดใช้งานเครื่องมือ Slice ปุ่มอยู่บนแถบเครื่องมือแนวตั้ง
ขั้นตอนที่ 7
สร้างพื้นที่ตัดตามจำนวนที่ต้องการโดยใช้ Slice Tool เลือกมาตราส่วนที่สะดวกสำหรับการแสดงแม่แบบ ใช้เมาส์เพื่อกำหนดขอบเขตของพื้นที่ แนวทางที่เพิ่มในขั้นตอนที่สามจะให้ตำแหน่งที่แม่นยำของขอบเขตของวัตถุที่คุณสร้าง ปรับพื้นที่ที่มีอยู่หากจำเป็นโดยใช้ Slice Select Tool
ขั้นตอนที่ 8
เปลี่ยนคุณสมบัติของบริเวณการตัดตามต้องการ เปิดใช้งาน Slice Select Tool คลิกขวาที่บริเวณที่ต้องการ ในเมนูบริบท ให้เลือกรายการ แก้ไขตัวเลือกสไลซ์ ในช่องโต้ตอบตัวเลือก Slice ที่ปรากฏขึ้น ให้เลือกประเภทของพื้นที่ (รูปภาพ พื้นที่ว่าง ตาราง) โหมดเติมพื้นหลัง ระบุชื่อ URL เป้าหมาย เนื้อหาของแอตทริบิวต์ alt="รูปภาพ" และค่าอื่นๆ หากจำเป็น. คลิกตกลง
ขั้นตอนที่ 9
ตัดแม่แบบ เลือกไฟล์และบันทึกสำหรับเว็บและอุปกรณ์จากเมนู หรือกด Shift + Ctrl + Alt + S ในกล่องโต้ตอบบันทึกสำหรับเว็บและอุปกรณ์ ให้ระบุรูปแบบและพารามิเตอร์การบีบอัดรูปภาพที่จะตัดแม่แบบ คลิกปุ่มบันทึก กล่องโต้ตอบบันทึกที่ปรับให้เหมาะสมที่สุดจะปรากฏขึ้น
ขั้นตอนที่ 10
เลือก HTML และรูปภาพ (*.html) ในรายการดรอปดาวน์ประเภทไฟล์ และในฟิลด์ ชื่อไฟล์ ให้ป้อนชื่อไฟล์ที่จะวางมาร์กอัป HTML ของเทมเพลต ในรายการ ชิ้น เลือก ชิ้นทั้งหมด ระบุไดเร็กทอรีสำหรับเอาต์พุตและคลิกปุ่ม "บันทึก"
ขั้นตอนที่ 11
ไฟล์ HTML จะถูกวางไว้ในไดเร็กทอรีเป้าหมาย ซึ่งอันที่จริงแล้ว เป็นเทมเพลตหน้าเว็บสำเร็จรูป ไดเร็กทอรีย่อยภาพจะมีชุดของภาพที่ตัดแม่แบบต้นฉบับ