What needs to be determined before we start designing our website...
Target audience
What the audience needs to see (determines the content)
Purpose of the website
Target audience
What the audience needs to see (determines the content)
Purpose of the website
All measurements and sketches done before typing up website- Scamps and then wireframes and then digital.
Try and avoid web design books and online tutorials as tend to be too complicated.
Buy this book for a beginner guide to building a website.
HTML&CSS
Design and Build Websites
John Duckett
96 dpi is actually more up to date for design for screen, the internet was created on an Apple Mac, and at the time it was 72 dpi.
<meta> tags are most commonly used for key words, Google uses meta tags.
Firstly simplify the code down.
<html> at beginning to say that we are speaking in html so that the web browser can understand the code.
</html> close tag (no longer speaking in html).
<head> </head> not visible, just for functionalities.
<title> </title> The main thing that is searchable via google.
<body> </body> anything that you want visible in the website needs to go between the body tags.
Everything needs to be contained in one folder in order for your website to work.
To begin create a root folder, keep it simple. Maximum 8 characters, no glyphs, capitals or spaces.
We then need a sub folder inside the root folder.. images.
Create a new site in Dreamweaver.
To make your website live, you need to buy two things, web space and a domain name.
Give your site a name (not important) and select your root folder and save.
Save your first page (homepage) but do not call it home. Save it as index which is internationally recognised as home.
Every time you save a change preview it in the browser.
Any text you want shown is put inside the body tags. But we need to format the font and font size. Default is Times and about 14 pixels.
There is a limitation of about of 20 fonts that you can use in html. There are ways to get round this in CSS by embedding a font in a website.
To make our site we're going to make a html document. We will then create multiple pages stemming off of that. We then make a separate css document to detail all of the functionalities of the html documents.
Never copy and paste html- it might not work, always type it manually.
Next we are going to create a new document.
Only use blank page or page from template.
This time blank page css.
"UTF-8" is the keyboard format we're using.
/* */ in grey text is a note, just for personal use.
Type body, space open curly bracket, then a list appears.
The default way to format css is all on line, but this can get confusing to look at, to have a separate line for each setting is clearer.
We need to use a font family so type f, select and press enter, then select a font family and finish off with a semi colon.
Save the style sheet in the root folder. Doesn't matter what it's called, style sheet is fine.
To link the html to the style sheet, we need to add info between the head (where it doesn't show) on the html (index).
On the right hand side use the drop down menu to attach a style sheet, and attach our css document.
This info should appear between the head tags.
Add a font size, save and check the browser.
Choose a web safe colour for the type.
Save and check.
Add a container (size of website) and close.
By default it adds a white boarder and positions to the left.
Now add the navigation column.
Add inside the container in index.
Left and right columns.
We now need to position the boxes. So for all of the boxes and columns under background-color type position, relative, float, left.
No comments:
Post a Comment