How to Build: -Design a flexible grid system -Create flexible Media (images, logos, banners) -Flexible layout through

media queries - it asks what size it is & changes it. -Content layer: HTML -Presentation: CSS -Client side scripting (the interactive stuff?): Java JQuery BE PRECISE & CLEAN IN CODING CSS Selectors p to style all <p> elements # id selectors start with # then the name . classes start with a "." then name #info h1 to style any h1s inside the element info File Set up 1. Create a new folder (this will contain everything) 2. Dreamweaver open an HTML 5 file. Go File/New and select HTML 5 in DocType 3. Save Dreamweaver HTML5 file ALWAYS AS index.html (to the new folder) 4. All other file names lower case, no spaces 5. Save all CSS files to this new folder too. File/New/CSS save css files as what they will be, i.e desktop_style or cell_style 6.Link CSS sheet to HTML. In HTML do either of the following: A. <link href="desktop_style.css" type="text/css" rel="stylesheet"> OR B. right click, attach style sheet, find it & it'll add the code above for u. =A little button thing been added up the top so can easily switch to css sheet, can now close independent css files that may be open. Adding Stuff 1. Make a container div to go around entire page this is good for centering or changing back ground etc 2. In HTML4 you had to create divs for headers etc but in HTML 5 it's preloaded i.e. <header> <footer>. This has been none to standardise the code language.

3. placehold.it is a website that offers free space holder images, if you just enter the dimensions it will make that size box for you, and because you can link an online image to html you can just write it straight into the link. -<img src ="http://placehold.it/350x150"> -p.s. this link may not work at uni due to firewall 4. Class names shouldnt have spaces 5. sizes of screens: 1024x768 = smallest desktop screen 2550 =could get as high as -So we want to specify the width of our page so we dont have looooooooooooong lines of text etc.-Into CSS (remember container goes around whole page) #container{ -background colour is good to see how much space an element is occupying -bacground-color:rgba(255,0,0,1) recommended. this way lets you do alpha, (red, green, blue, alpha) -background-color:#009900 does not allow alpha, can change opacity in next line of code but this will change it for everything within that element, not just bg color. -width:960px now when you scale smaller will crop off, will fix later. -now that width is specified we can centre the page by adding this code margin-left: auto; margin-right: auto; -to colour whole bg style the body Media Types -if you want a print version (i.e. removes menus, coloumns and background colour) -if you are blind and have an aural reader -write a css rule like below @media print { then specify what styling you want } Media Queries -checks width of device i.e. if it sees width is 640 it'll assume its a phone layout and adjust. So if its 'true' that it is a width of 640 we'd give it a different style sheet.

-Change to a percentage, remove floats -put media queries in html link to css tag -change background colour so you know when and which what style sheets are in efct. -when browser is right up against edge we get a scroll bar before it switches to new css sheet. This is because of residual default margins. add margin:0; to desktop_style sheet In cell css it is good to alter width background by % i.e. container{ width:90%; } The Image in cell css jumps out of container div i.e. breaking through boarder. take the class it's in i.e. Apple & go.. Apples img{ width:100% } TIPS Bottom right hand corner has zoom + window sizes window sizes has some preset test sizes i.e. desktop, tablet, smart phone. -up the top next to the browser globe preview there is a multi screen button - testing in browsers *Chrome/View/Developer/JavaScript Console OR right click /inspect element -this is a good way to check code is written correctly - it will /should let you know if you're missing something - if you hover over code it'll highlight relevant part on screen -green = padding, orange/yellow=margins -if css rules are crossed out they've been over written by another rule - can turn on & off rules to see what they're effecting *Firefox/tools/web developer