Aspx.net / MVC — August 5, 2016 at 2:04 am

Hướng dẫn xây dựng web bán hàng bằng MVC- Chương 3 Bố cục layout (p2)

by

Hôm trước chắc chắn bạn đã cũng có thể học xong thực hiện bố cục layout trên HTLM. Hôm nay, chúng ta cũng sẽ đi sâu hơn vào phần CSS khi xây dựng layout trong đó. Tuy có hơi phức tạp nhưng  đối với một web bán hàng là thứ mà điều cần chú trọng nhất.

Định dạng layout dùng CSS

1. Khởi tạo file CSS

– ta đã hoàn thành xong nội dung Layout , để có được giao diện như mng muốn chỉ cần định dạng là xong .

– Chúng ta có cách định dạng bộ khung Layout dùng thẻ table của html , tuy nhiên đây là cách cũ , làm mã html dài dòng , gây nặng khi load website và không thân thiện với các công cụ tìm kiếm ( hỗ trợ SEO website)

– Việc định dạng bố cục dùng CSS có nhiều lớp ( class) cần dùng lại nhiều lần ở nhiều Project khác nhau , do vậy chúng ta sẽ tạo nhiều file CSS tương ứng với các tính năng khác nhau để dễ dàng kế thừa lại trong các Project khác

– Việc này có thể làm chậm tính năng load web ( khi phải load nhiều file css ) , tuy nhiên với phiên bản MVC4 chúng ta sẽ dùng tính năng bundled để zip nhiều file CSS lại với nhau .Với phiên bản MVC 3 chúng ta cần dùng thêm thư viện Compress CSS , javascript miễn phí mà các bạn dễ dàng tìm kiếm được trên mạng

Tạo mới 3 file LayoutStyle.css ,HtmlStyle.css và BasicStyle.css  trong thư mục Content ( Xem cách tạo theo hình dưới)

+) File LayoutStyle.css chứa các lớp định dạng layout

+) File BasicStyle.css chứa các lớp dùng chung định dạng nội dung website

+) HtmlStyle.css dùng định dạng các thẻ html thuần như a , ul , button , submit

+) Khi tạo ứng dụng MVC VisualStudio có tạo sẵn cho chúng ta file Site.css .Chúng ta vẫn dùng file CSS này để định dạng các thuộc tính riêng chỉ dùng riêng cho website hiện tại ( thường không được kế thừa trong các Project khác )

– Trong các ví dụ định dạng CSS dưới đây các thuộc tính sẽ được khái báo tại các file tương ứng khác nhau .Để sau này khi phát triển và bảo trì ứng dụng các bạn có thể dễ tìm đúng mã nguồn để định dạng phù hợp

– Tạo mới file LayoutStyle.css như sau :

image-7

Đặt tên file CSS

image8

Tương tự ta tạo file BasicStyle.css cũng trong thư mục Content

2. Khai báo các file CSS trong layout

– Với MVC 4 ta khai báo thêm 2 file CSS vừa tạo trong file App_Start/BundledConfig.cs như sau :

bundles.Add(new StyleBundle(“~/Content/css”).Include(

“~/Content/site.css”,

“~/Content/BasicStyle.css”,

“~/Content/HtmlStyle.css”,

“~/Content/LayoutStyle.css”

));

– Code toàn bộ file BundledConfig như sau ( do chúng ta không dùng thư viện jQueryUI nên chúng tôi đã xóa bỏ chúng)

public static void RegisterBundles(BundleCollection bundles)

{

bundles.Add(new ScriptBundle(“~/bundles/jquery”).Include(

“~/Scripts/jquery-{version}.js”));

 

bundles.Add(new ScriptBundle(“~/bundles/jqueryui”).Include(

“~/Scripts/jquery-ui-{version}.js”));

 

bundles.Add(new ScriptBundle(“~/bundles/jqueryval”).Include(

“~/Scripts/jquery.unobtrusive*”,

“~/Scripts/jquery.validate*”));

bundles.Add(new ScriptBundle(“~/bundles/modernizr”).Include(

“~/Scripts/modernizr-*”));

 

bundles.Add(new StyleBundle(“~/Content/css”).Include(

“~/Content/site.css”,

“~/Content/BasicStyle.css”,

“~/Content/HtmlStyle.css”,

“~/Content/LayoutStyle.css”

));

}

