Layout Builder
Design a theme for your site
Let's get started building our own site.
Page Layout Design
This is what our page layout will look like
We will be designing a very simple page layout.
At the top of our layout will be a header. This will contain our site heading and menu bar.
Below the header will be a content section. This will contain all of our content for each page.
Using a Layout
We can copy our layout to make more pages
Once we have our page layout set up, we will be able to use it to make more pages.
We will design what our site should look like using our `index.html`, then copy it for each additional page in our website.
Cloud Cannon lets us edit our code and preview our site
Cloud Cannon is an online website editor. We will use it to edit our code and also see a live preview of what it looks like.
It's a free service and you can even log in from home.
Create a New Project
In CloudCannon, click "Create Site" and make a project
You should already have a CloudCannon account set up. If not, create one now.
Log in to CloudCannon and create a new project.
Name your project whatever you like, for example "My Website".
Site Template
We will create images, index and style in our project folder
Congratulations, you now have a brand new empty website!
We need to add two files and one folder to our Cloud Cannon dashboard.
Once we are done, we will have `index.html`, `style.css` and an `images` folder.
Template Files
images
All your images go in this folder.
index.html
HTML code for your home page.
style.css
CSS code for your whole website.
The `images` folder is where you should upload any images you want to use in your website.
The `index.html` contains all the HTML code for your home page. If you want to add content to your home page, you would edit this file.
The `style.css` contains all the CSS code for your whole website. If you want to change how anything looks on any page, you would edit this file.
Create Index Page
Create index.html in your dashboard
In your dashboard, click "Create File" and call it `index.html`.
The `index` page is where you put all of the HTML code for your website's home page.
Your home page needs to be called `index.html` so that your web browser can load it automatically.
When you add more pages, you can call the extra ones whatever you like, but your home page should always be called `index.html`!
Index Page Starter Code
<!DOCTYPE html>
<html>
<!-- head only used by the browser -->
<head>
<title>My Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<!-- body contains the visible page content -->
<body>
<!-- My HTML Code Goes Here-->
</body>
</html>
Copy this HTML code into your index.html
Click on your `index.html` to open it up.
Click on the "Code Editor" button at the top right of CloudCannon. This opens the code editor screen for your page.
Copy the code from this slide into your code editor and save.
The first line contains the `doctype` - this tells your web browser that the file is an web page using the latest version of HTML.
The opening and closing `html` tags wrap around all of the html code in the page.
HTML Head
<head>
<title>My Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
The head contains a browser tab title and a CSS file link
The `head` section of a web page contains information about your page. It _doesn't_ contain anything which is actually visible on the page.
Be careful, `head` and `header` are two very different tags!
The `title` is what shows up in your browser tab.
The `link` is to the stylesheet which will contain our CSS code.
You won't be able to see your title in CloudCannon.
HTML Body
<body>
<!-- My HTML Code Goes Here-->
</body>
All of our page content HTML goes between the body tags
Further down your `index.html` you will find the body tags.
Everything we want to be visible on our page will go between these two tags.
All HTML code you add to your page should go _after_ the opening body tag and _before_ the closing body tag.
There are some special cases, but if they come up the instructions will make it very clear.
Create Stylesheet
Create style.css in your dashboard
In your dashboard, click "Create File" and call it `style.css`.
The `style.css` file is where you put all of the CSS code for your whole website. All of your website's pages share a single CSS file.
When you add more pages you don't need to add any more CSS files. The same design rules should apply to all pages in your website, so they can be shared.
Choose a Background Type
Tiled
A smaller image which repeats
Full-Screen
A large image which stretches
Right-click an image and "Save Image As..."
A page background can really set the tone of a website, so let's start with that.
You can choose between a tiled or a full-screen background for your website.
Download one of the same images from the slide to get started. You can replace it with your own image once you've got it working.
The next slide has example code for tiled backgrounds, and the slide after it has example code for a full-screen background.
Choose one or the other for your site.
Upload Background Image
Upload the background image to CloudCannon
Upload your background image to Cloud Cannon.
To use an image in our website, it's best if we upload as part of the project.
If we just link to the image somewhere else on the Internet, there is no guarantee that the owner of the image won't delete it, move it or rename it, which would stop it from showing up on our own website.
Move Background to Images Folder
Use the image options to "Move to new folder"
All images in our website should be stored in an `images` folder.
CloudCannon has a design flaw where you can't create an empty folder.
To get around this, click on your background image's options and choose "Move to new folder".
Call the new folder "images" - CloudCannon will create the folder and move your background image inside it.
Tiled Background
If you want a repeating background, use this code.
Add to your style.css:
html {
background-image: url('images/ravens-tile.gif');
}
Make sure to choose an image which tiles nicely!
To make a tiled background, we need some very basic CSS.
Put the CSS code for the tiled background into your `style.css` file.
We are adding the background to our `html` element, because that element contains everything else on the page. Adding a background to it will make the background fill up all the space behind everything else on the page.
Full-Screen Background
If you'd like a full-screen background, use this code.
Add to your style.css:
html {
background-image: url('images/tree-cover.jpg');
background-size: cover;
background-attachment: fixed;
}
Make sure to choose a nice large image!
To make a full screen background, we need to add two extra lines.
We still use `background-image` in the same way, but we also add `background-size` and `background-attachment`.
`background-size: cover;` tells the CSS to `cover` the whole html elements with the picture. It stretches the image to fit.
`background-attachment: fixed;` tells the CSS to make page content move over top of the background, and keep the background `fixed` in one place.
Background Ideas
Take a few minutes to make your background look how you want it.
There are many ways to use a background to enhance your site.
You might choose to use a design which is plain or busy, dull or colourful, animated or static.
Have a think about the theme of your site and what sort of background would suit best.
The links on this slide have a variety of different image styles you could use.
Page Content Area
Adding the main content to your page
Our second layout element will be a content section.
You'll notice that we skipped the menu bar - don't worry! We'll come back to that in the next chapter.
Our content section will go below the header, and it will contain all the text and images we want on the page.
The content section element will be a plain box. We will also add in some simple paragraphs and images to test that it looks good with content in it.
Content Section
Add to your index.html, on a new line after your closing </header> tag:
<section class="page-content">
<h2>Hello there, amazing person!</h2>
<p>
This is a site all about my favourite stuff,
thanks so much for visiting.
</p>
</section>
We will use this page-content section on every page,
A section is just another layout rectangle, like header.
It has no design by itself, it's just an invisible box to hold content.
First we will put in some content, then we will design the section.
Notice that we have given this section a name, or "class".
Content Section Design
Add to your style.css:
.page-content {
background-color: #222222;
padding: 30px;
width: 700px;
margin: 0 auto;
margin-top: 30px;
color: #FFFFFF;
font-size: 14px;
line-height: 130%;
}
This code will give you a starting point to begin
Our content is on the page, but it is just kind of... floating.
By adding some CSS, we can make our content section visible and start working on how we'd like it to look.
In our HTML, we gave our section the class `page-content`, so we can use that name to apply styling from our CSS code.
The blank line is just to split up the layout stuff from the text design stuff, it doesn't affect the code.
Summary
Using HTML and CSS, you've now made
Next we will add some more pages to our site.
Great! Now you've got a basic page layout sorted.
Our next step is to design a menu bar so we can have more than one page in our website.
