Design and Layout

Design
Even if you are creating only a simple Website, you should begin by sketching out the layout of your site. Decide where you want titles, images, navigation buttons, and text to appear on the screen.

Most web sites have the same design characteristics on every page. For example, Website titles are usually in the top left or top center, while navigation buttons usually appear vertically on the left or horizontally below the title. In addition to sketching out a layout for each page, you should determine how many pages you will need for the Website. Thorough planning is essential to good web design.

In order to get your text, navigation buttons, and images to appear where you want them on the Web page; you need to use tables to format content of each page. Everything on each page of your Website should fit within one large table.

Using your layout sketches, you can determine what your table needs to look like. Figure 5 shows a simple layout sketch. Figure 6 shows the same layout, with table borders drawn in. Figure 7 shows how the table can be implemented in Dreamweaver.

Now, simply create a table in Dreamweaver that has the same characteristics as the borders drawn on the page. The next chapter will teach you how to insert your table.

Website Design Principles
Many webmasters wish they could design great looking sites, but simply can’t. They’ve given it a few attempts, but either due to lack of application knowledge (with apps like photoshop), or lack of “artistic talent”, they give up. And that’s fine, because it keeps the market for design healthy! ;) But no, it really doesn’t have to be like that. If you’re an aspiring designer, there are a few key principles that I want to outline first. They are what helped me through my path to becoming a good designer, and they should help you too if you follow them.

• It’s not the 90’s anymore

When the early pioneers of the internet age began designing websites in the 90’s, they became fixated on the filters offered by programs like Photoshop. Lens flares, bevels, drop shadows, glows, were used to their fullest extent. You need to avoid abusing these filters, or I should say, you need to avoid misusing these filters. There are instances in which these filters can be a great benefit, but you have to know how to use them properly and not just slap them on anything and everything.

• Usability, Not clutter

Usability is all about making the visitor’s experience a good one on your site. Things should be easy to read, easy to access and most importantly, easy to understand. When a visitor visits your site, they should know exactly what your site is about within the first couple seconds. This is obviously where design, and layout come into play. You need to avoid cluttering your site in the physical sense. I’m not talking about having “too much content”, but rather how you choose to display that content. Things should be laid out with spacing and margins.

• Text Do's and Dont's

One of the really big fads that was prevalent in the early part of this decade, was the use of small fonts. I was one of those idiots because I thought it “looked” cool. But for all practical purposes, I always scorn people for using size 10px or less for fonts. Never go below 11px font - and even 11px should only be used sparingly. Size 14px (which is what this is) seems most ideal for paragraph’s of text. You can get away with 12px of course, but as screen resolutions are increasing, 12px suddenly becomes smaller.

Line-height is very important. Line-height is the spacing between each line of text in your paragraphs. Standard line-height I find is a tad bit too thin, and I like to expand it a little more. It makes it easier for people to read.

• Colors and Contrast

The color theme of a site is obviously important. A lot of aspiring designers have a tenancy to use too many colors, simply because they’re there. But I like using no more than 2 primary colors and a third “secondary” color that I will use sparingly throughout the design. A simple color theme is easier on the eyes, easier to “comprehend” and overall just looks better. Of course there are exceptions to this, but 9 times out of 10, it’s always better to keep the color theme simple.

The color theme also needs to connect with the visitors and the purpose of the site. For example, I wouldn’t use blue and fluorescent green/yellow for a site about health - it simply doesn’t make sense and I think that’s a given. :)

Contrast is hugely important. It’s very important that your content and navigation are correctly contrasted. The foreground text needs to either be very dark, or very light in comparison with the background color. I see a lot of sites where the text will be a light gray and the background is white - err! That’s very annoying and hard to read.

• Design around the purpose of the site

A lot of designers, those experienced and not, always use the same “formula” for layout and design elements. To really make an impressive and effective site, you need to fully understand what the purpose of the site is, and what the goals are. Whether the site is based around selling memberships, or just general ad-based content - the design should cater most effectively to the purpose. And that’s what I will be demonstrating in the tutorial proceeding this page.

• Learn by example

