Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web planninghtml11022014m


Published on

  • Be the first to comment

  • Be the first to like this

Web planninghtml11022014m

  1. 1. Basic planning and preparation before you start building your website
  2. 2. This workshop       Will not have time to build website tonight Prepare you to start to build a website Understand what planning/preparation should be done before you start Evaluate different options and choose what option suits you Overview of HTML why it’s useful to know Where to find the online tutorials to teach you what to do
  3. 3. Build yourself or use hosted solution? Purpose of your website? Portfolio?  Do you want to use your site to promote your work or as part of your work?  How much time and effort do you have to invest? 
  4. 4. 3 main options Build from scratch using HTML, CSS and other technologies  Use software such as Dreamweaver to generate the code for you  Use a third party content management system or hosted solution where you put your content into a ready made site  Build from Scratch Use software Use 3rd party solution
  5. 5. Option 1: Learn how to code       Learning good web design and development needs time and effort invested! Most investment in time and effort Most control over site Valuable skills Need: text editor (TextWrangler; Notepad++); ftp client, webspace Tutorials on  HTML essential training  CSS: Core Concepts
  6. 6. Option 2: software Adobe Dreamweaver  Split view to see code and graphical interface  Useful to understand what is going on behind scenes  Easy to make a very bad website!  Can build website from scratch without being coding expert  Tutorials on ―Dreamweaver Essential CC training‖ 
  7. 7. Option 3: 3rd party solution        Still useful to know HTML Can adapt ―templates‖ to customise your site Example: Wordpress – publishing platform for the web. Free/Open Source 18% all websites Benefit from back end/hosting in place Some small cost/some free If you are not sure, see VLE: everything you need to know for ways to get your work on the web Also tutorials on for Wordpress
  8. 8. Whatever option you choose Take the time to plan your structure  Follow basic rules of good practice  Take the time to learn the basics of HTML 
  9. 9. Start with your sketchbook! Plan what you want first  Think about a logical structure and navigation   How are people going to find their way round your website?  How easy will it be for them to find information?  will they see what you want to exhibit?  Sketch it out!
  10. 10. Website Structure         Collect content on computer Organisation of files into structure Divide into logical sections Folders for file types e.g.images, pdfs Folders for different sections in bigger sites Have folder structure that reflects main menu – makes easier to find files to edit Home page is always called index.htm or index.html Need to separate content & structure from design
  11. 11. Website structure Index.html images image1 About_me image2 My_work CV pdf cv.pdf
  12. 12. Home Page      Start with your ―home page‖ index.html What links do you want to other pages? What information do you want here? What basic layout do you want? Structure menu in order of importance. Key items high, users see these first
  13. 13. Good practice Content should be clear and concise  Be consistent in design and navigation – users should know where they are  Designs should work across different platforms and browsers  Consider all users – make your site accessible  Do not use spaces, underscores or capital letters in file names 
  14. 14. Images on the web Do not use Dreamweaver to visually resize images  Use image editing program like PhotoShop/Fireworks to get images ready (PhotoShop has a ―save for web option‖)  Size(in Kb) is important on the web so save at 96dpi in a compressed format such as jpg, png or gif. Keep original and web copy 
  15. 15. Warning!  DO NOT save your web page as one big image!  Search engines wont pick it up!  Mobile devices wont display it properly – wont resize, doesn’t know what is type!  Screen readers can’t read the text on it – not accessible
  16. 16. What goes on behind the web browser
  17. 17. HTML HTML  HTML – Hyper Text Markup Language – text file which provides instructions to be processed by web browsers  Dreamweaver can write HTML for you – but it is useful to understand HTML a bit and have an idea of what is going on behind the scenes 
  18. 18. HTML5 5th revision still under development  Improve support multimedia  Improve accessibility  Dreamweaver CS6 supports HTML5 features  HTML allows you to create pages and content CSS (Cascading Style Sheets) allows you to add layout and design 
  19. 19. Tags and attributes Tags usually paired  <h1>Heading</h1>  <p>Paragraph</p>  Attributes specify additional properties/behaviours  src = path to image source, alt =alternative text description for image 
  20. 20. Page Structure         <html> {encloses the whole page} <head>{ information about the page, won’t be displayed} <title>My First Page</title> {the head contains information for the browser and search engines to use} </head> <body> This is a basic HTML page {The body is where all the page content that you see goes} </body> </html>
  21. 21. Create basic HTML Page Use text editor Notepad++, TextWrangler(Mac)  Do not use Word processor  Save with file extension .htm or .html  Use web browser to open file up (Firefox, Safari, IE, Chrome)  (Instructions on VLE for you to try yourself later) 
  22. 22. Basic HTML page               <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jude Boyd</title> <link href="layoutstyles.css" rel="stylesheet" type="text/css" /> <link href="layoutstyles.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Jude Boyd</h1> About me <p>My name is Jude, I work in the GSA Library</p> </body> </html>
  23. 23. CSS Cascading Style Sheet Tells the browser how each type of HTML element should be displayed  Used to deal with different media e.g. Screen, print, handheld device. 
  24. 24. Cascading Style Sheets CSS Separate presentation from structural mark-up  Reduces time spent maintaining and changing site  Better adaptable to need of emerging technologies  Accessible  
  25. 25. Dissecting a website Find a website you like!  Right click or ctrl click and ―view source‖ to see HTML  Look for link in head to view CSS  e.g. <link rel="stylesheet" type="text/css" href="css/library.css" />  Fill in webserver URL to see style sheet css 
  26. 26. Responsive Design Fluid grids, Flexible images, media queries – move away from device specific experiences  Ethan Marcotte : article   Creating a responsive web design   <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href=―smartphone.css" />  if its horizontal resolution (max-device-width) is equal to or less than 480px, viewing on small-screen device like iPhone—then the device will load smartphone.css, otherwise, link is ignored
  27. 27. Summary Think about what you want to achieve from your site and plan out structure  Whatever route you choose take the time to learn the basics of HTML  Start off simple  Find sites you like. Pull them apart and figure out how it’s done!  Use specialised online tutorials and forums to create the site you want 
  28. 28. Online Tutorials  Click login  Choose login through organisation or School  Enter  Use your GSA login and password  Creating a responsive web design  HTML essential training  CSS: core concepts 
  29. 29. Thank you Questions?