Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to Web Design Part 1 w. Mike Tyler. Copyright 2005 - The Small Business Depot2 Use of this material If you would like to be able to distribute.

Similar presentations


Presentation on theme: "Introduction to Web Design Part 1 w. Mike Tyler. Copyright 2005 - The Small Business Depot2 Use of this material If you would like to be able to distribute."— Presentation transcript:

1 Introduction to Web Design Part 1 w. Mike Tyler

2 Copyright 2005 - The Small Business Depot2 Use of this material If you would like to be able to distribute this PowerPont presentation from your own website – simply credit the author with a link to The small Business Depot. Use the following: Link URL: http://www.smallbizdepot.comhttp://www.smallbizdepot.com Link text: By Mike Tyler – The Small Business Depot Copyright – 2005 – The Small Business Depot

3 Copyright 2005 - The Small Business Depot3 Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URLs and Ips Registrars

4 Copyright 2005 - The Small Business Depot4 Clients & Servers Clients (Browser) Internet Explorer Firefox Mozilla Netscape Opera Amaya AOL MSN Servers Apache Microsoft Netscape zeus AOLserver AV JavaWebServer Oracle

5 Copyright 2005 - The Small Business Depot5 Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URLs and Ips Registrars

6 Copyright 2005 - The Small Business Depot6 Internet Service Providers Connect Clients to the Internet Phone Company AOL Earthlink Verizone NetZero Basic internet connection Dialup/DSL/Cable/Sat Email

7 Copyright 2005 - The Small Business Depot7 Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URLs and Ips Registrars

8 Copyright 2005 - The Small Business Depot8 Web Hosting Services Connects Web Sites to the Internet Computer (server) farm Web server software Firewall hardware and software IT services (Backup, troubleshooting, hardware repair) Disk space Bandwidth / connection to internet Routers and switchers Email server / storage

9 Copyright 2005 - The Small Business Depot9 Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URLs and Ips Registrars

10 Copyright 2005 - The Small Business Depot10 Domains URLs and IPs Domain name: The specific address of a computer on the Internet microsoft.com Uniform Resource Locator (URL): http://www.microsoft.com/faqs.html Internet protocol (IP) address 192.168.1.1

11 Copyright 2005 - The Small Business Depot11 Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URLs and Ips Registrars

12 Copyright 2005 - The Small Business Depot12 Domain Registrar A company that provides domain name registration services for a fee. Maintain database which maps domain names to IPs Propagate new domain name/IP address information across the internet

13 Copyright 2005 - The Small Business Depot13 Creating a Web Site 1.Choose a domain name 2.Register with a Registrar 3.Choose a hosting service 4.Tell Registrar the IP address 5.Create web content 6.Store (publish) onto hosting server (FTP) 7.Submit new site to search engines

14 Copyright 2005 - The Small Business Depot14 12 Principles of good web design 1.Visitor-centric, clear purpose 2.Progressive disclosure 3.Displays quickly 4.Browser compatible 5.Intuitive navigation 6.Spelling, grammar, writing 7.Secure (eCommerce) 8.Attractive design, easy to read 9.Cultural bias? (Regional? Domestic? International?) 10.No technical problems (broken links, buggy scripts) 11.Maintainable (separate content from style) 12.Search Engine Accessible

15 Copyright 2005 - The Small Business Depot15 Creating your Web Site Technologies & Tools Markup Languages HTML, DHTML, XML, XSLT, etc.... Cascading Style Sheets (CSS) Scripting languages perl,javascript,php, etc.... Web creation and editing software Notepad, FrontPage, Coldfusion, Flash, Hotmetal, Site Builder, etc..

16 Copyright 2005 - The Small Business Depot16 Markup Languages - HTML Derived from SGML (Standard Generalized Markup Language ) HyperText Markup Language

17 Copyright 2005 - The Small Business Depot17 HTML Fundamentals Clear text, case insensitive Ignores white space Comprised of tags Open tags and closed tags

18 Copyright 2005 - The Small Business Depot18 HTML - Fundamentals Open tags, Closed tags stuff text to be bolded level 1 heading text Comments

19 Copyright 2005 - The Small Business Depot19 HTML – Fundamentals Document Structure Header Body

20 Copyright 2005 - The Small Business Depot20 HTML – Fundamentals Basic Structure The title of your html page

21 Copyright 2005 - The Small Business Depot21 HTML - Fundamentals header Hello world

22 Copyright 2005 - The Small Business Depot22 HTML - Fundamentals header Mike Tyler PO Box 190387 Hungry Horse, Mt 59919

23 Copyright 2005 - The Small Business Depot23 HTML - Fundamentals header Mike Tyler PO Box 190387 Hungry Horse, Mt 59919

24 Copyright 2005 - The Small Business Depot24 HTML - Fundamentals header Mike Tyler PO Box 190387 Hungry Horse, Mt 59919

25 Copyright 2005 - The Small Business Depot25 HTML - Fundamentals header Mike Tyler PO Box 190387 Hungry Horse, Mt 59919

26 Copyright 2005 - The Small Business Depot26 HTML - Fundamentals header Mike Tyler PO Box 190387 Hungry Horse, Mt 59919

