Symphony Limited - Hoàn thành giao diện cơ bản
****** Lưu ý khi chạy thử có thể browser không cập nhận kịp css, các bạn chạy rồi bấm nút refresh trình duyệt sẽ hiển thị ngay
Bài này chúng ta sẽ hoàn thành giao diện cơ bản của trang web
-Đầu tiên là chình sửa lại trang site.css
/*-----------------------------------------------------------Bây h tiếp tục chình sửa layout cho đẹp:
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body
{
background: #000 url('img/background/black.png') repeat-x 100% 0;
font-size: 15px;
color:#2d0e06;
font-family:Gill Sans MT;
}
header,
footer,
nav,
section
{
display: block;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #000;
}
h1
{
font-size: 2em;
padding-bottom: 0;
margin-bottom: 0;
}
h2
{
padding: 0 0 10px 0;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
a
{
color: #696969;
}
li
{
line-height: 1.6;
}
/* this rule styles <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
/* you can specify a greater or lesser percentage for the
page width. Or, you can specify an exact pixel width. */
.page
{
width: 80%;
margin: 0 auto;
}
header, #header
{
position: relative;
margin-bottom: 5px;
color: #000;
padding:0px 0px 0px 10px;
height:110px;
}
header h1, #header h1
{
font-weight: bold;
padding: 5px 0;
margin: 0;
color: #fff;
border: none;
line-height: 2em;
font-size: 32px !important;
}
#main
{
background:#fff;
padding: 0px 0px 0px 0px;
margin-bottom: 10px;
margin-top:10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscore */
font-size:14px;
-moz-box-shadow: 3px 3px 3px 36px #1E1C1C;
-webkit-box-shadow: 3px 3px 3px 3px #1E1C1C;
box-shadow: 0px 0px 10px 3px #1E1C1C;
border-radius:5px;
}
footer, #footer
{
color: #fff;
padding: 0px 0;
text-align: center;
line-height: normal;
margin: 0;
font-size: .9em;
text-align:center;
-moz-box-shadow: 3px 3px 3px 36px #1E1C1C;
-webkit-box-shadow: 3px 3px 3px 3px #1E1C1C;
box-shadow: 0px 0px 10px 3px #1E1C1C;
border-radius:5px;
}
.content
{
padding:5px 20px 30px 20px;
}
table
{
padding:0;
margin:0;
}
/* ---------------------------Menu--------------------------------- */
#Menu
.t-content
{
color: #333;
padding: 0;
margin: 0;
}
.product-list
{
background-color: #7B7979;
padding: 2px 2px 2px 2px;
margin: 0px;
}
.product
{
vertical-align:top;
background-color: #7B7979;
text-align: left;
list-style: none;
margin: 5px 5px 5px 5px;
border: 2px solid #ccc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 15px;
background: #fff;
}
.title
{
vertical-align:top;
font-size:12px;
color:Blue;
}
.linkmenu
{
font-size:13px;
color:Blue;
font-weight:bold;
text-decoration:none;
}
.linkmenu1
{
font-size:13px;
color:Blue;
}
.new
{
color:Red;
font-weight:bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.black.css").Combined(true).Compress(true)))
</head>
<body>
<div class="page">
@*----------------Header-----------------------------*@
<header>
<img src="../../Content/img/banner/abc.png" alt="Banner" width="" />
</header>
@*----------------Menu-----------------------------*@
<div>
</div>
@*----------------Main Content-----------------------------*@
<section id="main">
<div class="content">
@RenderBody()
</div>
</section>
@*----------------Footer-----------------------------*@
<footer>
@Html.ActionLink("Home", "Index", "Home", "") | @Html.ActionLink("About", "Index", "Home", "")
| @Html.ActionLink("Contact Us", "Index", "Home", "") | @Html.ActionLink("FAQs", "Index", "Home", "")
@*------ @Html.Action("Menu","Home")------*@
<br />
Copyright © AMA English Center
<br />
Address: 186 Nguyen Thi Minh Khai, Ward 6, District 3, HCMC
<br />
Tel: (08) 3930 2861
<br />
Email: info@ama.edu.vn
<br />
</footer>
</div>
@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)))
</body>
</html>
-Copy folder img dưới dây vào mục content (vào content add folder img, trong img add banner, menu, background, rồi trong từng thư muc add existing item từng hình ảnh vào)
img folder
-Xóa phần menu ở trang index thay vào chữ /Home di chạy thử chương trình nào
Nhìn cũng kha khá dc rồi
Bây h vào trang Layout ngay chỗ :
@*----------------Menu-----------------------------*@
<div> </div>
Thêm vào menu ở giữa thẻ div:
@{ Html.Telerik().Menu() .Name("Menu") .Items(menu => { menu.Add().Text("HOME"); menu.Add() .Text("ABOUT US") .Items(item => { item.Add().Text("Overview"); item.Add().Text("Faculty Members"); item.Add().Text("Achievements"); }); menu.Add() .Text("COURSES")
.Items(item => { item.Add().Text("PROFESSIONNAL COURSES").Items(childitem => { childitem.Add().Text("Smart Professional- Java"); childitem.Add().Text("Smart Professional- .NET"); childitem.Add().Text("IT Booster - .NET"); childitem.Add().Text("IT Booster – Java");
}); item.Add().Text("CAREER COURSES").Items(childitem => { childitem.Add().Text("ACCP Pro "); childitem.Add().Text("DCS Plus 2012");
}); item.Add().Text("CIRTIFICATION COURSES").Items(childitem => { childitem.Add().Text("ACCP Pro "); childitem.Add().Text("DCS Plus 2012");
}); item.Add().Text("SHORT-TERM COURSES").Items(childitem => { childitem.Add().Text("ACCP Pro "); childitem.Add().Text("DCS Plus 2012");
}); }); menu.Add() .Text("ENTRANCE EXAM")
.Items(item => { item.Add().Text("Upcomming Exam "); item.Add().Text("Register"); item.Add().Text("Exam Result");
}); }) .Render();}
Bây h chạy thử xem thế nào
Nhìn thấy menu không đẹp lắm đúng không, vậy thì chúng ta phải vào css để chỉnh sửa cho menu, vào theme telerik.black.min.csss , ngay dòng đầu tiên .t-widget, t-input thềm vào trong đó để dc như sau :
/* Black theme*/.t-widget,.t-input{border-color:#080808;/*font-size:.75em;/* 12px base,if there are no inherited font-sizes(MVC default) */background-color:#4f4f4f;-moz-box-shadow: 3px 3px 3px 36px #1E1C1C;
-webkit-box-shadow: 3px 3px 3px 3px #1E1C1C;
box-shadow: 0px 0px 10px 3px #1E1C1C;
border-radius:5px;}
/* .small .t-widget{font-size:.687em}
chạy thử xem nào
Vậy là đẹp rồi nhé
nếu bạn dùng theme khác thì sao ví dụ theme hay thì vào telerik.hay.min.csss cũng sửa dòng đầu tiên cho vào:
-moz-box-shadow: 3px 3px 3px 36px #ececd8;
-webkit-box-shadow: 3px 3px 3px 3px #ececd8;
box-shadow: 0px 0px 10px 3px #ececd8;
border-radius:5px;
sẽ ra như sau
các bạn cứ thêm 3 dòng trên vào riêng giá trị màu sắc thì chỉ ra bóng đen hay sáng thôi tùy chỉnh sao cho đẹp là dc
Menu như vậy thì con hơi đơn điệu nên mình chỉnh lại phần menu theo kiểu template sẽ đẹp hơn:
thay phần menu trong thẻ div = phần sau:
@{ Html.Telerik().Menu()
.Name("Menu").Effects(fx => fx.Slide()
.Opacity()
.OpenDuration(200)
.CloseDuration(300))
.Items(menu =>
{
menu.Add().Text("HOME").Action("Index", "Home");
menu.Add().Text("ABOUT US").Content(@<text>
<table class="product-list">
<tr>
<td class="product">
<table>
<tr>
<td>
<img src="@Url.Content("~/Content/img/menu/overview.jpg")" alt="Understanding Exposure" />
</td>
<td>
<a href="@Url.Content("~/Home/About")" class="linkmenu">Overview </a>
<td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="product">
<table>
<tr>
<td>
<a href="@Url.Content("~/Home/About")" class="linkmenu" >
<img src="@Url.Content("~/Content/img/menu/faculty.jpg")" alt="Understanding Exposure" /></a>
</td>
<td>
<a href="@Url.Content("~/Home/About")" class="linkmenu">Faculty Members </a>
<td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="product">
<table>
<tr>
<td>
<img src="@Url.Content("~/Content/img/menu/achievements.jpg")" alt="Understanding Exposure" />
</td>
<td>
<a href="@Url.Content("~/Home/About")" class="linkmenu">Achievements </a>
<td>
</tr>
</table>
</td>
</tr>
</table>
</text>);
menu.Add().Text("COURSES").Content(@<text>
<table class="product-list">
<tr>
<td class="product">
<table>
<tr>
<td>
<img src="@Url.Content("~/Content/img/menu/profcourse.jpg")" alt="Understanding Exposure" />
</td>
<td class="title" rowspan="2">
PROFESSIONNAL COURSES
<ul type="circle">
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">Smart Professional- Java
</a></li>
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">Smart Professional- .NET
</a></li>
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">IT Booster - .NET </a>
</li>
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">IT Booster – Java </a>
</li>
</ul>
<td>
</tr>
<tr>
<td>
<td>
</tr>
</table>
</td>
<td class="product">
<table>
<tr>
<td>
<img src="@Url.Content("~/Content/img/menu/careercourses.jpg")" alt="Understanding Exposure" />
</td>
<td class="title" rowspan="2">
CAREER COURSES
<ul type="circle">
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">ACCP Pro </a></li>
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">DCS Plus 2012</a></li>
</ul>
<td>
</tr>
<tr>
<td>
<td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="product">
<table>
<tr>
<td>
<img src="@Url.Content("~/Content/img/menu/certificationcourses.jpg")" alt="Understanding Exposure" />
</td>
<td class="title" rowspan="2">
CIRTIFICATION COURSES
<ul type="circle">
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">Microsoft .NET </a>
</li>
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">Oracle </a><span class="new">
(NEW)</span></li>
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">Java</a></li>
</ul>
<td>
</tr>
<tr>
<td>
<td>
</tr>
</table>
</td>
<td class="product">
<table>
<tr>
<td>
<img src="@Url.Content("~/Content/img/menu/shorttermcourses.jpg")" alt="Understanding Exposure" />
</td>
<td class="title" rowspan="2">
SHORT-TERM COURSES
<ul type="circle">
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">Cloud Computing </a>
</li>
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">C in practice </a></li>
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">Programming Languages </a>
</li>
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">Database </a></li>
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">Smart Accountant </a><span
class="new">(NEW)</span> </li>
<li><a href="@Url.Content("~/Home/About")" class="linkmenu1">Foundation Courses </a>
<span class="new">(NEW)</span> </li>
</ul>
<td>
</tr>
<tr>
<td>
<td>
</tr>
</table>
</td>
</tr>
</table>
</text>);
menu.Add().Text("ENTRANCE EXAM").Content(@<text>
<table class="product-list">
<tr>
<td class="product">
<table>
<tr>
<td>
<img src="@Url.Content("~/Content/img/menu/overview.jpg")" alt="Understanding Exposure" />
</td>
<td>
<a href="@Url.Content("~/Home/About")" class="linkmenu">Upcomming Exam </a>
<td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="product">
<table>
<tr>
<td>
<a href="@Url.Content("~/Home/About")" class="linkmenu" >
<img src="@Url.Content("~/Content/img/menu/faculty.jpg")" alt="Understanding Exposure" /></a>
</td>
<td>
<a href="@Url.Content("~/Home/About")" class="linkmenu">Register </a>
<td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="product">
<table>
<tr>
<td>
<img src="@Url.Content("~/Content/img/menu/achievements.jpg")" alt="Understanding Exposure" />
</td>
<td>
<a href="@Url.Content("~/Home/About")" class="linkmenu">Exam Result </a>
<td>
</tr>
</table>
</td>
</tr>
</table>
</text>);
menu.Add().Text("FAQS").Action("Index", "Home");
menu.Add().Text("CONTACT US ").Action("Index", "Home");
})
.Render();
}
Các bạn thấy hơi dài vì mình làm tĩnh, khi làm menu động chúng ta xai vòng for viet code sẽ khỏe hơn rất nhiều
Chạy thử xem kết quả nào (mỗi lần chạy thử phải bấm refresh trình duyệt mới áp dụng dc nhe)
Đây là code project sau khi hoàn thành xong 3 bài đầu tiên.
Project phần 3
Không có nhận xét nào:
Đăng nhận xét