[แชร์แบบบ้านๆ] ตอนที่ 3 วิธีทำ PSD ให้เป็น Html step by step

อ้างจาก: arusgroup ที่ 25 เมษายน 2012, 16:47:36

[แชร์แบบบ้านๆ] ตอนที่ 1 เรามาทำ wordpress theme ขายกัน

[แชร์แบบบ้านๆ] ตอนที่ 2 ออกPSD Layout ยังไงดีนะ

[แชร์แบบบ้านๆ] ตอนที่ 3 วิธีทำ PSD ให้เป็น Html step by step
ต่อตอนที่ 3.2 http://www.thaiseoboard.com/in...875.msg3688725.html#msg3688725

ต่อตอนที่ 3.3 http://www.thaiseoboard.com/in...875.msg3689329.html#msg3689329

ต่อตอนที่ 3.4 http://www.thaiseoboard.com/in...875.msg3689620.html#msg3689620

ต่อตอนที่ 3.5 http://www.thaiseoboard.com/in...875.msg3691166.html#msg3691166

ต่อตอนที่ 3.6 http://www.thaiseoboard.com/in...875.msg3691266.html#msg3691266

ต่อตอนที่ 3.7[end] http://www.thaiseoboard.com/in...875.msg3692962.html#msg3692962

สามารถดูตัวอย่างได้ที่
http://www.arus-group.com/4lief

หลังจากโดนเรียกร้องมาพอสมควรผมก็จัดสอนให้ตามคำขอ wanwan020

กับการตัด HTML จาก psd แบบ step by step แต่ผมจะค่อยๆ เขียนนะครับอย่าดาม่าผมนะผมเวลาน้อย Tongue

เอาละคราวที่แล้วเราได้รู้เรื่องการออกแบบ PSD กันไปแล้ว ไม่รู้ว่าอ่านกันรู้เรื่องหรือป่าวหรือถ้าใครยังไม่ได้อ่านวิธีทำก็แนะนำให้ไปอ่านก่อนได้ที่ตอนที่ 2 นะครับเอาละมาเริ่มกันเลยครับไม่ยากแล้วก็ไม่ง่ายครับ
หลังจากที่เราได้ Psd แล้วตามแบบนะครับ

เราก็มาเข้าใจก่อนว่ามีส่วนไหนใน theme ของเราบ้าง โดยของผมแบ่งตามนี้ครับ

ของใครจะแบ่งอย่างไรก็แบ่ง ครับแล้วแต่ครับผม
เมื่อเราแบ่งได้แล้วเราก็จะมาเริ่มกันครับ
เปิด text editor หรือโปรแกลม ที่ใช้ทำไฟร์ html ของท่านขึ้นมา ตามถนัดเลยครับผม
สร้างไฟร์ ชื่อตามนี้ครับ

index.html
styles.css
แฟ้ม
img
อย่าลืมตั้ง ค่าเป็น utf-8 นะครับ

จะได้ตามนี้นะครับ

เอาละเปิด index.html ด้วยโปรแกลมแก้ของท่านครับ

พิมพ์code ตามนี้ลงไปครับ

โค๊ด:

<html>
	<head>
		<title>ตามใจท่านนะครับ</title>
		<link href="styles.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		

	</body>
</html>

แท็ก link จะทำหน้าที่ดึง styles.css มาครับ
เราก็เริ่มพิมพ์ divมาใส่ ครับ
ตามนี้ลงไปใน tag body ครับ

โค๊ด:

<body>
		<!-- header start -->
		<div id="header">
			header
		</div>
		<!-- header end -->
		<!-- guild start -->
		<div id="guild">
			guild
		</div>
		<!-- guild end -->
		<!-- slider start -->
		<div id="slider">
			slider
		</div>
		<!-- slider end -->
		<!-- container start -->
		<div id="container">
			container
		</div>
		<!-- container end -->
		<!-- footer start -->
		<div id="footer">
			footer
		</div>
		<!-- footer end -->
	</body>
</html>

เราใส่ส่วนนี้เพื่อให้เราไม่งงนะครับ แยกออกเป็นส่วนๆ จะได้ไม่งงเวลาจะดึงมาใช้ก็ง่ายครับ
ถ้าทำถูกจะออกมาเป็นแบบนี้ครับ

Thanks: ฝากรูป

ต่อตอนที่ 3.2 http://www.thaiseoboard.com/in...875.msg3688725.html#msg3688725

ต่อตอนที่ 3.3 http://www.thaiseoboard.com/in...875.msg3689329.html#msg3689329

ต่อตอนที่ 3.4 http://www.thaiseoboard.com/in...875.msg3689620.html#msg3689620

เก็บค่ะ