everything about web

Embedding font using Cufón

jamie — Tue, 17 Apr 2012 00:39:37 +0000

Cufón

Cufón aims to become a worthy alternative to sIFR, (sIFR, or Scalable Inman Flash Replacement, is a technology that allows you to replace text elements on screen with Flash equivalents), which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:

No plug-ins required – it can only use features natively supported by the client
Compatibility – it has to work on every major browser on the market
Ease of use – no or near-zero configuration needed for standard use cases
Speed – it has to be fast, even for sufficiently large amounts of text
And now, after nearly a year of planning and research we believe that these requirements have been met.

So, how does it work?

Cufón consists of a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.

The following browsers are supported:

Internet Explorer 6, 7 and 8
Internet Explorer 9 beta (as of 1.09i)
Mozilla Firefox 1.5+
Safari 3+
Opera 9.5+ (9.01+ as of 1.10)
Google Chrome 1.0+
iOS 2.0+
Opera Mini (to a certain degree)

Step 1 – Get cufón!

It is highly recommended that you always use the YUI-compressed version of cufón, available from the cufón website.
http://cufon.shoqolate.com/generate/

Updating to a newer version? Just replace your old cufon-yui.js with the new one and you’re good to go. Fonts need not be converted again.

Should you experience problems or if you just want to poke around a little, you may also use the uncompressed version, available from GitHub.

Step 2 – Generate a font

You may use the font generator at our website or run a copy of your own. If you plan on going for the latter option you’re probably clever enough to figure out how to get it running – the source is available from GitHub.

The name of the resulting file will include the name of the font and the weight of the font (as a number – 400 is equivalent to “normal” and 600 means “bold”). So, for example, the bold version of Bitstream Vera Sans would result in a file called Bitstream_Vera_Sans_600.font.js. The name of the file doesn’t actually matter at all, but it makes it easier for you to identify your fonts.

Using the generator should be pretty straightforward.

Step 3 – Replacing text












This text will be shown in Vegur.

For the purposes of this example you may ignore everything that is not contained by .

So what exactly happens here?

First, we include the YUI compressed version of cufón that you should always use.

Then we include the font that we converted in Step 2. Nothing special here, you include it just like you would any other JavaScript file. So far so good.

Then we get to the magic part. We want to replace all

elements in the document. And that’s exactly what the tell cufón to do, with Cufon.replace(‘h1′). Nothing else is needed, cufón will use the CSS rules associated with the elements and determine what to do. You should not place Cufon.replace inside $(document).ready or similar functionality because it will make Step 4 ineffective.

In order to avoid unnecessary duplication cufón does not come bundled with a selector engine, which means that by default you’ll only be able to use tag names (such as h1) as selectors. However, cufón detects quite a few popular JavaScript frameworks (such as jQuery, MooTools, Dojo and Prototype) automatically, so if you’re using one you’ll only need to include it before cufón and things like Cufon.replace(‘#content > h1:first-child’) and Cufon.replace(‘#nav a’) will work just fine.

Step 4 – Making Internet Explorer behave

Unfortunately one problem remains with Internet Explorer. In most cases, there is a short but visible delay before the text is replaced. You can avoid this issue by inserting the following snippet right before the closing tag (or before any external scripts such as Google Analytics):

And the delay is gone. For a more in-depth example, see API.

Note: This step will hopefully become obsolete in the future.

Using multiple fonts

To use multiple fonts you only need to specify which font you want to use and you’re set:













This text will be shown in Vegur.
This text will be shown in Myriad Pro.

If not specified, cufón will use the font that was loaded last (in this case it would be Myriad Pro), which is why there was no need to specify the font in the first example.

Notes

For simplicity, all examples use the HTML4 strict doctype instead of an XHTML doctype. You may use any doctype you want but a strict (X)HTML doctype will always yield best results. Quirks mode isn’t supported but might also work in some cases.

All cufón-enabled pages must be UTF-8 encoded. Compatible encodings, such as US-ASCII, are also fine

Above information found here: http://wiki.github.com/sorccu/cufon/usage

Navigation Basics

jamie — Sun, 01 Apr 2012 21:56:08 +0000

Navigation

Navigation design is very important because all web sites need navigation, and if you can design successful navigation, your site will make for a good user-experience. Navigation design is one of the main distinctions between print and web design. Good web designers must know how to design successful navigational interfaces for the web.

So how do you start when thinking about designing a navigational system?

There are three basic questions a well-designed navigational system must answer.
Navigation should answer these questions:

1) Where am I? (Present)
2) Where else can I go? (Future)
3) Where have I been? (Past)

A good way to remember these 3 important questions is to think about the importance of answering where the user is in the Present, Future, and Past.

Also of importance are the additional questions below:

What’s here?
How do I go forward?
How do I get back?

In addition to answering the basic questions outlined above, a well-designed navigational system must also serve the goals of the site. Examples of specific navigation challenges based on the goals of the site could be things like:

