Classes

Week 15

Final Project Due on 12.17.12 at 9:45am.

You MUST log into the class blog and leave a link to your site. Today is the final class. YOU ARE POSTING ONLINE. 

12.17.12

POST A LINK TO YOUR BLOG, FLICKR AND WEBSITE URL


Final Project Requirements

Documentation

  • accurate sitemap
  • revised wireframes
  • styleframes

Content

  • your homepage
  • your artist statement
  • your bio
  • your portfolio
  • your skills
  • contact page

Information Architecture

  • one section without subpages (like a homepage or contact page)
  • one section with 2 to 3 subpages

Coding

  • Image rollover
  • CSS link states
  • 2 Link types (email, new window)

Images

  • GIF
  • JPG
  • All sized properly

Execution

  • a live area that fits a browser set to 1366×768
  • use of lists and divides
  • effectively placed HTML text and CSS
  • (your site should not be all images)

 

NOTE: You must have a page called homework.html and it must include all of the following:

This includes:

  1. Register your blog
  2. Delicious
  3. Create resume and artist statement
  4. Gravatar
  5. Facebook Page
  6. Add social book marking on your blog
  7. LinkedIn – 100% complete
  8. Create Twitter and YouTube accounts
  9. Create Resume, Index, Contact and Artist Statement pages
  10. Mark up your resume
  11. Put all homework links on homework.html page
  12. Longest page, add back to top markup
  13. Make and unordered list
  14. Create an external CSS for the bio and resume pages
  15. Add div’s to all your pages
  16. Use styles including font, color size
  17. Create boxmodel.html
  18. Recreate Layout 1 and Layout II
  19. Recreate the sample layouts
  20. Gather all materials for website development including all graphics, images, videos
  21. Make an image gallery with 6 images including thumbnail and full sizes
  22. Create wireframes
  23. Create styleframes
  24. Create site map
  25. Create css stylesheet that includes different backgrounds, headings, links and list styles for each of the three divs
  26. Add rounded corners to your divs
  27. Create a single image roll over menu
  28. Create a photoshop design template for your homepage and save as a jpg
  29. Create production graphics for your site
Read More

Week 14

Final Project Due on Week 15, 12.17.12 at 9:45am.

You MUST log into the class blog and leave a link to your site. Today is the final class.

THERE WILL BE NO CLASS ON WEEK 15 – 12.17.12


Final Project Requirements

Documentation

  • accurate sitemap
  • revised wireframes
  • styleframes

Content

  • your homepage
  • your artist statement
  • your bio
  • your portfolio
  • your skills
  • contact page

Information Architecture

  • one section without subpages (like a homepage or contact page)
  • one section with 2 to 3 subpages

Coding

  • Image rollover
  • CSS link states
  • 2 Link types (email, new window)

Images

  • GIF
  • JPG
  • All sized properly

Execution

  • a live area that fits a browser set to 1366×768
  • use of lists and divides
  • effectively placed HTML text and CSS
  • (your site should not be all images)

 

NOTE: You must have a page called homework.html and it must include all of the following:

This includes:

  1. Register your blog
  2. Delicious
  3. Create resume and artist statement
  4. Gravatar
  5. Facebook Page
  6. Add social book marking on your blog
  7. LinkedIn – 100% complete
  8. Create Twitter and YouTube accounts
  9. Create Resume, Index, Contact and Artist Statement pages
  10. Mark up your resume
  11. Put all homework links on homework.html page
  12. Longest page, add back to top markup
  13. Make and unordered list
  14. Create an external CSS for the bio and resume pages
  15. Add div’s to all your pages
  16. Use styles including font, color size
  17. Create boxmodel.html
  18. Recreate Layout 1 and Layout II
  19. Recreate the sample layouts
  20. Gather all materials for website development including all graphics, images, videos
  21. Make an image gallery with 6 images including thumbnail and full sizes
  22. Create wireframes
  23. Create styleframes
  24. Create site map
  25. Create css stylesheet that includes different backgrounds, headings, links and list styles for each of the three divs
  26. Add rounded corners to your divs
  27. Create a single image roll over menu
  28. Create a photoshop design template for your homepage and save as a jpg
  29. Create production graphics for your site
Read More

Week 13: FINAL PROJECT

Week 13: FINAL PROJECT

FINAL PROJECT: DESIGN PHASE

Information Architecture

The role of an Information Architect in Web development is to develop the structure, labeling, and navigation schemes of the site. This phase is alternately known as Interaction Design and Experience Design and Information Design. The Site Outline was the first step in this process. Now we are going to visualize our Information Architecture in the form of a Functionality Specification or Functional Spec.

With the Functional Spec you create a blueprint for your site much the way an architect does for a building. The purpose of this spec is to synthesize needs identified in the requirments document into a concrete plan for development. It includes a visual map of the overall hierarchy and flow of your site, and detail views for each interface or page. At this point in the process, we are not concerned with the graphical interface of images, colors, and fonts that will go into your site, but the outlining basic structure and functionality.

Your impulse as a designer may be to skip the functional spec and jump right into graphic design. The problem with this is that it is too easy to get caught up in aesthetic decisions which can overshadow the functionality and usability of your site.

CREATING A FUNCTIONAL SPEC

For our purposes, the Functional Spec will consist of a Site Map (or Site Flow) and a set of Wireframes.

The Site Map is a visual representation of all the pages of the site and how the user navigates through them.

Wireframe is a diagram that represents the layout, content, and functionality of each page.

You can create these documents in any drawing or page layout program you are comfortable with. A great resource for making wireframes is Google’s Mockingbird. It’s a Google Chrome add-on


INTERFACE DESIGN PRINCIPLES

Ok, we’ve gone through the Discovery phase, and determined what we want our site to be, who it is for, and what it is going to contain. We’ve mapped this all out in our functional spec. Now its time to bring to life with the next step in the Design Phase, known variously as Interface, Visual, and Graphic Design.

The Basics

Function First. A Web site is like a chair. Aesthetics don’t make up for poor usability. That beautifully carved and varnished cherry wood contraption in the corner is no good if you can’t sit in it.

Your interface is a frame for the content of your site. Just like a piece of fine art, the frame shouldn’t overshadow the picture.

Don’t make me think. Your Web site isn’t a puzzle for your users to solve. When they hit the home page, it should be immediately apparent what they can do next. Think about it, when you go to a Web page, do you carefully read every word and weigh your options before clicking to the next page, or do you quickly scan and take a shot at the best guess for what link or button will get you what you want?

Don’t reinvent the wheel, unless what you really need is a jetpack. At this point, Web designers have figured out the best solutions to the basic Web problems. And, visitors to your site spend 99% percent on other peoples sites. So give them something familiar.

Where am I? Where can I go from here? Clear, persistent navigation is crucial to a successful site.


PAGE SIZE

Unlike a printed page, you can not predict or truly control the amount of pixels you users will see. Here’s a few quick stats to check out:

2012 Monitor resolutions:

MOST POPULAR USED screen resolution: 1366 x 768  
1280×800 – 18.7%
1024×1024 – 11.5%
1200×800 – 10.7%
1920×1080 – 8.1%

(These stats are from The Counter)

To further complicate things, now many users have the ability to view the Web through mobile devices. The iPhone, for example, has a screen size of 480×320 (but with that nifty zoom feature) and they go down from there.

You’ve got two main options:

  1. Use a fixed layout, and design for the lowest common denominator. Since 11.5% of users are still looking at the Web at 1280×1024, build for them and assure that the largest amount of users will be able to easily view your page.
  2. Use a flexible layout, one that resizes to optimally fit the current browser window.

Regardless of which size you decide to go with, building to optimal page size means keeping key elements “above the fold.” Key elements include navigation, branding, and enough page content for the main points to get across. Remember, users will scroll horizontally or vertically but rarely both. Additionally, they don’t want to scroll through more than a couple of screens of content. Pages longer than that should be broken up. The maximum visible page area is actually smaller than the screen size due to browser interface elements.


A few good links


CREATING A DESIGN MOCKUP

