Web Design for Beginners

Questions We Will Answer…

Why Should I Have a Website? How Much Will it Cost? How Do I Register a Domain Name? How Do I Select a Hosting Provider? How Do I Organize My Website? How Do I Design a Website? How Do I Publish My Website? Where Can I Find Additional Resources?

Do I Have to Have a Website?

No. It is possible to market your business online without having your own website. Some popular alternatives include…

Facebook Myspace Twitter Company Blogs Email Marketing Search Advertising

Why Have a Website?

It Strengthens The Rest of Your Marketing It Helps Customers Find Your Company It Helps Customers Learn about Company It Helps Customers Remember You It Helps Customers Contact You It Helps Customers Pay You It Is a Convenient Place to Store Files It Saves You on Labor Costs

Why Have a Website?

PERHAPS THE BEST REASON

TO HAVE A WEBSITE IS THE

FACT THAT THERE IS NO GOOD

REASON NOT TO HAVE ONE!!!

How Much Will it Cost?

Essential Costs Domain Name Registration ($5-15 per year*) Website Hosting Space ($5-15 per month**)**This is the cost per domain per year. If you choose to register multiple domains, you may have to pay more.*Although there are a number of websites that offer free hosting, you get what you pay for in this respect.

Non-Essential Costs HTML Editing Software ($100+ per program) IT Personnel Salary (up to $65,000+ per year) Professional Design ($1000+ per template) Online Marketing (varies by industry & provider) Dedicated Server (varies by size/type of server)

What is Domain Name?

A domain name is a series of alphanumericstrings separated by periods that is an address of a computer network connection and that identifies the owner of the address.

What Does That Mean?

A domain name is what you type into your

internet browser to get to a particular website.

You can purchase the rights to a domain name

from a domain registrar.

What is a Domain Name?

Examples:

www.utpbsbdc.org

www.sba.gov

www.google.com

www.google.biz

www.bbc.co.uk

www.heritageireland.ie

www.disney.tv

Do I Need My Own Domain?

http://www.webhosting.info/domains/global_stats/total_domains/

http://www.webhosting.info/registrars/top-registrars/global/

Which Registrar Should I Use?

Tips for Picking Domain Name

1. Try to Pick a .COM Domain2. Should Be Short & Easy to Spell3. Use Your Company or Brand Name4. Use Keywords or Household Words5. Use Personal Names6. Register Misspelled Variations of Domain7. Register Multiple Domain Extensions8. Consider Registering a .MOBI Extension9. Avoid Long-Hyphenated Names10. Register Domains for As Long As Possible

http://technology.inc.com/internet/articles/200707/campbell.html

What if What I Want is Taken?

To locate contact info for a domain’s owner…

1) Most registrars will perform a whois search automatically if the name you want is taken.

2) Whois.net is a popular whois search engine.

3) To perform a whois search in Google, simply type “whois example.com” in the engine.

THE INFO YOU GIVE THE REGISTRAR

WHEN YOU BUY A DOMAIN IS (USUALLY) PUBLIC!!!

Specialty Google Searches

Calculator (5*9+(sqrt 10)^3=) Stock Quotes (GOOG) Dictionary (Define HTML) Local Search (Computers Midland, TX) Exact Search (“Website Design”) Spell Check (Castcading Style Sheets) Local Maps (Map 79707) Unit Conversion (1 in to cm)

What is Website Hosting?

A web hosting service is a type of Internet

hosting service that allows individuals and

organizations to make their own website

accessible via the World Wide Web. Web hosts

are companies that provide space on a server

they own or lease for use by their clients as

well as providing Internet connectivity, typically

in a data center.

Which Hosting Company?http://www.webhosting.info/webhosts/tophosts/Country/US

Example from Yahoo.com

http://smallbusiness.yahoo.com/webhosting/

Example from GoDaddy.com

https://www.godaddy.com/gdshop/hosting/shared.asp?app_hdr=&ci=5652

What in the World is HTML?

Hyper Text Markup Language is a standardized language of computer code, imbedded in "source" documents behind all Web documents, containing the textual content, images, links to other documents (and possibly other applications such as sound or motion), and formatting instructions for display on the screen.

Example from UTPBSBDC.org

Common HTML Tages

<b>BOLD</b> <i>ITALICIZE</i> <u>UNDERLINE</u> <a href=“http://www.example.com”>Link</a> <img src=“http://www.example.com/image.gif"> <br> = Line Break (Same as enter key) <p> = Starts New Paragraph <h1>Heading 1</h1> <! – Inserts Invisible Comment --!> <a href="mailto:sbdc@utpb.edu">Email Us</a>