– Đây là tài liệu thực hành nên chúng tôi không giới thiệu về tính năng cụ thể nào .Nếu chưa rõ về tính năng Bundled của MVC xin đọc tài liệu lập trình web MVC 4 của chúng tôi .

– Khai báo các file CSS ảo trong Layout như sau :

  @Styles.Render(“~/Content/css”)

– Đối với MVC 3 không có tính năng bundled có thể khai báo trực tiếp như sau :

<link href=”~/Content/BasicStyle.css” rel=”stylesheet” />

<link href=”~/Content/LayoutStyle.css” rel=”stylesheet” />

3. Viết mã CSS

Để định dạng các đối tượng HTML hiển thị trên 1 hàng , hay nhiều hàng ( dùng trong layout) chúng ta có 2 kỹ thuật CSS là dùng thuộc tính Inline-Block và float ( Chúng tôi đã giới thiệu 2 kỹ thuật này trong tài liệu về HTML – CSS ) .Vì vậy chúng ta sẽ khai báo các lớp này trong File BasicStyle.css .Để không rối code , hiện tại chúng ta chỉ dùng thuộc tính inline-block nên chúng ta chỉ khai báo thuộc tính này trong file BasicStyle.css như sau :

inline-block {

display: inline-block;

vertical-align: top;

}

– Trong layout ta muốn phần tin nổi bật nằm bên trái phần nội dung chính ( tức là nằm trên cùng 1 hàng ) nên ta sẽ để class css 2 đối tượng này là inline-block , mã html layout dùng lớp css trên như sau :

<article class=”inline-block “>

@RenderBody()

</article>

<aside class=”inline-block “>

@Html.Partial(“SidebarPartial”)

</aside>

Mã toàn bộ layout như sau:

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<meta name=”viewport” content=”width=device-width” />

<title>@ViewBag.Title</title>

@Styles.Render(“~/Content/css”)

@Scripts.Render(“~/bundles/modernizr”)

@Scripts.Render(“~/bundles/jquery”)

</head>

<body>

<header>

<div>@Html.Partial(“HeaderPartial”)</div>

<nav>@Html.Partial(“MenuPartial”)</nav>

</header>

<div>

<article class=”inline-block”>

@RenderBody()

</article>

<aside class=”inline-block”>

@Html.Partial(“SidebarPartial”)

</aside>

</div>

<footer>

@Html.Partial(“FooterPartial”)

</footer>

@RenderSection(“scripts”, required: false)

</body>

</html>

– Chạy ứng dụng được kết quả như hình dưới đây :

image9

– ta thấy các luật CSS đã được áp dụng để định dạng website

– Để đạt được giao diện như ý chúng ta chỉ cần định chiều ngang (width ) cho nội dung chính

– tạo 2 lớp css sau trong file LayoutStyle.css như sau :

.main {

margin: 10px;

width: 74%;

}

 

.sidebar {

margin-top: 10px;

width: 23%;

}

– Khai báo mã html sử dụng 2 lớp trên trong layout như sau :

<article class=”inline-block main”>

@RenderBody()

</article>

<aside class=”inline-block sidebar”>

@Html.Partial(“SidebarPartial”)

</aside>

Mã toàn bộ layout như sau :

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<meta name=”viewport” content=”width=device-width” />

<title>@ViewBag.Title</title>

@Styles.Render(“~/Content/css”)

@Scripts.Render(“~/bundles/modernizr”)

@Scripts.Render(“~/bundles/jquery”)

</head>

<body>

<header>

<div>@Html.Partial(“HeaderPartial”)</div>

<nav>@Html.Partial(“MenuPartial”)</nav>

</header>

<div>

<article class=”inline-block main”>

@RenderBody()

</article>

<aside class=”inline-block sidebar”>

@Html.Partial(“SidebarPartial”)

</aside>

</div>

<footer>

@Html.Partial(“FooterPartial”)

</footer>

@RenderSection(“scripts”, required: false)

</body>

</html>

– Chạy ứng dụng được kết quả như hình sau :

image10

– Như vậy chúng ta đã gần đạt được giao diện như mong muốn

– Khi thiết kế Layout dùng CSS chúng ta cần chú ý trường hợp website được xem trên các màn hình độ phần giải khác nhau .Khi đó chiều ngang ( width) khác nhau dẫn tới vỡ bố cục giao diện .Do vậy chúng ta cần chỉ định chiều ngang tối thiểu để tránh vỡ giao diện

