Eddie Vega, Digital Media Specialist

1
 Table of Contents

Step 1: Solidify your Concepts 4

Step 2: Pre-Production 4
Step 3: The Rules 8
Step 4: Production 10
Step 5: Post-Production 14
CheckList 16

2
 The following is a “workflow” for designing a website.
There are things to consider and plan for prior to the actual creation
of a site. Websites like Webs.com and Wix.com create templates for
you to choose from, but heavily restrict the flexibility of what you
can do with the site once you begin to add your content. These
options are OFF-LIMITS and will not be discussed in this
workshop. Why? Simple. The skills required to design a website
from scratch can actually help you to land a job or keep an existing
one. By creating a website via pre-fabricated templates, your site
has now real uniqueness and no one gets a job creating sites in this
manner.
This workshop is geared toward those who are just starting
out in web design. We will work a various WYSIWYG Editors
including: Adobe Dreamweaver, Microsoft FrontPage, KompoZer,
and Amaya.
Each step is this manual is designed to take you step-by-step
to a finished product – your own website. So, without further a
due...
Let's begin!

This workshop will take you through the steps to create a

website from concept to finished product in the shortest amount of
time yet making your site as effective and accessible as possible.
Towards the end, we will discuss how search engines can be used to
help your website become successful.

Web Design or Web Development? What's the difference?

Web Design makes the website LOOK great and creates the eye-
candy that appeals to viewers. Web Development is ensuring that
the website functions properly and is as secure as it could be.

There are 6-levels to web design and development. The

following list runs from the most advanced web
design/development setting to the beginner-level.

• Content Management Systems (Joomla, Drupal, Plone, etc)

• Interactive Design & Integration (Flash and/or MS Expression)
• Template Design & Modification
• Visual Design (Knowledge of Photoshop and Code is extremely
helpful.)
• Code ( HTML5, CSS3, XML/RSS, JavaScript, JQuery, etc.)
• WYSIWYG Editors

3
Step 1: Solidify your Concepts Step 2: Pre-Production

1.0 - Have an idea? Answer some questions first! 1.0 - Where do I start? How to begin?

Do some investigative research on how others with similar ideas a) After deciding on the type of website you're planning on
have gone about to achieve their objectives. designing, make a list of the items you want to include.
Keep in mind, on what items are appropriate for the website
a) What sort of website are you looking to design? you'll create.

b) Who are your demographics (your audience)? For example: If you were to apply for a job as a photographer, your
professional portfolio would not have photos of you on vacation.
c) What do you wish to accomplish with this website?
You're list of items for a photographer's position may look like this:
d) How do you want the audience to perceive you?
Resume || Publications || Presentations || Exhibits || Work
e) What sort of website will this be? (i.e. Portfolio, Samples || Resources || Home
Informational, Selling Goods & Services, etc.)
(see Figure 1, on page 7)
It is easier to work on paper, where you can easily change your
mind or the direction you want your website to go in than to create b) Draw it out!
the actual site and find out it is not what you're looking for. Literally, grab a piece of paper or create an account at
www.lovelycharts.com and create a schematic or “schema”
or “wireframe” of the entire site. This will serve you as a &
”blue print” to building your website.

4
 c) Try out various programs!
