Thủ thuật cắt HTMl [Archive] - Diễn Đàn Tin Học

wi_world

17-08-2008, 17:43

em đang thực hành cắt mấy cái layout photoshop sang HTMl dùng CSS, mấy anh chỉ giúp em cắt sao để đẹp, nhanh mà trang web load nhanh nha, thanks nhiều nhiều !!!

ptqlove

23-08-2008, 13:48

hi. Chỉ cắt nhửng phần nào không tạo bằng css & html được thui. Ví dụ như phần bóng mờ, bo tròn ... Phần nào sử dụng html & css được thì không nên cắt. Cắt càng ít hình tốc độ load web cang nhanh. ^^! Tham khảo về layout của các trang web nước ngoài cũng học được nhìu lắm đó

khinhvu

08-09-2008, 22:47

em đang thực hành cắt mấy cái layout photoshop sang HTMl dùng CSS, mấy anh chỉ giúp em cắt sao để đẹp, nhanh mà trang web load nhanh nha, thanks nhiều nhiều !!!
Nếu cắt = photoshop thì xuất ra html sẽ thành table chứ không phải css. Bạn save cái file layout đấy thành 1 file ảnh bt dùng để trace thôi căn cứ theo các ô cột ntn rồi dùng div để tạo các cột tương ứng.

Ds_Pham

09-09-2008, 17:09

Bác nào có thủ thuật dùng Css / Div hok chỉ em vài chiêu với ...

gorkiit

27-09-2010, 15:49

-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;

Code css trên là để bo tròn góc hack với các trình duyệt hiện nay

[=========> Bổ sung bài viết <=========]

-webkit-box-shadow:2px 2px 2px 2px;
cái này dùng để làm bóng đổ,để hack các trình duyệt khác tương tự như trên

cristiano_cr

07-10-2010, 16:57

-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
Code css trên là để bo tròn góc hack với các trình duyệt hiện nay

-----------------------------------------------------------------
Vậy IE 6 có được ko vậy?

Bạn nào muốn học cắt CSS qua mình chỉ cho. 50k/1h

Ý Nhi

07-10-2010, 19:20

@all : Động từ cắt là mình hiểu như thế nào vậy các bạn. Có phải là file ảnh Layout Photoshop rồi mình cắt nó ra , đưa vào một phần mềm nào đó, rồi convert nó sang có dạng code HTML và CSS.
Hay là như thế nào, mìn chưa hiểu lắm

fsviet

08-10-2010, 09:31

@cristiano_cr: cái này hình như chỉ áp dụng cho CSS3 thì fải

vietdragons.com

13-10-2010, 16:46

tan09ck2

16-10-2010, 13:35

co ai co ebook HTML hok cho minh cop voi
cam on truoc nha

vuvanthiep

19-10-2010, 00:29

tất nhiên là phải dùng div rồi , h ai ma dùng table nữa , bạn nên dùng thuộc tinh repeat của css để làm trang web

honnhienh

21-10-2010, 13:25

tất nhiên là phải dùng div rồi , h ai ma dùng table nữa , bạn nên dùng thuộc tinh repeat của css để làm trang web

repeat là gì nhỉ? với lại div giờ không còn là chọn nửa tối ưu nữa rùi.

chieugtvt

09-12-2010, 22:51

tất nhiên là phải dùng div rồi , h ai ma dùng table nữa , bạn nên dùng thuộc tinh repeat của css để làm trang web

Hehe! làm cái calendar lên dùng div anh em nhỉ

cristiano_cr

10-12-2010, 10:00

-khtml-border-radius:10px <--- cái này là cái j vậy ? chưa thấy bao h kể cả trong css3
Tôi chịu. Tôi chỉ thấy cậu bên trên nói bo tròn góc bằng cái đó. Vậy nên hỏi lại thôi. Còn chi tiết cậu hỏi người trước nữa ấy!

satthudatinh011

10-12-2010, 21:38

repeat là gì nhỉ? với lại div giờ không còn là chọn nửa tối ưu nữa rùi.

thế bây giờ lại quay về table hả

chieugtvt

10-12-2010, 23:58

thế bây giờ lại quay về table hả
Chắc ai đó mới sáng tạo cái mới

khoathi

11-12-2010, 08:10

repeat là gì nhỉ? với lại div giờ không còn là chọn nửa tối ưu nữa rùi.

Thế bây giờ người ta thiết kế web bằng gì vậy? Table bị xem là cũ kĩ, nặng nề, DIV thì không còn là lựa chọn tối ưu ???

saimoto

11-12-2010, 11:25

Bây giờ người ta dùng thẻ ul với li

honnhienh

11-12-2010, 11:37

nguời ta lấy kéo cắt :))))))))))))))))))))

maicon

12-12-2010, 13:12

chắc giờ người ta chọn flash :w00t:

alone_hero

12-12-2010, 16:40