Creating a template

  1. Open the wireframes that you created for your site. You are going to use this as a guide for setting up your template. For every distinct interface that you have defined for your site, you will need to make a mockup for it. If your page layout doesn’t vary much from page to page, you may be able to use a single document and sets of layers to contain all the permutations.
  2. Create a new document in Photoshop or Illustrator. Go to File > New
  3. Set the following document settings:
    • Size: 1366×768, depending on what size you decide to build for
    • Resolution: 72 pixels/inch
    • Mode: RGB
    • Contents: Transparent
  4. Open your layers palette: Window > Layers.
  5. Create and name separate layers for each part of your design grid. Typical sections that your site may have are:
    • Body (background color or pattern)
    • Branding / Header (Logo and Site Title)
    • Sidebar
    • Global Navigation
    • Content
    • Section Heading
    • Copy (sub-headings, paragraphs, lists, bullets and inline links)
    • Footer (copyright and email link)
  6. Turn on your Rulers: Window > Show Rulers
  7. Use guides to define the sections of your design grid. Click on the Move Tool in the Tool palette and drag a horizontal and vertical guide from each ruler.
  8. Use the Photoshop or Illustrator tools to create your mockup. The mockup should show the client how the final interface will look. Specify logo, color scheme, fonts and positioning.
  9. Once you have finalized the your mockup you are ready to slice and optimize your images.

Here’s an example of a multi-page design comp:

Multi-page design comp


WEB DEVELOPMENT PROCESS

Site Map

A site map is a  flow diagram of the pages contained in your website. This is the essential information architecture needed to build your website.

Tips for creating usable navigational systems:

Navigation should:

  • Be easy to learn.
  • Be consistent throughout the website.
  • Provide feedback, such as the use of breadcrumbs to indicate how to navigate back to where the user started.
  • Use the minimum number of clicks to arrive at the next destination.
  • Use clear and intuitive labels, based on the user’s perspective and terminology.
  • Support user tasks.
  • Have each link be distinct from other links.
  • Group navigation into logical units.
  • Avoid making the user scroll to get to important navigation or submit buttons.
  • Not disable the browser’s back button.

Create an outline of  your website and include:

  • Content Inventory: a hierarchical view of the site content, typically in a spreadsheet format, which briefly describes the content that should appear on each page and indicates where pages belong in terms of global and local navigation.
  • Site Maps: visual diagrams that reflect site navigation and main content areas. They are usually constructed to look like flowcharts and show how users will navigate from one section to another. Other formats may also indicate the relationships between pages on the site.

Usability First is a great resource for developing your website. Go to this link and READ IT!

Here’s an example of what a sitemap could look like.

Site Map

You can create your sitemap using any number of different tools. Here are a couple of great tools used to create sitemaps. Great designer resources.


 Wire frame: Where Content Elements Appear Within the Page

Wireframes are rough illustrations of page content and structure, which may also indicate how users will interact with the website. The first step is to great these diagram to establish page layout and then you will move to the visual design. Wireframes are useful for communicating early design ideas showing exactly what information, links, content, promotional space, and navigation will be on every page of the site. Wireframes may illustrate design priorities in cases where various types of information appear to be competing.

Since a site map does not indicate any hot links that may appear within a page, your wire frame will help you to determine how a user will navigate through your site beyond the main navigation. The purpose of a wire frame is to determine where each content piece will be displayed on the page, and which pieces will be displayed most prominently.

You do not need to worry about how each piece will look. The wire frame example below uses a tabbed navigation approach, however this visual is merely a placeholder and the designer may take a totally different aesthetic approach once the design phase begins.

sample wire frame

Wireframe


The Web Site Design and Development Process

You’ve learned the basics of HTML/CSS, how to structure pages and how to create a navigational system for your site and now we’re in the midst of the design phase.

PHASE I: PLANNING

This is your most important stage in the web development process. Everything you map out in the planning stage will be the blue print for your entire project.

Requirements Analysis

  • Website goals
  • Target audience
  • Defining your content

Site Map

  • Structure your site
  • Include page hierarchy
  • Include links
Access to Servers 
  • Obtain and validate includes FTP host, username and password
  • Control panel log-in information
RESOURCE LINKS FOR THIS PHASE:

PHASE I COMPLETED


PHASE II: DESIGN
In this stage you’ll move the information outlined in the planning stage closer to reality. Deliverables included are a documented site structure and a visual representation of your site.
Wireframe and Design Elements Planning
  • Sketch out the basic navigation structure for your site
  • Identify the number of pages
Mock-ups based on requirements analysis
  • Using tools like Go  Mockingbird, layout the main pages on your site
  • Keep your design elements organized
Review Cycle
  • Designing anything includes a series of iterations.
  • Review the entire site layout and make changes PRIOR to coding the site
Styleframes
  • Using the wireframes you created as a base, add style elements to your pages.
  • Include the following:
  1. Colors: find the hexadecimal # for your colors
  2. Add your images to the layout
  3. Add your videos to the layout
  4. Add your icons and/or illustrations to the layout
  5. Add dummy text

Resource links for this phase:


Today we’re going to focus on creating STYLEFRAMES

CREATING A DESIGN MOCKUP

Creating a style frame template

  1. Open the wireframes that you created for your site. You are going to use this as a guide for setting up your template. For every distinct interface that you have defined for your site, you will need to make a mockup for it. If your page layout doesn’t vary much from page to page, you may be able to use a single document and sets of layers to contain all the permutations.
  2. Create a new document in Photoshop or Illustrator. Go to File > New
  3. Set the following document settings:
    • Size: 1280 × 800
    • Resolution: 72 pixels/inch
    • Mode: RGB
    • Contents: Transparent
  4. Open your layers palette: Window > Layers.
  5. Create and name separate layers for each part of your design grid. Typical sections that your site may have are:
    • Body (background color or pattern)
    • Branding / Header (Logo and Site Title)
    • Sidebar
    • Global Navigation
    • Content
    • Section Heading
    • Copy (sub-headings, paragraphs, lists, bullets and inline links)
    • Footer (copyright and email link)
  6. Turn on your Rulers: Window > Show Rulers
  7. Use guides to define the sections of your design grid. Click on the Move Tool in the Tool palette and drag a horizontal and vertical guide from each ruler.
  8. Use the Photoshop or Illustrator tools to create your mockup. The mockup should show the client how the final interface will look. Specify logo, color scheme, fonts and positioning.
  9. Once you have finalized the your mockup you are ready to slice and optimize your images.

Here’s an example of a multi-page design comp:

Multi-page design comp

Here’s what the actual site looks like when fully design an coded.

Good resource: 10 Tips for Creating Website Mockups

==========================================================================

Final Project Requirements

Documentation
• accurate sitemap
• revised wireframe

Content

•your homepage

•your artist statement
• your bio
• your portfolio
• your skills
• contact page
Information Architecture
• one section without subpages (like a homepage or contact page)
• one section with 2 to 3 subpages

Coding
• Image rollover
• CSS link states

• 2 Link types (email, new window)
Images

• GIF
• JPG

Execution

• a live area that fits a browser set to 1366×768
• use of lists and divides
• effectively placed HTML text and CSS
(your site should not be all images)


 REVIEW: Presenting Your ContentReviewing Web Page Layouts