– Ngoài ra chúng ta có thể chỉ định màu nền cho website , màu nền trang kế thừa

– Khai báo các lớp và thuộc tính CSS sau trong file LayoutStyle.css :

body {

margin: 0 auto;

width: 98%;

min-width: 960px;

background: #e2e2e2;

}

.body {

background: #fff;

}

– Khai báo sử dụng các thuộc tính trên trong Layout

<div class=”body”>

<article class=”inline-block main”>

<section>

@RenderBody()

</section>

</article>

<aside class=”inline-block sidebar”>

@Html.Action(“SidebarPartial”, “Sidebar”)

</aside>

</div>

Mã toàn bộ file Layout như sau :

<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width” />

<title>@ViewBag.Title</title>

@Styles.Render(“~/Content/css”)

@Scripts.Render(“~/bundles/modernizr”)

@Scripts.Render(“~/bundles/jquery”)

</head>

<body>

<header>

<div>

@Html.Partial(“HeaderPartial”)

</div>

<div class=”float-right” id=”LogOn”>

@Html.Partial(“LogOnPartial”)

</div>

<nav class=”mainMenu clear-both”>

@Html.Partial(“MainMenuPartial”)

</nav>

</header>

<div class=”body”>

<article class=”inline-block main”>

<section>

@RenderBody()

</section>

</article>

<aside class=”inline-block sidebar”>

@Html.Action(“SidebarPartial”, “Sidebar”)

</aside>

</div>

<footer>

@Html.Partial(“FooterPartial”)

</footer>

@RenderSection(“scripts”, required: false)

</body>

</html>

Chạy ứng dụng ta được kết quả như hình sau :

image11

– khi này nếu co dãn trình duyệt , thì trình duyệt tự động tạo ra thanh cuộn để giao diện không bị vỡ

Định dạng Menu

Menu chỉ định riêng với từng website nên ta khai báo mã CSS định dạng menu trong file Site.css

– Xóa hết các file CSS mà VS tự động sinh ra trong file Site.css , và thêm đoạn mã sau :

.mainMenu {

background: #4f86f8;

border-radius: 10px;

padding: 10px;

}

 

.mainMenu a {

font-size: 16px;

color: #FFFFFF;

font-weight: bold;

padding: 10px;

border-right: 1px solid #fff;

}

– Khai báo mã trong Layout :

<nav class=”mainMenu”>@Html.Partial(“MenuPartial”)</nav>

– Mã toàn bộ file Layout :

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<meta name=”viewport” content=”width=device-width” />

<title>@ViewBag.Title</title>

@Styles.Render(“~/Content/css”)

@Scripts.Render(“~/bundles/modernizr”)

</head>

<body>

<header>

<div>@Html.Partial(“HeaderPartial”)</div>

<nav class=”mainMenu”>@Html.Partial(“MenuPartial”)</nav>

</header>

<div class=”body”>

<article class=”inline-block main”>

@RenderBody()

</article>

<aside class=”inline-block sidebar”>

@Html.Partial(“SidebarPartial”)

</aside>

</div>

<footer>

@Html.Partial(“FooterPartial”)

</footer>

@Scripts.Render(“~/bundles/jquery”)

@RenderSection(“scripts”, required: false)

</body>

</html>

Chạy ứng dụng được kết quả như hình sau :

image12

4. Mã CSS các lớp , đối tượng thường gặp trong ứng dụng

– Như chúng tôi đã nói , có nhiều lớp , thuộc tính CSS được dùng định dạng ở nhiều nơi trong website , hoặc trong nhiều website .Nên chúng ta xây dựng sẵn các lớp, thuộc tính này để sử dùng lại ở nhiều nơi .Tạm thời chúng tôi xây dựng các file CSS với các thuộc tính tương ứng đó là :

+) File LayoutStyle.css dùng định dạng layout website

+) File BasicStyleStyle.css dùng khai báo các lớp định dạng website

+) File HtmlStyleStyle.css dùng khai báo các thuộc tính định dạng các thẻ html

+) File Site.css ( file Visual Studio tự sinh ra ) dùng khai báo các thuộc tính chỉ định dạng cho website hiện tại , được dùng nhiều nơi trong website