What is an WYSIWYG Editor?

A What You See Is What You Get Editor is an

editor or program that allows an interface or

content developer to create a graphical user

interface (GUI) or page of text so that the

developer can see what the end result will look

like while the interface or document is

being created.

Popular WYSIWYG Editors

1. Microsoft Frontpage

2. Microsoft Expression Web

3. Adobe Dreamweaver

4. Apple iWeb

5. W3C Amaya

6. Sites.Google.com

7. Homestead.com

8. Mozilla Seamonkey

Important Skills & Techniques Copy & Paste Browsing the Internet Uploading & Browsing for Files Format Text Save & Save As Copying & Moving Files Using Search Engines Understanding File Hierarchies Viewing Cached Versions of Sites Using the Way Back Machine (Archive.org) Creating New Files and Folders

Steps in Designing Website

1. Map Navigation Structure

2. Choose Page Layout

3. Choose Color Scheme

4. Choose Fonts

5. Design Homepage

6. Design Other Pages

7. Publish Website

8. Troubleshoot Website

9. Publicize Website

Mapping Navigation Structure

Types of Page Layouts

1) Site-Links Located at Top of Page

2) Site-Links Located on Side of Page

3) Other Types of Links

Example from UTPBSBDC.org

Example from BeltonEDC.org

Example from UTPB.edu

Example from Google News

Do I Have to Design It Myself?

There are several options for those who do not

want to design their website themselves…

1) Hire a webmaster as a regular employee

2) Contract a freelancer or company to do it

3) Use a free template from OSWD.org

4) Purchase a professional template

Tips for Choosing Colors

Use colors that match your logo & branding Make sure that the color scheme is legible Try printing each page in grayscale to make

sure there is enough contrast for users to read your content

Consider creating a separate printer friendly version of each important page

Tips for Choosing Fonts

Make sure that the font is legible using the color scheme you chose.Remember that most computers will not have exotic fonts. Stick to the basics (Helvetica, Arial, Verdana, Georgia, Trebuchet MS, Century Gothic, Lucida).

If there is a font that you want to use for navigation or headings, consider converting it to an image.

Web Design Demonstration

I will be using Mozilla’s Seamonkey in this

demonstration because it is one of the most

popular free web design programs available.

THIS SHOULD NOT BE CONSIDERED AN

ENDORSEMENT OF SEAMONKEY OR

MOZILLA. You could just as easily use any of

several products on the market.

Creating Your Website Folders

Create a new folder on your desktop. This folder will house all of your website files.

Create a folder entitled “images” inside the website folder. Move website images into it.

All of the HTML and / or document files you use in your website will go in the main website folder, while all of your images will go in the “images” folder.

You can create additional folders if you wish, but we will stick to these for simplicity.

Creating Your Website Folders

Getting Started With Seamonkey

Download Mozilla Seamonkey from http://www.seamonkey-project.org/ & install.

Open Seamonkey and select File New Composer Page. Close original window.

Getting Started With Seamonkey

Getting Started With Seamonkey

Getting Started With Seamonkey

Creating The Homepage

Select File Save As Enter descriptive title for page. This is what

will appear at the top of the browser when users log on to your website.

Save the file as “index.html” in the folder you created to store your website files

Getting Started With Seamonkey

Getting Started With Seamonkey

Getting Started With Seamonkey

Creating Layout With Table

Select Insert Table Create table with four rows, one column, 750

pixels wide, and border of one pixel. Right click on the table. Select Table Cell

Properties Table and change the alignment to center.

You can change the properties in the Table Cell menu at any time during the design process by right clicking on the table.

Creating Layout With Table

Creating Layout With Table

Creating Layout With Table

Creating Layout With Table

Pros & Cons of Using Tables

Pros – Easy for beginners to implement.

Cons - Does not make adjustments for different

resolutions or browsers sizes. Some users may

find it difficult to navigate website.

Alternatives – Cascading Style Sheets,

Frames, Tables Based on Percentages, Blog

Layouts, Wiki Pages, etc..

Are You Designing for Your Users?

39%

14%

12%

11%

8%

7%

4%3%

1%

1%

1024x768

1280x1024

1280x800

1440x900

800x600

1680x1050

1152x864

1280x768

1280x960

1120x840

Adding Logo or Header

Click on the top cell of the table. If you want to use a banner, select Insert Image and select the banner from your website file folder. Make sure to add alternate text.

If you want to center your banner, select the banner, click Format Align Center

If you are using text in place of a banner, simply type within the top cell and reformat the text to the desired size.

