การสอนวันนี้จะสอนวิธีการใช้ Div+CSS เพื่อตัดหน้า PSD เป็นหน้า HTML บทช่วยสอนแบบนี้ได้ทำน้อยมากในเว็บไซต์นี้และส่วนใหญ่เป็นส่วนหนึ่ง ในอนาคตเราจะเผยแพร่และแปลแบบฝึกหัดประเภทนี้อย่างช้าๆ
ก่อนอื่นดูเอฟเฟกต์
ภาพด้านล่างคือการเรนเดอร์ หลังจากตัดออกแล้วหัวและด้านล่างอาจกว้างขึ้น ...
สร้างโฟลเดอร์ใหม่
ในการเริ่มต้นให้สร้างโฟลเดอร์ในคอมพิวเตอร์ของคุณ ฉันตั้งชื่อมันว่า Zmool จากนั้นสร้างภาพโฟลเดอร์ใหม่ในโฟลเดอร์และวางรูปภาพทั้งหมดของเว็บไซต์ ถัดไปเปิดตัวแก้ไขรหัส (Dreamweaver) และสร้างไฟล์ HTML ชื่อ index.html ในไดเรกทอรีรูทซึ่งเป็นแม่แบบโฮมเพจของเรา ตอนนี้สร้างไฟล์ CSS ใหม่และตั้งชื่อไฟล์ style.css ดังที่แสดงในรูปด้านล่าง:
เปิดไฟล์ index.html ที่ด้านบนของแท็กหัวเพิ่มลิงก์ไปยังสไตล์ชีทของคุณ (style.css) คุณสามารถใช้รหัสต่อไปนี้
<link href = style.css rel = stylesheet type = text /css />
รหัสส่วนหัวมีดังนี้:
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> สตูดิโอออกแบบที่ทันสมัย </title> <link href = style.css rel = stylesheet type = text/css/> </head> <body> </body> </html>
สร้างโครงสร้าง HTML
ตอนนี้เราจะตั้งค่าโครงสร้างไฟล์ HTML ตั้งค่า 3 ส่วน (ชื่อเรื่องเนื้อหาส่วนท้าย) ด้านล่าง:
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> เอกสารที่ไม่มีชื่อ </title> <link rel = stylesheet type = text/css href = style.css/> </head> <body> <div id = header> </div> <div id = เนื้อหา> </div>
พื้นหลังการตัด
ไฟล์ PSD ของเรามีเอฟเฟกต์พื้นผิวมากมาย เราจำเป็นต้องตัดสิ่งเหล่านี้ทั้งหมดแล้วเพิ่มลงในหน้าเว็บด้วยรหัสเพื่อให้เอฟเฟกต์หน้า Div สอดคล้องกับเอฟเฟกต์การออกแบบ
<body> <div id = header> <div id = container> </div> </div> <div id = content> <div id = container> </div> </div> <div id = footer> <div id = container> </div> </div> </body>
ตอนนี้เปิดเลเยอร์ที่ออกแบบมาเดิมใน Photoshop ซ่อนไว้ยกเว้นเลเยอร์พื้นหลัง
ตอนนี้ใช้เครื่องมือการหั่น, เลือกพื้นหลัง, บันทึกรูปแบบเว็บเพจเว็บ (alt + shift + ctrl + s) จากนั้นไฟล์โฟลเดอร์อิมเมจที่บันทึกไว้ชื่อ background.jpg
กำหนดสไตล์พื้นหลัง
เปิดไฟล์ style.css ตั้งค่าสไตล์พื้นฐานสไตล์พื้นหลังและความกว้างของส่วนหลักดังนี้:
* {มาร์จิ้น: 0px; Padding: 0px;} body {พื้นหลัง: url (images/background.jpg);}#container {margin: auto; ความกว้าง: 960px;}ตัดหัว
กลับไปที่ Photoshop ซ่อนเลเยอร์ที่เรียกว่ายกเว้นพื้นหลังส่วนหัวและใช้วิธีเดียวกันเพื่อตัดภาพพื้นหลังส่วนหัวลงในรูปแบบเว็บและบันทึกชื่อไฟล์เป็น head.jpg
แก้ไขรหัสพื้นหลัง
แก้ไขรหัสต่อไปนี้ในไฟล์ style.css:
#header {พื้นหลัง: url (images/header.jpg); ความสูง: 124px;}ตัดโลโก้หัว
ในเวลานี้ตัดชั้นโลโก้และซ่อนเลเยอร์ทั้งหมดรวมถึงเลเยอร์พื้นหลัง ตัดเลเยอร์โลโก้เป็นวิธีเดียวกับด้านบนเพื่อบันทึกเป็นโลโก้ png หมายเหตุ: บันทึกเป็นรูปภาพรูปแบบ PNG
เพิ่มเพื่อเพิ่มโลโก้บนหน้า
ตอนนี้กลับไปที่ HTML และเพิ่มรหัสต่อไปนี้ <div id = โลโก้> …. </div> ใน #Header #Container
<div id = ส่วนหัว> <div id = container> <div id = โลโก้> <a href =#> <img src = images/logo.png> </a> </div> </div> </div>
ตอนนี้เปลี่ยนไปใช้ไฟล์ style.css ด้านล่างและเขียนสไตล์ #logo
#logo {margin-top: 20px; border: none;}รหัสการนำทางแก้ไข
ด้านล่างคือรหัสในหน้า ส่วนหัวประกอบด้วยสองส่วน: โลโก้และการนำทาง
<div id = header> <div id = container> <div id = โลโก้> <a href =#> <img src = images/logo.png> </a> </div> <ul> <li> <a href =#> home </a> </li> <li> <li> <a href =#> บล็อก </a> </li> <li> <a href =#> ที่ติดต่อ </a> </li> </div> </div>
รูปแบบการนำทางมีดังนี้:
ตอนนี้เพิ่มรูปแบบการนำทางในตาราง CSS ~, UL, LI และเชื่อมโยงสไตล์:
#header li {color:#959595; list-style: none; float: left; margin-right: 20px; Font-family: Myriad Pro, Arial; Font-Weight: Bold; Font-Size: 24px;}#header li {color:#959595; ul {float: ขวา; margin-top: -40px;}#ส่วนหัว li a: โฮเวอร์ {พื้นหลัง:#202020; สี:#d2d2d2; -moz-border-radius: 5px; -khtml-border-radius: 5px;ตอนนี้สร้างส่วนตรงกลาง
ตอนนี้เราเพิ่มสอง divs ลงในส่วนตรงกลางของเนื้อหาหน้าดังแสดงในรูปด้านล่าง:
<div id = content> <div id = container> <div id = featured> </div> <div id = ย่อหน้า> </div> </div> </div>
สลับไปที่หน้า Photoshop PSD ตัดส่วนตรงกลางและตั้งชื่อ itied.jpg รูปต่อไปนี้:
เพิ่มรหัสต่อไปนี้ในหน้า HTML ของคุณและข้อความแนะนำบางส่วน:
<div id = content> <div id = container> <div id = featured> <a href =#> โครงการเพิ่มเติม </a> <p> <p> <pan> โครงการพอร์ตโฟลิโอ, 5 มกราคม 2010 </span> คุณเคยต้องการสร้างผลงานที่สะอาดและดีหรือไม่? ในบทช่วยสอนนี้ฉันจะแสดงวิธีการออกแบบเค้าโครงพอร์ตการลงทุนสีน้ำเงินที่สะอาด คุณเคยต้องการสร้างผลงานที่สะอาดและดีหรือไม่? ในบทช่วยสอนนี้ฉันจะแสดงวิธีการออกแบบรูปแบบพอร์ตโฟลิโอสีน้ำเงินที่สะอาดใน Adobe Photoshop. </p> </div> <div id = ย่อหน้า> </div> </div> </div>
ในไฟล์ PSD ซ่อนเลเยอร์ที่เรียกว่าอื่น ๆ ให้เหลือเพียงส่วนเลเยอร์ปุ่มตัดส่วนปุ่มบันทึกรูปแบบ PNG และตั้งชื่อปุ่มมัน png
ตอนนี้เราเพิ่มรูปภาพเหล่านี้ลงในหน้าสลับไปที่หน้าไฟล์ CSS และเพิ่มรหัสต่อไปนี้ซึ่งรวมถึงสไตล์พื้นหลังและสไตล์ปุ่ม
#featured {พื้นหลัง: url (images/featured.jpg) No-Repeat; ความสูง: 381px; margin-top: 30px; margin-left: 80px;}#โดดเด่น A {พื้นหลัง: url (images/button.png); ความสูง: 30px; width: 124px; text-indent: -99999px; ตำแหน่ง: Absolute; margin-top: 330px; margin-left: 180px;}#เด่น A: Hoverตอนนี้เรามาเพิ่มรูปแบบของ Dummytext:
.dummyText {color:#d2d2d2; ความกว้าง: 245px; margin-top: 150px; ตำแหน่ง: Absolute; Font-Family: Arial, Helvetica, Sans-Serif; Font-Size: 12px; Line-Height: 180%; ช่วง {ตัวอักษรขนาด: 16px; สี:#191919; font-weight: bold;}เพิ่มต่อไปนี้เพื่อเพิ่มรูปภาพเพื่อแสดงส่วนบทนำหมวดหมู่ต่อไปนี้
ส่วนรหัสของหน้ามีดังนี้
<div id = ย่อหน้า> <p> <pan> สวย </span> webdesignfan เป็นบล็อกที่เกี่ยวข้องกับการออกแบบเกี่ยวกับการออกแบบเว็บ, Photoshop, Freebies และบทช่วยสอน เราเผยแพร่ข้อมูลที่เป็นประโยชน์ที่อุทิศให้กับนักออกแบบเว็บไซต์และนักพัฒนา ที่นี่คุณสามารถค้นหาแหล่งข้อมูลฟรีเช่นเวกเตอร์ธีม WordPress และแรงบันดาลใจมากมาย </p> <p> <pan> มีประสิทธิภาพ </span> webdesignfan เป็นบล็อกที่เกี่ยวข้องกับการออกแบบเกี่ยวกับการออกแบบเว็บ, photoshop, freebies และบทช่วยสอน เราเผยแพร่ข้อมูลที่เป็นประโยชน์ที่อุทิศให้กับนักออกแบบเว็บไซต์และนักพัฒนา ที่นี่คุณสามารถค้นหาแหล่งข้อมูลฟรีเช่นเวกเตอร์ธีม WordPress และแรงบันดาลใจมากมาย </p> <p> <pan> ฟังก์ชั่น </span> webdesignfan เป็นบล็อกที่เกี่ยวข้องกับการออกแบบเกี่ยวกับการออกแบบเว็บ, photoshop, freebies และบทช่วยสอน เราเผยแพร่ข้อมูลที่เป็นประโยชน์ที่อุทิศให้กับนักออกแบบเว็บไซต์และนักพัฒนา ที่นี่คุณสามารถค้นหาแหล่งข้อมูลฟรีเช่นเวกเตอร์ธีม WordPress และแรงบันดาลใจมากมาย </p> </div>
เนื้อหาในส่วนกลางของเราควรมีลักษณะเช่นนี้:
<div id = content> <div id = container> <div id = featured> <a href =#> โครงการเพิ่มเติม </a> <p> <p> <pan> โครงการพอร์ตโฟลิโอ, 5 มกราคม 2010 </span> คุณเคยต้องการสร้างผลงานที่สะอาดและดีหรือไม่? ในบทช่วยสอนนี้ฉันจะแสดงวิธีการออกแบบเค้าโครงพอร์ตการลงทุนสีน้ำเงินที่สะอาด คุณเคยต้องการสร้างผลงานที่สะอาดและดีหรือไม่? ในบทช่วยสอนนี้ฉันจะแสดงวิธีการออกแบบเค้าโครงพอร์ตโฟลิโอสีน้ำเงินที่สะอาดใน Adobe Photoshop. </p> </div> <div id = ย่อหน้า> <p> <pan> สวย </span> webdesignfan เป็นบล็อกที่เกี่ยวข้องกับการออกแบบเว็บ เราเผยแพร่ข้อมูลที่เป็นประโยชน์ที่อุทิศให้กับนักออกแบบเว็บไซต์และนักพัฒนา ที่นี่คุณสามารถค้นหาแหล่งข้อมูลฟรีเช่นเวกเตอร์ธีม WordPress และแรงบันดาลใจมากมาย </p> <p> <pan> มีประสิทธิภาพ </span> webdesignfan เป็นบล็อกที่เกี่ยวข้องกับการออกแบบเกี่ยวกับการออกแบบเว็บ, photoshop, freebies และบทช่วยสอน เราเผยแพร่ข้อมูลที่เป็นประโยชน์ที่อุทิศให้กับนักออกแบบเว็บไซต์และนักพัฒนา ที่นี่คุณสามารถค้นหาแหล่งข้อมูลฟรีเช่นเวกเตอร์ธีม WordPress และแรงบันดาลใจมากมาย </p> <p> <pan> ฟังก์ชั่น </span> webdesignfan เป็นบล็อกที่เกี่ยวข้องกับการออกแบบเกี่ยวกับการออกแบบเว็บ, photoshop, freebies และบทช่วยสอน เราเผยแพร่ข้อมูลที่เป็นประโยชน์ที่อุทิศให้กับนักออกแบบเว็บไซต์และนักพัฒนา ที่นี่คุณสามารถค้นหาแหล่งข้อมูลฟรีเช่นเวกเตอร์ธีม WordPress และแรงบันดาลใจมากมาย </p> </div> </div> </div>
ไปที่ไฟล์ CSS ของคุณและเพิ่มรหัสต่อไปนี้
#paragraphs ขยาย {Font-Family: Myriad Pro, Helvetica, Sans-Serif; Font-Size: 22px; Font-Weight: 600; การเว้นระยะห่างจากตัวอักษร: -2px;}#ย่อหน้า sans-serif; สี:#191919; Font-Size: 12px; margin-top: 15px;}. ย่อหน้า {ความกว้าง: 250px; ระยะขอบซ้าย: 15px; float: ซ้าย;}นี่คือสิ่งที่เราได้ทำไปแล้ว:
ด้านล่างของเว็บไซต์ได้รับการจัดการด้านล่าง
ตอนนี้เราได้ทำส่วนนั้นเสร็จแล้วเราจะเริ่มสร้างส่วนท้าย
ก่อนอื่นในไฟล์ PSD ของคุณซ่อนเลเยอร์อื่น ๆ ยกเว้นชั้นส่วนท้ายและส่วนท้ายของพื้นผิวจากนั้นหั่นและบันทึกสิ่งของส่วนท้ายของโฟลเดอร์เป็น footer.jpg
จากนั้นตัดอีกครั้งและตัดปุ่มและกราฟิกนก ตั้งชื่อตาม. png และ bird.jpg ตามลำดับ
แก้ไขรหัสด้านล่าง
ส่วนท้ายด้านล่างมีข้อความและรูปภาพของนกที่มีลิงค์
ดังนั้นเพิ่มรหัสต่อไปนี้ในหน้า HTML
<div id = footer> <div id = container> <p> 2010? สตูดิโอออกแบบสมมติ ออกแบบโดย webdesignfan. </p> <a href =#> ติดตามเราบน Twitter </a> <img src = images/bird.jpg/> </div> </div>
ตอนนี้แก้ไขรหัสสไตล์ส่วนท้ายที่ด้านล่างดังนี้:
#footer {พื้นหลัง: url (images/footer.jpg); ความสูง: 71px; margin-top: 191px;}#footer p {font-family: Arial, helvetica, sans-serif; font-size: 12px; สี:#959595; A {พื้นหลัง: url (images/follow.png); text-indent: -99999px; ตำแหน่ง: Absolute; ความสูง: 27px; ความกว้าง: 124px; ระยะขอบซ้าย: 730px; ระยะขอบด้านบน: 30px;}#ท้ายที่สุดเราใช้ footer.jpg เป็นพื้นหลังของส่วนท้ายแล้วเพิ่มสไตล์ข้อความ
สำหรับลิงก์ไปยังรูปภาพนกที่ด้านล่างเราใช้วิธีเดียวกันก่อนหน้านี้โดยใช้เอฟเฟกต์ลอยเพื่อวางตำแหน่ง
ผลสุดท้าย
ดาวน์โหลดไฟล์ (0,7 MB)
แม้ตอนนี้มันจบแล้ว ฉันไม่รู้ว่าคุณเข้าใจหรือไม่ หากคุณไม่เข้าใจให้ฝากข้อความไว้ ถ้าคุณไม่เข้าใจฉันจะเพิ่มและแก้ไขอีกครั้งฮ่าฮ่า ~