just enough web design.doc.doc
Post on 14-May-2015
1.008 Views
Preview:
TRANSCRIPT
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
Page 2
Just Enough Web Design Gerri Sant
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
Just Enough Web Design Gerri Sant
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.
Page 4
Just Enough Web Design Gerri Sant
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.
Page 5
Just Enough Web Design Gerri Sant
Page 6
Just Enough Web Design Gerri Sant
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 7
Just Enough Web Design Gerri Sant
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 8
Just Enough Web Design Gerri Sant
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.
Page 9
Just Enough Web Design Gerri Sant
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 10
Just Enough Web Design Gerri Sant
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
Page 11
Just Enough Web Design Gerri Sant
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.
Page 12
Just Enough Web Design Gerri Sant
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
Page 13
Just Enough Web Design Gerri Sant
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.
Page 14
Just Enough Web Design Gerri Sant
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
Page 15
Just Enough Web Design Gerri Sant
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.
Page 16
Just Enough Web Design Gerri Sant
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 17
Just Enough Web Design Gerri Sant
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 18
Just Enough Web Design Gerri Sant
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.
Page 19
Just Enough Web Design Gerri Sant
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.
Page 20
Just Enough Web Design Gerri Sant
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.
Page 21
Just Enough Web Design Gerri Sant
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 22
Just Enough Web Design Gerri Sant
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 23
top related