Lab 6: Tạo layout trang tin tức

Chia sẻ: Nong Mai Thang | Ngày: | Loại File: PDF | Số trang:10

Thêm vào BST

Báo xấu

334
lượt xem 115
download

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

Mục tiêu: 1. Sử dụng Master page để tạo phần layout của trang web tin tức 2. Sử dụng control AdRotator, Marquee để hiển thị thông tin quảng cáo 3. Tạo các trang nội dung (content page) sử dụng master page đã thiết kế. 4. Thiết kế trang web tin tức game đơn giản có bố cục được mô tả như sau: o Phần header: chứa banner của trang web o Phần left: chứa menu chọn các mục tin o Phần right: chứa các phần quảng cáo o Phần footer: chứa thông tin bản quyền, thông tin trang...

Chủ đề:

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

Lưu

Nội dung Text: Lab 6: Tạo layout trang tin tức

Lập trình ASP.NET Khoa CNTT Lab 6: TẠO LAYOUT TRANG TIN TỨC Mục tiêu 1. Sử dụng Master page để tạo phần layout của trang web tin tức 2. Sử dụng control AdRotator, Marquee để hiển thị thông tin quảng cáo 3. Tạo các trang nội dung (content page) sử dụng master page đã thiết kế Bài 6.1: Tạo layout trang tin tức game Yêu cầu: 4. Thiết kế trang web tin tức game đơn giản có bố cục được mô tả như sau: o Phần header: chứa banner của trang web o Phần left: chứa menu chọn các mục tin o Phần right: chứa các phần quảng cáo o Phần footer: chứa thông tin bản quyền, thông tin trang web… 1
Lập trình ASP.NET Khoa CNTT Hình 1: Giao diện chính của trang tin tức game Các thành phần trên giao diện được mô tả (hình 2) như sau: 1. Phần 1: chính là header, chứa một banner, bên dưới 2 hyperlink và thông tin ngày tháng năm hiện hành. 2. Phần 2: chứa các mục nội dung tin tức 3. Phần 3: chứa nội dung chính tin tức sẽ hiển thị ở đây 4. Phần 4: chứa quảng cáo 5. Phần 5: footer, thông tin bản quyền, thông tin của trang web… Hình 2: Chi tiết từng thành phần trên trang web Hướng dẫn: 1. Bước 1: Sinh viên tạo ứng dụng web có tên TinTucGame. 2. Bước 2: Tạo master page cho ứng dụng trên o Kích chuột phải vào project trong solution explorer, chọn add -> New Item 2
Lập trình ASP.NET Khoa CNTT Hình 3: Tạo master page 3. Thiết kế trang master theo mẫu sau. Hình 4: Phần layout của master page 3
Lập trình ASP.NET Khoa CNTT Hình 5: Mô tả các thành phần chung trên master page - Đặt một ContentPlaceHolder có id là MainContent ở phần giữa: phần này dùng cho các trang content sẽ hiển thị nội dung riêng của nó. - Kéo một Label thả vào phần bên phải của header, đặt tên là lblDate, label này sẽ hiển thị thông tin ngày tháng năm. Phần code được viết trong hàm On_Load của trang master public partial class Site1 : System.Web.UI.MasterPage { protected void Page_Load(object sender, EventArgs e) { // hi n th ngày tháng năm trên top DateTime date = DateTime.Now; string strDate = string.Format("Ngày {0} tháng {1} năm {2}",date.Day, date.Month, date.Year); lblDate.Text = strDate; 4
Lập trình ASP.NET Khoa CNTT } } - Kéo một AdRotator control thả vào cột thứ 3 table con. AdRotator là control chứa các mẩu hình quảng cáo, mỗi khi trang refesh thì Adrotator tự động chuyển sang hình quảng cáo khác. Các mẩu quảng cáo này được khai báo trong một file XML, và thuộc tính AdvertisementFile sẽ link đến file XML này Hình: Khai báo file XML cho AdRotator Cấu trúc của file XML được mô tả như sau Đư ng d n ñ n t p tin nh Liên k ñ n Website khi b m chu t vào Dòng ch hi n ra khi rê chu t vào T khoá dùng ñ l c nh T n su t hi n th c a nh 5
Lập trình ASP.NET Khoa CNTT Thuộc tính cần chú ý trong điều khiển AdRotator là Target có các giá trị o _blank: khi bấm chuột vào hình sẽ mở sang trang khác o _seft: mở tại cửa sổ chính o _parent: khi bấm vào trang web sẽ mở trong cửa sổ đầu tiên Nói chung là không nên chuyển người dùng từ trang chính sang trang quảng cáo, mà chỉ nên mở cửa sổ mới khi user kích vào quảng cáo. - Ta tạo 2 mẩu quảng cáo và lưu trong file QuangCao.XML images\phongvan.jpg http://pv.123game.vn/web/ Phong vân Tam qu c 80 Topic1 Topic 1 images\thienlong.jpg http://tl.gate.vn Thiên long bát b 80 Topic2 Topic 2 - Tạo một tag Marquee chứa các hình cuộn bên dưới AdRotator, Marquee này có phần code như sau: 6
Lập trình ASP.NET Khoa CNTT Game hay 4. Bước 4: Tạo trang Content có tên TrangChu.aspx có khai báo sử dụng master page trên Hình: Tạo trang nội dung Chọn master page cho trang nội dung 7
Lập trình ASP.NET Khoa CNTT Hình: Khai báo trang master cho TrangChu.aspx Phần code của trang TrangChu.aspx như sau: phần nội dung chưa có, trong lab 7 tiếp theo ta sẽ làm phần nội dung đầy đủ PH N N I DUNG CHÍNH TIN T C ĐÂY Chuyển sang khung nhìn design ta thấy như sau: 8
Lập trình ASP.NET Khoa CNTT Hình: Trang nội dung sử dụng master page. 5. Chạy thử nghiệm trang web và xem kết quả. Hình: Giao diện của ứng dụng web 9
Lập trình ASP.NET Khoa CNTT 6. Sinh viên tạo từng trang nội dung riêng cho các mục tin trong menu bên trái, các trang nội dung này cùng sử dụng master page. (Tạm thời các trang nội dung này chưa có tin) M r ng: - Sinh viên thiết kế trang master page đẹp mắt hơn - Bổ sung thêm các mẩu quảng cáo vào phần Adrotator - Tạo thêm 1 AdRotator chứa các mẩu quảng cáo khác vào phần bên phải. =oOo= 10