1. Website Design
HowTo Build A Website

2. What is a Web site? A web site is: a presentation tool;
a way to communicate;
a learning tool;
a teaching tool;
a marketing important
tool;

3. The Internet Global network connecting millions of computers
A network is a group of computers and associated devices that are connected by communications facilities
The Internet grew out of an experiment that began in the 1960s by the U.S. Department of Defense (DOD)
Advanced Research Projects Agency (ARPA)

4. Step 1
Think!
Before you do anything else, you need to spend time thinking about the 4w’s.
What is the purpose of the web page/site?
Who is your target audience?
What will bring your audience back?
Where will your audience be using the site?

5. Step 2:Follow The Rules
To create a we site you must follow theses rules:
Rule 1: YOU are NOT the USER.
What you understand is not what a user will understand; ask the users to design the site the way they want.
Rule 2: USERS are NOT PROFESIONALS
Users will not think carefully about the new added features in the Web site without your directions.
Rule 3: Give the common user a little control
Allow the user some choices and the ability to control color and themes on their accounts.

6. Step 2:Follow The Rules
Rule 4: Make sure the visual contents of a site relates to its function.
A nice-looking design must enforce the website functionality
Rule 5: Respect GUI and Web interface conventions.
Designers need to respect conventions of navigation choices, navigation placement, colors, and so on.
Rule 6: Know and respect the Web and Internet medium constraints.
Don’t ignore the differences in the emerging Web medium, color reproduction, bandwidth limitations, and so on.

7. Step 3
Go on a Roundup.
Locate images, files, animations, etc. that you might use and place them in your www directory. It is important that all files be in the same folder.
If you are going to work at home or some place other than the university computer lab, create a www directory on the hard drive, USB drive or whatever.

8. The World Wide Web and Web Browsers
The World Wide Web is one of the more popular services on the Internet
Web server
Host computer
Client
Hypertext Transfer Protocol
Users access Web resources through a Web page
A Web browser is a software program that requests a Web page, interprets the code, and displays the contents on your display device
Microsoft Internet Explorer
Mozilla Firefox
Netscape Navigator
Introduction: Web Site Development and Macromedia Dreamweaver 8

9. Open Website designing tools like Dreamweaver , FrontPage , SeaMonkey,…and start designing your web pages.

10. The World Wide Web and Web Browsers
Introduction: Web Site Development and Macromedia Dreamweaver 8

11. The World Wide Web and Web Browsers
Introduction: Web Site Development and Macromedia Dreamweaver 8

12. Some Things to Remember
You do not have the layout control in a web editor that you do in Word or PowerPoint.
Therefore, the web designers used tables 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 frustrated if you try to design a web page without tables. Your graphics will not appear where you want them.

13. Note: Naming Web Files:
Use all lower case (it will be easier to communicate the URL to others if it is all lower case).
DO NOT have spaces in file names (some old browsers cannot handle spaces. You should rename graphic files if they have spaces)
Save your work often!!!!!!!!
Typically we name the home page in a web site “index.html”
Try to keep file names as short as possible (this prevents errors in typing in URLs)
URL(Universal Resource Locator)= Site Address
ex: URL of hotmail is :

14. Types of Web Pages Any web site composed from a set of web pages:
Some of those pages are static (abstract) pages while other pages are dynamics (proactive) pages.
Web Site
ex:
Web Pages
ex:
Web Page
ex:
Web Pages
ex:
A dynamic page that will take user name and password and check it to allow login.
A static page with no interaction that user will only read and close if.

15. Web Development Languages & Tools
1. HTML/DHTML/XHTML
2. Java / PHP/Cold Fusion
3. Web Design Tools e.g. Frontpage, Dreamweaver.
3. Scripting Languages e.g. VBScript, Javascript
4. Cascading Style Sheets
5. XML
6. …more!!!

16. Let’s go to build a website
A good advice “Don’t reinvent the wheel “
Use pre-designed templates.
Download lovely icons, backgrounds and images from the internet.
Use pre-programmed scripts.
Let’s go to use Adobe Dreamweaver. And learn how to build powerful website

17. Dreamweaver 8: Introduction

18. Content Introduction Initial Screen Title Bar Menu Bar
Document Toolbar
Status Bar
The Standard Toolbar
Panels and Inspectors
The Properties inspector
References

