Creating the website layout

This page is a part of a tutorial, which you should follow sequentially from beginning to end. Go to the first page: Using the Xperience interface.

You will learn about:

You will learn about:
Adding CSS resources
Creating the site layout

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.

In this part of the tutorial, we’ll focus on designing the live site MVC application serving as the front-end of your Xperience site. This section is mainly focused on MVC 5 development using Xperience API to make the process as smooth as possible.

First, to achieve a consistent experience on our website, let’s 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. We’ll also add a _ViewStart file that assigns the default layout to all views in your MVC project.

Adding CSS resources

The basic design of the Medio clinic website relies on CSS styles from the styles.css file in the tutorial resources (you can download the resources here: TutorialWebsite.zip). We recommend that you keep design-related resources apart from the rest of the code in the MVC application.

Add the CSS resources by following these steps:

In Visual Studio, include the necessary styles by adding the styles.css file from the tutorial resources to the Content folder in the MEDIOClinic project.
Open the App_Start/BundleConfig.cs file and edit the RegisterBundles method.
- The project template your MVC application is based on contains two bundles used for bundling CSS and JavaScript files. In this tutorial, you will only be working with the CSS bundle. You can safely ignore the JavaScript bundle.

Add the styles.css file to the "~/Content/css" bundle. The RegisterBundles method should now look like the following:




 public static void RegisterBundles(BundleCollection bundles)
 {
     // Custom JavaScript files from the ~/Scripts/ directory can be included as well
     bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
                 "~/Scripts/site.js"));

     // Custom CSS files from the ~/Content/ directory can be included as well
     bundles.Add(new StyleBundle("~/Content/css").Include(
                 "~/Content/site.css",
                 "~/Content/styles.css"));
 }

Use style and script bundling to reduce the overall size of the site’s style and script files and minimize the number of requests made to the server when loading each page. Learn more abound bundling on Microsoft’s official documentation portal: Bundling and minification.

Your project now contains 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, open Views/Shared/_Layout.cshtml.
Replace the code in _Layout.cshtml with the sample code in the index.html file from the tutorial resources (you can download the resources here: TutorialWebsite.zip).
Locate the <title>…</title> tags, and replace the hardcoded page title “Tutorial website" with a”Medio Clinic -" prefix followed by the Razor call @ViewBag.Title.
Render the style bundle containing the site’s styles.css file inside the <head> tags.
```
 @Styles.Render("~/Content/css")


 
```
Add a styles Razor section before the closing </head> tag. The section will be used to add page-specific stylesheets for views that use the page builder.
```
 @RenderSection("styles", required: false)


 
```
Delete the content between the closing </header> andopening <footer> tags, and replace it with the Razor call @RenderBody().
Add a scripts Razor section before the closing </body> tag. The section will be used to add page-specific scripts for views that use the page builder.
```
 @RenderSection("scripts", required: false)


 
```

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 styles.css resource *@
     @Styles.Render("~/Content/css")
     @* Razor section for additional page-specific styles *@
     @RenderSection("styles", required: false)
 </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="Home">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 Xperience">Kentico Xperience for ASP.NET</a></span>
                 </div>
             </div>
         </div>
         <div class="clearfix"></div>
     </footer>

     @* Razor section for additional page-specific scripts *@
     @RenderSection("scripts", required: false)
 </body>
 </html>

Save your changes

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 site’s visitors with a different experience.

Previous page: Working with generated classes — Next page: Displaying the page content

Completed pages: 7 of 10