the most important new sectioning elements in html5
DESCRIPTION
Responsive Web DesignTRANSCRIPT
The most important new sectioning elements in HTML5
Phần tử mới section định nghĩa một phần của một website với nội dung liên quan. Nó không nên được sử dụng giống như một phần tử chứa chung hoặc nhằm mục đích định style thuần túy. Trong trường hợp đó tốt hơn nên sử dụng một đối tượng div thông thường.
Một article định nghĩa một mảnh độc lập về nội dung cái được thể hiện như một chuẩn độc lập và cố định về ý nghĩa.
Một header định nghĩa phần đầu cho một tài liệu hoặc một phần.
Một footer được sử dụng để định nghĩa phần lề dưới của một tài liệu hoặc một phần.
Một nav định nghĩa một thiết lập liên kết điều hướng(navigation links) cái nên là thanh điều hướng chính trong trang web của bạn.
Một aside định nghĩa một phần với nội dung phụ. Nếu một aside được đặt với một article phần nội dung nên có liên quan với nhau để chỉ về một bài viết đặc trưng. Nếu nó được đặt bên ngoài một article nội dung nên có liên quan tới toàn bộ nội dung của site.
Mỗi phần tử phân cắt trong HTML5 trong hầu hết các trường hợp chứa đựng một heading. Bằng cách đẩy vào mỗi phần một tiêu đề đặc trưng bạn tạo ra một phần mới trong từng phác thảo của HTML5. Đây là một phần quan tọng giống như một phác thảo thích hợp thực hiện không chỉ cải tiến khả năng truy cập mà còn là điều rất tốt để SEO. Để tạo một phác thảo HTML5 bạn có thể sử dụng Outliner Tool. Trong trường hợp bạn thấy một “Untitled Section” cái tương ứng với một phần cơ sở trong mã HTML của bạn, bạn có thể cần định nghĩa một tiêu đề cho phần này. Để biết thêm thông tin về các tài liệu thuật toán phác thảo hãy xem các bài đăng trong blog của Derek Johnson(Derek Johnson’s blog).
Nếu bạn xem qua website chúng tôi sẽ tạo, bạn chắc chắn sẽ nghĩ: “Anh ta nói rằng chúng tôi chỉ cần một tiêu để cho mỗi phần phân cắt? Tôi không thấy bất cứ tiêu đề nào cho phần header và navigation, phần footer hay một vào phần khác”. Hiển nhiên hiển thị một tiêu đề cho mỗi phần phân cắt là không thực sự khôn ngoan.
Mặt khác chúng tôi cần định nghĩa tiêu đề cho mọi section để tạo ra một hình dạng thích hợp. Không sử dụng các sections trong tài liệu của chúng tôi ở mọi chỗ nó sẽ phá hủy toàn bộ cấu trúc của một tài liệu HTML5.
Một giải pháp cho vấn đề này là thêm tiêu đề cho mỗi section bên trong mã HTML của bạn và sau đó ẩn chúng đi bằng CSS. Bạn không nên ẩn chúng với thẻ display:none dẫu cho điều này cũng xóa chúng đi từ các hình dạng. Tốt hơn sử dụng thuộc tính clip của CSS để ẩn đi tiêu đề, cái được coi là cách tốt nhất để không bị cấm bởi công cụ tìm kiếm về việc ẩn nội dung. Nếu bạn quan tâm thêm về việc chúng kiểm tra như thế nào thì đây là câu trả lời(answer).
Tạo phần thân – Xây dựng cấu trúc của websiteHãy bắt đầu tạo các phần tử HTML5 trên cơ sở bố trí khái quát của chúng ta.
Việc đầu tiên chúng ta cần là một phần đầu trang(header). Phần header này sẽ bao gồm thanh điều hướng navigation và logo của chúng ta. Bên trong phần header chúng ta đẩy vào tiêu đề chính h1 và một đoạn văn bản(paragraph). Tiêu đề chính có thể là tên website của bạn hoặc logon và một câu khẩu hiệu hoặc thành ngữ mô tả về website.
Trên ảnh về cấu trúc của website vị trí tiếp theo ở bên dưới header được gọi là “Slider-Images”. Như những gì bạn có thể thấy khi bạn để ý tiếp tới website của chúng tôi, vị trí này sẽ chứa một Jquery image slider cái thay đổi ảnh sau mỗi 6 giây. Có rất nhiều Jquery Sliders có thể sử dụng ở đây nhưng trong hướng dẫn này, chúng tôi sẽ sử dụng plug-in slide show tương tác SlideJS cái bạn cần tải về bây giờ.
Như bạn có thể thấy trong các file ví dụ về SlideJS, Slider cần một div mới vọi là “slides” cái chứa các ảnh bạn cần để trình chiếu. Như vậy chúng ta sẽ tiếp tục trình bày nội dung lên phần đầu của những box chứa ảnh, chúng ta sẽ bao bọc chúng trong thẻ div có id “slides” và đặt nó trong một section mới có id là “container” và thêm vào nội dung mô tả cho mỗi cái ảnh vào bên trong một article riêng rẽ cái mà chúng ta gọi là “slider_content1”, “slider_content2”,….Chúng ta đang sử dụng ID đại diện cho các lớp ở đây bởi vì chúng ta cần xưng hô cho mỗi cái.
Lý do tại sao chúng ta sử dụng article cho 3 phần đầu tiên và sau đó là một thẻ div thông thường cho slides là vì các article đó chứa đựng các nội dung độc lập của chúng ta trong khi thẻ div chỉ chứa ba slider images và phần lớn có mục đích định dạng(áp style). Nếu bạn muốn tìm các cái ảnh có bản quyền miễn phí đó bạn có thể sử dụng trong website của mình, hãy tìm chúng trong Open-Image.net.
<section class="container"><h2 class="hidden">Lorem Ipsum</h2><article id="slider_content1"></article><article id="slider_content2"></article><article id="slider_content3"></article><div id="slides"><img src="img/slide1.jpg" alt="Some alt text"><img src="img/slide2.jpg" alt="Some alt text"><img src="img/slide3.jpg" alt="Some alt text"></div></section>
Bây giờ hãy thêm nội dung slider vào thẻ của chúng ta. “slider_content1” sẽ là nội dung cái được thể hiện khi ảnh “slide1.jpg” được hiển thị, “slider_content2” cho “slide2.jpg” và tương tự.Bên trong các article này hãy thêm vào heading, một đoạn text mô tả, và một liên kết read_more. Chú ý rằng chúng ta cũng thêm vào tiêu đề với một lớp “hidden” vào phần này, giống như chúng ta cần tạo một phác thảo HTML5 chính xác. Nếu bạn gặp những vấn đề quyết định, cái tiêu đề cần sử dụng cho site của mình được tôi khuyến khích cố gắng sử dụng một cấu trúc tiêu đề với các yếu tố về thứ hạng nhất định về thứ bậc lồng nhau của các section này. Đọc bài viết này, nếu bạn muốn tìm hiểu thêm về việc sử dụng tiêu đề trong section sao cho thích hợp. Đây là toàn bộ mã cho phần slider cho đến giờ trông giống như này(Tôi thêm bừa một vài đoạn text vào các tiêu đề và vùng văn bản).
Bây giờ chúng ta đã có cấu trúc HTML cho phần image slider, hãy chuyển qua yếu tố tiếp theo trong ảnh cấu trúc website của chúng ta. Như bạn có thể thấy, vấn đề tiếp theo cần làm có lẽ là spaces. Tôi đã gọi nó là spacer mặc dù nó không thực sự là một spacer, nó chỉ là một vài phần cam bên dưới phần image slider với một câu ngắn và một trường search.Với spacer chúng ta sử dụng một section mới với id là “spacer”. Lý do tôi sử dụng một ID đại diện cho một lớp để tất cả các section của trang như vậy tôi có thể tồn tại một liên kết trực tiếp tới một phần đặc biệt của trang(Ví dụ http://lingulo.com/tutorial-content/html5/#spacer kéo trực tiếp tới phần spacer). Bên trong spacer chúng ta đẩy vào một câu ngắn vào bên trong một đoạn văn mới và một thẻ div khác với class=”search”, cái chứa cấu trúc search của chúng ta.
Bạn đang làm rất tốt, chúng ta đã sẵn sàng hơn nửa trong toàn bộ mã HTML5 mà chúng ta cần. Nhìn lại vào ảnh cấu trúc. Bạn có thể thấy được từ bây giờ trở đi chúng ta còn hầu hết chỉ là “article”, cái được bao bọc trong các containers.
Hãy tiếp tục với section tiếp theo cái chứa ba bài viết(three articles) với một tiêu đề và một icon để next tới nó. Các icons tôi sử dụng trong hướng dẫn này được lấy từ Visualpharm và bạn có thể tìm thấy nó ở đây. Cũng như thêm vào tiêu đề h3 và một đoạn văn bản p với một đoạn text cho các bài viết. br class=”clear” được sử dụng để xóa bỏ sự thay đổi của ba bài viết cái tôi sẽ thêm vào file CSS của chúng ta trong phần tiếp theo của hướng dẫn này.
Bây giờ, hãy tạo section tiếp theo của chúng ta với một thẻ tiêu đề h2 và bốn articles bên trong nó. Bên trong article chúng ta để vào tiêu đề h3 ẩn và một phần tử HTML5 mới gọi là figure. Phần tử figure được sử dụng kết hợp với phần tử figcaption để giữ các ảnh hoặc biểu đồ(ở giữa những cái khác) và là một phần độc lập cái có thể di chuyển qua lại từ luồng chính của văn bản. Tạo một phần tử figure và thêm vào 1 cái ảnh và một figcaption cho nó.
Nếu bạn di chuyển chuột của mình lên trên những cái ảnh trong website xem trước bạn sẽ thấy rằng chúng sẽ bắt đầu sáng và sau đó sẽ phóng to biểu tượng lên đầu. Khi click lên một ảnh Lightbox2 sẽ mở ảnh đó lên trong một phiên bản to hơn. Chúng ta đã thêm Lightbox2 script vào phần đầu từ trước rồi. Để kích hoạt thay đổi kích thước ảnh bây giờ chúng ta cần tạo một mỏ leo xung quanh cái ảnh của mình và gán cho nó thuộc tính rel=”lightbox”. Thuộc tính href trỏ vào phiên bản ảnh có kích thước lơn.
Hiệu ứng phóng to biểu tượng khi di chuột trỏ tới được tạo hoàn toàn với các đặc tính CSS3. Phần tử HTML5 được sử dụng để tạo lớp đen trong suốt là một phần tử span bao bọc bên trong một móc leo. Chúng ta sẽ đặt mẫu cho thẻ span trong phần hai của hướng dẫn này để mặc định nó ẩn đi và chỉ hiện lên khi chỉ chuột lên nó.
Mã của bạn trong section “four_column” sẽ trông giống như sau:
Vấn đề tiếp theo chúng ta cần là một section khác với một tiêu đề ẩn, một article và một section khác bên trong nó.Section thứ hai chứa một tiêu đề ẩn và 2 articles mà mỗi cái cũng chứa một thẻ tiêu đề ẩn. Cung cấp cho phần bên ngoài section một ID, ví dụ “text_columns” và mỗi một column một class, ví dụ “column1” và “column2”. Chúng tôi dĩ nhiên cũng có thể không sử dụng các lớp và địa chỉ trực tiếp cho article và section. Lý do tôi thích sử dụng trong hầu hết các trường hợp là vì nó được tạo rất dễ dàng trong trường hợp bạn cần thay đổi mã HTML sau đó mà không làm thay đổi mã CSS.Bên trong cột thứ nhất đẩy vào một tiêu đề h3 và một đoạn văn bản p với vài dòng text. Tiếp theo cột thứ hai chúng ta sẽ đẩy 2 article hoặc div tùy thuộc vào nội dung liên quan đến nó và tồn tại độc lập hoặc không. Bên trong một trong hai chứa một đoạn văn bản p và một image. Các ảnh cần một lớp “rocket” và “clock”và sẽ được đặt hiệu ứng sau trong phần hai của bài hướng dẫn.
Chúng ta đã sẵn sàng nghiên cứu phần cuối trang(footer) cho website của mình. Bên trong phần footer chúng ta sẽ đẩy vào không chỉ một tiêu đề ẩn và một section với ba article để làm nổi bật 3
cột của footer mà còn một section khác với ID “copyright” cái mà chúng ta sẽ đặt ở vị trí cuối cùng trong footer của mình ngay sau đó ở phần hai của bài hướng dẫn. Bên trong section “copyright” chúng ta thêm vào một thẻ div với class “wrapper” cái sẽ đảm bảo rằng nội dung được đặt ở giữa và không phóng đại độ rộng tối đa(Chúng ta sẽ nói thêm và điều đó trong phần hai một cách chi tiết hơn). Lý do chúng ta sử dụng div ở đây thể hiện cho một article đó là trong tất cả các trương hợp chúng ta cần là một vật chứa đề phục vụ mục đích tạo kiểu dáng(Styling), điều này không thực sự liên quan và có nội dung độc lập bên trong. Bên trong thẻ div “wrapper” chúng ta thêm một chú thích copyright như là văn bản trống và một thẻ div khác với class “social” cái chứ tất cả các liên kết mạng xã hội.
Với section cái mà chúng ta chỉ tạo ở vị trí bắt đầu của footer một lần nữa bắt đầu với một tiêu đề ẩn và chứa 3 article với class “column”. Tiếp theo article thứ hai và thứ ba chúng ta cần ấn định các lớp khác, do đó chúng ta có thể xác định được mỗi article sau đó một cách riêng biệt trong CSS. Thêm vào class có tên “midlist” cho article thứ hai và class có tên “rightlist” cho cái thứ ba. Để thực hiện điều này, đơn giản thêm vào một khoảng trống sau “column” và thêm vào các lớp khác nhau đằng sau nó(<article class=”column midlist”>) Trong các article chúng ta cần thêm vào các nội dung cho chúng, bên trong cái đầu tiên, hãy đẩy vào một tiêu đề vào một đoạn text. Bên trong cái ở giữa và cái bên phải cũng thêm vào một tiêu đề và một danh sách không sắp xếp với một liên kết bên trong mỗi phần tử của danh sách. Mỗi liên kết có thể được bao bọc xung quanh một image và một phần tử span. Thẻ span chứa text của chúng ta cái chúng ta cần để hiển thị. Chúng ta đang sử dụng một thẻ span để xác định được vị trí của text trong mỗi cách thức chúng ta cần và hiển thị nó giống một phần thử khối(Giải thích thêm về sau này).
Vậy là nó đã sẵn sàng! Đóng thẻ body và thẻ html và chúng ta đã sẵn sàng với cấu trúc cơ bản của website của mình.
Trong phần hai của bài hướng dẫn chúng ta sẽ thiết kế cho phong cách cho trang của mình để tạo ra nó trông giống như phần preview nhưng chúng ta cũng sẽ thêm vào một vài đoạn HTML khi nó đạt được hiệu ứng của thiết kế tương tác.
Tôi hy vọng bạn thích phần đầu của hướng dẫn này, xin vui lòng nói cho tôi bạn thích nó như thế nào trong phần comment. Để tiếp thục với phần thứ hai(Cái được coi là tiếp sau phần này) của bài hướng dẫn, hãy xem ở bên dưới.
Trong phần hai của bài hướng dẫn tôi sẽ xây dựng mã CSS và JavaScript và thực hiện các bước cần thiết để thiết kế website tương tác nhằm tạo Website tương tác HTML tuyệt vời này. Đảm bảo rằng đã thực hiện phần đầu của hướng dẫn, nơi chúng ta xây dựng cấu trúc HTML cơ bản và thêm vào tất cả các script cần thiết.
Chúng ta đã sẵn sàng thêm vào CSS Reset của mình trong phần hướng dẫn trước. CSS Reste này sẽ chăm sóc mỗi sự khác nhau trong style chuẩn của các phần tử HTML bằng cách đơn giản là tạo lại tất cả các giá trị CSS. Bằng cách thức đó, chúng ta bắt đầu tạo styly từ những thứ linh tinh khác nhau nhưng chúng ta cần có ý nghĩ rằng ví dụ các đoạn văn bản sẽ không dài quá phần đệm của một trình duyệt đã được định nghĩa lại do đó chúng ta có thể định nghĩa mọi giá trị bằng tay.
Tạo style – định nghĩa các quy tắc toàn cụcTrong khi tạo stylesheet cho nó một chú ý rất quan trọng đó là luôn luôn sử dụng comment cho các phần khác nhau của file CSS. Phần đầu tiên là toàn cục hoặc phần chung nơi chúng ta sẽ thêm vào tất cả các style cái được sử dụng cho trạng thái bình thường của website và hầu hết trong các trường hợp còn lại không thay đổi. Thành phần đầu tiên chúng ta sẽ thiết kế style là phần body. Các sọc trên, dưới được tạo bởi việc định nghĩa độ dày 5px trong quy định phần body của chúng ta. Tương tự hãy định nghĩa màu background cho website của chúng ta cùng với phông chữ và màu chữ thông thường.
Phần tiếp theo chúng ta cần thiết kế style là các trường đầu vào(input fields). Để các trường input giống nhau ở hầu hết các trang trong website của chúng ta, tôi sẽ thêm vào style cho phần input trong phần chúng của file CSS. Trong website ví dụ chúng ta chỉ có hai loại input field khác nhau: một trường text input và một submit button. Đó là lý do chúng ta sẽ tạo một quy tắc input chung các sẽ bao quát cho tất cả các loại khác nhau của các trường đầu vào và một quy tắc thứ hai chỉ cho submit button.Nếu bạn xem trong mã CSS các trường input của chúng ta sẽ hầu như được lưu ý rằng chúng ta đang sử dụng các thuộc tính CSS3 không bao gồm các tiền tố định nghĩa cho các trình duyệt khác nhau(-webkit, -moz, …). Như đã cảnh báo trong phần trước của bài hướng dẫn này, chúng ta sử dụng một scipt gọi là Prefix Free cái tự động viết lại các quy tắc CSS tùy thuộc vào trình duyệt sử dụng bởi khách đến xem. Cái đó chúng ta có thể sử dụng các thuộc tính CSS3 bằng cách đơn giản là thêm và các quy tắc chung(ví dụ chỉ cần box-shadow đại diện cho –moz-box-shadow, -webkit-box-shadow, và box-shadow).
Tiếp theo hãy thêm vào các quy tắc cho các đoạn văn của chúng ta và các móc leo. Giống như chúng ta có thể xóa bỏ tất cả style bằng cách sử dụng reset.css chúng ta bây giờ cần định nghĩa margin(hoặc padding) cho site và line-heigh bằng tay cho các đoạn văn bản. Các móc leo nên kế thừa như font color từ thành phần cha và thay đổi nó bằng cách làm phai màu nó từ một màu nào đó cho một cái khác. Để thực hiện như vậy chúng ta sử dụng tính năng transitrion của CSS3(Để biết thêm thông tin về transition hãy đọc bài viết này). Sau khi chúng ta đã xóa tất cả các định nghĩa lại CSS Style, chúng ta cũng cần định nghĩa các thành phần cố định của mình. Trong trường hợp của mình chúng chỉ nên được hiển thị in đậm.
Chúng ta có 3 quy định khác trong phần chúng của file CSS của mình. Phần đầu tiên là quy tắc cho thành phần figcaption của chúng ta. Như đã cảnh báo trong phần trước của bài hướng dẫn một figcaption được sử dụng trong sự liên kết với thành phần figure để đánh dấu images hoặc diagrams. Trong website của chúng ta thành phần figure được sử dụng cho 4 cái ảnh nhỏ. Để nhấn mạnh tiêu đề của các dòng chú thích và để thêm vào các dòng giữa các tiêu đề và text của chú thích chúng ta sẽ thêm vào quy định CSS cho thành phần strong bên trong figcaption ngay bây giờ.
Tạo phong cách – Định nghĩa các quy tắc cho các section
Giờ đây, chúng ta đã có thể hoàn thành việc tạo các quy định thông thường cho CSS hãy bắt đầu định nghĩa các quy định cho các section khác nhau từ đầu đến cuối website của mình. Để tạo website tương tác của mình chúng ta sẽ thiết lập thuộc tính width là auto và định nghĩa max-width của mỗi section là 900px cho site của mình. Thực hiện điều này cho phép các section đạt 900px độ rộng khi trình cửa sổ trình duyệt rộng hơn 900px. Tuy nhiên khi trình duyệt có độ rộng nhỏ hơn 900px độ rộng của các section của chúng ta sẽ được điều chỉnh lại cho phù hợp với độ rộng của trình duyệt.
Như chúng ta muốn các section được đặt nẳm ngang ở giữa chúng ta sẽ thiết lập thuộc tính margin-right và margin-left là auto(xem một ví dụ ở đây). Các thành phần đặt ở giữa giống như vậy tuy nhiên nó không được hỗ trợ trong Internet Explorer 5. Giống như một vấn đề bạn có thể thiết lập body thuộc tính text-align thành center. Bản thân tôi dường như không còn bận tâm đến IE5 nữa vì nó hầu như không được sử dụng nữa.
Hãy bắt đầu tạo các quy tắc ngay bây giờ cho các section khác nhau trong website của mình.
header
Section đầu tiên cần quy định style là header của chúng ta. Với một website thực với một vài trang bạn có thể có nhiều thành phần header nhưng bạn có thể cần một header chính một class hoặc một ID để tạo các quy định đặc biệt cho thành phần đó. Trong trường hợp của chúng ta ngay cả khi chúng ta chỉ sử dụng một header cho toàn bộ website của mình chúng ta sẽ chỉ thêm vào 1 quy định cho toàn bộ các thành phần của header và một quy định cho tất cả các đoạn văn bản và tiêu đề h1 bên trong một header.
Với thanh điều hướng chính của mình, chúng ta sử dụng thành phần HTML5 mới nav. Khi chúng ta thêm vào thuộc tính CSS position:relative cho thành phần header chúng ta có thể sử dụng position:absolute ngay bây giờ để xác định vị trí cho thanh điều hướng ở góc bên phải, phía dưới của header của chúng ta.
Với danh sách không sắp xếp của mình cái chứa tất cả các liên kết điều hướng giống như một danh sách cá phần từ chúng ta sẽ xóa bỏ style chuẩn của danh sách(chỉ chấm tiếp theo cho mỗi phần từ của danh sách). Các phần tử danh sách của chúng ta sẽ xác định thuộc tính float cho mỗi phần tử của danh sách và thêm vào một giá trị padding để tạo khoảng không giữa mội phần tử của chúng. Với các anchor của các phần từ trong danh sách chúng ta sẽ định nghĩa một kiểu font và màu sắc và thiết lập text-transform thành uppercase để tạo tất cả các kí tự được in hoa. Cũng như thên vào một transition khoảng 0.25 giây và định nghĩa màu sắc trong trạng thái hover. Bằng cách này các liên kết sẽ mờ dần đi từ một màu nào đó khi hover lên chúng.
slider-image
section tiếp theo cần thiết lập style là section chứa slider-image(đừng quên viết một phần như là một comment mới bên trong file CSS của bạn để tao nó trông sạch sẽ hơn). Giống như một file ví dụ về Slides script chúng ta thiết lập độ rộng phần chứa là auto để tạo ra slider image có khả năng đặt lại kích thước tùy thuộc vào độ rộng của trình duyệt. với thẻ div có class slides cần để ẩn với CSS giống như nó sẽ được thiết lập trông thấy được bằng Slides script. Cũng như thên vào border(viền) cho thẻ divv ưới class là slidesjs-container nhằm ngăn ngừa slideshow bị nhấp nháy khi được tải về. Nội dung slider của chúng ta đã được xác định vị trí có liên quan với phần chứa slider của mình và lấy được một z-index cao hơn một cái nào đó từ phần chứa của chúng ta nhằm tạo nó không bị lặp lại các images slider. Như vậy chúng ta chỉ cần thể hiện slider-content1 tại thời điểm bắt đàu khi đang tải nội dung của site chúng ta sẽ thiết lập display thành none cho tất cả các ô nội dung slider ngoại trừ slider_content1.
Đến bây giờ, chúng ta đã thiết lập style bao bọc cho nội dung slider của mình hãy thêm vào một style cho các tiêu đề và các đoạn văn bên trong slider_content1, slider_content2 và slider_content3 của chúng ta. Để tạo hiệu ứng hai vòng tròn viền đơn giản thêm vào 0 cho các border bạn không cần thiết lập vòng tròng bên trong thuộc tính border-radius của chúng ta. Để sắp xếp cho các giá trị bên trong các thuộc tính đó là top-left, top-right, bottom-right, và bottom-left.
Với thuộc tính display của mình, chúng ta lựa chọn inline-block các được hiển thị các tiêu đề của chúng ta trên một dòng nhưng sẽ đảm bảo khả năng thiết lập style cho chúng giống như các thành phần khối(thiết lập độ rộng, độ cao, căn lề, vùng đệm và vv). Để tiện lợi hơn chỉ sử dụng block trong trường hợp của chúng ta đó là hình nền sáng cho tiêu đề sẽ tồn tại kiểu mở rộng như tiêu đề text của nó và không giống như các thành phần bao quanh nó.
Với các đoạn văn bản chúng ta sẽ định nghĩa padding tương tự như phần tiêu đề để tạo ra nó giống như ở trên một dòng và thiết lập margin-bottom để tạo ra một khoảng trống giữa đoạn văn với “Read more” button. Bạn cũng có thể thiết lập một border-radius nhỏ để tạo ra các viền bao bọc các đoạn văn.
spacer
Đến bây giờ chúng ta đã hoàn thành phần CSS cho slideshow của mình như vậy hãy di chuyển tới phần tiếp theo, “spacer” cam của chúng ta. Chúng ta thiết lập width thành auto để tạo ra nó được làm đầy hoàn toàn độ rộng của các thành phần bao quanh(Cái này là thành phần body).
Để định vị cho đoạn câu hỏi các được bao bọc bên trong một đoạn văn chúng ta không có thể chỉ định nghĩa một giá trị mặc định cho thuộc tính left. Nếu chúng ta làm điều đó thì câu hỏi sẽ di chuyển tới các vị trí khác nhau tùy thuộc vào độ rộng của trình duyệt và không nên giữ cố định tại một vị trí chính xác nào đó. Giải pháp là thiết lập position của đoạn văn là absolute và thuộc tính left là 50% cái định vị đoạn văn của chúng ta luôn ở giữa của phần spacer của mình. Sau khi thêm vào margin-left để di chuyển nó hơn một chút về phía bên trái. Với cách này đoạn văn sẽ luông luôn được giữa ở vị trí giống nhau đối với các độ rộng của trình duyệt. Để định vị cấu trúc tìm kiếm chúng ta thực hiện các vấn đề tương tự. Chú ý rằng chúng ta không cần tới Style cho các thành phần cấu trúc của mình như thể chúng ta đã sẵn sàng thêm vào một style chung trong phần global/general của file CSS của mình.
boxcontent (3 articles)
Phần tiếp theo của chúng ta gồm có 3 article mà mỗi cái có một iamge, một tiêu đề và một đoạn văn. Chúng ta lại cần thiết lập width của “boxcontent” của mình thành auto để tạo độ rộng tương đối với độ rộng của trình duyệt và thiết lập max-width tới giới hạn lớn nhất của độ rộng. Để tạo ra phần này nằm ở giữa chúng ta lại sử dụng auto để căn từ trái sang phải. Để tạo một khoảng không nhỏ từ đầu tới cuối chúng ta thiết lập padding. Giống như chúng ta cần định vị các article của mình kế tiếp mỗi cái khác hãy thiết lập thuộc tính float của chúng, thiết lập một độ rộng cố định và tạo một khoảng không nhỏ giữa chúng bằng cách thiết lập margin-right. Bên trong các article chúng tha hãy thiết lập float cho image sang trái và sắp xếp chữ ở vị trí trực tiếp tiếp theo các icon và không nằm bên dưới chúng. Bằng cách thiết lập float các icon, tiêu đề sẽ được định vị với text nằm kế tiếp icon image nhưng text các được định vị bên trong một đoạn văn sẽ chỉ giữ ở vị trí kế tiếp của ảnh miễn là những cái ảnh đứng im lại ở đây. Ngay khi text phỏng theo độ cao của image nó sẽ tiếp tục nằm ở viền bên trái của bài viết bên dưới icon. Để cố định điều này chúng ta cần định nghĩa margin-left cho đoạn văn bản để tạo nó nằm dọc trên một dòng với tiêu đề.
four_columns
Đến với hai phần tiếp theo, chúng ta sẽ kết hợp hai quy định trong theo thứ tự không có viết chúng trong hai khoảng. Với cả hai section là “four_colum” cũng như “text_column” chúng ta thiết lập font, độ cao dòng, độ rộng,… cũng như định nghĩa style cho các tiêu đề h2, h3.
Giống như trong phần cuối chúng ta cũng thiết lập float để định vị các article trong “four_column” để chúng nối tiếp mỗi cái khác. Để tạo hiệu ứng khi hover lên thumbnail images chúng ta sẽ thiết lập display thành block đầu tiên cho các anchor bên trong các article của chúng ta. Chúng ta cần chúng để hiển thị giống các thành phần khối như chúng ta nên thiết lập cho nó phù hợp với kích thước của chúng ta với kích thước của các thành phần bên trong của nó, và lấp đầy hết chiều cao và độ rộng của thumbnail image. Ngoài ra, thiết lập vị trí tương đối để vị trí có thể của các thành phần span “thumb_screen” nằm hoàn toàn bên trong nó. Thành phần span này sẽ được hiển thị ở trên đầu của image của chúng ta và chỉ thể hiện ra zoom icon và background sáng lên khi di chuột lên(hover status). Chúng ta cần định vị trí cho nó nằm trong một sự sắp xếp nhất định để tạo cho nó hướng lên trên đầu của bức ảnh.Với một vị trí quan hệ với thành phần span sẽ được hiển thị bên trên ảnh. Để tạo cho background trong suốt một nửa chúng ta sẽ thiết lập màu nền thành màu đen và thêm vào zoom icon giống như ảnh nền(nằm giữa chiều ngang và chiều dọc). Sau đó chúng ta thiết lập opacity về 0 để ẩn đi thành phần span ở chế độ chuẩn. Để không cản trở thành phần span đậm dần từ không nhìn thấy thành hiển thị hoàn toàn chúng ta sẽ thêm vào đặc tính CSS3 transition(để có thêm thông tin về nó hãy vào blog của tôi). Để thuộc tính opacity. Ở trạng thái hover của thành phần span chúng ta thiết lập opacity từ 0.5 để tạo độ trong suốt 50% khi để con trỏ chuột lên trên nó.
text_columns
Phần tiếp theo bao gồm hai cột, một article và một section các sẽ được thả trôi vào một phần của nó. Một trong hai cột nên có độ rộng bằng một nửa của website với độ rộng 900px. Để di chuyển cột thứ hai xuống dưới một chút để được căn giữa theo chiều dọc với cột thứ nhất chúng ta định nghĩa margin. Cột thứ hai là section có class=”column2” chứ hai article nơi mà mỗi cacsi có một vị trí được sắp xếp tương đối để có thể nằm bao trọn vẹn vị trí của rocket và clock icon.
Có một chút không cần thiết, chúng ta bây giờ sẽ tạo CSC animation cái bắt đầu khi hover lên rocket và clock icon. Có hoặc không đây là một đặc điểm có ích liên quan tới site của bạn và là cái mà bạn sẽ thấy thích thú muốn đạt được với hiệu ứng animation. Chú ý rằng CSS animations sẽ không hỗ trợ mọi trình duyệt và có thể trong một vài tường hợp làm cho hành vi không được chính xác(Ví dụ có thể rocket trong một số trình duyệt sẽ biến mất khi di chuột lên trên).
Khi để chuột lên trên rocket icon chúng ta cần nó bay tới đầu phía bên phải và mờ dần đi. Do đó hãy thiết lập opacity từ 0 khi đặt chuột lên(hover) và định nghĩa transition cho opacity. Chúng ta cần nó mờ dần trong 0.4 giây và lặp lại sau 0.2 giây. Để làm được điều này cần thêm vào một khoảng dừng như là giá trị cuối cùng trong thuộc transition của chúng ta. Bây giờ để rocket mờ dần khi đặt chuột lên trên hãy thêm vào đường dẫn animation. Để không phải thiết lập tất cả các keyframes bằng tay, chúng ta sẽ sử dụng công cụ Stylie để tạo ra một đường dẫn từ phía cuối góc trái tới phía đầu góc phải. Đơn giản chỉ việc copy mã CSS bên trong lớp “stylie” được sinh ra bởi công cụ vào trong quy định rocket:hover của chúng ta. Sau đó tạo một phần mới “keyframes” ở cuối cùng của file CSS nơi bạn thêm vào quy định keyframe(phần bắt đầu với “@keyframes stylie-transform-keyframes”). Bạn có thể cần phải sửa lại cho phù hợp thuộc tính translateX hoặc translateY để thấy được điểm bắt đầu của rocket icon(nếu bạn không thay đổi giá trị bằng tay, rocket của bạn có thể bắt đầu không chính xác từ một chỗ nào đó mà rocket icon bắt đầu trước cả khi hover lên nó). Xoay quanh các giá trị để làm sao trông nó đạt được hiệu ứng tốt nhất. Cũng như phải đảm bảo rằng thiết lập giá trị cho animation-iteration-count thành 1 do đó animation sẽ chỉ xảy ra một lần khi đặt chuột lên và rocket sẽ không bay mãi không dừng.
Đối với clock icon chúng ta cần một hiệu ứng sao cho trông giống một cái chuông báo đồng hồ đang reo. Để đạt được điều này chúng ta sẽ lại sử dụng Stylie để tạo chiều ngang và sau đó thiết lập animation-duration vào khoảng 100ms. Cũng phải thiết lập animation-iteration-count thành infinite để cho hiệu ứng lặp lại không ngừng. Hãy chú ý rằng chúng ta cần thay đổi tên của
keyframe của mình giống như tên “stylie-transform-keyframes” cái đã sẵn sàng được sử dụng cho keyframes của rocket của chúng ta.
.rocket:hover{ opacity:0; transition: opacity 0.4s ease 0.2s; animation-name: stylie-transform-keyframes; animation-duration: 500ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 0 0;}
.clock:hover{ animation-name: stylie-transform2-keyframes; animation-duration: 100ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: 0 0;}
/* KEYFRAMES */
@keyframes stylie-transform-keyframes{ 0% { transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75); } 100% { transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%); }}
footer
Chúng ta hướng tới phần footer của website của mình. Chúng ta cần nó phủ đầy toàn bộ bề rộng giống với phần body và có độ cao cố định. Chúng ta sẽ thiết lập độ rộng thành auto và định
nghĩa một giá trị độ cao. Để đảm bảo được như vậy cần thêm vào positon:relative vào trong sắp xếp để có thể định vị được section copyright ở phía cuối của footer.Bên trong footer của chúng ta, chúng ta có section khác với class=”wrapper” cái nên có độ rộng auto và max-width là 900px tương tự như các phần khác trong website của chúng ta. Điều này sẽ đảm bảo rằng nội dung của footer sẽ thay đổi độ rộng tùy thược vào độ rộng của trình duyệt.
Với ba cột nằm trong footer để chúng nằm kế tiếp nhau chúng ta sẽ thiết lập float cho chúng và thiết lập một màu font khác trong sắp đặt cho text để hiển thị chúng được rõ ràng trên một nền sáng. Cột nằm ở giữa(cột thứ hai) bao gồm một vài phần tử của danh sách với một vài icon chỉ hướng. Một phẩn tử trong danh sách có một vùng đệm(padding) và một border-bottom. Để di chuyển các phần từ thấp hơn một chút và tạo một cái nhìn cân xứng chúng ta sử dụng margin-bottom. Đối với các icon chỉ hướng chúng ta thiết lập ảnh nền và vị trí cho nó nằm bên trái và cách đỉnh 6px. Chúng ta cũng có thể định nghĩa padding cho text để không bị gối lên icon.
footer{ position:relative; clear:both; width:auto; height:350px; background:#333333;}
footer .wrapper{ line-height:25px; margin: 0 auto; padding-top:30px; width:auto; max-width:900px; font-size:14px;}
footer .wrapper .column{ font-family: 'Open Sans', sans-serif; color:#ababab; float:left; width:280px; margin-right:20px;}
footer .wrapper .column.midlist ul li{ display:block; width:auto;
padding:0 0 10px 25px; margin-bottom:10px; border-bottom: 1px solid #444444; background:url(img/arrowright2.png) left 6px no-repeat;}
footer .wrapper .column.midlist ul li a:hover{ color:#fff;}
Ở cột bên phải chúng ta sẽ thiết lập display thành block để các thành phần span nằm bên trong các phẩn tử của danh sách. Chúng ta cần text nằm bên trong thành phần span để hiển thị như là các khối thành phần trong một trật tự cần tạo một khoảng căn giữa những cái ảnh và text của chúng ta. Chúng ta thả trôi những cái ảnh theo trật tự để vị trí của nó nằm tiếp theo text. Từ khi thành phần span của chúng ta chứa đựng text được hiển thị giống như là các thành phần khối chúng ta cần phải định nghĩa điểm margin-left được bắt đầu từ viền trái của thành phần ul để tạo ra một khoảng giữa ảnh và text. Đối với cách ảnh, chúng ta sẽ định nghĩa một viền và một transition(sự chuyển tiếp) cho viền của chúng cái sẽ đảm bảo rằng mà của viền mờ dần từ một màu thành một màu khác khi đặt chuột lên trên.(mouse-hover).
Đối với tiêu đề h4 của chúng ta nằm trong phần footer chúng ta thiết lập một màu font cái mà nhìn tốt trên nền sáng và định nghĩa viền dưới troog giống chúng ta đã thực hiện với các tiêu đề trước.
footer .wrapper .column.rightlist ul li{ display:block; width:auto; margin-bottom:15px;}
footer .wrapper .column.rightlist ul li a span{ margin-left:95px; display:block;}
footer .wrapper .column.rightlist ul li a img{ transition: border .25s ease; float:left; border:3px solid #444444;}
footer .wrapper .column.rightlist ul li a img:hover
{ border-color: #5e5e5e;}
footer .wrapper .column h4{ font-size: 16px; color: #fff; border-bottom: 1px solid #444444; padding: 0 0 10px 0; margin-bottom: 10px;}
Giờ đây, chúng ta đã thiết kế style cho footer hãy định vị cho thông cáo copyright ở bên dưới cùng của footer. Nếu bạn đã xem mã HTML bạn sẽ thấy rằng chúng ta có một thẻ div với ID “copyright” cái mà chúng ta sẽ đặt vị trí nằm trong phần dưới cùng của footer và truyền cho nó một màu nền có độ sáng yếu. độ rộng của thẻ div này sẽ giống với độ rộng của footer do đó chúng ta sẽ thiết lập width thành 100%.
Bên trong phần copyright chúng ta có một thẻ div với class=”wrapper”. Chúng ta không thiết lập width hoặc max-width cho nó vì chúng ta đã định nghĩa một quy định footer.wrapper cái sẽ được áp dụng. Tuy nhiên, chúng ta cần thiết lập màu font và kiểu font, định nghĩa một padding và thiết lập position thành relative để có được ví trí cho phần button liên kết mạng xã hội tương xứng với phần wrapper. Thẻ div với các liên kết mạng xã hội sẽ được đặt ở góc bên phải và cách đầu phần wrapper của chúng ta 25px.
Nếu bạn đã xem mã HTML bạn sẽ thấy rằng các social button đơn giản được tạo bằng cách bao bọc mỏ neo(anchor) vòng quanh một image. Để các liên kết được đặt liên tiếp nhau chúng ta cần tạo float cho chúng giống như chúng ta thực hiện ở một số chỗ trước đây. Để đạt được hiệu ứng hover chúng ta sẽ đơn giản thiết lập tính mờ đục opacity trôi từ 30% tới 70% trong định nghĩa transition.
#copyright{ background: #1D1D1D; height:70px; position:absolute; bottom:0; left:0; width:100%;}#copyright .wrapper{ font-family: 'Open Sans', sans-serif; padding-top:25px; color: #5e5e5e;
font-size:14px; position:relative;}#copyright .wrapper .social{ position:absolute; right:0; top:25px;}#copyright .wrapper .social a{ transition: opacity .25s ease; opacity: 0.3; margin-left: 12px; display:block; float:left;}#copyright .wrapper .social a:hover{ opacity: 0.7;}#copyright .wrapper a{ color: #ABABAB;}
#copyright .wrapper a:hover{ color: #fff;}
Phần tiếp theo trong file CSS của chúng ta gọi là “MISC” và sẽ chứa các định nghĩa khác nhau, cái mà bạn không biết phải bắt đầu từ đâu. Đối với website của chúng ta, chúng ta cần định nghĩa 2 quy tắc bên trong phần này. Trong mã HTML bạn sẽ thấy một vài thẻ br với class “clear”. Đây là một sự cần thiết để xóa bỏ các định nghĩa float cái chúng ta sử dụng cho các thành phần định vị trí nằm ngang tiếp theo một cái nào đó. Đơn giản thử không thiết lập lớp này và bạn sẽ thấy tại sao chúng ta cần nó.
Quy tắc thứ hai chúng ta vẫn thường cần định nghĩa là các tiêu đề ẩn. Như đã cảnh báo trong phần trước của bài hướng dẫn chúng ta cần định nghĩa tiêu đều cho mỗi section trong văn bản của mình để tạo một cấu trúc HTML5 chính xác. Để các tiêu đều này không ảnh hướng tới cảm nhân, chúng ta sẽ ẩn tất các các thành phần này cái có class=”hidden” bằng cách sử dụng thuộc tính clip của CSS.
/* MISC */.clear
{ clear:both;}.hidden{ position:absolute; clip: rect(1px 1px 1px 1px); /* IE6 & 7 */ clip: rect(1px, 1px, 1px, 1px);}
Creating the styling – Making it responsiveChúng ta đã hoàn thành việc thiết kế phong cách cho website của mình và nó trống khá giống với website xem trước đó. Chỉ khác đó là website của chúng ta đã tạo không hoàn toàn responsive. Chúng ta đã sẵn sàng thiết lập width thành auto và định nghĩa max-width cho các section. Tuy nhiên điều này sẽ chỉ thay đổi độ rộng của các section còn nội dung bên trong các section đó có thể được đặt ở vị trí tồi hoặc chồng lên nhau. Bây giờ chúng ta sẽ sử dụng CSS Media Queries để định nghĩa các quy tắc chính xác cho các kích thước cửa sổ trình duyệt khác nhau. Tôi sẽ không giới thiệu về chủ đề media queries một cách chi tiết, nếu bạn cần biết thêm về chủ đề này, khiển tra các hướng dẫn phát triển ứng dụng web. Trong website của mình, chúng ta sẽ chỉ sử dụng thuộc tính max-width cho media queries của mình cái để định nghĩa độ rộng tối đa cho quy định tạo ra hiệu ứng. Do đó nếu bạn định nghĩa một quy tắc với max-width khoảng 500px sau đó quy tắc này sẽ tạo hiệu ứng miễn là độ rộng của chế độ xem nhỏ hơn 500px hoặc chính xác là 500px.
Để tạo cho website tương tác chúng ta cần xử lý vấn đề đầu tiên trong tất cả các công việc đó là nội dung gì là thích hợp và nên được hiển thị trên các màn hình nhỏ giống như thiết bị cầm tay hoặc máy tính bảng. Khi tạo một website bạn luôn tồn tại trong tâm trí ý tưởng làm thế nào để nó có thể xem được trên thiết bị di động ở ngay thời điểm bắt đầu của quá trình phát triển của mình.
Bắt đầu giảm bớt độ rộng cửa sổ trình duyệt của bạn đến khi bạn khám phá ra rằng một vài phần đã xuất hiện vị trí không đúng hoặc trông chúng không thực sự được tốt cho lắm. Trong trường hợp đó các dễ dàng nhất để xác định độ rộng hiện tại của website là sử dụng công cụ phát triển web của trình duyệt để lấy độ rộng của thành phần body. Để có độ rộng đó chúng ta sẽ cần tới định nghĩa một media query để bằng cách này hay cách khác thay đổi các sắp đặt của website của mình và trông nó được tốt trở lại. Tuy nhiên, chú ý rằng độ rộng đã được định nghĩa trong media queries có thể thay đổi tùy thuộc vào trình duyệt mà bạn sử dụng. Đối với Firefox scrollbar theo chiều dọc lấy được bao gồm cả độ rộng của chế độ xem điều đó có nghĩa là nếu bạn định nghĩa một media query với một max-width khoảng 1000px sau đó đối với Firefox các quy định media query sẽ xuất hiện vào khoảng 985px. 15px là độ rộng của scrollbar được trừ từ max-width. Để tìm hiểu thêm về vấn đề đó hãy kiểm tra chủ đề này trong blog post của tôi. Giải pháp cho vấn đề xảy ra trong trường hợp của mình có thể sử dụng một cùng đệm và đơn giản thiết lập max-width cao hơn một chút so với độ rộng cần thiết.
Vấn đề đầu tiên xảy ra với website của chúng ta là bạn sẽ phải nhận biết khi nào thay đổi độ rộng của cửa sổ trình duyệt của mình để khoảng 1215px như vậy “Read more” button trong phần slider của chúng ta trông như thể gối lên phần spacer. Làm thể nào có thể thoát khỏi được vấn đề này? Một giải pháp đó là có thể xóa bỏ hoàn toàn button(thiết lập display thành none) và đẩy phần “Read more” vào bên trong đọng văn bản giống như là một đoạn chữ thuần túy. Với cách đó, chúng ta sẽ sẵn sàng có được một vài khoảng trống. Để thực hiện được như vậy, thông thường chúng ta cần thêm vào một đoạn mã HTML vào trong file của mình. Thêm một anchor đằng sau mỗi đoạn văn bản bên trong hộp nội dụng slider của chúng ta và thiết lập cho nó một class “responsive_button”. Sau đó thêm một quy định vào file CSS để thiết lập display thành none cho tất cả các thành phần có class”responsive_button” bên trong đoạn văn bản chứa trong hộp nội dung slider.
#slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p .responsive_button{ display:none; color:#000;}
Trong quy định media query của mình bây giờ chúng ta đơn giản cần thiết lập display thành inline để hiển thị nó trên một dọng đằng sau đoạn văn bản và định nghĩa cho nó một màu font.
Tuy nhiên, đây là một vấn đề thông thường trừ khi đoạn chữ nằm bên trong đoạn văn bản thường bị gối chồng lên orange spacer. Điều gì chúng ta có thể thực hiện ở đây để giải quyết điều này để tạo ra nội dung slider lớn. Để thực hiện được như vậy chúng ta thiết lập cho nó width thành auto để tạo cho nó phù hợp với thành phần cha và tạo cho nó một margin-right để tạo ra một khoảng trống giữa nội dung của ô chứa slider và cạnh bên phải của slider images của chúng ta. Cũng như chúng ta cần kích thước font chữ nhỏ hơn các sẽ tạo được một số khoảng trống và trông nó sáng hơn một chút.
@media (max-width: 1215px){ #slider_content1, #slider_content2, #slider_content3 { width:auto; margin-right:50px; } #slider_content1 h2, #slider_content2 h2, #slider_content3 h2 { font-size:18px; } #slider_content1 p, #slider_content2 p, #slider_content3 p { font-size:14px; } #slider_content1 p .responsive_button, #slider_content2 p .responsive_button,
#slider_content3 p .responsive_button { display:inline; } .container .button { display:none; }}
Khi giảm bớt độ rộng nhiều hơn bạn sẽ phải chú ý rằng khi chúng ta lấy được max-width bên dưới vào khoảng 900px cái để chúng ta thiết lập cho các bè articles của chúng ta sẽ không nằm kế tiếp bất kì một cái nào khác. Để giải quyết vấn đề này hãy thay đổi kích thước font của spacer và trường input, đặt lại vị trí cho đoạn văn bản với các chữ phần câu hỏi nằm bên trong và thay đổi kích thức của trường input của mình bằng cách điều chỉnh các giá trị padding.
Một vấn đề khác xảy ra với phần “four_columns”. Dưới 900px một vài article với class “img-item” có thể bị chùm lên và chồng lên các article khác. Để giải quyết vấn đề này chúng ta sẽ thiết lập một độ rộng đặc biệt cho section của mình từ đó hai article được bao bọc trong dòng tiếp theo. Sau đó chúng ta định nghĩa một margin-top cho hai vùng bao bọc article để tạo một khoảng giữa hai dòng. Để trỏ tới article thứ ba và thứ tư(cái là một trong hai hàng) chúng ta sẽ sử dụng đặc tính CSS3 nth-of-type. Chú ý mặc dù đó là những gì sẽ không làm việc trên IE8 hoặc phiên bản thấp hơn. Nếu bạn cần đảm bảo cho tất cả các trình duyệt hỗ trợ điều này bạn có thể thiết lập một lớp đặc biệt cho các thể hiện article ba và bốn.
Đối với section text_columns chúng ta cũng cần đặt lại vị trí cho các artilce. Để thực hiện điều này hãy xóa bỏ đặc điểm float và thay đổi độ rộng của hai cột bằng cách thiết lập lại giá trị max-width. Để căn giữa các article nằm trong section chúng ta sẽ thiết lập margin-left và margin-right thành auto giống như chúng ta đã thực hiện ở khoảng thời gian trước đó. Chúng ta cũng không cần hai article nằm trong cột thứ hai(một cái với rocket và clock icon) để trôi về bên phải nữa và cần điều chỉnh lại margin để tạo cho nó trông tuyệt hơn.
Phần cuối cùng chúng ta cần điều chỉnh thành 900px đó là phần footer. Để tạo cho nó vừa với độ rộng nhỏ hơn của website chúng ta sẽ giảm bớt kích thước font và độ rộng của ba cột.
@media (max-width: 915px){ #boxcontent article { float: none; margin: 30px auto 0 auto; width: 60%; } #spacer { font-size:15px;
} #spacer .search { margin-top:19px; margin-right:-385px; } #spacer p { margin-left:-370px; } input { padding:4px; font-size:14px; } input[type="submit"] { padding: 1px 14px; } #four_columns { width: 500px; } #four_columns .img-item:nth-of-type(3), #four_columns .img-item:nth-of-type(4) { margin-top: 25px; } #text_columns article.column1, #text_columns .column2 { float:none; max-width: 500px; margin: 50px 30px 0 30px; } .column2 .row { float:none; margin:0 0 40px 50px; } footer .wrapper .column { font-size: 12px; width: 230px; }}
Khi giảm bớt độ rộng trình duyệt của mình thường xuyên hơn bạn sẽ phải chú ý tới một vài điểm đối với slideshow chỉ là nhỏ hơn và trông không đẹp nữa. Để xóa bỏ nó, chúng ta sẽ thiết lập giá trị top để giảm nhiều hơn giá trị nhằm tạo cho nó biến mất. Chúng ta không thể sử dụng display để xóa bỏ nó bởi vì slideshow sẽ không xuất hiện trở lại nếu nó đã bị xóa bỏ đi. Cũng như việc slideshow đã bị biến mất phần orange spacer sẽ bắt đầu chồng lên navigation của chúng ta do đó chúng ta cần định nghĩa chiều cao cố định cho header của mình. Chúng ta cũng có thể xác định vị trí cho navigation của mình bởi vì giờ đây mọi thứ đã được căn giữa, nó có thể trông khá hơn nếu đặt ở giữa. Để căn giữa nó đầu tiên chúng ta cần ghi đè giá trị top và bottom bằng cách thiết lập chúng thành auto. Sau đó chúng ta sẽ thiết lập thuộc tính left thành 50% và định nghĩa một tỉ lệ margin tương ứng để phân nửa độ rộng của navigation.
Chúng ta cũng có một số vấn đề liên quan đến space. Cấu trúc tìm kiếm và đoạn văn bản không được cố định tiếp theo những cái khác do đó chúng ta cần định vị trí cho chúng bên dưới mỗi cái khác. Chúng ta định nghĩa một chiều cao cố định cho spacer và thiết lập margin-right và margin-left thành auto để nó được căn giữa. Để có được lối thoát cho mỗi giá trị margin và left chúng ta sẽ thiết lập position thành static. Bằng cách định nghĩa một padding chúng ta tạo ra một vài khoảng trống bên treenvaf bên dưới cho đoạn văn. Cũng đúng như những gì chúng ta đã thực hiện với đoạn văn bản, chúng ta sẽ thực hiện như vậy cho phần cấu trúc tiềm kiếm của mình.
Bơi vì footer của chúng ta không dùng được nữa nên chúng ta sẽ định vị ba cột của nó nằm bên dưới mỗi cái khác. Để đạt được điều này đầu tiên chúng ta cần thiết lập height thành auto như kiểu nó đã được thiết lập thành 350px trước đó. Sau đó chúng ta thiết lập một độ rộng cố định cho wrapper bên trong footer và căn giữa nó. Ba cột nằm trong wrapper không được thả trôi(float) nữa mà chúng sẽ được định vị trí nằm dưới mỗi cái. Chúng ta cũng thiết lập width thành auto theo thứ tự để tạo cho nó phủ đầy vào toàn bộ độ rộng wrapper của mình. Vì không còn nhiều không gian ở phần footer nên chúng ta sẽ loại bỏ phần liên kết mạng xã hội.
@media (max-width: 765px){ .container { height:1px; top: -1500px; } header { height:120px; } header nav { right: auto; bottom: auto; left: 50%; top:100px; margin-left: -184px; }
#spacer { height:100px; } #spacer p { text-align:center; position:static; margin: 0 auto; padding:15px 0 7px 0; } #spacer .search { text-align:center; position:static; margin: 0 auto; } footer { padding-bottom:70px; height: auto; } footer .wrapper { width: 350px; margin: 0 auto; } footer .wrapper .column { margin-top:30px; float:none; font-size: 14px; width: auto; } footer .wrapper .social { display:none; }}
Đối với trường hợp 500px chúng ta vẫn sẽ sửa lại bố cục của website của mình. Với section “four_columns” hiện tại chúng ta sẽ hiển thị các article bên dưới mỗi cái. CHúng ta không cần một độ rộng cố định nữa, do đó chúng ta có thể thiết lập nó thành auto. Cũng như chúng ta không cần các article nằm bên trong section “four_columns” của mình để có thể nằm kế tiếp mỗi cái nữa, chúng ta sẽ xóa bỏ floating(thay đổi) và định nghĩa một độ rộng cố định.
Để phần wrapper của mình nằm bên trong footer và các article là rocket và clock chúng ta thiết lập width thành auto theo thứ tự để tạo cho nó phù hợp với độ rộng thành phần cha của nó. Không may navigation của chúng ta cũng bị phình ra do đó chúng ta cần suy nghĩ về một giải pháp. Chúng ta có thể giải quyết bằng cách chia nó thành hai phần cái mà chúng ta định vị bên dưới mỗi cái khác, nhưng tôi tìm thấy giải pháp tốt hơn để nhằm xóa bỏ hoàn toàn phần navigation và thay thế nó bằng một ô lựa chọn đơn giản. Để đạt được điều này chúng ta thêm vào mã HTML cho một select box bên trong header của website và gán cho nó một ID “alternative_menu”. Sau đó chúng ta thiết lập display thành none để ẩn nó đi theo mặc định và định vị trí cho nó hoàn toàn ở một nơi nào đó bên dưới tiêu đề đoạn văn bản chính. Trong media query của chúng ta, chúng ta sẽ thiết lập display thành block để tạo cho nó được hiển thị lên khi navigation ẩn đi.
Nếu bạn nhìn lại website và giảm bớt độ rộng của trình duyệt bạn sẽ thấy rằng website bây giờ sẽ phản hồi lại với sự thay đổi kích thước và trông rất tuyệt với mỗi kích thước màn hình. Rõ ràng, bạn luôn luôn có thể thực hiện nhiều điều nữa để tạo cho website của mình trông tốt hơn với các kích thước màn hình khác. Chỉ cần vui chơi một xíu với các giá trị và thêm vào các quy định cho mỗi một thành phần bạn cần phải thay đổi tại một kích thước màn hình đặc thù.
Creating the JavaScript – Coding the slider contentĐến bây giờ, chúng ta đã hoàn thành thiết kế cho website của mình, do đó chung ta sẽ tạo một đoạn mã JavaScript cho ô chứa nội dung slider để làm xuất hiển và mất đi khi ảnh trên slider được thay đổi. Để slider làm việc được chúng ta sẽ thêm vào mã JavaScript giống như trong file ví dụ về SlidesJS plugin và tạo ra một vài sự điều chỉnh. Một số lý do chúng ta cần phải định nghĩa độ cao trong hàm JavaScript cái mà có giá trị nhỏ hơn với giá trị thực của các ảnh trong slider. Tôi không đảm bảo rằng tại sao đây là một sự lựa chọn độ cao đơn giản cái tạo cho slider trông tốt hơn, trong trường hợp của chúng ta nó vào khoảng 235px.
Theo trình tự, các ô trong slider content của chungs ta được hiển thị và mất đi khi một cái ảnh trong slider được thay đổi, chúng ta cần thêm vào hai phương thức calback. Phương thức calback đầu tiên sẽ bắt đầu khi một slide bắt đầu thay đổi sang cái khác, cái thứ hai sẽ xuất bắt đầu khi một slide đã chuyển đổi hoàn thiện và không có sự thay đổi nào hết. Khi bắt đầu gọi calback chúng ta sẽ thêm vào một quy định để làm mờ tất cả ô chứa nội dung của slider bởi vì khi một slide được thay thế chúng ta không cần mỗi cái ô đó được hiển thị lên. Trong khi calback được hoàn thành chúng ta sẽ làm rõ ô nội dung của slider để nó tương ứng với bức ảnh hiện tại. Do đó nói rằng bức ảnh thứ hai được trình dieex sau đó “slider_content2” sẽ được hiển thị rõ lên. Để đạt được điều này chúng ta cần thêm vào một biết bên trong phương thức hoàn thiện của chúng ta cái sẽ luôn luôn trả về cho chúng ta số của slide hiện tại đang được hiển thị.
$(function() { $('#slides').slidesjs({ height: 235, navigation: false,
pagination: false, effect: { fade: { speed: 400 } }, callback: { start: function(number) { $("#slider_content1,#slider_content2,#slider_content3").fadeOut(500); }, complete: function(number) { $("#slider_content" + number).delay(500).fadeIn(1000); } }, play: { active: false, auto: true, interval: 6000, pauseOnHover: false, effect: "fade" } }); });
Creating the JavaScript – Coding the alternative menuNhư đã đề cập từ trước bây giờ chúng tôi sẽ thêm vào mã jQuery cho phần alternative menu của chúng ta, alternative menu xuất hiện trong trường hợp kích thước trình duyệt nhỏ hơn 500px. Khi chúng ta lựa chọn một item trên select box chúng ta cần gửi một lần nữa để lựa chọn trang. Để làm được điều đó chúng ta đơn giản sẽ thêm vào đoạn mã bên dưới bên trong $(document).ready phần này nằm bên trong file script.js.
$("#alternative_menu").change(function(){
$selected = $("#alternative_menu option:selected");
window.location.href = "http://www.lingulo.com/" + $selected.val();});
Với dòng đầu tiên, chúng ta định nghĩa một đoạn xử lý thay đổi cho alternative menu của mình. Bên trong handler xử lý thay đổi này, chúng ta thiết lập một giá trị “$selected”, cái giữ phần tử
đã chọn từ alternative menu của chúng ta. Trong bước cuối, chúng ta thiết lập windows.location.href cho domain của mình và thêm vào thuộc tính value đằng sau domain. Bây giờ hãy thêm vào trang chúng ta cần để gọi lại một lần nữa vào bên trong thuộc tính value trong mã HTML của chúng ta. Để gọi lại một lần nữa tới trong ví dụ http://www.lingulo.com/contact bạn sẽ phải thêm cái này vào bên trong alternative menu của mình.
<option value="contact" >Contact</option>
alternative_menu của chúng ta sẽ có thể làm việc ngay bây giờ, Tuy nhiên chỉ sử dụng một select bõ giống như một mobile menu không phải là cách tốt nhất. Bây giờ tôi sẽ trình bày với bạn làm cách nào để thêm vào một sự điều hướng tốt hơn cho một vùng nhiển thị có kích thước nhỏ.
Với mobile menu chúng ta chỉ tạo một cách đơn giản để xây dựng và đảm nhận công việc tốt hơn, tuy nhiêeehiee xuất phát từ quan điểm thân thiện với người dùng thì quan điểm về một select box không phải là cách tốt nhất để thực hiện. Do đó hãy bắt đầu tạo một thanh điều hướng di động, giống như trong bản preview cái chốt kéo xuống khi click vào kí hiệu được đặt phía góc trên bên trái. Đầu tiên chúng ta cần thêm vào mã HTML cho thanh điều hướng di động. Chúng ta dĩ nhiên đơn giản có thể sử dụng thanh điều hướng có sẵn và sửa lại cho nó phù hợp với màn hình mobile nhưng trong trường hợp này chúng ta thêm vào một menu rời bời vì chúng được coi như một bảng danh sách các phần tử khác trên mobile hơn là trên màn hình desktop.
Để bắt đầu hãy xóa bỏ các menu phụ trước đó trong mã HTML và thêm vào một thẻ div với id là mobileMenu. Thêm vào một danh sách không sắp xếp với tất cả các phần thử của menu cũng như là các yếu tố li ở bên trong. Đó là những gì cho meu, bây giờ hãy thêm vào mã HTML cho kí hiệu ở góc trên bên trái(ba thanh bên trên những cái khác). Các thanh này được tạo ra bằng cách thêm vào ba thẻ span bên trong một thẻ div và định vị chúng nằm bên trên những cái khác. Đoạn mã HTML như vậy được viết giống như dưới đây:
<div class="toggleMobile"> <span class="menu1"></span> <span class="menu2"></span> <span class="menu3"></span></div><div id="mobileMenu"> <ul> <li><a href="javascript:void(0)">Home</a></li> <li><a href="javascript:void(0)">Porfolio</a></li> <li><a href="javascript:void(0)">About</a></li> </ul></div>
Bây giờ hãy di chuyển tới phần jQuery của thanh điều hướng mobile của mình. Khi trang được tải thành công chúng ta xem như việc đầu tiên trong tất cả là ẩn mobile menu trong trường hợp mặc định(kể từ khi đó nó chỉ nên được hiển thị khi click lên trên kí hiệu). Khi click lên trên .toggleMobile chúng ta xem như mobileMenu được trượt xuống hoặc lên tùy thuộc vào việc có hay không nó đã sẵn sàng mở hoặc không(điều này được thực hiện bằng cách sử dụng phương
thức jQuery slideToggle). Ngoài ra, chúng ta muốn làm động kí hiệu .toggleMobile giống như ở phần demo. Chúng ta sẽ thực hiện điều đó sử dụng CSS3 transitions và trước hết chúng ta thực hiện thêm vào lớp active cho kí hiệu của mình. Để chắc chắn rằng khi ai đó thay đổi kích thước cửa sổ trình duyệt của họ thành độ rộng lớn hơn 500px thì mobile navigation không được hiển thị chúng ta cũng nên thêm vào sự kiện resize cái được thực hiện khi người dùng thay đổi độ rộng của trình duyệt. Với sự kiện resize đó chúng ta kiểm tra có hay không độ rộng của trình duyệt là lớn hơn 500px và nếu như vậy chúng ta sẽ ẩn mobile menu đi và xóa lớp active trên toggleMobile của mình. Toàn bộ mã jQuery sẽ giống như thế này:
(function ($, window, document, undefined){
'use strict';
$(function (){
$("#mobileMenu").hide();$(".toggleMobile").click(function(){
$(this).toggleClass("active");$("#mobileMenu").slideToggle(500);
});});$(window).on("resize", function(){
if($(this).width() > 500){
$("#mobileMenu").hide();$(".toggleMobile").removeClass("active");
}});
$(document).ready(function(){
$("#mobileMenu").change(function(){
$selected = $("#mobileMenu option:selected");window.location.href = "http://www.lingulo.com/" + $selected.val();
});});
})(jQuery, window, document);
Bây giờ hãy thay đổi mã CSS cho mobile navigation của chúng ta. Chúng ta cần thanh navigation được định vị cố định trên đỉnh mọi trang của mình. Menu có khả năng rộng bằng cửa soowroorcuar trình duyệt(100%) và không hiện thị ở chế độ mặc định.
#mobileMenu{ position : fixed; top : 0; left : 0; width : 100%; display : none;}
Các yếu tố của danh sách nằm bên trong navigation của chúng ta(Cái được xem như các menu items) sẽ được hiển thị giống như những khối. Bạn có thể tạo thiết kế cho chúng tuy nhiên bạn muốn, trong trường hợp của mình, chúng ta sử dụng một màu nền màu cam, một font màu trắng, các padding và khoảng cách giữa các dòng giống như là một viền mỏng. Ngoài ra chúng ta cần căn giữa các đoạn văn bản và tạo chữ in hoa.
#mobileMenu ul li{ display : block; background-color : #E56038; color : #fff; padding : 12px 0; letter-spacing : 0.1em; text-align : center; text-transform : uppercase; border-bottom : 1px solid #CC5836;}
Công tắc bật tắt cho mobile(The mobile toggle switch) ở phía góc trên bên trái sẽ không được hiển thị ở chế độ mặc định khi đó chúng ta sẽ chỉ làm cho nó hiển thị trên kích thước màn hình nhỏ hơn 500px sử dụng media queries.
.toggleMobile{ display : none;}
Bây giờ hãy chuyển tới phần media queries của chúng ta bên trong file CSS và thêm vào đoạn mã cho kích thước mà hình dưới 500px. Chúng ta cần hiển thị mobile menu của mình ở màn hình nhỏ và đặt lên bên trên các thành phần khác, do đó định nghĩa z-index cái sẽ có độ cao phù hợp để sắp xếp cho phần menu nhằm định vị nó thực sự nằm bên trên các nội dung khác.
#mobileMenu{ display : block; z-index : 99;}
Tiếp theo, hãy đặt cố định nút chuyển đổi ở góc phía trên bên trái, tạo cho nó một độ rộng 40px và một độ cao khoảng 36px và tạo z-index cao hơn một chút cho mobile menu(Khi chúng ta tác động vào nút chuyển đổi ở bên trên menu khi đó nó sẽ được mở).
.toggleMobile{ position : fixed; top : 10px; left : 10px; display : block; width : 40px; height : 36px; cursor : pointer; z-index : 999;}
Bây giờ hãy chuyển tới phần mát mẻ, chúng ta muốn ba thanh của nút chuyển đổi của mình được định vị tuyệt đối bên trong thẻ div .toggleMobile. Do đó chúng cần độ rộng 40px và chiều cao 8px, có một màu nền và hiệu ứng chuyển tiếp với một tùy chỉnh đường cong bizier đơn giản. Đúng như cảnh báo từ trước đó trong hướng dẫn này, tham số thứ ba của thuộc tính chuyển tiếp mô tả các thức một hiệu ứng sẽ được thực hiện. Bạn có thể sử dụng công cụ này để tạo đường cong bezier cho mình hoặc sử dụng một cái có sẵn giống như ease hoặc linear. Do đó chúng ta cần chuyển tới địa chỉ của tất cả các thuộc tính vị trí cái có thể được đặt hiệu ứng và trong suốt quá trình chuyển tiếp được thực hiện trong khoảng 0.35 giây.
.toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3{ display : block; position : absolute; width : 40px; height : 8px; left : 0; background : #EDA28C; -webkit-transition : all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition : all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
Khi chúng ta cần những thanh được đặt bên trên tất cả các cái khác chúng ta bây giờ sẽ thay đổi giá trị top cho mỗi thanh.
.toggleMobile span.menu1{ top : 0;}.toggleMobile span.menu2{
top : 14px;}.toggleMobile span.menu3{ top : 28px;}
Vấn đề cuối cùng chúng ta cần thực hiện là định nghĩa một lớp thực sự cho bút chuyển đổi của mình. Khi nút chuyển đổi được click vào và menu được mở ra cái thấp nhất trong ba thanh sẽ được ẩn đi, các cái khác được định vị lên bên trên những cái khác và sau đó được đặt vắt chéo nhau.
.toggleMobile.active span.menu1{ top : 14px; -webkit-transform : rotate(45deg); -moz-transform : rotate(45deg); -o-transform : rotate(45deg); -ms-transform : rotate(45deg); transform : rotate(45deg); -webkit-transition : all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition : all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);}.toggleMobile.active span.menu2{ -webkit-transform : rotate(-45deg); -moz-transform : rotate(-45deg); -o-transform : rotate(-45deg); -ms-transform : rotate(-45deg); transform : rotate(-45deg); -webkit-transition : all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition : all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);}.toggleMobile.active span.menu3{ opacity : 0; -webkit-transition : opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition : opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
Additional features – Creating skiplinksNếu bạn có rất nhiều nội dung trên trang web của mình sau đó có thể có ích cho khác viếng thăm của bạn nếu như chúng có một skiplink(liên kết bỏ qua). Với một skiplink chúng ta có thể trở về đầu trang bằng cách đơn giản là click vào một button. Nếu bạn kéo xuống dưới website demo bạn sẽ thấy rằng một button nhỏ sẽ xuất hiện ở góc dưới phía bên phải của trang. Click vào
button đó sẽ kéo trang của chúng ta lên trên đầu. Để tạo được skiplink này chúng ta sẽ download các file mã nguồn từ quick tip này. Với file “index.html” chúng ta copy mã jQuery cái cơ bản làm đậm dần button nếu chúng ta đã di chuyển lớn hơn 200px từ trên đầu trang trở xuống và xóa bỏ nó đi trong trường hợp ngược lại nếu chúng ta cho di chuyển nhỏ hơn 200px tính từ đầu trang. Trong phương thức click chúng ta định nghĩa rằng trang sẽ được kéo lên trên với khoảng 300ms khi button đã được click.
Chúng ta cũng cần chèn thêm button của mình vào bên trong mã HTML. Để thực hiện điều đó chúng ta đơn giản thêm vào một anchor trong phần footer của website của mình và đặt cho nó một lớp là “go-top”. Bạn bây giờ có thể thiết kế cho button như bạn thích hoặc đơn giản copy style từ file CSS bên trong các file tài nguyên, cái mà chúng ta vừa tải về.
Improving out site’s performanceBây giờ thì website của chúng ta đã hoàn thành hãy tìm hiểu xem làm cách nào chúng ta có thể cải tiến tốc độ đặc biệt trên các thiết bị mobile. Đầu tiên, điều dễ dàng chúng ta có thể thực hiện tăng tốc thời gian tải là chỉ rõ độ rộng cà chiều cao của các thuộc tính cho tất cả các ảnh của mình. Khi trình duyệt tải một trang nó sẽ cố gắng hiển thị nội dung trước khi toàn bộ ảnh được tải hết. Trình duyệt sẽ bỏ qua các khoảng trống cho mỗi bức ảnh và làm đầy những khoảng trống này khi các bức ảnh được tải về hoàn toàn. Tuy nhiên nếu bạn không định nghĩa kích thước cho một bức ảnh thì trình duyệt sẽ không biết bao nhiên khoảng không cần bỏ ra cho nó. Do đó hãy thêm các thuộc tính độ rộng và chiều cao cho tất cả những bức ảnh của chúng ta, chính xác là 3 bức ảnh trong slider(Bởi vì kích thước của nó sẽ được thiết lập bởi SlideJS). Chú ý rằng chúng ta không cần thêm “px” vào các thuộc tính độ rộng và chiều cao.
<img src="img/Buzz-Private-icon.png" width="64" height="64" alt="alt text about the private icon"/>