[แชร์แบบบ้านๆ] ตอนที่ 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/index.php/topic,267875.msg3688725.html#msg3688725
ต่อตอนที่ 3.3 http://www.thaiseoboard.com/index.php/topic,267875.msg3689329.html#msg3689329
ต่อตอนที่ 3.4 http://www.thaiseoboard.com/index.php/topic,267875.msg3689620.html#msg3689620
ต่อตอนที่ 3.5 http://www.thaiseoboard.com/index.php/topic,267875.msg3691166.html#msg3691166
ต่อตอนที่ 3.6 http://www.thaiseoboard.com/index.php/topic,267875.msg3691266.html#msg3691266
ต่อตอนที่ 3.7[end] http://www.thaiseoboard.com/index.php/topic,267875.msg3692962.html#msg3692962
สามารถดูตัวอย่างได้ที่
http://www.arus-group.com/4lief

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

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

เอาละคราวที่แล้วเราได้รู้เรื่องการออกแบบ 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/index.php/topic,267875.msg3688725.html#msg3688725
ต่อตอนที่ 3.3 http://www.thaiseoboard.com/index.php/topic,267875.msg3689329.html#msg3689329
ต่อตอนที่ 3.4 http://www.thaiseoboard.com/index.php/topic,267875.msg3689620.html#msg3689620

บักเชนนนน · 25 เมษายน 2012, 16:48:11

แจ่มๆเลย บวกไปหนึ่งก่อนอ่านเลย

modernaid · 25 เมษายน 2012, 16:50:36

แจมๆด้วยครับ บวกๆ

xfiles · 25 เมษายน 2012, 16:51:49

สวดยวด.... ติดตาม เกาะติด ทันเหตการณ์

ืืPonsena · 25 เมษายน 2012, 16:52:31

เยี่ยมมากเลยครับ

iwarrior · 25 เมษายน 2012, 18:02:11

น้ำใจงามจริงๆ

!Blogger SEO~~ · 25 เมษายน 2012, 18:06:11

รอติดตามนะ

ssamrej · 25 เมษายน 2012, 18:11:29

ตามมาอ่านครับ

adidog · 25 เมษายน 2012, 18:11:52

ตามติดอีกมู้ ขอบคุณมากครับ

bungygum · 25 เมษายน 2012, 18:43:21

+1 ให้เลยครับ กำลังศึกษาวิธีสร้างธีมอยู่เหมือนกัน

ตินิดเดียวครับ"โปรแกลม"เขียนผิดนะครับ ต้องเป็น "โปรแกรม"

siamseo · 25 เมษายน 2012, 18:45:48

เยี่ยมเลยครับ

pungplai · 25 เมษายน 2012, 18:46:21

ขอบคุณครับ ช่างมีเมตตาแท้

korry · 25 เมษายน 2012, 19:23:48

กำลังหาคนสอนเลยอ่ะ ชอบๆ

light34 · 25 เมษายน 2012, 19:50:03

รออ่านครับ ขอบคุณครับ

poakpong · 26 เมษายน 2012, 01:10:00

รออ่านตอนต่อไป

pataso · 26 เมษายน 2012, 01:41:07

ขอบคุณมากครับ

TummZ · 26 เมษายน 2012, 01:41:29

ยอดเยี่ยม

chomfree · 26 เมษายน 2012, 02:02:56

มาเก็บความรู้ครับ

arusgroup · 26 เมษายน 2012, 10:27:50

รูปใหญ่นะครับเลื่อนไปทางขวาเพื่อดูไห้เต็มๆ ครับ
ผมจะเริ่มทำในส่วนของ header ก่อนนะครับ

Thanks: ฝากรูป
จากรูปเราจะมี 2 ส่วนนะครับคือ
1 โลโก้
2 เมนู
เรามาทำในส่วนบนสุดลงไปข้างล่าง จากซ้ายไปขวา กันนะครับ
เริ่มแรก เราต้องใส่ div แยกเป็นส่วนๆนะครับเพื่อง่ายต่อการเปรี่ยนแปลงค่าต่างๆ ครับ
เราก็เริ่มจากใส่รูป

โค้ด เลือก

				<div class="logo">
					<img src="img/logo.png">
				</div>

ต่อมาก็ตามด้วย navigator ครับ

โค้ด เลือก

								<div class="nav">
					<ul>
						<li><a href="#">home</a></li>
						<li><a href="#">about us</a></li>
						<li><a href="#">service</a></li>
						<li><a href="#">portfolio</a></li>
						<li><a href="#">faq's</a></li>
						<li><a href="#">contact</a></li>
					</ul>
				</div>

เมื่อเราดูจากเบ้าเซอร์เราจะเห็นเป็นแบบนี้ครับ

Thanks: ฝากรูป
รูปมันโหวๆก็ช่างไปก่อนครับผม

เรามาต่อในส่วน guild ครับ

Thanks: ฝากรูป
อันนี้ผมจะแบ่งเป็น2 ส่วนคือ H1 กับ <p> ครับ
เราก็มาเริ่มพิมพ์เนื้อหาเข้าไป

โค้ด เลือก

<div id="guild">
			<h1>SEO Drives Traffic, Leads and Sales.</h1>
			<p>We also know that to fulfill those needs, we have to offer superior services.<a href="#">Read more..</a></p>
		</div>

