Andytech

INTRODUCTION
What is Website Designing?
Web designing encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardized code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up. Web design partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role involves creating mark up then they are also expected to be up to date with web accessibility guidelines.
Website Designing describes the tasks of designing HTML driven web pages to be displayed over the World Wide Web. Web design encompasses a number of important elements including color, layout, and overall graphical appearance. Web designers consider the site's audience, function, and traffic to specific sections when deciding designs. Web design has become a very lucrative business as more and more companies create websites.
What is a Web Site?
A web site consists of a home page connected to other files by hyperlinks. A web site can be disk-based (disk-based web site: A web site hosted on a local computer.) or server-based (server-based web site: A web site hosted by a Web server, such as Microsoft Internet Information Server) (MIIS). A Web site is a set of linked documents, which are about related topics or have a shared purpose.
There are so many softwares used in the creation, editing and designing of websites. Some of these softwares allow you to create websites using codes only, while some can use graphical approach. These programs include;
1. Notepad
2. Microsoft FrontPage
3. Macromedia Dreamweaver
4. Web Easy Professional 7
5. Web Page Maker V2
6. Microsoft Publisher etc
Before You Begin
The first step in good Web design is planning. You need to consider who your audience is, what your goals for the site are, and how you will create an effective layout and linking structure for your pages. The best way to visualize how your site will be organized is to create a site map and storyboard. The site map will be your guide to how the user will navigate between the pages.(See Figure 1.)

Story Board
The storyboard will indicate how each page is laid out including where information and navigation elements are located. (See Figure 2.) NOTE: It’s best to sketch several layouts on paper first before launching Dreamweaver and Fireworks.

Web Design Tips
1. Know Your Audience: Will visitors to your site have the latest equipment, newest browsers, and fast connections? Or will they be looking at your pages on a 15-inch monitor over a 56K modem?
2. Be Consistent: Establish a consistent “look and feel” for your site. Keep your navigation and logos in the same place on all pages. Choose your colors carefully and use them to give visual cues to users to let them know where they are in the site.
3. Keep It Simple: Limit the number of links to 5 or 6 per page. The quickest way for a site visitor to get lost is to offer too many choices. Make sure that the user can get to any page in your site within 3 clicks. Of course, there is no “correct” way to organize a site, but give some thought to how you name folders and files and to where you place them.
4. File Naming Conventions:
• No spaces in file names. (Use_underscores_instead.)
• No upper-case letters.
• No unusual characters (/, ‘, ., “, etc.).

