Before designing a website we need to identify:
- target audience
- what does the audience need to see
- the overall purpose of the website
Limitations:
- web safe colours
- web safe fonts
- screen sizes
Dreamweaver - what you see is what you get
HTML - hyper text mark up language
Main tags
<html>
everything under this is html
<head>
anything that isn't part of the design of the website, but may be searchable by google
<title>
the title of the page
</title>
</head>
<body>
what is visible in design of the page
</body>
</html>
To view coding for a website right click and view source.
Other tags
We looked at the source for a number of websites we had already looked at, and looked for tags that kept popping up on the different websites so we could see what these mean.
There are other languages, such as javascript and css (cascading style sheets). And PHP's, which are spreadsheets such as how amazon shows all of its products without creating a page for each individual product.
- meta (how search engines pick up your website through key words)
- different sizes for ipad
- script
- div (linked to css - division of a website)
- a href (links)
- img (images)
- h (headers)
- p (paragraph)
- li id
- span
- google analytics
- td (table data) tr (table rows)
Making a website
- Create a new root folder to put everything in, needs to have no spaces and all letters lowercase
- Create a subfolder inside the root folder which has to be called images
- Open dreamweaver, choice of languages to open, new html
- Different views, can see code and design at the same time
- Need to tell dreamweaver to use our root folder. Site - new site - and locate dreamweaver to your file
- In the bottom right hand corner of the screen the files tab appears
- File - save as - (saves web page in root folder) homepage always saved as index.html (now appears in files tab)
- Click this button on dreamweaver to see what it looks like as a webpage.
- Content for webpage needs to be in between body open and body close
CSS
- Dreamweaver - file - new - blank page - css - file - save as - stylesheet.css
- Make generic overall settings, apply to the body tag, just type in body {
- Gives list of all the css attributes you can apply to the body, put the attributes on a new line
- Specify font, just type font and choose from font family
- Need to close the attribute with a semi-colon, go on to the next line and specify the font size (font sizes are in pixels on the web instead of pt sizes)
- To change the colour just write color the american way, and it brings up a palette of the web safe colours
- Need to close the tab with another semi colon and a bracket on the next line }
- Then save the CSS sheet
- Back in the html document, the CSS sheet goes in the head tags, we don't need to type it in, but go the the CSS styles tab and click the attach style sheet button, now appears as html
- To create a div id , new line, enter a # (Alt + 3) wrapper
- Create width and a height for the box we are creating, and a background colour
- Go back to html document, put tag for div in body section
- Close div
- Back to css, new navigation section, decide on position (going for relative), float: left (because navigation is on left), width, height, background colour
- Go back to html, and put the navigation bar inside the wrapper, close div. Align codes at same spacing for each code, to make it obvious what is for what
- Always try and make your website as small as possible in file size
Adding logo
- Open photoshop, using web settings, to create a logo that is a smaller file size as possible
- Needs to be saved in a specific way, best quality Jpg or Png24 (for transparent)
- Save it to the images folder in your root file, go back to dreamweaver, create a div id specifically for the logo
- The logo goes in the navigation section in the html sheet
Buttons
- Create new tag, need to add padding and margin so its not just right at the side of the page, margin is from the side and padding from the top/ bottom. If you wanted the box's width 150px, but with 10px margin, the width would only be written as 110px as you need to take off the margin and the padding.
E.g.
No comments:
Post a Comment