ต่อไป »

[tongchimlang]

ผมได้ออกแบบเว็บด้วย Photopshop เสร็จแล้ว
แล้วผมก็ได้ทำการตัดเป็นชิ้นๆ ด้วย Slice Tool
เพื่อเอาไปประกอบเป็นหน้าเว็บเพจ
ใน Deamweaver 8 แต่ผมอยากลองใช้
CSS ในการเขียนเพื่อควบคุมการแสดงผล
ในครั้งนี้ ผมจะวาง Css Layout อย่างไรดี ถ้า
ผมออกแบบหน้าเว็บ ประมาณรูปนี้ครับ

http://pic.free.in.th/id/664a2161b014278155d461c4e602bff9
ช่วยแนะนำด้วยครับว่าจะต้องทำอย่างไร
ขอบคุณครับ
 

ปล.มือใหม่มากๆ
เคยเขียนแต่แบบ Table เวลาย่อขยายหน้าเว็บแล้วมันเพี้ยน
รอยที่ตัดจาก Slice Tool มันแยกออกจากกันครับ

[tongchimlang]

รบกวนด้วยครับ

[mafiary]

ลอง convert ดูครับ

โค๊ด:

http://psd2cssonline.com/

[tongchimlang]

ลอง convert ดูครับ

โค๊ด:

http://psd2cssonline.com/

มันคืออะไรครับ
ขอรายละเอียดเพิ่มเติมด้วยครับ

[Pink.in.th]

จากที่ดูแบบแล้วก็เอาเรื่องอยู่เหมือนกันนะ อิอิ

อย่างแรกต้องแยก Background ใช้ส่วนไหนบ้างรูปอะไรบ้าง
สองแยกแต่ละส่วนออกมา เช่น Head Login เมนูซ้ายขวา ด้านล่าง ปุ่ม บางรูปอาจจะใช้เป็น .png หรือ .gif

เสร็จแล้วสร้าง Layout ด้วย CSS จัดวางแต่ละ Position ให้ได้อย่างในแบบค่ะ
อ่านแล้วถ้าไม่เข้าใจก็ขออภัยด้วยนะค่ะ ^_^  ลองศึกษาเรื่อง CSS ดูค่ะ เมื่อตัดสินใจทำอะไรจริง ๆ จัง ๆ แล้วรับรองว่าสำเร็จชัวร์ค่ะ สู้ ๆ นะค่ะ

 

[O.o!!]

ลองทำตามพวก tutorial ดูก่อนครับ แล้ว idea จะเกิดครับว่าแต่หล่ะส่วนเขาทำกันยังไง

เช่น tutorial พวกนี้ http://designm.ag/resources/converting-psd-to-html/

[kobkung]

อยากจะบอกว่าไม่ว่าแบบไหนผมก็ตัด table ให้ได้ทั้งนั้นล่ะ ส่วนที่มันซ้อนค่อยใช้ layer
แต่บางคนบอกว่ามันดีกับ seo ก็แล้วแต่ แต่เว็บผมก็ติดอันดับ 4 ใน google นะ
ไม่ได้แย้งว่าอย่าใช้ div แต่ table ก็ไหวอยู่เหมือนกัน

เวลา slice จาก photoshop มันจะกำหนด width,height ให้ ขยับยากมาก เพราะมันรวบเป็น table เดียว
trick ง่ายๆ คือ เอารูปไม่ใช้ออก แล้วจับ table ไปวางแทนด้วย width height เดียวกัน ผมลองแล้วอยู่แน่นอน แต่ไม่แนะนำ

ไม่ว่าจะ div จะ table ตอนแยกร่างจาก psd วางแผนเหมือนกัน วางแผนนะไม่ใช่วางโค้ด เพียงแต่ตัวไหนซ้อน ให้ใช้ z-index ช่วย
div มันจะมี position กำหนด ยิ่งถ้าต้อง relative ด้วย โอยมึน ผมไม่ชอบ พวกนี้ไม่ยาก ตัวยากสำหรับ designer ที่เจอคือ
ตัดผิด อะไรคือตัดผิด เวลาโปรแกรมเมอร์เอาไป loop คอลัมน์ยืดตาม แตก เพราะวางมาผิด ไม่ค่อยซ้อน div ซ้อน table ยิ่งพวก dream นะ
เห็นใช้ colspan , rowspan ผิดตลอด เอาง่ายเข้าว่า ทำงานมา 12ปี เจอคนตัดถูกใจแค่ 2 คน 

[rasher]

ลองศึกษา CSS ดีๆครับ และฝึกการใช้ แท็ก DIV ถ้าสามารถทำตัวนี้ออกมาได้สำเร็จตามแบบ ผมว่าก็น่าจะได้ความรู้ CSS เยอะแล้วครับ แต่ถ้าง่ายๆ CSS น้อยๆ ก็ต้องใช้ TABLE ครับ

ลองฝึกการแยกกลุ่ม แบ่งเป็นสัดส่วน งานจะออกมาคุณภาพครับ ส่วนเรื่อง SEO เท่าที่รู้ Googleก็บอกแล้วว่า ควรใช้ แท็ก DIV ส่วนเรื่องภาพเพี้ยนๆ CSS จัดการได้หมดครับ ลองดูครับ

