Electronic CommerceElectronic Commerce

BBA (Hons) BBA (Hons) ((Website Designing and Publishing))

By: Farhan MirBy: Farhan Mir

What is a Web site?What is a Web site?

A web site is:A web site is:

a presentation tool;

a way to communicate;

a learning tool;

a teaching tool;

a marketing important

tool;

Five step process for effective website Five step process for effective website designdesign1. Analyse

• Info / contentInfo / content• Target AudienceTarget Audience• Top 10 ChecklistTop 10 Checklist

2. Organise• NavigationNavigation• Content Content • Page layoutPage layout• Page designPage design

3. Develop• Web page layoutWeb page layout• Site layout Site layout • Web page constructionWeb page construction• Graphics techniquesGraphics techniques

4.4. ImplementImplement• User InteractionUser Interaction• Final ChecklistFinal Checklist• FTPFTP• Fine TuneFine Tune

5.5. MaintainMaintain• MarketingMarketing• OptimisationOptimisation• Traffic analysisTraffic analysis

site mapsite map

filesfiles

motorbikesmotorbikes

product newsproduct news technical infotechnical infogallerygallery

vintagvintagee

sportssports members’members’

The basic unit of any website The basic unit of any website is a web pageis a web page

The main web page from The main web page from which everything stems is which everything stems is called the homepage (often called the homepage (often identified by file name identified by file name index.htm or default.htm)index.htm or default.htm)

Types of Web PagesTypes of Web Pages

Any web site composed from a set of web pages:Any web site composed from a set of web pages:Some of those pages are Some of those pages are static (abstract) pages static (abstract) pages while while other pages are other pages are dynamics (proactive) pages.dynamics (proactive) pages.

A dynamic page that A dynamic page that will take user name will take user name and password and and password and check it to allow login. check it to allow login.

A static page with A static page with no interaction that no interaction that user will only read user will only read and close if.and close if.

The “Paper” RuleThe “Paper” Rule

The first step to good web design is to turn off your computer and pull out a couple of pieces of paper.

Most poorly designed sites are poorly designed from the start.

First Step: Making the First Step: Making the BlueprintBlueprint

Before even thinking of going to the computer, think of the following:

Goal of the website: What do I want Goal of the website: What do I want people to do once they get there?people to do once they get there?

Target Audience: Who am I designing my Target Audience: Who am I designing my site for?site for?

Content: What will I include in my Content: What will I include in my website?website?

Interactivity: How dynamic do I want my Interactivity: How dynamic do I want my website to be?website to be?

Web Designing Web Designing TipsTipsYou do not have the layout control in a web editor that you do in Word or PowerPoint.

Therefore, the web designers used tablestables to control the layout out of their pages. If you set the borders of the table to 0 width, you can't see the outline of the tables in the web browser.

You will get very You will get very frustrated if you frustrated if you try to design a try to design a web page web page without tables.without tables. Your graphics will Your graphics will not appear where not appear where you want them. you want them.

Areas of a Web PageAreas of a Web Page

MenuMenu

HeaderHeader

ContentContent

LogoLogo

A 2 x 2 LayoutA 2 x 2 Layout

Table within a tableTable within a table

The outer tableThe outer table

The inner tableThe inner table

The inner tableThe inner table

Tables getting complicatedTables getting complicated

Design ThemeDesign Theme

Choose a common layout for your website. The Splash Page will probably differ but interior pages should be the same

Use tables to control placement throughout

Keeping a consistent Keeping a consistent designdesign

Use the same font throughout!

Use consistent graphics in website – do not use ultra modern on one page and calligraphy on another

Use color scheme that is consistent

How to handle ImagesHow to handle Images

If you have a small site, one Images folder at the root will be enough.If your site is going to be big, with many images, you should build a structure where each Folder has its own Images subfolder, to make it easier for you to manage.It is also important to create separate folders for different format files, .doc, .ppt, .ra, etc.

Some Useful Tips• Know your audience• Keep web pages short• Limit the amount of text• Avoid large images• Use web safe colors• Clearly identify all links• Check spelling• Use a site map or directory page• Update and check all links• Include contact information

Once you have decided to establish a web site there are three steps to getting it online.

1 - Get a domain name - This is your personal/private address on the Web.

2 - Find a web hosting service- Here is where your website will reside.

Free vs Private Web Hosting

3 - Design, build and upload your website - The process of website creation.

Let’s go to build a websiteLet’s go to build a website

Let’s go to use Microsoft FrontPage.

And learn how to build powerful website

A good advice A good advice “Don’t reinvent the wheel ““Don’t reinvent the wheel “

•Use pre-designed templates.Use pre-designed templates.

• Download lovely icons, backgrounds and images from the Download lovely icons, backgrounds and images from the

internet.internet.

• Use pre-programmed scripts. Use pre-programmed scripts.