• Page properties = alignment, borders, margins, padding
• <span> = for small chunks of content, such as a single sentence
within a paragraph
• <div> = a generic tag used to format large sections of content
(some properties will be relevant specifically for text, images, layers
or all of the above)Alignment
Text Alignment
<p align=left> aligns a paragraph to the left
<p align=right> aligns a paragraph to the right
<p align=center> centers a paragraph
NOTE: large chunks of text align right or center more consistently when a <div> tag is used
Image Alignment
<img align=left> left side of the page
<img align=right> aligns image right side of the page
Wrapping Text Around an Image
<img align=top> aligns the first line of text along the top of an image
<img align=bottom> aligns the first line of text to the bottom of an image
<img align=middle> aligns the first line of text to the middle of an image
Borders, Margins and Padding
When using the shorthand versions of certain CSS properites like margin, padding,
and border, the rule of order is:
1. top
2. right
3. bottom
4. left
The most common way to specific the 4 sides is either:
margin: 0px; defines all 4 sides of the margins as 0px.
margin: 1px 10px 5px 3px;  defines each side separately
(top = 1px, right = 10px, bottom = 5px, and left = 3px)
The browser interpret the CSS properties margin, padding, and border as:
Border – Rule around the edge of an element
Margin – Space outside an element and the container that holds it
Padding – Space pushing an element away from the border or outer edge of the element
Margin Parameters – (can be applied to the whole page, text, or images)
p {margin-top: 15px;} set the margin space at the top of an element.
p {margin-right: 15px} set the margin space at the right of an element
p {margin-bottom: 15px;} set the margin space at the bottom of an element
p {margin-left: 15px;} set the margin space at the left of an element
NOTE: You can have negative values (-2px), however, please be careful using this one, because if you
specify a high negative value (or rather really low) you can cause the visitors browser to crash.
Padding Parameters
h1 {padding -top: 15px;} set the padding space at the top of an element.
h1 {padding -right: 15px} set the padding space at the right of an element
h1 {padding -bottom: 15px;} set the padding space at the bottom of an element
h1 {padding -left: 15px;} set the padding space at the left of an element
NOTE: The padding will have the same background color as the element does.
Border Parameters
div {border -top-width: 15px;} set the border on the top of an element.
div {border -right-width: 15px} set the border on the right of an element
div {border -bottom-width: 15px;} set the border on the bottom of an element
div {border -left-width: 15px;} set the border on the left of an element
NOTE: This element has the same background as its parent element
Border treatments such as color, style and width can all be set in the same tag or they
can be set individually:
H3 {border-color: #000000; border-style: solid;}
set the color and style of the whole border of the element
H3 {border-top: 2px dotted #000000;}
set the width, style, and color of the top border of an element
border-styles
none
dotted
solid
dashed
dotted
groove
double
ridge
inset
hidden (The same as “none”, except in border conflict resolution for table elements)
<div> and <span>
<div> formatting blocks of text and structure layers
<span> formatting inline text

HOMEWORK | WEEK 12

  1. You MUST have a page titled: homework.html. on that page you should list homework at Week 1, Week 2, Week 3, etc. Those links MUST take me back to your finished homework.1. Create the Production Graphics for your site.

    HOMEWORK:

    All homework items SHOULD BE COMPLETED BY 12.10.12 to get full and/or partial credit. If  NOT completed by 12.10.12 you will receive a 0 for that homework.

This includes:

    1. Register your blog
    2. Delicious
    3. Create resume and artist statement
    4. Gravatar
    5. Facebook Page
    6. Add social book marking on your blog
    7. LinkedIn – 100% complete
    8. Create Twitter and YouTube accounts
    9. Create Resume, Index, Contact and Artist Statement pages
    10. Mark up your resume
    11. Put all homework links on homework.html page
    12. Longest page, add back to top markup
    13. Make and unordered list
    14. Create an external CSS for the bio and resume pages
    15. Add div’s to all your pages
    16. Use styles including font, color size
    17. Create boxmodel.html
    18. Recreate Layout 1 and Layout II\
    19. Gather all materials for website development including all graphics, images, videos
    20. Make an image gallery with 6 images including thumbnail and full sizes
    21. Create wireframes
    22. Create site map
    23. Create css stylesheet that includes different backgrounds, headings, links and list styles for each of the three divs
    24. Add rounded corners to your divs
    25. Create a single image roll over menu
    26. Create a photoshop design template for your homepage and save as a jpg
    27. Create production graphics for your site

    For the rest of the semester you will work to complete your final project. You will need to create each of the pages outlined on your sitemap. Your site will need to include the required content, pages, code and images.

    1. Create a template page for the unique layouts outlined on your. Then produce all of the pages required and represented on your sitemap.

    2. Make sure that your site meets all of the requirements for the final project.

    3. Run your code through the HTML and CSS Validater and go through it correct as many errors as possible and to maintain Code Best Practices.

    4. Test your pages in Safari, Explorer and Firefox.
    For your final project you will need to turn in a CD with copies of all of your HTML pages (including your Javascript code), Optimized GIFs and JPGs, and a single external Style Sheet file, in addition to a Word document with the URL where all for accessing the web server where all of your files are posted. Remember, you will also need to turn in complete, current and accurate documentation, such as site map and wireframes.

    You will need to turn in your back-up cd and your supporting documentation.

    Each student will do the presentation for their project (the final class session). I will check with the registrar to get the final dates and will give you your presentation times.

    Research: A lot has changed since you have updated your website.
    Follow up on your latest work by validating your pages…

    W3C – CSS Validation Service

    http://jigsaw.w3.org/css-validator/

    Map out the preliminary stages of your Project Plan…

    1. Determine how many different unique designs will be necessary to complete all of the pages on your site map. A good barometer to determine whether or not a 2 designs would be considered “unique” from each other is how much work would be required to adapt the layout of one page to the other page. (as an example, if the second page can be created from the code of the first page by changing the text and images only, then they would not be considered unique)

    2. Each unique design will require it’s own “Template” page. (as an example, the pages within the “print design” section of a site might be based on one Template page which has text to the right of an image, while the “interactive design” section of a site might be based on another Template page that has 3 thumbnail screenshots positioned in a table with the text below it)

    3. Once you have defined the amount of Template pages that will be required to complete all of the pages in your sitemap, listed them in a Word document (you can give them names or number to differentiate them from each other)

    4. In you Word document, include a list of all of the pages from your sitemap that will be created from each Template page (as an example:

    Template Page Name Pages created from Template

    TextImageRightAlign = Early Inspirations page, Design Philosophy page, Career Goals page

    Create a new post on your class blog and list all the materials you want to include on your website. HEADING: Website Materials. SUBHEADING: Images: list images for home page, about page, etc. SUB HEADING, Illustration, Video, Photographs, Audio, Text or anything else you may want on your site. Separate it by page. I want to put xyz on my home page, about page, contact page or any other page on your site.

  1. Create a SITE MAP for your website.
  2. Create three (3) wire frames:
  • a preliminary wire frame for your home page
  •  two (2) interior pages ( try your about page, your portfolio page or your contact page)
  • Your wire frame layouts will need to be intuitive to read and close to the scale that it will appear in the web browser. You will need to indicate if a part of the layout will fit above the “fold” (the portion of the screen that is visible to the user without requiring the user to scroll).
  •  Use plain boxes to show the placement of “side bar” content areas
  •  Design the page layout as 1366 x 768
  • For regular text, use a 8 or 9 points font size to correspond to normal text sizes within the common default settings with the browser.
  • Use an underline to indicate all links (text or images)
  • If you use elements such as drop down menus or text field boxes, make sure they are recognizable and always treated the same within your wire frame layout

Read: The following reference…
Barrett Communications – Wireframes: A Vital Step in Your Web Site Strategy
http://www.barrettcommunications.com/contentmgr/showdetails.php/id/378

Portfolio Tips for Design Students

Take a look at student work for inspiration

Great Resume Design

 

Read More

Week 12: Images

Week 12: Images

OVERVIEW | WEEK 12

Image File Formats
Image Size
Saving Images out of Photoshop/Illustrator
Using the image tag
Using images as links
Background images
Making a simple thumbnail gallery


IMAGE FILE FORMATS: Review

There are three primary image file formats used for graphics viewed on the web. Each of these file types were designed for the purpose of compressing memory usage. Each file type does this a different way. NOTE: .PSD, .AI and .INDD files will NOT show up on your website.

Jpeg 

Jpegs work well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. JPEG is “lossy,” meaning that the decompressed image isn’t quite the same as the one you started with. (There are lossless image compression algorithms, but JPEG achieves much greater compression than is possible with lossless methods.) JPEG is designed to exploit known limitations of the human eye, notably the fact that small color changes are perceived less accurately than small changes in brightness.

Gif
Graphics Interchange Format. A format used for displaying bitmap images on World Wide Web pages, usually called a “gif” because .gif is the filename extension. These files use “lossless” compression and can have up to 256 colors.

Png-8 and Png-24
PNG is a compression scheme that has two main benefits: it is a lossless compression image format and it holds alpha channel information. Originally, the Portable Network Graphics (PNG) format was designed as a royalty-free format, which would replace GIF and JPEG. Png-24 allows for smooth blending between alpha and opaque.

Image Size
When speaking about image size on the web, there are three possible interpretations of this that you must take into account.

File Size refers to the amount of disk space an image occupies (in KB or MB)
Image Dimensions refers to the physical size of the image, expressed in height and width.
Resolution refers the pixel density of an image. This is expressed in pixels per inch (ppi). Images are displayed on the web at 72 dpi. Printed images are generally of higher resolution.

Resize your images in Photoshop PRIOR to uploading them on the web.

Compression

Compression shrinks down the file size of the photo so that it loads on the user’s computer quickly, but maintains a certain level of quality.


Saving Images Out of Photoshop or Illustrator  
Both Photoshop and Illustrator have excellent options for optimizing images for the Web, via the “Save for Web” menu. It is better to use this option rather than “Save As” or “Export” options, as you will have more control over the output settings and the final file size will be smaller because no preview image is saved with the file.

Save and Export

There are two ways of saving a photo in Photoshop. The first is to use the Save As… dialogue, the other is called Save for Web & Devices… which is used to save your photos in preparation for publication to the Web.

1) Save as: FIRST, save the file type as a Photoshop or .PSD file. This will save extra Photoshop-specific information about your photo and allows you to go back to the file at a later date and manipulate all layers. You will not lose any quality when you re-save it multiple times. THEN, save as a .jpg, .png or .gif which compresses the photo allowing you to use it on the web.

2) Save for Web: Use this when you are ready to export your photo for publication to the Web.  The Save for Web allows you to see how your photo will appear once it’s published to a Web site. Optimized will show you how your photo will appear once it’s published on a Web site, and 2-up/4-up will show you comparisons so you can see how the different levels of compression will affect your photo when saving. These are automated ways to save your image for the Web.

***Here’s a great reference for “save for web”.

 


 3 Ways you can Retrieve Images to Place onto your Website

Use a third party image hosting site like Flickr.

Flickr:

Upload your image to your Flickr account and copy the image URL. To get the direct URL of an image on Flickr do the following:

Upload your own image or search and find an image already on Flickr. One you’ve got the image you want to use, right click on the image and then click on “view all sizes”. Choose your size and click on it. You’ll see the image with various image sizes listed above it. Choose your size and click on it. Right click on the image and choose “copy image URL”. NOTE: you need the direct url to image with a files extension of .jpg, .gif or .png.

 <img src=”http://farm5.staticflickr.com/4081/4883281674_8428f07e53_z.jpg”>

Use a direct URL to a website.

Find your image anywhere on the web. Click on the image and then click on “full-size image”. Copy the URL and place the full URL into your HTML file.

 <img src=”http://discovermagazine.com/2012/jul-aug/06-what-is-your-dog-thinking/dog1.jpg”>

Upload your own image via FTP to your own web hosting space.

Log into your web hosting space via FTP and upload your images. It’s good practice to place them inside a folder called: images.

 <img src=”images/dog.jpg”>

Here’s a great resource for finding images released under Creative Commons.


ADDING IMAGES TO YOUR PAGES

Image tag
Images are displayed on the web using the image tag:

<img>

This is the basic syntax for using the image tag:

<img src=”dog.jpg”>

You MUST upload the image to your ftp site for the web browser to find it. Use JPGs for photographs, and GIFs or PNGs for line art or most screenshots.

Create a subfolder on you FTP site called “images.” Whatever images you want to show on your web pages, upload them to this “images” folder.

The “alt” attribute is used for the text that will display if an image does not load in the browser, and in some browsers is visible when you hover over the image with the mouse:

<img src=”images/dog.jpg” alt=”Spot the Beagle” />

The image tag also allows you to input a numeric value for the height and width of an image. It is a good idea to specify the height and width, as this allows the browser to render the page faster.

<img src=”images/dog.jpg” alt=”Spot the Beagle” height=”400px” width=”200px”>

You can try it out on W3Schools.


Pulling an Image from the Web

If you’re pulling in an image from the web, view its properties to grab the absolute URL. If you are pulling in an image from a folder on your a server, call to it correctly:

Examples:

  • <img src="http://www.url.com/nameofimage.jpg" alt="Name of Image">This image is located somewhere else on the web.
  • <img src="images/dog.jpg" alt="Spot the Beagle">This image is located within a folder called images on my server.

Images as Links

You can use an image to link to another document by simply wrapping an image tag in a link tag:
<a href="filename.html”><img src=”image/dog.jpg“ alt="Spot the Beagle"></a>

You can see an example on W3Schools here.


Background Images

You can set an image as a background in any page element. The properties of background images are detailed here:

****Here’s a great link several sites that generate backgrounds for you. You can create gradients, stripes, tartans, tiles and patterns.

Putting it All Together: Images and CSS

<!DOCTYPE html>
<html>
<head>
<title>HTML Images Tutorial</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>

<h1>
HTML Images Tutorial
</h1>

<h3>
There are three way to place <i>images</i> onto your HTML page.
</h3>

<ol>
<li>Use a third party web hosting space.</li>
<li>Link to an image already on the web.</li>
<li>Upload an image to your web hosting space using FTP.</li>
</ol>

<p>
Use a direct link to pull this image from <b>Flickr</b>or another image hosting site.
</p>

<div align=”left”>
<img src=”http://farm5.staticflickr.com/4081/4883281674_8428f07e53_z.jpg”>
</div>

<p>
Upload an image to your site by <b>linking</b> to an image anywhere on the web.
</p>

<div align=”left”><img src=”http://discovermagazine.com/2012/jul-aug/06-what-is-your-dog-thinking/dog1.jpg”>
</div>

<p>Or, you can <b>upload</b> an image to your web hosting space using<strong>FTP.</strong>
<div align=”left”>
<img src=”images/dog.jpeg”>
</div>
</p>

<p>
You can even use an image as a link to a <b>URL</b> anywhere on the web.
</p>

<p>Create a link of an image:
<a href=”http://www.blogcdn.com/www.urlesque.com/media/2008/11/23-pooch11.jpg”>
<img src=”images/Blinky_Dog.gif” alt=”dog gif”></a>
</p>

</body>
</html>

If you use the HTML above, you can see what the site looks like in the screenshot below.

You can see the FULL HTML page here. The HTML was upload to web space using FTP.


Image Spacing and Alignment

Let’s see how it looks when you add text. Type in “This is one crazy dog!” directly after the close of the img tag. The text will bump up against the edge of the image and wraps around the bottom of the image (depending on how much text you’ve written). To make the text wrap correctly, add an “align” attribute to the image. It’s your choice whether you want to align it to the right or left by using align=”left/right”.

In the image below I’ve added the attribute align=”left” – see the full code here: <img src=”images/dog.jpeg” align=”left” />


A Simple Thumbnail Gallery

This method creates a flexible grid of thumbnail images and captions that dynamically fills rows based on the browser width. This is what it looks like in action:

Each thumbnail and caption is part of an unordered list (ul) with the id “thumbnails”. The list items (li) are set to display:inline and float:left and have background, margin and padding set to create the white boxes around them.


Rounded Corners

It seems like the trend nowadays are images that have rounded corners. If you don’t want to manually do it in photoshop or illustrator, use this online service called RoundPic.

View the links below to learn more about rounded corners and background images.


More CSS Image Techniques

Thinking through your images:

Foreground vs. Background Images. The best way to think about this is as a picture and a frame. Background images are the frame, foreground images are the picture. Background images should be restricted to interface elements, foreground images to content.

Live Text vs. Graphic Text. In order to keep your pages as semantic and machine readable as possible, not to mention keeping download time to a minimum, it is important to use as much “live” text as possible. However, there are times when you don’t want to be limited to the web safe fonts. Today we’re going to explore a few ways that you can get the best of both worlds.

You can see a great example of image rollover on the Apple website.

See a great example of image replacement rollover.

<div id=”nav”>
<ul id="navlinks">
   <li id="home"><a href="#">Home</a></li>
   <li id="navprojects"><a href="#">Projects</a></li>
   <li id="navclients"><a href="#">Clients</a></li>
   <li id="navevents"><a href="#">Events</a></li>
   <li id="navabout"><a href="#">About</a></li>
   <li id="navcontact"><a href="#">Contact</a></li>
 </ul>
</div>
  • Image replacement CSS The key to this technique is to use a single image, containing all the navigation menu items and all of their states.

Then, set up a unordered list of links in your html page. This is a nice semantic way to represent navigation:

Make sure that you give the ul and each li unique ids.

Then, in your CSS, you can use link states (a, a:hover, a:active, a:visited) and background position to reveal the appropriate section of the background image.

CSS Positioning. A great resource to check out.

There are three techniques displayed in this example:

  • Image with background color rollover
  • Head tag replacement
  • Single Image Navigation Rollover

 Embedding Multimedia

Playing Quicktime and Flash Movies
The QuickTime format is developed by Apple. Videos stored in the QuickTime format have the extension .mov.

QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.

With the object element, code that will play a QuickTime movie can easily be added to a web page. The object can be set to automatically install a QuickTime player if it is not already installed on the users computer.

This is the code required to play a QuickTime movie:

quicktime html code

You can also display a flash animation as an object:

If you use a third-party service like YoutubeVimeoGoogle, or blip.tv, you can just copy their embed code and paste it into your .html file.

YouTube

Youtube (Third-Party Video Service)

embed_code

EMBEDDING AUDIO:
There are several different types of music formats that are used…so which one do we use for the web?

The WAVE format is one of the most popular sound format on the Internet, and it is supported by all popular browsers. If you want recorded sound (music or speech) to be available to all your visitors, you should use the WAVE format.

The MP3 format is the new and upcoming format for recorded music. If your website is about recorded music, the MP3 format is the choice of the future.

ADDING INLINE SOUND
When sound is included in a web page, or as part of a web page, it is called inline sound.

If you plan to use inline sounds in your web applications, be aware that many people find inline sound annoying. Also note that some users might have turned off the inline sound option in their browser.

Our best advice is to include inline sound only in web pages where the user expects to hear the sound. An example of this is a page which opens after the user has clicked on a link to hear a recording.

So if you insist…you just need to use the tag.

<embed src="beatles.mid" />

HYPERLINKING SOUND
If a web page includes a hyperlink to a media file, most browsers will use a “helper application” to play the file.

The following code fragment displays a link to a music file. If a user clicks on the link, the browser will launch a helper application and play the music file.

<a href="nameofyoursong.wav">Play this tune</a>

Play this tune


HOMEWORK | WEEK 12

  1. Take any 12 images. They can be photos, illustrations, your artwork, anything you have. If you do not have anything you can pull images from Google images or create different colored boxes and use those as images. Create two different sizes of these images, one thumbnail image and one full size image. The full size image should not exceed 800×600 pixels. Use the “Save for Web” process to optimize the images, saving them in the file format most appropriate for each image. Save these images to the “images” folder you created in week two.
  2. Create HTML / CSS using the thumbnail size of the images that duplicates the functionality of the thumbnail gallery that we went over in class today. Take the thumbnail gallery one step further – link each thumbnail to its full sized image. Post the files and images to your server and put the link to the gallery as homework for week 12 on your blog.
  3. Embed a video on one of your pages.
  4. Add a background image.
  5. Make one of your images link to another website.
  6. Add at least one image that has rounded corners.
  7. Add ALT, HEIGHT & WIDTH properties to all  your images.
  8. Recreate the image rollover using a file YOU create in Photoshop.
  9. **FOR EXTRA CREDIT: Google HTML/CSS photo gallery tutorial and create a SECOND photo gallery. Here’s a good link to get you started. Here’s another good link. Light Box is also a great image gallery. Use images that you’ve created for a portfolio gallery.

 

 

 

Read More

Week 11 – CSS pt. II

Week 11 – CSS pt. II

Tags Unique to CSS

<div> For large, self contained chunks of content,
Used to create Layers. A DIV will automatically place a line break before and after the beginning and ending tags.

<span> For smaller chunks of content, such as a single sentence within a paragraph
Each style specification must have a property (“font-size”), a value
(“8px”) and be attached to an anchor element (“p”)
p { font-size: 8pt}
Multiple values can be listed in the same style, if they are separated by a ;
p { font-size: 8pt; color=#009900}

Style can be specified on the page by :

 Class
Specifications that can be applied to any tag that can define that specific type of content
(type can be specified by <h1>, <p>, <span>, etc.)
.company {font-size:12pts; color: #CC3300}
<h1>Acme Inc..</h1>
<a href=”www.acme.com”>website<a>

 ID
A unique subset, within a larger specification
#fortune500 {color: #FF9933}
<h1 id=”fortune500″>IBM inc.</h1>

Units can allow the user to specific certain things, such as type font size or they can over rule the users settings:

Absolute: millimeters (mm), centimeters (cm), inches
(in), points (pt), picas (pc)

Relative: capital letter height (em), x-height (ex), pixels
(px) percentage of parent element (%)

Classes and Ids are a way to designate specific elements in your HTML. You can apply either a class or id or both to any element:

<div id="navigation">

<p class ="main" id="introduction">

There is one key difference between a classes and ids:

  • IDs can only be applied to one element per page
  • Classes can be applied to multiple elements per page

When naming classes and ids, it is good practice to name them logically and semantically. The names should not describe the physical attributes of the style you plan to apply to them, but the type of thing that they are in the structure of your page. For example, if you have a unordered list of links that will serve as your navigation, this:

<ul id = "navigation">

is better than this:

<ul id = "top">

The reason for this once again we want to separate the structure from the presentation. Naming your classes and ids logically means that if you radically change the color scheme or layout defined by your style sheet, the structure will still make sense.


LINKED STATES

You can specify a visual change to happen based on the users
interaction with the link:

a:link {color: #FF0000} = how the link text will appear
a:visited {color: #00FF00} = how the link will appear on a page when the user already has already viewed the page the link points to
a:hover {color: #FF00FF} = how the link will appear when the user holds their cursor on top of the link
a:active {color: #0000FF} = how the link will appear for the brief moment when the user clicks on it

NOTE: The link states should be specified in the order above or the changes to the links will not be visibly in all browsers or platforms


UNDERSTANDING THE BOX MODEL

In web designers we need to understand something called “the box model” — this mean we are using block-level elements with margins, padding, height, and width values to construct “boxes” in which to contain our material. It’s basically a series of boxes (and some even nested inside of others).

Last week we talked about margin, padding and border. This week the focus will be more on position.

Download this example to play around with the CSS and HTML. After downloading the example, this is what you should see on your browser without making any changes.

Look at the HTML, the two boxes that fall beneath the heading are two divs that make a column Left and a column Right. In order for these divs not to implicit a linebreak, lets use the float property.


FLOAT

Look at the stylesheet. Scroll down to line 39 and you’ll see we’re going to apply a powerful property to have these two divs push left to the elements that proceeds it. Take out the comment symbols and save the document. Refresh your browser.


CLEAR

Take a look at the HTML again, you’ll see that I have this empty div I classified as “makemeaboxagain”. This is a nice trick to apply in your document if there are some elements overlapping one another. This empty div guarantees that things will slide up against the edges of neighboring elements if a float has been applied. Look at the css.

 

INTRO TO CSS POSITIONING

You read about the various types of CSS positioning, now let’s look at some examples. We’re going to look a page with the same HTML and a number of alternate stylesheets attached. You can read more about alternate stylesheetshere.


Static and Relative POSITIONING

The static and relative position properties stack. Note that static is the default position value of an element, should you fail to apply any other value. If you have three statically positioned elements in your code, they will stack one on top of the next. Look at the example below with three elements, all with a position value of static:

#box_1 { 
position: static;
width: 200px;
height: 200px;
background: #ee3e64;
}

#box_2 { 
position: static;
width: 200px;
height: 200px;
background: #44accf;
}

#box_3 { 
position: static;
width: 200px;
height: 200px;
background: #b7d84b;
}

css positioning - static

This is what your HTML page would look like:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
</head>
<body>
<!– page content goes here inside the body –>

<div id=”box_1″> 
</div>

<div id=”box_2″> 
</div>

<div id=”box_13″> 
</div>

 

</body>
</html>

This is what you style.css page would look like:

#box_1 { 
position: static;
width: 200px;
height: 200px;
background: #ee3e64;
}

#box_2 { 
position: static;
width: 200px;
height: 200px;
background: #44accf;
}

#box_3 { 
position: static;
width: 200px;
height: 200px;
background: #b7d84b;
}

Above is the static value for a simple, single-column layout where each element must sit on top of the next one. You cannot shift those elements around using offset properties such as top, right, bottom, and left. These properties are unavailable to a static element.

Relative Positioning

Relatively positioned elements behave just like statically positioned elements.  In the example below I’ve applied the relative value to the position element:

#box_1 {
position: relative;
width: 200px;
height: 200px;
background: #ee3e64;
}

#box_2 {
position: relative;
width: 200px;
height: 200px;
background: #44accf;
}

#box_3 {
position: relative;
width: 200px;
height: 200px;
background: #b7d84b;
}

Example B proves that relatively positioned elements behave exactly the same way as statically positioned elements. BUT, elements with a relative position value have far greater powers than their static siblings.

When positioning relative, you can adjust a relatively positioned element with offset properties: top, right, bottom, and left. Using the markup from my previous example, let’s add an offset position to #box_2:
#box_2 {
position: relative;
left: 200px;
width: 200px;
height: 200px;
background: #44accf;
}

By just adding the property: left: 200px, you see relative positioning in action. The three blocks are still stacked up but now the blue block (#box_2) is pushed out 200 pixels from the left. See what it looks like below:

The blue block is still in the flow of the document—elements are stacking one on top of the other—but notice the green block (#box_3) on the bottom. It’s sitting underneath the blue block, even though the blue block isn’t directly above it. When you use the offset property to shift a relatively positioned element, it doesn’t affect the element(s) that follow. The green box is still positioned as if the blue box were in its non-offset position.

For the next example, we won’t change any CSS, we’ll adjust our HTML to move #box_2 inside of #box_1:

<div id=”box_1″>
<div id=”box_2″></div>
</div>

 <div id=”box_3″></div>

 Note what I did:

The first example, each div is opened and then it is closed:

<div id=”box_1″> 
</div>

<div id=”box_2″> 
</div>

<div id=”box_3″> 
</div> 

In this example, box_1 is opened, box_2 is opened, then you close box_1 and close box_2, and finally you open div box_3 and then you close the div. 

Below is what it will look like:

Because of the new coordinate system, the blue block measures its offset 200 pixels from the left of the red block (#box_1) instead of the document. This practice is more common with elements set to position: absolute.

POSITION ABSOLUTE

Now lets take a look at the position:absolute

Unlike the static and relative values, an absolutely positioned element is removed from the normal flow. You can put it anywhere and it won’t affect or be affected by any other element in the flow. Think of it as an element with a giant strip of velcro on its back. Just tell it where to stick and it sticks. Exactly like the relative value, absolutely positioned elements respond to offset properties for positioning. You can set an element to top: 100px and left: 200px; and that element will sit exactly 100px from the top and 200px from the left of the document. Look at an example using four elements:

#box_1 { 
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 { 
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: #44accf;
}
#box_3 { 
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background: #b7d84b;
}
#box_4 { 
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: #ebde52;
}

Now you see four boxes, each in a corner of the browser window. Since we set each box’s position value to absolute, we’ve essentially velcroed a box to each corner of our browser window. As you resize the browser, those boxes will stay in their respective corners. If you shrink the browser window so that the boxes overlap, you’ll notice that there is no interaction at all—that’s because they’re out of the document’s normal flow.
The html for the above photo is:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>

</head>
<body>
<!– page content goes here inside the body –>
<div id=”box_1″> 
</div>

<div id=”box_2″> 
</div>

<div id=”box_3″> 
</div>

<div id=”box_4″> 
</div>
</body>
</html>

 The CSS is

#box_1 { 
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 { 
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: #44accf;
}
#box_3 { 
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background: #b7d84b;
}
#box_4 { 
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: #ebde52;
}

