Post on 16-Apr-2017
webdev@rgu
creating a webpage from a template
FIRST LETS THINK ABOUT PAGE ORDER
Mockup
FIRST LETS THINK ABOUT PAGE ORDER
FIRST LETS THINK ABOUT PAGE ORDER
1
FIRST LETS THINK ABOUT PAGE ORDER
1
2
FIRST LETS THINK ABOUT PAGE ORDER
1
2
3
FIRST LETS THINK ABOUT PAGE ORDER
4
1
2
3
FIRST LETS THINK ABOUT PAGE ORDER
5
4
1
2
3
FIRST LETS THINK ABOUT PAGE ORDER
5
4
6
1
2
3
FIRST LETS THINK ABOUT PAGE ORDER
NEXT LETS LOOK AT BREAKING THE PAGE UP INTO OUR SEMANTIC CHUNKS
FIRST LETS THINK ABOUT PAGE ORDER
NEXT LETS LOOK AT BREAKING THE PAGE UP INTO OUR SEMANTIC CHUNKS
FIRST LETS THINK ABOUT PAGE ORDER
NEXT LETS LOOK AT BREAKING THE PAGE UP INTO OUR SEMANTIC CHUNKS
HEADER
FIRST LETS THINK ABOUT PAGE ORDER
NEXT LETS LOOK AT BREAKING THE PAGE UP INTO OUR SEMANTIC CHUNKS
HEADER
MAIN
FIRST LETS THINK ABOUT PAGE ORDER
NEXT LETS LOOK AT BREAKING THE PAGE UP INTO OUR SEMANTIC CHUNKS
HEADER
MAIN
FOOTER
CODING!NOW WE CAN START
ORGANISE YOUR FILESUSE FOLDERS TO MAKE THINGS TIDIER
ORGANISE YOUR FILESUSE FOLDERS TO MAKE THINGS TIDIER
BASE LEVEL FOLDER
ORGANISE YOUR FILESUSE FOLDERS TO MAKE THINGS TIDIER
‘ASSETS’ STORES EVERYTHING THAT ISN'T HTML (OR PHP)
BASE LEVEL FOLDER
ORGANISE YOUR FILESUSE FOLDERS TO MAKE THINGS TIDIER
‘ASSETS’ STORES EVERYTHING THAT ISN'T HTML (OR PHP)
FOLDER FOR CSS
BASE LEVEL FOLDER
ORGANISE YOUR FILESUSE FOLDERS TO MAKE THINGS TIDIER
‘ASSETS’ STORES EVERYTHING THAT ISN'T HTML (OR PHP)
FOLDER FOR CSS
BASE LEVEL FOLDER
FOLDER FOR IMAGES
ORGANISE YOUR FILESUSE FOLDERS TO MAKE THINGS TIDIER
‘ASSETS’ STORES EVERYTHING THAT ISN'T HTML (OR PHP)
FOLDER FOR CSS
THE 1 HTML FILE (YOU MIGHT HAVE MORE…)
BASE LEVEL FOLDER
FOLDER FOR IMAGES
FIRST LETS DEAL WITH THE
STRUCTURE OF THE WEB PAGE
…POSH WAY OF SAYING “MAKE THE HTML”
INDEX.HTML
INDEX.HTMLGIVE YOUR PAGE ITS TITLE
INDEX.HTMLGIVE YOUR PAGE ITS TITLE
MAKE THE SEMANTIC SECTIONS INSIDE OF THE <BODY>REMEMBER <HEAD> != <HEADER>
INDEX.HTMLGIVE YOUR PAGE ITS TITLE
MAKE THE SEMANTIC SECTIONS INSIDE OF THE <BODY>REMEMBER <HEAD> != <HEADER>
PS - COMMENTS ARE A GOOD THING! USE THEM!
LOGO AND NAVIGATION BAR
Mockup
LOGO AND NAVIGATION BAR
LOGO AND NAVIGATION BAR
BANNER IMAGE
Mockup
BANNER IMAGE
Mockup
BANNER IMAGE
real site
MAIN SECTION
Mockup
MAINSPLIT IT INTO A SECTION AND AN ASIDE AND THEN DEAL WITH EACH SEPARATELY
SECTION ASIDE
Mockup
SECTIONFAIRLY STRAIGHT FORWARD, USE H2 AND P TAGS
Mockup
SECTIONHINT: RIGHT CLICK AND THEN PRESS ‘USE SOFT WRAPS’ SO THAT THINGS DON'T GO OFF THE SIDE OF YOUR CODING WINDOW
Mockup
SECTION
real site
SIDEBAR
Mockup
SIDEBARSPLIT INTO 2 <ARTICLE> ELEMENTS
Mockup
SIDEBAR
DOESN’T LOOK VERY SIDEBAR-EY YET
real site
FOOTER
Mockup
FOOTER
Mockup
FOOTER real site
SECOND IS TO WORK ON THE
PRESENTATION OF THE WEB PAGE
…POSH WAY OF SAYING “MAKE THE CSS”
DOUBLE CHECK THEIR LOCATIONS!
LINK TO YOUR CSS FILES
SET THE BODY WIDTH
REMEMBER TO USE MAX-WIDTH TO MAKE IT SCALABLE
MARGIN LEFT & RIGHT CENTRE THIS IN THE PAGE
QUICK HINT
ORGANISING THE STYLE OF THE DIFFERENT ELEMENTS ON YOUR PAGE CAN BE A PAIN!
ESPECIALLY SO IF YOU LEAVE EVERYTHING AT THE DEFAULT COLOUR (I.E.WHITE)
DO THIS
QUICK HINT
DO THIS
MAKE THIS
TEMPLATECOLOURS.CSS
AH MY EYES!(BUT AT LEAST I CAN FIND THINGS!)
real site
HORIZONTAL MENU
Mockup
HORIZONTAL MENU Mockup
GIVES IT A HOVER COLOUR
GETS RID OF THE BULLET POINTS
FLOATS EACH INDIVIDUAL LIST ITEM TO THE LEFT
REMOVES THE UNDERLINE, CENTRES THE TEXT AND GIVES IT SOME PADDING
HORIZONTAL MENU
GIVES IT A HOVER COLOUR
GETS RID OF THE BULLET POINTS
FLOATS EACH INDIVIDUAL LIST ITEM TO THE LEFT
REMOVES THE UNDERLINE, CENTRES THE TEXT AND GIVES IT SOME PADDING
real site
IMAGE SIZES
Mockup
IMAGE SIZES
GIVE EACH IMAGE AN ID IN THE HTML, REFER TO THIS WITH # IN CSS
AGAIN, REMEMBER TO DO PROPER COMMENTING Mockup
IMAGE SIZES
GIVE EACH IMAGE AN ID IN THE HTML, REFER TO THIS WITH # IN CSS
AGAIN, REMEMBER TO DO PROPER COMMENTING Mockup
FIX THE FONTSWE USED GOOGLE FONTS TO MAKE SURE THAT WE HAVE ACCESS TO THE CORRECT ONE
GETTING THERE!
real site
COLUMN LAYOUTUSE UNSEMANTIC! ITS THE EASIEST OPTION.
Mockup
UNSEMANTIC1. DOWNLOAD IT 2. MOVE IT INTO YOUR FILE STRUCTURE 3. REFERENCE IT IN THE HEAD OF YOUR HTML
SECTIONASIDE
MAIN
1. MAKE SURE THAT YOU START WITH A GRID-CONTAINER CLASS
2. EVERYTHING ELSE HAS TO ADD UP TO 100 TO BE SHOWN AT THE SAME TIME
Mockup
real site
FLOAT THE HEAD OF SCHOOL IMAGE
Mockup
FLOAT THE HEAD OF SCHOOL IMAGE
Mockup
FLOAT THE HEAD OF SCHOOL IMAGE
real site
SIDEBARCOLOURINGS
Mockup
SIDEBARCOLOURINGS
Mockup
SIDEBARCOLOURINGS
real site
SIDEBARLAYOUT FIXES
OK…SOMETIMES UNSEMANTIC NEEDS TO BE PUT IN ITS PLACE
THIS BIT IS FAIRLY STRAIGHT FORWARD
THIS NEEDS TO BE OVERWRITTEN WITH !IMPORTANT (DONT DO THIS A LOT)
Mockup
SIDEBARLAYOUT FIXES
OK…SOMETIMES UNSEMANTIC NEEDS TO BE PUT IN ITS PLACE
Mockup
SIDEBARLAYOUT FIXES
OK…SOMETIMES UNSEMANTIC NEEDS TO BE PUT IN ITS PLACE
THIS BIT IS FAIRLY STRAIGHT FORWARD
THIS NEEDS TO BE OVERWRITTEN WITH !IMPORTANT (DONT DO THIS A LOT)
real site
REMOVE TEMPLATE COLOURS
real site
real site!!
FIX THE FONT SIZES
real site
DO THE FOOTERI FORGOT TO DO THIS EARLIER…
real site
IN SUMMARY1. FIGURE OUT THE ORDER IN WHICH YOU WANT TO CREATE
THE PAGE (WRITE ON THE SHEET IF YOU WANT TO!)
2. GET YOUR FILES IN THE RIGHT PLACE
3. CREATE YOUR HTML
4. CREATE YOUR CSS
1. USE TEMPLATE COLOURS TO MAKE YOUR LIFE EASIER
2. WORK ON IMAGES
3. THEN WORK ON FONTS/COLOURS
4. THEN WORK ON POSITIONING
the site will look rubbish for ages …then everything comes together!
IN SUMMARY1. FIGURE OUT THE ORDER IN WHICH YOU WANT TO CREATE
THE PAGE (WRITE ON THE SHEET IF YOU WANT TO!)
2. GET YOUR FILES IN THE RIGHT PLACE
3. CREATE YOUR HTML
4. CREATE YOUR CSS
1. USE TEMPLATE COLOURS TO MAKE YOUR LIFE EASIER
2. WORK ON IMAGES
3. THEN WORK ON FONTS/COLOURS
4. THEN WORK ON POSITIONING