If yo have access to programs such as Adobe Dreamweaver
or Microsoft FrontPage or any other *WYSIWYG Editors,
try them out and experiment. There are also a couple of
open source programs you can download for FREE that are
cross-platform. Download and try these out and decide
which program feels comfortable to you and your skill level.
As a SUNY Plattsburgh students, the iWeb program found
on Macs is OFF-LIMITS! It has issues with our servers.
• WYSIWYG means “What-You-See-Is-What-You-Get”
- This type of editor does not just work with code but rather
looks much like the interface found on software such as
Microsoft WORD or OpenOffice/LibreOffice Writer.
2.0 - All your web pages, WORD documents, PowerPoints, video
clips, photos, graphics and anything else you want to have on your
website, should be saved in the same folder. This makes it easier to
link everything together. It also helps to upload everything to the
server.
a) On the PC, save your work in a folder called My Web
Sites, located under My Documents. If it is not there, created it!
b) On the Mac, create a folder called, My Web Sites and
save your work there.
3.0 - If you are going to transfer your files back and forth from
school to home to work and so on, a jump drive is a good idea to
simply carry your files, BUT you will need to back-up those files.
a) Create an account on www.dropbox.com – they give you
5
2GB of free online storage. Your files can then be accessed from
any computer regardless whether its a PC, Mac or Linux.
b) As a SUNY Plattsburgh student, login to My Plattsburgh
and select My Files. This will not only allow you store your files
online, but will open your Web Space for your site.
c) Copy ALL files to your hard drive.
It is important to understand that jump drives break, crash
and can get stolen very easily. To only have your files on a jump
drive and backed-up, will not excuse you from any deadlines that
you are required to meet. This goes for any assignments you may
have lost.
4.0 - If you are going to use images from the web – if you do not
have permission to use those images you will not be allowed to post
them onto your website. It is important to understand that images
that have a copyright cannot be used simply because they are found
through Google or any other search engine. Using images without
the consent of the owner of said images is a violation that carries the
same weight as plagiarism. If a site is found to have “illegal”
images, students will be asked to replace those images. If students
do not change the images, websites will be taken down.
 Websites such as www.sxc.hu (The Stock Xchange) give you
the license to use their high caliber images. The proper procedure
to working with sites such as this is as follows:

a) Create an account on the site and login.

b) Locate the image you want.

c) With the small version of the image, you are to copy and
paste it to a WORD document. Also on this document, you must
copy & paste the actual license, the URL and the ID # of the image.
If you are planning to post documents such as: resume, lesson plans,
articles, newsletters, etc., then you will need to create an account on
www.scribd.com – Scribd.

Uploading WORD documents and/or PDF files to Scribd allows

you:

d) This WORD document, MUST appear underneath the
image once you have placed it into your web page.
Other sites that can be used include:
Creative Commons – www.creativecommons.org
MorgueFile - http://www.morguefile.com/
Flickr - http://www.flickr.com/
a) To preserve the formatting of the document
b) Gives the readers of your website options for how-to
view your documents
c) When logged into Scribd, you can see how my times your
documents have been seen.

*Note about Flickr! Once your documents have been uploaded to Scribd, the website
Read the licenses carefully!!! Not every image owner will gives you the “code” to EMBED into your own website.
give you permission to use their images. If it says, “Some
Restrictions...” you may be able to use the images. If it
says, “All Rights Reserved” - DO NOT USE!!!

6
Figure - 1

Your “homepage” MUST be saved as: index.html. Create the

individual web pages first [as seen in Blue]. Add additional web
pages to accommodate your website.

All web pages within a website are connected or linked to each

other.