——–

Just like relative elements, absolute elements create a new coordinate system for child elements. Use two or all four offset properties, and you can stretch an element without defining any width or height—it’s bound only by its parent element or the document itself. Look at the following code:
#box_a { 
position: absolute; 
top: 10px;
right: 10px;
bottom: 10px;
left: 10px; 
background: red; 
}


#box_b { 
position: absolute; 
top: 20px;
right: 20px; 
bottom: 20px; 
left: 20px; 
background: white;
}

What you get is a WHITE box with a RED border. See below:

Here’s another example where you create a two-column layout that fills the entire height of the document.

Here is the CSS:
#box_1 { 
position: absolute;
top: 0;
right: 20%; 
bottom: 0;
left: 0;
background: #ee3e64;
}

#box_2 { 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 80%; 
background: #b7d84b;
}

Here is the HTML that goes in between your BODY tag:

<div id=”box_1″> 
</div>

<div id=”box_2″> 
</div>

This is what you get:

Now try the following CSS code:

#box_1 { 
width: 200px; 
height: 200px; 
background: #ee3e64; 
#box_2 { 
position: absolute; 
left: 100px; 
width: 200px; 
height: 200px; 
background: #44accf; 
}
This is what you get:

Look at the blue block (#box_2). I used only one offset, left: 100px;. This allows the #box_2 element to maintain its top edge and still shift 100 pixels to the left. If I applied a second offset to the top, we would see that our blue block (#box_2) is pulled to the top of the document.

CSS Positioning Tutorial

http://www.barelyfitz.com/screencast/html-training/css/positioning/


BROWSER TESTING

The quirks of the box model are just the tip of the iceberg as far as differences in how the browsers interpret your CSS and HTML. So its important that you test your pages in all the major browsers to ensure a consistent user experience.

For the purposes of this class, for all work that you do from this point on, I will require that your pages have a consistent appearance across the following browsers:

  • Safari (Mac)
  • Firefox (Mac and PC)
  • Internet Explorer 6 and 7 (PC)

In an ideal situation, you will be able to develop and test with access to both a Mac and PC. However, since life is rarely ideal, fortunately there is Browsershots, a free screen grabbing service that will capture screenshots of any URL you feed in for selected browsers.


HOMEWORK | WEEK 11

  1. Using the positioning models we learned today, create pages with layouts as close to the following examples as possible. Use only HTML and CSS to create these layouts (no images!)
  2. Use the positioning scheme (or a combination) of your choice to layout your resume, artist statement and contact page. Create additional divs or spans, or apply classes and ids, as necessary.
  3. Upload, validate, and browser test all your new HTML and CSS before class next week
Read More

Week 10 – HTML pt. 2 CSS pt. 1

Week 10 – HTML pt. 2 CSS pt. 1

 Week 10 | Overview

  • Commenting your code
  • Color
  • Fonts
  • Metadata

CSS

  • Intro to Cascading Style Sheets
    • What is CSS?
    • The Box Model
    • CSS Syntax
    • Classes and IDs
    • Three ways to use style sheets
    • Manipulating Basic CSS Properties

COMMENTING YOUR CODE

You can place a comment tag in your HTML to put a note into the code that will not be rendered by the browser. This is especially handy in a long and complex page. A comment is formatted as follows:

<!-- This is a comment -->

Everything between the <!– and –> tags will be hidden from the browser, but visible when you view the source.


COLOR

All color in Web pages, whether it is in text, background color, or other interface elements, is expressed in the HTML via hexidecimal codes. These codes consist of a # followed by 6 letters and numbers. For example, the code for white is #FFFFFF.

Below are two excellent references for the hex codes for the Web-safe palette.The Web-safe palette is a collection of colors that have been determined to be consistently rendered across boundaries.

Webmonkey Color Code Chart
Visibone Webmaster’s Palette


FONTS

Because a Web browser can only utilize those fonts installed on the end-user’s machine, there are a limited number of fonts reliably available across platforms. Here’s an up-to-date list of them:

Web Safe Fonts for Mac & PC

You should only use these fonts, or generic font designations, in your style sheets.

Here is a great resource for viewing how Web fonts will look in a browswer:

Typetester


META DATA

Meta data is located within the <head> of a web page. Your meta data is basically information that you insert that explains what this page/site is all about. Copy and past the code text below into your head:

  1. Keywords:
    Information inside a meta element describes the document’s keywords.
    The Code Looks Like this:
    <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
  2. Description:
    Information inside a meta element describes the document.
    The Code Looks Like this:
    <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"/>

WHAT IS CSS?

  • Cascading Style Sheets (CSS) are a standard developed to allow designers control over presentational elements of a Web page and effectively separate content from presentation.
  • A style is a group of attributes that are called by a single name.
  • A style sheet is a group of styles.
  • The cascade part of CSS means that more than one stylesheet can be attached to a document, and all of them can influence the presentation. It also means that different applications of CSS can be applied to a page in order of precedence: inline, embedded, external and default.


THE CSS BOX MODEL, TYPES OF ELEMENTS

boxmodel

The three types of HTML elements to apply styles to:

An important concept to understand is that there are basically three types of HTML tags: block-level elements, inline elements, and replaced tags.

  1. Think of block-level elements as boxes that have a line break before and after. Block-level elements are the ones you will spend most of your time applying style rules to, or manipulating with scripting. They include h1-h6, p, div, ul, ol, blockquote.
  2. Inline elements on the other hand, don’t have line breaks before and after. Inline elements are used in the middle of another element, and include a, b, strong, italic, em, span
  3. The third kind of HTML tag is called a replaced tag. What it means is simply that these elements have a set width and height. The most-used replaced tag is the <img> tag, which you must specify a height and width for.

If an element is not explicitly defined, it is known as an anonymous element.You will not be able to style this element directly.

Here’s another example of the CSS box model. It’s interactive so it may be easier for you to understand.


CSS SYNTAX

csssyntax

The CSS syntax is a little different from the tag and attribute format of HTML. A CSS style is made up of a selector, which is the HTML element or class name you wish to define rules for, and a set of properties and values. A property and its value are separated by a colon (:). You can define multiple properties for a style, separating them with a semi-colon(;). Property/value sets are enclosed in brackets{}.

For example, if you wanted to redefine all HTML in your <p> tags to look like this, then your style would look like this:

p {
color: #00CC00;
font-size: 13px;
font-family: "Courier New", Courier, monospace;
font-weight: bold; text-decoration:none;
}

The order of properties doesn’t matter, as long as you separate them with a semi-colon. Property values that have multiple words are surrounded by double quotes: “Courier New”.

You can apply the same style to multiple selectors by grouping them:

h1, h2, h3, h4 {

color: #00CC00
}

There is a full CSS reference and extensive code examples at:

W3 Schools CSS Tutorial

also at: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Sizing in CSS

There are a number of different measurement schemas within xHTML / CSS. Which one to use depends on context, and you can mix and match them.

  • px – number of pixels, relative to the screen size. This is the most consistent across machines, browsers, monitors
  • % – percentage of the total width or height
  • em – size relative to the em size of the base font

We will go into when it is appropriate to use the various schemes in later weeks. For now, use the px units in your stylesheets.



CLASSES AND IDS

Classes and Ids are a way to designate specific elements in your HTML. You can apply either a class or id or both to any element:

<div id="navigation">

<p>

There is one key difference between a classes and ids:

  • IDs can only be applied to one element per page
  • Classes can be applied to multiple elements per page

When naming classes and ids, it is good practice to name them logically and semantically. The names should not describe the physical attributes of the style you plan to apply to them, but the type of thing that they are in the structure of your page. For example, if you have a unordered list of links that will serve as your navigation, this:

<ul id = "navigation">

is better than this:

<ul id = "top">

The reason for this once again we want to separate the structure from the presentation. Naming your classes and ids logically means that if you radically change the color scheme or layout defined by your style sheet, the structure will still make sense.


3 WAYS TO USE STYLE SHEETS

***NOTE: IN ORDER FOR YOU HTML PAGES TO ACCEPT THE STYLE.CSS FILE, YOU MUST INCLUDE THE FOLLOWING CODE IN THE HEAD OF YOUR HTML PAGE:
<link rel=”stylesheet” type=”text/css” href=”style.css” />

There are three methods of accessing style sheets from your HTML:

  1. Inline as part of an HTML tag.
  2. Embedded in the <head> section of your page between <style></style> tags
  3. In an external document that is linked to the page

Here is an example of a page that uses inline and embedded styles:

We are going to focus primarily on using external style sheets. The are a couple of advantages to this. First, you can apply the same styles to some or all pages of your site. Second, you can make a change on the external style sheet and all the pages it is linked to will change. And last, with a simple change to your code, you can switch style sheets and completely alter the look of your page.

Style sheets work in 4.x or later browsers (but still not consistently) such as Navigator 4.5 or 6 and IE 4 or 5. Most earlier browsers ignore them.

A good place to see style sheets in action, and to really understand how powerful they are, is the CSS Zen Garden.


CREATING AND LINKING TO YOUR OWN EXTERNAL STYLE SHEET

An external style sheet is a plain text document containing all the style declarations you wish to apply to the linked pages. It does not have the structural tags (html, head, body) that your HTML documents have.
Once you have created your style sheet, you can associate it with your page using the link tag in your HTML, placed between the <head> tags:

<link href="my_style_sheet.css" rel="stylesheet" type="text/css"/>


MANIPULATING BASIC CSS PROPERTIES

BASIC CSS REVIEW AND CSS PART II:

RULES AND SELECTORS

To style elements in a document, you apply rules to selectors.  A “selector” is a way of referring to some specific element or group of elements on a page. If you want to apply a style to all paragraphs, then the <p> (paragraph) tag is our “selector” – it’s what we’re “selecting” to style. Selectors can either be standard HTML tags, or custom elements you define.

“rule” is a set of properties that get applied to the selected element or elements. A rule can be as simple as a single line declaring the background color of the element, or a complex grouping of properties that work together to achieve an effect.

Let’s walk through styling a single paragraph. First, attach a style to an element on the page, and create rules as name:value pairs, separated by semi-colons. (You’re writing this all in your HTML page)

This single paragraph, the paragraph that you applied the color “red” to, will look different from every other paragraph on the page. The text will be red.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo …

Now, delete the “<p style=”color:red;> from your HTML page. Go into Text Wrangler and create a new page and call it style.css.  This will be your EXTERNAL stylesheet. See the image below.

In the new style.css document you’ve created, write in the following:

p {

        color:red;
    }

Note: You must put this link inside the header tags. <link rel=”stylesheet” type=”text/css” href=”style.css” /> You can add as many rules as you want. See a few more below:

 p {

        color:black;
        font-size:12px;
        font-family:Verdana;
    }

NO style tags are to be used inside your HTML document. Everything will be placed in an external stylesheet called style.css.


CUSTOM SELECTORS

In the example above, every <p> tag will have ALL the attributes you list. This is a page-wide rule that is applied to all paragraphs on the page. That’s fine in some circumstances  but what if you want to apply a specific attribute to a specific paragraph? CSS uses the “class” and “id” constructs to make this very eacy. By attaching a “class” name to an HTML element, and writing a corresponding rule for that class, you can get as specific as you like. Go back to the style rules above and modify them  to look like this:

p {

color:red;

font-size:10px;

font-family:Arial;

}

.mango {

color:blue;

background-color:gold;

border:3px solid black;

padding 15px;

}

Now, modify the opening <p> tag of your paragraphs to look like this:

1 <p class="mango">Lorem ipsum ... </p>

That specific single paragraph on your page will have the additional stylistic information taken from the style.css doc from .alert. That specific paragraph will now have the font color: red, font-size:10px, font-family:arial and everything listed under .alert. If you add <p> to another <p> tag on your page, that <p> tag will also have the same attributes. If you want another <p> on the page to have different and specifics attributes, simply name it something different. Example: <p> and write the specific .monkey attributes in your style.css page.


CLASS VS. ID

There are two constructs for custom selectors — “class” and “id.” Class can be applied as many times as you like on a page. IDs work almost the same way, but apply to just one element on a page. When creating rules for IDs, simply prepend the selector name with “#” rather than “.”  Example:

#footer {
color:#ff0000;
background-color:red;
border:2px solid black;
padding:20px;
}

