By Carmel Schvartzman
In this tutorial we'll learn how to create an outstanding MVC site using CSS Templates in 10 minutes. Building an MVC website requires you to design far beyond the simple standard style provided by default by the Visual Studio environment. The task of writing CSS code for your own layout, can be a tedious work if you're not a web designer. CSS templates take care of this by providing you with a nicelly designed layout, which you can use to build your website.Until some years ago, web page's layouts were put together using the HTML <TABLE> tag, which was originally meant for holding tabulated data more than for showing parts of a page. Nowadays there is a lead to using strictly CSS for their layouts instead, by means of the <div> tag essentially.
We'll be using CSS TEMPLATES to help us to build well designed web sites quickly. We can find on the web many CSS templates released for FREE, very lightweight and fast loading, tables-free and W3C standards compliant, also provided with public domain photos.
We'll want to create an outstanding MVC site using CSS Templates , showing as follows:
First let's find some CSS templates on the web for FREE: make a search for "CSS FREE TEMPLATES". Right now the most used is the site from WIX on www.freecsstemplates.org :
Choose some template you like. I'll select the "earthlingtwo" template and download it:
Open the ZIP file :
Copy-paste the whole theme into the "Content" folder of the MVC application:
Now open the HTML file:
There are some very important tags that you must take into account to customize your site: <head> and <body>, and the <div>s "menu" and "content":
We're going to replace the standard HTML inside the template, with the layout from the MVC "_Layout" file:
Open the _Layout file and see the markup we're going to embed inside the template:
Let's start by copying the _Layout <head> contents:
And PASTE them inside the CSS HTML template:
Also, fix the link to target to the CSS "Style" file inside the Content folder:
Now COPY the <header> markup from _Layout :
To the "header" <div> inside the template:
And replace the "menu" from the template:
...with the "menu" from the _Layout file:
The template's "header" will resume as follows, after the changes:
Next, COPY the "body" <div> from the MVC _Layout file...:
...replacing the whole "content" <div> inside the CSS template:
The final results should be:
Next, delete the entire "sidebar", because we don't need it:
Finally, COPY the <footer> tag from the _Layout:
...replacing the "footer" <div> inside the CSS template:
Resulting in the following:
Take care of copying the "scripts" section , to allow the MVC displaying properly.
The results should be approximately the following web design, after building the MVC application:
Happy programming.....
We'll want to create an outstanding MVC site using CSS Templates , showing as follows:
First let's find some CSS templates on the web for FREE: make a search for "CSS FREE TEMPLATES". Right now the most used is the site from WIX on www.freecsstemplates.org :
Choose some template you like. I'll select the "earthlingtwo" template and download it:
Open the ZIP file :
Copy-paste the whole theme into the "Content" folder of the MVC application:
Now open the HTML file:
There are some very important tags that you must take into account to customize your site: <head> and <body>, and the <div>s "menu" and "content":
We're going to replace the standard HTML inside the template, with the layout from the MVC "_Layout" file:
Open the _Layout file and see the markup we're going to embed inside the template:
Let's start by copying the _Layout <head> contents:
And PASTE them inside the CSS HTML template:
Also, fix the link to target to the CSS "Style" file inside the Content folder:
Now COPY the <header> markup from _Layout :
To the "header" <div> inside the template:
And replace the "menu" from the template:
...with the "menu" from the _Layout file:
The template's "header" will resume as follows, after the changes:
Next, COPY the "body" <div> from the MVC _Layout file...:
...replacing the whole "content" <div> inside the CSS template:
The final results should be:
Next, delete the entire "sidebar", because we don't need it:
Finally, COPY the <footer> tag from the _Layout:
...replacing the "footer" <div> inside the CSS template:
Resulting in the following:
Take care of copying the "scripts" section , to allow the MVC displaying properly.
The results should be approximately the following web design, after building the MVC application:
That's all!!
In this tutorial we've learn how to create an outstanding MVC site using CSS Templates in 10 minutes. Happy programming.....
כתב: כרמל שוורצמן
No comments:
Post a Comment