Web Design 101

765
-1

Published on

Rasmussen College offers Web Design Workshop at its Fargo campus. Learn the basics of web design here.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
765
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Design 101

  1. 1. August 22, 2012Web Design101Foundational skills forwebsite design
  2. 2. 2 August 22, 2012Web Design 101 What we’ll do today!  Web page breakdown  What are the key parts of a web page?  Web design process  Where to start?  Site Organization  HTML  The backbone of a web page  Links  Imagery for the web  CSS  The heart of a web page  Banner and Slideshow Animation  Flash and jQuery  FTP Space  Blog options Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  3. 3. 3 August 22, 2012Web Design – a rough sketch You know it. You love it. Now how do you get on the web?  Web Page Coding and Creation (HTML)options  Hand-coding, HTML text editors,  WYSWIG HTML software (Dreamweaver)  Vision(sketches or Photoshop)  Content (ideas and tasks and projects)  Server space (web hosting) or blog  FTP software (Free or Dreamweaver) Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  4. 4. 4 August 22, 2012Web Page Breakdown Page – url, address Text Navigation & Links Images Interactivity Animation (motion) Scripting Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  5. 5. 5 August 22, 2012Where to start? Need or desire to create Sketches Develop brand & concept Work out kinks Try Variations Think it through before you code Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  6. 6. 6 August 22, 2012Site Organization File structure organizes assets, and creates url  Create a folder on your desktop  Name it with your name (no spaces)  Within that create 2 folders  Images  Scripts images scripts yourname Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  7. 7. 7 August 22, 2012Site Organization Your html pages will be at root level of yourname images scripts index.html contact.html about.html yourname home.jpg portfolio.css Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  8. 8. 8 August 22, 2012Determining urls images scripts index.html contact.html about.html yourname home.jpg portfolio.css  Your domain name is yourname.com  Your home page is www.yourname.com (index.html is hidden)  To get to contact – www.yourname.com/contact.html  To get to about – www.yourname.com/about.html Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  9. 9. 9 August 22, 2012Keep your site organized! Always in one root folder File Management in Dreamweaver a help Scripts are often generated on the fly, so be aware of alerts and point them to script folders. Dreamweaver can also copy images to a default folder. Great feature. Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  10. 10. 10 August 22, 2012HTML – Hypertext Markup Language The backbone or skeleton of Web Design Code evolution HTML – HTML 4 – XHTML – HTML5 All still in use on current browsers HTML5 still being incorporated. Simplified coding that accommodates multimedia and apps. Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  11. 11. 11 August 22, 2012HTML – Hypertext Markup Language Container based system <html> <head> <title>Your Title Here</title> Scripts, etc, go here… </head> <body>Visible Content Goes Here </body> </html> Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  12. 12. 12 August 22, 2012Dreamweaver gets you started Welcome Screen Create New Container based system HTML File Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  13. 13. 13 August 22, 2012Choose Split View Code on left Design on right Container based system Start typing within the Body tag Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  14. 14. 14 August 22, 2012Basic Tags and code – natural flow Be aware of which screen you are on.  Code reacts differently if you enter in on the code side, or the design side. Get into the habit of typing on code side.  <br /> creates a line brake (no close tag)  <p><p/> contains a paragraph (with added space).  Adheres to natural flow from top to bottom  No placement at this phase Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  15. 15. 15 August 22, 2012Design View – not truly WYSIWIG Tosee how your page is looking, it’s best to view in a browser. Save your files as index.html Design View is frequently not accurate. The globe icon allows you to preview your work in a browser window. Test in all browsers. Live View is an option, but has its limitations. Note: you are working locally. Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  16. 16. 16 August 22, 2012Creating a link Links can be internal or external.  External – http://www.google.com  Internal – within site – contact.html  Let’s start with an external link  In the design view of your page, hit a return after your text. Notice the <p> tags that are created.  Type “Take me to google.” Select word “goodle” Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  17. 17. 17 August 22, 2012Creating a link Locate the properties panel. In Link type google url http://www.google.com When you test your page in the browser, you will have created a link to google. Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  18. 18. 18 August 22, 2012Images for the web Atthis point we’re ready to add an image Image formats that are optimized for the web.  .Jpg – flattens on white – RGB  .Png – transparency – RBG  .gif – transparency – index  All are one layer Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  19. 19. 19 August 22, 2012Photoshop’s role in web design  Manipulate, slice, crop, and format individual images  Mock up your site  Analyze layouts and variations  Layered work files - .psd  Never use full Photoshop jpeg as layout  Good web design is efficient design  Html pages use images, html, and css Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  20. 20. 20 August 22, 2012Photoshop mock-up analysis Images that will be used in page: Photo of kids - jpg Logo - png CSS will handle Text styling Transparent background colors Gradients (new browsers) Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  21. 21. 21 August 22, 2012Bring images into your web page  Add a jpeg to your image folder  Simply copy it to this folder or drag it in  Place cursor in design view  Insert menu> common tab > tree icon  Navigate to your images folder and choose image file. Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  22. 22. 22 August 22, 2012CSS – Cascading Style Sheets  The Cascade  Divs  Basic text styling  Style selectors  Positioning  Floats Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  23. 23. 23 August 22, 2012CSS – Cascading Style Sheets The Cascade  Styles have precedence  External Style Sheets  An external style sheet  Mystyle.css can be overridden by an embedded style.  Embedded Style  An embedded style  In <head> section of page can be overridden by an inline style.  Inline style  In line with text Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  24. 24. 24 August 22, 2012Divs <div class="greenbox”> Stands for Division  Creates area of content Similar to an envelope  With instructions Instructions come from styles </div>  In line with text Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  25. 25. 25 August 22, 2012Green Box Div Code in <body> CSS code in <head> <div class="greenbox”> <style type="text/css"> Any text .greenbox </div> { background-color: #0C3; height: 200px; width: 200px; border: thin solid #060; Any text color: #FFF; } </style> Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  26. 26. 26 August 22, 2012Div creation - Selectors We just made a class style  Important to remember  Create the div  Class is a type of selector  Create the style  Style must be applied  Four types of selectors to the div  Class – anytime, anywhere  ID – once on a page  Tag – redining html tag  Compound - contextual Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  27. 27. 27 August 22, 2012Text Styling with CSS Let’s put a paragraph of text into our body. We’re creating a new style that redefines the body tag.  Go to lipsum.com for dummy text  Paste into body. Remove any <p> </p> tags  Create new style in the CSS styles panel Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  28. 28. 28 August 22, 2012Create new CSS Rule Choose Tag Body This document only Hit ok Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  29. 29. 29 August 22, 2012Redefine type in the body tag Change type formatting options  Font family  Font size  Color  Etc. Hit OK Type will update You’ll now have CSS code in your head section Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  30. 30. 30 August 22, 2012Position type on page Right now your type has no form, and you have no ability to control it. It needs to be in a div and that div needs a style Create new style  Name it centertext  Class selector  This document only Select your type Create new div  Wrap around selection  Apply centertext Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  31. 31. 31 August 22, 2012Now let’s define centertext Look for centertext in style panel list of styles. Doubleclick In Box  Width 400, Height 300  Padding 10 - on all sides  Margin - Right and Left Auto  Don’t close yet! In Positioning  Set position to relative  Hit ok Div should pop center and text should be contained Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  32. 32. 32 August 22, 2012Let’s put an image in the div Bring an image into the div. Placed right before the text. Click on the image in the design view. Create a new class The one we want should come up automatically.  Pseudo  This document only  .centertext img Select Box  Float - right Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  33. 33. 33 August 22, 2012End Result While we haven’t been able to explore a variety of layouts, it’s important to know that the types of selectors , positioning, and floats are at the heart of placing your content on the web page. Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  34. 34. 34 August 22, 2012Create a quick nav bar Let’s add some links underneath our text. Type out the following Home | Page2 | Page3 Make each a link Create a new div around the links named navdiv. Click one any link text and create a new style. Creating styling for any link within navdiv. Padding – 20 on right. Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  35. 35. 35 August 22, 2012Animation  Flash  Timeline based animation program that generates shockwave animations  jQuery  Javascript frameworks library of animation  Referenced through script links and css. Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  36. 36. 36 August 22, 2012Flash Animation An easy banner add  Create a new actionscript file in Flash  Set the canvas size to 500x100  Fill base with color Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  37. 37. 37 August 22, 2012Flash Animation  Add a text layer, position off canvas Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  38. 38. 38 August 22, 2012Flash Animation  Go to Frame 30  Select CTL Return to test  Add keyframe - hit F6 swf file  Change position of text at 30 frames.  Fill base with color  Save file Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  39. 39. 39 August 22, 2012Paid Web Hosting  If you’d like to have a domain name and space for a site, you will need to work with a web hosting service.  Many companies streamline the process of registering a domain name and providing space.  My recommendations  Ipage.com Godaddy.comBlogs   Blogs are a great way to establish an online presence, and don’t require a lot of technical knowhow.  My recommendations  Tumblr.com  Blogger  WordPress Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
  40. 40. 40 August 22, 2012Thank you all for coming today!  We hope you enjoyed our community web design class  Feel free to email me with any questions at alex.fogarty@rasmussen.edu Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.

×