NexTGen Web Bài 08: Tạo NavigationBar Layout Mục tiêu Giải thích thẻ ngữ nghĩa HTML5. Giải thích thẻ bố cục có ngữ nghĩa HTML5 Giải thích hữu dụng điều hướng(navigation bar) Mô tả điều hướng dựa đồ họa văn Giải thích đồ ảnh Giải thích phân chia bố cục HTML5 © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang Giới thiệu Việc thiết kế web site đòi hỏi phải sử dụng số phần tử nguyên tắc để nhận kết mong muốn. Sử dụng nguyên tắc phần tử giúp phát triển trang web phong phú, hấp dẫn, hiệu thẩm mỹ. Sử dụng số thẻ HTML đồ họa giúp phát triển trang web hữu ích hiệu quả. Thanh điều hướng đóng vai trò quan trọng việc đưa trang web thân thiện với người dùng . © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang Các thẻ ngữ nghĩa HTML5 HTML5 phát triển tới mức độ cao hơn, giới thiệu phần tử mang ngữ nghĩa. Các thẻ phát triển để tạo cấu trúc ngữ nghĩa ổn định. Phiên HTML trước sử dụng phổ biến thẻ div để hoàn thành nhiều công việc khác để tạo cấu trúc HTML. Hạn chế với thẻ div làm bối rối cho người dùng nhiều thẻ div sử dụng đoạn mã lớn. HTML5 giới thiệu hai loại thẻ ngữ nghĩa cụ thể là, mức văn cấu trúc. © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang Thẻ ngữ nghĩa có tính cấu trúc 1-7 Là phần tử mức khối, sử dụng để cấu trúc trang. Các phần tử ngữ nghĩa có tính cấu trúc sau: Article Article Nav Nav Thẻ Thẻ ngữ ngữ nghĩa nghĩa có có tính tính cấu cấu trúc trúc Section Section Header Header © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang Aside Aside Footer Footer Thẻ ngữ nghĩa có tính cấu trúc 2-7 Có Có ý ý nghĩa nghĩa hơn khi nội nội dung dung bên bên trong thẻ thẻ section section có có liên liên quan quan với với nhau Tương Tương tự tự như một thẻ thẻ div div Thể Thể hiện một vùng(section)của vùng(section)của một tài tài nhưng phần phần tử tử section section có có ý ý Section Section nghĩa nghĩa ngữ ngữ nghĩa nghĩa hơn liệu liệu Web Web Được Được sử sử dụng dụng để để nhóm nhóm các nội nội dung dung liên liên quan quan © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang Thẻ ngữ nghĩa có tính cấu trúc 3-7 Được Được sử sử dụng dụng như là một container container có có chứa chứa một nhóm nhóm các nội nội dung dung giới giới thiệu thiệu Đại Đại diện diện cho cho tiêu tiêu đề đề của Header Header Hiện Hiện nay trang trang web web sử sử dụng dụng một tiêu tiêu đề đề duy nhất ở trên cùng của một trang trang web web trang trang gọi gọi là tiêu tiêu đề đề trên Có Có thể thể được sử sử dụng dụng một trong hai hai là ở trên cùng của tài tài liệu liệu hoặc ở trên cùng của một phần phần © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang Thẻ ngữ nghĩa có tính cấu trúc 4-7 Chứa Chứa thông thông tin tin của tác tác giả, giả, thông thông tin tin bản quyền, quyền, vv vv Có Có thể thể xuất xuất hiện như phần phần Footer Footer Có Có thông thông tin tin về các tài tài liệu liệu Web Web chân chân tranghoặc tranghoặc trong các tài tài liệu liệu hoặc đoạn đoạn Có Có thể thể có có nhiều nhiều phần phần tử tử cuối cuối trang trang trong một tài tài liệu liệu HTML5 HTML5 © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang Thẻ ngữ nghĩa có tính cấu trúc 5-7 Có Có thể thể được ở trên, trên, dưới, dưới, hoặc chí ở giữa của một trang trang Web Web Được Được sử sử dụng dụng cho cho việc việc biểu biểu diễn diễn Aside Aside Không Không bắt bắt buộc buộc phải phải có có một phần phần nội nội dung dung có có liên liên quan quan với với các tử tử aside aside đặt đặt ở bên bên phải phải bên bên văn văn bản chính của tài tài liệu liệu trái trái của trang trang web web Nó Nó tự tự sắp đặt đặt như một slidebar slidebar © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang Thẻ ngữ nghĩa có tính cấu trúc 6-7 Biểu Biểu diễn diễn cho cho một phần phần của một Nav Nav trang trang web web có có chứa chứa liên liên kết kết chuyển chuyển hướng hướng / / các menu menu đến đến các Được Được tạo tạo ra cho cho các thông thông tin tin điều điều hướng hướng chính trang trang Web Web khác khác Cho Cho phép phép người người dùng dùng điều điều hướng hướng thông thông qua qua các trang trang web web và site site © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 10 Các phần tử HTML5 Layout 7-8 Ví dụ . Archive Number One Sample Blog Archive Number Two home help contact Copyright © 2012-2013 Links © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 25 Các phần tử HTML5 Layout 8-8 định nghĩa nội dung cho trang, site. Ví dụ . Sample Blog Archive Number One Archive Number Two home help Copyright © 2012-2013 contact © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 26 Thanh điều hướng Là phần tử quan trọng thiết kế Web. Bố cục Web thể vật lý cụ thể ngoại trừ menu điều hướng quán. Điều hướng công đoạn kiến trúc thông tin trang web. Thiết kế web, trình đơn menu điều hướng, ngang thẳng đứng. Thanh điều hướng phần trang web trang trực tuyến nhằm hỗ trợ khách truy cập duyệt qua tài liệu trực tuyến. Trang web có một điều hướng điều hướng phụ mà bao gồm liên kết đến phần quan trọng trang web. © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 27 Thanh điều hướng dạng văn 1-2 Một số người dùng trình duyệt trang web tắt chế độ đồ họa, trình duyệt sử dụng với khả đồ họa tối thiểu. Đối với tình vậy, cần thiết để cung cấp điều hướng dựa văn tạo điều hướng độc lập. Thanh điều hướng dựa văn không liên kết với biểu tượng dễ dàng để tạo ra, hiển thị trình duyệt Web. Lợi việc sử dụng điều hướng dựa văn làm giảm thời gian tải trang. Mặc dù điều hướng dựa văn dễ dàng để tạo thú vị, có tương tác hấp dẫn thị giác cho khách truy cập. Nó hiển thị theo chiều ngang theo chiều dọc. © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 28 Thanh điều hướng dạng văn 2-2 Ví dụ điều hướng dạng văn Home | News | Contact | About This is a Text-based Navigation Bar © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 29 Thanh điều hướng dạng đồ họa Nhiều lôi so với điều hướng dựa văn sử dụng biểu tượng. Làm tăng khả sử dụng trang với lựa chọn tốt biểu tượng cho điều hướng. Ngoài ra, làm cho trang web đáng ý cho người sử dụng truy cập vào trang Web. Điểm bất lợi là, sử dụng hình ảnh, phải thời gian lâu cho trang để tải. Ngoài ra, trang web vô ích cho người dùng sử dụng trình duyệt không đồ họa. © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 30 Thanh điều hướng dạng đồ họa với hiệu ứng Rollover Tương tự điều khiển đồ họa, ngoại trừ tính bổ sung. Di chuyển chuột lên ảnh liên kết dẫn đến thay đổi trạng thái hình ảnh. Thay đổi trạng thái hình ảnh dẫn đến trình trao đổi hình ảnh. Khi chuột di chuyển khỏi hình ảnh, hoán đổi hình ảnh trở lại giao diện trước đó. Hiệu ứng rollover tạo hoạt động tương tác trang web khách truy cập. Hiệu ứng rollover có hai hoạt động khác bao gồm hình ảnh giao diện ban đầu hình ảnh thay đổi sau chuột lăn qua. © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 31 Bản đồ ảnh 1-3 Là hình ảnh có nhiều khu vực chứa link. Khi nhấn vào khu vực đồ hình ảnh, liên kết đến trang khác. Sử dụng thẻ để xác định đồ ảnh. Phần tử chứa số phần tử để xác định khu vực click vào đồ hình ảnh. Thuộc tính id thẻ định, phải có giá trị tương tự thuộc tính name. © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 32 Bản đồ ảnh 2-3 Thuộc tính giá trị thẻ : Thuộc tính name Giá trị mapname Mô tả Nó sử dụng để tên đồ ảnh Hướng dẫn để tạo đồ hình ảnh: • Sử dụng thẻ để chèn liên kết hình ảnh. Trong thẻ img, sử dụng thuộc tính usemap để xác định tên đồ hình ảnh. • Sử dụng thẻ để tạo đồ có tên. Bên tag này, xác định khu vực click với thẻ . © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 33 Bản đồ ảnh 3-3 Ví dụ © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 34 Phân chia bố cục trang 1-2 Thẻ định nghĩa phân chia trang Web HTML. Được sử dụng để nhóm phần tử khối định dạng chúng với CSS. Thẻ ngữ nghĩa cấu trúc hợp lý làm giảm nhiều cách sử dụng thẻ. Thẻ sử dụng phần tử ngữ nghĩa bên trái thích hợp khác phù hợp với mục đích phát triển trang web. Nó thường sử dụng cho mục đích stylistic gói số nội dung ngữ nghĩa đánh tạo lên container CSS theo kiểu. © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 35 Phân chia bố cục trang 2-2 Ví dụ. Hello Chú ý sử dụng thẻ : Thẻ phần tử khối Thẻ chứa thẻ khác Thẻ tìm thấy phần tử , , , and © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 36 Phân chia vị trí định dạng 1-2 Các phần tử định vị thuộc tính top, bottom, left, and right. Các thuộc tính không làm việc trừ vị trí thuộc tính thiết lập. Có năm thuộc tính vị trí yếu tố DIV cụ thể static, relative, absolute, fixed, and inherit. Chỉ có ba thuộc tính sử dụng cụ thể absolute, relative, and fixed. Định vị áp dụng cho yếu tố khối. Vị trí mặc định cho phần tử khối (DIV) tĩnh. © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 37 Phân chia vị trí định dạng 2-2 Bảng sau liệt kê giá trị mô tả dùng thẻ . Mô tả Độ dài tương đối static Vị trí phần tử theo thứ tự, chúng xuất dòng chảy tài liệu. Nó giá trị mặc định. © Aptech Ltd. absolute Vị trí phần tử liên quan đến vị trí đầu tiên. fixed Vị trí phần tử liên quan đến cửa sổ trình duyệt. relative Vị trí phần tử liên quan đến vị trí bình thường nó. inherit Vị trí phần tử giá trị thừa kế từ phần tử cha. HTML5 / Tạo điều hướng phân chia bố cục trang 38 Tổng kết 1-2 HTML giới thiệu hai loại thẻ ngữ nghĩa. Họ cụ thể là, mức văn mức cấu trúc. Thẻ ngữ nghĩa cấu trúc sau: Header Footer Aside Nav Article Thẻ ngữ nghĩa dựa văn bản: Section Mark Time Meter Progress Danh mục phần tử quan trọng thiết kế Web. Do bố cục web trình bày mặt vật lý, người dùng phụ thuộc vào trình đơn menu phù hợp. © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 39 Tổng kết 2-2 Thanh điều hướng dựa văn tạo điều hướng độc lập không liên quan với biểu tượng. Thanh điều hướng dựa văn dễ dàng để tạo hiển thị trình duyệt Web. Thanh điều hướng đồ họa tốt so với điều hướng dựa văn cung cấp hình ảnh hấp dẫn cho người sử dụng truy cập. Các thẻ ngữ nghĩa cấu trúc nắm bắt hợp lý nhiều vùng , thẻ có vị trí giới HTML5. Div sử dụng phần tử trái ngữ nghĩa thích hợp khác phù hợp với mục đích phát triển trang web. © Aptech Ltd. HTML5 / Tạo điều hướng phân chia bố cục trang 40 [...]... Aptech Ltd HTML5 / Tạo thanh điều hướng và phân chia bố cục trang 18 Các phần tử HTML5 Layout 1-8 © Aptech Ltd HTML5 / Tạo thanh điều hướng và phân chia bố cục trang 19 Các phần tử HTML5 Layout 2-8 Phần tử cung cấp thông tin mang tính chất giới thiệu, tương tự như header của một tài liệu văn bản Thẻ cũng có thể được chứa bên trong các phần tử article, aside, nav, main và section để... hóa ngày và thời gian trong một định dạng máy có thể đọc được và được sử dụng tùy chọn với một thời gian và một khoảng time-zone Các thuộc tính của thẻ Thuộc tính Giá trị Mô tả datetime datetime Cung cấp ngày tháng cho phần tử Pubdate pubdate Chỉ ra ngày và thời gian công bố tài liệu © Aptech Ltd HTML5 / Tạo thanh điều hướng và phân chia bố cục trang 14 Các thẻ ngữ nghĩa mức văn bản 4-7 Ví... datetime="200 9-1 0-0 9T14:28 08: 00"> If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world Seriously. Show comments © Aptech Ltd HTML5 / Tạo thanh điều hướng và phân chia bố cục trang 11 Các thẻ ngữ nghĩa mức văn bản 1-7 Là các phần tử inline Một vài phần... bản 4-7 Ví dụ 1pm July 15th, 2011 1pm on July 14th © Aptech Ltd HTML5 / Tạo thanh điều hướng và phân chia bố cục trang 15 Các thẻ ngữ nghĩa mức văn bản 5-7 Ví dụ Science : 95 of 100 Math : . Bài 08: Tạo NavigationBar và Layout NexTGen Web Aptech Ltd. Mục. dụng để mã hóa ngày và thời gian trong một định dạng máy có thể đọc được và được sử dụng tùy chọn với một thời gian và một khoảng time-zone Có thể được sử dụng để mã hóa ngày và thời gian trong. dụng trong đoạn mã lớn. HTML5 đã giới thiệu hai loại thẻ ngữ nghĩa cụ thể là, mức văn bản và cấu trúc. HTML5 đã giới thiệu hai loại thẻ ngữ nghĩa cụ thể là, mức văn bản và cấu trúc. 6 Các