nỘi dung -...

HIENLTH, FIT of HCMUP, Vietnam Trang 1 24/07/2013

LAB 5: THIẾT KẾ LAYOUT WEBSITE

NỘI DUNG 5.1 Xây dựng phần hiển thị sản phẩm ...................................................................................... 1

5.2 Thiết kế layout cho trang web sử dụng MasterPage ............................................................. 4

5.3 Xây dựng website đa ngôn ngữ ........................................................................................ 11

5.1 Xây dựng phần hiển thị sản phẩm Yêu cầu trình bày sản phẩm như sau:

Ý tưởng thiết kế của một sản phẩm:

Mã HTML cho một sản phẩm cụ thể: <div class="hh-box"> <div class="hh-box-name">Nokia 2012</div> <img class="hh-box-image" src="images/product.png"/> <div class="hh-box-price">$99.99</div> <div class="hh-box-actions"> <a href="?mahh=1001"><img src="images/Favourites.png"/></a>



<a href="?mahh=1001"><img src="images/Letter.png"/></a> <a href="?mahh=1001"><img src="images/Basket.png"/></a> </div> <img src="images/new-icon.jpg" class="hh-box-icon" width="60" /> </div>

Mã CSS tương ứng: /*--hàng hóa--*/ .hh-box { border-radius: 5px; box-shadow: 0 0 5px silver; position:relative; display: inline-block; margin:25px 5px 5px 5px; padding: 15px 0px; text-align:center; width:200px; } .hh-box:hover { box-shadow: 0 0 5px red; } .hh-box-image { width:130px; height:130px; } .hh-box-icon { position:absolute; top:0px; right:0px; } .hh-box-name { position:absolute; left:0px; top:-20px; width: inherit; text-align:center; } .hh-box-price { position:absolute; left:8px; bottom:8px; font-weight:bold; color:silver; } .hh-box-actions { position:absolute; right:8px; bottom:5px; width:25px; } .hh-box-actions img { cursor:pointer; border:0px; }

Sử dụng Repeater để tạo 6 mặt hàng

Trang web của chúng ta chỉ tạo ra có một mặt hàng. Để có thể tạo ra nhiều mặt hàng khi chạy, bạn phải sử dụng các DataControl sẽ được nghiên cứu sau. Ở đây chúng tôi chỉ dùng Repeater với mục đích sinh 6 mặt hàng. Bạn có thể tìm thấy mã ASP.NET và C# có liên quan đến Repeater như sau:

Trên trang ASP.NET



<div> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <Thiết kế cho 01 mặt hàng>

</ItemTemplate> </asp:Repeater>

</div>

Phần mã HTML đặt bên trong <ItemTemplate> sẽ được lặp lại khi chúng ta cấp dữ liệu cho Repeater.

Trên mã C# code behind

Mã sau khi cấp cho Repeater1 6 phần tử:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Lab05_CSS_HangHoa : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) {

Repeater1.DataSource = new string[6]; Repeater1.DataBind();

} }



5.2 Thiết kế layout cho trang web sử dụng MasterPage Trong bài này bạn sẽ xây dựng một MasterPage (Layout.master) theo chuẩn HTML5 và 2 trang ASP.NET áp dụng Layout.master là Default.aspx và AboutUs.apx.

1 - Nhấp vào liên kết Home

2 - Nhấp vào liên kết About Us

Các bước để hoàn thành công việc gồm:

Bước 1: Tạo master page

Trang Layout.master được sinh ra với mã ASP.NET mặc định như sau

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Layout.master.cs" Inherits="Lab05_Layout" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">

<title></title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder>

</head> <body>

<form id="form1" runat="server"> <div>

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div> </form>

</body> </html>

Các vùng giữa các thẻ <asp:ContentPlaceHolder> (tạm dịch giữ chổ cho nội dung) sẽ được thay thế bởi nội dung của các trang áp dụng master page này.

Bước 2: Thiết kế master page Trong bài này chúng ta thiết kế một master page có layout riêng của mình vì vậy bạn thay