How do I place an order?
How do I search the site?
How do I contact customer service?
How do donate money to this organization?

The more versatile the navigation, the more successful it will be because it will serve a variety of users.

As a designer you must ask yourself: What does the user who visits the site want?

Examples of what a user may want:
To find information
To publish something
To purchase something
To interact with someone
To read what someone else thinks about something

As a designer you must ask yourself: What does stakeholder (client) of the site want? (And of course, you should ask a lot of questions so you understand what your client wants for the site.

Examples of what a client (stakeholder) may want:
To share information
To make money
To get feedback
To teach something

It’s important to explore these questions before starting to design the navigation for your site.

Another way to think about navigation is the discussion from our readings for this week

Wayfinding has four core components:

Orientation: Where am I am right now?
Route decisions: Can I find the way to where I want to go?
Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?
Closure: Can I recognize that I have arrived in the right place?

Consistency is the golden rule of interface design and wayfinding, but there is a paradox at the heart of consistency: if everything looks the same, there are no edges. How can you tell where you are or when you have moved from one space to another? A well-designed site navigation system is built on a consistent page grid, terminology, and navigation links, but it also incorporates the visual flexibility to create identifiable regions and edges within the larger space.

Navigation design “rules”

The following are general rules to follow when designing navigation in a web site. They are only rules, and as the saying goes, rules are made to be broken– just have a good reason to break them!

Consistency

People are very habitual, and it’s therefore very important to keep navigational elements the same throughout a web site. This is generally referred to as “persistent navigation,” keeping your navigation consistent from page to page. Navigation located at the footer of a web page is common and can act as persistent navigation for a site.

You want people to concentrate on your content, and they won’t if they have to figure out a different navigation system on every page. This is true for:

Placement on the page. Keep similar functions in the same place on the page. E.g. if you have a “home page” link on all your pages, put that link in the same place on every page.

Visual design. Use consistent names, icons, or other visual cues for navigation throughout the site. E.g. the icon for the “home page” link should be the same everywhere.

Note: Some people incorrectly create navigation systems that drop the current page link from the navigation bar. This may seem “efficient” since there is no reason to have a link to the page you are already on. But this approach violates the principle of consistency, since the links in the navigation bar would be in a different place on every page. It also violates the rule below for indicating the current page, because a better approach is to highlight the current page in the navigation bar (while making the link inactive).

7 +/- 2 rule

In general, people have a hard time keeping track of more than 7 items (plus or minus 2) at a time. This means that 7 is a good number of navigational links but you can have anywhere between 5-9 navigational links on a page, people may get confused or have a hard time understanding the navigation. On the other hand, you often want to provide more than 7 links, which leads to:

Group Navigation

If you have a lot of links on a page, try organizing them into related sets of 7+-2. For example, a food site could group links to fruits, vegetables, herbs, fish, poultry, and red meats together, while grouping links to nutrition info, health tips, recipes, meal planning, and cutlery in a different location on the page. Some ways to group navigational elements are:

Proximity. Place similar navigational elements together on the page, separated from other groups.
Style. Give each group of navigational elements its own visual design.

Keep it simple

Don’t make people work hard to get where they want to go. The harder it is, the less people will use the navigation. Some things to avoid:

Excessive scrolling. Don’t make users scroll all over the page to get to links. Keep in mind the typical size of your audience’s screen. If the user needs to scroll, make them scroll only in one direction–vertical or horizontal.
Excessive hierarchy. Keep the number of levels of hierarchy to a minimum. Try to make any page on the site available within 2 clicks at a maximum.

Where are we?

Always identify the name or function of the current page. This can be done by highlighting the navigation to indicate the current page. The name of the page should also be incorporated into the design layout. In a typical page, the user should be able to see where they are by the navigation bar and by a page heading.

If the site is complex, it’s important to indicate where the current page is in relation to the rest of the site. If possible, combine your navigation with a visual layout so as to indicate the current location. This is called the trail of bread crumbs or breadcrumbing. E.g. you could have a navigation bar that shows the path to the page such as: “home>products>vacuum cleaners”, where both “home” and “products” are active links to their respective pages in the hierarchy. Not only does this indicate to the user where they are, but it allows them to skip to any level of the hierarchy, eliminating the need to see the intermediate pages.

Next versus numbered pages. When the user can navigate to additional pages you generally want to use numbered pages versus a “next” button. Or both as is often the case on such sites as the New York Times.

Avoid “Hub and spokes.” When you can’t see the all the navigation or categories again without going back to the main page, this is often referred to as “Hub and spokes” The user must return to the “hub” to find other choices. As a designer you want to avoid this and develop a more consistent navigation scheme.

Multiple Navigation

There is no single way that users will navigate through the site. People have different goals, search methodologies, attentiveness, previous knowledge, and ways of looking at the content of the site. Even gender can affect navigation.

Provide ways for people to traverse across the hierarchy to short-circuit the formal organization. For example, if there is a contact page on a site, it’s useful to have a link to it on every page. This way, the user can navigate across directly to the contact page, OR navigate up to home and then down to the contact page.
Sequential vs. directed. Think of users as if they are finding their way within the content. This way-finding sometimes involves users who want to be lead through the information, and this involves a sequential organization (e.g. start here, go here next). Other times, the user will be looking for specific content, and they need a logical and categorical system that enables them to find what they need. Try to provide navigation that satifies both, or provide multiple navigation systems
Search vs. grazing. Sometimes people will be searching for specific information, other times they will graze and meander on the site until the find something interesting. Your navigation should accommodate both techniques, and again, sometimes more than one navigation system is needed.
Draw people to the content with different techniques: pull quotes, side bars, contextual links, short summaries or outlines. Use links to turn these into alternate navigation systems.

Hide versus show sub-nav

Use sub-headings as part of the primary navigation
Rollovers or dropdown menus to reveal sub-navigation

Depending on the amount of content and number of subpages underneath the main sections of the web site, the navigation design should reveal the subnavigation in some way.

Different types of navigational graphics and indicators
Here are some of the graphics and indicators a designer can use to create navigation. Some of the options are:

CSS Rollover
Dropdown Menu
Breadcrumbing
Image maps

Other Issues that impact the way you design navigation

Site goals: The goals of the site will greatly affect design of the site and the navigational system. An e-commerce site will have a different type of navigation than a site for a non-profit institution.
Information Architecture: You wouldn’t build a house without plans, you cannot build a website without them either. And until you have the plan (commonly referred to as the “sitemap”) you cannot begin designing your site. The sitemap functions as the “blueprint” for the structure of your site.
Design comps: Developing a “look and feel” requires creating a design comp for how your site is going to look. Creating the look and feel first will be important and will influence the design of your navigation.
Accessibility issues: Every website should have a plan on how to be accessible to as many people as possible. These accessibility issues with also impact the design of your site and your navigation.
Usability issues: After you have designed the navigation you’ll need to test it to see how successfully it meets the goals of the site and whether the site and the navigation what is commonly called “user friendly.”

Interface Design Conventions

Figure 4.17 — A canonical page layout. Not every page includes every element shown here.

Code for HTML5/CSS Layout

jamie — Thu, 08 Mar 2012 22:02:29 +0000

HTML 5/CSS Layout

Replacing HTML 4 (top) with HTML 5 (bottom)

Replacing this:

HTML 5 example




     
     A sample HTML5 document
     

  
      
         Sample document
      

      
          
          Subheading
          This is some of the content of the document.
          

          
          Subheading 2
          This is some more content, in a different section of the document.
          

      

      
     Chris Mills © 2009

Nothing has changed that radically—the elements are a bit different, but they reflect common semantics that you find on many websites that developers tend to create using

elements, for example

, which is replaced with

in HTML5. You’ll also notice that the DOCTYPE is much simpler than the ones you saw earlier.

Try it yourself!
You can start experimenting with these new elements already, even though browsers don’t yet officially support them. All you have to do is write a rule in your CSS to make them all display as block elements. Try this out!

For HTML 5 to work on all browsers, you must add the following property to your CSS file.

article, section, aside, hgroup, nav, header, footer, figure, figcaption
{ display: block;
}

For HTML 5 to work with IE, you need to add this to the script below to the of your HTML file.

Intermediate CSS Layout – Apple iPod

jamie — Thu, 08 Mar 2012 07:07:15 +0000

Column CSS Layout with HTML5 (Apple iPod)

Basic HTML4: Three Column Layout

Basic HTML5: Three Column Layout

Basic CSS3: Three Column Layout

/* ----- [ HTML 5 Element Display ] ----- */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}