หลังจากนั้นเราก็ใส้ข้อมูลลงไปตามที่เราออกแบบไว้เรื่อยๆครับ
slider

โค้ด เลือก

		<!-- slider start -->
		<div id="slider">
			<div class="slides_container">
				<div class="slider">
				<a href="#"><img src="img/slider1.png" alt="Slide 1"></a>
					<div class="caption">
						<h1>Lorem ipsum dolor sit amet</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec condimentum felis. Vivamus in diam purus. Mauris id auctor lectus. Cras venenatis lacinia erat. Donec tempor odio vitae ligula varius dapibus. </p>
					</div>
				</div>
				<div class="slider">
				<a href="#"><img src="img/slider2.png" alt="Slide 2"></a>
					<div class="caption">
						<h1>Lorem ipsum dolor sit amet</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec condimentum felis. Vivamus in diam purus. Mauris id auctor lectus. Cras venenatis lacinia erat. Donec tempor odio vitae ligula varius dapibus. </p>
					</div>
				</div>
			</div>
			<a href="#" class="prev"><img src="img/arrow-prev.png" alt="Arrow Prev"></a>
			<a href="#" class="next"><img src="img/arrow-next.png" alt="Arrow Next"></a>
		</div>
		<!-- slider end -->

ตอมาก็ในส่วยของ content

โค้ด เลือก

		<!-- container start -->
		<div id="container">
			<div class="col1">
				<img src="img/seo.jpg" alt="seo">
				<h1>SEO for Business</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat gravida velit, ut consectetur augue rhoncus sit amet. Proin tellus dolor, rutrum nec condimentum sed, suscipit ac enim. Nunc vitae placerat velit. Cras bibendum, sapien eu scelerisque eleifend, lorem purus viverra erat, a consectetur tortor velit sagittis nulla.</p>
				<div class="more">
					<a href="#">Read More..</a>
				</div>
			</div>
			<div class="col2">
				<img src="img/seo.jpg" alt="seo">
				<h1>SEO for E-Commerce</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat gravida velit, ut consectetur augue rhoncus sit amet. Proin tellus dolor, rutrum nec condimentum sed, suscipit ac enim. Nunc vitae placerat velit. Cras bibendum, sapien eu scelerisque eleifend, lorem purus viverra erat, a consectetur tortor velit sagittis nulla.</p>
				<div class="more">
					<a href="#">Read More..</a>
				</div>
			</div>
			<div class="col3">
				<img src="img/seo.jpg" alt="seo">
				<h1>SEO for Traffic</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat gravida velit, ut consectetur augue rhoncus sit amet. Proin tellus dolor, rutrum nec condimentum sed, suscipit ac enim. Nunc vitae placerat velit. Cras bibendum, sapien eu scelerisque eleifend, lorem purus viverra erat, a consectetur tortor velit sagittis nulla.</p>
				<div class="more">
					<a href="#">Read More..</a>
				</div>
			</div>
		</div>
		<!-- container end -->

แล้วก็ตามด้วย footerครับ

โค้ด เลือก

		<!-- footer start -->
		<div id="footer">
			<div id="footer_bar">
				<div class="social">
					<a href="#"><img src="img/rss.png"></a>
					<a href="#"><img src="img/mail.png"></a>
					<a href="#"><img src="img/twiter.png"></a>
					<a href="#"><img src="img/facebook.png"></a>
				</div>
				<div class="footer-text">
					<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat gravida velit</p>
				</div>
			</div>
			<div id="footer_col">
				<div class="col1">
					<h1>Service</h1>
						<ul>
							<li><a href="#">Socal Marketing</a></li>
							<li><a href="#">Internet Marketing</a></li>
							<li><a href="#">Web Design</a></li>
							<li><a href="#">Printing</a></li>
							<li><a href="#">Site Analytics</a></li>
						</ul>
				</div>
				<div class="col2">
					<h1>Product&Tools</h1>
						<ul>
							<li><a href="#">SEO Tools bar</a></li>
							<li><a href="#">SEO Software</a></li>
							<li><a href="#">SEO Theme</a></li>
							<li><a href="#">SEO Pro</a></li>
						</ul>
					</div>
				</div>
				<div class="col3">
					<h1>Popular Content</h1>
						<ul>
							<li><a href="#">Link Building</a></li>
							<li><a href="#">Reputation Management</a></li>
							<li><a href="#">Analytics</a></li>
							<li><a href="#">Social Media</a></li>
							<li><a href="#">Content & Blogging</a></li>
						</ul>
					</div>
				</div>
				<div class="col4">
					<h1>Contact Us</h1>
					<p>SEO.com 119 Pine St. Suite 400 Seattle, TH 10390 +66-2343-5321 <a href="#">E-mail:[email protected]</a></p>
					</div>
				</div>
			</div>
		</div>
		<!-- footer end -->
	</body>
</html>

เมื่อเส็จทั้งหมดแล้วเราจะใด้หน้าตาแบบนี้ครับผม

Thanks: ฝากรูป

แล้วเราก็นำ html ของเรามาตรวจสอบครับที่
http://validator.w3.org/
แล้วเราก็แก้ให้มันถูกตามที่เค้าแนะนำมานะครับ

dollar · 26 เมษายน 2012, 12:08:00

มารอพร้อมกับทำตามอาจารย์