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

Chương 2: Tạo website và xây dựng phần giao diện

Chia sẻ: V Dt Thanh | Ngày: | Loại File: DOC | Số trang:24

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

Right-click trang Default.aspx chọn delete để xoá (Chúng ta sẽ tạo lại trang Default.aspx sau khi đa ̃ taọ trang “Master page”).

Chủ đề:

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

Lưu

Nội dung Text: Chương 2: Tạo website và xây dựng phần giao diện

  1. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 Chương 2 Tao website và xây dựng phân giao diên ̣ ̀ ̣ *** 1. Tạo web site KimSoft (sử dụng Visual Studio .NET 2008) như sau: • Từ menu bar, chọn: File  New  Web Site. • ̣ Chon Templates: ASP.NET Web Site. • ̣ Chon version .NET Framework : .NET Framework 3.5 • ̣ Chon Location: File System • ̣ Chon Language: Visual C# ̀ ̣ Hinh 01: Tao website KimSoft. 2. Xoá trang Default.aspx: • Right-click trang Default.aspx chọn delete để xoá (Chúng ta sẽ tạo lại trang Default.aspx sau khi đã tao ̣ trang “Master page”). GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 1
  2. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 3. Tạo trang MasterPage.master: • Từ menu bar, chọn : Website  Add New Item  AJAX Master Page. • Đặt tên là : MasterPage.master. ̀ ̣ Hinh 02: Tao trang MasterPage.master ̣ 4. Tao theme SeaBlue: • Tạo thư mục theme SeaBlue: Right-click project : KimSoft  Chọn : Add ASP.NET Folder  Theme  Đặt tên là : SeaBlue  GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 2
  3. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 ̀ ̣ Hinh 03: Tao theme SeaBlue • Tạo thư mục Images cho theme SeaBlue Right-click thư mục : App_Themes\SeaBlue  Chọn : New Folder.  Đặt tên là : Images  Copy các hình ảnh của theme SeaBlue vào thư muc Images vừa tao. (Từ thư muc Resources). ̣ ̣ ̣  • Tạo file Default.css cho theme SeaBlue Right-click thư mục : App_Themes\SeaBlue  Chọn : Add New Item Style Sheet  Đặt tên là : Default.css.  GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 3
  4. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 ̀ ̣ Hinh 04: Tao file Default.css cho theme SeaBlue • Viết code cho file Default.css như sau: body { margin: 0px; font-family: Verdana, Arial, Serif; font-size: 12px; } Phân Header bên trai (có logo) ̀ ́ /* -Lây kich thước thât 718x182 ́ ́ ̣ */ #subheader { padding: 0px; margin: 0px; width: 718px; height: 182px; background-image: url(images/HeaderLeft.jpg); } ̀ /* Phân Header ́ ̀ -Tiêp theo hinh Header.jpg -Với width: 100% lăp đây cac khoang trông con lai. ́ ̀ ́ ̉ ́ ̀ ̣ */ #header { padding: 0px; margin: 0px; width: 100%; height: 182px; background-image: url(images/HeaderRight.jpg); } ̀ /* Phân Header Menu Home|Store|Forum|... */ #headermenu { position: relative; top: 160px; left: 205px; width: 500px; padding: 2px 2px 2px 2px; text-transform: uppercase; GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 4
  5. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 } ̀ /* Phân Header Menu Home|Store|Forum|... Trang thai thông thường. ̣ ́ */ .headermenulink a { text-decoration: none; color:Orange; } ̀ /* Phân Header Menu Home|Store|Forum|... ̣ ́ ̣ Trang hai khi chuôt hover. */ .headermenulink a:hover { text-decoration: underline overline; color:Highlight; font-weight:bold; } Phân login box (Đăng nhâp, thông tin, trang thai người dung).*/ ̀ ̣ ́ ̀ /* #loginbox { position: absolute; top: 16px; right: 10px; width: 180px; height: 80px; padding: 2px 2px 2px 2px; font-size: 9px; } ̀ /* Phân Theme ́ ̣ ̣ -Cho phep chon theme đông. */ #themeselector { position: absolute; text-align: right; top: 156px; right: 0px; width: 180px; height: 80px; padding: 2px 0px 2px 2px; font-size: 9px; } ̀ ́ /* Phân bên trai -Sau khi trừ chiêu cao cua Header Baner (top: 12px, width: 200px (fix)) ̀ ̉ */ #leftcol { position: absolute; top: 182px; left: 0px; width: 199px; background-color: white; font-size: 10px; } Tiêu đề cua phân côt trai (sectiontitle) */ ̉ ̀ ̣ ́ /* #leftcol div.sectiontitle, #leftcol .sectiontitle span { padding: 6px 6px 6px 3px; background-image: url(Images/TitleBackGround.jpg); color: white; font-size: 12px; font-weight: bold; text-transform: uppercase; height: 14px; } ̀ ̣ ́ /* Phân text côt trai */ #leftcol div.text { padding: 6px 6px 6px 6px; text-align: justify; } ̀ ̣ ́ /* Phân alternatetext côt trai. */ #leftcol div.alternatetext { padding: 6px 6px 6px 6px; background-color: #fcd4be; text-align: justify; } ̀ /* Phân container */ GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 5
  6. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 #container { background-color:ActiveBorder; } #subcontainer { background-color: #bcbfc0; margin-right: 200px; } ̀ /* Phân centercol */ #centercol { position: relative; margin-left: 200px; padding: 0px; background-color: white; height: 500px; } ̀ /* Phân breadcrumb */ #breadcrumb { background-image: url(Images/TitleBackGround.jpg); color: white; padding: 6px 6px 6px 3px; font-size: 12px; font-weight: bold; text-transform: uppercase; padding-left: 5px; height: 14px; } ̀ /* Phân breadcrumb */ #breadcrumb a { text-decoration: none; color:white; } ̀ /* Phân breadcrumb */ #breadcrumb a:hover { text-decoration: underline; color:Highlight; font-weight:bold; } ̀ /* Phân centercolcontent */ #centercolcontent { padding: 15px 6px 15px 6px; } #centercolcontent div.sectiontitle, #centercolcontent .sectiontitle span { font-weight: bold; font-size: larger; color: #b45d16; } #centercolcontent div.sectionsubtitle { font-weight: bold; padding-bottom: 4px; } ̀ /* Phân rightcol */ #rightcol { GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 6
  7. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 position: absolute; top: 182px; right: 0px; width: 199px; color: black; background-color: White; font-size: 10px; } ̀ /* Phân rightcol */ #rightcol a { color: Yellow; } ̀ /* Phân rightcol */ #rightcol div.text { padding: 6px 6px 6px 6px; text-align: justify; } ̀ /* Phân rightcol */ #rightcol div.sectiontitle, #rightcol .sectiontitle span { padding: 6px 6px 6px 3px; background-image: url(Images/TitleBackGround.jpg); color: #fc9a0e; font-size: 12px; font-weight: bold; text-transform: uppercase; height: 14px; } ̀ /* Phân rightcol */ #footer { padding: 0px; margin: 0px; width: 100%; height: 49px; background-image: url(Images/Footer.jpg); } ̀ /* Phân Footer Menu */ #footermenu { text-align: center; padding-top: 10px; } ̀ /* Phân Footer Menu */ .footermenulink { font-family: Arial, Serif; font-size: 12px; font-weight: bold; text-transform: uppercase; } ̀ /* Phân Footer Menu */ .footermenulink a { text-decoration: none; color: Orange; } ̀ /* Phân Footer Menu */ .footermenulink a:hover { text-decoration: underline overline; GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 7
  8. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 color:Highlight; font-weight:bold; } ̀ /* Phân Footer Text Copyright... */ #footertext { text-align: center; padding-top: 3px; } ̀ /* Phân Highlight */ .highlight { background-color: #fefbd2; color: #000080; } 5. Thêm các control ASP.NET và HTML tinh vào trang MasterPage.master như sau: ̃ • Thêm vào các div phần header: Thêm div header:  ... Thêm div subheader, loginbox, themeselector:  ... Login box Theme selector  GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 8
  9. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 Thêm div headermenu:  ... Thêm SiteMapDataSource control (vào div headermenu):  Thêm Menu control với các thuộc tính như sau:  • Kết quả các bước trên như sau: KimSoft ̀ ̀
  10. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 runat="server" CssClass="headermenulink" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" MaximumDynamicDisplayLevels="0" SkipLinkText="" StaticDisplayLevels="2" /> Login box Theme Selector • Thêm vào các div phần bên trái LeftCol: ̀ ̣ ́ Site News 20 Aug 2005 :: News Header News text... 20 Aug 2005 :: News Header Other news text... • Thêm vào các div phần ở giữa Container: ̀           GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 10
  11. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 • Thêm vào các div phần bên phải RightCol: ̀ ̣ ̉ Title 20 Aug 2005 :: News Header News text... 20 Aug 2005 :: News Header Other news text... • Thêm vào các div phần cuối Footer: ̀ ́ Copyright © 2008 by KimSoft GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 11
  12. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 • Kết quả các bước trên như sau: KimSoft ̀ ̀ Login box Theme Selector ̀ ̣ ́ Site News 20 Aug 2005 :: News Header News text... 20 Aug 2005 :: News Header Other news text... GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 12
  13. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 ̀           ̀ ̣ ̉ Title 20 Aug 2005 :: News Header News text... 20 Aug 2005 :: News Header Other news text... ̀ ́ Copyright © 2008 by KimSoft GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 13
  14. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 6. Tạo file Web.sitemap: • Right-click project : KimSoft • Chọn : Add New Item  Site Map. • Đăt tên là : ̣ Web.sitemap • Thêm vào file Web.sitemap vừa tao các XML node như sau: ̣ 7. Thêm file Controls.skin • Right-click thư mục: SeaBlue • Chọn : Add New Item  Skin File. • Đặt tên là : Controls.skin GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 14
  15. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 ̀ ̣ Hinh 05: Tao file Controls.skin. 8. Thêm code vào file Controls.skin như sau: ́ ̣ ́ ̣ ́ ̣ 9. Thêm trang Default.aspx • Right-click project : KimSoft • Chọn : Add New Item  Web Form • Chọn checkbox : “Select master page” trong hộp hội thoại “Add New Item”. • Chọn master page : MasterPage.master. GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 15
  16. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 ̀ ̣ Hinh 06: Tao trang Default.aspx 10. Tạo thư mục Images cho project • Right-click project : KimSoft • ̣ Chon : New Folder. • Đặt tên là : Images • Copy các hình ảnh của project vào thư muc Images vừa tao. (Từ thư muc Resources). ̣ ̣ ̣ 11. Thêm hình và text vào phần ContentPlaceHolder MainContent như sau: 12. Áp dụng Theme cho các trang: • Thay vì áp dụng Theme cho từng trang bằng cách thêm trực tiếp vào thuộc tính @Page, chúng ta thêm vào file web.config, chỉ 1 lần và áp dụng cho tất cả các trang băng cach thêm theme="SeaBlue" ̀ ́ masterPageFile="~/MasterPage.master" vao tag pages như sau: ̀ GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 16
  17. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 ... 13. Xoá thuộc tính MasterPageFile từ trang Default.aspx • Vì đã đăt trong tag pages cua file web.config nên cac trang không cân đăt MasterPageFile nữa. ̣ ̉ ́ ̀ ̣ 14. Thêm theme thứ 2 tên Orange • Right click project : KimSoft • ̣ Chon : Add Folder  Theme Folder • Đặt tên là : Orange 15. Thêm thư mục Images cho Orange • Right-click thư muc : ̣ App_Themes\ Orange • ̣ Chon : New Folder • Đặt tên là : Images • Copy hình cua theme Orange vào thư muc Images vừa tao. (Từ thư muc Resources). ̉ ̣ ̣ ̣ 16. Thêm file Default.css • Copy và paste file Default.css từ SeaBlue 17. Thêm file Controls.skin • Copy và paste file controls.skin của SeaBlue • Chú y: Ngoai hinh anh, nêu cac ban muôn theme Orange khac theme SeaBlue về vị tri, mau săc, hiêu ứng, ́ ̀̀ ̉ ́ ́ ̣ ́ ́ ́ ̀ ́ ̣ …cua cac đôi tượng thì cac ban chinh sửa 2 file Default.css và Controls.skin vừa copy từ theme SeaBlue. ̉ ́ ́ ́ ̣ ̉ 18. Tạo thư mục "Controls" cho project • Right-click project : KimSoft GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 17
  18. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 • ̣ Chon : Add Folder  Regular folder • Đặt tên là : Controls. 19. Tạo Web User Control ThemeSelector • Right-click thư mục : Controls • Chọn : Add New Item  Web User Control • Đặt tên là : ThemeSelector.ascx. ̀ ̣ Hinh 07: Tao Web User Control ThemeSelector.ascx. 20. Thêm chuỗi “Theme:” và control DropDownList vào ThemeSelector.ascx: Theme: 21. Thêm code cho ThemeSelector.ascx.cs như sau: • Lấy danh sách cho drop-down list bằng phương thức GetThemes của lớp Helper • Đặt giá trị mặc định là Theme của trang hiện tại. namespace KimSoft.UI.Controls { public partial class Controls_ThemeSelector : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 18
  19. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 { ddlThemes.DataSource = Helpers.GetThemes(); ddlThemes.DataBind(); ddlThemes.SelectedValue = this.Page.Theme; } } } • Chú ý: Đăt control ThemeSelector trong namespace KimSoft.UI.Controls. ̣ 22. Tạo thư mục App_Code: • Right-click project : KimSoft • Chọn : Add ASP.NET Folder  App_Code 23. Tạo lớp Helpers • Right-Click thư muc : ̣ App_Code • Chọn: Add New Item. • Đặt tên là : Helpers.cs Hinh 08: Tao lớp Helpers.cs ̀ ̣ 24. Viết code cho lớp Helpers như sau: namespace KimSoft.UI { /// /// Đây là lớp tinh không cân khởi tao khi sử dung. ̃ ̀ ̣ ̣ GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 19
  20. Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 2005 /// Bao gôm cac phương thức (tiên ich) hỗ trợ cho cac trang, ̀ ́ ̣ ́ ́ cac đôi tượng khac cua project. ́ ́ ́ ̉ /// /// public static class Helpers { /// /// Trả về 1 mảng (array) tên của các theme trong thư muc App_Theme. ̣ /// public static string[] GetThemes() { //Trả về 1 mang tên cac theme được lưu trong Cache ̉ ́ // sử dung từ khoá (key) SiteThemes. ̣ if (HttpContext.Current.Cache["SiteThemes"] != null) { return (string[])HttpContext.Current.Cache["SiteThemes"]; } else { //Lây đường dân cua thư muc App_Themes lưu vao biên themesDirPath. ́ ̃ ̉ ̣ ̀ ́ string themesDirPath = HttpContext.Current.Server.MapPath("~/App_Themes"); // Lấy mảng các thư mục theme dưới thư mục App_Themes theo biên themesDirPath. ́ string[] themes = Directory.GetDirectories(themesDirPath); for (int i = 0; i không cân khởi tao khi sử dung. ̃ ̀ ̣ ̣ GV: Dương Ngọc Long Nam – longnamit@yahoo.com Trang 20
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