Just Enough Web Design.doc.doc

Just Enough Web DesignBy

Gerri Sant

Just Enough Web Design Gerri Sant

Planning the Web site 3

Creating the Site 4Creating your local site 4

Creating your remote site 5

Structure – Page Layout 7The table template design: 8

Structure: Using Images 10Inserting and formatting an image 10

Adding Text to your page 12Fonts 12

Scanable text 13

Structure: Creating Links 14Navigation bars 14

Creating links in Dreamweaver 14

Design: Using CSS 16CSS in Dreamweaver 16

External Style Sheets 17

Publishing Your Site 19Uploading (Putting or Publishing) your site in Dreamweaver

19


Planning the Web site

It is the purpose of this book to include instructions for creating a

simple web site for the average Web user. I will use Dreamweaver 8

for the step-by-step directions, however, you should be able to adapt

the concepts covered to any web authoring software.

Many factors will influence the design and content of your Web site.

Most important will be the purpose of the site and the intended

audience. Are you trying to educate, sell a product, entertain or

simply show off your photos? Is your intended audience computer and

Web savvy or are they limited users of the Internet? Are they likely to

have a relatively new computer system with the latest versions of web

browser software? Do they have the plug-ins needed to run a Flash

animation or view a video?

The answers to these questions will determine the design of your site

from the colors you choose to the size of the font and the number of

images you include. They will help you decide whether to include

music, animations and videos.

Once you know the answers to the questions listed above and you

have gathered your content information, you can begin to plan the

site. Depending on the type of site and amount of information, you

may want to lay out the pages so you can visualize your site. Some

designers use sticky notes for each page, some use computer software

to create the design, others draw squares representing the pages on a

large chart or whiteboard. Whatever method of design you choose, the

time spent will definitely be worth it. Your finished site will be well

organized, easy to navigate and have something to offer to your

audience.


Creating the Site

Before beginning the pages for your site, you should create the site

folder and any subfolders you will need. It is very important that all of

your Web pages and media (pictures, sounds, movies etc.) be saved in

the same site folder. Select a location on your computer’s hard drive

or your flash drive and create a new folder. Name the folder

appropriately (something like My Tech Classes). Open this folder and

create a folder named ‘images’. Look back at your site design. Since

you may be planning to take other Tech classes, you are creating a

site with distinct sections. You will create additional folders inside

the My Tech Classes folder. At this point you should create one folder

for your Tech 2150 section of your site with its own images folder

located within. Eventually you will also have your opening page for

the Tech 2150 section of your site (index2150.html) and your 3 issue

pages saved inside the 2150 folder as shown below. As you take other

Tech classes, you can create folders for each of them inside the My

Tech Classes site folder.


The My Tech Classes folder is where you will save all Web pages as

you create them and all of the media used in your site. In

Dreamweaver you will designate this site folder as your local site.

When you are ready though, you will have to upload (publish or put)

your pages and media to a Web server, your remote site, for the world

to see.

Creating your local site

You will have to perform the following steps each time you want to

work on your web site on a different computer since the site

information is stored in Dreamweaver itself rather than in your site

folder.

Launch Dreamweaver and choose Site > New Site

1. Click the Advanced tab on the top of the window

2. Select Local Info in the Category pane

3. Enter your site name (My Tech Classes)

4. Click the Local root folder icon and navigate to select your Web folder.

5. Click the Default images folder icon and navigate to select your images folder.

6. Enter your http address: www.nova.edu/~username (enter your NSU username)

7. Other settings can remain as shown.

http://www.nova.edu/~username


Creating your remote site

Now you will set up the information Dreamweaver will use when you

are ready to upload (publish, put) your web site to the NSU web

server. If you create a web site some other time that is to be published

to a different web server, the web server company will give you the

appropriate information to fill in for FTP host and Host directory. The

information given below will only work for the NSU server.

1. Select Remote Info in the Category pane.

2. Select Access > FTP (not shown below)

3. For NSU enter the information for FTP host: ftp://polaris.nova.edu

