| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Web Design

Page history last edited by Ray Rackiewicz 13 years ago

 

Lesson 1

 

Topic covered this week include:

 

  • History of the internet and the world wide web
  • History of web design 
  • Evolution of HTML
  • The W3C
  • Browser wars 
  • Web development technologies
  • Content vs. presentation. HTML vs. CSS 
  • <html>, <head> and <body> tags
  • <title> tag
  • <meta> tag 
    • Content-type
    • Description
  • <link> tag
    • stylesheet
    • shortcut icon
    • apple-touch-icon 
  • <script> tags
  • Website validation
  • <h1> through <h7> heading tags
  • <p> paragraph tag
  • <ul>, <ol>, <dl> list tags 
  • <a> anchor (link) tag
  • <br/> break tag
  • <address> tag
  • <q> and <blockquote> tag 
  • Block level vs. inline elements
  • Deprecated tags

 

Analysis:

 

Heuristics are rules that can used to determine the effectiveness of a system, in this case the usability of a web page. For this week's analysis you will perform a heuristic analysis of the website mint.com. Fill out the form here and bring it back to class next week.

 

Lab:

 

This week you will be creating an online resume using the HTML content tags discussed this week.

 

The requirements for the project is as follows:

  • You will be using notepad to author your .HTML file. When saving be sure to set your Save As Type to All Files.
  • Lay out the basic structure of your HTML document first. You can copy and paste this from the Code View of Dreamweaver.
  • Your resume will be built inside the <body> </body> tags. 
  • You are only permitted to use the <H1>-<H6>, <p>, <ul>, <address>, <blockquote> and <a> tags. Do not capitalize tag names. EVERY PIECE OF TEXT MUST RESIDE INSIDE A TAG.
  • We will not be using any formatting other than what the tags provide (i.e. H1 produces larger type than H2).  Next week, we will be adding in formatting to change sizes, create emphasis and to manipulate white space. Be sure you select heading tags in descending order of size (i.e. H1 is more important than H2 which is more important than H3). Don't skip heading numbers.
  • The type of resume we will be creating is called a Functional Resume. Functional resumes put the emphasis on your education and related skills instead of your unrelated job experience. This is the best type of resume to use if you have little to no experience in the field you have studied in school.  See example here. I would encourage you to look at other examples of functional resumes for graduating students. There are several variations on the theme such as putting your education section directly below your objective section.
  • I want you to focus in on a single skill set for this resume (e.g. 3D modeling or animation or interactive design or graphic design or video editing technician). The only time you would diversify your resume is if you are going after a general position (e.g. multimedia content creator).
  • Your resume should contain the following information presented in the order listed below.
    • Your name - this should be presented dominantly.
    • Your address
    • Your phone number
    • Your email address
    • Your portfolio URL
    • Objective title
    • Objective statement - This should be a one to two sentence statement regarding your immediate career objective in the skill set you have selected. at the end include a list of relevant software, but lump them together where possible (e.g. Expert in Photoshop, Illustrator and InDesign or Advanced user of 3DS Max and Maya). List the software at the end of this list.
    • Summary title
    • Summary items - These items should be relevant for the skill set you have targeted. 
    • Experience title
    • Experience subtitles - You will break your experience into separate sections as seen in the sample page linked above. For example, for a 3D Modeling and Animation job, you will separate these into two categories 3D MODELING EXPERIENCE and ANIMATION EXPERIENCE.
    • Experience items - Describe (don't list) those skills you have obtained through your education and freelance work that are relevant to the job you are applying for. For example, instead of listing "Poly Modeling" as a skill, instead say, "Strip modeled a human character with under 10,000 polys for inclusion in the Unreal Engine". 
    • Work experience title
    • Work experience - If you have experience that is related to your education, list it first. List the position you held, the company you worked for, the city and state the company resided and the timeframe you worked there.
    • Education title
    • Education statement - This should list the name of the school you attended, where you attended, the starting and ending dates you attended and a description of the degree received. If you graduated with any special honors then this is a good place to describe these.
    • Other - there are other modules you can add onto the end of your resume. Such modules might include:
      • Awards and Honors - a list of any recognition you've received that is relevant to your career.
      • Professional Affiliations - a list of professional organizations and groups you belong to that are relevant to your career.
      • Certifications - a list of certifications relevant to your career.
      • Shows & Exhibitions - a list of shows and exhibitions that you have shown your work in.
  • You are going to encounter that you will need to using multiple heading tags. If you are going to eventually format something the same then use the same heading tag. For example, all the major title sections of your resume should use the same heading tag.
  • Provide anchor tags (hyperlinks) for all the companies you have worked for and the schools you have attended. 

 

Resources:

 

 


 

Lesson 2

 

Topic covered this week include:

 

  • Web design process 
  • Formatting tags vs. CSS
  • <b>, <i> and <em> tags and SEO 
  • Introduction to CSS
  • <link rel="stylesheet"> tag 
  • Type selectors
  • Class selectors 
  • Formatting text, fonts, links and lists using CSS
  • CSS box model (controlling whitespace)
  • Web fonts
  • Typekit

 

Buzzwords:

 

  • CSS (cascading style sheets)
  • SEO (search engine optimization) 

 

Analysis:

 

This week, you will be using the diagramming tool found at gliffy.com to create a site map of mint.com. A site map is a diagram created by web designers and information architects (in the case of complex websites) that plans out the hierarchical relationships between pages in a website.  Please read pages 43-52 in Web Design for Dummies, with special emphasis on 50-52 (Deconstructing a web site). A basic definition for site map can be found on page 22. Print out your site map and bring it to class next week. 

 

As an alternative you can consider using Microsoft Visio. There is a steeper learning curve to Visio but it is a software that is used widely by web developers and is another software you can add to your resume.

 

Lab:

 

This week you will be creating a linked stylesheet that will control basic styling of your resume. We will use CSS type selectors to override the tags we utilized last week <h1>-<h6>, <p>, <ul>, <li>, <a> and <body>. We will use CSS class selectors to create variations of a single tag. For example, what if you want to style two paragraphs or headings differently? The problem with type selectors is that they create sweeping changes that apply to all instances of that tag. To create exceptions you must use class selectors. Whitespace will be controlled via the "box model" to control the margins between elements and the padding around elements.

 

The requirements for the project is as follows:

  • The style sheet will be linked externally using the <link> tag in the <head>. The style sheet must have a .CSS extension.
  • All units of measurement will be in ems. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 6px. The size can be calculated from pixels to em using this formula: pixels/16=em. The problem with the typographic unit px (pixels) is that older versions of Internet Explorer do not support them. Another common typographic unit is % (percents) which we will use in later exercises.
  • Remove all <br /> tags from your HTML. 
  • Don't go overboard with color. Limit color choices to headings and link states.
  • Place a general font-family declaration in the body type selector so you don't have to declare it for each other type selector.
  • As far as whitespace, we are less concerning at this juncture with left and right padding/margins. I want you to focus more on controlling top and bottom padding/margins. You may find it helpful to turn on borders while writing your CSS to understand the affect of minute changes on the box that surrounds each element. Comment or erase the border styling when you are done. Remember, margins control the whitespace OUTSIDE the border of the box. Padding controls the whitespace WITHIN the border of the box. Area outside the box is not affected by background-color. Since we won't have visible borders, I recommend you focus on controlling whitespace using the border properties.
  • If you have multiple variations of the same tag you will need to use CSS class selectors (See CSS class and ID Selectors below). For example, let's say you have to <h1> elements, one that is colored black and the other a tint of blue. To accomplish this, you need to do the following:
    • In your HTML, <h1 class="tint_blue">Hello</h1>
    • In your CSS, h1 {color:black}; and h1.tint_blue {color:#AFEEEE};
    • All h1 tags will appear black except for the one that has the class="tint_blue" attribute. You have essentially overwritten the color property of the <h1> tag.  
  • Viable text properties includes: See CSS - Formatting Text resource below.
    • color (see CSS Colors and CSS Color Name resources below)
    • line-height
    • letter-spacing
    • text-decoration (removing underlines from links)
  • Viable font properties include: See CSS - Formatting Fonts resource below.
    • font-family (be sure to have backup type families). See CSS - Web Safe Fonts below.
    • font-size (do not use points or pixels as units of measurement)
    • font-style (for italicizing)
    • font-weight (for bolding) 
  • Link styling will be done using pseudo selectors. See CSS - Formatting Links resource below. Pseudo-selectors include a:link, a:visited, a:hover and a:active.
    • color
    • text-decoration (for underlining)
    • background-color (try this on the a:hover state) 
  • List styling properties include:
    • list-style-type (changes the image used for the bullet)
  • Whitespace styling properties include:
    • margin
    • padding
    • margin-top, margin-right, margin-bottom, margin-left
    • padding-top, padding-right, padding-bottom, padding-left
  • To convert a block level element to an inline element:
    • display: inline;
  • To convert an inline element to a block level element;
    • display: block; 

 

Tips:

 

  • Removing the large gap between an h1 element and the following paragraph. Create a type selector: h1{margin-bottom: 0;}  and an adjacent selector h1+p {margin-top: 0;}. What this does is removes the bottom maring from the <h1> element and the top marin from any <p>that proceeds an <h1>.
  • Using an image for a bullet. Create a style rule that points to an image ul { list-style-image: url(bullet.gif);}
  • CSS Comments. For example: /*This is a comment*/
     

 

Resources:

 

 


 

Lesson 3

 

Topic covered this week include:

 

  • <img> Image tag
  • <image> tage attributes: width, weight, src, alt, align
  • Floating images  
  • .JPG, .GIF, .PNG, .SVG, WebP image formats
  • Image optimization tools
  • Using CSS on images
  • Slicing graphics
  • Adobe ImageReady 

 

Buzzwords:

 

 

Analysis:

 

This week we will be learning how to optimize web graphics. Go to this website and near the bottom of the page you will find a section titled Download Source Files. Download both the PSD and Web Template files. Before you proceed, please complete the tutorial on this site.

 

The HTML and CSS files are for your benefit. The author has taken the time to actually build the page that he mocked up. Since both of our course projects will be two-column websites such as this one, it will benefit you considerably to study his HTML and CSS in preparation for those projects. Notice the way that he structured his files. This is a very common way to organize a website.

 

Here is an outline of steps you will follow to complete this analysis:

 

  1. Print out a black and white copy of the Photoshop image to fit the paper. Keep this file open.
  2. Open the index.html file in a browser. Take note of what is an image and what is not, particularly when it comes to the text. Label all images on the print out you made in step one so you remember what is an image and what is not. NOTE: Most images will not have a Save As option when you right-click. This is because Javascript is being used to render certain images (those with transparent backgrounds).
  3. In Photoshop use the Slice Tool to cut around the images you want to save. You may find it helpful to zoom in around the areas that you want to cut around. Pixel perfect slicing isn't important for this exercise. As you slice each image, right click on the slice number in the upper left corner of the image. Give the slice a meaningful name. You'll notice that in the process of slicing, Photoshop will create a bunch of slices that you don't want. Right click on their slice numbers, select Edit Slice Options and set their Slice Type to No Image. This will prevent these "autoslices" to not save. If you forget or neglect this step, you'll have to delete all of these junk slices after you export them.
  4. Before you export your images, you will want to turn off the backgrounds for all of the layers. Don't forget to turn the Noise layers off as well. The reason that we want to do this is because we want the images to have a transparent background. Saving images with transparent backgrounds is especially important when graphic text or images are on a background or color that is not supported by hexidecimal code.
  5. Go to File>Save For Web and Devices. In the corner of each slice you want to export byou will see a slice number. If you click on that number you'll be able to save each image out as a separate image type. Since we'll be saving all of our images as PNG-24s this is not important for this assignment.
  6. The last step is to save. All of your slices should be saved in a single folder. If you followed step #3 above, then you should have no "autoslices" to delete. 
  7. Run all of your images through the image optimization tool at punypng.com. Compare the before and after qualities and reductions in file size. Be prepared to discuss these improvements next week.
  8. Bring this folder and your print out where you identified all of the slices to class next week.

 

Lab:

 

This week you will be creating an image gallery in class based on the handout provided. For extra credit you can link the thumbnail images to larger images on another page. Experiment with padding, margins and border to create different looks. Use the text-align property to center the image and text.

 

The learning points for this in-class lab are:

  • Using ID selectors
  • Using descendant selectors 
  • A variation on the use of an <UL> unordered lists. This is the exact technique that we can use to create horizontal and vertical navigation bars.
  • Learning how to float block level elements beside each other
  • How to convert block-level elements to inline elements and inline elements to block level elements. See Appendix for a list of block-level and inline elements.

 

NOTE: This implementation is very simple yet looks very crude in comparisons to the slide shows, image galleries and light boxes you tend to see on websites today. To learn how to implement a more elegant and sophisticated solution see 57 image galleries, light box and slide show tools.

 

Resources:

 

 


 

Lesson 4

 

Topic covered this week include:

 

  • <table> Table tag
  • Formatting tables with CSS
  • The history of tables and web layout
  • Tableless design

 

Buzzwords:

 

  • Tableless design
  • HTML 5
  • Web 2.0

 

Analysis:

 

The first step toward implementing the layout of a web site is the creation of a wireframe. A wireframe is a low-fidelity sketch that blocks out the major structural elements on the page (as seen below). Images are merely boxes with X's through them and text is squiggles. I do recommend that major navigation and heading text are written out. Take a look at some of these wireframe examples. One thing you will notice from the examples is how sketchy some wireframes look and how clean others look. Remember, a wireframe is not a beauty contest. The best wireframe is one that communicates the idea quickly. Therefore, time invested in breaking out straight-edges and fancy coloring is time wasted.

 

Credit to Soxiam on Flickr. Image used without permission.

 

This weeks analysis will be the wireframing of our first major project. While I am old school and prefer to work with sketches, there are a myriad of wireframing tools available online. One of the big advantages of these tools is the ability to hyperlink your virtual pages. One tool that looks simple and promising is Mockingbird. For this assignment, I would like to see a wireframe of the homepage and one interior page.

 

 

Lab:

 

As discussed this week, tables are used to markup tabular content. This week you will be creating a table layout for one or both of the NBA conferences. Your goal is to recreate this table as accurately as possible.

 

The requirements for this project are as follows:

 

  • You will need to turn on borders for your entire table. Notice how some of the borders are white. I HIGHLY encourage you to mark this table up to closely replicate these standings. This is NOT REQUIRED. If you merely just want to turn all the borders on, and to have them all the same color and width then that is fine. Be sure to set the border-collapse:collapse; to the table selector in your stylesheet. See packet for more details.
  • Supply sufficient padding inside all <th> and <td> elements.
  • The conference name (i.e. Eastern Conference) will be the caption.
  • All team names should be linked to their respective home pages.
  • The background of the caption should be covered using background-color property.The text color of the caption should be white.
  • The entire row for each division within the conference should have a gray background. The text within each division heading should be bolded. This styling should be applied to the <tr> for each division via a class attribute (as demonstrated in class).  This gray should be a lighter tone than the tone used for the division rows.
  • Each <td> in the win column should have a gray background that is the same color as the division rows. The text should also be bold using font-weight: bold; property. You will need to assign a class selector to each <td> in this column to accomplish this. For example, <th class="win_column"> in your HTML, then .win_column {background-color: #e0e0e0;} in your stylesheet. 
  • Each alternating team within each division should have a gray background.
  • If you'd like to try it, there is a css property called text-transform that you can use to convert all lowercase letters to caps.  Set this property to capitalize in your stylesheet.
  • Apply the red and green text colors to the DIFF column.
  • Don't worry about the underlined headings of each column. Those are used for sorting purposes.
  • Be sure to establish a font-family and font-size declaration in the body selector of the stylesheet. Font size should be in the em unit.

 

Extra Credit:

  • Notice how the team names are text aligned left while the table data is text aligned right.
  • Recreate the border colors exactly.
  • Notice how the column for team names has a fixed width that is wider than the longest team name. See if you can figure out how to accomplish this.

 

Resources:

 

 

 


 

Lesson 5

 

Topic covered this week include:

 

  • Forms
  • Server side scripting
  • Form validation  
  • Proper size of a website
    • The fold
    • Line length
    • Readability
    • Whitespace
    • Mobile device considerations
  • Laying out a website in Photoshop  

 

Buzzwords:

 

  • Server side scripting 

 

Analysis:

 

This week you will be mocking up Project 1 in Photoshop in praparation for building it as a two column website over the next three weeks. We will be using a 960px x 550px form factor. Use greek text in conjunction with Verdana, Arial, Times New Roman or Georgia when laying out text. I use the generator at lipsum.com. Use stand-in graphics until we can develop our own.

 

Lab:

 

Design a contact form for Project 1. Attempt to incorporate each of the form elements discussed in class: text fields, check boxes, radio buttons, submit buttons, text areas and select lists (drop-down lists). Use fieldsets to organize the form into meaningful chunks where appropriate. This design will be layed out in a 2-column table. Style the table as necessary in CSS.

 

Resources:

 

 

 

 


 

Lesson 6

 

Topic covered this week include:

 

  • CSS Positioning Models
    • Absolute
    • Relative
    • Float 
  • Two column websites
  • <div> division tag
  • HTML 5 overhaul of divisions
  • Fixed vs. iquid vs. fluid layouts
  • CSS, hacks and browser rendering

 

Buzzwords:

 

  • HTML 5 

 

Analysis:

 

 

Lab:

 

Layout course project 1 in Photoshop. Creating a 2-column website template.

 

Resources:

 

 

 


Appendix

 

Educational Resources:

 

Web Development Communities:

 

Reference Material:

 

Cheat Sheets:

 

Recommended Reading:

 

Tools:

  • HTML Tidy - A tool for cleaning up HTML code to improve readability, performance and standards compliance.

 

Tips:

 

Comments (0)

You don't have permission to comment on this page.