7
Step 3: The Rules
In web design there are rules to follow just as there are rules
to follow in the world of print media, or television, or film, etc.
Below are some of the rules that need to be applied to websites
created by Educators. As Educators, we have even more
restrictions on what we can do with our websites.
a) You can ONLY use the following fonts: Arial, Helvetica,
Courier New, Times New Roman, Georgia, and Verdana. Cannot
use any fancy fonts or anything that is a script. With the new
technologies such as HTML5, MooTools and @Font Face, we will
be able to use virtually any font. This is currently under way as this
manual is being designed, and some, not all, browsers support these
new technologies. As a result, until this change takes full effect, we
will work within the restrictions and limited fonts.
b) You cannot use underlined text. This tends to mislead
viewers into thinking you have a broken link or a series of broken
links since the perception is that if text is underline it is considered
a link.
c) Cannot use italics. There are still people and
organizations out there that use the older CRT monitors (big bulky
TV-like screens). Italics tend to look fuzzy or blurry on older
monitors or for people with bad eye sight. If your site cannot be
read, it will be overlooked.
d) Any photo, graphic, clip art, illustration, chart, etc.,
MUST have “ALTERNATIVE TEXT”. No exceptions! This is a
description of what the image is. Give a detailed description and
not just a single word. This is important when your viewers are
visually disabled and cannot see the actual screen. Those
individuals use specialized technology such as a “screen reader”
8
that will read the web page out loud to the viewer. The screen
reader will become mute when it comes across an image without the
ALTERNATIVE TEXT.
e) All photos MUST be reduced to 72-100 ppi (pixels-per-
inch) in oder for web pages to load up as quickly as possible –
especially, on computers on dial-up and mobile devices.
f) Every web page MUST have a TITLE. The TITLE is key
to letting those who cannot see to hear an audio cue that tells them
they are on a specific page. This is within the HTML code itself.
Near the top of the document [while in “code” or “source” views],
you are looking for the following: <title> Untitled Document
</title> or <title > New Page 1</title > or <title > New </title >
Simply, edit out the old text, between the <title > </title> tags and
replace with your own – usually that is the name of the web page
you're working on. The TITLE of any web page on the Internet will
appear in the upper left-hand corner of a browser.
g) Background Colors and Text Colors. There should be a
distinct and sharp contrast between the text and the background.
Light or white backgrounds should have dark text. Dark colored
backgrounds should have light/white text. Color schemes such as
red backgrounds with blue text or green backgrounds with orange
text are not considered “well-designed” sites.
h) Background Colors, Fonts, Layouts and such should
remain the same across ALL web pages. By having different
layouts and/or color schemes on every page, the viewers may think
they were re-directed elsewhere. This is not good design by any
means.
 i) Cannot use copyrighted text, music or images without the
written consent of the original copyright holder(s). This
documentation will need to appear somewhere on your website that
is easily accessible to view if any questions or doubts arise.

j) When working with text, use different fonts, font sizes and
font styles to emphasis items of importance.

k) When saving your very first web page, it can only be

saved as index.html or default.html. Do not use anything else or
search engines will NEVER be able to find your website.

l) Your Navigation Bar should be intuitive. Do not have

your viewers guessing at where items might be.

m) Always TEST your website on more than just your

computer. Also, TEST your site on many browsers. TEST your site
on PCs, Macs, Netbooks, Laptops, iPads, Smartphones, etc. It is
NEVER going to be 100% perfect, but it should LOOK good and
FUNCTION well. Because this is BASICS workshop, your priority Figure – 2
is to get your site to look good and function well on PCs and Mac
computers. Check off all the commonly used browsers you suspect your
audience will use.
n) TEST your site on different screen resolutions. You can
go to http://browsershots.org/ to test your site on multiple browsers
in one shot.

o) You should NOT have a horizontal scroll bar appear at the

bottom of the screen.

9
Step 4: Production
1.0 - How do I begin to create a single web page?
Open the program you selected back in Step 2: Pre-Production.
The elements of your web page that MUST appear on every page of
your website include:
a) A Header – This maybe a banner, a photo, text, a quote
b) Top Navigation Bar – These are your links to the other
pages in your website
c) The Body – This will remain blank for a while, but this is
where all your content [for that page] will appear. It will be the
only thing that will change on all your pages. More details on this
later on.
d) Bottom Navigation Bar – If viewers of your site need to
scroll down a long page of text, you do not want to force them to
scroll back upwards. By providing the viewer with the ability to
link to another page from the bottom of your screen is extremely
helpful.
e) Footer Information – The following MUST appear on
every web page that you produce. The items that will appear in the
footer are: Your Name; Your Email; Site Hosted by: *SUNY
Plattsburgh; Last Updated: mm/dd/yy; © Copyright, Year, Your
Name
10
* When it comes to the text, SUNY Plattsburgh,
should be linked to the SUNY Plattsburgh homepage.
For those students who are looking to get jobs as
teachers, if you upload your site to their servers, all
you would need is to change this link to reflect your
new place of employment.
It is very possible to have one of your navigation bars run
along the left margin of your screen. However, this will amp up
your frustration level when you view your site in different browsers
and find that it does not always look the same way as it does while
you are creating the web page. Since not all browsers are created
equal, your site will look great in some browsers and terrible in
others. When facing this sort of situation, you may find yourself
compensating the appearance of your site from editor to browser,
whereas, it may look horrible in your editor, yet, looks fabulous in
your browser.
If you need to create INTERNAL LINKS that link to other
web pages within your site; or, create EXTERNAL LINKS to other
websites; or, change the TITLES of your web pages, I have created
some video tutorials that can easily be accessed via YouTube:
http://www.youtube.com/results?search_query=vegadms&aq=f
– In the event this link does not work, go to YouTube and type the
following into the Search Tool: VegaDMS – you will then be taken
to a YouTube page where there will be three (3) videos on how to
use: FrontPage, KompoZer and Dreamweaver.
Software used to produce websites. Some are free to download,
some are costly, while others are no longer available.

