Web Design 101

August 22, 2012Web Design101Foundational skills forwebsite design

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 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 August 22, 2012Web Page Breakdown Page – url, address Text Navigation & Links Images Interactivity Animation (motion) Scripting Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.

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 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 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 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 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 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 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 August 22, 2012Dreamweaver gets you started Welcome Screen Create New Container based system HTML File Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.

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 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 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 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 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 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 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 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 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 August 22, 2012CSS – Cascading Style Sheets  The Cascade  Divs  Basic text styling  Style selectors  Positioning  Floats Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.

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 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 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 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 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 August 22, 2012Create new CSS Rule Choose Tag Body This document only Hit ok Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.

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 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 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 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 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 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 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 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 August 22, 2012Flash Animation  Add a text layer, position off canvas Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.

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 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 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.

http://www.rasmussen.edu	134
http://www.twylah.com	5
http://test-www.rasmussen.edu	4
http://qa-www.rasmussen.edu	2
http://rtp.rasmussen.edu	1
http://demo-www.rasmussen.edu	1

Web Design 101

by Rasmussen College on Sep 20, 2012

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 147

Statistics

Web Design 101 Presentation Transcript