Web Design 101
1 like810 views
The document is a guide for foundational skills in web design, covering key elements such as HTML, CSS, site organization, and the design process. It discusses how to structure a webpage, create links, optimize images, and use tools like Photoshop and Dreamweaver. Additionally, it provides information on web hosting options and introduces basic animation techniques.
Web Design 101
- 1. August 22, 2012 Web Design101 Foundational skills for website design
- 2. 2 August 22, 2012 Web 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 August 22, 2012 Web 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 August 22, 2012 Web Page Breakdown Page – url, address Text Navigation & Links Images Interactivity Animation (motion) Scripting Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
- 5. 5 August 22, 2012 Where 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 August 22, 2012 Site 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 August 22, 2012 Site 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 August 22, 2012 Determining 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 August 22, 2012 Keep 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 August 22, 2012 HTML – 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 August 22, 2012 HTML – 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 August 22, 2012 Dreamweaver gets you started Welcome Screen Create New Container based system HTML File Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
- 13. 13 August 22, 2012 Choose 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 August 22, 2012 Basic 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 August 22, 2012 Design 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 August 22, 2012 Creating 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 August 22, 2012 Creating 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 August 22, 2012 Images 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 August 22, 2012 Photoshop’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 August 22, 2012 Photoshop 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 August 22, 2012 Bring 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 August 22, 2012 CSS – Cascading Style Sheets The Cascade Divs Basic text styling Style selectors Positioning Floats Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
- 23. 23 August 22, 2012 CSS – 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 August 22, 2012 Divs <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 August 22, 2012 Green 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 August 22, 2012 Div 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 August 22, 2012 Text 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 August 22, 2012 Create new CSS Rule Choose Tag Body This document only Hit ok Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
- 29. 29 August 22, 2012 Redefine 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 August 22, 2012 Position 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 August 22, 2012 Now 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 August 22, 2012 Let’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 August 22, 2012 End 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 August 22, 2012 Create 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 August 22, 2012 Animation 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 August 22, 2012 Flash 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 August 22, 2012 Flash Animation Add a text layer, position off canvas Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
- 38. 38 August 22, 2012 Flash 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 August 22, 2012 Paid 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.com Blogs 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 August 22, 2012 Thank 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.