+) Ngoài ra với các thuộc tính chỉ dùng ở 1 nơi trong website các bạn có thể khai báo trực tiếp trong các thẻ của file đó hoặc khai báo trong thẻ style của file đó ( Chúng tôi sẽ dùng các kỹ thuật này để định dạng View trong các ví dụ tiếp ) .

+) Các bạn chú ý các kỹ thuật này rất quan trọng trong việc định dạng và quản lý giao diện website , khi phát triển và bảo trì .

Dưới đây là mã CSS cho các file trên , các bạn có thể xem lại trong file mã nguồn gửi kèm

– Mã định dạng Layout ( khai báo trong file LayoutStyle.css)

/*body chứa phần nội dung*/

body {

margin: 0 auto;

width: 98%;

min-width: 960px;

background: #e2e2e2;

}

 

.body {

background: #fff;

}

/*Định kích thước main và sidebar*/

/*Dùng Inline-Block cần chỉ định rõ width cụ thể các đối tượng*/

.main {

margin: 10px;

width: 74%;

}

 

.sidebar {

margin-top: 10px;

width: 23%;

}

– Mã các lớp dùng chung trong định dạng các đối tượng html ( khai báo trong file BasicStyle.css)

/*#region Inline-Block */

.inline-block {

display: inline-block;

vertical-align: top;

}

/*#endregion */

/*#region Float */

.float-left {

float: left;

}

 

.float-right {

float: right;

}

 

.clear-both {

clear: both;

}

 

/*#endregion */

/*#region Link header */

.header1 {

background: #d1cdcd;

border-radius: 5px;

padding: 3px;

}

 

.header1, .header1 a {

color: #000;

font-weight: bold;

font-size: 16px;

}

 

.header2 {

background: #4f86f8;

padding: 3px;

border-radius: 5px;

}

 

.header2, .header2 a {

color: #fff;

font-size: 16px;

}

 

 

/*#endregion */

/*#region textHeader . Định dạng tiêu đề */

.textHeader {

font-size: 20px;

font-weight: bold;

color: #253dfc;

padding: 10px 0px;

}

/*#endregion */

 

/*#region LinkButton */

.linkButton1 {

background: #0094ff;

color: #fff;

font-size: 16px;

font-weight: bold;

padding: 3px 10px;

border-radius: 5px;

margin: 2px;

}

.linkButton2 {

background: #0553b4;

color: #fff;

font-size: 16px;

font-weight: bold;

padding: 2px;

border-radius: 5px;

}

/*#endregion */

/*#region error validation jQuery .Định dạng báo lỗi valdate , mã VS tự động tạo ra */

.field-validation-error {

color: #e80c4d;

font-weight: bold;

}

.field-validation-valid {

display: none;

}

/*#endregion */

Mã CSS định dạng các thẻ html cơ bản ( khai báo trong HtmlStyle.css)

/*#region Thẻ ul */

ul {

/*Bỏ đánh dấu đầu dòng*/

list-style: none;

/*canh trái danh sách*/

margin: 0;

padding: 0px;

}

 

/*#endregion */

/*#region thẻ a */

a {

text-decoration: none;

color: #253dfc;

}

 

a:hover {

text-decoration: underline;

}

 

a:active {

/*color: #0519fa;*/

}

 

a:visited {

/*color: #05fbdd;*/

}

 

 

/*#endregion */

/*#region textArea */

textArea {

font-family: ‘Times New Roman’;

width: 300px;

height: 100px;

}

/*#endregion */

/*#region footer */

footer {

margin: 30px 0px;

}

/*#endregion */

 

/*#region Image */

img {

border: none;

}

/*#endregion */

/*#region input submit */

input[type=”submit”] {

background: #0094ff;

padding: 5px;

font-weight: bold;

color: #fff;

font-size: 16px;

border-radius: 8px;

}

/*#endregion */

/*#region button */

button {

background: #0094ff;

padding: 5px;

margin: 5px;

border-radius: 5px;

min-width: 50px;

font-weight: bold;

color: #fff;

}

/*#endregion */

/*#region Thẻ table */

tr, td {

margin: 5px;

padding: 10px;

}

/*#endregion */

Nguồn: laptrinhvien.net

Leave a Comment

Your email address will not be published. Required fields are marked *