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

เริ่มโดย arusgroup, 25 เมษายน 2012, 16:47:36

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า 1 2 3 4 5
การกระทำของผู้ใช้

unseennetwork

#20
26 เมษายน 2012, 13:47:48

+1 ให้ครับ เสียดาย + ได้ทีละ 1

:wanwan017:

obi001

#21
26 เมษายน 2012, 13:59:32
ขอบคุณครับ
ขอให้เงินทองจงอยุ่กับท่าน

saikanojo

#22
26 เมษายน 2012, 14:11:33
เยี่ยมไปเลยครับ  :wanwan017:

arusgroup

#23
26 เมษายน 2012, 15:26:44 แก้ไขล่าสุด: 27 เมษายน 2012, 15:15:09 โดย arusgroup
รูปใหญ่นะครับเลื่อนไปทางขวาเพื่อดูไห้เต็มๆ ครับ
ผมลืมเอาขั้นตอนการลง 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 แล้วครับ

Thanks:   ฝากรูป

ก็จะได้ 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 นะครับ
ก่อนอื่นก็วัดรูปแล้วครอป กอปปี้ไว้ครับ

Thanks:   ฝากรูป
กด crt N สร้างเอกสารใหม่ขึ้นมา

Thanks:   ฝากรูป
แล้วเราก็กดวางที่เรากอปมา

Thanks:   ฝากรูป
ปิด background ออก

Thanks:   ฝากรูป
แล้วก็save เป็น png ที่ไฟร์ img นะครับ

Thanks:   ฝากรูป


เราก็จะทำอย่างนี้กับทุกๆรูปที่เราลงไปใน Html นะครับเราก็จะใด้หน้า html ออกมาเป็นแบบนี้ครับ

Thanks:   ฝากรูป


เป็น Html แล้วครับที่นี้ ต่อมาเราจะต้องมาทำในส่วนของ css ครับ

aoba500

#24
26 เมษายน 2012, 15:27:49
ติดตามผลงานอยู่ครับ   :wanwan017:

jaideeplazadotcom

#25
26 เมษายน 2012, 15:47:25
+ให้อย่างแรงเลยครับ :wanwan019:

arusgroup

#26
26 เมษายน 2012, 17:38:37 แก้ไขล่าสุด: 27 เมษายน 2012, 13:40:42 โดย arusgroup
มาต่อตอนที่ 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 จะมีตัวช่วยเวลาเราพิมพ์จะได้ค่าที่ถูกครับ

Thanks:   ฝากรูป
หลังจากนั้นเราก็พิมพ์ตามนี้ครับ

Thanks:   ฝากรูป
อย่าลืมไปทำรูป bg ด้วยนะครับ
แล้วเราก็จะได้ตามนี้ครับ

Thanks:   ฝากรูป

หลังจากนั้นเราก็กอปโคทที่เราแก้บน chrome มาลงที่ css ของเราตามid และ class ที่แก้ครับ
ก็จะได้code cssแบบนี้ครับ
โค้ด เลือก
#header {
position: relative;
margin: 0 auto;
height: 118px;
background: url(img/headerbg.png);
}
เราก็มามำไล่ๆกันไปที่ละตัวนะครับ
ตอนนี้ผมจะขอลงรูปแค่ตอน ที่แก้บน chrome นะครับจะได้ไม่ยาวมากทำคล้ายกันหมดครับผม

Thanks:   ฝากรูป
แก้แล้วกอปไปลง css เรื่อยๆครับ

Thanks:   ฝากรูป

แล้วเราก็จะได้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;
}

หน้าตาก็ประมาณนี้ครับผม

Thanks:   ฝากรูป

ไว้มาต่อพรุ่งนี้ครับ ไปเรียนภาษาอังกฤษก่อนครับผม
เพื่อนๆที่ไม่รู้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 เข้าไปครับเพื่อให้แสดงผลตามที่สั่งครับ

WPDSign