/* ----- [ General Elements ] ----- */

* { margin:0;
   padding:0:
}

body {
    font-size: 62.5%;
}

img {
    border: none;
}

#wrapper {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    background-color: #f5f6f7;
}

header {
    width:980px;

}

#left_side {
    width:175px;
    float:left;
    margin-left: 5px;
}

#content  {
    width:596px;
    float:left;
    margin-bottom: 15px;
    margin-right: 10px;
    margin-left: 10px;
}

#right_side{
    width:175px;
    float:right;
    margin-right: 5px;
}

footer {
    clear:both;
    width: 980px;
    background-color: #666;
}

/* ----- [ Navigational menu ] ----- */

nav {
 width: 980px;
 height: 35px;
}

CSS: Add below code to CSS to make it compatible across browsers

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}

Script: Add below script inside HTML head tag to make page compatible with Internet Explorer

Rounded corners are created adding the following code in your CSS

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #d8d9da;

HTML5: Three Column Layout

Here’s how to start:

Determine Layout: http://markup.io/v/htgyy7t3y0ek
Know where you’re going to get your “starter code.”
Create your file structure
Create your index.html
Create your style.css
Attach your .css to your .html
Navigation
HTML: Insert the unordered list and list items tags for your navigation
CSS: Remove the bullets, display the list as block and float to the left
“Slider”
Insert slider div and image into header
Content
Insert a main_photo div and insert image
Insert 3 bottom divs and float all three to left
Footer
Insert the footer nav image in the footer div.

