Web1012 slide 5

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

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

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

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

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

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

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)

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

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>

<!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

• Đị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

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

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

<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

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:

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

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

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

Web1012 slide 5

Documents

5 slide challenge

Web1012 slide 7

5 slide presentation

Web301 slide 5

5. Slide Sambungan

Slide subtopic 5

5 slide prototype

Naw slide#5

Web1012 slide 8

Slide 5 ALPRO

Perio Slide #5

Altitude: Slide 2 chasm: Slide 3 miscreant: Slide 4 proprietor: Slide 5 waylay: Slide 6 dismember: Slide 7 pallet: Slide 8 sentry: Slide 9 recede: Slide

Slide Chap 5

Detalhe de contactos para correspondência - cgcmc.gov.mz · SLIDE 1 5 SLIDE 2 6 SLIDE 3 7 SLIDE 4 8 SLIDE 5 9 SLIDE 6 10 SLIDE 7 11 SLIDE 8 12 SLIDE 9 13 SLIDE 10 14 ... Desenho

Slide Buoi 5

Com201 slide 5

September Morning Power Points MonTuesWedThursFri 3 No School 4 Slide 2 5 Slide 3 6 Slide 4 7 Slide 5 10 Slide 6 11 Slide 7 12 Slide 8 13 Slide 9 14 Slide

Slide Series 5

Smith - I'm Not The Only One (EASY... · Slide Slide Slide Slide Slide Slide Slide Slide 3, 5, 5, 1, 3, 3, 5, 5, I'm Not The Only One - Overview 6 6 6 8 "/PCNPIANO SUBSCRIBE

aura: Slide 2 tangible: Slide 3 eccentricity: Slide 4 resolute: Slide 5 brigand: Slide 6