Bây giờ người ta dùng thẻ ul với li
Trước thì lạm dụng DIV, bây h bạn nói vậy là lạm dụng UL, LI.
Cái này rất nhiều trường phái và quan điểm khác nhau. Khi chuyển layout sang template css, html cần đạt một số tiêu chuẩn sau:
- Tiết kiệm tối đa tag
- Dùng đúng tính năng tag cho nội dung cần thể hiện (bảng biểu vẫn sài table, danh sách sài ul, liên kết sài <a>, khối layout sài div,... lên html 5 còn có cả tag footer, header,... nữa nhá.
- Sử dụng html, css sau cho hiển thị tốt nhất trên các trình duyệt thông dụng khác nhau
- Tận dụng các kỹ thuật html, css sau cho tối ưu tốc độ và thân thiện SEO nhất.

Nói chung là không thể nói 1 vài câu được, cái này phải dài dài (vẫn đang tranh luận)...

chieugtvt

12-12-2010, 20:45

Bây giờ người ta dùng thẻ ul với li

Cái này tùy trường hợp dùng thôi chứ

zmt264

16-12-2010, 05:00

Trước thì lạm dụng DIV, bây h bạn nói vậy là lạm dụng UL, LI.
Cái này rất nhiều trường phái và quan điểm khác nhau. Khi chuyển layout sang template css, html cần đạt một số tiêu chuẩn sau:
- Tiết kiệm tối đa tag
- Dùng đúng tính năng tag cho nội dung cần thể hiện (bảng biểu vẫn sài table, danh sách sài ul, liên kết sài <a>, khối layout sài div,... lên html 5 còn có cả tag footer, header,... nữa nhá.
- Sử dụng html, css sau cho hiển thị tốt nhất trên các trình duyệt thông dụng khác nhau
- Tận dụng các kỹ thuật html, css sau cho tối ưu tốc độ và thân thiện SEO nhất.

Nói chung là không thể nói 1 vài câu được, cái này phải dài dài (vẫn đang tranh luận)...

Mấy ý kiến của bạn Anh Hùng Cô Đơn hoàn toàn chuẩn rồi, mình đồng ý! Nếu các bạn muốn xem chi tiết hơn thì có thể xem 12 clip sau: http://hoctudau.com/slides/html-css-best-practices/

maicon

16-12-2010, 21:59

http://hoctudau.com/slides/html-css-best-practices/

Errors found while checking this document as XHTML 1.0 Transitional!
19 Errors, 15 warning(s) :D

zmt264

17-12-2010, 01:18

http://hoctudau.com/slides/html-css-best-practices/

Errors found while checking this document as XHTML 1.0 Transitional!
19 Errors, 15 warning(s) :D

Rule 10: Smart

Break the Rules when you need

maicon

17-12-2010, 10:20

Rule 10: Smart

Break the Rules when you need

IBP : if there are errors in the HTML/CSS code of your web page, then search engines might not be able to read everything of your web page

http://hoctudau.com/slides/html-css-best-practices/

Example :

---Line 21, Column 7: required attribute "type" not specified :
<style> -> <style type="text/css">

---Line 112, Column 176: general entity "stripped_title" not defined and no default entity :
ssbestpractices-101122151150-phpapp02&stripped_title=html-css-bestpractices-58
& -> &

dun break the rules :D

zhiivn

19-12-2010, 12:20

Thế bây giờ người ta thiết kế web bằng gì vậy? Table bị xem là cũ kĩ, nặng nề, DIV thì không còn là lựa chọn tối ưu ???

Không xài div thì xài gì bạn? từ nay đến khi HTML 5 bắt đầu phổ biến còn xa lắm bạn.

Bây giờ người ta dùng thẻ ul với li
Tùy thôi bạn à. Bạn không thề làm web toàn bộ bằng ul li. Tùy trường hợp, mục đích, thời gian và tiền bạc thôi bạn ah.

kelosa

13-04-2013, 08:06

Mình chuyển psd->html giá rẻ hiển thị tốt trên cả máy tính và mobile ứng dụng công nghệ boostrap. liên hệ Mình nhé : yahoo,sky,gmail:chien90cntt , DT:0973046037

caphdmi

23-04-2013, 09:55

Nếu cắt = photoshop thì xuất ra html sẽ thành table chứ không phải css. Bạn save cái file layout đấy thành 1 file ảnh bt dùng để trace thôi căn cứ theo các ô cột ntn rồi dùng div để tạo các cột tương ứng.
sạo bạn lại nói cắt = pts xuất ra html lại thành table? cắt PTS thì cắt những tấm hình nhỏ thôi, tùy vùng mà mình save những định dạng khác nhau. như vậy nó sẽ nhẹ cái trang web, ví dụ cắt 1 cái menu thì cắt 1px witdh - height theo menu cao đến đâu, và css chỉ cần lặp là xong, như vậy web sẽ nhẹ hơn nhiều. giờ ko ai mà xài table nữa đâu

website_tto

11-05-2013, 11:28

table vỡ ảnh
div hok còn tối ưu
ul,li ....
html5....
vậy rốt cuộc thì cắt css bằng gì???
:(

ibo.vn

14-05-2013, 17:46

Dùng layout để căn cứ vào đó mà thiết kế
sau đó chỗ nào bắt buộc phải dùng hình ảnh thì cắt chỗ đó
sát nhất và không bị thừa