nội dung trang master trên thành: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Layout.master.cs" Inherits="Layout" %> <!DOCTYPE html> <html> <head id="Head1" runat="server"> <title>eStore Master Page</title> <link href="Layout.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder id="head" runat="server">  </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div id="wrapper"> <header> <nav> <div style="float:left"> <asp:HyperLink Text="Home" NavigateUrl="Default.aspx" ID="Link1" runat="server"/> | <asp:HyperLink ID="HyperLink1" runat="server" Text="About Us" NavigateUrl="~/AboutUs.aspx"></asp:HyperLink> | <asp:HyperLink ID="HyperLink2" runat="server" Text="Contact Us"></asp:HyperLink> | <asp:HyperLink ID="HyperLink3" runat="server" Text="Feedback"></asp:HyperLink> | <asp:HyperLink ID="HyperLink4" runat="server" Text="FAQs"></asp:HyperLink> | <asp:HyperLink ID="HyperLink5" runat="server" Text="My Account"></asp:HyperLink> </div> <div style="float:right; padding:2px 10px;"> <asp:ImageButton ID="btnEnglish" runat="server" ImageUrl="~/images/en.gif"></asp:ImageButton> <asp:ImageButton ID="btnVietnamese" runat="server" ImageUrl="~/images/vn.gif"></asp:ImageButton> </div> </nav> </header>

<aside> <fieldset class="box"> <legend>Member Info</legend> </fieldset> <fieldset class="box"> <legend>Product</legend> <ul> <li><a href="#">Nokia</a></li> <li><a href="#">Samsung</a></li> <li><a href="#">HTC</a></li> <li><a href="#">Sony</a></li> <li><a href="#">Apple</a></li> </ul> </fieldset> </aside> <section> <asp:ContentPlaceHolder ID="content" runat="server">  </asp:ContentPlaceHolder> </section> <footer> Bản quyền thuộc về HIENLTH<sup>®</sup> 2013 - FIT of HCMUP, Vietnam </footer> </div> </form> </body> </html>

Trong mã ASP.NET của master page trên, cấu trúc được chỉ rõ như sau:



CSS định nghĩa trong Layouts.css như sau

body { margin: 0px; background: url(images/bg3.jpg) repeat-y center fixed; padding:0px; font-family:Verdana; font-size:12px; } #wrapper { width: 960px; margin: 0px auto; background-color: #FF99CC; padding: 0px; } header { background-color:Yellow; height: 150px; width: 960px; position:fixed; z-index:1000px; } nav { text-align: center; height:30px; width:960px; background-color:black; position:absolute; left:0px; bottom:0px; } nav a { display:inline-block; color:White; margin:4px; padding:2px 10px; font-variant:small-caps; text-decoration:none; border: 1px solid black; } nav a:hover { border: 1px solid gray; border-radius: 10px; background-color: #484848; color:Yellow; } aside { float: left; background-color: Aqua; padding-top:150px; min-height:460px; width:250px; }



