Just Enough Web Design.doc.doc

Just Enough Web Design
By

Gerri Sant

Just Enough Web Design Gerri Sant

Planning the Web site.........................................................3
Creating the Site.................................................................4
Creating your local site 5
Creating your remote site 6

Structure – Page Layout......................................................8
The table template design: 9

Structure: Using Images....................................................11
Inserting and formatting an image 11

Adding Text to your page...................................................13
Fonts 13
Scanable text 14

Structure: Creating Links..................................................15
Navigation bars 15
Creating links in Dreamweaver 15

Design: Using CSS..............................................................17
CSS in Dreamweaver 17
External Style Sheets 18

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

Page 2


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.

Page 3


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

Page 4


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.

Page 5


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.

Page 6


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.

Page 7


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.

Page 8


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)

Page 9


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.

Page 10


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

Page 11


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.

Page 12


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 fonts
Serif Times New Roman, Georgia Times
Sans 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.

Page 13


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.

Page 14


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.

Page 15


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:username@yahoo.com

Page 16


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 required
color: red; color is a property
font-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

Page 17


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

Page 18


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.

Page 19


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.

Page 20

Just Enough Web Design.doc.doc

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Just Enough Web Design.doc.doc

Ähnlich wie Just Enough Web Design.doc.doc (20)

Mehr von butest

Mehr von butest (20)

Just Enough Web Design.doc.doc