Since you will probably only ever have one footer on a page, it makes sense to use this as an ID rather than as a class. You would invoke this ruleset in your document like this:

1
<p id="footer">Lorem ipsum dolor sit ... irure dolor in reprehenderit in </p>

REFINING SELECTORS

Above we created rules that apply either to a single HTML tag, or to anything that matches a custom selector name. But we have a lot more control than that. You can  broaden or narrow the “scope” of elements your rulesets apply to.

 You can easily apply a <p> style to both a paragraph and lists or a block quote or just about anything else. You could just duplicate the rule, but it would give you more work because any time you modified one, you’d have to modify all the rest as well. CSS easily solves this problem by allowing you list a set of selectors for a given rule.  See below:

p, ol, ul, dd, blockquote {
color:#00ff00;
font-size:14px;
font-family:Verdana;
}

Now the rules in the set will apply equally to paragraphs, ordered, unordered and definition lists, and to blockquotes. If you want to set basic rules that will apply to your entire document, there’s an easier way — just use the  <body> tag as your selector:

body {
color:#00ff00;
font-size:14px;
font-family:Verdana;
}

Since all visible elements in a document (elements that show up on your website) fall inside the opening and closing <body> tags, the rules above will apply to everything on the page. CSS favors the specific over the general so you can easily override any rule on a per-selector basis. For example:

