Bài giảng Thiết kế web bài 4: Template & điều hướng trang Web

Chia sẻ: Trần Viên | Ngày: | Loại File: PDF | Số trang:49

Thêm vào BST

Báo xấu

187
lượt xem 43
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng thiết kế web bài 4: Template & điều hướng trang Web có nội dung chính đề cập đến trang Master, đây là trang chính của một website và có cấu tạo gồm các phần là barner quảng cáo ở đầu trang, menu ở phía bên trái trang và phần Footer của trang Web. Nội dung thứ hai trong bài 4 là điều hướng trang web, có 3 vấn đề đặt ra trong phần điều hướng là điều hướng trang web như thế nào, tạo liên kết điều hướng như thế nào và sử dụng điều hướng trang web ở đâu. Nội dung cuối cùng của bài 4 là hướng dẫn cách sử dụng theme trong quá trình thiết kế web.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Thiết kế web bài 4: Template & điều hướng trang Web

Bài 4: Template & điều hướng trang Web
Hệ thống bài cũ Các nội dung đã học trong bài trước Kiểm tra tính hợp lệ của dữ liệu Quản lý trạng thái Template & Điều hướng trang Web 2
Mục tiêu bài học 1. Trang Master 2. Điều hướng trang Web 3. Sử dụng Theme Template & Điều hướng trang Web 3
Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 4
Trang Master Các trang trong một ứng dụng, thường có các thành phần giống nhau như: Barner quảng cáo ở đầu trang Menu ở phía bên trái trang Phần Footer của trang Web ASP.NET cung cấp một phương pháp để tạo các trang có các thành phần giống nhau mà không cần viết các đoạn mã giống nhau trên từng trang Web đó là sử Hai trang khác nhau trong cùng một ứng dụng chỉ dụng trang Master có phần nội dung hiển thị ở giữa khác nhau, còn các thành phần khác giống nhau Template & Điều hướng trang Web 5
Trang Master/Trang nội dung Trang master cung cấp các thành phần giống nhau cho các trang trong một ứng dụng Web Trang nội dung: chứa phần nội dung hiển thị trên trang master. Vùng chứa nội dung: Vùng không gian hiển thị trang nội dung Kết hợp giữa trang master và trang nội dung tạo nên giao diện của từng trang đơn lẻ trong ứng dụng Web Template & Điều hướng trang Web 6
Trang Master Ví dụ: Mã nguồn của trang master được tạo bởi Visual Studio Untitled Page Template & Điều hướng trang Web 7
Trang Master Trong ASP.NET trang master có định dạng .master Một trang master luôn bắt đầu bằng chỉ dẫn trang Master Đoạn mã phía sau chỉ dẫn Master giống với các trang aspx thông thường khác cũng gồm các phần tử , , Template & Điều hướng trang Web 8
Trang Master Trang master luôn phải chứa một điều khiển ContentPlaceHolder chỉ định vùng hiển thị trang nội dung nằm trong thẻ Form
File Code-behind của trang Master Trang Master cũng chứa một File Code-behind chứa các mã xử lý sự kiện. Các sự kiện tương ứng của trang master được kích hoạt sau trang nội dung Ví dụ: Sự kiện Load của trang nội dung xảy ra trước sự kiện Load của trang master Sự kiện của các điều khiển trên trang nội dung sẽ được xử lý trước trang master Template & Điều hướng trang Web 10
File Code-behind của trang Master File code-behind của trang master khá giống với File code-behind của Web Form thông thường using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class MasterPage : System.Web.UI.MasterPage Dẫn xuất từ lớp { MasterPage protected void Page_Load(object sender, EventArgs e) { } } Template & Điều hướng trang Web 11
Trang nội dung Trang nội dung có định dạng là .aspx giống với một Web Form. Tuy nhiên, trang nội dung không chứa các phần tử , , , Form Trang nội dung bắt đầu bằng chỉ dẫn Page tương tự WebForm nhưng thêm thuộc tính MasterPageFile chỉ định trang master mà trang sử dụng Trang nội dung chứa phần tử Content chỉ định ID của điều khiển ContentPlaceHolder trên trang master Template & Điều hướng trang Web 12
Trang nội dung Mã aspx của một trang nội dung Template & Điều hướng trang Web 13
Hướng dẫn sử dụng trang Master Các bước tạo ứng dụng ASP.NET sử dụng trang Master Tạo Web Site Thêm một trang master vào WebSite. Trình bày bố cục (sử dụng bảng hoặc CSS) và thêm các phần tử vào trang master Thêm các trang nội dung cho WebSite. Viết các mã xử lý sự kiện cho trang master và các trang nội dung Template & Điều hướng trang Web 14
Thêm một trang master Tương tự như cách thêm một Web Form. Sử dụng hộp thoại Add New Item Khác: Chọn Template Master Page Template & Điều hướng trang Web 15
Sửa nội dung trang Master Tương tự như Web Form. Lập trình viên có thể sử dụng màn hình thiết kế để thêm các phần tử HTML, điều khiển asp, ContentPlaceHolder… Template & Điều hướng trang Web 16
Thêm trang nội dung Tương tự như Web Form, sử dụng cửa sổ Add New Item để thêm trang nội dung Khác: Chọn check box Select master page Template & Điều hướng trang Web 17
Demo Sử dụng trang Master Nội dung demo Banner 1. Thêm một trang master vào Website 2. Trình bày bố cục cho trang Master sử dụng bảng. Side bar chứa Vùng chứa nội dung Bố cục trang gồm: menu Một banner Một sidebar bên trái Một vùng chứa nội dung Footer Footer Template & Điều hướng trang Web 18
Demo Sử dụng trang master Banner 3. Thêm một trang nội dung cho WebSite 4. Thêm các phần tử vào trang nội dung Side bar chứa Vùng chứa nội dung 5. Khám phá mã nguồn của menu trang master và trang nội dung 6. Chạy thử ứng dụng Footer Template & Điều hướng trang Web 19
Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 20