Do the rest on your own. This is fantastic practice!

See Demo page

http://www.everythingaboutweb.com/classes/examples/ipod_final/html5/

Dreamweaver : Inserting Images

jamie — Mon, 05 Mar 2012 05:37:32 +0000

Getting Started: Placing images On The Page

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs05-placing-images-on-the-page/

Inserting images

Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.

A quick way to get images for use in making test web pages is to “borrow” the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.

To copy an image from a web page, place the cursor over the image, and right-click (pc) or control-click (Mac). A menu will pop-up, and you can select “Save Image As…”. Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.

flower.jpg

flower.gif

Image: FreeDigitalPhotos.net

Once you have an image to work with, these are the steps for putting an image in a web page.

Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon in the Insert palette. It will request the name of the image, whichyou can use the open dialog to set. Once the image is displayed on the page, you can set it’s characteristics in the Property Inspector.
Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.
Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.
Adjusting the margins around an image. When text flows around the image, it “hugs” the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.

Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the

lower right hand corner of the palette. Experiment with the following:

Change the height and width of the image
Reset the size of the image to its natural size by clicking on the “W” and “H“. When the width or height number is bold, the dimension is different from the natural size.
Change the alignment so text wraps around the image
Set the alt attribute of an image
Make the image a link
Change the VSpace and Hspace to change the margin around an image when text if flowing around it

Image maps

Image maps are links created inside of images.

Image maps allow you specify multiple links inside of a single image. The links are tied to shapes overlaid on the image, which can be rectangles, circles, or polygons.

This is especially useful when mocking up a website. Rather than taking time to create many separate images (by slicing or other means), you can quickly create your complete web pages in Illustrator or Photoshop and export them as complete pages. Then use image maps for any links on the page.

In Dreamweaver, create an image map by clicking on the image, then naming the imagemap in the lower left corner of the property inspector. Once the map is named, you can create multiple links by drawing a shape, and then associating the URL with the link, using the tools in the property inspector.

The following image has four links, one over the logo and over each navigational “button”.

Making an image map:

Click on the image
Set the name of the map in the lower left of the property inspector (lowercase, no spaces, no special characters!)
Select a shape (rectangle, circle, or polygon) from the lower left
Draw a shape with the drawing tool
Dreamweaver will create a translucent shape for your hotspot
Enter a URL or local web page file name in the Link section
If you want a link to open in a new browser window, set the “Target” selection to “_blank”
Set the “ALT” section to the desired alternate text
Create additional hotspots by repeating steps 3-8
When you’ve finished, click on the arrow in the lower left of the property inspector to turn off the map drawing.

Getting Started: Creating Links in Dreamweaver

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs06-creating-links-in-dreamweaver/

Dreamweaver Introduction

jamie — Mon, 05 Mar 2012 05:34:53 +0000

Dreamweaver introduction

Getting Started: 01 What is Dreamweaver

http://tv.adobe.com/watch/learn-dreamweaver-cs5/getting-started-gs-what-is-dreamweaver-cs5-/

Dreamweaver is an HTML editor and an application for creating web pages. All web pages are simple text files that use HTML (and sometimes JavaScript) to describe the page. HTML (Hypertext Markup Language) is a standardized language that can be viewed with any web browser or other web page application.

Because web pages are made up of HTML, Dreamweaver does not create special Dreamweaver files. On the PC, you may find that if you double click on .html files, they will open in Explorer or Safari rather than Dreamweaver. As a result, it’s best to open your .html files from within Dreamweaver.

Dreamweaver is just a page formatting application, and is not capable of creating any media elements other than text. You must use Photoshop, Flash, or other applications to create images, animations, sounds, etc. Dreamweaver does not create the page for you — you need to understand the basics of page structure and layout in order to understand how to best use Dreamweaver. When it comes to building a web page, Dreamweaver is not smarter than you. Similar to the application InDesign which does not design a brochure for you, Dreamweaver does not automatically build a website for you. Both of these applications are only tools. You have to understand how to build a website in order to best use Dreamweaver.

Getting Started: 02 Defining a New Site

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs01-defining-a-new-site/

Getting Started: Creating New Documents

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs02-creating-new-documents/

Creating a new web page in Dreamweaver

Select FILE>NEW
Immediately save the file in a good location on your disk before you do anything else. Select FILE>SAVE, and browse to the location on your disk. It’s necessary to save first because many web page features (such as showing images) rely on links to other files. These links only make sense in terms of where the web page is in relation to the linked file.
Give the file a name. This name should be all lower case, and have no spaces between words.
SAVE the file
There are two windows to use when creating web pages:
Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.
Code Inspector. This window shows the raw HTML (and other code such as JavaScript). You can write HTML directly in this window, and any changes you make will be reflected in the Document window when you switch to the document window, press F5, or perform a Save (control-s for PC or command-s for Mac).