4. Enter the folder information: public_html

5. Enter your login username and your password.

6. Click Test. If the connection fails, try selecting Use passive FTP or contact your hosting service for more specific information.

7. Deselect Save if you are working on a shared computer.


The Files panel (Window > Files) will now display your site folders.

Once you have uploaded your site to your hosting service, you can

switch between your local site (the one on your computer or flash

drive) and your remote site (the one on your Web server) using the

dropdown menu on the right.

The image on the left below shows a simple site in which all Web

pages will be located in the root site folder. The image on the right

shows a more complex site with sub folders for each section of the

main site. Only the home page (index.html) is saved in the Site folder.

Home page images are saved in the images folder. All other pages and

their images are saved in appropriately named sub folders.

Dreamweaver allows you to set up multiple sites and switch between

the folder lists for each site. To create additional sites, remove sites

no longer needed or edit details of a site, select the Site menu and

Manage Sites.


Structure – Page Layout

Well-designed pages are a must for an effective web site. They should

have audience appeal yet be simple to read, easy to navigate and

inviting. Repetition of page layout(s) throughout your site is an

important element of design. Using templates can minimize much of

the work of creating web pages. A template is a pattern for the basic

layout of your page. Web authoring software like Dreamweaver

includes options for creating and using templates. You can also create

them yourself using tables or layers. First though you should design

your page(s) on paper and decide where common elements such as a

banner and navigation links will be placed.

You may have several templates for your site, one for the home page

and one for each other type of page, content information, photo

gallery, links page. For each page type, create a new html file and

save it with a distinctive name, tmplt_hm_pg, tmplt_content,

tmplt_photo. Each time you begin a new html page for your site, open

the appropriate template file and save it with the specific page’s

name. Fill in your text, images and links. When you are ready to

create another page, you still have the template file to use again.


More advanced users will learn to use Dreamweaver’s template

options. Once created, all changes to the templates automatically

update all pages to which they are linked.


The table template design:

1. Select the insert table icon

2. Enter the number of columns and rows. These can be changed later.

3. Enter a table width of 750. Your page design should be 800 pixels wide to prevent horizontal scrolling.

4. Enter the number of pixels for the border, cell spacing and cell padding. Enter 0 for all three if you do not want to see the table lines on your page.

5. Click OK

Adjust the cells as needed to create your page layout design.

1. To combine 2 or more cells into 1, select adjacent cells and right click.

2. Select Table > Merge.

3. To create multiple cells from a single cell, select the cell and right click.

4. Select Table > Split cell

5. Drag the cell spacing lines to a suitable position on the page.

Complete the template design by inserting any elements that should

appear on all of the pages that will follow its design. This might


include a banner graphic, text or graphic links, contact information

and background color or image. (See the section Structure: Using

Images)

Select the table and use the Property Inspector to

center it on the page. Since you set the table

width to 750, you will have 25 pixels of margin on

both the left and right of your page content when a viewer’s monitor

