Eddie Vega, Digital Media Specialist

1

Table of Contents

Step 1: Solidify your Concepts 4Step 2: Pre-Production 4Step 3: The Rules 8Step 4: Production 10Step 5: Post-Production 14CheckList 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 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

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!

3

Step 1: Solidify your Concepts

1.0 - Have an idea? Answer some questions first!

Do some investigative research on how others with similar ideas have gone about to achieve their objectives.

a) What sort of website are you looking to design?

b) Who are your demographics (your audience)?

c) What do you wish to accomplish with this website?

d) How do you want the audience to perceive you?

e) What sort of website will this be? (i.e. Portfolio, Informational, Selling Goods & Services, etc.)

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 the actual site and find out it is not what you're looking for.

Step 2: Pre-Production 1.0 - Where do I start? How to begin?

a) After deciding on the type of website you're planning on designing, make a list of the items you want to include. Keep in mind, on what items are appropriate for the website you'll create.

For example: If you were to apply for a job as a photographer, your professional portfolio would not have photos of you on vacation.

You're list of items for a photographer's position may look like this:

Resume || Publications || Presentations || Exhibits || Work Samples || Resources || Home

(see Figure 1, on page 7)

b) Draw it out!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

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.

5

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.

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.orgMorgueFile - http://www.morguefile.com/Flickr - http://www.flickr.com/

*Note about Flickr!Read the licenses carefully!!! Not every image owner will 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!!!

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:

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.

Once your documents have been uploaded to Scribd, the website gives you the “code” to EMBED into your own website.

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”

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.

8

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 is to get your site to look good and function well on PCs and Mac computers.

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.

Figure – 2

Check off all the commonly used browsers you suspect your audience will use.

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

* 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.

10

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 software used across the globe.Link: http://www.adobe.com/products/dreamweaver/

Microsoft FrontPage 2003 – Discontinued as of November 2006, but still floating around on campus computers and in school districts.Link: Unavailable

KompoZer – Open Source editor that can be used by those who like to design WYSIWYG websites, but also be those who prefer to code everything.Link: http://kompozer.net/

Amaya – Another open source web design tool. It can also be used 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

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/

12

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.

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.huCreative Commons – www.creativecommons.orgMorgueFile - http://www.morguefile.com/Flickr - http://www.flickr.com/

For additional information, please re-read, “Step 2: Pre-Production, 4.0”

13

Step 5: Post-Production

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.

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.

3.0 - Promote your site!

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.

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 VegaEmail: eddie.vega@plattsburgh.eduSite Hosted by: SUNY PlattsburghLast Updated: 12/23/2011 or

December 23, 2011© 2011 Eddie Vega

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.

16

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.

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.

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.

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.

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.

18