#27
26 เมษายน 2012, 18:04:34
มาบวกครับ ขอบคุณสำหรับน้ำใจ  :-[
สร้างบ้าน Modern [direct=https://casa-concept1.com/]แบบบ้านโมเดิร์น[/direct] มาแรง
» ต้องการสร้างบ้านดูแบบบ้านสวยๆ [direct=http://www.architect-bkk.com/แบบบ้านสองชั้น]แบบบ้านสองชั้น[/direct] ทุกสไลต์บริการ[direct=http://www.ideaican.com/]รับสร้างบ้าน[/direct] ใครฝันอย่างสร้างบ้านสไตล์รีสอร์ท มี[direct=https://แบบบ้านสไตล์รีสอร์ท.blogspot.com]แบบบ้านสไตล์รีสอร์ท[/direct]พร้อมก่อสร้าง ลงประกาศขายบ้านที่ [direct=http://www.classified108.com/]ลงประกาศ[/direct]

ming0189

#28
26 เมษายน 2012, 18:08:22
เยี่ยมมากเลยครับ

wizmagna

#29
26 เมษายน 2012, 18:12:34
เยี่ยมเลยครับ ขอบคุณครับ
[direct=http://www.vinhost.com]Windows Hosting :: ครบวงจร เปิดบริการมากว่า 10 ปี [/direct]

DeLitTo

#30
26 เมษายน 2012, 19:58:38
ขอบคุณครับ หาวิธีนี้มานานละ  :-[
รับบออกแบบเว็บไซต์ , โลโก้ ราคาถูก

LikeJang

#31
26 เมษายน 2012, 20:02:56
ติดตามๆ

:wanwan011:
จำหน่ายขาย[direct=http://meshoesshop.lnwshop.com/]รองเท้าแฟชั่น[/direct] รองเท้าแตะ รองเท้าผู็หญิง หลากหลายสไตล์ ราคาเบาๆ

nv7876

#32
26 เมษายน 2012, 20:10:04
ขอบคุณไว้ก่อนยัง บวกไม่ได้ :wanwan017:
[direct=http://www.cloudvpsforex.com] vpsforex [/direct]
[direct=http://www.cloudvpsforex.com] vps forex [/direct]
[direct=http://www.cloudvpsforex.com] forexvps [/direct]
[direct=http://www.cloudvpsforex.com] vpsfree [/direct]
[direct=http://www.cloudvpsforex.com] vps run ea [/direct]

จ่ายล่วงหน้า 6 เดือน ใช้ได้ 1 ปี

รับสมัคร Affiliate VPS รับค่าคอม 40%

Bajita

#33
26 เมษายน 2012, 20:23:46
เยี่ยมไปเลยครับ  :wanwan017:

Straw Hat Pirates

#34
26 เมษายน 2012, 20:24:50
ขอบคุณที่แชร์ครับ

montherstss

#35
26 เมษายน 2012, 21:17:47
แจ่ม จ๊ะเด๊ม.. แจ่มหว้า.... :o :o
[direct=http://support.hostneverdie.com/aff.php?aff=450][/direct]
[direct=http://www.dfashionkorea.com]กระเป๋าแฟชั่น[/direct][direct=http://www.dfashionkorea.com]กระเป๋าแฟชั่นเกาหลี[/direct][direct=http://www.dfashionkorea.com]กระเป๋าราคาถูก[/direct][direct=http://www.dfashionkorea.blogspot.com]กระเป๋าแฟชั่น[/direct]

Banyoung

#36
27 เมษายน 2012, 09:06:32
+54  :wanwan008: ครับ มาปูเสื่อรอ แต่สงสัยว่าเราใช้ Dreamwaver ทำ html แทนได้ไม้

arusgroup

#37
27 เมษายน 2012, 09:13:50
อ้างถึงจาก: Banyoung ใน 27 เมษายน 2012, 09:06:32
+54  :wanwan008: ครับ มาปูเสื่อรอ แต่สงสัยว่าเราใช้ Dreamwaver ทำ html แทนได้ไม้

ได้ครับแล้วแต่ถนัดเลยครับ

testsoft

#38
27 เมษายน 2012, 09:32:14
ขอบคุณคร้าบ  :wanwan017:
[direct=http://wongwienyai.co.th]เช่ารถเครน[/direct]
[direct=https://pr-area.com]ฝากข่าวประชาสัมพันธ์ฟรี!!![/direct]
[direct=http://www.sunmoon.co.th]ทัวร์ต่างประเทศ[/direct]
[direct=https://condook.com]บริการแม่บ้านทำความสะอาด[/direct]
[direct=http://www.khanpaklive.com]คันปากไลฟ์[/direct]

dollar

#39
27 เมษายน 2012, 11:07:50
ขอสอบถามหน่อยครับ

เวลาผมทำ ตรง nav มันจะขึ้นเป็นตัว กลมๆ หน้าหัวข้อ home  about พวกเนี้ยครับ ผมจะเอาออกยังไงครับ
[direct=http://www.optionforcar.com/][..][/direct]
พิมพ์
ขึ้น หน้า 1 2 3 4 5
การกระทำของผู้ใช้