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

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”).
Nội dung trích xuất từ tài liệu:
Chương 2: Tạo website và xây dựng phần giao diện 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 Xây dựng ứng dụng web CMS / E-Commerce sử dụng ASP.NET 3.5, C# 2008 và SQLServer 20053. 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 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 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 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) */ ...