[แชร์แบบบ้านๆ] ตอนที่ 1 เรามาทำ wordpress theme ขายกัน (http://www.thaiseoboard.com/index.php/topic,267068.0.html)
[แชร์แบบบ้านๆ] ตอนที่ 2 ออกPSD Layout ยังไงดีนะ (http://www.thaiseoboard.com/index.php/topic,267091.0.html)
[แชร์แบบบ้านๆ] ตอนที่ 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
หลังจากโดนเรียกร้องมาพอสมควรผมก็จัดสอนให้ตามคำขอ :wanwan020:
กับการตัด HTML จาก psd แบบ step by step แต่ผมจะค่อยๆ เขียนนะครับอย่าดาม่าผมนะผมเวลาน้อย :P
เอาละคราวที่แล้วเราได้รู้เรื่องการออกแบบ PSD กันไปแล้ว ไม่รู้ว่าอ่านกันรู้เรื่องหรือป่าวหรือถ้าใครยังไม่ได้อ่านวิธีทำก็แนะนำให้ไปอ่านก่อนได้ที่ตอนที่ 2 นะครับเอาละมาเริ่มกันเลยครับไม่ยากแล้วก็ไม่ง่ายครับ
หลังจากที่เราได้ Psd แล้วตามแบบนะครับ
(http://www.picza.net/save/20120425vvxdEOdvvvdxl621343_sv1/thumb/2012_04_25-042-20120425vvxdEOdvvvdxl621343.jpg) (http://www.picza.net/show.php?id=20120425vvxdEOdvvvdxl621343)
เราก็มาเข้าใจก่อนว่ามีส่วนไหนใน theme ของเราบ้าง โดยของผมแบ่งตามนี้ครับ
(http://www.picza.net/save/20120425vvxdEOdvvvdxl373623_sv1/pic/2012_04_25-042-20120425vvxdEOdvvvdxl373623.png) (http://www.picza.net/show.php?id=20120425vvxdEOdvvvdxl373623)
ของใครจะแบ่งอย่างไรก็แบ่ง ครับแล้วแต่ครับผม
เมื่อเราแบ่งได้แล้วเราก็จะมาเริ่มกันครับ
เปิด text editor หรือโปรแกลม ที่ใช้ทำไฟร์ html ของท่านขึ้นมา ตามถนัดเลยครับผม
สร้างไฟร์ ชื่อตามนี้ครับ
index.html
styles.css
แฟ้ม
img
อย่าลืมตั้ง ค่าเป็น utf-8 นะครับ
จะได้ตามนี้นะครับ
(http://www.picza.net/save/20120425vvxdEOdvvvdxl19391_sv1/pic/2012_04_25-042-20120425vvxdEOdvvvdxl19391.png) (http://www.picza.net/show.php?id=20120425vvxdEOdvvvdxl19391)
เอาละเปิด 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>
เราใส่ส่วนนี้เพื่อให้เราไม่งงนะครับ แยกออกเป็นส่วนๆ จะได้ไม่งงเวลาจะดึงมาใช้ก็ง่ายครับ
ถ้าทำถูกจะออกมาเป็นแบบนี้ครับ
(http://www.picza.net/save/20120425vvxdEOdvvvdxl43425_sv1/pic/2012_04_25-042-20120425vvxdEOdvvvdxl43425.png) (http://www.picza.net/show.php?id=20120425vvxdEOdvvvdxl43425)
Thanks: ฝากรูป (http://www.picza.net)
ต่อตอนที่ 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
แจ่มๆเลย บวกไปหนึ่งก่อนอ่านเลย :wanwan003:
:wanwan020: แจมๆด้วยครับ บวกๆ
สวดยวด.... ติดตาม เกาะติด ทันเหตการณ์ :wanwan014:
เยี่ยมมากเลยครับ
น้ำใจงามจริงๆ
รอติดตามนะ :-[
ตามมาอ่านครับ
ตามติดอีกมู้ ขอบคุณมากครับ
+1 ให้เลยครับ กำลังศึกษาวิธีสร้างธีมอยู่เหมือนกัน
ตินิดเดียวครับ"โปรแกลม"เขียนผิดนะครับ ต้องเป็น "โปรแกรม" :-[
เยี่ยมเลยครับ
ขอบคุณครับ ช่างมีเมตตาแท้ :wanwan007:
กำลังหาคนสอนเลยอ่ะ ชอบๆ
รออ่านครับ ขอบคุณครับ :wanwan017:
รออ่านตอนต่อไป :wanwan020:
ขอบคุณมากครับ
ยอดเยี่ยม :wanwan003:
มาเก็บความรู้ครับ :wanwan019:
รูปใหญ่นะครับเลื่อนไปทางขวาเพื่อดูไห้เต็มๆ ครับผมจะเริ่มทำในส่วนของ header ก่อนนะครับ
(http://www.picza.net/save/20120426vlFdvlIdOPdllF32475_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF32475.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF32475)
Thanks: ฝากรูป (http://www.picza.net)จากรูปเราจะมี 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>เมื่อเราดูจากเบ้าเซอร์เราจะเห็นเป็นแบบนี้ครับ
(http://www.picza.net/save/20120426vlFdvlIdOPdllF29229_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF29229.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF29229)
Thanks: ฝากรูป (http://www.picza.net)รูปมันโหวๆก็ช่างไปก่อนครับผม
เรามาต่อในส่วน guild ครับ
(http://www.picza.net/save/20120426vlFdvlIdOPdllF21028_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF21028.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF21028)
Thanks: ฝากรูป (http://www.picza.net)อันนี้ผมจะแบ่งเป็น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>เมื่อเส็จทั้งหมดแล้วเราจะใด้หน้าตาแบบนี้ครับผม
(http://www.picza.net/save/20120426vlFdvlIdOPdllF181581_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF181581.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF181581)
Thanks: ฝากรูป (http://www.picza.net)แล้วเราก็นำ html ของเรามาตรวจสอบครับที่
http://validator.w3.org/
แล้วเราก็แก้ให้มันถูกตามที่เค้าแนะนำมานะครับ
มารอพร้อมกับทำตามอาจารย์ :wanwan017:
+1 ให้ครับ เสียดาย + ได้ทีละ 1
:wanwan017:
ขอบคุณครับ
เยี่ยมไปเลยครับ :wanwan017:
รูปใหญ่นะครับเลื่อนไปทางขวาเพื่อดูไห้เต็มๆ ครับผมลืมเอาขั้นตอนการลง slider ลงให้ :P
ผมใช้http://slidesjs.com/เข้าไปโหลดมาครับ
แล้วก็เอาไฟร์ slides.min.jquery.js
ไปลงใว้ในโฟร์เดอร์ js ครับ
แล้วลงโคตตามนี้ครับที่ <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="js/slides.min.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
ผมแก้มันจนผ่าน w3c แล้วครับ
(http://www.picza.net/save/20120426vlFdvlIdOPdllF50342_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF50342.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF50342)
Thanks: ฝากรูป (http://www.picza.net)ก็จะได้ Code แบบนี้ครับ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>4 live</title>
<link href="styles.css" rel="stylesheet" type="text/css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="js/slides.min.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
</head>
<body>
<!-- header start -->
<div id="header">
<div class="logo">
<img src="img/logo.png" alt="seo.com">
</div>
<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>
</div>
<!-- header end -->
<!-- guild start -->
<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>
<!-- guild end -->
<!-- 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 -->
<!-- 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/ecom.jpg" alt="E Commerce">
<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/traffic.jpg" alt="traffic">
<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 start -->
<div id="footer">
<div id="footer_bar">
<div class="social">
<a href="#"><img src="img/rss.png" alt="rss"></a>
<a href="#"><img src="img/mail.png" alt="mail"></a>
<a href="#"><img src="img/twitter.png" alt="twitter"></a>
<a href="#"><img src="img/facebook.png" alt="facebook"></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 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>
<!-- footer end -->
</body>
</html>เอาละเรามาจัดการรูปกันจากไฟร์ที่เราทำเราก็ตัดรูปตามที่เราใช้ครับลงที่html ครับ
ผมจะยกตัวอย่างแค่ logo นะครับ
ก่อนอื่นก็วัดรูปแล้วครอป กอปปี้ไว้ครับ
(http://www.picza.net/save/20120426vlFdvlIdOPdllF17020_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF17020.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF17020)
Thanks: ฝากรูป (http://www.picza.net)กด crt N สร้างเอกสารใหม่ขึ้นมา
(http://www.picza.net/save/20120426vlFdvlIdOPdllF78921_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF78921.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF78921)
Thanks: ฝากรูป (http://www.picza.net)แล้วเราก็กดวางที่เรากอปมา
(http://www.picza.net/save/20120426vlFdvlIdOPdllF10932_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF10932.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF10932)
Thanks: ฝากรูป (http://www.picza.net)ปิด background ออก
(http://www.picza.net/save/20120426vlFdvlIdOPdllF7387_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF7387.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF7387)
Thanks: ฝากรูป (http://www.picza.net)แล้วก็save เป็น png ที่ไฟร์ img นะครับ
(http://www.picza.net/save/20120426vlFdvlIdOPdllF180279_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF180279.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF180279)
Thanks: ฝากรูป (http://www.picza.net)เราก็จะทำอย่างนี้กับทุกๆรูปที่เราลงไปใน Html นะครับเราก็จะใด้หน้า html ออกมาเป็นแบบนี้ครับ
(http://www.picza.net/save/20120426vlFdvlIdOPdllF603633_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF603633.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF603633)
Thanks: ฝากรูป (http://www.picza.net)เป็น Html แล้วครับที่นี้ ต่อมาเราจะต้องมาทำในส่วนของ css ครับ
ติดตามผลงานอยู่ครับ :wanwan017:
+ให้อย่างแรงเลยครับ :wanwan019:
มาต่อตอนที่ 3.4 กันครับ :wanwan003:
/*
Theme Name: 4life SEO
Version: 1.0
Description: Designed by <a href="http://www.arus-group.com">Arus Group</a> (c)
Author: Arusgroup
Author URI: http://www.arus-group.com
Theme URI: http://www.arus-group.com
Tags: minimalistic, simple, widgets, sidebar, elegant
*/
/*----------------------------------------------*/
/* Global Reset */
/*----------------------------------------------*/
body, html { height: 100%; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
body { line-height: 1; }
ol, ul { list-style: none; }
body {
background:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.4em;
min-width:1000px}
ใส่ส่วนนี้ที่ styles.css ครับ
การเปิดด้วย
/*----------------------------------------------*/
/* Global Reset */
/*----------------------------------------------*/
เราจะใว้เวลาเราแก้เเราจะจัดโคทให้เป็นระเบียบนะครับ
ในช่วงนี้ ผมจะใช่เทคนิคแบบเฉพาะตัวนะครับไม่รู้ว่าท่านอื่นจะทำเหมือนผมหรือป่าวครับ
ถ้าใครเป็นcss อยู่แล้วก็สามารถกำหนดค่าลงไปได้เลยครับผม
แต่ถ้าใครไม่เป็นก็ทำตามวิธีผมง่ายสุดครับ
เพราะผมไม่ค่อยแม่นในส่วนของcss ดังนั้นผมจึงใช้ google chrome ในการสร้างครับ
เพราะchromeจะมีส่วนที่สามารถแก้cssให้เราเห็นได้เลยในโมท inspect element เพื่อนๆสามารถใช้โมทนี้ได้โดยการกด คลิกขวาในส่วนที่เราต้องการแล้วกด inspect element นะครับ
เราจะมาเริ่มในส่วนของ header ก่อนครับ
ก่อนอื่นเราก็กำหนดค่าลงไปที่ css ก่อนตามนี้ครับ
/*----------------------------------------------*/
/* header */
/*----------------------------------------------*/
#header {
}
.logo {
}
.logo img {
}
.nav {
}
#header ul {
}
#header li {
}
.nav a {
}
.nav a:active {
}
.nav a:hover {
}
แล้ว save ครับผม ที่นี้กลับมาที่ chrome
เลือกไปที่ #header กดคลิก2 ที่แล้วเราจะสามารถแก้ไขcssได้ครับตามรูป
แต่เจ้าตัวchrome จะมีตัวช่วยเวลาเราพิมพ์จะได้ค่าที่ถูกครับ
(http://www.picza.net/save/20120426vlFdvlIdOPdllF58867_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF58867.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF58867)
Thanks: ฝากรูป (http://www.picza.net)
หลังจากนั้นเราก็พิมพ์ตามนี้ครับ
(http://www.picza.net/save/20120426vlFdvlIdOPdllF16532_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF16532.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF16532)
Thanks: ฝากรูป (http://www.picza.net)
อย่าลืมไปทำรูป bg ด้วยนะครับ
แล้วเราก็จะได้ตามนี้ครับ
(http://www.picza.net/save/20120426vlFdvlIdOPdllF27348_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF27348.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF27348)
Thanks: ฝากรูป (http://www.picza.net)
หลังจากนั้นเราก็กอปโคทที่เราแก้บน chrome มาลงที่ css ของเราตามid และ class ที่แก้ครับ
ก็จะได้code cssแบบนี้ครับ
#header {
position: relative;
margin: 0 auto;
height: 118px;
background: url(img/headerbg.png);
}
เราก็มามำไล่ๆกันไปที่ละตัวนะครับ
ตอนนี้ผมจะขอลงรูปแค่ตอน ที่แก้บน chrome นะครับจะได้ไม่ยาวมากทำคล้ายกันหมดครับผม
(http://www.picza.net/save/20120426vlFdvlIdOPdllF436031_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF436031.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF436031)
Thanks: ฝากรูป (http://www.picza.net)
แก้แล้วกอปไปลง css เรื่อยๆครับ
(http://www.picza.net/save/20120426vlFdvlIdOPdllF424854_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF424854.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF424854)
Thanks: ฝากรูป (http://www.picza.net)
แล้วเราก็จะได้css ตามนี้มาครับผม
/*----------------------------------------------*/
/* header */
/*----------------------------------------------*/
#header {
position: relative;
margin: 0 auto;
height: 118px;
background: url(img/headerbg.png);
}
.logo {
width: 980px;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
}
.logo img {
}
.nav {
width: 980px;
margin: 0 auto;
}
#header ul {
padding-top: 6px;
}
#header li:first-child {
background:none;
}
#header li {
float: left;
padding-left: 20px;
padding-right: 20px;
background: url(img/line.png) no-repeat;
padding-top: 8px;
cursor: pointer;
z-index: 100;
height: 15px;
padding-bottom: 18px;
}
.nav a {
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
color: #ffffff;
}
.nav a:active {
font-weight: bold;
}
.nav a:hover {
font-weight: bold;
}
หน้าตาก็ประมาณนี้ครับผม
(http://www.picza.net/save/20120426vlFdvlIdOPdllF525091_sv1/pic/2012_04_26-042-20120426vlFdvlIdOPdllF525091.png) (http://www.picza.net/show.php?id=20120426vlFdvlIdOPdllF525091)
Thanks: ฝากรูป (http://www.picza.net)
ไว้มาต่อพรุ่งนี้ครับ ไปเรียนภาษาอังกฤษก่อนครับผม
เพื่อนๆที่ไม่รู้css ก็สามารถดูจากตัวอย่างแล้วลองเอามาแก้ที่ chrome ไห้พอใจได้เลยครับ ใครพอจับทางได้ก็มั่วๆกันได้เลยครับผม
ผมก็มั่วๆเอาจนเป็น :wanwan003:
เพิ่มเติมครับ
เนื่องจากที่ผมออกแบบนั้นมีส่วนของลูกศรด้านล่างของ หน้าที่เรากดเลือกครับ
ผมเลยต้องแก้ในส่วนของhtmlและcss ตามนี้ครับ
Html
<!-- header start -->
<div id="header">
<div class="logo">
<img src="img/logo.png" alt="seo.com">
</div>
<div class="nav">
<ul>
<li><a href="index.html" class="active">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>
</div>
<!-- header end -->
Css
/*----------------------------------------------*/
/* header */
/*----------------------------------------------*/
#header {
position: relative;
margin: 0 auto;
height: 118px;
background: url(img/headerbg.png);
}
.logo {
width: 980px;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
}
.logo img {
}
.nav {
width: 980px;
margin: 0 auto;
}
#header ul {
padding-top: 6px;
}
#header li:first-child {
background:none;
}
#header li {
float: left;
padding-left: 20px;
padding-right: 20px;
background: url(img/line.png) no-repeat;
padding-top: 8px;
cursor: pointer;
z-index: 100;
height: 15px;
padding-bottom: 18px;
}
.nav a {
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
color: #ffffff;
padding-bottom: 20px;
}
.nav a.active {
font-weight: bold;
background: url(img/nav-arrow.png) no-repeat center;
background-position-y: 24px;
padding-bottom: 20px;
}
.nav a:hover {
font-weight: bold;
background: url(img/nav-harrow.png) no-repeat center;
background-position-y: 24px;
padding-bottom: 20px;
}
สังเกตุจะมี background: url(img/nav-arrow.png) no-repeat center เข้ามาเพื่อให้แสดงลูกศรครับ
และ.nav a.active นะครับไม่ใช่ .nav a:active
เราเพิ่มclass เข้าไปครับเพื่อให้แสดงผลตามที่สั่งครับ
มาบวกครับ ขอบคุณสำหรับน้ำใจ :-[
เยี่ยมมากเลยครับ
เยี่ยมเลยครับ ขอบคุณครับ
ขอบคุณครับ หาวิธีนี้มานานละ :-[
ติดตามๆ
:wanwan011:
ขอบคุณไว้ก่อนยัง บวกไม่ได้ :wanwan017:
เยี่ยมไปเลยครับ :wanwan017:
ขอบคุณที่แชร์ครับ
แจ่ม จ๊ะเด๊ม.. แจ่มหว้า.... :o :o
+54 :wanwan008: ครับ มาปูเสื่อรอ แต่สงสัยว่าเราใช้ Dreamwaver ทำ html แทนได้ไม้
อ้างถึงจาก: Banyoung ใน 27 เมษายน 2012, 09:06:32
+54 :wanwan008: ครับ มาปูเสื่อรอ แต่สงสัยว่าเราใช้ Dreamwaver ทำ html แทนได้ไม้
ได้ครับแล้วแต่ถนัดเลยครับ
ขอบคุณคร้าบ :wanwan017:
ขอสอบถามหน่อยครับ
เวลาผมทำ ตรง nav มันจะขึ้นเป็นตัว กลมๆ หน้าหัวข้อ home about พวกเนี้ยครับ ผมจะเอาออกยังไงครับ
อ้างถึงจาก: dollar ใน 27 เมษายน 2012, 11:07:50
ขอสอบถามหน่อยครับ
เวลาผมทำ ตรง nav มันจะขึ้นเป็นตัว กลมๆ หน้าหัวข้อ home about พวกเนี้ยครับ ผมจะเอาออกยังไงครับ
ตรง <ul> ให้ใส่ <ul style="list-style:none">
ได้ละครับ ขอบคุณครับ :wanwan017:
มารอขั้นตอนต่อไป
ขอบใจจ่ะ :wanwan013:
ขอตอบคำถามก่อน
อ้างถึงจาก: anatasia ใน 27 เมษายน 2012, 11:37:53
อ้างถึงจาก: dollar ใน 27 เมษายน 2012, 11:07:50
ขอสอบถามหน่อยครับ
เวลาผมทำ ตรง nav มันจะขึ้นเป็นตัว กลมๆ หน้าหัวข้อ home about พวกเนี้ยครับ ผมจะเอาออกยังไงครับ
ตรง <ul> ให้ใส่ <ul style="list-style:none">
แนะนำให้ใส่ใน css นะครับ จะดีกว่า เพราะการใส่ <ul style="list-style:none">ลงไปเลยเวลาเราจะแก้หรือใช้จะทำยากครับ
ขอบคุณมากครับ :wanwan003:
ตอนที่ 3.5 guild :wanwan003:
รูปใหญ่นะครับเลื่อนไปทางขวาเพื่อดูไห้เต็มๆ ครับ
มาต่อกันครับ ในส่วนของ Guild
ตอนนี้หน้าตาจะเป็นแบบนี้นะครับ
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ32286_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ32286.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ32286)
Thanks: ฝากรูป (http://www.picza.net)
เราก็ใส่สีเข้าไปก่อนครับ
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ103245_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ103245.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ103245)
Thanks: ฝากรูป (http://www.picza.net)
ต่อมาเราก็มาจัด H1
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ133757_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ133757.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ133757)
Thanks: ฝากรูป (http://www.picza.net)
ตามด้วย pครับ
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ123266_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ123266.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ123266)
Thanks: ฝากรูป (http://www.picza.net)
และต่อด้วย a ครับผม
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ33922_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ33922.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ33922)
Thanks: ฝากรูป (http://www.picza.net)
เราก็จะได้code แบบนี้ครับ
/*----------------------------------------------*/
/* guild */
/*----------------------------------------------*/
#guild {
background-color: #F7F7F7;
}
#guild h1 {
width: 980px;
margin: 0 auto;
font-size: 30px;
color: #444;
text-align: center;
padding-top: 30px;
font-weight: bold;
}
#guild p {
padding-top: 15px;
width: 980px;
margin: 0 auto;
text-align: center;
font-size: 12px;
color: #444;
padding-bottom: 15px;
}
#guild a {
color: #007CFF;
text-decoration: none;
}
อ้างถึงจาก: arusgroup ใน 27 เมษายน 2012, 13:23:33
ขอตอบคำถามก่อน
อ้างถึงจาก: anatasia ใน 27 เมษายน 2012, 11:37:53
อ้างถึงจาก: dollar ใน 27 เมษายน 2012, 11:07:50
ขอสอบถามหน่อยครับ
เวลาผมทำ ตรง nav มันจะขึ้นเป็นตัว กลมๆ หน้าหัวข้อ home about พวกเนี้ยครับ ผมจะเอาออกยังไงครับ
ตรง <ul> ให้ใส่ <ul style="list-style:none">
แนะนำให้ใส่ใน css นะครับ จะดีกว่า เพราะการใส่ <ul style="list-style:none">ลงไปเลยเวลาเราจะแก้หรือใช้จะทำยากครับ
แก้ css นี่แก้ตรงส่วนไหนครับ :wanwan017:
อ้างถึงจาก: dollar ใน 27 เมษายน 2012, 13:45:42
อ้างถึงจาก: arusgroup ใน 27 เมษายน 2012, 13:23:33
ขอตอบคำถามก่อน
อ้างถึงจาก: anatasia ใน 27 เมษายน 2012, 11:37:53
อ้างถึงจาก: dollar ใน 27 เมษายน 2012, 11:07:50
ขอสอบถามหน่อยครับ
เวลาผมทำ ตรง nav มันจะขึ้นเป็นตัว กลมๆ หน้าหัวข้อ home about พวกเนี้ยครับ ผมจะเอาออกยังไงครับ
ตรง <ul> ให้ใส่ <ul style="list-style:none">
แนะนำให้ใส่ใน css นะครับ จะดีกว่า เพราะการใส่ <ul style="list-style:none">ลงไปเลยเวลาเราจะแก้หรือใช้จะทำยากครับ
แก้ css นี่แก้ตรงส่วนไหนครับ :wanwan017:
ตามนี้เลยใส่ใน css เลยครับ
ul { list-style: none; }
แล้วเอา<ul style="list-style:none">ออกให้เหลือแต่ <ul> เฉยๆ ครับผม
ขอต่อตอนที่ 3.6 ครับ :-[
รูปใหญ่นะครับเลื่อนไปทางขวาเพื่อดูไห้เต็มๆ ครับ
ส่วนนี้เป็นส่วนที่ยากสำหรับมือใหม่ครับ
Slider
ก่อนอื่นผมแก้ html นิดหน่อยครับ
<!-- slider start -->
<div id="slider">
<div id="slides">
<div class="slides_container">
<div class="slide">
<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="slide">
<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>
<img src="img/boder.png" alt="Example Frame" id="frame">
</div>
<!-- slider end -->
แล้วเพิ่ม css ตามนี้เข้าไปครับ
/*----------------------------------------------*/
/* slider */
/*----------------------------------------------*/
#slider {
}
#slides {
}
#frame {
}
/* Slides container */
.slides_container {
}
/* Each slide */
.slides_container div.slide {
}
/*Next/prev buttons*/
#slides .next,#slides .prev {
}
#slides .next {
}
/* Pagination */
.pagination {
}
.pagination li {
}
.pagination li a {
}
.pagination li.current a {
}
/* Caption */
.caption {
z-index:500;
position:absolute;
bottom:-35px;
left:0;
height:64px;
padding:5px 32px 0 40px;
background:#000;
background:rgba(0,0,0,.5);
width:836px;
color:#fff;
text-shadow:none;
}
.caption h1 {
}
.caption p {
}
หลังจากแก้ htmlและ css แล้วจะได้หน้าตาแบบนี้ครับผม
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ603484_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ603484.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ603484)
Thanks: ฝากรูป (http://www.picza.net)
เรามาเพิ่มที่ละจุดนะครับ
ใน#slider
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ533978_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ533978.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ533978)
Thanks: ฝากรูป (http://www.picza.net)
ต่อด้วย#slides
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ374866_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ374866.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ374866)
Thanks: ฝากรูป (http://www.picza.net)
แล้วก็เพิ่ม classเข้าไปใน.slides_container
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ622832_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ622832.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ622832)
Thanks: ฝากรูป (http://www.picza.net)
และตามด้วยข้อความบนรูปครับ
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ538077_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ538077.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ538077)
Thanks: ฝากรูป (http://www.picza.net)
ขยับปุ่มอีกนิดครับผม
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ527044_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ527044.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ527044)
Thanks: ฝากรูป (http://www.picza.net)
เอาให้มันตรงกันครับ
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ363960_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ363960.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ363960)
Thanks: ฝากรูป (http://www.picza.net)
แล้วก็จัดรูปแบบของปุ่มที่แสดงว่าอยู่ตรงsliderไหนแล้วครับ
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ366205_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ366205.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ366205)
Thanks: ฝากรูป (http://www.picza.net)
เพิ่มกรอบเข้าไปอีก 1 อันเพื่อแก้ไขส่วนที่มันยืดออกตอนเปรี่ยนรูปครับ
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ378726_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ378726.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ378726)
Thanks: ฝากรูป (http://www.picza.net)
จะได้ css ออกมาเป็นแบบนี้ครับ
/*----------------------------------------------*/
/* slider */
/*----------------------------------------------*/
#slider {
margin: 0 auto;
position: relative;
z-index: 0;
background: url(img/sliderbg.png) #F7F7F7 center no-repeat;
height: 390px;
padding-bottom: 30px;
background-position-y: 5px;
}
#slides {
position: relative;
left: 4px;
z-index: 100;
width: 980px;
margin: 0 auto;
}
#frame {
position: absolute;
z-index: 100;
top: 6px;
left: 366px;
}
/* Slides container */
.slides_container {
overflow: hidden;
margin: 0 auto;
width: 908px;
padding: 26px 31px 0 24px;
}
/* Each slide */
.slides_container div.slide {
width:908px;
height:337px;
display:block;
}
/*Next/prev buttons*/
#slides .next,#slides .prev {
position: absolute;
top: 165px;
left: -28px;
display: block;
z-index: 101;
}
#slides .next {
left: 974px;
}
/* Pagination */
.pagination {
margin: 7px auto 0;
width: 100px;
}
.pagination li {
float:left;
margin:0 1px;
list-style:none;
}
.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(img/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}
.pagination li.current a {
background-position:0 -12px;
}
/* Caption */
.caption {
z-index:500;
position:absolute;
bottom:-35px;
left:0;
height:64px;
padding:5px 32px 0 40px;
background:#000;
background:rgba(0,0,0,.5);
width:836px;
color:#fff;
text-shadow:none;
}
.caption h1 {
font-size: 16px;
font-weight: bold;
padding-top: 7px;
}
.caption p {
font-size: 11px
}
เราก็จะได้หน้าตาแบบนี้ครับ
(http://www.picza.net/save/20120427vvIdvTEdZIdOZ288781_sv1/pic/2012_04_27-042-20120427vvIdvTEdZIdOZ288781.png) (http://www.picza.net/show.php?id=20120427vvIdvTEdZIdOZ288781)
Thanks: ฝากรูป (http://www.picza.net)
เรียบร้อยแล้วครับกับ Slider
ที่นี้เราก็จะเหลือแต่ส่วนของ content กับ footer ครับผม
ขอบคุณสำหรับความรู้ครับ + 1
(https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/306281_220346851413661_100003150440352_395341_266717967_n.jpg)
พอใช้ได้รึป่าวครับ
กระทู้ดีมากๆครับ เพิ่งเข้ามาอ่าน :wanwan017:
อ้างถึงจาก: dollar ใน 27 เมษายน 2012, 16:41:13
(https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/306281_220346851413661_100003150440352_395341_266717967_n.jpg)
พอใช้ได้รึป่าวครับ
โดยรวมโอเคครับ
น่าจะเพิ่ม
#header li:first-child {
background:none;
}
เข้าไปที่css นะครับ ขีดข้างหน้า home จะหายไปครับผมน่าจะดูดีกว่านี้ครับ :wanwan003:
ลองดูของผมครับ ที่
http://arus-group.com/4lief/
ต่อให้จบนะครับ ติดตามอยู่ :wanwan020:
เริ่มเห็นภาพชัดขึ้นเรื่อยๆ แล้ว
อ้างถึงจาก: Banyoung ใน 27 เมษายน 2012, 17:10:00
ต่อให้จบนะครับ ติดตามอยู่ :wanwan020:
เริ่มเห็นภาพชัดขึ้นเรื่อยๆ แล้ว
ขอมาต่อพรุ่งนี้นะครับ จะต่อให้จบเลยครับผม พอดีวันนี้มีเรียน wall street ครับ :'(
มีประโยชน์มากครับ +1
ขอบคุณมากครับ ขอถามนิดครับใช้เวลาเท่าไหร่ตั้งแต่ต้นเลยการออกแบบรวมทั้งตัดธีมนี้ครับ
อ้างถึงจาก: peam1234 ใน 27 เมษายน 2012, 23:21:23
ขอบคุณมากครับ ขอถามนิดครับใช้เวลาเท่าไหร่ตั้งแต่ต้นเลยการออกแบบรวมทั้งตัดธีมนี้ครับ
ความจริงถ้าทำเต็มที่ ไม่เกิน 1 วันครับ แต่อันนี้ค่อยๆทำให้ดูเลยนาน บวกกับทำงานอื่นด้วยเลยช้าเข้าไปอีกครับผม
ต่อตอนสุดท้ายครับ 3.7 ครับผม
ก่อนอื่นเราใส่ css ตามนี้ลงไปครับผม
/*----------------------------------------------*/
/* container */
/*----------------------------------------------*/
#container {
}
#container .col1 ,#container .col2 ,#container .col3 {
}
#container .col3 {
}
#container p {
}
#container h1 {
}
.more a {
}
แล้วเราก็มาเริ่มแก้ตามนี้เลยครับ
ตั้งค่าต่างๆของ container
(http://www.picza.net/save/20120428vvIdvTEdZTdOP273483_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP273483.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP273483)
Thanks: ฝากรูป (http://www.picza.net)
ตั้งค่าคอลั่ม
(http://www.picza.net/save/20120428vvIdvTEdZTdOP322685_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP322685.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP322685)
Thanks: ฝากรูป (http://www.picza.net)
แก้ระยะของคอลัมที่ 3
(http://www.picza.net/save/20120428vvIdvTEdZTdOP357712_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP357712.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP357712)
Thanks: ฝากรูป (http://www.picza.net)
แก้สีและความสูงของ H1
(http://www.picza.net/save/20120428vvIdvTEdZTdOP241500_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP241500.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP241500)
Thanks: ฝากรูป (http://www.picza.net)
แก้สีและขนาดอักษรของP
(http://www.picza.net/save/20120428vvIdvTEdZTdOP279142_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP279142.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP279142)
Thanks: ฝากรูป (http://www.picza.net)
แก้ read more ให้เป็นตาม ดีไซน์
(http://www.picza.net/save/20120428vvIdvTEdZTdOP358296_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP358296.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP358296)
Thanks: ฝากรูป (http://www.picza.net)
เส็จแล้วครับในส่วนของ container เราก็จะได้code แบบนี้ออกมาครับ
/*----------------------------------------------*/
/* container */
/*----------------------------------------------*/
#container {
width: 980px;
margin: 0 auto;
padding-top: 36px;
position: relative;
height: 305px;
}
#container .col1 ,#container .col2 ,#container .col3 {
float: left;
width: 290px;
padding-right: 45px;
}
#container .col3 {
padding-right: 0px
}
#container p {
font-size: 12px;
color: #444;
}
#container h1 {
font-size: 16px;
padding-top: 8px;
color: #444444;
}
.more a {
color: #1288CA;
text-decoration: none;
padding-bottom: 20px;
font-weight: bold;
float: right;
padding-top: 8px;
}
จากนั้นเราก็มาต่อในส่วนสุดท้ายครับคือfooter
สำหรับ footer นั้นจะแบ่งเป็น2 ส่วนนะครับ คื่อส่วน ของ bar และ คอลั้ม ผมจะเริ่มทำในส่วนของbar ก่อนครับ
ก่อนอื่นเราก็ใส่ css เข้าไปตามนี้ครับ
/*----------------------------------------------*/
/* footer */
/*----------------------------------------------*/
#footer {
}
/* footer bar */
#footer_bar {
}
#footer_bar .social{
}
#footer_bar .social img{
}
#footer_bar .footer-text{
}
.footer-text a {
}
.footer-text p {
}
หน้าตาตอนนี้จะเป็นแบบนี้นะครับ
(http://www.picza.net/save/20120428vvIdvTEdZTdOP212255_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP212255.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP212255)
Thanks: ฝากรูป (http://www.picza.net)
เราก็เริ่มจากการใส่ background ครับ
(http://www.picza.net/save/20120428vvIdvTEdZTdOP108306_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP108306.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP108306)
Thanks: ฝากรูป (http://www.picza.net)
ตามด้วยการตั้งค่าเส้น ด้านล่าง และการจัดรูปแบบของโครง
(http://www.picza.net/save/20120428vvIdvTEdZTdOP125698_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP125698.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP125698)
Thanks: ฝากรูป (http://www.picza.net)
จัดรูปแบบของsocial network logo
(http://www.picza.net/save/20120428vvIdvTEdZTdOP125424_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP125424.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP125424)
Thanks: ฝากรูป (http://www.picza.net)
เพิ่มระยะห่างของlogo
(http://www.picza.net/save/20120428vvIdvTEdZTdOP113484_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP113484.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP113484)
Thanks: ฝากรูป (http://www.picza.net)
จัดรูปแบบตัวหนังสือด้านขวา
(http://www.picza.net/save/20120428vvIdvTEdZTdOP96525_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP96525.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP96525)
Thanks: ฝากรูป (http://www.picza.net)
(http://www.picza.net/save/20120428vvIdvTEdZTdOP135967_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP135967.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP135967)
Thanks: ฝากรูป (http://www.picza.net)
cssจะเป็นแบบนี้ครับ
/*----------------------------------------------*/
/* footer */
/*----------------------------------------------*/
#footer {
position: relative;
background-color: #F7F7F7;
}
/* footer bar */
#footer_bar {
width: 980px;
margin: 0 auto;
background: url(img/footer-line.png) repeat-x center;
background-position-y: 61px;
height: 62px;
}
#footer_bar .social{
padding-top: 8px;
padding-bottom: 12px;
float: left;
}
#footer_bar .social img{
padding-right: 20px;
}
#footer_bar .footer-text{
padding-top: 20px;
}
.footer-text a {
color: #1288CA;
}
.footer-text p {
color: #959595;
font-size: 12px;
text-decoration: none;
padding-bottom: 20px;
float: right;
padding-top: 8px;
}
ต่อมาเราก็จะจัดการในส่วนสุดท้ายคือ คอลัม footer ครับ
เพิ่มส่วนนี้เข้าไปที่ css
/* footer col */
#footer_col {
}
#footer_col .col1,#footer_col .col2,#footer_col .col3,#footer_col .col4 {
}
#footer_col .col4 {
}
#footer_col h1 {
}
#footer_col li {
}
#footer_col a {
}
#footer_col p {
}
ต่อมาเราก็มาเริ่มดพิ่มเข้าไปที่ละขั้นนะครับ
เริ่มต้นด้วยการตั้งค่าความสูงและรูปแบบของคอลัมครับ ครับผม
(http://www.picza.net/save/20120428vvIdvTEdZTdOP148661_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP148661.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP148661)
Thanks: ฝากรูป (http://www.picza.net)
ต่อด้วยการตั้งขนาดและการเรียงของcol ครับ
(http://www.picza.net/save/20120428vvIdvTEdZTdOP142922_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP142922.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP142922)
Thanks: ฝากรูป (http://www.picza.net)
แก้ในช่องที่ 4 ครับ
(http://www.picza.net/save/20120428vvIdvTEdZTdOP122738_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP122738.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP122738)
Thanks: ฝากรูป (http://www.picza.net)
แล้วต่อจากนั้นก็แก้ระยะความสูงของ il
(http://www.picza.net/save/20120428vvIdvTEdZTdOP122551_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP122551.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP122551)
Thanks: ฝากรูป (http://www.picza.net)
แก้สีของlink
(http://www.picza.net/save/20120428vvIdvTEdZTdOP124590_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP124590.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP124590)
Thanks: ฝากรูป (http://www.picza.net)
ตามด้วยสีตัวอักษร tag p
(http://www.picza.net/save/20120428vvIdvTEdZTdOP117484_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP117484.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP117484)
Thanks: ฝากรูป (http://www.picza.net)
และสุดท้ายก็จัดการ h1
(http://www.picza.net/save/20120428vvIdvTEdZTdOP128696_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP128696.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP128696)
Thanks: ฝากรูป (http://www.picza.net)
เป็นอันเส็จพิธี :wanwan020:
เราก็จะได้css ตามนี้ครับผม
/* footer col */
#footer_col {
width: 980px;
margin: 0 auto;
position: relative;
height: 180px;
}
#footer_col .col1,#footer_col .col2,#footer_col .col3,#footer_col .col4 {
float: left;
width: 200px;
padding-top: 20px;
padding-right: 60px;
}
#footer_col .col4 {
padding-right: 0px;
}
#footer_col h1 {
font-weight: bold;
color: #707070;
font-size: 15px;
padding-bottom: 12px;
}
#footer_col li {
padding-bottom: 4px;
}
#footer_col a {
color: #1288CA;
text-decoration: none;
padding-bottom: 20px;
font-size: 12px;
}
#footer_col p {
color: #898989;
font-size: 12px;
}
แล้วหน้าตาก็จะออกมาเป็นแบบนี้ครับ
(http://www.picza.net/save/20120428vvIdvTEdZTdOP696842_sv1/pic/2012_04_28-042-20120428vvIdvTEdZTdOP696842.png) (http://www.picza.net/show.php?id=20120428vvIdvTEdZTdOP696842)
Thanks: ฝากรูป (http://www.picza.net)
จบแล้วครับสำหรับการทำ PSD ให้เป็น Html เพื่อนๆลองทำดูนะครับไม่ยากถ้าเราลองทำเอง
ขอบคุณครับ อธิบายทีละสเตปแบบนี้ต้องเอาไปทำบ้างแล้ว
จะมีต่อจากนี้หรือป่าวครับ แบบทำอย่างไรให้เป็น theme wordpress น่ะครับ
จะได้รอเรียนต่อไปเลย อิอิ
:wanwan019:
อ้างถึงจาก: dollar ใน 28 เมษายน 2012, 16:03:50
จะมีต่อจากนี้หรือป่าวครับ แบบทำอย่างไรให้เป็น theme wordpress น่ะครับ
จะได้รอเรียนต่อไปเลย อิอิ
:wanwan019:
มีครับ แต่กำลังศึกษาอยู่ครับเดี่ยวได้แล้วมา บอกแน่ๆ ครับผม
ขอบคุณค่ะ ขอ bookmark ไว้ทยอยอ่านวันหลัง
:wanwan020:
เพื่อนๆคนใหนทำเส็จแล้วก็เอามาโชว์ได้นะฮาฟ :-[
โอ้วขอบคุณครับเข้ามาเก็บความรู้
<img src="images\logo.jpg">
ทำไมผมใส่แบบนี้แล้วรูปไม่ขึ้นอ่ะครับ
แต่พอ เอารูปไปฝากไว้กับเวปแล้วใส่มันขึ้น
ต้องแก้ตรงไหนหรอครับ
<img src="http://image.ohozaa.com/i/2be/xxxxx.JPG">
แบบนี้มันขึ้นอ่ะครับ
อ้างถึงจาก: flukezaa ใน 30 พฤษภาคม 2012, 15:13:11
<img src="images\logo.jpg">
ทำไมผมใส่แบบนี้แล้วรูปไม่ขึ้นอ่ะครับ
แต่พอ เอารูปไปฝากไว้กับเวปแล้วใส่มันขึ้น
ต้องแก้ตรงไหนหรอครับ
<img src="http://image.ohozaa.com/i/2be/xxxxx.JPG">
แบบนี้มันขึ้นอ่ะครับ
ลองเปลี่ยนจาก \ เป็น / ดูครับ พวก path กับเครื่องหมายต่างๆ ต้องเช็คให้ถูกต้อง
อ้างถึงจาก: chui761 ใน 30 พฤษภาคม 2012, 15:15:52
อ้างถึงจาก: flukezaa ใน 30 พฤษภาคม 2012, 15:13:11
<img src="images\logo.jpg">
ทำไมผมใส่แบบนี้แล้วรูปไม่ขึ้นอ่ะครับ
แต่พอ เอารูปไปฝากไว้กับเวปแล้วใส่มันขึ้น
ต้องแก้ตรงไหนหรอครับ
<img src="http://image.ohozaa.com/i/2be/xxxxx.JPG">
แบบนี้มันขึ้นอ่ะครับ
ลองเปลี่ยนจาก \ เป็น / ดูครับ พวก path กับเครื่องหมายต่างๆ ต้องเช็คให้ถูกต้อง
ลองแล้วมันไม่ขึ้นอยู่ดีอ่ะครับ
อ้างถึงจาก: flukezaa ใน 30 พฤษภาคม 2012, 15:18:47
อ้างถึงจาก: chui761 ใน 30 พฤษภาคม 2012, 15:15:52
อ้างถึงจาก: flukezaa ใน 30 พฤษภาคม 2012, 15:13:11
<img src="images\logo.jpg">
ทำไมผมใส่แบบนี้แล้วรูปไม่ขึ้นอ่ะครับ
แต่พอ เอารูปไปฝากไว้กับเวปแล้วใส่มันขึ้น
ต้องแก้ตรงไหนหรอครับ
<img src="http://image.ohozaa.com/i/2be/xxxxx.JPG">
แบบนี้มันขึ้นอ่ะครับ
ลองเปลี่ยนจาก \ เป็น / ดูครับ พวก path กับเครื่องหมายต่างๆ ต้องเช็คให้ถูกต้อง
ลองแล้วมันไม่ขึ้นอยู่ดีอ่ะครับ
แสดงว่า path ไม่ถูกต้อง อาจจะต้องดูว่ามีไฟล์รูป logo.jpg อยู่ในโฟลเดอร์ images ของไฟล์ theme ไหม
โฟลเดอร์ที่เก็บรูปชื่อ images หรือเปล่า หรือ image หรือ img เฉยๆ ต้องดูโครงสร้างที่ทำไว้
อันที่ฝากไฟล์มันแสดง เพราะนั่นคือ path หรือการอ้างอิงตำแหน่งไฟล์มันถูกต้องแล้วครับ
ขอบคุณมากๆ
อ้างถึงจาก: chui761 ใน 30 พฤษภาคม 2012, 18:29:44
อ้างถึงจาก: flukezaa ใน 30 พฤษภาคม 2012, 15:18:47
อ้างถึงจาก: chui761 ใน 30 พฤษภาคม 2012, 15:15:52
อ้างถึงจาก: flukezaa ใน 30 พฤษภาคม 2012, 15:13:11
<img src="images\logo.jpg">
ทำไมผมใส่แบบนี้แล้วรูปไม่ขึ้นอ่ะครับ
แต่พอ เอารูปไปฝากไว้กับเวปแล้วใส่มันขึ้น
ต้องแก้ตรงไหนหรอครับ
<img src="http://image.ohozaa.com/i/2be/xxxxx.JPG">
แบบนี้มันขึ้นอ่ะครับ
ลองเปลี่ยนจาก \ เป็น / ดูครับ พวก path กับเครื่องหมายต่างๆ ต้องเช็คให้ถูกต้อง
ลองแล้วมันไม่ขึ้นอยู่ดีอ่ะครับ
แสดงว่า path ไม่ถูกต้อง อาจจะต้องดูว่ามีไฟล์รูป logo.jpg อยู่ในโฟลเดอร์ images ของไฟล์ theme ไหม
โฟลเดอร์ที่เก็บรูปชื่อ images หรือเปล่า หรือ image หรือ img เฉยๆ ต้องดูโครงสร้างที่ทำไว้
อันที่ฝากไฟล์มันแสดง เพราะนั่นคือ path หรือการอ้างอิงตำแหน่งไฟล์มันถูกต้องแล้วครับ
ขอบคุนครับ
ได้แล้วครับ
ใส่แบบนี้ wp-content\themes\ajabahey\images\logo.jpg
+1 ให้ครับ
ขอบคุณครับ :wanwan019:
อธิบายได้ละเอียดมากๆ เลยค่ะ สเต็ป บาย สเต็ป จริงๆ ขอบคุณค่ะ :wanwan017:
อธิบายละเอียดยิบเลย ขอบคุณครับ
เจ๋งมากมายข้อมูลเป็นประโยชน์มากเลยครับ
ขอบคุณมากๆเลยครับ :wanwan017: :wanwan017: :wanwan017:
แจ่มมากเลยครับ :wanwan017:
เยี่ยมครับ สอนตั้งแต่พื้นฐานเลย :wanwan008: :wanwan008:
ขอบคุณครับ +1 ก่อนดูเลยครับ :wanwan003: :wanwan003:
สุดยอดครับ ขอบคุณครับ
ขอบคุณมากคับ
ว้าวววว
สุดยอดครับ
ขอบคุณมากๆ เลยครับ
สุดยอดๆๆๆๆๆ คร๊าบๆๆๆๆๆๆ :wanwan003:
เยี่ยมยอดกระเทียมดองครับ
เสียดายรูปหายไปหมด
มี Blog ส่วนตัวไหมครับจะตามไปอ่านครับ
ถ้าสนใจจะลองทำธีม Crowdfunding ผมจะรอซื้อบอกด้วยนะครับ http://www.thaiseoboard.com/index.php/topic,321589.20.html
เสียดายรูปหาย :wanwan004:
อ้างถึงจาก: arusgroup ใน 25 เมษายน 2012, 16:47:36
[แชร์แบบบ้านๆ] ตอนที่ 1 เรามาทำ wordpress theme ขายกัน (http://www.thaiseoboard.com/index.php/topic,267068.0.html)
[แชร์แบบบ้านๆ] ตอนที่ 2 ออกPSD Layout ยังไงดีนะ (http://www.thaiseoboard.com/index.php/topic,267091.0.html)
[แชร์แบบบ้านๆ] ตอนที่ 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
หลังจากโดนเรียกร้องมาพอสมควรผมก็จัดสอนให้ตามคำขอ :wanwan020:
กับการตัด HTML จาก psd แบบ step by step แต่ผมจะค่อยๆ เขียนนะครับอย่าดาม่าผมนะผมเวลาน้อย :P
เอาละคราวที่แล้วเราได้รู้เรื่องการออกแบบ PSD กันไปแล้ว ไม่รู้ว่าอ่านกันรู้เรื่องหรือป่าวหรือถ้าใครยังไม่ได้อ่านวิธีทำก็แนะนำให้ไปอ่านก่อนได้ที่ตอนที่ 2 นะครับเอาละมาเริ่มกันเลยครับไม่ยากแล้วก็ไม่ง่ายครับ
หลังจากที่เราได้ Psd แล้วตามแบบนะครับ
(http://www.picza.net/save/20120425vvxdEOdvvvdxl621343_sv1/thumb/2012_04_25-042-20120425vvxdEOdvvvdxl621343.jpg) (http://www.picza.net/show.php?id=20120425vvxdEOdvvvdxl621343)
เราก็มาเข้าใจก่อนว่ามีส่วนไหนใน theme ของเราบ้าง โดยของผมแบ่งตามนี้ครับ
(http://www.picza.net/save/20120425vvxdEOdvvvdxl373623_sv1/pic/2012_04_25-042-20120425vvxdEOdvvvdxl373623.png) (http://www.picza.net/show.php?id=20120425vvxdEOdvvvdxl373623)
ของใครจะแบ่งอย่างไรก็แบ่ง ครับแล้วแต่ครับผม
เมื่อเราแบ่งได้แล้วเราก็จะมาเริ่มกันครับ
เปิด text editor หรือโปรแกลม ที่ใช้ทำไฟร์ html ของท่านขึ้นมา ตามถนัดเลยครับผม
สร้างไฟร์ ชื่อตามนี้ครับ
index.html
styles.css
แฟ้ม
img
อย่าลืมตั้ง ค่าเป็น utf-8 นะครับ
จะได้ตามนี้นะครับ
(http://www.picza.net/save/20120425vvxdEOdvvvdxl19391_sv1/pic/2012_04_25-042-20120425vvxdEOdvvvdxl19391.png) (http://www.picza.net/show.php?id=20120425vvxdEOdvvvdxl19391)
เอาละเปิด 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>
เราใส่ส่วนนี้เพื่อให้เราไม่งงนะครับ แยกออกเป็นส่วนๆ จะได้ไม่งงเวลาจะดึงมาใช้ก็ง่ายครับ
ถ้าทำถูกจะออกมาเป็นแบบนี้ครับ
(http://www.picza.net/save/20120425vvxdEOdvvvdxl43425_sv1/pic/2012_04_25-042-20120425vvxdEOdvvvdxl43425.png) (http://www.picza.net/show.php?id=20120425vvxdEOdvvvdxl43425)
Thanks: ฝากรูป (http://www.picza.net)
ต่อตอนที่ 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
เก็บค่ะ
ขอบคุณครับ :wanwan020: