Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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...
Próximo SlideShare
Cargando en…5
×

de

Creating a Webpage from a Template Slide 1 Creating a Webpage from a Template Slide 2 Creating a Webpage from a Template Slide 3 Creating a Webpage from a Template Slide 4 Creating a Webpage from a Template Slide 5 Creating a Webpage from a Template Slide 6 Creating a Webpage from a Template Slide 7 Creating a Webpage from a Template Slide 8 Creating a Webpage from a Template Slide 9 Creating a Webpage from a Template Slide 10 Creating a Webpage from a Template Slide 11 Creating a Webpage from a Template Slide 12 Creating a Webpage from a Template Slide 13 Creating a Webpage from a Template Slide 14 Creating a Webpage from a Template Slide 15 Creating a Webpage from a Template Slide 16 Creating a Webpage from a Template Slide 17 Creating a Webpage from a Template Slide 18 Creating a Webpage from a Template Slide 19 Creating a Webpage from a Template Slide 20 Creating a Webpage from a Template Slide 21 Creating a Webpage from a Template Slide 22 Creating a Webpage from a Template Slide 23 Creating a Webpage from a Template Slide 24 Creating a Webpage from a Template Slide 25 Creating a Webpage from a Template Slide 26 Creating a Webpage from a Template Slide 27 Creating a Webpage from a Template Slide 28 Creating a Webpage from a Template Slide 29 Creating a Webpage from a Template Slide 30 Creating a Webpage from a Template Slide 31 Creating a Webpage from a Template Slide 32 Creating a Webpage from a Template Slide 33 Creating a Webpage from a Template Slide 34 Creating a Webpage from a Template Slide 35 Creating a Webpage from a Template Slide 36 Creating a Webpage from a Template Slide 37 Creating a Webpage from a Template Slide 38 Creating a Webpage from a Template Slide 39 Creating a Webpage from a Template Slide 40 Creating a Webpage from a Template Slide 41 Creating a Webpage from a Template Slide 42 Creating a Webpage from a Template Slide 43 Creating a Webpage from a Template Slide 44 Creating a Webpage from a Template Slide 45 Creating a Webpage from a Template Slide 46 Creating a Webpage from a Template Slide 47 Creating a Webpage from a Template Slide 48 Creating a Webpage from a Template Slide 49 Creating a Webpage from a Template Slide 50 Creating a Webpage from a Template Slide 51 Creating a Webpage from a Template Slide 52 Creating a Webpage from a Template Slide 53 Creating a Webpage from a Template Slide 54 Creating a Webpage from a Template Slide 55 Creating a Webpage from a Template Slide 56 Creating a Webpage from a Template Slide 57 Creating a Webpage from a Template Slide 58 Creating a Webpage from a Template Slide 59 Creating a Webpage from a Template Slide 60 Creating a Webpage from a Template Slide 61 Creating a Webpage from a Template Slide 62 Creating a Webpage from a Template Slide 63 Creating a Webpage from a Template Slide 64 Creating a Webpage from a Template Slide 65 Creating a Webpage from a Template Slide 66 Creating a Webpage from a Template Slide 67 Creating a Webpage from a Template Slide 68 Creating a Webpage from a Template Slide 69 Creating a Webpage from a Template Slide 70 Creating a Webpage from a Template Slide 71 Creating a Webpage from a Template Slide 72 Creating a Webpage from a Template Slide 73 Creating a Webpage from a Template Slide 74 Creating a Webpage from a Template Slide 75
Próximo SlideShare
CSS Layouting #3 : Box Model
Siguiente
Descargar para leer sin conexión y ver en pantalla completa.

15 recomendaciones

Compartir

Descargar para leer sin conexión

Creating a Webpage from a Template

Descargar para leer sin conexión

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

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

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

Vistas

Total de vistas

1.268

En Slideshare

0

De embebidos

0

Número de embebidos

9

Acciones

Descargas

37

Compartidos

0

Comentarios

0

Me gusta

15

×