What are HMTL tags?
HMTL Tags are specifically formatted text that ‘markers’ for web browser to read and interpret. These ‘marker’ tell the web browser what and how to display things on the web page. Tags are placed Min or around text and images [text and images are some of the ‘things’] that you want to have appear on your pages. HTL has a whole bunch of tags [just like the alphabet has a whole bunch of letters [that the web designers can use to build web pages. As mentioned above, tags have a specific structure so that when the browser is reading an HMTL page, it knows the tags from the normal text.
Tags are typically words or abbreviations of words placed between angled brackets. So for example: to make text bold. HTML has the ‘bold’ tag that looks like this
this text will be bolded
Another commonly used tag is the paragraph tag:
 this is a paragraph of text
this text will be italized
Tag Diagram
You may have noticed that HTML tags come in pairs; HTML has both an opening tag [<tag name>] and a closing tag [</tag name>]. The only difference between the opening and closing tag is that the closing tag contains an extra forward slash.
AN HTML PAGE IS DIVIDED INTO TWO MAJOR SECTIONS
1. The Head: The head (<head>) section contains underlying information about the page which does not get displayed in the web page (except for the title of the page). It does however, have an effect on how the web page is displayed.
2. The Body: The body (<body>) section contains all the stuff that appears on the actual web page when someone happens to come along with their web browser. We are taking about the actual text, image, flash movies, and so on that people will see.
You will notice that both the head and the body section of a website are marked in the HTML page with their respective tags :(<head></head>) and (<body<</body>).
If the body tag create the body of an HTML page, and the head tag create the head of an HTML page, how do you create an HTML page itself? You guessed (<html, use the HTML page <html></html>. The mother of all tags is the HTML (<HTML>) tag, and like all tags it must have a start tag (<html>) and an end tag (</html). The difference between the start and end tags is the forward slash (/), but you already knew that. Every web page MUST begin and end with the HTML tag, otherwise the web browser (program liken internet explorer) will not be able to display the page. You also have to have the head tags and the body tags. All the other tags are optional. So the bare-bone HTML page must have these tags and in this order:
<html><head><title>Title Of Your Page </title></head<body></body><html>
Time to build your firs HTML page by hand

This is one of the word processing packages. It is also a web editing softwares that can allow the user to create a web page s using codes ONLY.
To Load Notepad
1. Click on start button
2. Select all programs
3. Select accessories and click on Notepad
4. Allow the system to load the environment for you
OR
1. Click on start button
2. Select run
3. At the run dialog box displayed, type NOTEPAD
4. Click on ok
5. Allow the system to load the environment for you
To Save a Web Page
1. Click on file at the menu bar
2. Select save as
3. At the box displayed, click inside the look inbox and select the folder created for the website
4. Type the name of the web page, press dot (.) and type html e.g. index.html
5. Click on save
6. Allow the system to save the web page for you
To Preview a Saved Web Page
1. Double click o the folder created on desktop
2. Double click on the name used in saving the web page
3. Allow the system to open it using the next available browser.
To Edit a Web Page Using Notepad
1. Double click on the folder created on desktop
2. Right click on the name of the web page to be edited
3. Select open with and click on Notepad
4. Allow the system to open the web page using Notepad
SOME CODE TAGS USED IN WEB DESIGNING
To Insert Page Title
<html>
<head>
<title>design a website</title>
</head>
<body>
</body>
</html>
To Apply Background Color
<body bgcolor=”##76685” topmargin=”0”>
Ton Indicate a Paragraph
Type Your Text
Type Your Text
FONT
Font Character: 
Font Color: 
Font Size: 
To Insert a Horizontal Line
<hr color="#008000">
To Insert a Text Field or Textbox
<input type="text" name="T1" size="20" value="bnbn">
To Insert a List Box or Drop down Box
<select size="1" name="D1">
<option selected>Select Gender</option>
<option>Male</option>
<option>Female</option>
</select>
To Insert Check Button
<input type="checkbox" name="C1" value="ON">
Marquee Effect
<marquee>Welcome to Prevailing Computers</marquee

To Insert Hyperlink

<a href="www.google.com">Home</a>

NB: Before you preview your work, save each action.

Microsoft FrontPage is one of the Microsoft Office application packages programmed by Microsoft Corporation. It is one of the best website designing and edition softwares that allows user to create or edit already created websites using both coding and graphical approaches.
To Load Microsoft FrontPage environment
1. Click on start button
2. Select all programs
3. Locate and Click on Microsoft FrontPage
4. Allow the system to load the environment for you
OR
1. Click on start button
2. Select run
3. At the box displayed, type FRONTPG
4. Click on ok and allow the system to load the environment for you
Views in FrontPage
1. Normal: This view in FrontPage allows the user to design a website using a graphical approach. When the user designs, FrontPage automatically generates the codes at the HTML view.
2. HTML: This view allows the user to create a website using codes ONLY.
3. Preview: This is used to have a browser-like preview of the active webpage.
To Save a Web Page
1. Click on file at the menu bar
2. Select Save As
3. At the box displayed, click inside the save inbox and select the folder created for your website
4. Type the name for the web page
5. Click on save
To Insert Page Title
1. Follow steps 1 to 4 above
2. Click on change title
3. At the box displayed, type the new page title
4. Click on ok and click on save
To Apply Page Background
1. At the normal view, click on file at the menu bar
2. Select properties
3. At the box displayed, click on background tab
4. Click insides the background color and select any color of your choice
5. Click on ok

To Insert a Table
1. Click on tables at the menu bar
2. Select insert and click on tables
3. At the box displayed, set the number of columns and rows to be inserted
4. Set the border size to zero(0)
5. Set the alignment to be center
6. Click on ok
7. Allow the system to insert the table for you

To Merge Table Cells
1. Highlight the cells to be merged
2. Click on tables at the menu bar
3. Select merge cells
4. Allow the system to merge the cells
To Insert an Image
1. Click on insert at the menu bar
2. Select picture and click on from file
3. At the box displayed, click inside the look inbox and select the folder created for your website
4. Select the name of the image to be inserted
5. Click on insert
6. Allow the system to insert the image for you
7. Resize the image if need be
To Insert a Horizontal line
1. Click on insert at the menu bar
2. Select horizontal line
3. Allow the system to insert the line for you
4. To change the color of the line, select the line and click on format at the menu bar
5. Select properties
6. At the box displayed, select the color of your choice
7. Make other necessary changes
8. Click on ok
To Insert Marquee Behavior
1. Click on insert at the menu bar
2. Click on web component
3. At the box displayed, select dynamic effects
4. Select marquee and click on finish
5. At the box displayed, type the text for the marquee
6. Select the direction of flow, behavior etc
7. Click on ok
8. Select the inserted marquee text and change the font color
To Insert Hover Button
1. Click on insert at the menu bar
2. Click on web component
3. At the box displayed, select dynamic effects
4. Select Hover button and click on finish
5. At the box displayed, type the button text
6. Browse the link and select the font and background color
7. Click on ok
To Insert Banners in Form of images
1. Click on insert at the menu bar
2. Click on web component
3. At the box displayed, select dynamic effects
4. Select Banners Ad manager and click on finish
5. At the box displayed, click on add
6. At the box displayed, select the image
7. Click on open
8. Continue steps 5 to 7 above until you have inserted all the images needed
9. Click on ok
To Add Search Engine Box
1. Click on insert at the menu bar
2. Click on web component
3. At the box displayed, select web search
4. Click on finish
5. At the box displayed, set the necessary settings
6. Click on ok
To create a Photo Gallery
1. Click on insert at the menu bar
2. Click on web component
3. At the box displayed, select dynamic effects
4. Click photo gallery and select any style of your choice
5. Click on finish
6. At the box displayed, click on add
7. Select either from file or from scanner
8. At the box displayed, select the image to be inserted
9. Click on open
10. Continue steps 6 to 9 above until you are done with the image insertion
11. Make other necessary changes like image captions and description
12. Click on ok
To Hyperlink a Button
1. Highlight the button to be linked
2. Click on insert at the menu bar
3. Select hyperlink
4. At the box displayed, click on browse for file
5. At the box displayed, select the folder where the web page was saved
6. Select the web page name and click on ok
7. Click on ok again
To Preview a Web Page in a Browser
1. Click on file at the me nu bar
2. Select preview in browser
3. At the box displayed, select the browser to be used
4. Click on preview
5. Allow the system to preview the web page using the selected browser.
To Insert a Web Page Background Music
1. Click on file at the menu bar
2. Select properties
3. Click on general on top of the box
4. Click on browse
5. At the box displayed, select the music to be inserted
6. Click on open and click on ok
To Apply a Page Transition
1. Click on format at the menu bar
2. Select page transition
3. At the box displayed, select the event
4. Select the transition effect of your choice
5. Click on ok

To Apply a Page Theme
1. Click on format at the menu bar
2. Select themes
3. At the box displayed, select any theme of your choice
4. Click on ok
Working with Templates
Templates are already made web pages by professionals which a user can select and edit as to make his work easier.
To Use a Template
1. Click on file at the menu bar
2. Select new and click on web or page
3. At the task pane box displayed, click on page templates
4. At the box displayed, select the template to be used
5. Click on ok
6. Allow the system to open the template
7. Start editing the work.
Go to my facebook page for more

Friday 5 August 2016

Sunday 17 June 2012

How to create a website