Previewing in the browser

Dreamweaver is a WYSIWYG (What You See Is What You Get) authoring tool, and you can see how your web page is going to look in the Document window. But it is not perfect or complete in the way it displays web pages. As a result, you must preview your web pages in a real web browser such as Safari or Firefox. When you have built a page to the point where you want to check how it looks, save your file, then select FILE>PREVIEW IN BROWSER>SAFARI (or Explorer or Firefox).

Dreamweaver Windows

Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.

Properties. This window is one of the most important and is used to show and set any properties of the currently selected element (image, table, text, etc.). For example, when you have some an image selected, you use this window to set the vspace and hspace.

Insert. This small palette is a shortcut menu used to place items into the current web page. For example, in the COMMON section, click on the icon with the tree to place an image in the document (at the current insert location). Each tab in the Insert menu brings up a different set of features for working with your document.

Site. This window servers two main purposes. First, it shows the way files are organized in your web site, and it allows you to open files without using the File>Open dialog. Second, it’s an FTP (File Transfer Protocol) client, which enables you to transfer your HTML files from the computer where you create them, to the web server where the files will be visible from the Web.

Behaviors. This window shows where interactive actions are added to text or graphic elements in the page. The most common behavior to add in Dreamweaver is for swap image, where an image changes when the user moves the cursor over the image. Two things are defined for each behavior, an event and an action. The event is the situation that causes something to happen. The action is what is activated when the event occurs.

Page properties

Every web page has global properties that can be set in the menu MODIFY>PAGE PROPERTIES… Important properties to be set are:

Title. This text does not appear in the body of the document. It sets the text to be displayed in the top bar of the browser window. You can also set the page title in toolbar of the document window.
Background Color. If this property is not set, the background color of the web page is undefined (although most web browsers will display it as white). Set this property to control the color of the background.
Background Image. This optional property allows you to use an image as a repeating, tiled background for the entire page.
Page margins. There are settings which control the margin at the top and left of the page. Most designerslike to eliminate these margins so they have complete control over the page layout. To do this, set LEFT MARGIN, TOP MARGIN, MARGIN HEIGHT, MARGIN WIDTH all to zero (there are four settings to accomodate Explorer).

The document toolbar

The Dreamweaver toolbar contains some common commands related to your view selection and your document’s status, plus a field for setting the page title. The Options menu items (button located on the right) change depending on the view you select.

Of particular note are the three buttons on the left. They allow you to quickly change the window view:

Design View – where you see how the page will appear in a browser
Code and Design View – a split page view where you see the code at the top, and the design at the bottom
Code View – where you see only the code that describes the page

Getting Started: Adding Structure to Text

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs03-adding-structure-to-text/

Getting Started: Managing Assets in Dreamweaver

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs04-managing-assets-in-dreamweaver/

Dreamweaver : Inserting Tables

jamie — Mon, 05 Mar 2012 05:23:48 +0000

Tables

A cell	an image with some text in the cell
cell	cel

Tables allow you to control the relative positioning of elements on a page by creating a series of connected cells. These cells can contain text and graphics, and have a specific or relative size specified.

You create tables by clicking on the table icon in the object palette.

You’ll be asked to set the following attributes:

Number of rows
Number of columns
Width in Percent or Pixels
The width of the border (the beveled edge on the outer part of the table)
The cell padding (the text margin, left, right, top, bottom)
The cell spacing (the width of the cell walls)

Table properties

Table properties are accessible by selecting the whole table.

Table Cell properties

Cell properties are accessible by placing the selection point inside a cell – the cell properties will show up in the lower half of the property inspector.

Table Features

The difference between percent and pixelsIf the table is set to percent, the table will change size depending on how wide the user sets the browser. If the table cells are set to percent, their size varies as a percentage of the whole table. In general, it is best to use pixels for all tablesFlowing text around tables
For flowing text around tables, tables are just like images, and have the same alignment attributes. The most commonly used settings are “left” and “right”.

Table format
The table format is controlled by the Border, Cellspacing, and Cellpadding (explained below). The settings for these table attributes are accessible in the middle right of the table property inspector. If you want the table borders to be invisible to the viewer and/or are using the table to knit together a set of images together, set all of these attributes to zero.
Border size
The setting of the table border in pixels affects the width of the border around the edge of the table.
Cellspacing size
The setting of the table cellspacing affects the width of the border around each cell
Cellpadding size
The setting of the table cellpadding affects the width of the margin. This margin is on the left, right, top and bottom

Selecting a table
There are three ways to select the whole table.