body {
color:#000000;
font-size:14px;
font-family:Verdana;

}

blockquote {
color:#ffffff;}

Even though you’ve defined a color for the entire document within you <body> tage, and your block quotes fall inside that document, blockquotes will be rendered with a white font (#ffffff stands for white). The cascade says that even though everything on the page is black by default (you listed that in the <body> tag), blockquotes are treated like an exception.

Narrowing the Scope of Rulesets

We can also create the opposite situation. Above, I showed you the class .mango, which applied to anything on the page with class="mango". What if  you want to be more specific than that or if  you only want those rules to apply to paragraphs in that specific class, but not to blockquotes in that class. This is done like this:

p.mango {
color:darkred;
background-color:blue;
border:2px solid black;
padding:10px;
}
The rule above would not be invoked for standard paragraphs, nor would it be invoked for blockquotes with a class of “mango.” It would only be invoked for paragraphs with a class of “mango.” This “narrowing” approach can be used for IDs as well as classes:

p#mango {
color:darkred;
background-color:blue;
border:2px solid black;
padding:10px;
}

The rule above would not be invoked for standard paragraphs, nor would it be invoked for blockquotes with a class of “mango.” It would only be invoked for paragraphs with a class of “mango”. This “narrowing” approach can be used for IDs as well as classes:

p#mango{
color:darkred;
background-color:bisque;
border:2px solid gray;
padding:10px;

}


FONTS AND TEXT

You can  set the font face (font-family), the font size, font style (such as italic) and the font weight (such as bold):

p {
font-family:”Arial”,Verdana;Georgia,Serif;
font-size:10pt;
font-weight:bold;
font-style:underline;
}

Font sizes can be set in pixels, points, ems, or relative values.

From within CSS you can control how wide your letters and lines are spaced, set your text color, align text right, left or center, and even change the case of text.

