Lập trình ASP.NET Khoa CNTT 1 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… Lập trình ASP.NET Khoa CNTT 2 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 Lập trình ASP.NET Khoa CNTT 3 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 Lập trình ASP.NET Khoa CNTT 4 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; Lập trình ASP.NET Khoa CNTT 5 } } - 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 <Advertisements> <Ad> <ImageUrl> Đường dẫn ñến tập tin ảnh </ImageUrl> <NavigateUrl> Liên kế ñến Website khi bấm chuột vào </NavigateUrl> <AlternateText> Dòng chữ hiện ra khi rê chuột vào </AlternateText> <Keyword> Từ khoá dùng ñể lọc ảnh </Keyword> <Impressions> Tần suất hiển thị của ảnh </Impressions> Lập trình ASP.NET Khoa CNTT 6 </Ad> </Advertisements> 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 <Advertisements> <Ad> <ImageUrl>images\phongvan.jpg</ImageUrl> <NavigateUrl>http://pv.123game.vn/web/</NavigateUrl> <AlternateText>Phong vân Tam quốc</AlternateText> <Impressions>80</Impressions> <Keyword>Topic1</Keyword> <Caption>Topic 1</Caption> </Ad> <Ad> <ImageUrl>images\thienlong.jpg</ImageUrl> <NavigateUrl>http://tl.gate.vn </NavigateUrl> <AlternateText>Thiên long bát bộ</AlternateText> <Impressions>80</Impressions> <Keyword>Topic2</Keyword> <Caption>Topic 2</Caption> </Ad> </Advertisements> - 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: <marquee direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <a href="gamehot.aspx"> <img height="80" src="images\thienlong.jpg" border=0 /> </a> </td> </tr> <tr> Lập trình ASP.NET Khoa CNTT 7 <td align="center"> Game hay </td> </tr> </table> </marquee> 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 Lập trình ASP.NET Khoa CNTT 8 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 đủ <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="tintuc.aspx.cs" Inherits="Lab6.tintuc" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>PHẦN NỘI DUNG CHÍNH TIN TỨC Ở ĐÂY</h2> </asp:Content> Chuyển sang khung nhìn design ta thấy như sau: Lập trình ASP.NET Khoa CNTT 9 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 Lập trình ASP.NET Khoa CNTT 10 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= . 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. đã 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:. 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… Lập trình ASP.NET Khoa CNTT 2 Hình 1: Giao diện chính của trang tin tức