click on the upper left hand corner of the table when you see the cursor turn into a hand (this is sometimes hard to do).
click anywhere inside the table, then select MODIFY>TABLE>SELECT TABLE or type control-A twice
click anywhere inside the table, the click on the tag at the bottom of the document window
Adjust the rightmost cell first
If you are setting specific widths of the table, set the width of the rightmost cell first, and work your way left. This avoids the problem of the cells squeezing up against each other as happens when you adjust from left to right.
Row and Column Span
Row and Column span enable a cell to span adjacent cells. For example, if you set the row span for a cell to 2, the cell will become two rows tall. Likewise, if you set the column span for a cell to 2, it will become two columns wide. The controls for changing these cell attributes are in the lower left hand corner of the table cell properties inspector. To create a span, select the cells you want to consolidate into one cell, and click on the merge button in the inspector. To remove a span, put the cursor inside the cell to be broken apart, and click on the split button in the inspector.

This cell has a rowspan of two. This cell has a column span of two.

Changing the style of text in multiple cells
You can select multiple cells and change the text style by clicking and dragging across multiple cells, or shift selecting. Alternatively, you can control-click to select individual cells, even if they are not next to each other. Note that the only way to set the text style across multiple cells is to place a tag in each cell. Dreamweaver does this for you, but if you are hand-coding HTML, be aware that you can’t simply put a tag around the whole table–this will not change the style of the text inside the table.

Cell alignment — horizontal and vertical
The location of any text or graphic inside of a table cell is affected by the alignment setting for the cell. By default, the cell contents will be aligned to the left horizontally, and in the middle vertically. To change this, click inside the cell, and then set the Horz or Vert setting in the lower half of the property inspector.

The contents of a cell affects its size
Even when a cell has a specific width and height set, if the contents of the cell are bigger, the cell will always grow to accommodate the size of the content. This is true for both text and graphics. For example,. if the text in a cell doesn’t wrap (either because there are no spaces, or because you set the cell to not allow wrapping), the cell will expand its width to accommodate the text, regardless of the width setting for that cell or the whole table.

Clear row heights or column widths
When you are using a table to control the display of a series of image to be composited together, you should have no widths or heights set. This enables the image in the cell to determine the width and height of the cell. If you select the entire table, in the lower left hand of the properties inspector, there are two buttons (the first and second ones) that enable to you clear the row heights or column widths.

Convert table widths to pixels or percent
If you are having problems with a table, you may have a mix of pixels and percents, not a good thing generally. Dreamweaver has a method for setting all the table widths to the same method. Select the entire table, and in the lower left hand of the properties inspector, there are two buttons (the third and fourth ones) that enable to you set the table and all its cells to pixels or percent.

Nesting tables
You will find that it is often difficult to design a table that places elements exactly where you want them. One way around this is to put a table inside of a table cell. In other words, you use the outside table to set the general location, and the place a table inside the appropriate cell to do your exact positioning. To do this, just place the cursor inside the appropriate cell, and click on the Insert Table icon in the object palette.

This table is inside another table

Image Slicing

jamie — Sun, 26 Feb 2012 21:43:06 +0000

Image slicing

Earlier we discussed the basic principles of compressing your images for the web. What do you do when you have all of your final design comps ready in Photoshop and you want to optimize all of the images you’ll need to build your web site? Saving each image one-by-one can be very inefficient. Slicing allows you to “cut out,” name, and optimize all of your images at the same time. This can save you a great deal of time and is easy to do.

Here’s an example web page that demonstrates the image slicing approach.

Overview
Many web designers develop their page layouts in Photoshop (or Illustrator) before they use an application such as Dreamweaver to assemble the page in HTML. This approach allows the designer to use all of the powerful layout and design capabilities of Photoshop to work on the creative aspects of laying out the page. Once a design is solidified, the designer must translate their Photoshop layout into the realities of HTML and limited download time. This involves compressing different parts of the layout in different ways (e.g. some parts will be GIF while others will be JPEG), and leaving some parts of the layout for live HTML. To do this, it’s usually necessary to cut the original Photoshop image into smaller pieces. This is called image slicing.

In Photoshop CS2, an image slicing application called ImageReady is shipped with Photoshop, and the two programs are tightly integrated. ImageReady is a program specifically designed for image slicing, and contains many additional tools for this process.

In both Photoshop CS2 and Photoshop CS3, image slicing is also part of Photoshop. If you do not have Photoshop CS2 or CS3, you can also use ImageReady if it is included in the version of Photoshop you are using for this class.

Adobe Fireworks is another program designed for image slicing and has replaced ImageReady.

Advantages of image slicing
By slicing the page into smaller graphics, the designer can:

