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

[anatasia]

ขอสอบถามหน่อยครับ

เวลาผมทำ ตรง nav มันจะขึ้นเป็นตัว กลมๆ หน้าหัวข้อ home  about พวกเนี้ยครับ ผมจะเอาออกยังไงครับ

ตรง <ul>     ให้ใส่ <ul style="list-style:none">

[dollar]

ได้ละครับ ขอบคุณครับ 

มารอขั้นตอนต่อไป

[somsri]

ขอบใจจ่ะ 

[arusgroup]

ขอตอบคำถามก่อน

ขอสอบถามหน่อยครับ

เวลาผมทำ ตรง nav มันจะขึ้นเป็นตัว กลมๆ หน้าหัวข้อ home  about พวกเนี้ยครับ ผมจะเอาออกยังไงครับ

ตรง <ul>     ให้ใส่ <ul style="list-style:none">

แนะนำให้ใส่ใน css นะครับ จะดีกว่า เพราะการใส่ <ul style="list-style:none">ลงไปเลยเวลาเราจะแก้หรือใช้จะทำยากครับ

[asnowman]

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

[arusgroup]

ตอนที่ 3.5 guild
รูปใหญ่นะครับเลื่อนไปทางขวาเพื่อดูไห้เต็มๆ ครับ
มาต่อกันครับ ในส่วนของ Guild
ตอนนี้หน้าตาจะเป็นแบบนี้นะครับ

Thanks:   ฝากรูป

เราก็ใส่สีเข้าไปก่อนครับ

Thanks:   ฝากรูป
ต่อมาเราก็มาจัด H1

Thanks:   ฝากรูป
ตามด้วย pครับ

Thanks:   ฝากรูป
และต่อด้วย a ครับผม

Thanks:   ฝากรูป

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


[dollar]

ขอตอบคำถามก่อน

ขอสอบถามหน่อยครับ

เวลาผมทำ ตรง nav มันจะขึ้นเป็นตัว กลมๆ หน้าหัวข้อ home  about พวกเนี้ยครับ ผมจะเอาออกยังไงครับ

ตรง <ul>     ให้ใส่ <ul style="list-style:none">

แนะนำให้ใส่ใน css นะครับ จะดีกว่า เพราะการใส่ <ul style="list-style:none">ลงไปเลยเวลาเราจะแก้หรือใช้จะทำยากครับ

แก้ css นี่แก้ตรงส่วนไหนครับ 

[arusgroup]

ขอตอบคำถามก่อน

ขอสอบถามหน่อยครับ

เวลาผมทำ ตรง nav มันจะขึ้นเป็นตัว กลมๆ หน้าหัวข้อ home  about พวกเนี้ยครับ ผมจะเอาออกยังไงครับ

ตรง <ul>     ให้ใส่ <ul style="list-style:none">

แนะนำให้ใส่ใน css นะครับ จะดีกว่า เพราะการใส่ <ul style="list-style:none">ลงไปเลยเวลาเราจะแก้หรือใช้จะทำยากครับ

แก้ css นี่แก้ตรงส่วนไหนครับ 

ตามนี้เลยใส่ใน css เลยครับ

โค้ด เลือก ขยาย


ul { list-style: none; }

แล้วเอา<ul style="list-style:none">ออกให้เหลือแต่ <ul> เฉยๆ ครับผม

[arusgroup]

ขอต่อตอนที่ 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 แล้วจะได้หน้าตาแบบนี้ครับผม

Thanks:   ฝากรูป

เรามาเพิ่มที่ละจุดนะครับ
ใน#slider

Thanks:   ฝากรูป
ต่อด้วย#slides

Thanks:   ฝากรูป
แล้วก็เพิ่ม classเข้าไปใน.slides_container

Thanks:   ฝากรูป
และตามด้วยข้อความบนรูปครับ

Thanks:   ฝากรูป
ขยับปุ่มอีกนิดครับผม

Thanks:   ฝากรูป
เอาให้มันตรงกันครับ

Thanks:   ฝากรูป
แล้วก็จัดรูปแบบของปุ่มที่แสดงว่าอยู่ตรงsliderไหนแล้วครับ

Thanks:   ฝากรูป
เพิ่มกรอบเข้าไปอีก 1 อันเพื่อแก้ไขส่วนที่มันยืดออกตอนเปรี่ยนรูปครับ

Thanks:   ฝากรูป
จะได้ 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
}

เราก็จะได้หน้าตาแบบนี้ครับ

Thanks:   ฝากรูป

เรียบร้อยแล้วครับกับ Slider
ที่นี้เราก็จะเหลือแต่ส่วนของ content กับ footer ครับผม

[pyai]

