Creating a Webpage from a Template

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
INTO OUR SEMANTIC
CHUNKS
HEADER

FIRST LETS THINK
ABOUT PAGE ORDER
NEXT LETS LOOK AT
INTO OUR SEMANTIC
CHUNKS
HEADER
MAIN

FIRST LETS THINK
ABOUT PAGE ORDER
NEXT LETS LOOK AT
INTO OUR SEMANTIC
CHUNKS
HEADER
MAIN
FOOTER

ORGANISE YOUR FILES
USE FOLDERS TO MAKE THINGS TIDIER

ORGANISE YOUR FILES
BASE LEVEL FOLDER

ORGANISE YOUR FILES
‘ASSETS’ STORES
EVERYTHING THAT ISN'T
HTML (OR PHP)
BASE LEVEL FOLDER

ORGANISE YOUR FILES
‘ASSETS’ STORES
HTML (OR PHP)
FOLDER FOR CSS
BASE LEVEL FOLDER

ORGANISE YOUR FILES
‘ASSETS’ STORES
HTML (OR PHP)
FOLDER FOR CSS
BASE LEVEL FOLDER
FOLDER FOR IMAGES

ORGANISE YOUR FILES
‘ASSETS’ STORES
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
GIVE YOUR PAGE ITS
TITLE

INDEX.HTML
GIVE YOUR PAGE ITS
TITLE
MAKE THE SEMANTIC
SECTIONS INSIDE OF
THE <BODY>
REMEMBER
<HEAD> != <HEADER>

INDEX.HTML
GIVE 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

MAIN
SPLIT 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

SIDEBARSPLIT INTO 2 <ARTICLE>
ELEMENTS
Mockup

SIDEBAR
DOESN’T LOOK VERY
SIDEBAR-EY YET
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
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
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

COLUMN LAYOUTUSE UNSEMANTIC! ITS
THE EASIEST OPTION.
Mockup

UNSEMANTIC
1. DOWNLOAD IT
2. MOVE IT INTO YOUR FILE STRUCTURE
3. REFERENCE IT IN THE HEAD OF YOUR HTML

SECTION
ASIDE
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

FLOAT THE
HEAD OF
SCHOOL IMAGE
Mockup

FLOAT THE
HEAD OF
SCHOOL IMAGE
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!!

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

Creating a Webpage from a Template

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Creating a Webpage from a Template

Ähnlich wie Creating a Webpage from a Template (20)

Mehr von Mike Crabb

Mehr von Mike Crabb (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Creating a Webpage from a Template