Lab thiết kế web 2013 Nhất Nghệ

I. GIỚI THIỆU HTML5

1. HTML5 là gì?

2. HTML5 ra đời như thế nào?

Các lợi ích mới

3. Các trình duyệt hỗ trợ HTML5

HTML5 New Doctype

2. Các Thẻ Mới Trong HTML5

Các thẻ HTML mới hoàn toàn

a. Multi columns

- Round Conners

1. Các thẻ form mới

2. Các giá trị thuộc tính đầu vào mới

3. Trình duyệt hỗ trợ

4. Thẻ datalist

5. Thẻ keygen

6. Thẻ output

VII. CÁC THUỘC TÍNH FORM TRONG HTML5

1. Trình duyệt hỗ trợ

2. Thuộc tính autocomplete

3. Thuộc tính autofocus

4. Các thuộc tính min, max và step

5. Thuộc tính multiple

6. Thuộc tính novalidate

a. Thuộc tính pattern

b. Thuộc tính placeholder

c. Thuộc tính required

VIII. MEDIA

1. Các thẻ dùng cho media

2. HTML5 Video

1. Video trên Web

2. Định dạng Video

a. Video trong HTML5

b. Danh sách các thuộc tính của thẻ <video>

3. HTML5 Audio

a. Audio trên Web

b. Các định dạng Audio

c. Cách hoạt động

d. Danh sách các thuộc tính của thẻ audio

Bạn có thể viết bao nhiêu media query tuỳ ý ,trong ví dụ này tôi chỉ viết 3 media queries.

CSS trick trong thiết kế giao diện Responsive

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"><extension version="2.5" type="template" client="site"> <name>Nhất Nghệ</name>

<author>MasterIT</author>

<authorUrl>http://www.masterit.vn</authorUrl>

<license>www.nhatnghe.com</license>

<description>Nhất Nghệ Template</description>

<files>

<folder>images</folder>

<filename>nhatnghe.css</filename>

<filename>index.html</filename>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

</files>

<position>header</position>

<position>content</position>

<position>right</position>

<position>footer</position>

</positions>

Trong đó:- <files></files> ( Để khai báo các file sử dụng trong template nhatnghe- <positions></positions> ( Để khai báo các vị trí sử dụng trong template nhatnghe- <config></config> ( Để khai báo Param trong template nhatnghe

B3: Tạo cấu trúc website trong file index.php

Mở file index.php ( Khai báo thêm nội dung vào file index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>NhatNghe's Site</title></head><body> <div id="container"> <div id="header"></div> <div id="left"></div> <div id="content"></div> <div id="right"></div> <div id="footer"></div> </div></body></html>

B4: Cài đặt Template nhatnghe

Truy cập vào Windows Explore ( C:\ ( Chọn appserv ( Chọn www ( Chọn JoomlaNén folder nhatnghe thành file nhatnghe.zip

Truy cập vào trang quản trị ( Chọn Extensions ( Extension Manager ( Chọn Browse

Trong c:\Appserv\www\Joomla ( Chọn file nhatnghe.zip ( Chọn Open

Cài đặt template nhatnghe thành công

\\

Trong trang quản trị ( Chọn Extensions ( Template Manager

Chọn template NhatNghe – Default ( Chọn Make Default

Kết quả sau khi Make Default template NhatNghe - Default

Truy cập vào trang chủ ( Quan sát hiện tại webiste joomla trắng

B5: Viết code để chèn dữ liệu của Joomla vào template nhatnghe

Truy cập vào trang quản trị quan sát kết quả khi chèn dữ liệu vào template

B7: Bổ sung CSS để có giao diện đẹp hơnTrong Dreamweaver ( Chọn Template ( Chọn nhatnghe ( Tạo file style.css và bổ sung thêm nội dung sau

@charset "utf-8";#container {width:900px; margin:auto;}#header{width:900px; height:150px; background-color:#CCCCCC;}#left{width:20%; height:auto; float:left;}#content{width:60%; height:auto; float:left;}#right{width:200%; height:auto; float:left;}#footer{width:900px; height:150px; clear:both; background-color:#CCCCCC;}

Trong Dreamweaver ( Chọn Template ( Chọn nhatnghe ( Mở file index.php và bổ sung thêm dòng sau

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Website NhatNghe</title><link href="templates/nhatnghe/style.css" rel="stylesheet" type="text/css" /></head>