ขอบคุณสำหรับความรู้ครับ + 1

[dollar]

พอใช้ได้รึป่าวครับ

[pophonic]

กระทู้ดีมากๆครับ เพิ่งเข้ามาอ่าน

[arusgroup]

พอใช้ได้รึป่าวครับ

โดยรวมโอเคครับ
น่าจะเพิ่ม
#header li:first-child {
   background:none;
}
เข้าไปที่css นะครับ ขีดข้างหน้า home จะหายไปครับผมน่าจะดูดีกว่านี้ครับ

ลองดูของผมครับ ที่
http://arus-group.com/4lief/

[Banyoung]

ต่อให้จบนะครับ ติดตามอยู่ 
เริ่มเห็นภาพชัดขึ้นเรื่อยๆ แล้ว

[arusgroup]

ต่อให้จบนะครับ ติดตามอยู่ 
เริ่มเห็นภาพชัดขึ้นเรื่อยๆ แล้ว

ขอมาต่อพรุ่งนี้นะครับ จะต่อให้จบเลยครับผม พอดีวันนี้มีเรียน wall street ครับ

[imagineverend]

มีประโยชน์มากครับ +1

[peam1234]

ขอบคุณมากครับ ขอถามนิดครับใช้เวลาเท่าไหร่ตั้งแต่ต้นเลยการออกแบบรวมทั้งตัดธีมนี้ครับ

[arusgroup]

ขอบคุณมากครับ ขอถามนิดครับใช้เวลาเท่าไหร่ตั้งแต่ต้นเลยการออกแบบรวมทั้งตัดธีมนี้ครับ

ความจริงถ้าทำเต็มที่ ไม่เกิน 1 วันครับ แต่อันนี้ค่อยๆทำให้ดูเลยนาน บวกกับทำงานอื่นด้วยเลยช้าเข้าไปอีกครับผม

[arusgroup]

ต่อตอนสุดท้ายครับ 3.7 ครับผม
ก่อนอื่นเราใส่ css ตามนี้ลงไปครับผม

โค้ด เลือก ขยาย

/*----------------------------------------------*/
/* container */
/*----------------------------------------------*/

#container {

}
#container .col1 ,#container .col2 ,#container .col3 {

}
#container .col3 {

}
#container p {

}
#container h1 {

}
.more a {

}

แล้วเราก็มาเริ่มแก้ตามนี้เลยครับ

ตั้งค่าต่างๆของ container

Thanks:   ฝากรูป
ตั้งค่าคอลั่ม

Thanks:   ฝากรูป
แก้ระยะของคอลัมที่ 3

Thanks:   ฝากรูป
แก้สีและความสูงของ H1

Thanks:   ฝากรูป
แก้สีและขนาดอักษรของP

Thanks:   ฝากรูป
แก้ read more ให้เป็นตาม ดีไซน์

Thanks:   ฝากรูป
เส็จแล้วครับในส่วนของ 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 {
}

หน้าตาตอนนี้จะเป็นแบบนี้นะครับ

Thanks:   ฝากรูป
เราก็เริ่มจากการใส่ background ครับ

Thanks:   ฝากรูป
ตามด้วยการตั้งค่าเส้น ด้านล่าง และการจัดรูปแบบของโครง

Thanks:   ฝากรูป
จัดรูปแบบของsocial network logo

Thanks:   ฝากรูป
เพิ่มระยะห่างของlogo

Thanks:   ฝากรูป
จัดรูปแบบตัวหนังสือด้านขวา

Thanks:   ฝากรูป

Thanks:   ฝากรูป

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 {
}

ต่อมาเราก็มาเริ่มดพิ่มเข้าไปที่ละขั้นนะครับ
เริ่มต้นด้วยการตั้งค่าความสูงและรูปแบบของคอลัมครับ ครับผม

Thanks:   ฝากรูป
ต่อด้วยการตั้งขนาดและการเรียงของcol ครับ

Thanks:   ฝากรูป
แก้ในช่องที่ 4  ครับ

Thanks:   ฝากรูป
แล้วต่อจากนั้นก็แก้ระยะความสูงของ il

Thanks:   ฝากรูป
แก้สีของlink

Thanks:   ฝากรูป
ตามด้วยสีตัวอักษร tag p

Thanks:   ฝากรูป

และสุดท้ายก็จัดการ h1

Thanks:   ฝากรูป

เป็นอันเส็จพิธี
เราก็จะได้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;
}


แล้วหน้าตาก็จะออกมาเป็นแบบนี้ครับ

Thanks:   ฝากรูป

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

[DarkschneideR]

ขอบคุณครับ อธิบายทีละสเตปแบบนี้ต้องเอาไปทำบ้างแล้ว