intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

Bài giảng thực hành lập trình web 2 - Bài 2

Chia sẻ: Nguyễn Nhi | Ngày: | Loại File: PDF | Số trang:14

Thêm vào BST
Báo xấu
343
lượt xem 126
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài 2. Xây dựng trang chủ cho Website Bản tin điện tử - 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.

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 thực hành lập trình web 2 - Bài 2

  1. 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
  2. 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
  3. 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
  4. Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 Property Value Width 800 Table Align Center ColSpan 3 TR (Dòng 1) TD (Cột 1) Width 200 TD (Cột 1) bgColor #f2f7fb Valign Top Width 400 TR (Dòng 2) TD (Cột 2) Valign Top Width 200 TD (Cột 3) bgColor #f2f7fb Align Center ColSpan 3 Align Center TR (Dòng 3) TD (Cột 1) (Nội dung) Copyright @ 2004 by Tuoi tre GV: Trần Thị Bích Hạnh
  5. 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 Property Value Text Trang chủ Hyperlink1 NavigateUrl Index.aspx GV: Trần Thị Bích Hạnh
  6. Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 Text Xã hội Hyperlink2 NavigateUrl Xahoi.aspx Text Kinh tế Hyperlink3 NavigateUrl Kinhte.aspx Text Thể thao Hyperlink4 NavigateUrl 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. images\imageAds1.gif http://www.microsoft.com Microsoft Main Site 80 Topic1 GV: Trần Thị Bích Hạnh
  7. Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 This is the caption for Ad#1 images\imageAds2.gif http://www.wingtiptoys.com Wing Tip Toys 80 Topic2 This is the caption for Ad#2 • 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
2=>2