Creating the site 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:
Your tutorial website is coming up nicely! In the previous steps, you have created all the resources you’ll need to build your live site 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 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).
Add the CSS resources by following these steps:
- Open the live site project in Visual Studio.
- Create a wwwroot folder in the project’s root directory.
- Inside the wwwroot folder, create a css subfolder.
- Add the styles.css file from the tutorial resources to the cssfolder.
Your project now contains the stylesheet you will use to define the website’s design.
Creating the site layout
In this step, we’ll create the layout view.
In Visual Studio, create a Views folder in the project’s root directory.
Inside the Views folder, create a Shared subfolder.
Under the Views/Shared folder, create a Razor Layout named _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 and the Razor call @ViewBag.Title.
Link the file containing the site’s CSS inside the <head> tags.
<link href="~/css/styles.css" rel="stylesheet" type="text/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 now 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="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="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="https://xperience.io/" title="Kentico Xperience CMS">Kentico Xperience CMS for ASP.NET Core</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.
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 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 the generated page type classes — Next page: Displaying page content
Completed pages: 7 of 10