Adobe Dreamweaver CS5 – The latest version of the very popular KompoZer – Open Source editor that can be used by those who
software used across the globe. like to design WYSIWYG websites, but also be those who prefer to
Link: http://www.adobe.com/products/dreamweaver/ code everything.
Link: http://kompozer.net/

Microsoft FrontPage 2003 – Discontinued as of November

2006, but still floating around on campus computers and in school
districts. Amaya – Another open source web design tool. It can also be used
Link: Unavailable for WYSIWYG website, but can also be used be programmers.
Link: http://www.w3.org/Amaya/

11
2.0 - What is the correct and fastest way to designing a website?
There are many ways to create a website, but in this
workshop we will go through a “cookie-cutter” method. This
method will allow you create a website in a very short time –
providing you have read the notes prior to this section.
Here are the steps towards creating a quick, effective and
informative website.
a) We begin with creating one “perfect” page. All of your
pages MUST contain the information found in “Step 4: Production
– 1.0” It is at this stage that we select the background color(s) and
Fonts, as well as create the layout we want for our website. The
ONLY component you are not expected to provide at the time of
creating this particular web page is the content. Your navigation
bars should resemble the sample in “Step 2: Pre-Production –
1.0”.
b) Once this web page has been designed, you will need to
check for the TITLE of the web page. In programs such as
Dreamweaver and FrontPage, you can simply click on CODE or
SOURCE to view the HTML code.
The TITLE is located near the top of the screen and will look
like this: <title> My New Website – 2011 < / title> You're job is to
change the text between the TITLE commands.
Why is this important? For those individuals who have a
visual disability and cannot see the computer screen, the TITLE of a
web page is then read out loud.
c) Now, we can save this web page. To do this, go to File >
Save As, and give the page the name of “index.html” - minus the
12
quotation marks.
For the next web page, simply change the TITLE in the
code, plus, the name on the actual web page. Then go to File >
Save As and give this web page a new filename.html.
Continue to repeat this process until you have all the web
pages you need for your website.
d) At this point, you have created all the web pages your site
will need, minus the content. This is now where you link the
Navigation Bars.
To begin, open up your index.html web page. This of course
is your homepage that viewers will come to once they click your
name.
Next, take one of your Navigation Bars and begin to
Hyperlink (or Link) to another web page. The steps on this
procedure vary from software to software. What you are trying to
do is link to another web page within your website. To see how this
is done, please watch the video on YouTube entitled, “Creating
Internal Links – in Dreamweaver”. Once you have one
Navigation Bar completed, simply COPY & PASTE it on of your
web pages. Don't forget to save often.
Link to video: http://www.youtube.com/watch?v=pch7rmH4ZOY
e) You are now at the point where you will add content to
your website. Much of the work you have probably created in
other classes, so there may not be a need to re-invent the wheel.
However, if your documents have been created with a specific
format in mind, then you will need to upload ALL text documents
to Scribd -
http://www.scribd.com/
 After uploading your documents into a free account on