Adding Logo or Header

Adding Logo or Header

Adding Logo or Header

Adding Logo or Header

Color Size Format Alignment

Adding Site Links

Click on the second cell. Type the names of all of the main pages you have planned for the site. Divide each name with a “|” or “-”.

These page names will become site links once you have created the pages to which the links will eventually be pointing.

You can resize these links or change the color to meet your planned design.

Adding Site Links

Adding Page Content

The fourth cell is for page content. Insert text and / or images as you did for the other cells.

To change the way the images and text in the page content are aligned right click on any image, then click Image Properties Appearance Align Text to Image, then choose an option from the drop down box.

If you want to use multiple columns to format the content, create a table as before in the last cell. For Table Size, select 100% of cell.

Adding Page Content

Adding Page Content

Removing the Border

Once you have finished laying out your content, you can make the table(s) invisible by changing the border size to zero. To do this, right click on the table select Table Cell Properties the Table tab change Border to 0 click OK.

If you do not want to remove the border, you can leave it as it is or reformat it as you want.

Adding Page Content

Adding Page Content

Adding Google Analytics Google Analytics is a free tool you can use to

analyze your website traffic. Register for an account at analytics.google.com. From the Analytics homepage select Edit Check

Status and copy the “New Tracking Code” also called “ga.js”

In Seamonkey, click on the “<HTML> Source” view at the bottom of the screen.

Scroll to the bottom of the page and insert the analytics code immediately before the </body> tag. It will be one of the last items on the page.

Click on the “normal” tab for the WYSIWYG view.

Sample Analytics Report

Creating Other Pages

AFTER you save your work on the homepage, select File Save As type a descriptive name for the next page you want to work on save the new file with a new name into your website files folder.

You can leave the banner and site-links as they are. Just replace the content of the bottom cell for the content of the new page.

Repeat this process until you have created all of your website pages.

Creating Other Pages

Creating Other Pages

Creating Other Pages

Creating Other Pages

Creating Other Pages

Linking the Site Together Once you have created all of the pages in your website,

reopen the homepage (index.html). Highlight one of the site-links in the second cell and select

Insert Link. Click browse and select the file to which you want the text

you highlighted to link. Repeat for all of the links in your website. You can copy the site-links from the homepage and paste

them to all of the other pages. Do not create a site-link to the page on which you are

currently working. Leaving this unlinked will help users determine what page they are on.

You can also copy the URL from any website you visit if you want to include a link to it on your site.

Linking the Site Together

Linking the Site Together

Creating an Email Link

To create a link for users to email you, do everything you do to create an ordinary hyperlink, except put mailto: before the email address

It is recommended that you spell out the email address in the text of the page, instead of only putting “click here”

Creating an Email Link

Website Publishing Tips

Make sure ALL of the files for your website are contained in your website folder before you copy the files to your hosting account.

Copy the individual files, not the folder, to the hosting account.

Make sure the images are in the images folder and all other files are in the main one.

Use only lower case names without spaces. If you edit any HTML file, click refresh on your

browser before you attempt to view it.

Publishing Your Website

Log into your online hosting account. Navigate to the “file manager.” Upload all of your files to the main folder. View your homepage to test your site. If there are broken links, typos, or you want to

change something, you can use your hosting accounts online editor or you can delete the file you want to change, edit it in Seamonkey, and re-upload

Make sure you do not change the file name!

Testing Your Website

76%

20%

2%

1%

1%

0%

0%

Internet Explorer / Windows

Firefox / Windows

Safari / Macintosh

Chrome / Windows

Firefox / Macintosh

Firefox / (not set)

Netscape / Macintosh

Creating an XML Sitemap

Visit http://www.xml-sitemaps.com/ Enter the name of your website (once it is

published) and click start Download un-compressed XML Sitemap Upload sitemap to your file manager in your main

website folder If desired, visit google.com/webmasters/tools and

sign up for a Google Webmaster Tools account. You can then upload your new XML sitemap directly to Google.

Helpful Website Resources

OSWD.org (Free Open Source Templates) Analytics.google.com (Free Traffic Statistics) Google.com/webmasters/tools (Free Tools) Bravenet.com (Free Tools) XML-sitemaps.com (Free Sitemap Generator) SXC.hu (Free Stock Photos) Wally.cs.iupui.edu/n241-new/ (General Info) Webdesignfromscratch.com (General Info) How-to-build-websites.com/ (General Info)

Question & Answer Session

If you have any further questions, email…

murphy_a@utpb.edu or sbdc@utpb.edu