Embed Size (px)
Citation preview
BÀI 5PTS to HTML – LÀM VIỆC VỚI CÁC THÀNH PHẦN HTML
NHẮC LẠI BÀI TRƯỚC
Điều chỉnh môi trường làm việc trên DreamweaverCS4Làm việc với những thành phần đa phương tiện(multimedia) trên webpage:
Chèn file flash, video, âm thanhSử dụng panel AssetsLàm việc với plug-in
Cách làm việc với bảng (table) trên trang web:Khởi tạo bảng với HTMLĐịnh dạng style cho bảng với CSS/ HTML
Điều chỉnh môi trường làm việc trên DreamweaverCS4Làm việc với những thành phần đa phương tiện(multimedia) trên webpage:
Chèn file flash, video, âm thanhSử dụng panel AssetsLàm việc với plug-in
Cách làm việc với bảng (table) trên trang web:Khởi tạo bảng với HTMLĐịnh dạng style cho bảng với CSS/ HTML
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 2
MỤC TIÊU BÀI HỌC
PSD to HTML:Công đoạn thiết kế websiteNhững thành phần trên web cần chú ý khi thực hiệndàn trangCấu trúc thư mục webThiết kế layout web với HTML
Làm việc với những thành phần HTML
PSD to HTML:Công đoạn thiết kế websiteNhững thành phần trên web cần chú ý khi thực hiệndàn trangCấu trúc thư mục webThiết kế layout web với HTML
Làm việc với những thành phần HTML
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 3
PSD to HTML
PSD to HTML
Các giai đoạn thiết kế website:
Phân tích yêu cầu websitePhân tích yêu cầu website
Thiết kế prototypeThiết kế prototype
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 5
Thiết kế GraphicThiết kế Graphic
Thiết kế Layout (HTML/ CSS)Thiết kế Layout (HTML/ CSS)
Các giai đoạn sau …Các giai đoạn sau …
Đây là giai đoạn dàn trang chowebsite
PSD to HTML
Công việc dàn trang bao gồm:Cấu trúc thư mục chứa websiteSlice hình ảnh từ bản thiết kế graphicDàn layout tổng thể cho trang theo bố cục của bảnthiết kếDàn từng phần trên trang
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 6
Công việc dàn trang bao gồm:Cấu trúc thư mục chứa websiteSlice hình ảnh từ bản thiết kế graphicDàn layout tổng thể cho trang theo bố cục của bảnthiết kếDàn từng phần trên trang
PSD to HTML
Cấu trúc thư mục chứa website:
• Giúp gọi file, kết nối các file rõ ràng, gọn nhẹ hơn khisử dụng HTML
• Nếu sử dụng nhiều hơn 2 file css, nên tạo thư mục cssđể chứa các file
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 7
Cấu trúc thư mục chứa website:
• Giúp gọi file, kết nối các file rõ ràng, gọn nhẹ hơn khisử dụng HTML
• Nếu sử dụng nhiều hơn 2 file css, nên tạo thư mục cssđể chứa các file
PSD to HTML
Slice hình ảnh cần thiết từ bản thiết kế graphic: cầnchú ý các thành phần nào HTML có thể khởi tạo đượcđể tránh phải cắtNhững thành phần HTML khởi tạo được:
• Text• Input (ô nhập text, password, …)• Border• Màu đơn sắc
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 8
Slice hình ảnh cần thiết từ bản thiết kế graphic: cầnchú ý các thành phần nào HTML có thể khởi tạo đượcđể tránh phải cắtNhững thành phần HTML khởi tạo được:
• Text• Input (ô nhập text, password, …)• Border• Màu đơn sắc
PSD to HTML
Những thành phần HTML không khởi tạo được:• Hình ảnh• Màu sắc dạng gradient (HTML5 khởi tạo được)
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 9
Những thành phần HTML không khởi tạo được:• Hình ảnh• Màu sắc dạng gradient (HTML5 khởi tạo được)
PSD to HTML
Casestudy:Hãy chỉ ra những thành phần HTMLcó thể khởi tạo được và không khởitạo được trên template cho sẵn
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 10
PSD to HTML
Dàn layout tổng thể cho trang web:• Xác định trang web thuộc cấu trúc nào (? cột. ? hàng)• Viết css định dạng cho từng phần tổng quát của trang:
header, content, footerVí dụ: với template cho trước
<!doctype HTML><html lang="en">
<head><meta charset="utf-8"><title>Burnstudio</title> <link rel="stylesheet" href="style.css">
</head><body>
<div id="header-wrap"> </div><div id="container"><div id="slides"> slides content goes here </div><div id="service"> service content goes here </div><div id="media"> media content goes here </div><div id =“footer”> footer content goes here </div>
</body></html>
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 11
Dàn layout tổng thể cho trang web:• Xác định trang web thuộc cấu trúc nào (? cột. ? hàng)• Viết css định dạng cho từng phần tổng quát của trang:
header, content, footerVí dụ: với template cho trước
<!doctype HTML><html lang="en">
<head><meta charset="utf-8"><title>Burnstudio</title> <link rel="stylesheet" href="style.css">
</head><body>
<div id="header-wrap"> </div><div id="container"><div id="slides"> slides content goes here </div><div id="service"> service content goes here </div><div id="media"> media content goes here </div><div id =“footer”> footer content goes here </div>
</body></html>
PSD to HTML
Dàn layout tổng thể cho trang web:• Xác định trang web thuộc cấu trúc nào (? cột. ? hàng)• Viết css định dạng cho từng phần tổng quát của trang:
header, content, footerVí dụ: với template cho trước
• Định id: header-wrap cho phần header• Sau đó mới dàn các thành phần có trong header
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 12
Dàn layout tổng thể cho trang web:• Xác định trang web thuộc cấu trúc nào (? cột. ? hàng)• Viết css định dạng cho từng phần tổng quát của trang:
header, content, footerVí dụ: với template cho trước
• Định id: header-wrap cho phần header• Sau đó mới dàn các thành phần có trong header
PSD to HTML
Ví dụ: với template cho trước<div id="header-wrap">
<h1><a href="index.html" title="burnstudio">Burnstudio</a></h1><div id="call"> <h3>(012) 345 6789</h3> <h4 class="green">Call us
<strong>now</strong></h4></div><nav class="group">
<ul><li class="home"><a href="#"
title="">Home</a></li><li><a href="#" title="">About Us</a></li><li><a href="#" title="">Testimonials</a></li>
<li class="last"><div> <input type="text" name="search"
placeholder="search" /> <input type="submit" name="search" value="go"class="search"/> </div> </li> </ul> </nav></div>
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 13
Ví dụ: với template cho trước<div id="header-wrap">
<h1><a href="index.html" title="burnstudio">Burnstudio</a></h1><div id="call"> <h3>(012) 345 6789</h3> <h4 class="green">Call us
<strong>now</strong></h4></div><nav class="group">
<ul><li class="home"><a href="#"
title="">Home</a></li><li><a href="#" title="">About Us</a></li><li><a href="#" title="">Testimonials</a></li>
<li class="last"><div> <input type="text" name="search"
placeholder="search" /> <input type="submit" name="search" value="go"class="search"/> </div> </li> </ul> </nav></div>
PSD to HTML
Dàn layout tổng thể cho trang web:• Dàn trang phần content cho trang
Ví dụ: với template cho trước:• Chú ý:• Đặt id, class cho phầncontent tổng quát• Sau đó dàn các thànhphần con bên trong
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 14
Dàn layout tổng thể cho trang web:• Dàn trang phần content cho trang
Ví dụ: với template cho trước:• Chú ý:• Đặt id, class cho phầncontent tổng quát• Sau đó dàn các thànhphần con bên trong
PSD to HTML
Dàn layout tổng thể cho trang web:• Dàn trang phần footer cho trang
Ví dụ: với template cho trước:
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 15
Dàn layout tổng thể cho trang web:• Dàn trang phần footer cho trang
Ví dụ: với template cho trước:
PSD to HTML
Chú ý khi thực hiện công việc dàn layout:• Thực hiện theo trình tự từ layout tổng quát, sau đó thực
hiện với các thành phần con trên trang (box, hình ảnh,text, …)
• Sử dụng cách phân chia box thành phần trên trang đểdàn
• Luôn kiểm tra cách hiển thị trên các trình duyệt khácnhau, xem xét sự xô lệch, kích thước khác nhau
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 16
Chú ý khi thực hiện công việc dàn layout:• Thực hiện theo trình tự từ layout tổng quát, sau đó thực
hiện với các thành phần con trên trang (box, hình ảnh,text, …)
• Sử dụng cách phân chia box thành phần trên trang đểdàn
• Luôn kiểm tra cách hiển thị trên các trình duyệt khácnhau, xem xét sự xô lệch, kích thước khác nhau
PSD to HTML
Dàn từng thành phần trên trang:• Chú ý dàn theo trình tự từ tổng quát tới chi tiết• Ví dụ:
• Đặt id/ class cho phần tổng quát• Đặt id/ class cho các thành phần con. Chú ý: nên sử
dụng class để áp dụng tính kế thừa trong style
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 17
Dàn từng thành phần trên trang:• Chú ý dàn theo trình tự từ tổng quát tới chi tiết• Ví dụ:
• Đặt id/ class cho phần tổng quát• Đặt id/ class cho các thành phần con. Chú ý: nên sử
dụng class để áp dụng tính kế thừa trong style
TỔNG KẾT
Khi thực hiện dàn trang HTML, cần chú ý:Xác định bố cục layout dạng tổng quát (bao gồm cột,hàng)Sử dụng HTML/ CSS lên bố cục tổng quátThực hiện tuần tự với các thành phần con trong từngthành phần (header, content, footer)Luôn kiểm tra kích thước chính xác, khoảng cách giữacác thành phần trên trang, tính xô lệch của trang trêntrình duyệt
Khi thực hiện dàn trang HTML, cần chú ý:Xác định bố cục layout dạng tổng quát (bao gồm cột,hàng)Sử dụng HTML/ CSS lên bố cục tổng quátThực hiện tuần tự với các thành phần con trong từngthành phần (header, content, footer)Luôn kiểm tra kích thước chính xác, khoảng cách giữacác thành phần trên trang, tính xô lệch của trang trêntrình duyệt
Slide 5 - PTS to HTML - Làm việc với các thành phần HTML 18