aside .box { margin:5px; padding:5px; box-shadow:0 0 5px lightgray; border-radius: 8px; } aside legend { text-align: center; padding: 5px; background-color: #FF3366; border-radius: 5px; color: White; width:220px; } section { background-color: White; padding-top:150px; min-height:460px; width:710px; float:left; } footer { clear: both; background-color: Fuchsia; text-align: center; padding: 5px; }

Bước 3: Áp dụng master page Tạo trang Default.aspx áp dụng Layout.master



Trang Default.aspx được sinh ra với mã ASP.NET như sau

<%@ Page Title="" Language="C#" MasterPageFile="~/Layout.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="content" Runat="Server"> </asp:Content>

Trong đó nội dung của thẻ <asp:Content ContentPlaceHolderID="head"> sẽ được thay thế vào vùng nội dung của thẻ <asp:ContentPlaceHolder ID="head"> trong master page. Tương tự với <asp:Content ContentPlaceHolderID="body">. Hãy chỉnh nội dung của trang Default.aspx như sau:

<%@ Page Title="" Language="C#" MasterPageFile="~/Layout.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <style type="text/css"> h1 { color:Red; } </style> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="content" Runat="Server"> <h1>TRANG CHỦ</h1> </asp:Content>

Làm tương tự như trên để tạo trang AboutUs.aspx với nội dung sau.

<%@ Page Title="" Language="C#" MasterPageFile="~/Layout.master" AutoEventWireup="true" CodeFile="AboutUs.aspx.cs" Inherits="_Default" %>



<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="content" Runat="Server"> <h1>GIỚI THIỆU</h1> </asp:Content>

Bước 4: Chạy theo các tình huống

Chạy Default.aspx sau đó nhấp vào liên kết Home sau đó About Us



5.3 Xây dựng website đa ngôn ngữ Các bước để hoàn thành công việc gồm

Bước 1: Tạo tập tin tài nguyên đa ngôn ngữ cho master page

Bước 2: Chỉnh các liên kết trên menu của master page để tài từ tài nguyên

Bước 3: Viết mã C# điều khiển việc lựa chọn ngôn ngữ

Bước 4: Tổ chức kế thừa

Bước 5: Chạy

Bước 1: Tạo tập tin tài nguyên đa ngôn ngữ cho master page

Tạo thư mục chứa tập tin tài nguyên cục bộ.

Tạo tập tin tài nguyên cục bộ của Layout.master phải có tên Layout.master.resx.

Nhập nội dung cho Layout.master.resx

Nhân bản Layout.master.resx thành Layout.master.vi-VN.resx và dịch cột value sang tiếng Việt.

Lab 5: Thiết kế Layout website 2013

HIENLTH, FIT of HCMUP, VietNam 12

Bước 2: Chỉnh các liên kết trên menu của master page để tải từ tài nguyên

Trong bài này chỉ làm đa ngôn ngữ phần menu nên phải hiểu chỉnh để nó được tải từ tài nguyên như sau.

<asp:HyperLink ID="HyperLink6" runat="server" Text="<%$ Resources:home %>" NavigateUrl="Default.aspx"></asp:HyperLink>

Lưu ý:

Nếu người dùng sử dụng Visual Studio phiên bản Professional hay Ultimate, bước 1 & 2 chỉ cần chọn Tools Generate Local Resource, sau đó định nghĩa ngôn ngữ mặc định. Khi hoàn thành Save As cho các ngôn ngữ khác.



Bước 3: Viết mã C# điều khiển việc lựa chọn ngôn ngữ

Mã C# dùng để nhận, lưu trữ và thiết lập ngôn ngữ được chọn phải được viết trong trang

dùng chung.

Bạn tạo một class có tên CommonPage.cs đặt trong thư mục đặc biệt App_Code

Nội dung của CommonPage được viết như sau:

public class CommonPage : System.Web.UI.Page { protected override void InitializeCulture() { base.InitializeCulture(); foreach (String Name in Request.Form) { if (Name != null) { if (Name.Contains("btnVietnamese")) { Session["NgonNgu"] = new CultureInfo("vi-VN"); } else if (Name.Contains("btnEnglish")) { Session["NgonNgu"] = new CultureInfo("en-US"); } } }



if (Session["NgonNgu"] == null) { Session["NgonNgu"] = new CultureInfo("en-US"); } CultureInfo currentCulture = Session["NgonNgu"] as CultureInfo; Thread.CurrentThread.CurrentUICulture = currentCulture; Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(currentCulture.Name); } }

Bước 4: Tổ chức kế thừa

Tất cả các trang muốn thực hiện được đa ngôn ngữ đều phải kế thừa từ CommonPage.

Bước 5: Chạy

Chạy trang Default.aspx hoặc AboutUs.aspx sau đó chọn ngôn ngữ để thấy menu thay đổi

ngôn ngữ như đã chọn.

nỘi dung -...

Documents