Create the site layout

✖
Copy to clipboard

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

In this step, you’ll:

Our tutorial website is shaping up nicely! In the previous steps, we’ve modeled and created all the content we’ll want to present. With that out of the way, we can start developing our website.

To achieve a consistent user experience, we’ll create a layout view and use it to link the necessary CSS files. The view will contain the website’s header, navigation menu, and footer content, and ensure a uniform look across all pages. We’ll also add a _ViewStart file that assigns the default layout to all views in the project.

Add CSS resources

The basic design of the Medlab clinic website relies on CSS styles from the styles.css file in the tutorial resources (you can download the resources on the first page of the tutorial: Developer tutorial). 

Add the CSS resources by following these steps:

  1. Open the MEDLABClinic project in Visual Studio.
  2. Create a wwwroot folder in the project’s root directory.
  3. Inside the wwwroot folder, create a css subfolder.
  4. Add the styles.css file from the tutorial resources to the cssfolder.

The project now contains the stylesheet we’ll use to define the website’s design.

Create the site layout

In this step, we’ll create the layout view.

  1. In Visual Studio, create a Views folder in the project’s root directory.

  2. Inside the Views folder, create a Shared subfolder.

  3. Under the Views/Shared folder, create a Razor Layout named _Layout.cshtml.

  4. Replace the code in _Layout.cshtml with the sample code of the index.html file from the tutorial resources.

  5. Locate the paired <title> tags in the <head> section, and replace the hardcoded page title Tutorial website with the following name prefix and Razor call:Medlab Clinic \- @ViewBag.Title

  6. Link the file containing the site’s CSS inside the <head> section.

    

 <link href="~/css/styles.css" rel="stylesheet" type="text/css" />

  7. Add a styles Razor section before the closing </head> tag. The section will be used to add page-specific stylesheets for views that use Page Builder.

    

 @RenderSection("styles", required: false)

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

  9. Add a scripts Razor section before the closing </body> tag. The section will be used to add page-specific scripts for views that use Page Builder.

    

 @RenderSection("scripts", required: false)

  10. Your _Layout.cshtml code should now look like this:

    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    @* Dynamically resolves the page's title *@
    <title>Medlab 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="https://fonts.googleapis.com/css?family=Lato:400,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

    @* Links a stylesheet used by the website. ASP.NET Core automatically searches for static files inside the ~/wwwroot folder. *@
    <link href="~/css/styles.css" rel="stylesheet" type="text/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="MedlabClinic homepage" class="logo">MEDLAB 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>MEDLAB 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@example.com" title="Email us">info@example.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="https://xperience.io/" title="Xperience by Kentico">Xperience by Kentico</a></span>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </footer>
    @* Razor section for additional page-specific scripts *@
    @RenderSection("scripts", required: false)
</body>
</html>

  11. Save your changes

Add 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.

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

  2. Replace the default code with the following Razor markup:

    

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

  3. Save your changes.

All views in your 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: Create pages — Next page: Display page content

Completed pages: 6 of 9