19. Introduction
Dreamweaver 8 is a easy to use software that allows you to create professional web Pages.
Created by Macromedia, and is now developed by Adobe System, which acquired Macromedia in 2005.

20. The properties inspector
Initial Screen
Standard toolbar
Title Bar
Menu Bar
Document toolbar
Panel
Status bar
The properties inspector

21. Title Bar
The title bar contains the name of the program (Marcromedia Dreamweaver 8) and the name of the document we are working with, between parenthesis you can see the name of the file format this file is codified. At the end on the right are the buttons to minimize, maximize/restore and close the program.

22. Menu Bar
The menu bar contains Dreamweaver operations, grouped in drop down menus. When we click on Insert, for example, we'll see the operations related to the different elements that can be inserted in Dreamweaver.
Many of the operations can be done from these menus, but sometimes it's preferable (or compulsory) to do them from the panels.

23. Document Toolbar
The document toolbar contains icons to execute some other habitual operations that the standard toolbar doesn't include.
These operations are for example changing the view of the document, preview, etc.

24. Status Bar
The status bar shows us in every moment the HTML tag we are in (in the image, as we are in a blank document, we are directly on the <body> tag). We also can switch between the selection, drag and zoom modes using the three buttons on the right. You can select the zoom which you want to view the Design View selecting a percentage (the default is 100%).

25. The Standard Toolbar
The standard toolbar contains icons to execute some of the most habitual operations immediately, like Open , Save , etc.

26. Panels and Inspectors
Dreamweaver uses floating windows similar to the toolbar ones, these are known as panels or inspectors. In general, the appearance and options of an inspector changes depending on the selected object.

27. The Properties inspector
The Properties inspector shows and allows us to modify the more frequent properties that are used in the selected elements. For example, when we select element a text it will show the type of font, the size,etc.

28. The World Wide Web and Web Browsers
Nearly all Web pages have unique characteristics, but almost every Web page contains some basic elements
A hyperlink, or link, can link to another place in the same Web page or to an entirely different Web page or site
Most Web pages are part of a Web site
A Web site contains a home page, which provides information about that Web site’s purpose and content
Introduction: Web Site Development and Macromedia Dreamweaver 8

29. The World Wide Web and Web Browsers
Internet Service Provider (ISP)
Business that has a permanent Internet connection and provides temporary connections to customers
Online Service Provider (OSP)
Similar to an ISP, but provides member-only services
Wireless Service Provider (WSP)
Provides Internet access to users with Web-enabled devices or wireless modems
Introduction: Web Site Development and Macromedia Dreamweaver 8

30. The World Wide Web and Web Browsers
Introduction: Web Site Development and Macromedia Dreamweaver 8

31. Types of Web Sites Portal Web Site News Web Site
Informational Web Site
Business/Marketing Web Site
Educational Web Site
Introduction: Web Site Development and Macromedia Dreamweaver 8

32. Types of Web Sites Entertainment Web Site Advocacy Web Site
Personal Web Site
Blog
Introduction: Web Site Development and Macromedia Dreamweaver 8

33. Portal Web Site
Introduction: Web Site Development and Macromedia Dreamweaver 8

34. News Web Site
Introduction: Web Site Development and Macromedia Dreamweaver 8

35. Informational Web Site
Introduction: Web Site Development and Macromedia Dreamweaver 8

36. Business/Marketing Web Site
Introduction: Web Site Development and Macromedia Dreamweaver 8

37. Educational Web Site
Introduction: Web Site Development and Macromedia Dreamweaver 8

38. Entertainment Web Site
Introduction: Web Site Development and Macromedia Dreamweaver 8

39. Advocacy Web Site
Introduction: Web Site Development and Macromedia Dreamweaver 8

40. Personal Web Site
Introduction: Web Site Development and Macromedia Dreamweaver 8

41. Blog
Introduction: Web Site Development and Macromedia Dreamweaver 8

42. Planning a Web Site – Purpose
Purpose and Goal
Purpose Statement
Target Audience
New Web Technologies
Broadband
T1 lines, DSL, ISDN, Fiber optics, Cable modems, Baseband
Multimedia
Web Site Comparison
Introduction: Web Site Development and Macromedia Dreamweaver 8

43. Planning a Web Site – Content
Value-added Content
Text
Images
Color Palette
Multimedia
Introduction: Web Site Development and Macromedia Dreamweaver 8

