Site Setup
Time to build your own website!
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 index.html style.css
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> < title> </ title> < linkrel = " stylesheet" href = " style.css" > </ head> < body> </ 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
<!DOCTYPE html>
< html> < head> < title> </ title> < linkrel = " stylesheet" href = " style.css" > </ head> < body> </ body> </ html>
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
<!DOCTYPE html>
< html> < head> < title> </ title> < linkrel = " stylesheet" href = " style.css" > </ head> < body> </ body> </ html>
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 Full-screen
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.
Site Setup: Complete!
Now let’s add some more sections to our page…
Take me to the next chapter!
Using HTML and CSS, you’ve now made
