Creating the website layout

This page is a part of a tutorial, which you should follow sequentially, from the beginning to the end. Go to the first page: Getting started with Kentico.

You will learn about:

Adding the CSS resources
Creating the site layout
Adding the ViewStart file

Your tutorial website is coming up nicely! In the previous steps, you have created all the resources you’ll need to build your MVC application.

To achieve a consistent experience on your website, create a layout view. The view will contain the website’s header, navigation menu, and footer content, and ensure a uniform look across all pages on the website. You will also add a _ViewStart file that assigns the default layout to all views in your MVC project.

Adding the CSS resources

The basic design of the Medio clinic website relies on CSS styles from the styles.css file in the tutorial resources. We recommend that you keep design-related resources apart from the rest of the code in the MVC application.

In Visual Studio, select the MedioMVC project and add a new folder named Content.
Create a new Styles subfolder in the Content folder.
Add the styles.css file you have downloaded to the Styles folder.

Your project now has the stylesheet you will use to define the website’s design.

Creating the site layout

In this step, you will create the layout view.

In Visual Studio, create a new Shared folder under the Views folder.
Select the Shared folder and add a new layout named: _Layout

You can use the built-in templates in Visual Studio. Right-click the Shared folder, go to Add option and select the MVC 5 Layout Page (Razor)template from the menu.
Replace the code in _Layout.cshtml with the sample code in the index.html file from the tutorial resources.
Locate the <title>…</title> tags, and replace the hardcoded page title Tutorial website with a Medio Clinic - prefix and the Razor call @ViewBag.Title.
Change the link to the stylesheet to reflect the location of the styles.css file in your project.
```
 <link rel="stylesheet" href="~/Content/Styles/styles.css">


 
```
Delete the content between the closing </header> andopening <footer> tags, and replace it with the Razor call @RenderBody().

Your _Layout.cshtml code should look like this:




 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     @* Dynamically resolves the page's title *@
     <title>Medio Clinic - @ViewBag.Title</title>

     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
     <link href="http://fonts.googleapis.com/css?family=Lato:400,700italic&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">
     <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

     @* Loads the style.css resource *@
     <link rel="stylesheet" href="~/Content/Styles/styles.css">
 </head>
 <body>
     <header>
         <div class="col-sm-offset-3 col-sm-6">
             <div class="col-sm-6">
                 <a href="./index.html" title="MedioClinic homepage" class="logo">MEDIO clinic</a>
             </div>
             <div class="col-sm-6 nav">
                 <nav>
                     <a href="./index.html" title="Medical centers">Home</a>
                     <a href="./medical-center.html" title="Medical centers">Medical center</a>
                 </nav>
             </div>
         </div>
         <div class="clearfix"></div>
     </header>

     @* Loads the content of your Tutorial's pages as sub views *@
     @RenderBody()

     <footer>
         <div class="col-sm-offset-3 col-sm-6">
             <div class="row">
                 <div class="col-sm-6">
                     <h4>MEDIO clinic</h4>
                     <ul>
                         <li><i class="fa fa-map-marker"></i> Address: <address>7A Kentico street, Bedford, NH 03110, USA</address></li>
                         <li><i class="fa fa-envelope-o"></i> E-mail: <a href="mailto:info@medio-clinic.com" title="Email us">info@medio-clinic.com</a></li>
                         <li><i class="fa fa-phone"></i> Phone number: <a href="tel:5417543010" title="Phone us">(541) 754-3010</a>
                     </ul>
                 </div>
                 <div class="col-sm-6">
                     <span class="cms">Powered by <a href="http://www.kentico.com" title="Kentico CMS">Kentico CMS for ASP.NET</a></span>
                 </div>
             </div>
         </div>
         <div class="clearfix"></div>
     </footer>
 </body>
 </html>

Save your changes

Adding the ViewStart file

A ViewStart file allows you to define common Razor code that executes at the start of each view’s rendering. We will use this to set _Layout.cshtml as the default layout for all views on your website.

Select the Views folder, and add a new Empty view named: _ViewStart

Replace the default code with the following Razor markup:




 @{
     Layout = "~/Views/Shared/_Layout.cshtml";
 }

Save your changes.

All views in your MVC project will now use the site’s default layout unless the developer specifies otherwise.

You now have a consistent layout for your website. You also have the option to change the common layout for all views in a single location, if you want to provide your website’s visitors with a different experience.

Previous page: Working with generated classes in the MVC application — Next page: Displaying the content of the pages

Completed pages: 7 of 10

ΟΟΟΟΟΟΟΟΟΟ