เนื่องจากเพื่อนหลายคนถามถึงวิธีการตัดภาพ และเนื่องจากปัญหานี้อาจเล็กหรือใหญ่ก็เป็นไปไม่ได้เลยที่จะอธิบายให้ชัดเจนในหนึ่งหรือสองประโยค ดังนั้นฉันจะยกตัวอย่างง่ายๆ เพื่ออธิบายปัญหานี้เมื่อฉันว่าง วันนี้เวลาอยู่บ้าน! ตกลง มาเริ่มกันเลย
ขั้นตอนที่ 1: เปิดแบบร่างการออกแบบใน PhotoShop ดังที่แสดงด้านล่าง
เลือกเครื่องมือสไลซ์บนกระดานเครื่องมือแล้วทำการตัดตัวหนาก่อน! เคล็ดลับ: ตัดบล็อกสีขนาดใหญ่ออกเป็นชิ้นเดียวแยกกัน และจัดให้เป็นเส้นแนวนอนให้เรียบร้อยที่สุด (คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับสิ่งนี้ ฉบับหน้าการผลิตในภายหลัง) ความรู้สึก) ภาพที่ตัดมีดังนี้:
ขั้นตอนที่ 2: เลือกไฟล์บันทึกสำหรับเว็บ... ใน PhotoShop เพื่อส่งออก ให้ความสนใจกับการเลือกพารามิเตอร์บางอย่างที่นี่:
มาดูส่วนที่ 1, 2 และ 3 ที่ถูกทำเครื่องหมายด้วยเส้นสีแดง เลือกเครื่องมือสไลซ์ที่แสดงในข้อ 1 จากนั้นคลิกที่รูปภาพที่แสดงในข้อ 2 แล้วเลือกค่าสีในตำแหน่งที่แสดงในข้อ 3 หาก สีเป็นสีเดียวคุณสามารถเลือกให้เล็กที่สุดได้ บิตค่าสี (ทำไมถึงเป็นเช่นนี้ ??) คำตอบ: จะลดขนาดของไฟล์ลงอย่างมากและในขณะเดียวกันก็รักษาสีของภาพได้ดีขึ้น คลิกตกลงเพื่อส่งออกไฟล์ ไฟล์ที่นี่มีโฟลเดอร์ htm และรูปภาพ ดังแสดงในรูป:
ตอนนี้เพจของคุณเสร็จสมบูรณ์เพียงครึ่งเดียว ต่อไป ให้สร้างไซต์ใน Dreamweaver:
ขั้นตอนที่ 3: กำหนดไซต์:
ตั้งชื่อไซต์ในชื่อไซต์ทางด้านซ้ายของรูปภาพ เช่น ตัวอย่าง
จากนั้นเลือกโฟลเดอร์ทั้งหมดของไซต์ที่เราเพิ่งส่งออกในโฟลเดอร์รูทในเครื่องด้านล่าง หลังจากสร้างไซต์แล้ว เราจะเห็นในแผนผังไซต์:
(ทำไมต้องสร้างเว็บไซต์?) การสร้างเว็บไซต์ช่วยให้เราพัฒนานิสัยที่ดีคือการนำไฟล์และโฟลเดอร์ที่อยู่ในเว็บไซต์มารวมกันอย่างเป็นระเบียบ ขณะเดียวกัน เราก็สามารถย้ายเว็บไซต์ไปยังที่อื่นได้อย่างง่ายดาย . วางโดยไม่ต้องเขียนเส้นทางไฟล์ใหม่! (แน่นอนว่าหากคุณไม่ต้องการสร้างเว็บไซต์จริงๆ จะไม่มีใครบังคับคุณ ฉันเคยเจอเพื่อนร่วมงานแบบนี้มาก่อน พวกเขาไม่คุ้นเคยกับการสร้างเว็บไซต์สำหรับเพจ) . แน่นอนว่าผลที่ตามมาจะเกิดปัญหามากมาย )
ขั้นตอนที่ 4: สร้างตารางหน้าใหม่ (ทำไม?) โดยปกติแล้วไฟล์ htm ที่ส่งออกโดยตรงใน Photoshop จะไม่สามารถใช้งานได้โดยตรง เนื่องจากบางแห่งจำเป็นต้องปรับเปลี่ยนระหว่างการใช้งานจริง เช่นสถานที่ที่มีข้อความไดนามิก เราจำเป็นต้องเพิ่มรูปภาพเหล่านั้นลงในเพจ หากหน้าอินพุตไม่ใช้รูปภาพ รูปภาพนั้นจะต้องถูกลบออกไป หากคุณนำรูปภาพที่ไม่ต้องการออกไปและเพิ่มสิ่งที่คุณต้องการใน htm ที่สร้างขึ้นโดยตรง คุณจะพบว่าหน้าจะแย่มากและทั้งหน้าอาจเกิดความสับสนวุ่นวาย!
เอาล่ะ เรามาวิเคราะห์ไฟล์ htm ที่ส่งออกกันก่อน:
ตามตารางในหน้านี้ เราสร้างตารางที่มีสามแถวและหนึ่งคอลัมน์ในหน้าใหม่:
โปรดทราบว่าการตั้งค่าเซลล์ระยะห่างและเส้นขอบเป็น 0 เป็นสิ่งสำคัญมาก เนื่องจากเราไม่ต้องการเห็นช่องว่างและการจัดแนวที่ไม่ตรงในรูปภาพ จากนั้นจึงแทรกตารางที่มีสามแถวและสองคอลัมน์ในแถวแรก และรวมตารางสามคอลัมน์ด้านซ้ายดังแสดงในรูป:
เมื่อแทรกตาราง คุณควรใส่ใจกับการเปรียบเทียบเนื้อหาในไฟล์ htm ต้นฉบับ และพิจารณาว่าเหตุใดคุณจึงทำเช่นนี้
จากนั้น แทรกตารางที่มีสองแถวและสองคอลัมน์ในแถวที่สอง รวมตารางด้านซ้ายดังด้านบน และแทรกตารางหนึ่งแถวห้าคอลัมน์ในแถวแรกของตารางด้านขวาดังที่แสดง:
สุดท้าย แทรกตารางที่มีสามแถวและสองคอลัมน์ในแถวล่าง และรวมรายการที่ 1 และ 2 ในรูปภาพ:
และ
เนื้อหาลงในตาราง ฉันจะไม่ลงรายละเอียดที่นี่!
คุณลักษณะทั้งสองของ align และ valign มีความสำคัญมาก คุณไม่ควรละความพยายามที่จะใช้มันเพื่อช่วยคุณทำสิ่งต่าง ๆ ตกลง ฝึกฝนด้วยตัวเอง!