44. Design Basics – Navigation Map
Structure
Linear
Hierarchical
Web (random)
Grid
Hybrid
Tools
Navigational Elements
Introduction: Web Site Development and Macromedia Dreamweaver 8

45. Developing a Web Site – Development Basics
Typography
Font
Typeface
Web-safe fonts
Images
Page Layout
Color
Introduction: Web Site Development and Macromedia Dreamweaver 8

46. Reviewing and Testing a Web Site
Is the Web site free of spelling and/or grammatical errors?
Is the page layout consistent, and does it generate a sense of balance and order?
Are any links broken?
Do multimedia interactivity and forms function correctly?
Introduction: Web Site Development and Macromedia Dreamweaver 8

47. Reviewing and Testing a Web Site
Do the more widely used browsers display the Web site properly?
Does the Web site function properly in different browsers, including older browser versions?
Have you initiated a group test, in which you have asked other individuals to test your Web site and provide feedback?
Introduction: Web Site Development and Macromedia Dreamweaver 8

48. Publishing a Web Site – Publishing Basics
Obtain a domain name
IP address
Domain Name System
Internet Corporation for Assigned Names and Numbers
Acquire server space
Server logs
Secure Sockets Layer (SSL)
Publish the Web site
Uploading
Introduction: Web Site Development and Macromedia Dreamweaver 8

49. Publishing a Web Site – Publishing Basics
Introduction: Web Site Development and Macromedia Dreamweaver 8

50. Maintaining a Web Site
Changing content, either by adding new text and images or by deleting obsolete material
Checking for broken links and adding new links
Documenting the last change date (even when no revisions have been made)
Introduction: Web Site Development and Macromedia Dreamweaver 8

51. Methods and Tools Used to Create Web Pages
Text editor
HTML or XHTML editor
Software applications
WYSIWYG text editor
Microsoft FrontPage
Macromedia Dreamweaver
Introduction: Web Site Development and Macromedia Dreamweaver 8

52. Web Site Languages HTML and XHTML
Written in plain text and saved in ASCII format
Source Code
Elements
One-sided elements (self-closing) vs. two-sided elements
Attribute / Property
Value modifier
Document content
Introduction: Web Site Development and Macromedia Dreamweaver 8

53. Web Site Languages
Introduction: Web Site Development and Macromedia Dreamweaver 8

54. Web Site Languages
Introduction: Web Site Development and Macromedia Dreamweaver 8

55. Web Page Authoring Programs
WYSIWYG text editor
Allows you to view a document as it will appear in the final product and to edit the elements directly within that view
There is no need to know HTML and XHTML, but you can still modify the code, if necessary
Introduction: Web Site Development and Macromedia Dreamweaver 8

56. Macromedia Dreamweaver 8
A drag-and-drop workflow
Expanded Cascading Style Sheets (CSS) support
A zoom tool which makes it easier to check graphics alignment, select small items, and work with small type
Secure FTP
Introduction: Web Site Development and Macromedia Dreamweaver 8

57. Macromedia Dreamweaver 8
Increased support for a platform-independent development environment
Enhanced coding and editing tools, including two new toolbars: coding and style rendering
A hand tool that lets you drag items
Added support for Flash video
Introduction: Web Site Development and Macromedia Dreamweaver 8

58. Macromedia Dreamweaver 8
Introduction: Web Site Development and Macromedia Dreamweaver 8

59. Macromedia Dreamweaver 8
Introduction: Web Site Development and Macromedia Dreamweaver 8

60. Project Summary
Describe the significance of the Internet and its associated terms
Describe the World Wide Web and its associated terms
Identify the difference between the Internet and the World Wide Web
Specify the difference between a Web page and a Web site
Define Web browsers and identify their main features
Introduction: Web Site Development and Macromedia Dreamweaver 8

61. Project Summary Identify the nine types of Web sites
Discuss how to plan, design, develop, test, publish, and maintain a Web site
Identify the various methods and tools used to create a Web page and Web site
Recognize the basic elements within XHTML
Discuss the advantages of using Web page authoring programs such as Dreamweaver
Introduction: Web Site Development and Macromedia Dreamweaver 8

62. Introduction Complete
Web Site Development and Macromedia Dreamweaver 8

63. References http://en.wikipedia.org/wiki/Adobe_Dreamweaver