Compose the page in Photoshop – rather than Dreamweaver
Simulate layering – by compositing imagery in Photoshop, and avoiding the use of DHTML layers in the web page.
Optimize the page – compress parts of the web page individually, and leave parts of the page “transparent” so the background color or background image shows through. For example, use JPEG for a photograph in one part of the page, use GIF for a logo with a transparent background where the page background color shows through.
Use HTML text – leave parts of the page available for HTML text which requires very little download time compared to graphic text. HTML text can also be updated more easily than graphic text.
Make graphic elements individual links – while his effect can be achieved with image maps, usually separate graphics
or each link is better: better compatibility when the page is viewed without graphics (using the ALT text), better accessibility for the disabled, the ability to have rollovers for the links, and simpler updating of the page.
Rollovers – rollover images can be created for each navigational element on the page which would not be possible if the page was one large image.

Example of sliced page:
Below is a diagram showing how the Photoshop image is sliced up to make the files that make up this web page.

Disadvantages of image slicing
Page slicing can create numerous problems if the designer is not careful:

Page size – by letting a program create all of your images, it is easy to let the page size grow too large.
Page complexity – image slicing programs can create a large number of cells in the page. If this happens, the browser will take longer to display the page, and the user feels it is taking longer to download. Keep the number of slices to a minimum so the page is not too complex.
More complex design process – image slicing creates a more complex process, and may add to the time it takes to develop a web site. In particular, it make take longer to make changes to pages developed with slicing.

Recommended Process.

Be methodical.
Creating the numerous image slices for a web page makes the designer’s job potentially very complicated. One has to keep track of the page layout, the precise dimensions of each graphic element, rollover highlights, etc. If any changes are made to the page after it’s initially constructed, these factors become even more acute. As a consequence, the designer must take a very organized and careful approach to developing web page graphics.

Here is one method:

Do the initial design and layout in Photoshop. (Note that in the Photoshop file “image_slicing.psd” that each element is on its own layer and all layers are named. You want to be sure to keep your psd file very organized and all elements on separate layers.)
Test the design in a web site by exporting a JPEG version of the entire page.
Based on the tests, revise the design in Photoshop and create a final comp.
Create rollover highlights as separate layers
In Photoshop –
1. Determine how the page will be sliced up to:
  1. compress each section of the image most efficiently (with JPEG or GIF)
  2. make slices for each rollover (will discuss rollovers in a future class)
2. Create the image slices using the minimum number of rectangles for dividing the page. Try to keep the total number of slices under 15. It is better to have fewer, larger slices than many small slices.
3. Set the image format for each slice (JPEG, GIF, level of compression, etc.)
4. Set the transparency for the slice, and set the matte color if applicable.
5. Export all the slices along with an HTML file if needed. (Photoshop automatically creates a table that arranges the slices properly on the page). Save the image slices in a separate folder for each web page.
Create the HTML in Dreamweaver to finalize the page.

Slicing in Photoshop

An image is created and edited in Photoshop.

Open the Photoshop file and:

Choose VIEW > SHOW RULERS, and create any guides you may need to make your slices consistent.
Select the slice tool
Draw a slice by clicking and dragging to create a rectangle for your slice
Double click on the image to open the slice option palette, In the slice option palette, set the following attributes for the following sections:
- Name: set the name of the file to be created for this slice (Photoshop creates a default file name, which I suggest you change)
After you have named all of your slices, select FILE > SAVE FOR WEB to individually optimize every image. In the save for web palette, set the appropriate image coding for every slice. Don’t forget transparency and matte if they are appropriate. Use the slice select tool (the alternate for theslice tool) to select different slices.
An easy way to remember the slicing process is as a 3 step process:
Step 1- slice
Step 2- name
Step 3- optimize

Save Optimized Images
When you are ready to save your sliced images, you can create image files only, or create an HTML file with all of the images inserted in a table in the correct layout. We will cover saving a HTML file later in the semester. When saving, be sure to set the following items:

Create HTML or not
The directory for the images
After you have completed steps 1-3 (slice, name, optimize) for every slice, you can save the files as images only. You do not need to change the name of the file. Save to a folder called “Photoshop.” Photoshop will create an images folder and will place your optimized images there. Note that image slicing often generates many images. In general, it’s recommended that you create separate image directories for each sliced page so you can keep track of the images better.Notice also the following settings:
Settings : Default Settings
Slices: All

Use separate image directories for each web page.
Sliced pages often have many images, and the pages are frequently regenerated with different slices. This process can leave many unused “orphaned” images that should be deleted. If several sliced pages have their images saved in the same directory, it is difficult to find the orphaned image slices. On the other hand, if the image slices are saved in a separate directory for each sliced web page, then after significant changes to the slicing, the entire directory can be deleted and a new set of images can be optimized and saved into a clean directory.

Video Demonstrations