27 Copyright 2005 - The Small Business Depot27 HTML - Fundamentals header Mike Tyler PO Box 190387 Hungry Horse, Mt 59919 Read my Bio

28 Copyright 2005 - The Small Business Depot28 HTML - Fundamentals

29 Copyright 2005 - The Small Business Depot29 HTML - Fundamentals ANCHORS (Hypertext Link) Displayed text Attributes NAME = text TITLE = "text" TARGET = frame_name|window_name

30 Copyright 2005 - The Small Business Depot30 HTML – Fundamentals Hypertext links Click this link opens mywebpage.html in the window / frame named window2 Click this link window2

31 Copyright 2005 - The Small Business Depot31 HTML – Fundamentals Hyperlink Colors

32 Copyright 2005 - The Small Business Depot32 HTML – Fundamentals Colors Cathode Ray Tubes (CRT)

33 Copyright 2005 - The Small Business Depot33 HTML – Fundamentals Colors color = red (Browser compatibility issues) color = #FF0000 values vary from 00 to FF (hexadecimal) 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f Red Green Blue #FF FF FF

34 Copyright 2005 - The Small Business Depot34 HTML – Fundamentals Headings Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text. Heading 1 level text Heading 2 level text Heading 3 level text Heading 4 level text Heading 5 level text Heading 6 level text

35 Copyright 2005 - The Small Business Depot35 HTML – Fundamentals Lists Unordered list apples bananas grapes strawberries Ordered list apples bananas grapes strawberries

36 Copyright 2005 - The Small Business Depot36 HTML – Fundamentals Lists Unordered list apples bananas grapes strawberries Ordered list II.apples III.bananas IV.grapes V.strawberries

37 Copyright 2005 - The Small Business Depot37 HTML – Fundamentals Tables Class Grades Student Grade Tom B+ Sue A-

38 Copyright 2005 - The Small Business Depot38 HTML – Fundamentals Tables

39 Copyright 2005 - The Small Business Depot39 HTML – Fundamentals Tables BORDER=value ALIGN=left|right|center CELLSPACING=value CELLPADDING=value WIDTH=value|percent

40 Copyright 2005 - The Small Business Depot40 HTML – Fundamentals Tables Class Grades Student Grade Tom B+ Sue A-

41 Copyright 2005 - The Small Business Depot41 HTML – Fundamentals Tables StudentGrade TomB- SueA+ Class Grades

42 Copyright 2005 - The Small Business Depot42 HTML – Fundamentals Tables rowspan and colspan

43 Copyright 2005 - The Small Business Depot43 HTML – Fundamentals Student Grades Student Grade Tom A Sue

44 Copyright 2005 - The Small Business Depot44 HTML – Fundamentals Student Grades StudentGrade Tom A Sue

45 Copyright 2005 - The Small Business Depot45 Screen Compatibility 1280 x 1024 1024 x 768 800 x 600 640 x 480

46 Copyright 2005 - The Small Business Depot46 HTML – Fundamentals Tables Tables are frequently used to layout the basic web page design. 640 1280

47 Copyright 2005 - The Small Business Depot47 HTML – Fundamentals Frames Basic Frames Floating Frames (inline frames) Picture in picture Frames let you divide a screen into windows with each window viewing a different web page.

48 Copyright 2005 - The Small Business Depot48 HTML – Fundamentals Basic Frames Banner Menu Content Footer

49 Copyright 2005 - The Small Business Depot49 HTML – Fundamentals Basic Frames Basic tags.... Basic attributes cols = values rows = values name = frame_name src = frame_source(url) target = frame_name

50 Copyright 2005 - The Small Business Depot50 HTML – Fundamentals Basic Frames Banner Menu Content Footer

51 Copyright 2005 - The Small Business Depot51 HTML – Fundamentals Basic Frames

52 Copyright 2005 - The Small Business Depot52 HTML – Fundamentals Basic Frames Welcome to my page. Continue to the frame-free version.

53 Copyright 2005 - The Small Business Depot53 HTML – Fundamentals Basic Frames FRAMESET attributes FRAMEBORDER="yes|no"|0 BORDER=pixels BORDERCOLOR="#hexcolor|colorname"..

54 Copyright 2005 - The Small Business Depot54 HTML – Fundamentals Basic Frames Individual FRAME attributes SCROLLING="yes|no|auto" NORESIZE MARGINWIDTH=pixels MARGINHEIGHT="pixels" BORDERCOLOR="color" FRAMESPACING="pixels" FRAMEBORDER="yes|no"|0 NAME=frame_name

55 Copyright 2005 - The Small Business Depot55 HTML – Fundamentals Floating Frames Floating frames allow you to create a frame within the boundaries of a page Basic FramesFloating Frames

56 Copyright 2005 - The Small Business Depot56 HTML – Fundamentals Floating Frames Attributes SRC=URL HEIGHT=pixels|percent, WIDTH=pixels|percent HSPACE=pixels VSPACE=pixels ALIGN=left|right FRAMEBORDER=0

57 Copyright 2005 - The Small Business Depot57 HTML – Fundamentals Floating Frames

';
Ads by Google