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

Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB Bài Xây dựng trang chủ cho Website Bản tin điện tử (Phần 1) Mục đích Trong thực hành này, bạn tạo trang Master page (trang cha) gồm thành phần chung cho tất trang, trang nội dung (trang con) Trang chủ, Xã hội, Kinh tế, Thể thao Bạn làm quen với cách thiết kế trang web sử dụng số control bản: Hyperlink, Image, AdRotator Marquee Xây dựng trang Master cho Website Bản tin điện tử bao gồm Banner, Menu phải Quảng cáo trái Yêu cầu Đã nắm khái niệm xây dựng ứng dụng web 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 thực hành: 120 phút GV: Trần Thị Bích Hạnh Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 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 Mẫu trang chủ Website Tuổi trẻ (www.tuoitre.com.vn) 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# 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 BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB ™ Chuyển sang hình design - Xóa tất control có ™ Thêm table : Menu Layout – Insert table GV: Trần Thị Bích Hạnh Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 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 Width bgColor Valign Width Valign Width bgColor Align ColSpan Align (Nội dung) 200 #f2f7fb Top 400 Top 200 #f2f7fb Center Center Copyright @ 2004 by Tuoi tre Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB (vùng hiển thị Nội dung) Tạo hiển thị Banner ™ Sử dụng Image Control: • Kéo thả Image Control vào vùng hiển thị Banner • Đặt thuộc tính ImageUrl Image Images\banner.gif Tạo hiển thị Menu cột trái ™ Sử dụng Hyperlink Control: • Kéo thả Hyperlink Control vào vùng hiển thị Menu • Đặt thuộc tính cho Hyperlink Control Hyperlink1 GV: Trần Thị Bích Hạnh Property Text NavigateUrl Value Trang chủ Index.aspx Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 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 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 Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 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ả AdRotator Control vào menu • Chỉ đường dẫn cho thuộc tính AdvertisementFile AdRotator ads.xml Tạo hiển thị Quảng cáo cột phải ™ Sử dụng Marquee: • Đưa trỏ vào vùng hiển thị Image, chọn View HTML Source GV: Trần Thị Bích Hạnh Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB • Copy & Paste đoạn script sau vào [...].. .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... 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 ... Hạnh Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB GV: Trần Thị Bích Hạnh Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB ™ Nhập nội dung trang index.aspx GV: Trần Thị Bích Hạnh Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB. .. Hạnh Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB ™ Chuyển sang hình design - Xóa tất control có ™ Thêm table : Menu Layout – Insert table GV: Trần Thị Bích Hạnh Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB. .. bgColor Align ColSpan Align (Nội dung) 20 0 #f2f7fb Top 400 Top 20 0 #f2f7fb Center Center Copyright @ 20 04 by Tuoi tre Bài BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB (vùng hiển thị Nội dung) Tạo hiển thị