Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 FILES
USE FOLDERS TO MAKE THINGS TIDIER
ORGANISE YOUR FILES
USE FOLDERS TO MAKE THINGS TIDIER
BASE LEVEL FOLDER
ORGANISE YOUR FILES
USE FOLDERS TO MAKE THINGS TIDIER
‘ASSETS’ STORES
EVERYTHING THAT ISN'T
HTML (OR PHP)
BASE LEVEL FOLDER
ORGANISE YOUR FILES
USE FOLDERS TO MAKE THINGS TIDIER
‘ASSETS’ STORES
EVERYTHING THAT ISN'T
HTML (OR PHP)
FOLDER FOR CSS
B...
ORGANISE YOUR FILES
USE FOLDERS TO MAKE THINGS TIDIER
‘ASSETS’ STORES
EVERYTHING THAT ISN'T
HTML (OR PHP)
FOLDER FOR CSS
B...
ORGANISE YOUR FILES
USE FOLDERS TO MAKE THINGS TIDIER
‘ASSETS’ STORES
EVERYTHING THAT ISN'T
HTML (OR PHP)
FOLDER FOR CSS
T...
FIRST LETS DEAL WITH THE
STRUCTURE
OF THE WEB PAGE
…POSH WAY OF SAYING
“MAKE THE HTML”
INDEX.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 - COMME...
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
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
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 EVERYTHIN...
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
...
HORIZONTAL MENU
GIVES IT A HOVER COLOUR
GETS RID OF THE
BULLET POINTS
FLOATS EACH INDIVIDUAL
LIST ITEM TO THE LEFT
REMOVES...
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
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 S...
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...
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...
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 FI...
the site will look rubbish for ages
…then everything comes together!
IN SUMMARY1. FIGURE OUT THE ORDER IN WHICH YOU WANT T...
Sie haben dieses Dokument abgeschlossen.
Lade die Datei herunter und lese sie offline.
Nächste SlideShare
CSS Layouting #3 : Box Model
Weiter
Nächste SlideShare
CSS Layouting #3 : Box Model
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

Teilen

Creating a Webpage from a Template

Herunterladen, um offline zu lesen

