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