A common mistake for the aspiring designer is thinking they should be able to open up photoshop, and design a great looking site on their first try. Nope, doesn’t happen like that. You wouldn’t pick up a guitar and start writing music without first learning a few songs right? Right, and it should be no different for web design. I recommend that beginners simply try to recreate existing designs that they think look good. If you do this a few times, it will (1) help you learn the application, (2) help you become a better designer. You subconsciously learn when you recreate an existing design. You automatically pick up design sense when you do this, and it really helps and goes a long way when it comes down to designing your own sites.

Layout
Dreamweaver gives you several different ways to create and control your web page layout. One common method for creating a page layout is to use HTML tables to position elements. Tables can be difficult to use, however, since they were originally created for displaying tabular data, not for laying out web pages.

To streamline the process of using tables for page layout, Dreamweaver provides Layout view. In Layout view, you can design your page using tables as the underlying structure, while avoiding some of the traditional pitfalls of using tables. For example, you can easily draw layout cells on your page, then move the cells where you want them. Your layout can have a fixed width, or it can automatically stretch to the full width of the browser window. When you switch back to Standard view, your page will contain table cells and columns that correspond to the layout cells you placed on the page.

The following picture illustrates a completed version of a layout for a project index page in Layout view:

The layout cells and tables will eventually hold a banner graphic, a navigation bar, a Macromedia Flash movie, and other assets.

When you draw a layout cell that isn't inside a layout table, Dreamweaver automatically creates a layout table as a container for the cell. A layout cell cannot exist outside of a layout table. You can lay out your page using several layout cells within one layout table—which is the most common approach to web-page layout—or you can use multiple layout tables for more complex layouts. Using multiple layout tables isolates sections of your layout, so that they aren't affected by changes in other sections. In this tutorial, you will use multiple layout tables to design the index page for the project.

Creating a Homepage

To create a Web page, follow these guidelines:
1.To add a new page go to File > New and choose a basic HTML page. Save this page by clicking
File >Save As. Name the first page index.html. This will be the first page that users encounter when they visit your site. Save this file to your local root folder as index.html. Naming the homepage
index.html tells the Web browser that this is the first page it should open when someone visits your site.
2.After your homepage index.html is created, you can use this page as a template layout for all the other pages in your site. Simply hit Save As and name the file whatever you wish, but be sure to keep the name is simple, for example history.html, resume.html, etc. Remember not to use capital letters or spaces when naming files, this will make it easier for web browsers to find your files.
3.To save the pages of your site simply click File > Save for each page. Make sure your homepage is named index.html, and save all of your files in the folder you chose when you defined your site, i.e. in your local root folder.

Basics of Dreamweaver

The purpose of these Dreamweaver basic guide is to help first time users create a basic web page using Macromedia Dreamweaver. The topics in the guide are as follows:

• Open Dreamweaver
• Give your page a title
• Save your page
• Using the text properties palette
• Creating links (absolute and relative)

• Using the object properties palette
• Insert an image
• Provide alt. tag for image
• Align image
• Insert and work with tables
• Insert a horizontal rule
• View your page in a browser
• Practice exercise (this is a link to a new page)

Open Dreamweaver
Depending on the settings of your computer, opening the program may automatically open a blank, untitled web page. If it does not, go to the File menu and select New. This will open an untitled document.

Give your page a title
The title is the part that appears at the top of a Web browser and is also the name that will appear in the bookmarks of the browser. Thus you should choose a title that makes sense to others and not just to you (example: "Helen's Home Page"). To enter a page title:

In Dreamweaver 3: click on the title icon on the top left of the blank screen. If this icon does not show upper, from the View menu --> choose "head content."

 The title icon is the one on the left with the little arrow pointing at it.

When you click on this icon the title box appears. Type the title of your page in the space provided.

In Dreamweaver 4: A blank title box appears at the top of the page. To enter the page title, all you need to do is click on this box and type in the name of the page title.

Save your page
To do this, from the File menu choose Save. When the save dialog box appears on the screen, navigate through your computer to the location where you intend to keep your web pages [Note: If your page is going to be part of a web site, you should save it to your web site folder (see guidelines for creating a web site)]. In the space provided, enter the name of the page.

Important:
The names of web pages must be one word (no spaces). If you want the file name to have more than one word in it, then you need to run these words together to form one word. There are different conventions to naming web pages. There is no one "correct" way (so long as you have no spaces), but it's a good idea to decide which you want to use and then stick to the same format for all your pages. Examples:

1. dreamweaverguide.html - run words together with no separation between them.
2. dreamweaver_guide.html - use the underscore (_) to separate words.
3. DreamweaverGuide.html - use a capital letter for the start of each new word*.

* NOTE: This naming convention can cause problems in some versions of Dreamweaver, so it is better to avoid using any capital letters in a file name [as you may notice on some of my webpages, I have used this convention in the past. What happened in my old version of Dreamweaver was that sometimes, when I uploaded the webpage, Dreamweaver changed the name to lower case, even though I typed in the the first letter as upper case. I have since learned of others having this problem, so my advice is now not to use capital letters (even if you don't use Dreamweaver -- others may be, and when they link your URL on their web pages they run into problems!). If you do run into this problem, you have to fix it by changing the error at the source code level].
If you are using a Mac, you must make sure that the file name is followed by the file extension .html (if you are using a PC,the extension will be added in automatically for you. Macs use the extension ".html" while PC's use ".html" -- but both work).

Using the text properties palette

The text properties palette is used for formatting the text on your page. It contains the following functions:

1. Format: Heading styles are used to apply a standardized hierarchical structure to formatted text. The smaller the number of the heading, the bigger the heading will be. For example, Heading 1 describes the largest heading. To change the format, click on the heading on your page and then, on the properties palette, click on the arrows next to the word "Format." Select the desired format from the drop down menu.
2. Text style: This is set as default font. The default font is the one defined in Dreamweaver preferences. You can change the default under the preferences menu (which will then ensure that any pages you create use the same default font) or you can change it on a particular page, either for the whole page or for selected text on the page.
3. Text size: Applies either a specific font size (1 through 7) or a font size (+ or -1 through + or -7). Font size is relative to the BASEFONT size (the default is 3). There is no way to specify a particular point size for fonts in an HTML tag (since the end users can change the way their browser displays text on their screens).
4. Text color: You can choose the color of the text. However, not all colors will appear on the end user's screen in the same color you selected. Thus you should choose a browser-safe color by clicking the color box, or enter a hexadecimal value (for example, #FF0000) in the adjacent text field.
5. Text alignment: This aligns text left, center, or right (in much the same way as you do when using a word processing application).
6. Link: This makes the text that you have selected into a a hyperlink. You can create a link in a number of ways. (1) Copy the URL from your web browser and paste into the link box (2) drag the Point-to-File icon to a file in the Site window (3) Click the folder icon to browse to a page in your site (4) type the URL in the link box
7. Ordered list: This turns the selected paragraph or heading into an item in a bulleted list. If no text is selected, a new bulleted list is started.
8. Unordered lists: This turns the selected paragraph or heading into an item in a numbered list. If no text is selected, a new numbered list is started.
9. Indent and Outdent: This indents or outdents the selected text. In a list, indenting creates a nested list, and removing the indentation unnests the list.
10. Target: This specifies the frame or window in which the linked page should load (not needed unless you are using frames).

Creating links:

• Absolute link = a link to to another site or page that is not on your web site. They include all of the information about the site and begin with http:// An example would be:

http://www.d.umn.edu/~hrallis

• Relative link = a link to another page within your site. An example would be OfficeHours.html which is a page within my ~hrallis site.

Creating an absolute link:

1. Highlight the word that you want to make into a link.
2. In the properties palette, click in the blank link box. Type in the URL of the page to which you wish to link.

[Note: It is actually better to copy the page URL from your browser so that you avoid typing in an incorrect address. (highlight the URL --> choose Edit --> Copy) and then paste it into the link box in Dreamweaver by using the shortcut Option --> V (Windows) or Apple --> V (Mac). ***This will not work unless you use the shortcut for paste***

To create a relative link (to a file within your site):

1. Highlight the word that you want to make into a link.
2. In the properties palette, click on the icon of a folder (this is in the middle of the palette).
3. Browse through your computer to your website and locate the file to which you want to link.
4. Click on the "open" button (this is a bit confusing as you aren't trying to open the file -- you just want to link to it! Nevertheless, by clicking on "open" you creating the link command).

Creating an e-mail link
This is used when you want users to be able to send an e-mail without having to type in the e-mail address. When users click on an e-mail link a new message window will open using the mail program associated with the user's browser (e.g. Outlook Express will open, and a new message window will appear with the e-mail address already entered).

1. To insert an e-mail link, place the cursor on your web page in the place in which you want to insert the link or highlight the text words that you want to appear as the e-mail link.
2. Click on the Insert E-Mail Link on the object palette.
3. In the E-mail field, type the e-mail address mail should be addressed to.
4. Click OK.

Using the object properties palette
The object palette contains buttons for inserting objects such as tables, layers, and images. In this Dreamweaver Basics guide only some of the items from the common object palette will be explained. If the object palette is not visible when you open Dreamweaver, go to the Window menu and select objects. This will place the palette on your screen.

Insert an image:
Before inserting an image onto your web page, make sure that it is (a) saved either as a .jpg (or .jpeg) or .gif (b) saved into your web site folder [to learn more about web site organization, see web site guidelines]. It is a good idea to have a separate folder (directory) for images contained within your web site.

1. To insert an image, place the cursor on your web page in the place in which you want to insert the image.
2. Click on the picture of the little tree (top left of the object palette). This will bring up a dialog box asking you to select the image source. Navigate to the folder in which you have the image saved and click the "open" button. This will insert the image onto your page.

To have the text wrap around the image:

1. Click at the start of the paragraph next to which you want the image to appear (even if you want the picture to appear at the end of the paragraph and on the right). Next,
2. Insert the image (see above for how to do this).
3. Click on the picture to select it.
4. Then, from the properties palette, click on the arrow next to the word "align." From the pop up menu make a choice. Example: If you choose "right" the image will appear to the right of the text, as shown here with the sunset photo.

Provide alt. tag for image:
It is very important to include a description of the image for (a) those users who choose to set their web browsers not to load images [this helps speed up the load time of pages and is very useful if you have a slow modem connection] (b) for people who have vision impairments and who use a screen reader to read out loud what is written on the web page.

1. Once you have inserted the image, click on it. Notice that the properties palette switches from the text properties palette to the image properties palette.
2. Click in the box next to where it says "Alt." Type in a short description of the image (e.g. the alt tag I used for the image properties palette image below says, "Screen shot of image properties palette").

Align image
You can align the image left, center, or right by selecting it (click on it) to bring up the image properties palette. Change the alignment by clicking on your choice of alignment boxes from the 3 in the bottom right corner of the image properties palette.
Insert and work with tables

1. To insert a table, place the cursor on your web page in the place in which you want to insert the table.
2. Click on the picture of the table on the objects palette. This brings up the "insert table" dialog box.
3. In "insert table" dialog box select the appearance of your table:

• Rows: enter the desired number of rows
• Columns: enter the desired number of columns
• Width: This gives you the choice of setting how wide you want the table to be. If you choose the width in "pixels", this sets the table width regardless of the size of the user's browser window. If you choose the width in "percent" your table width will change with the user's browser window size. [It is usually best to have this be blank, so that the browser makes the table as wide as it needs to be to fit the table on the page].
• Border: this sets the width of the table borders. If you want your table to be invisible set this at 0. (Since there is no tab key on web pages, you can use invisible table when you want to force spaces between text or objects on the page).
• Border colors: use the Light Brdr and Dark Brdr fields to select border colors that have a highlight and shadow effect, respectively, giving the border a three-dimensional appearance. (To return to the default gray shades, remove the color values and leave the fields blank.)
• Border field: Choose Brdr to select a border color for the entire table.
• Background image or color: Use the Bg options to select the background image or background color for the table.
• Cell spacing: specifies the number of pixels between each table cell
• Cell padding: specifies the number of pixels between the cell content and the cell boundary (or wall).

     4. To select the entire table, do one of the following:

• Click the top left corner of the table, or click anywhere on the right or bottom edge.
• Click once in the table and choose Modify > Table > Select Table.
• Click once in the table and choose Edit > Select All.
• Position the insertion point anywhere inside the table, and select the <table> tag at the bottom left corner of the Document window. Selection handles and a dark line appear around the table when it is selected. It will also change the properties palette into the table properties palette. You can then make changes to the appearance of the table using this palette.

     5. To select rows or columns, do one of the following:

• Position the insertion point at the left margin of a row or at the top of a column. Click when the selection arrow appears.
• Click in a cell, and drag across or down to select multiple rows or columns.

     6.To select one or more cells, do one of the following:

• Click in a cell, and drag down or across to another cell.
• Click in one cell and then Shift-click another cell. All of the cells between the two cells will be selected

Insert a horizontal rule
This is used to separate different sections of a web page.

1. To insert horizontal rule, place the cursor on your web page in the place in which you want to insert the rule.
2. Click on the picture of the horizontal rule on the object palette.

View your page in a browser
In order to see what your page will look like when you upload it to the web you can preview it in your browser. (This does not mean that it is actually on the web, however -- to do that you have to upload your page, This will be described later).

To preview your page:

1. from the File menu --> select Preview in browser.
2. Select the browser from the list (usually Internet Explorer or Netscape).

If your preferred browser doesn't appear in the list, then:

1. Select "Edit Browser List" from the list that appears when you chose the "Preview in browser" option above.
2. Click on the edit button and browse through your computer to locate your choice of browser.
3. When you locate the browser, click the box next to "Primary Browser" to make this your default choice.
4. Click OK.

Multimedia in the Web

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see like text, pictures, music, sound, videos, records, films, animations, and more.

On the Internet you can often find multimedia elements embedded in web pages, and modern web browsers have support for a number of multimedia formats.

In this tutorial you will learn about different multimedia formats and how to use them in your web pages.

Multimedia Formats
Multimedia elements (like sounds or videos) are stored in media files.

The most common way to discover the media type is to look at the file extension. When a browser sees the file extensions .htm or .html, it will assume that the file is an HTML page. The .xml extension indicates an XML file, and the .css extension indicates a style sheet. Picture formats are recognized by extensions like .gif and .jpg.

Multimedia elements also have their own file formats with different extensions like .swf, .wmv, .mp3, and .mp4.

Video Formats
The MP4 format is the new and upcoming format for internet video. It is supported by YouTube, Flash players and HTML5.

Format	File	Description
AVI	.avi	The AVI (Audio Video Interleave) format was developed by Microsoft. The AVI format is supported by all computers running Windows, and by all the most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-Windows computers.
WMV	.wmv	The Windows Media format is developed by Microsoft. Windows Media is a common format on the Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free) component installed. Some later Windows Media movies cannot play at all on non-Windows computers because no player is available
MPEG	.mpg .mpeg	The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is cross-platform, and supported by all the most popular web browsers.
QuickTime	.mov	The QuickTime format is developed by Apple. QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.
RealVideo	.rm .ram	The RealVideo format was developed for the Internet by Real Media. The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.
Flash	.swf .flv	The Flash (Shockwave) format was developed by Macromedia. The Shockwave format requires an extra component to play. But this component comes preinstalled with web browsers like Firefox and Internet Explorer.
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) is the new format for the internet. In fact, YouTube recommends using MP4. YouTube accepts multiple formats, and then converts them all to .flv or .mp4 for distribution. More and more online video publishers are moving to MP4 as the internet sharing format for both Flash players and HTML5.

Sound Formats

Format	File	Description
MIDI	.mid .midi	The MIDI (Musical Instrument Digital Interface) is a format for electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital musical instructions (notes) that can be played by electronics (like your PC's sound card). Since MIDI format only contains instructions (notes), MIDI files are extremely small. The example above is only 23K in size but it plays for nearly 5 minutes. MIDI is supported by many software systems over a large range of platforms. MIDI is supported by all the most popular Internet browsers.
RealAudio	.rm .ram	The RealAudio format was developed for the Internet by Real Media. The format also supports video. The format allows streaming of audio (on-line music, Internet radio) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.
Wave	.wav	The Wave (waveform) format is developed by IBM and Microsoft. It is supported by all computers running Windows, and by all the most popular web browsers (except Google Chrome).
WMA	.wma	The WMA format (Windows Media Audio), compares in quality to MP3, and is compatible with most players, except the iPod. WMA files can be delivered as a continuous flow of data, which makes it practical for use in Internet radio or on-line music.
MP3	.mp3 .mpga	MP3 files are actually the sound part of MPEG files. The MPEG format was originally developed for video by the Moving Pictures Experts Group. MP3 is one of the most popular sound formats for music. The encoding system combines good compression (small files) with high quality. Expect future software systems to support it.

What Format To Use?
The WAVE is the most popular uncompressed sound format on the Internet, and it is supported by all popular browsers. If you want uncompressed sound (music or speech) to be available to all your visitors, you should use the WAVE format.

The MP3 format is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music. If your website is about recorded music, the MP3 format is the choice.