Scribd.com, the site provides you with the EMBED code. Now,
you simply copy the code and place it wherever you want the
mouse to appear on your web page and PASTE (and SAVE)..
Another advantage to having your documents on Scribd is that you
can view the number of times your documents have been viewed.
f) Now that your site is completed, it's time to upload it to
the server. For SUNY Plattsburgh students, the server is accessed
via the My Plattsburgh portal. For everyone else, if you are using a
free service, you will need to read the documentation on how-to
upload your site to their server. If you have purchased your own
*Domain Name, then you'll need to contact a hosting, find out who
has the best rates, as well as how-to upload to their servers.
* A Domain Name is the name yo select for your
site and ends with a Domain Designator such as
.com, .edu, .net, .org, .biz, .pro, etc. The domain
name is the URL (or web address) for the website
and is purchased prior to “renting” web space on a
hosting company's server.
Some domain designators require specialized
credentials in order to obtain and therefore are
impossible for the average person to have a .edu
(education) or a .mil (military).
A hosting company will “rent” out storage space for
you to upload your files to their servers. They also
will provide you with a wide variety of service plans
to choose from.
3.0 - Working with photos, graphics, images, clip art, etc.
13
When designing a website it is possible to incorporate
images into your website. However, using images that are simply
found via a Google search doesn't mean you have the legal right to
use such images.
Using these sorts or images in the a PowerPoint Presentation
within a classroom environment, you are granted a certain degree of
flexibility. But, once that presentation finds its way onto the
Internet as part of a website, things can get muddy. Simply placing
a link on your site pointing to where you got the image may not
always be enough.
Just as plagiarism is frowned upon, the same goes for using
images without the consent of the artist. We now have an image
search engine that will track the image back to a point of origin.
If you need to use high-quality professional imagery, there
are websites that provide you with a license to use the images,
photos, and graphics found on these sites.
Stock Xchange - www.sxc.hu
Creative Commons – www.creativecommons.org
MorgueFile - http://www.morguefile.com/
Flickr - http://www.flickr.com/
For additional information, please re-read,
“Step 2: Pre-Production, 4.0”
Step 5: Post-Production 3.0 - Promote your site!

1.0 - Test your site!
After you have uploaded the entire site: web pages, images,
presentations, documents, etc. - your task is to test to see that
everything on your site works properly. As you test your site, take
some notes.
So you create a website, now what? Get the word out!
Word of mouth is a powerful tool. Post the URL of the site on your
next resume. Create a business card and post your site on the card.
Any forms, presentations, research papers, etc., post your site on
any material you may give away or submit.

Its good practice to test your site on a computer you did not
work on or upload from. Computers that you used to work on will
have your files on it and therefore when testing may give you a
false positive when in reality there is something wrong or not
working on your site.

Test your site on as many browsers as possible. Note that all

browsers are not created equal and each browser may display your
site differently. Also, test your site on as many platforms as
possible – PCs & Macs are the most common. To help test your
site, check off all the browsers you suspect your audience will use
at:
http://browsershots.org/

(See Figure 2, page 9)

2.0 - Feedback

As part of your testing, you may want to have a fresh set of

eyes look at your site and take it for a test drive. Listen to the
feedback your testers give you. This information can help you to
smooth out any kinks or areas that may not seem as intuitive to
viewers as you might think. This will also help you in setting up
updates, upgrades and/or re-design ideas for the next version of
your site.

14
Notes:

15
Web Design Checklist
Page Essentials
• These are items that MUST appear
on ALL web pages –
• NO EXCEPTIONS!!!
• Web pages MUST be consistent in
background color schemes.
[ ] - Header (may incl. Banner, Photo,
Quote, etc.)
[ ] - Navigation Bars (One at the TOP and
one at the BOTTOM of EVERY web page.)
[ ] - Web page MUST have a TITLE. This
is done within the CODE/HTML of the web
page itself.
[ ] - Footer Information – (Your Name, Your
Email, Site Hosted by: SUNY Plattsburgh,
Last Updated (with an ACTUAL date), and
Copyright Information.)
Sample:
Eddie Vega
Email: eddie.vega@plattsburgh.edu
Site Hosted by: SUNY Plattsburgh
Last Updated: 12/23/2011 or
December 23, 2011
© 2011 Eddie Vega
16
Typography Rules
Here are some rules about fonts in
basic web design. As of this posting, these
rules are getting closer to becoming history
with newer technology such as HTML5.
HTML5 will allow you, the designer, to use
virtually ANY font, but as for this
assignment/project, stick to the basics.
[ ] - No Script Fonts
[ ] - No Underlined Text
[ ] - No Italics.
[ ] - Appropriate color contrast from the
background color scheme.
[ ] - Use ONLY standard fonts. These
include: Courier New, Georgia, Helvetica,
Arial, Times New Roman, Verdana,
Tahoma, Impact, Comic Sans, Lucida,
Trebuchet,
Working with Images
Posting images on the web requires
the designer to take into consideration the
fact that not everyone has the ability of
sight and therefore MUST have an
ALTERNATIVE TEXT and a TITLE
TEXT available for those individuals and
newer versions of browsers.
[ ] - Add an ALTERNATIVE TEXT to
every image. This sort of text should be a
description of what the image is. A
sentence or two will be read out loud to
those who cannot see the screen. DO NOT
simply give a ONE word description.
[ ] - Add a TITLE TEXT to every image.
Simply COPY & PASTE the
ALTERNATIVE TEXT, but change the
“alt” tag to “title” in the HTML code. This
will become visible on newer browsers
(and works on all current browsers) when
the mouse goes over the image itself. This
is needed since ALL browsers are not
created equal and the logic behind the
technology varies from browser to browser.
Navigation Bars
These are internal links that link (or
connect) to other web pages.
[ ] - Navigation Bar at the Top and Bottom
of the web page. This helps the reader to
jump to another web page without forcing
them to scroll back up to the top of the web
page. This by far is the easiest method to
design.
[ ] - Navigation Bar on the side of your web
page. This is a bit more complicated [and
frustrating] than the option above and will
also require a navigation bar at the bottom
of every long web page. This sort of design
is reserved for more experienced web
designers. You do not want to force readers
to scroll back up to the top.
Working with Documents (and Lesson
Plans)
Documents can be used within a
website. Below are two (2) options for
working with documents. Lesson Plans,
Worksheets, Forms, Resumes, etc can be
done in this manner.
[ ] - Links must go to a web page version of
the document. Then you can have a link to
the actual document. ALL documents
should be SAVED as .rtf (Rich Text
Format). This format CAN be read by all
programs – Microsoft Word, Microsoft
Works, Corel WordPerfect, OpenOffice
Writer.
[ ] - Links go to SCBRD versions of the
documents. This is an alternative to the
above option.
Personal Safety Issues and Your Resume
Post your RESUME on your website
will have formatting errors since the
PRINT format does not translate well to the
WEB format. To overcome this, you can
create an account at SCRIBD.com; post
your resume on that site; copy & paste their
code into your web page version of your
resume.
[ ] - When posting your RESUME,
consider safety issues – Too much
[personal] information can be a hazard.
Any bit of information plugged into a
search engine can/will draw a map to your
doorstep. An online RESUME should only
have your NAME and EMAIL.

FYI: Links should NOT go directly to

WORD documents. This forces readers to
have Microsoft Word on their computers –
some readers may have WORKS or
WordPerfect which CANNOT read WORD
documents.

17
Working with PowerPoint Presentations
Both Microsoft PowerPoint and
OpenOffice Impress can be linked to
websites. The actual presentations MUST
be uploaded along with your web pages to
the server. If your planning to have your
presentations on the web, some forward
thinking is required: Use copyright-free
images or images that come from websites
where you are given permission to use
those images.
[ ] - PowerPoint/Impress Presentations can
be linked directly from your web pages.
Once the link is clicked, PowerPoint or
Impress will open.
18
Resources
This web page is NOT a laundry list
of websites, but will have the name of the
websites, the links and a brief description of
what this site is or why you think these sites
are important. This web page can be
broken up into sections for parents,
students, faculty, etc. The minimum of sites
you can use is 10, but if you wish, you can
have many more.
[ ] - A minimum of 10 resources of
websites you, the web designer, would go to
in order to find information within your
concentration or on websites you feel are
important.