cmd N
-blank page
-css
-create
css can only see the code, not the design
css coding advantages over html, custom fonts, colours advanced layout. Won't need to hand design the coding for all the pages. Links all the pages to keep the design thropughout the website the same.
The way to tell is that it only allows you to view in code.
-Grey text means that it is a note to the designer doesnt actually show up.
/*note here*/ <---- example of how to write a note.
@charset "utf-8";
/*css document*/
DIV ID
Generic CSS code
Font
adding code
4.body{ (the squiggly bracket will open up a drop down menu full of options)
(press return)
font family
font-family:
Verdana, Geneva, Sans-serif; (gives options incase one isn't available)
} -to close
File then save- Remember no capitals
CSS styles
Properties
chain link
find the stylesheet to the page
1.<html/>
2.<head>
3.<title> Sophie Abell </title>
4.<link href = "stylesheet.css" rel= "stylesheet" type "text/css">
5.</head>
6.
7.<body>
8. Hello
9. </body>
10. </html>
Going to work with a fixed size
Dimensions 1024x768
Creating the code for the box
Naming Container/Wrapper
#container
width:1024px
height:768px
Every different setting leave a space for easy reading
8. #container{
9. width:1024px;
10. height:768px;
11. background-colour: #6CF
12. }
cmd and S to save
close the stylesheet
7.<body>
8. <div id= "container">
9. Hello
10. </div
Save then check
To position the box/container, underneath background colour (by moving the container it gets rid of the white boarder around)
Position: fixed; (get a drop down box of absolute, fixed,inherit,relative,static)
top:0;
left:0;
Design decisions
Centre- Nav Top
to align the container to the centre
left:50%; - still not going to work as it is bang in the middle. Just doesn't work
Make the container back to the left half of its width
Move the container back to the left by- 512px
#container{
width:1024px;
height:768px;
background-colour: #6CF;
Position: fixed;
top:0;
left:50%;
margin-left:-512px;
}
#top{
width:1024px;
height:150px;
background-colour:#ccc;
}
Go back to the index page
<body>
<div id= "container">
<div id= "top'>/div>
When adding your designed logo on illustrator, make sure when you open make sure the profile is for web.
When saving click save for web.
PNG-24 (transparent background)
uncheck hide extension
logo.png
click save
Go back to dreamweaver
#logo{
width:150px;
height:150px;
positon:relative;
float:left;
background-image:url (images/logo.png);
}
Navigation area
create button in illustrator
Once created duplicate layer
In the duplicated layer make a change, for example change to italic, or add a line through
save for web each layer separately
home1.png
home2.png
#button{
width:218px;
height:150px;
position:relative;
float:left;
Insert- image objects- rollover images
Fill in the tabs click ok.
Then you get loads of code already generated (below)
No comments:
Post a Comment