Tổng quan về CSS3
Làm việc với các thuộc tính mới trong CSS3:
Border-radius
Border-image
Gradient
Transform, transition, animation
Làm việc với font web
Chèn nhiều hình nền với CSS3
Tổng quan về CSS3
Làm việc với các thuộc tính mới trong CSS3:
Border-radius
Border-image
Gradient
Transform, transition, animation
Làm việc với font web
Chèn nhiều hình nền với CSS3
BÀI 1 Những khái niệm đầu tiên về HTML5 - Giáo trình FPTMasterCode.vn
Định nghĩa về HTML5
Tổng quát về cú pháp của HTML5
Một số thành phần mới của HTML5
Tổng quan về HTML5 API (giao diện lập trình ứng
dụng) và công nghệ hỗ trợ
Giới thiệu CSS3
Định nghĩa về HTML5
Tổng quát về cú pháp của HTML5
Một số thành phần mới của HTML5
Tổng quan về HTML5 API (giao diện lập trình ứng
dụng) và công nghệ hỗ trợ
Giới thiệu CSS3
BÀI 7 Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 - Giáo trình FPTMasterCode.vn
Làm việc với các thành phần mới trong HTML5:
Offline storage
Geolocation
Drag & drop
Giới thiệu sơ lược về ứng dụng HTML5 cho thiết bị
di động
Làm việc với các thành phần mới trong HTML5:
Offline storage
Geolocation
Drag & drop
Giới thiệu sơ lược về ứng dụng HTML5 cho thiết bị
di động
Tổng quan về CSS3
Làm việc với các thuộc tính mới trong CSS3:
Border-radius
Border-image
Gradient
Transform, transition, animation
Làm việc với font web
Chèn nhiều hình nền với CSS3
Tổng quan về CSS3
Làm việc với các thuộc tính mới trong CSS3:
Border-radius
Border-image
Gradient
Transform, transition, animation
Làm việc với font web
Chèn nhiều hình nền với CSS3
BÀI 1 Những khái niệm đầu tiên về HTML5 - Giáo trình FPTMasterCode.vn
Định nghĩa về HTML5
Tổng quát về cú pháp của HTML5
Một số thành phần mới của HTML5
Tổng quan về HTML5 API (giao diện lập trình ứng
dụng) và công nghệ hỗ trợ
Giới thiệu CSS3
Định nghĩa về HTML5
Tổng quát về cú pháp của HTML5
Một số thành phần mới của HTML5
Tổng quan về HTML5 API (giao diện lập trình ứng
dụng) và công nghệ hỗ trợ
Giới thiệu CSS3
BÀI 7 Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 - Giáo trình FPTMasterCode.vn
Làm việc với các thành phần mới trong HTML5:
Offline storage
Geolocation
Drag & drop
Giới thiệu sơ lược về ứng dụng HTML5 cho thiết bị
di động
Làm việc với các thành phần mới trong HTML5:
Offline storage
Geolocation
Drag & drop
Giới thiệu sơ lược về ứng dụng HTML5 cho thiết bị
di động
BÀI 4 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5MasterCode.vn
Chèn các thành phần video, audio vào trang
Điều khiển video với Javascript
Làm quen với thành phần canvas
Sử dụng thành phần cavas để thực hiện:
Vẽ hình và đường
Áp dụng màu và cọ fradient
Thực hiện tạo hình động
Chèn các thành phần video, audio vào trang
Điều khiển video với Javascript
Làm quen với thành phần canvas
Sử dụng thành phần cavas để thực hiện:
Vẽ hình và đường
Áp dụng màu và cọ fradient
Thực hiện tạo hình động
Bài 6: Tạo hiệu ứng và validate Form - Giáo trình FPTMasterCode.vn
Viết mã tạo các hiệu ứng
Hiệu ứng Image Rollover
Hiệu ứng SlideShow
Thao tác với các điều khiển
SelectBox
CheckBox
RadioButton
Form
Kiểm tra tính hợp lệ cho Form
Mục tiêu bài học
Viết mã tạo các hiệu ứng
Hiệu ứng Image Rollover
Hiệu ứng SlideShow
Thao tác với các điều khiển
SelectBox
CheckBox
RadioButton
Form
Kiểm tra tính hợp lệ cho Form
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPTMasterCode.vn
Nhắc lại về HTML
Định nghĩa XHTML, CSS
Cách thiết kế layout trang web
Làm quen với cấu trúc một trang web
Làm quen với những plugin kiểm tra mã XHTML và
CSS trên những trình duyệt khác nhau
Tài liệu tìm hiểu jQuery dành cho người mới bắt đầuLel Đặng Văn
Tài liệu này hướng dẫn những bạn mới bắt đầu học làm việc với jQuery trong việc viết Client Script khi thiết kế website. Những mô tả và hướng dẫn trong tài liệu này là hết sức căn bản và chưa có hướng dẫn nâng cao nào.
Biết cách sử dụng các lệnh lặp khác nhau
Biết cách sử dụng các điều khiển ListBox,
NumericUpDown, TextBox nhiều dòng
Biết cách chuyển điều khiển
Biết cách vô hiệu hóa và kích hoạt điều khiển
Biết cách sử dụng đối tượng String
Biết cách sử dụng các lệnh lặp khác nhau
Biết cách sử dụng các điều khiển ListBox,
NumericUpDown, TextBox nhiều dòng
Biết cách chuyển điều khiển
Biết cách vô hiệu hóa và kích hoạt điều khiển
Biết cách sử dụng đối tượng String
BÀI 4 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5MasterCode.vn
Chèn các thành phần video, audio vào trang
Điều khiển video với Javascript
Làm quen với thành phần canvas
Sử dụng thành phần cavas để thực hiện:
Vẽ hình và đường
Áp dụng màu và cọ fradient
Thực hiện tạo hình động
Chèn các thành phần video, audio vào trang
Điều khiển video với Javascript
Làm quen với thành phần canvas
Sử dụng thành phần cavas để thực hiện:
Vẽ hình và đường
Áp dụng màu và cọ fradient
Thực hiện tạo hình động
Bài 6: Tạo hiệu ứng và validate Form - Giáo trình FPTMasterCode.vn
Viết mã tạo các hiệu ứng
Hiệu ứng Image Rollover
Hiệu ứng SlideShow
Thao tác với các điều khiển
SelectBox
CheckBox
RadioButton
Form
Kiểm tra tính hợp lệ cho Form
Mục tiêu bài học
Viết mã tạo các hiệu ứng
Hiệu ứng Image Rollover
Hiệu ứng SlideShow
Thao tác với các điều khiển
SelectBox
CheckBox
RadioButton
Form
Kiểm tra tính hợp lệ cho Form
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPTMasterCode.vn
Nhắc lại về HTML
Định nghĩa XHTML, CSS
Cách thiết kế layout trang web
Làm quen với cấu trúc một trang web
Làm quen với những plugin kiểm tra mã XHTML và
CSS trên những trình duyệt khác nhau
Tài liệu tìm hiểu jQuery dành cho người mới bắt đầuLel Đặng Văn
Tài liệu này hướng dẫn những bạn mới bắt đầu học làm việc với jQuery trong việc viết Client Script khi thiết kế website. Những mô tả và hướng dẫn trong tài liệu này là hết sức căn bản và chưa có hướng dẫn nâng cao nào.
Biết cách sử dụng các lệnh lặp khác nhau
Biết cách sử dụng các điều khiển ListBox,
NumericUpDown, TextBox nhiều dòng
Biết cách chuyển điều khiển
Biết cách vô hiệu hóa và kích hoạt điều khiển
Biết cách sử dụng đối tượng String
Biết cách sử dụng các lệnh lặp khác nhau
Biết cách sử dụng các điều khiển ListBox,
NumericUpDown, TextBox nhiều dòng
Biết cách chuyển điều khiển
Biết cách vô hiệu hóa và kích hoạt điều khiển
Biết cách sử dụng đối tượng String
BÀI 6: Thủ tục (SUB) và hàm (FUNCTION) - Giáo trình FPTMasterCode.vn
Biết về tổ chức ứng dụng, khái niệm “chia để trị”
Biết cách sử dụng Function và Sub
Biết cách sử dụng tham số Optional
Hiểu về phạm vị biến
Hiểu về ép kiểu ngầm định thu hẹp và sử dụng lớp
Convert để ép kiểu tường minh
Hiểu về cách sử dụng các tùy chọn của trình gỡ lỗi
Bài 3: Cấu trúc điều khiển, hàm và xử lý sự kiện - Giáo trình FPTMasterCode.vn
Cấu trúc điều khiển (tiếp)
Cấu trúc lựa chọn
Lệnh lựa chọn kép
Lệnh đa lựa chọn
Cấu trúc lặp
Lặp không biết trước số lần lặp
Lặp biết trước số lần lặp
Hàm
Phạm vi biến
Mảng
Xử lý sự kiện
Cấu trúc điều khiển (tiếp)
Cấu trúc lựa chọn
Lệnh lựa chọn kép
Lệnh đa lựa chọn
Cấu trúc lặp
Lặp không biết trước số lần lặp
Lặp biết trước số lần lặp
Hàm
Phạm vi biến
Mảng
Xử lý sự kiện
BÀI 2 Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển web mobile - Giáo trìn...MasterCode.vn
Làm quen với ngôn ngữ đánh dấu cho web di động:
XHTML, XHTML -MP
WML
CSS cho web di động
Nhận diện thiết bị và tính tương thích với các thiết bị
di động
Nâng cao khả năng tương tác của web di động với
Javascript và AJAX
Bài 3 Tạo style cho font và văn bản - Giáo trình FPTMasterCode.vn
Giới thiệu về font
Một số thuộc tính quan trọng của Font
Một số thuộc tính quan trọng của Text
Kích thước của font, text trong HTML
Cách viết CSS rút gọn (shorthand)
Giới thiệu về font
Một số thuộc tính quan trọng của Font
Một số thuộc tính quan trọng của Text
Kích thước của font, text trong HTML
Cách viết CSS rút gọn (shorthand)
Bài 1 Lập trình website theo mô hình MVC - Xây dựng ứng dụng webMasterCode.vn
Cách tổ chức mô hình MVC
Ưu điểm của mô hình MVC trong việc phát triển
ứng dụng web
Cách tạo và gọi hàm theo phong cách mô hình
MVC
Phân biệt khi nào nên forward hoặc chuyển
hướng yêu cầu HTTP
Giới thiệu về framework CakePHP
Bài 7: Thư viện jQuery và thư viện jQuery UI - Giáo trình FPTMasterCode.vn
Thự viện và cách tạo thư viện
Thư viện JavaScript
Sử dụng thư viện jQuery
Sử dụng jQuery để tạo hiệu ứng
Hiệu ứng ẩn hiện
Hiệu ứng mờ
Hiệu ứng chuyển động
Sử dụng thư viện jQuery UI
Tạo tính năng kéo thả (drag and drop)
Tạo menu chồng nhau
Thự viện và cách tạo thư viện
Thư viện JavaScript
Sử dụng thư viện jQuery
Sử dụng jQuery để tạo hiệu ứng
Hiệu ứng ẩn hiện
Hiệu ứng mờ
Hiệu ứng chuyển động
Sử dụng thư viện jQuery UI
Tạo tính năng kéo thả (drag and drop)
Tạo menu chồng nhau
Lập trình sáng tạo creative computing textbook mastercode.vnMasterCode.vn
Lập trình sáng tạo bao gồm việc sáng tạo. Khoa học máy tính và các ngành liên quan tới tính toán đã từ lâu đƣợc giới thiệu tới những ngƣời trẻ tuổi một cách rời rạc – quá nhấn mạnh kĩ thuật so với khả năng sáng tạo. Lập trình sáng tạo giúp cho sự phát triển của cá nhân đối với tính toán trở nên tốt hơn, bằng cách hỗ trợ vẽ vời dựa trên sáng tạo, tƣởng tƣợng, và sở thích.
Tìm hiểu về một số Layout phổ biến
Layout nổi (float) & Layout tuyệt đối (absolute)
Ngăn tràn bố cục
Một số vấn đề khi căn chỉnh cột Layout
Tìm hiểu về một số Layout phổ biến
Layout nổi (float) & Layout tuyệt đối (absolute)
Ngăn tràn bố cục
Một số vấn đề khi căn chỉnh cột Layout
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPTMasterCode.vn
Các khía cạnh thiết kế web
Những kỹ năng thiết yếu trong thiết kế website
Quy trình thiết kế website
Một số vấn đề trong thiết kế website
Một số website có thiết kế tiêu biểu
Làm việc với dự án website
Cấu trúc thư mục khi tiến hành dự án website
Tạo kiến trúc website
@import css
Background & màu nền
Text & màu văn bản
Menu
Khung Sidebar
Form
Đánh dấu trang
Vùng nội dung
Làm việc với dự án website
Cấu trúc thư mục khi tiến hành dự án website
Tạo kiến trúc website
@import css
Background & màu nền
Text & màu văn bản
Menu
Khung Sidebar
Form
Đánh dấu trang
Vùng nội dung
BÀI 3 Bố cục trang web & bảng (TABLE) trên trang web - Giáo trình FPTMasterCode.vn
Bố cục website với CSS:
Mô hình CSS Box
Làm việc với div và AP div
Xếp chồng và xếp gối các thành phần
Tạo style cho nội dung hộp
Điều chỉnh vị trí
Tổ chức và phác thảo website
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
2. NHẮC LẠI BÀI TRƯỚC
Làm việc với các thuộc tính mới trong CSS3:
Border-radius
Border-image
Gradient
Transform, transition, animation
Làm việc với font web
Chèn nhiều hình nền với CSS3
Slide 6 - Làm việc với thành phần mở rộng của CSS3 2
3. MỤC TIÊU BÀI HỌC
Giới thiệu CSS3 Media Queries
Làm việc với CSS3 layout dạng nhiều cột (Multi-
columns) và cấu trúc hộp Flex (Flexboxes)
CSS3 user interface
Slide 6 - Làm việc với thành phần mở rộng của CSS3 3
5. CSS3 MEDIA QUERIES
Đối với tất cả các trình duyệt/ thiết bị giao tiếp với
máy chủ lưu trữ website và tự được định dạng với
user agent String
CSS3 media queries:
Hình thức nhận biết thiết bị
Kiểm tra khả năng của người dùng truy cập vào trang
web
Nhận biết (phát hiện) được: chiều cao, chiều rộng
của trình duyệt, thiết bị, thiết bị định hướng (phong
cảnh/ chân dung), độ phân giải
Slide 6 - Làm việc với thành phần mở rộng của CSS3 5
6. CSS3 MEDIA QUERIES
Sử dụng CSS3 media queries để cung cấp layout
phù hợp với cho layout mobile
Slide 6 - Làm việc với thành phần mở rộng của CSS3 6
@media only screen and (max-width: 480px) {
body { padding: 5px; background-color:#FFF; background-
image:url(images/smoothieworld_logo_mobile.jpg); background-
repeat:no-repeat;
}
Quy
định
chiều
rộng
lớn
nhất
khi
hiển
thị
:
480px
Sử
dụng
min-‐width,
max-‐width
để
khai
báo
chiều
rộng
hiển
thị
sẽ
chỉ
trong
khoảng
7. CSS3 MEDIA QUERIES
Quy định chiều rộng của trang được hiển thị trên
thiết bị
Slide 6 - Làm việc với thành phần mở rộng của CSS3 7
@media only screen and (max-device-width: 480px)
Kết
quả
hiển
thị
trên
trình
duyệt
của
iPhone
8. CSS3 MEDIA QUERIES
Điều hướng trên thiết bị di động:
Nên thiết kế vị trí điều hướng đơn giản hơn khi hiển
thị trên trình duyệt máy tính
Gợi ý:
• Nên có, nên để gần đầu màn hình để dễ truy cập
• Lặp lại điều hướng ở phía dưới trang
• Với thiết bị cảm ứng, sử dụng kích thước lớn cho link
của điều hướng
• Tránh điều hướng từ hình ảnh, nên dựa trên danh sách
chuyển hướng dạng CSS
Slide 6 - Làm việc với thành phần mở rộng của CSS3 8
9. CSS3 MEDIA QUERIES
Ví dụ:
Slide 6 - Làm việc với thành phần mở rộng của CSS3 9
#mainnav {height: auto;}
#mainnav li {
float: none;
width: auto;
text-align: left;
border-top: 1px grey solid;
border-bottom: 1px grey
solid;
}
11. CSS3 LAYOUT
Layout nhiều cột sử dụng CSS3:
CSS3 cung cấp các thuộc tính để thuận tiện cho việc
thiết kế layout dạng nhiều cột:
• Column-count: quy định cụ thể số lượng các cột một
phần tử được chia thành.
• Column-width: quy định cụ thể chiều rộng của các cột
• Column-gap: quy định khoảng cách giữa các cột
• Column-rule: là thuộc tính viết tắt, cho phép thiết lập
tất cả các thuộc tính: chiều rộng, style, màu sắc giữa
các cột
Slide 6 - Làm việc với thành phần mở rộng của CSS3 11
12. CSS3 LAYOUT
Cách thiết lập:
Slide 6 - Làm việc với thành phần mở rộng của CSS3 12
#introduction-content
{
width: 600px;
-moz-column-count:
3;
-webkit-column-
count: 3;
column-count: 3;
}
13. CSS3 LAYOUT
Thiết lập layout dạng hộp Flexible (hộp linh hoạt):
Là dạng bố cục mới trong CSS3
Đại diện cho một trong bốn dạng layout đang được
hỗ trợ bởi CSS2.1
Slide 6 - Làm việc với thành phần mở rộng của CSS3 13
#introduction-content { width: 600px; height: 150px; border: 1px solid
#821738; display: -webkit-box; -webkit-box-orient: horizontal; display: -
moz-box; -moz-box-orient: horizontal;
}
15. CSS3 USER INTERFACE
CSS3 cung cấp một số tính năng về phía người
dùng:
Thay đổi kích thước thành phần trên trang
Thay đổi kích thước hộp
Phác thảo
Các thuộc tính quy định:
Resize
box-sizing
outline-offset
Slide 6 - Làm việc với thành phần mở rộng của CSS3 15
16. CSS3 USER INTERFACE
CSS3 resize:
Quy định một thành phần có thể hay không thể thay
đổi kích thước bởi người dùng
Slide 6 - Làm việc với thành phần mở rộng của CSS3 16
.show_boxre{ border:2px solid; padding:10px 40px; width:300px;
resize:both; overflow:auto; }
17. CSS3 USER INTERFACE
CSS3 box-sizing:
Cho xác định yếu tố phù hợp với một khu vực
Slide 6 - Làm việc với thành phần mở rộng của CSS3 17
CSS3:
div.Container { width:30em; border:1em solid;}
div.box{box-sizing: border-box; -moz-box-sizing:border-box; -webkit-box-
sizing:border-box; width:50%; border:1em solid red; float:left;}
HTML:
<div class="container">
<div class="box">This div occupies the left half.</div>
<div class="box">This div occupies the right half.</div>
</div>
18. CSS3 USER INTERFACE
CSS3 Outline Offset:
Quy định một đường biên, bao phía bên ngoài
đường biên mặc định
2 cách tạo đường outline:
• không mất không gian
• Không phải dạng hình chữ nhật
Slide 6 - Làm việc với thành phần mở rộng của CSS3 18
19. CSS3 USER INTERFACE
CSS3 Outline Offset:
Slide 6 - Làm việc với thành phần mở rộng của CSS3 19
div { margin:20px; width:150px; padding:10px; height:70px; border:2px
solid black; outline:2px solid red; outline-offset:15px; }
<p><b>Note:</b> Internet Explorer and Opera does not support the
outline-offset property.</p>
<div>This div has an outline border 15px outside the border edge.</div>
20. TỔNG KẾT
Sử dụng CSS3 media queries để thiết kế layout phù
hợp với trình duyệt, thiết bị
CSS3 giúp người thiết kế tạo được dạng layout
nhiều cột hơn. Giúp bố trí thông tin thuận tiện, rõ
ràng cho người dùng
CSS3 cung cấp một số thuộc tính để tương tác với
người dùng khi duyệt web. Người dùng có thể thay
đổi kích thước các thành phần trên trang
Slide 6 - Làm việc với thành phần mở rộng của CSS3 20