Download - Website Design for ECommerce
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:[email protected]">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…