ถ้าติดปัญหายังไงก็ PM สอบถามได้ครับ

สู้ๆครับ

[npdesign]

Div+CSS ทำได้ทุกอย่าง ต่อให้เลย์เอาท์มายากขนาดไหน ถ้าใช้ Div+CSS ได้ และสามารถมองภาพออกได้ว่าจะเขียน Code แบบไหน เพื่ิอให้มัน Cross Browser ได้ก็สบายๆครับ ใช้ประสบการณ์ล้วนๆครับ ถ้าหัดใหม่ๆอาจจะสับสนและปวดหัวกับมันได้ นานไปจะชินเอง 

[klockwork]

สู้ๆครับ
ทำไปเรื่อยๆ ประสบการณ์จะสอนเราเองครับ

http://www.enjoyday.net/webtutorial/css/css_chapter08.html
http://validator.w3.org/

อย่าลืมคิดเรื่อง SEO On-Page ด้วยนะครับ

[Pink.in.th]

ตามข้างบนเลยค่ะ น่าจะเทพ ๆ ทั้งนั้น แต่ถ้าคนตัดเป็นทั้ง Designer และ Programmer นี้มันจะสวดดยวดด มาก ๆ เลยทีเดียวเชียวหละ อิอิ 

[AbuseMan]

ออกแบบผมใช้ตัว  http://960.gs ตลอดอ่ะ

[tongchimlang]

ตอนนี้ก็คือ ผมติดปัญหาตรงที่
เวลาเรา ย่อหรือขยาย  (Ctrl+ หรือ Ctrl-)
หน้าเว็บ ด้วย Chrome , Firefox มันจะแตกหรือแยก
ตาม Slice ที่เราตัด แต่ถ้าเปิดด้วยขนาดหน้าจอปกติจะไม่มี
ปัญหาเลย ไม่ว่าจะเปิดจาก Browser ตัวไหนก็ตาม
ผมลองศึกษาเรื่อง CSS Layout จากหลายเว็บแล้ว
ผมก็ยังงงอยู่มาก เริ่มต้นไม่ถูกว่าจะต้องกำหนด Css Layout ให้กับ
เว็บไซต์ที่ตัวเองออกแบบอย่างไรดี ส่วนมาก จะเป็นแบบหน้าเว็บ พื้นๆ
มี 4 ส่วนตามนี้ (ตามรูป)
http://pic.free.in.th/id/b6b94a1372fa72f2d1bd876e29725220
1.1.ส่วนแสดงสัญลักษณ์ของเว็บไซต์ ส่วนนี้เราจะให้แสดงรูปภาพและสัญลักษณ์ของเว็บไซต์
1.2.ส่วนแสดง Navigation ของเว็บไซต์ ส่วนนี้จะแสดงลิงค์ไปยังหน้าต่างของเว็บไซต์
1.3.ส่วนแสดงเนื้อหา จะแสดงเนื้อหาและรูปภาพ
1.4.ส่วนท้ายสุดของหน้า จะแสดงลิงค์ไปยังหน้าหลักๆของเว็บไซต์

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

ปล.หน้าตาเว็บไซต์ผมครับ
http://pic.free.in.th/id/665e72944851cfb8c0954c92b8858bbb
 

[utto]

ก็วางเป็นกล่องเรียงๆกันไปตามปกติแหละครับ ตามที่ดีไซน์ก็เป็นกล่องๆ แยกกันต่างหากอยู่แล้ว จะยากก็ตรง BG นี่แหละ ที่จะต้องคิดหนักหน่อย เพราะใส่ทั้งรูปเลยโหลดหนัก
ลองอ่านวิธีที่เว็บผมดูครับ www.divland.com/blog เนื้อหาเก่าหน่อย แต่ยังใช้ได้อยู่ ^^

ประมาณนี้  แบ่งเป็นหลักๆ 3 กล่อง  สร้างสามกล่องแนวนอนไว้ก่อนก็ได้ แล้ว ใส่ ย่อยลงไปทีหลัง 1.1 1.2 1.3 --1.4 1.5 1.6 -- 1.7 1.8

[tongchimlang]

นี้ครับเว็บไซตืที่ผมออกแบบไว้ครับ
http://pic.free.in.th/id/665e72944851cfb8c0954c92b8858bbb

ขอบคุณครับ

[tongchimlang]

มีใครรับทำไหมครับ
วาง Css layout ครับหน้าเดียว
ถ้าสนใจ PM มาครับ

[tongchimlang]

ขออนุญาต ดัน ครับ..

หรือใครมีแนวทางอื่นบ้างครับ

[kobkung]

ตามข้างบนเลยค่ะ น่าจะเทพ ๆ ทั้งนั้น แต่ถ้าคนตัดเป็นทั้ง Designer และ Programmer นี้มันจะสวดดยวดด มาก ๆ เลยทีเดียวเชียวหละ อิอิ  

อย่าชมผมดิ เขิน