is set to 800 by 600. This allows for browser chrome (scroll bars,

rulers, etc.

Save your page. It will be listed in your files panel.


Structure: Using Images

Images of course make your web site stand out from the crowd. You

may choose to create your own images, find them on the Web (and use

them with permission) or hire someone to create them for you. The

image formats you will be using are JPEG and GIF. Most simply put,

the JPEG format is used for images with many colors (as many as 16.7

million), and blends, gradients and shades of colors. This means it is

the format for photographs and any other images that do not have flat

blocks of solid color. The GIF format is used with limited colors, up to

256. It is used when an image has areas of flat color. The GIF format

is also used if you want a transparent background or animation. No

matter which format you are using the main rule for images is

OPTIMIZE! Most graphic editing software, (think Photoshop or

Fireworks), includes the option to preview your image with different

compression settings. Choose a setting to export your image as the

smallest file possible (memory size, not inches) with acceptable

quality. While you can change the physical size of your image once

you insert it on a web page, this will not change its file size. Make

sure you export the file into the appropriate images folder in your web

site.

Inserting and formatting an image

1. From the INSERT menu, select Image

2. Navigate to the images folder of your site folder and select the appropriate file.

Note: You can also drag an image file from the file list on to your

web page

3. Use the Property Inspector to set the following options:

A. Width and height in pixels


B. V space – space above and below the image as measured in pixels

H space – space to the left and right of the image as measured in pixels

C. Alt – an alternate text label that will appear on the page if a web browser’s image option is turned off or while an image is loading

D. Align – alignment of the image with text that is on the same line

The properties inspector also includes tools for cropping and

resampling your image. You can even click a button to open your

image in Fireworks, the image editing software that is part of the

software suite Macromedia Studio.


Adding Text to your page

Thanks to word processor software, most people are comfortable

working with text. Writing for the Web though is different from

writing for print. Differences in computer systems, fonts, screen

resolution and viewers reading styles all influence how you write and

how it looks.

Fonts

When writing for print distribution, you are free to choose from any of

the fonts you have on your computer. I will see it exactly as you

intended once it is printed on paper. This is not true on the Web. If

you write your web page using a font on your computer that I don’t

have on mine, my browser will choose a font from my computer to

display your page. It may look considerably different in my font. For

this reason, choose from fonts that appear on most everyone’s

computer.

You should also consider when to use serif and sans serif fonts. Serif

fonts are those that have small decorative lines on the ends of letters.

Sans serif fonts are plain. Serif fonts help a viewer’s eye track across

a page. For this reason they are often used for paragraphs, especially

in print. Sans serif fonts stand out as headings. On a computer

monitor however, some sans serif fonts are better for paragraphs.

The common fonts of each type include

Font type Windows fonts Macintosh fontsSerif Times New Roman, Georgia TimesSans Serif Arial, Verdana Helvetica, Geneva

Dreamweaver offers the option of specifying a list of fonts. This way a

viewer’s web browser can choose


from a preferred list of fonts. These lists usually end with a general

choice of either serif or sans serif in case none of the other choices is

on the viewer’s computer.

The choice of fonts and most text styling should be specified either in

an attached style sheet or on the individual web page in a CSS style

section. (See the section on CSS styles).

Scanable text

By its very nature the Web encourages readers to jump from page to

page or from the top to the middle or bottom of a single page. With

thousands of hits in response to a Web search, viewers want to know

if your page contains the information they need. The use of headlines

and chunked information will help them. Break your information into

logical pieces with summary titles in larger text before each section. If

your page is long, include a linked list of topics covered at the top of

the page.


Structure: Creating Links

Web users navigate from page to page or place to place within a page

by clicking on linked text or images. There are three types of links

used on web pages; internal, external and mail.

Internal or local links: These links connect to other pages within

the same web site. Anchors can be used to connect to a location

other than the default top of the page when a link in clicked.

External or remote links: These links connect to web pages in

other web sites.

Mail links: These links open a users email client with an address

already completed in the To section.

Navigation bars

Web pages often feature the same table of text or image links along

the top, side or bottom of every page. Using a navigation bar as a

standard feature on every page helps viewers easily move from page

to page in your site.

Creating links in Dreamweaver

1. Select the text or image that will become the link.

2. Internal link: drag the ‘point to file’ marker to the target file listed in the file list.


Internal link with an anchor:

Name the anchor site:

Set the insertion point at the link destination.

Click the Name Anchor button

In the Named anchor text box, enter the name and click OK.

Set the link:

Enter the number sign # and anchor name in the link text box of the Property Inspector for a same page link. Example: #week

Enter the filename followed by the number sign # and anchor name in the link text box of the Property Inspector for a link to an anchor on a different page. Example: page2#week

External link: enter the URL in the Link section of the Property Inspector. Make sure to include the ‘http://’. Example: http://www.nova.edu

Mail link: enter the address following the code ‘mailto:’ in the Link section of the Property Inspector. Example: mailto:[email protected]

mailto:[email protected]


Design: Using CSS

Separating the design from the underlying structure of your web site

will help you control and modify elements such as font, weight (bold,

normal), size, color, background, spacing and indents. Cascading style

sheets, CSS, are used to name and specify formatting. These styles

can apply to individual html tags. For example you can declare all H1

(heading 1) text to be written in Arial font, 18 point, and red. You can

also create class and ID styles that can apply to any text or selected

section on your page. If the same styles will be used on multiple pages

in your site, you can store them in one or more external style sheets.

These sheets are then linked to the specific pages that will use them.

Once the style sheets are created and linked to your web pages, you

can change the background image, font color or any other declared

element on all linked pages by changing the definition in the external

style sheet.

CSS in Dreamweaver

CSS rules are made up of two parts: selector and properties.

h1{ h1 is the selector – parentheses are requiredcolor: red; color is a propertyfont-size: 18px; font size is another property

} parentheses are required

Once the previous rule has been declared, any text that is set to a

heading 1 (h1) will automatically be size 18 and colored red. To

change all heading 1 text to green, just edit the rule to read

color:green; .

To define a style for an html tag:

1. Open the CSS styles panel ( Window > CSS styles) and click the New CSS rule button at the bottom of the panel.


2. In the New CSS Rule dialog box, select Tag as the type and enter h1 as the Tag.

3. In the Define in section, select This document only. (Your style can be exported to an external style sheet and linked to multiple pages later.)

4. In the CSS Rule Definition dialog box, select Type from the Category list.

5. Select from the dropdown menus to set the properties for font, size and color.

6. Other properties can also be defined such as a background color or image in the background category or border lines, padding and margins in the Box and Border categories.

7. Click OK to complete the definition and the new style is automatically applied to any <h1> tag on your page.

If your style will be applied to text or sections of your page that are

not defined by an html tag, create a class or ID. Class styles can be

used multiple times on a page while ID styles are limited to one use

per page. When creating a Class style, select Class in the New CSS

Rule dialog box and enter a name for the class. Class names must

begin with a period (example .grnTxt). When creating an ID style,

select Advanced in the New CSS Rule dialog box and enter a name

starting with the number symbol. (example #footer).

To apply a Class or ID style:

1. Select some text or a section of the page, for example a table cell.


2. Right click the tag selector. (<p> or <td>).

3. Select the Class or ID from the pop-up menu.

External Style Sheets

To apply the styles you have created to other pages, you can export

them to an external style sheet and link that sheet to multiple pages.

A change to a style definition in the style sheet will automatically

show up in all linked pages. In this way all the heading 1 text in your

whole web site can be changed from red to green with one word

change.

To export styles to an external style sheet:

1. In the CSS Styles Panel, right click the word <style>.

2. Select Export from the pop-up menu.

3. Name your style sheet and add the extension .css (example columns.css).

4. Navigate to your site folder and click Save.

After exporting your styles, delete them from the page on which they

were created and link the external style sheet to the page.

5. In the CSS Styles Panel, right click the word <style>.

6. Select Delete from the pop-up menu.

To link an external style sheet to a web page:

1. Click the link button on the bottom of the CSS Styles Panel.

2. Click the Browse button and select the css stylesheet to be linked.


3. In the Add as section of the dialog box, select Link.

4. Click OK.

Tag styles will automatically be applied. All Class and ID definitions

will now be available for use on the linked page.


Publishing Your Site

When you have finished your site, or at least enough of it to be useful

to your audience since most sites are never totally finished, you will

want to publish it to a remote server to make it available for viewing.

If you set up your site correctly in the beginning (see Creating the

Site), your uploaded site will look just like the local one. That is to say

the folders, subfolders and images will all be recreated on the remote

server with the same names and relative locations.

Uploading (Putting or Publishing) your site in Dreamweaver

Dreamweaver offers several options for uploading your site to your

remote server. The easiest method for

uploading the entire site, a single folder or file

is to right click the folder or file and select Put

from the pop-up menu.

Just Enough Web Design.doc.doc

Documents

Transcript of Just Enough Web Design.doc.doc