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
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 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
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPTMasterCode.vn
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
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 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 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
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPTMasterCode.vn
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
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
Pdf tim hieu_c_sharp__va_ung_dung-mastercode.vnMasterCode.vn
Sau này để giúp cho việc lập trình ASP nhanh hơn thì công cụ Visual InterDev, một IDE
(Integrated Development Environment) ra đời. Visual InterDev tạo ra các Design Time
Controls cho việc thiết kế các điều khiển trên web,… Tiếc thay Visual InterDev không bền
vững lắm nên sau một thời gian thì các nhà phát triển đã rời bỏ n
Bài viết này dành cho những bạn đã thông thạo về C++ và muốn tiếp cận C# một cách nhanh chóng. Tuy nhiên, những
bạn mới bắt đầu học C# cũng có thể xem nó như là một bản tóm tắt về C# nhằm định hướng tốt hơn trong việc học ngôn
ngữ này
Introduction ...................................................................................12
Code Examples .......................................................................................................................15
Chapter 1: Using Dynamic Management Objects .......................16
Compatibility Views, Catalog Views, and DMOs ..............................................................17
DMO Security and Permissions ...........................................................................................21
Performance Tuning with DMOs ........................................................................................22
Navigating through the DMOs .....................................................................................24
Point-in-time versus cumulative data ..........................................................................26
Beware of the watcher effect .........................................................................................29
Using DMOs with other performance tools ...............................................................29
Summary ..................................................................................................................................32
Chapter 2: Connections, Sessions and Requests ........................33
Sysprocesses versus DMOs ...................................................................................................35
Connections and Sessions ....................................................................................................37
sys.dm_exec_connections ..............................................................................................38
sys.dm_exec_sessions .....................................................................................................40
Who is connected? ..........................................................................................................42
Who is connected by SSMS? ..........................................................................................44
Session-level settings .......................................................................................................45
Logins with more than one session..............................................................................47
Identify sessions with context switching ....................................................................48
Identify inactive sessions ...............................................................................................48
Identify idle sessions with orphaned transactions .....................................................51
Requests ...................................................................................................................................52
Overview of sys.dm_exec_requests ..............................................................................53
Overview of sys.dm_exec_sql_text .......................
Dù bạn là ai, dù mục đích học tiếng Anh của bạn đơn thuần chỉ là có tấm bằng trong tay để xin việc hay cao siêu hơn là có thể nói thông viết thạo thì việc nằm lòng các ngữ pháp tiếng Anh ẩn chứa sức mạnh ghê gớm dưới đây cũng là bước cơ bản giúp bạn master tiếng Anh
Scalability and optimization are constant
concerns for the developer and operations
manager. The Performance Zone focuses on
all things performance, covering everything
from database optimization to garbage
collection, tool and technique comparisons,
and tweaks to keep your code as effcient
as possible.
Google công bố thông tin lịch xu hướng ngành 2017 mastercode.vnMasterCode.vn
Các doanh nghiệp cần luôn có mặt trên online để khách hàng dễ dàng thấy họ mỗi khi tìm kiếm. "Mùa vụ" hay giai đoạn mà lượng
tìm kiếm về sản phẩm dịch vụ của doanh nghiệp trên Google bỗng gia tăng chính là thời điểm tuyệt vời để tận dụng.Các doanh nghiệp
có thể tối đa hoá doanh thu trong thời kì cao điểm này bằng cách lên chiến lược quảng cáo "luôn online" gắn liền với mục tiêu mùa.
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.
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vnMasterCode.vn
Meta Tag là thẻ dùng để cung cấp các thông tin về website một cách tóm gọn đối với các trình duyệt lẫn người dùng hay bot từ các search engine. Mọi người hay nghe Meta Keyword, Meta Description, Meta Page title,..
Pd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vnMasterCode.vn
Google Webmaster Tools • Google Analytics phân tích traffic • SEO Power Suite , web auditor đ onpage • Ahrefs, phân tích t khóa và Link • OpenSiteExplorer phân tích link profile • Firexfox Extensions: SEO Doctor cho onpage, NoDofollow • SEOMoz Toolbar đ check PA và DA •Free Monitor for Google đ check RANK •SEOMOZ pro check onpage
Pdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vnMasterCode.vn
Cơ chế hoạt động Google Tên miền Cấu trúc website Meta Tag (Title, Description, H1-H6, ALT...) URL thân thiện, Sitemap, robots.txt Keyword Density Tốc độ tải trang
Pdfbài 7 máy tính xác tay và máy in bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
Những chú ý đặc biệt khi hỗ trợ người dùng máy tính xách tay Cài đặt, cấu hình, tối ưu, sửa chữa các thiết bị ngoại vi hay dùng với máy tính xách tay Nâng cấp, thay thế các thiết bị máy tính xách tay Nguyên lý hoạt động của máy in Cài đặt máy in
Pdfbài 6 bảo trì máy tính bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
Tìm hiểu các quy trình xử lý đảm bảo an toàn Tìm hiểu phương pháp bảo trì phòng ngừa cho máy tính cá nhân Tìm hiểu cách phát hiện và xử lý sự cố máy tính
Pdfbài 5 bảo trì và tối ưu windows bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
Đưa ra kế hoạch bảo trì phòng ngừa Rà soát các thiết lập Windows trọng yếu Làm sạch ổ cứng Chống phân mảnh ổ đĩa Kiểm tra lỗi ổ cứng Rà soát các chương trình khởi động và dịch vụ Tiến hành các thủ tục sao lưu Lập kế hoạch khắc phục thảm họa Sao lưu dữ liệu người dùng / toàn bộ ổ cứng Tối ưu Windows Các công cụ tối ưu: Task Manager, MSConfig, Services Console, Computer Management Cải thiện hiệu năng Windows Đưa ra kế hoạch bảo trì phòng ngừa Rà soát các thiết lập Windows trọng yếu Làm sạch ổ cứng Chống phân mảnh ổ đĩa Kiểm tra lỗi ổ cứng Rà soát các chương trình khởi động và dịch vụ Tiến hành các thủ tục sao lưu Lập kế hoạch khắc phục thảm họa Sao lưu dữ liệu người dùng / toàn bộ ổ cứng Tối ưu Windows Các công cụ tối ưu: Task Manager, MSConfig, Services Console, Computer Management Cải thiện hiệu năng Windows
Pdfbài 4 ổ cứng hard drive bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
Biết được các công nghệ chế tạo ổ cứng Hiểu được cấu tạo ổ cứng Phân biệt rõ các chuẩn giao tiếp giữa hệ thống với ổ cứng Thông hiểu cách tổ chức lưu trữ dữ liệu trong ổ cứng Giải quyết các vấn đề liên quan đến ổ cứng Biết được các công nghệ chế tạo ổ cứng Hiểu được cấu tạo ổ cứng Phân biệt rõ các chuẩn giao tiếp giữa hệ thống với ổ cứng Thông hiểu cách tổ chức lưu trữ dữ liệu trong ổ cứng Giải quyết các vấn đề liên quan đến ổ cứng
Pdfbài 3 cpu và ram bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
Nhận biết được đặc điểm và thông số kỹ thuật của các CPU dùng cho máy tính cá nhân Thông hiểu cách lựa chọn CPU cho hệ thống Thông hiểu cách lắp mới và thay thế CPU Thông hiểu các phương pháp tản nhiệt cho CPU Thông hiểu các loại RAM khác nhau và nguyên lý hoạt động của chúng. Thông hiểu các vấn đề cần thiết khi nâng cấp RAM
Pdfbài 1 giới thiệu chung về phần cứng bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
Nhắc lại các khái niệm cơ bản về phần cứng và phần mềm. Giới thiệu về các thành phần của máy tính. Nắm được vị trí sắp xếp của các thành phần bên trong case, các loại case khác nhau. Nắm được các thông số về nguồn điện được sử dụng để vận hành hệ thống máy tính. Ước lượng công suất của hệ thống và chọn bộ cấp nguồn và thiết bị lưu điện cho phù hợp. Nhận biết và xử lý một số vấn đề thường gặp liên quan đến nguồn điện
Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...MasterCode.vn
Tìm hiểu các cách tạo truy vấn. Thực hiện truy vấn trên nhiều bảng. Tìm hiểu các khái niệm trong biểu thức tiêu chuẩn. Tìm hiểu cách xây dựng biểu thức tiểu chuẩn
2. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Một số thẻ HTML5
Chèn nhạc mp3 thay cho Flash
Chèn video mp4 không cần dùng Flash
Kiểm tra thuộc tính form bằng html5 không dung Javascript
Kiểm tra email
Kiểm tra số nhập
2
Convert PSD to HTML5/CSS3
3. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Kiểm tra URL
Tham khảo thêm: http://w3schools.com/html5/
Làm việc với CSS3
Định nghĩa các thẻ HTML5 là các block.
header, footer, section, aside, nav, article {
display: block;
}
Style của Introduction
#intro {
position: relative;
margin-top: 66px;
padding: 44px;
background: #467612 url("images/intro_background.png") repeat-x;
/* Them thuoc tinh (TT) trinh duyet vao TT background-size */
-webkit-background-size: 100%; /* Safari browsers */
-o-background-size: 100%; /* Opera browsers */
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
3
4. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
/* Them thuoc tinh (TT) trinh duyet vao TT border-radius */
-moz-border-radius: 22px; /* Firefox browsers */
-webkit-border-radius: 22px; /* Safari browsers */
}
Tại id intro này, chúng ta nhận thấy có 2 thuộc tính mới là: background-size và
boder-radius.
Background-size: được sử dụng để thiết lập kích cỡ của hình nền so với box
(ở đây là intro), nó sẽ giãn nở theo độ rộng của box.
Boder-radius: được sử dụng để định nghĩa bán kính đường tròn của góc bo
khung viền của id intro, thiết lập các thông số cho thuộc tính này, có thể làm
cho góc bo đường viền của các bạn trở nên tròn trịa hơn.
Đây đều là các thuộc tính CSS3. (-moz, -webkit) là để thông báo cho trình
duyệt tương ứng với nó hiểu được. Vì các thuộc tính CSS 3 hiện nay còn rất ít
trình duyệt hỗ trợ, nên hầu hết các thuộc tính CSS 3 đểu phải thêm vào các
thuộc tính trình duyệt vào trước nó.
Style của Content và Sidebar
#content {
display: table;
}
#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
}
4
Convert PSD to HTML5/CSS3
5. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
aside {
display: table-cell;
width: 300px;
}
Khu vực mainContent và sidebar theo thiết kế là sẽ nằm cạnh nhau. Thông thường theo truyền
thống chúng ta sẽ sử dụng thuộc tính float để định nghĩa nó nằm trên cùng 1
dòng, nhưng trong CSS3, chúng ta sẽ sử dụng table.
Trong CSS 3, thuộc tính display có giá trị table dùng để hỗ trợ xử lý việc chia
bảng, cột, ô và dòng, có thể chia dòng và cột bằng CSS và dễ định hình hơn
cho những bạn không quen với float . Ở đây sử thiết lập display:table và
display:table-cell có nghĩa là định nghĩa#content là 1 bảng, #mainContent và
aside sẽ tương ứng là 1 ô và nằm trên cùng 1 dòng, thuộc bảng #content.
column-count: số dòng cần chia.
column-gap: khoảng cách giữa 2 cột.
HTML
<div>
<p>Lorem ipsum dolor sit amet...</p>
<p>Pellentesque ut sapien arcu...</p>
<p>Vivamus vitae nulla dolor...</p>
...
</div>
CSS
.blogPost div {
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
5
6. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
/* Them thuoc tinh (TT) trinh duyet vao TT Column-count */
-moz-column-count: 2;
-webkit-column-count: 2;
/* Them thuoc tinh (TT) trinh duyet vao TT Column-gap */
-moz-column-gap: 22px;
-webkit-column-gap: 22px;
}
Thực hành HTML5 & CSS3
Bo góc hình trên web với CSS3
Trong thiết kế web, đặc biệt là các trang bán hàng việc trình bày sản phẩm ấn tượng
sẽ thu hút khách hàng chọn mua sản phẩm. Các bạn có thể làm nổi bật sản phẩm
bằng nhiều cách khác nhau trong đó việc trình bày hình ảnh có bo góc rất hay được
chọn lựa, nếu bạn thêm hiệu ứng bóng đổ thì càng ấn tượng hơn.
Có 2 cách để bo góc cho ảnh trên web:
Cách 1: Sử dụng photoshop để thiết kế hình, cách này hay ở chổ phù hợp cho mọi
trình duyệt vì thế được sử dụng phổ biến tính đến thời điểm tôi viết bài viết này
(tháng 06/2012). Tuy nhiên cách này sẽ làm mất nhiều thời gian của bạn đấy.
Cách 2: Sử dụng hoàn toàn bằng code CSS3, với cách này sẽ tiết kiệm thời gian
cho các bạn hơn. Tuy nhiện nó chỉ thể hiện trên các trình duyệt mới (IE 10.0, firefox,
Chrome,…), đều này bạn cũng đừng quá bận tâm vì các trình duyệt đang cập nhật
liên tục và hoàn toàn miễn phí. Yên tâm sử dụng nha bạn.
Trong bài viết này tôi sẽ minh họa với các bạn cách trình bày sản phẩm cho trang
web bán hàng (bán hoa tươi) với hình ảnh được bo góc và bóng đổ rất chuyên
nghiệp chỉ với CSS3.
Bước 1:
Trước khi thực hiện bạn download source bài thực hành ở đây, giải nén folder trên
Desktop (hoặc bất cứ đâu bạn muốn) rồi tạo site bằng dreamweaver, ở đây tôi minh
họa bằng bảng Dreamweaver CS5.5.
Bạn double click vào file spmoi.html để mở ra như sau:
6
Convert PSD to HTML5/CSS3
7. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Ở đây tôi đã trình bày sẵn cho các bạn một khung <div class=spmoi> để chứa tất cả
sản phẩm, và trình bày 1 sản phẩm với hình minh họa, tên sản phẩm có
class=tensp, giá sản phẩm có class=giasp, nếu xem ở chế độ thiết kế các bạn thấy
các thành phần chưa được định dạng như sau:
Bước 2:
Công việc tiếp theo của bạn là copy > Paste thành nhiều sản phẩm (6,9, 12,.. tùy
bạn). đồng thời thay đổi hình, tên sản phẩm, giá tương ứng. ở đây tôi sẽ copy thêm
5 sản phẩm nữa để minh họa.
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
7
8. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Nếu chuyển sang màn hình thiết kế thì bạn đã đoán được các sản phẩm được trình
bày như thế nào rồi phải không, dĩ nhiên chúng chưa được định dạng nên chỉ là một
cột từ trên xuống xem chẳng giống trang web tí nào cả.
8
Convert PSD to HTML5/CSS3
9. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Bước 3:
Bây giờ là lúc các bạn định dạng cho các sản phẩm của mình bằng CSS, các bạn
phải chú ý đến tên của từng đối tượng nha:
-
div chứa tất cả sản phẩm: class=spmoi
-
Hình sản phẩm: class=sp
-
Tên sản phẩm: class=tensp
-
Giá sản phẩm: class=giasp
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
9
10. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Trước hết tôi sẽ quy định khung chứa tất cả các sản phẩm có chiều rộng: 450px
(.spmoi), div chứa mỗi sản phẩm có chiều rộng: 150px (.spmoi div) và canh trái để
sản phẩm sắp xếp theo dòng và cột.
Tương tự tôi sẽ định cho tên sản phẩm in đậm, size:18px, màu text xanh đậm (
.tensp), tương tự bạn có thể định dạng cho giá sản phẩm.
Bước 4:
Giờ đã đến lúc bo góc và tạo bóng đổ cho hình sản phẩm
10
Convert PSD to HTML5/CSS3
11. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Bạn thêm code như sau để bo góc cho các sản phẩm:
Trong đó:
border-radius: 10px; > bo góc tròn đều 10px cho các góc của hình.
border: solid 1px #666666; > định kiểu đường viền, size, và màu cho đường viền.
box-shadow: 2px 2px 2px #FF0000; > Các tham số theo thứ tự: Vị trí bóng đổ theo
trục x, y, size và tham số cuối cùng là màu của bóng đổ.
Bây giờ bạn hãy nhấn F12 để xem thành quả củ mình trên trình duyệt (nhớ là xem
bằng trình duyệt Firefox, Chrome, Opera hoặc IE version mới nha).
Ấn tượng không các bạn, hãy bắt tay làm thử mới biết mình thật sự đam
mê!@?
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
11
12. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Tạo nền chuyển sắc cho web với CSS3 mà không dùng hình
Để tạo nền chuyển sắc cho web bạn có 2 cách thực hiện:
Cách 1:
Theo phương pháp cổ điển thì các bạn sẽ sử dụng hình vẽ từ photoshop kết hợp
với CSS, cách này tuy mất thời gian nhưng hay ở chổ xem được trên mọi trình
duyệt.
Cách 2:
Dùng code CSS3, cách này đở mất thời gian (Copy code > Paste là xong) web
duyệt nhanh hơn, tuy nhiên chỉ chạy tốt trên các trình duyệt mới, các trình duyệt cũ
bó tay.
Với các bạn làm web tôi tin chắc bạn đã biết cách 1 vì vậy hôm nay tôi giới thiệu với
các bạn cách tạo nền chuyển sắc cho web mà không cần dùng hình (Cách 2), cách
này giúp web của bạn chạy nhanh hơn, làm rất đơn giản (Copy code > paste). Tuy
nhiên nó không hỗ trợ các trình duyệt cũ đặc biệt là IE phải từ Version 10.0+,
Firefox, Opera, Chrome thì OK.
Nào ta bắt đầu nha:
Bước 1:
Tạo file *.html mới bằng bất cứ phần mềm soạn thảo web nào bạn muốn, tôi dùng
Dreamweaver CS5. Ở phần code CSS bạn copy > Paste đoạn code sau vào thẻ
<style>
…
</style>
Phần nội dung web bạn tự lo nha, muốn viết gì cũng được.
Sau khi có nội dung bạn nhấn F12 để xem trên trình duyệt (nhớ dùng Firefox để thử
nghiệm nha, dùng IE là bó tay luôn nha bạn).
12
Convert PSD to HTML5/CSS3
13. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Quá đẹp đúng không nào, chẳng cần dùng cái hình nào cả. Trong đó màu chuyển
sắc có 3 tham số:
-
top: kiểu tô linear thẳng từ trên xuống (Có thể sử dụng: left, right, bottom)
-
#F9F: màu 1
-
#FFF: màu 2
-
repeat-x: màu chuyển sắc lặp theo trục x.
Bước 2:
Thay đổi các tham số để có các kiểu nền chuyển sắc như ý:
Tô chuyển sắc từ trái sang phải, repeat-y
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
13
14. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Tô chuyển sắc từ trái sang phải, repeat-y
Tô chuyển sắc kiểu tròn từ tâm
Các bạn thử nghiệm nha, rất đơn giản@!#
14
Convert PSD to HTML5/CSS3
15. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Thực hành: Thiết kế giao diện shop hoa tươi
Việc thiết kế giao diện web (Xây dựng web tĩnh) phải qua nhiều bước khá phức tạp,
trong bài viết này tôi sẽ giới thiệu đến các bạn chi tiết các bước thiết kế một trang
web tĩnh. Bắt đầu với việc thiết kế giao diện từ photoshop đến cắt giao diện và cuối
cùng là trình bày trang web bằng ngôn ngữ HTML và CSS.
Việc thiết kế giao diện web được chia làm 3 phần như sau
Phần 1: Thiết kế giao diện bằng photoshop
Phần 2: Cắt giao diện web
Phần 3: Layout web với HTML và CSS
Các bước chuẩn bị cho bài thực hành
Download các file trong forder Source để lấy hình và mẫu thiết kế.
File thiết kế bằng photoshop phải giữ nguyên Layer để cắt giao diện cho web.
Phần mềm sử dụng:
1. Photoshop > vẽ và cắt giao diện
2. Dreamweaver > Layout HTML & CSS
Bây giờ hãy bắt tay ngay vào công việc
Phần 1: Thiết kế giao diện bằng photoshop
Hình bên dưới minh họa sản phẩm hoàn thành sau khi thiết kế bằng photoshop, bạn
có thể thay đổi theo ý tưởng của riêng mình.
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
15
16. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Bước 1
Hãy bắt đầu với việc tạo file mới có kích thước 1000x1200px, resolution: 72dpi,
mode màu: RGB color
Bước 2
16
Convert PSD to HTML5/CSS3
17. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Tạo các đường hướng dẫn (Guides lines) để định vị trí các thành phần trong mẫu
thiết kế của bạn.
Nhấn Ctrl + R > Click phải trên thước > chọn Pixel
Kéo từ thước ngang và dọc các đường hướng dẫn cho file thiết kế (tham khảo ảnh
bên dưới)
Tiếp theo bạn thêm hình nền cho trang web bằng hình người mẫu có trong folder
Sources. Copy hình người mẫu sang file thiết kế > Nhấn phím Ctrl+T > thu nhỏ hình
cho phù hợp với kích thước trang web để tạo hình nền ảnh.
Bước 3:
Bây giờ bạn sẽ ẩn bớt hình người mẫu cho nền tự nhiên hơn.
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
17
18. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Trên layer ảnh vừa copy > chọn Add new Layer Mask > Tô màu đen lên layer mask
để che một phần hình ảnh.
Bước 4 :
Tạo nền trong suốt trên ảnh nền
Tạo vùng chọn hình chử nhật (85% trang thiết kế) > Tạo layer mới, chọn màu tím
(Hoặc màu trắng) cho forground > nhấn Alt + Delete > tô màu tím trong vùng chọn.
Giảm Opacity còn 25 đến 35 % để có nền trong suốt như hình.
Bước 5:
Tạo menu left
Vẽ vùng chọn HCN bên cột trái của giao diện > tạo layer mới > tô màu trắng > giảm
Opacity: 70%
18
Convert PSD to HTML5/CSS3
19. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Thêm text cho menu, dùng công cụ Type Tool > vẽ vùng chọn HCN > nhập text
copy từ file web mẫu.
Bước 6
Tạo menu top
Vẽ vùng chọn HCN > tạo layer mới > tô màu đen
Copy layer màu đen tô màu đỏ > nhấn Ctrl + [ > chuyển layer xuống dưới
Thêm text cho menu
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
19
20. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Tương tự bạn sẽ thêm ngôn ngữ và giỏ hàng vào trang thiết kế.
Bước 7
Thêm quảng cáo, sản phẩm
Copy và paste hình quảng cáo vào file thiết kế
Mở các file hoa mẫu
20
Convert PSD to HTML5/CSS3
21. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Chọn công cụ Crop tool > set thuộc tính như hình > Crop các sản phẩm có cùng
kích thước với nhau
Vẽ vùng chọn Cắt ảnh > Enter
Copy các hình đã Crop sang file thiết kế > so thẳng hàng và cách đều
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
21
22. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Thêm tên sản phẩm, giá bán, giỏ hàng
Copy cho các sản phẩm còn lại > đổi nội dung
22
Convert PSD to HTML5/CSS3
23. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Tương tự cho các sản phẩm
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
23
24. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Bước 8
Thêm form tìm sản phẩm
Chọn công cụ vẽ vùng chọn HCN có bo góc > chọn màu trắng > vẽ
Thêm nút tìm kiếm và text
Bước 9
Thêm phần Footer cho trang web
Đã xong phần thiết kế giao diện trong chủ, nhấn Ctrl + 0 để xem kết quả.
24
Convert PSD to HTML5/CSS3
25. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Bạn có thể Seve As thành các trang như gioithieu.psd, dichvu.psd, chitietsp.psd,
lienhe.psd,… và thay đổi nội dung ở cột trái để hoàn thành bườc thiết kế giao diện
bằng photoshop.
Trong phạm vi bài viết này tôi chỉ minh họa cho các bạn trang index, còn các trang
còn lại các bạn thực hiện tương tự nhé.
Phần 2: Cắt giao diện web
Việc biến một giao diện được thiết kế trong Photoshop thành HTML là một phần rất
quan trọng trong thiết kế web. Sau này nếu bạn muốn tự tạo giao diện cho trang
web của mình cho dù nó động hay là web tĩnh, thì việc chuyển một thiết kế từ PSD
sang HTML là việc đầu tiên bạn phải làm.
Trong phần 1 tôi đã hướng dẫn bạn cách thiết kế giao diện trang web shop hoa tươi
bằng photoshop. Trong phần này, chúng ta sẽ sử dụng một giao diện đã thiết kế ở
phần 1 để thực hiện cắt lấy hình ảnh đưa lên tài liệu html.
Cắt giao diện web là cắt lấy hình ảnh cho tài liệu html, còn phần văn bản và phần
lặp lại các bạn sẽ bỏ đi. (Phần văn bản cho web các bạn sẽ xử lý ở phần lập trình và
lấy từ database).
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
25
26. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Nguyên tắt cơ bản:
Mỗi sản phẩm > 1 file hình.
Hình nền hay màu chuyển sắc > lấy đúng bước lặp lại và lưu thành 1 file hình.
Sử dụng các định dạng hình cho web: *.jpg, *.png, *.gif.
Công cụ sử dụng:
Slice tool > vẽ vùng chọn cho hình, mỗi vùng chọn > tạo thành 1 file
Slice Select Tool > chỉnh vùng chọn của Slice tool
Bước 1:
Trước tiên các bạn nên phẩn tích giao diện để có được cái nhìn tổng thể nhất về
giao diện mình sẽ cắt css. Từ đó bạn sẽ xác định được phần ảnh cần lưu lại và
phần ảnh cần bỏ đi. Với giao diện này tôi chi làm 4 phần: Header: gồm logo, ngôn
ngữ và menu top. Phần menu-left, cột phải: gồm các sản phẩm và phần footer.
Bây giờ chúng ta sẽ bắt đầu cắt giao diện theo phân chi ở trên, bắt đầu với phần
header của mẫu thiết kế.
Với phần này bạn sẽ lấy logo, giỏ hàng, 2 lá cờ, phần menu và nền bỏ qua.
Sử dụng Slice tool > vẽ các vùng chọn và đặt tên tương ứng. bắt đầu cho logo
26
Convert PSD to HTML5/CSS3
27. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Tương tự cho các phần còn lại như hình bên dưới.
Bước 2:
Cắt hình các sản phẩm và banner quảng cáo
Dùng Slice tool > vẽ vùng chọn cho sản phẩm 1 > double click đặt tên sp1.
Dùng công cụ Slice Select Tool > chọn copy vùng chọn Slice của sản phẩm 1 cho
các sản phẩm còn lại > đạt tên tương ứng: sp2, sp3, sp4,...
Tương tự bạn chon cho banner quảng cáo và đặt tên banner.
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
27
28. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Trường hợp có 9 nút giỏ hàng cho 9 sản phẩm giống nhau nên bạn chỉ cần lưu
đúng 1 giỏ hàng.
Bước 3:
Tiếp theo bạn sẽ lưu hình ảnh cho web
Chọn File / Save for web and Devices... (Ctrl + Shift + Alt + S), chọn định dạng file
cho từng vùng chọn tương ứng như sau
Các sản phẩm, banner > *.jpg
Logo, các button > *.png-8
28
Convert PSD to HTML5/CSS3
29. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Click Save > chọn folder mới để lưu với file name: zzzzz, Save as Type: Images
Only > chọn Save.
Bây giờ các bạn đã có các hình ảnh trong folder images, hãy chọn các file ảnh bạn
đã đặt tên và lưu lại, các file có tên là zzzz... bạn hãy xóa bỏ.
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
29
30. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Bước 4:
Tiếp theo là cắt lấy nền trong suốt và ảnh nền.
Dùng Slice vẽ vùng chọn hình vuông nhỏ khoản 2x2pixel > double click > đặt tên nts
Để có nền trong suốt bạn phải ẩn hình nền và background màu trắng > chọn File /
Seve for Web and Devices... > chọn định dạng hình là: png-24 > Save
Tiếp theo bạn sẽ ẩn hình sản phẩm, menu, logo để lấy hình nền (nếu tinh ý bạn có
thể chuyển hình nền lên trên cùng sẽ nhanh hơn). > Vẽ vùng chọn bằng Slice tool
cho hình nền và đặt tên là bg.
Chọn Save for web and Devices > chọn định dạng file *.jpg > Save.
30
Convert PSD to HTML5/CSS3
31. TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com
Bây giờ bạn hãy lưu các hình đã cắt vào folder images trong website.
Bạn thấy việc cắt giao diện web cũng khá đơn giản và lý thú, tuy nhiên đây là giao
diện khá đơn giản. Trong thực tế giao diện sẽ khó hơn nhiều, vì thế bạn phải luyện
thật cẩn thận cho trường hợp này trước đã. Ở phần tiếp theo tôi sẽ hướng dẫn các
bạn cách layout giao diện bằng html và css.
Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ
31