Setting text color and letter spacing:

Letter spacing can be set in points, pixels, or ems. “Em” is a typesetter’s term, referring to the width of one character. It is recommend to use ems when setting text sizes and widths, because it flexes automatically with the user’s current screen resolution and magnification.

Line spacing is not set in ems – it’s a simple decimal value representing a factor of the current line height. In the example below, “1.8” means “spacing between lines should be 1.8 times whatever the current height of a line of text is.”

p {
color:#166A3F;
font-weight:bold;
letter-spacing: 0.3em;
line-height: 1.8;
}

If you wanted to make the text uppercase, just add the following line : text-transform: uppercase;  If you wanted to change the text alignment, just add the following line: text-align: center|left|right; (You would need to choose either center, left or right). You could also add: text-align:justify; if you wanted the text to justify into a block.


BORDERS 

You can put a border around almost anything on your page including a single character, an image or a section of a page. Borders can be of any thickness, any color, and can be solid, dotted, or dashed. If you use border: by itself, the border will go around all four sides of the element. Or you can use border-top:, border-left: and so on to control each side of the border independently. You can can consolidate all of the attributes of the border into a single command by separating the attributes with spaces.

Example:

p {
border:1px solid #4c97ff;
}

By not specifying a side, you get the same 1px consistent border on all four sides of an element. If you want to control each specific side of a border, use: (change the colors to what ever you like)
p {
border-top:3px solid #595128;
border-right:5px solid #3d3600;
border-left:2px dotted #5bbe00;
border-bottom:5px dashed #005062; 
}

Using four different colors on a border would be pretty ugly so try his. A 1px  border around a paragraph would look like this:


BACKGROUNDS

You can set the background of any element with your choice of either a solid color or a tiled (repeating) image.

Example:

p {
background-color:#00ff00;
}

If you want to use a tiled image as a background, just specify its relative or absolute URL:

p {
background-image: url(‘http://a3.twimg.com/profile_images/454374541/iTunesU_Button.jpg’)
}

By default, a background image will tile repeatedly in all directions, to fill up the space it’s assigned to. You can tell your background image to only repeat along the x or y axis. In the next example, we use both a background color and a background image. We tell the background image to only repeat vertically. To prevent the text from sitting on top of the tiled image, we add 120px of left padding.

p {
background-image: url(‘http://a3.twimg.com/profile_images/454374541/iTunesU_Button.jpg’);
background-repeat: repeat-y;
background-color:#D33333;
padding:10px;
padding-left:120px;
border:1px solid #899999;
}


MARGINS AND PADDING

Margins refer to the area around, or outside of an element. Padding, refers to the area between the edges of a box and what lives inside that box. An easy way to remember which is which is to think of mailing a breakable object  – you fill the empty space in the box with foam peanuts to protect the item. Those foam peanuts are your padding. The margin would then be the space between your box and the next box in the truck. Just remember: Padding is inside the box, margins are outside the box.

In CSS, you’ll use padding to give an element some breathing room within the space it’s in, as we did with the last example in the Backgrounds section. You typically use margins to cause a box or element to be offset from adjacent elements. The syntax for working with padding and margins is very similar.

Padding and margins may just seem decorative right now, but they’ll become critical when we start getting into CSS page layout, so make sure you understand them.

Example:

p {
padding:25px;
border:4px solid blue;
}

Would give you below:

Just like borders, padding can be controlled for the whole box, as above, or per-side:
p {
padding-top:0px; 
padding-right:25px; 
padding-bottom:45px;
padding-left:15px; 
border:4px solid blue;
}

When setting padding values separately for different sides of a box, you can use this shorthand, which achieves exactly the same result as the previous example:

p {

padding:0px 25px 45px 15px;
border:4px solid blue;
}

MARGINS

To illustrate how margins work, I’ll show you how one element (box) relates to another. For this example, we’ll be putting a sample paragraph inside of an element called a “div”. A div is an arbitrary box used to contain other things. I’ll put a border on the div so you can see it, then put a paragraph with its own border inside that div, so you can see what the margin attributes do to it.

div {
padding:0px;
margin:0px;
border:1px solid blue;
background-color:#AFEEBD;
}
p {
padding:10px;
margin:10px;
border:1px solid blue;
background-color:#ACCFDB;

}

The blue space above represents the paragraph, while the green space represents the margin between that paragraph and it’s containing box. As with padding, we can control margin depths per-side, rather than globally.

LISTS AND CSS

An ordered or unordered list can be much more than a simple set of bullet points – in CSS, lists are often used to create navigation elements such as horizontal or vertical menus. Let’s start with options for simple lists.

For unordered lists, you can select whether the bullet style should be circular, square, or none:

ul {
list-style-type: square;
}
apple
Is a
List
Try changing “square” to “circle” or “disc” for other effects. You can also use an image in place of your bullets by specifying its URL:

ul {
list-style-image: url(http://www.w3schools.com/css/arrow.gif);
}
This
Is a
List
Ordered lists can have any combination of Roman numerals, decimal, alphabetic characters and more. A nice trick is to nest lists within lists, then use the CSS nested selector syntax we learned earlier to style different levels of your list differently, like this:

ol {
list-style-type: upper-roman;
}

ol ol {
list-style-type: decimal;
}

ol ol ol {
list-style-type: lower-alpha;
}
Person
Place
Region
Country
United States
Canada
Mexico
State
Thing
In the example here, ordered lists “ol” are told to use “upper-roman” as the list-style-type, unless it’s an ordered list inside of an ordered list, in which case the list-style-type is “decimal”… unless it’s a triply nested ordered list, in which case the list-style-type is “lower-alpha.” This technique is the key to building CSS based flyout navigation menus.

LISTS AS MENUS IN CSS

By default, list items are “block-level elements,” which means each one gets a line break above and below itself. To make a list appear horizontally, we need to override the default block behavior and use CSS to tell list items that they’re “inline” elements instead. In this example, we’ve also added background-color and padding to our list items, to make them appear like real menu items. Here is the simple HTML and CSS to create a basic list menu.

li {
display: inline;
list-style-type: none;
background-color:#425899;
color:white;
padding:5px;
}

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
Which seen by the browser it looks like this:

To make the experience more intuitive, we want to add some rollover behavior, so that the list items change color when the mouse rolls over them. To accomplish this, we’ll first make our list items into links (in the HTML). Then we’ll again use the CSS nested selector syntax to detect a linked item inside of a list item. Finally, we’ll use the anchor tag’s :hover pseudo-property to change appearance when a list item is in a certain state – namely, when the mouse is hovering over it.

li {
display: inline;
list-style-type: none;
}

li a {
background-color: #60996C;
color:white;
padding:5px;
text-decoration:none; 
}

li a:hover { 
/* This rule is only in effect when mouse is hovering */
background-color: #567499;
}

<ul>
<li><a href=”#”>Item one</a></li>
<li><a href=”#”>Item two</a></li>
<li><a href=”#”>Item three</a></li>
<li><a href=”#”>Item four</a></li>
<li><a href=”#”>Item five</a></li>
</ul>

See below. Roll mouse over list items to see the hover state in effect.

If you want to learn more, see the resources below.

HOMEWORK | WEEK 10

  1. Recommended reading: Read Chapter 1 and Chapter 2 of CSS Mastery.
  2. If you have any outstanding validation errors in your bio and resume HTML, resolve them. Also, if you receive any comments from me today in class, or via email in the following week, incorporate them into your pages.
  3. Using all the properties we have covered today, create a single, external stylesheet and apply it to both your bio and your resume pages.
  4. Like each of your classmates pages on Facebook.
  5. Friend each of your classmates on LinkedIn and Twitter.
  6. Post the new work and link it to your homework page.
  7. Go back into your index.html, artist.html, resume.html and contact.html pages and add div’s.
  8. Create a style.css page in Text Wrangler and link it to your index.html, artist.html, resume.html and contact.html pages. Add the div names in your css page and STYLE them including font, color, size and any other attributes you want to use.
  9. Watch the “Box model with css” video on this page again. Create a new page and call it boxmodel.html. Make sure you update you navigation list in your other pages to add this new page. In your boxmodel.html page, create a page with the black, green red and blue boxes that looks exactly like what is in the video.
  10. Using CSS, create a navigational menu and add link states
  11. Using CSS, add padding, margin, background color, background image and background repeat images
  12. Add p class and p ids to your paragraphs
  13. Add dotted and solid borders
  14. Using CSS, add fonts and text
  15. Add margin and padding
  16. Go through each lesson that was learned today and add it all to your pages and external style.css
Read More
Page 1 of 3123