I have created instructional videos for you that you can view two different ways.
1) You can download the entire demonstration in two QuickTime movie files: Part 1 (29 MB). Part 2 (32 MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.

Intro to HTML 5

jamie — Wed, 08 Feb 2012 03:06:06 +0000

HTML 5

Introduction

Most of the web standards curriculum is based on the last stable version of HTML — HTML 4.01. The HTML 4.01 spec was completed in 1999, over 10 years ago as of the time of this writing! But unless you’ve been hiding under a rock for the last year or so, you’ll be well aware that there is a new version of HTML in production — HTML5!

So why have we been teaching you HTML 4.01 in spite of this?

HTML5 is a really good thing for web developers and designers, because it:

Is mostly backwards compatible with what’s already there — you don’t need to learn completely new languages to use HTML5. The new markup features work in the same way as the old ones (although the semantics of some elements have been changed and the new APIs are based on mostly the same JavaScript/DOM that developers have been programming in for years.
Adds powerful new features to HTML that were previously only available on the Web using plugin technologies like Flash, or with complex JavaScript and hacks. Form validation and video are prime examples.
Is better suited to writing dynamic applications than previous HTML versions (HTML was originally designed for creating static documents).

What does HTML5 mean to me?

To start with, let’s answer that question you’ve had circling round your head since you started reading this article — why did we teach you most of the web standards curriculum using HTML 4.01, if HTML5 is on the horizon?

First of all, when the WSC was first published in 2008, HTML5 was a lot more in flux than it is now, and we didn’t want to teach you something that would likely be changed at a later date.

Second, and more importantly, HTML5 is backwards compatible — in practical terms, this means that all the stuff inside HTML 4.01 is also in HTML5. So by learning HTML 4.01, you are also learning a large chunk of HTML5.

Some parts of HTML5 are implemented in a stable enough fashion across browsers to be used safely even on a production site (as always, you will have to make a judgement call depending on your site’s target audience and features). Plus if a feature is not supported in certain browsers, you can work around this.

To give you a short concluding answer, HTML5 is the future of the Web, and a large part of your future as a web designer or developer. I’d recommend that you start learning HTML5 as soon as you are ready — many of the new features will make your existing work a lot easier, and it will future proof your knowledge.

HTML5 features

HTML5 contains many new features to make HTML much more powerful and suitable for building Web applications. In the list below I’ve summarized the main ones you really should know about.

Some of the features listed below are NOT actually part of the HTML5 spec itself, but are defined in closely related specs, therefore they are still valid parts of the new movement towards modern web applications, and useful for you to know about.

New semantic elements: As you will already know, semantics are very important in HTML — we should always use the appropriate element for the job. In HTML 4.01 we have a problem — yes, there are many elements for defining specific means such as tables, lists, headings, etc., but there are also many common web page features that have no element to define them. Think of site headers, footers, navigation menus, etc. — up until now we have defined these using

, which we can understand, but machines can’t, plus different web developers will use different IDs and classes. Fortunately, HTML5 comes with new semantic elements such as

This cell has a rowspan of two.	This cell has a column span of two.
This cell has a rowspan of two.

everything about web

Embedding font using Cufón

Cufón

So, how does it work?

This text will be shown in Vegur.

This text will be shown in Vegur.

This text will be shown in Myriad Pro.

Navigation Basics

Navigation

Navigation design “rules”

Consistency

7 +/- 2 rule

Group Navigation

Keep it simple

Where are we?

Multiple Navigation

Other Issues that impact the way you design navigation

Interface Design Conventions

Code for HTML5/CSS Layout

HTML 5/CSS Layout

Replacing this: HTML 5 example

Subheading

Subheading 2

Intermediate CSS Layout – Apple iPod

Column CSS Layout with HTML5 (Apple iPod)

Basic HTML4: Three Column Layout

Basic HTML5: Three Column Layout

Basic CSS3: Three Column Layout

CSS: Add below code to CSS to make it compatible across browsers

Script: Add below script inside HTML head tag to make page compatible with Internet Explorer

Rounded corners are created adding the following code in your CSS

HTML5: Three Column Layout

See Demo page

Dreamweaver : Inserting Images

Getting Started: Placing images On The Page

Inserting images

Image maps

Getting Started: Creating Links in Dreamweaver

Dreamweaver Introduction

Dreamweaver introduction

Getting Started: 01 What is Dreamweaver

Getting Started: 02 Defining a New Site

Getting Started: Creating New Documents

Creating a new web page in Dreamweaver

Previewing in the browser

Dreamweaver Windows

Page properties

The document toolbar

Getting Started: Adding Structure to Text

Getting Started: Managing Assets in Dreamweaver

Dreamweaver : Inserting Tables

Tables

Table Features

Image Slicing

Image slicing

Slicing in Photoshop

Video Demonstrations

Intro to HTML 5

HTML 5

Introduction

What does HTML5 mean to me?

HTML5 features

Introduction

History

Discography

Rock bands

Jazz bands

Hip hop bands

Where does that leave ?

How to get it working in older browsers

Image Optimization

Image Optimization

GIF format

JPEG format

PNG format

Image optimization using Photoshop

GIFs

JPEGs

Replacing this:

HTML 5 example

Where does that leave
?