Bài giảng thực hành lập trình web 2 bài 2
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.1 MB, 14 trang )
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
Bài 2. Xây dựng trang chủ cho Website Bản tin điện tử (Phần 1)
Mục đích
Trong bài thực hành này, bạn sẽ tạo 1 trang Master page (trang cha) gồm những
thành phần chung cho tất cả các trang, và 4 trang nội dung (trang con) là Trang chủ, Xã hội,
Kinh tế, Thể thao.
Bạn sẽ làm quen với cách thiết kế một trang web sử dụng một số control cơ bản:
Hyperlink, Image, AdRotator và Marquee.
Xây dựng trang Master cho Website Bản tin điện tử bao gồm Banner, Menu phải và
Quảng cáo trái.
Yêu cầu
Đã nắm được các khái niệm cơ bản về xây dựng ứng dụng web bằng Visual
Studio.NET.
Vấn đề liên quan
Thiết kế giao diện web theo mẫu.
Thời gian để hoàn tất bài thực hành: 120 phút
GV: Trần Thị Bích Hạnh
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
Bài tập 2.1. Thiết kế giao diện
Mục đích: Học cách thiết kế form theo mẫu
1. Mẫu trang chủ Website Tuổi trẻ (www.tuoitre.com.vn)
2. Tạo Project Bản tin điện tử
Từ Menu chọn File – New – Web site…
• Template : ASP.NET We site
• Location : File System – D:\BanTinDienTu
• Language : Visual C#
3. Tạo trang Master
Từ Menu chọn Website – Add new item…
• Template : Master page
• Name : MasterPage.master
• Language : Visual C#
GV: Trần Thị Bích Hạnh
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
Chuyển sang màn hình design - Xóa tất cả các control có trên đó
Thêm một table : Menu Layout – Insert table
GV: Trần Thị Bích Hạnh
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
Table
TR (Dòng 1)
TD (Cột 1)
TD (Cột 1)
TR (Dòng 2)
TD (Cột 2)
TD (Cột 3)
TR (Dòng 3)
GV: Trần Thị Bích Hạnh
TD (Cột 1)
Property
Width
Align
ColSpan
Value
800
Center
3
Width
bgColor
Valign
Width
Valign
Width
bgColor
Align
ColSpan
Align
(Nội dung)
200
#f2f7fb
Top
400
Top
200
#f2f7fb
Center
3
Center
Copyright @ 2004 by
Tuoi tre
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
(vùng hiển thị Nội dung)
4. Tạo hiển thị Banner
Sử dụng Image Control:
•
Kéo thả 1 Image Control vào vùng hiển thị Banner.
•
Đặt thuộc tính ImageUrl của Image là Images\banner.gif
5. Tạo hiển thị Menu cột trái
Sử dụng Hyperlink Control:
•
Kéo thả các 4 Hyperlink Control vào vùng hiển thị Menu.
•
Đặt thuộc tính cho các Hyperlink.
Control
Hyperlink1
GV: Trần Thị Bích Hạnh
Property
Text
NavigateUrl
Value
Trang chủ
Index.aspx
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
Hyperlink2
Hyperlink3
Hyperlink4
Text
NavigateUrl
Text
NavigateUrl
Text
NavigateUrl
Xã hội
Xahoi.aspx
Kinh tế
Kinhte.aspx
Thể thao
Thethao.aspx
Sử dụng AdRotator:
•
Từ Menu chọn Project\Add New Item, chọn XML File từ ô cửa sổ Template,
đặt tên file là Ads.xml.
•
Cut & Paste đoạn mã sau vào File Ads.xml.
<Advertisements>
<Ad>
<ImageUrl>images\imageAds1.gif</ImageUrl>
<NavigateUrl></NavigateUrl>
<AlternateText>Microsoft Main Site</AlternateText>
<Impressions>80</Impressions>
<Keyword>Topic1</Keyword>
GV: Trần Thị Bích Hạnh
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
<Caption>This is the caption for Ad#1</Caption>
</Ad>
<Ad>
<ImageUrl>images\imageAds2.gif</ImageUrl>
<NavigateUrl></NavigateUrl>
<AlternateText>Wing Tip Toys</AlternateText>
<Impressions>80</Impressions>
<Keyword>Topic2</Keyword>
<Caption>This is the caption for Ad#2</Caption>
</Ad>
</Advertisements>
•
Kéo thả các 1 AdRotator Control vào menu.
•
Chỉ đường dẫn cho thuộc tính AdvertisementFile của AdRotator là ads.xml.
6. Tạo hiển thị Quảng cáo cột phải
Sử dụng Marquee:
•
Đưa con trỏ vào vùng hiển thị Image, chọn View HTML Source.
GV: Trần Thị Bích Hạnh
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
•
Copy & Paste đoạn script sau vào
scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<a href='Giaitri.aspx'>
<img height=80 src=”images\imageView1.jpg” border=0>
</a>
</td>
</tr>
<tr>
<td align="center"> Phim trong tuần
</td>
</tr>
<tr>
<td height="30">
</td>
</tr>
</table>
</marquee>
Sử dụng Image Control:
•
Kéo thả các 2 Image Control vào Ads.
•
Đặt thuộc tính ImageUrl cho các Image:
Control
Image1
Image2
GV: Trần Thị Bích Hạnh
Value
Images\Image1.gif
Images\Image2.gif
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
7. Tạo hiển thị phần nội dung :
Vào vùng hiển thị nội dung thêm control ContentPlaceHolder
GV: Trần Thị Bích Hạnh
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
8. Tạo Trang chủ Bản tin điện tử
Vào Menu Website – Add new item
• Template : Webform
• Name : index.aspx
• Language : Visual C#
• Chọn : Select master page
GV: Trần Thị Bích Hạnh
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
GV: Trần Thị Bích Hạnh
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
Nhập nội dung trang index.aspx
GV: Trần Thị Bích Hạnh
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
Bài tập 2.2.Chạy chương trình
Kết quả
Bài tập 2.3.Bài tập thêm
Mục đích: Thực tập lại các thao tác đã thực hành trong Bài tập 2.1.
1. Sử dụng AdRotator Control
Tạo 1 File XML đặt tên là Ads1.xml với nội dung:
o chỉ đường dẫn tới các file imageAds3.gif và imageAds4.gif trong thư mục Images.
o ứng với mỗi hình chỉ rõ thuộc tính NavigateUrl, AlternateText… tương ứng.
Kéo thả một AdRotator Control vào vùng hiển thị Menu và chỉ đường dẫn cho thuộc tính
AdvertisementFile của AdRotator là file XML vừa tạo.
2. Sử dụng Marquee
Sửa đổi Script của Marquee sao cho:
o thể hiện thị thêm 2 hình imageView2.gif và ImageView3.gif trong thư mục Images.
o Đặt tiêu đề tương ứng cho mỗi hình trên.
GV: Trần Thị Bích Hạnh
Bài 2.
BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2
3. Sử dụng Image Control
Kéo thả một Image Control vào vào vùng hiển thị quản cáo và chỉ đường dẫn cho thuộc
tính ImageUrl của Image là image3.gif trong thư mục Images.
4. Xây dựng 3 trang XaHoi.aspx, KinhTe.aspx, TheThao.aspx với kết thừa từ trang master
page
GV: Trần Thị Bích Hạnh