A walkthrough showing you how to take a webpage template and create the HTML and CSS for it. We go through each of the parts of the page individually and explain how to create them all

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Creating a Webpage from a Template

  1. 1. webdev@rgu creating a webpage from a template
  2. 2. FIRST LETS THINK ABOUT PAGE ORDER Mockup
  3. 3. FIRST LETS THINK ABOUT PAGE ORDER
  4. 4. FIRST LETS THINK ABOUT PAGE ORDER 1
  5. 5. FIRST LETS THINK ABOUT PAGE ORDER 1 2
  6. 6. FIRST LETS THINK ABOUT PAGE ORDER 1 2 3
  7. 7. FIRST LETS THINK ABOUT PAGE ORDER 4 1 2 3
  8. 8. FIRST LETS THINK ABOUT PAGE ORDER 5 4 1 2 3
  9. 9. FIRST LETS THINK ABOUT PAGE ORDER 5 4 6 1 2 3
  10. 10. FIRST LETS THINK ABOUT PAGE ORDER NEXT LETS LOOK AT BREAKING THE PAGE UP INTO OUR SEMANTIC CHUNKS
  11. 11. FIRST LETS THINK ABOUT PAGE ORDER NEXT LETS LOOK AT BREAKING THE PAGE UP INTO OUR SEMANTIC CHUNKS
  12. 12. FIRST LETS THINK ABOUT PAGE ORDER NEXT LETS LOOK AT BREAKING THE PAGE UP INTO OUR SEMANTIC CHUNKS HEADER
  13. 13. FIRST LETS THINK ABOUT PAGE ORDER NEXT LETS LOOK AT BREAKING THE PAGE UP INTO OUR SEMANTIC CHUNKS HEADER MAIN
  14. 14. FIRST LETS THINK ABOUT PAGE ORDER NEXT LETS LOOK AT BREAKING THE PAGE UP INTO OUR SEMANTIC CHUNKS HEADER MAIN FOOTER
  15. 15. CODING! NOW WE CAN START
  16. 16. ORGANISE YOUR FILES USE FOLDERS TO MAKE THINGS TIDIER
  17. 17. ORGANISE YOUR FILES USE FOLDERS TO MAKE THINGS TIDIER BASE LEVEL FOLDER
  18. 18. ORGANISE YOUR FILES USE FOLDERS TO MAKE THINGS TIDIER ‘ASSETS’ STORES EVERYTHING THAT ISN'T HTML (OR PHP) BASE LEVEL FOLDER
  19. 19. ORGANISE YOUR FILES USE FOLDERS TO MAKE THINGS TIDIER ‘ASSETS’ STORES EVERYTHING THAT ISN'T HTML (OR PHP) FOLDER FOR CSS BASE LEVEL FOLDER
  20. 20. ORGANISE YOUR FILES USE FOLDERS TO MAKE THINGS TIDIER ‘ASSETS’ STORES EVERYTHING THAT ISN'T HTML (OR PHP) FOLDER FOR CSS BASE LEVEL FOLDER FOLDER FOR IMAGES
  21. 21. ORGANISE YOUR FILES USE 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
  22. 22. FIRST LETS DEAL WITH THE STRUCTURE OF THE WEB PAGE …POSH WAY OF SAYING “MAKE THE HTML”
  23. 23. INDEX.HTML
  24. 24. INDEX.HTML GIVE YOUR PAGE ITS TITLE
  25. 25. INDEX.HTML GIVE YOUR PAGE ITS TITLE MAKE THE SEMANTIC SECTIONS INSIDE OF THE <BODY> REMEMBER <HEAD> != <HEADER>
  26. 26. 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!
  27. 27. LOGO AND NAVIGATION BAR Mockup
  28. 28. LOGO AND NAVIGATION BAR
  29. 29. LOGO AND NAVIGATION BAR
  30. 30. BANNER IMAGE Mockup
  31. 31. BANNER IMAGE Mockup
  32. 32. BANNER IMAGE real site
  33. 33. MAIN SECTION Mockup
  34. 34. MAIN SPLIT IT INTO A SECTION AND AN ASIDE AND THEN DEAL WITH EACH SEPARATELY SECTION ASIDE Mockup
  35. 35. SECTIONFAIRLY STRAIGHT FORWARD, USE H2 AND P TAGS Mockup
  36. 36. SECTIONHINT: RIGHT CLICK AND THEN PRESS ‘USE SOFT WRAPS’ SO THAT THINGS DON'T GO OFF THE SIDE OF YOUR CODING WINDOW Mockup
  37. 37. SECTION real site
  38. 38. SIDEBAR Mockup
  39. 39. SIDEBARSPLIT INTO 2 <ARTICLE> ELEMENTS Mockup
  40. 40. SIDEBAR DOESN’T LOOK VERY SIDEBAR-EY YET real site
  41. 41. FOOTER Mockup
  42. 42. FOOTER Mockup
  43. 43. FOOTER real site
  44. 44. SECOND IS TO WORK ON THE PRESENTATION OF THE WEB PAGE…POSH WAY OF SAYING “MAKE THE CSS”
  45. 45. DOUBLE CHECK THEIR LOCATIONS! LINK TO YOUR CSS FILES
  46. 46. SET THE BODY WIDTH REMEMBER TO USE MAX- WIDTH TO MAKE IT SCALABLE MARGIN LEFT & RIGHT CENTRE THIS IN THE PAGE
  47. 47. 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
  48. 48. QUICK HINT DO THIS MAKE THIS TEMPLATECOLOURS.CSS
  49. 49. AH MY EYES!(BUT AT LEAST I CAN FIND THINGS!) real site
  50. 50. HORIZONTAL MENU Mockup
  51. 51. 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
  52. 52. 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
  53. 53. IMAGE SIZES Mockup
  54. 54. IMAGE SIZES GIVE EACH IMAGE AN ID IN THE HTML, REFER TO THIS WITH # IN CSS AGAIN, REMEMBER TO DO PROPER COMMENTING Mockup
  55. 55. IMAGE SIZES GIVE EACH IMAGE AN ID IN THE HTML, REFER TO THIS WITH # IN CSS AGAIN, REMEMBER TO DO PROPER COMMENTING Mockup
  56. 56. FIX THE FONTSWE USED GOOGLE FONTS TO MAKE SURE THAT WE HAVE ACCESS TO THE CORRECT ONE
  57. 57. GETTING THERE! real site
  58. 58. COLUMN LAYOUTUSE UNSEMANTIC! ITS THE EASIEST OPTION. Mockup
  59. 59. UNSEMANTIC 1. DOWNLOAD IT 2. MOVE IT INTO YOUR FILE STRUCTURE 3. REFERENCE IT IN THE HEAD OF YOUR HTML
  60. 60. 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
  61. 61. real site
  62. 62. FLOAT THE HEAD OF SCHOOL IMAGE Mockup
  63. 63. FLOAT THE HEAD OF SCHOOL IMAGE Mockup
  64. 64. FLOAT THE HEAD OF SCHOOL IMAGE real site
  65. 65. SIDEBARCOLOURINGS Mockup
  66. 66. SIDEBARCOLOURINGS Mockup
  67. 67. SIDEBARCOLOURINGS real site
  68. 68. 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
  69. 69. SIDEBARLAYOUT FIXES OK…SOMETIMES UNSEMANTIC NEEDS TO BE PUT IN ITS PLACE Mockup
  70. 70. 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
  71. 71. REMOVE TEMPLATE COLOURS real site real site!!
  72. 72. FIX THE FONT SIZES real site
  73. 73. DO THE FOOTERI FORGOT TO DO THIS EARLIER… real site
  74. 74. 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
  75. 75. 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
  • MohammadAliFahimi

    Jul. 28, 2019
  • budakRAMEN

    Jun. 16, 2019
  • cristinalucaciu

    May. 19, 2019
  • MARIABUFNEA

    Jun. 20, 2018
  • AhmedElnemr6

    Jun. 17, 2018
  • MattFanuele

    Jan. 25, 2018
  • ecoultersmith

    May. 14, 2017
  • Taqno

    May. 10, 2017
  • akoozau

    May. 3, 2017
  • Gapzen

    Apr. 3, 2017
  • erickatoledo

    Jan. 28, 2017
  • kaduger

    Dec. 30, 2016
  • loginmb

    Nov. 14, 2016
  • ChileOwhondah

    Sep. 26, 2016
  • AlNahasWael

    Mar. 25, 2016

A walkthrough showing you how to take a webpage template and create the HTML and CSS for it. We go through each of the parts of the page individually and explain how to create them all

Aufrufe

Aufrufe insgesamt

1.264

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

9

Befehle

Downloads

37

Geteilt

0

Kommentare

0

Likes

15

×