Introduction to web design

279 views

Published on

& concept explained easily

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
279
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to web design

  1. 1. Introduction to Web Design Part 1 w. Mike Tyler
  2. 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.com Link text: By Mike Tyler – The Small Business Depot Copyright – 2005 – The Small Business Depot
  3. 3. Copyright 2005 - The Small Business Depot3 Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
  4. 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. 5. Copyright 2005 - The Small Business Depot5 Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
  6. 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. 7. Copyright 2005 - The Small Business Depot7 Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
  8. 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. 9. Copyright 2005 - The Small Business Depot9 Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
  10. 10. Copyright 2005 - The Small Business Depot10 Domain’s URL’s 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. 11. Copyright 2005 - The Small Business Depot11 Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
  12. 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 IP’s Propagate new domain name/IP address information across the internet
  13. 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. 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. 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. 16. Copyright 2005 - The Small Business Depot16 Markup Languages - HTML Derived from SGML (Standard Generalized Markup Language ) HyperText Markup Language
  17. 17. Copyright 2005 - The Small Business Depot17 HTML Fundamentals Clear text, case insensitive Ignores white space Comprised of tags <tag /> Open tags and closed tags
  18. 18. Copyright 2005 - The Small Business Depot18 HTML - Fundamentals  Open tags  <name attributes/>  <hr/>, <br/>  <img src=“url” width=‘100px’ height=’60px’/>  Closed tags  <name attributes> stuff </name>  <b>text to be bolded</b>  <h1>level 1 heading text</h1>  Comments < ! - - comment text -- >
  19. 19. Copyright 2005 - The Small Business Depot19 HTML – Fundamentals Document Structure Header Body < / HTML> < HTML >
  20. 20. Copyright 2005 - The Small Business Depot20 HTML – Fundamentals Basic Structure <html> <head> <title> The title of your html page </title> <meta_tags/> </head> <body> <! - - your web page content and markup - -> </body> </html>
  21. 21. Copyright 2005 - The Small Business Depot21 HTML - Fundamentals header <body> Hello world </body>
  22. 22. Copyright 2005 - The Small Business Depot22 HTML - Fundamentals header <body> Mike Tyler PO Box 190387 Hungry Horse, Mt 59919 </body>
  23. 23. Copyright 2005 - The Small Business Depot23 HTML - Fundamentals header <body> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br> </body>
  24. 24. Copyright 2005 - The Small Business Depot24 HTML - Fundamentals header <body> <font face=“Arial,Times,Courier” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </body>
  25. 25. Copyright 2005 - The Small Business Depot25 HTML - Fundamentals header <body> <p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> </body>
  26. 26. Copyright 2005 - The Small Business Depot26 HTML - Fundamentals header <body> <p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> <img src=‘http://www.myserver.com/images/mike.jpg’/> </body>
  27. 27. Copyright 2005 - The Small Business Depot27 HTML - Fundamentals header <body> <p align=‘center’> <font face=‘Arial,Lucida Sans’ color=‘red’ size=3> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> <img src=‘http://www.domain.com/images/mike.jpg’> <a href=‘biopage.html’>Read my Bio</a> </body>
  28. 28. Copyright 2005 - The Small Business Depot28 HTML - Fundamentals
  29. 29. Copyright 2005 - The Small Business Depot29 HTML - Fundamentals ANCHORS (Hypertext Link) <A href=“url” attributes>Displayed text </A> Attributes  NAME = “text”  TITLE = "text"  TARGET = “frame_name|window_name”
  30. 30. Copyright 2005 - The Small Business Depot30 HTML – Fundamentals Hypertext links Click this link opens mywebpage.html in the window / frame named “window2” <a href=“mywebpage.html” target=“window2” >Click this link </a> window2
  31. 31. Copyright 2005 - The Small Business Depot31 HTML – Fundamentals Hyperlink Colors <BODY LINK=color, VLINK=color, ALINK=color > <BODY LINK=“blue”, VLINK=“purple”, ALINK=“red” > <BODY LINK=“#0000FF”, VLINK=“#FF00FF”, ALINK=“#FF0000” >
  32. 32. Copyright 2005 - The Small Business Depot32 HTML – Fundamentals Colors Cathode Ray Tubes (CRT)
  33. 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. 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. <h1>Heading 1 level text</h1> <h2>Heading 2 level text</h2> <h3>Heading 3 level text</h3> <h4>Heading 4 level text</h4> <h5>Heading 5 level text</h5> <h6>Heading 6 level text</h6>
  35. 35. Copyright 2005 - The Small Business Depot35 HTML – Fundamentals Lists Unordered list <ul> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ul> Ordered list <ol type=‘i’ start=‘2’> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ol>
  36. 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. 37. Copyright 2005 - The Small Business Depot37 HTML – Fundamentals Tables <TABLE> <CAPTION ALIGN="bottom">Class Grades</CAPTION> <TR> <TH>Student</TH> <TH>Grade</TH> </TR> <TR> <TD>Tom</TD> <TD>B+</TD> </TR> <TR> <TD>Sue</TD> <TD>A-</TD> </TR> </TABLE>
  38. 38. Copyright 2005 - The Small Business Depot38 HTML – Fundamentals Tables
  39. 39. Copyright 2005 - The Small Business Depot39 HTML – Fundamentals Tables  BORDER=value  ALIGN=left|right|center  CELLSPACING=value  CELLPADDING=value  WIDTH=value|percent
  40. 40. Copyright 2005 - The Small Business Depot40 HTML – Fundamentals Tables <TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2” ALIGN="RIGHT"> <CAPTION ALIGN="bottom">Class Grades</CAPTION> <TR> <TH>Student</TH> <TH>Grade</TH> </TR> <TR> <TD>Tom</TD> <TD>B+</TD> </TR> <TR> <TD>Sue</TD> <TD>A-</TD> </TR> </TABLE>
  41. 41. Copyright 2005 - The Small Business Depot41 HTML – Fundamentals Tables Student Grade Tom B- Sue A+ Class Grades
  42. 42. Copyright 2005 - The Small Business Depot42 HTML – Fundamentals Tables rowspan and colspan
  43. 43. Copyright 2005 - The Small Business Depot43 HTML – Fundamentals <TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center"> <TR> <TD colspan=2 align='center'> <font color="red"><b>Student Grades</b></font> </TD> </TR> <TR> <TD><b>Student</b></TD> <TD><b>Grade</b></TD> </TR> <TR> <TD>Tom</TD> <TD rowspan=2>A</TD> </TR> <TR> <TD>Sue</TD> </TR> </TABLE>
  44. 44. Copyright 2005 - The Small Business Depot44 HTML – Fundamentals Student Grades Student Grade Tom A Sue
  45. 45. Copyright 2005 - The Small Business Depot45 Screen Compatibility 1280 x 1024 1024 x 768 800 x 600 640 x 480
  46. 46. Copyright 2005 - The Small Business Depot46 HTML – Fundamentals Tables  Tables are frequently used to layout the basic web page design. 640 1280
  47. 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. 48. Copyright 2005 - The Small Business Depot48 HTML – Fundamentals Basic Frames Banner Menu Content Footer
  49. 49. Copyright 2005 - The Small Business Depot49 HTML – Fundamentals Basic Frames Basic tags  <frameset> ..</frameset>  <frame />  <noframes> .. </noframes> Basic attributes  cols = “values”  rows = “values”  name = “frame_name”  src = “frame_source(url)”  target = “frame_name”
  50. 50. Copyright 2005 - The Small Business Depot50 HTML – Fundamentals Basic Frames Banner Menu Content Footer
  51. 51. Copyright 2005 - The Small Business Depot51 HTML – Fundamentals Basic Frames <frameset rows=“80,*,80”> <frame src=“banner.html” /> <frameset cols = “25%,75%” > <frame src=“menu.html” /> <frame src=“content.html” /> </frameset> <frame src=“footer.html” /> </frameset>
  52. 52. Copyright 2005 - The Small Business Depot52 HTML – Fundamentals Basic Frames <frameset rows=“80,*,80”> <frame src=“banner.html” /> <frameset cols = “25%,75%” > <frame src=“menu.html” /> <frame src=“content.html” /> </frameset> <frame src=“footer.html” /> <noframes> <body> Welcome to my page. <A HREF="noframes.htm">Continue</A> to the frame-free version. </body> </noframes> </frameset>
  53. 53. Copyright 2005 - The Small Business Depot53 HTML – Fundamentals Basic Frames FRAMESET attributes  FRAMEBORDER="yes|no"|0  BORDER=pixels  BORDERCOLOR="#hexcolor|colorname" < frameset rows="80,*,80" border=2 bordercolor=“red" > .. .. </frameset>
  54. 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. 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 Frames Floating Frames
  56. 56. Copyright 2005 - The Small Business Depot56 HTML – Fundamentals Floating Frames <IFRAME attributes ></IFRAME> Attributes  SRC=URL  HEIGHT=pixels|percent,  WIDTH=pixels|percent  HSPACE=pixels  VSPACE=pixels  ALIGN=left|right  FRAMEBORDER=0
  57. 57. Copyright 2005 - The Small Business Depot57 HTML – Fundamentals Floating Frames <IFRAME NAME=“frame_name” ALIGN="right" HSPACE=“40” VSPACE=“40” WIDTH="75%" HEIGHT=“150” FRAMEBORDER=0 SRC=http://www.mysite/mypage.htm > </IFRAME>
  58. 58. Copyright 2005 - The Small Business Depot58 HTML – Fundamentals Hypertext links <a href=“page.html” target=“blank” >Click this link </a>  Creates new window for the page <a href=“page.html” target=“parent” >Click this link </a>  Opens page in the parent frame/wind of this frame/window <a href=“page.html” target=“top” >Click this link </a>  Opens page in top most frame/window
  59. 59. Copyright 2005 - The Small Business Depot59 HTML – Fundamentals DIV and ILAYER Allows you create a position-able block of content. Content positioned within this block
  60. 60. Copyright 2005 - The Small Business Depot60 HTML – Fundamentals DIV <div attributes> content </div> attributes ID=“name” STYLE = “style parameters re: CSS”
  61. 61. Copyright 2005 - The Small Business Depot61 HTML – Fundamentals DIV < DIV ID=“fred” STYLE = “POSITION:absolute|relative; VISIBILITY:visible:hidden; Z-INDEX:number; WIDTH:width in pixels; HEIGHT:height in pixels; TOP:pixels from top of page or block; LEFT:pixels from left edge of page or block; PADDING:margin in pixels; other style attributes; “ > content </DIV>
  62. 62. Copyright 2005 - The Small Business Depot62 HTML – Fundamentals DIV contentc content content content content content content
  63. 63. Copyright 2005 - The Small Business Depot63 <div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ffffff; "> HTML – Fundamentals DIV
  64. 64. Copyright 2005 - The Small Business Depot64 HTML – Fundamentals CASCADING STYLE SHEETS (CSS)  Styles enable you to define a consistent 'look' for your documents by describing once how headings, paragraphs, quotes, etc. should be displayed.  Style sheet syntax is made up of three parts: selector {property: value} selector = element.class
  65. 65. Copyright 2005 - The Small Business Depot65 HTML – Fundamentals CASCADING STYLE SHEETS (CSS) H1 {text-align: center; color: blue} A {color:green; font-familiy:arial,courier; font-weight:bold;} td { align:center; background-color:grey; border-color:red;} div {position:absolute; visibily:hidden; margin:10px } font {color:navy; font-size:2pt; font-face:trebuchet; } hr {color:#ff0000; width:80%; align:center; } table {width:80%; align:center; border:2px; padding:5px; }
  66. 66. Copyright 2005 - The Small Business Depot66 HTML – Fundamentals CASCADING STYLE SHEETS (CSS) H1 {text-align: center; color: blue} H1.widget {text-align: center; color: red; font-size:80%; } A {color:green; font-familiy:arial,courier; font-weight:bold;} A.menu {color:cyan; font-familiy:arial,courier; font-style:italics;} td { align:center; background-color:grey; border-color:red;} td.figure { align:right; background-color:white; border-color:black;} font {color:navy; font-size:2pt; font-face:trebuchet; } font.fred {color:blue; font-size:2pt; font-face:trebuchet; font-weight:bold; } element.class {property:value; }
  67. 67. Copyright 2005 - The Small Business Depot67 HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Embedded <head> <title> My Page Title </title> <style TYPE="text/css > <! - - element.class { property:value; } element.class { property:value; } - - > </style> </head>
  68. 68. Copyright 2005 - The Small Business Depot68 HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Linked Styles can be defined in a separate file <font style=“property:value; “> text </font> <font class=“fred”> text </font> mystyles.css <head> <LINK REL="stylesheet" HREF="mystyles.css“ TYPE="text/css"> </head>
  69. 69. Copyright 2005 - The Small Business Depot69 HTML – Fundamentals CASCADING STYLE SHEETS (CSS) /* Example style sheet file (note how this comment was created) */ BODY {background: #FFFFD8; margin-top: 20} A:link {color: #400080; background: #FFFFD8} H1 {font-weight: bold; text-align: center; color: #006000; background: #FFFFD8; font-family: Gill Sans, Arial, sans-serif; } font.caption {font-family: Gill Sans, Arial, sans-serif; font-style: italic; } /* End of example style sheet file */
  70. 70. Copyright 2005 - The Small Business Depot70 HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Inline Styles can be placed within individual elements <font style=“color:red; font-face:ariel;” >
  71. 71. Copyright 2005 - The Small Business Depot71 HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Inline > Embedded > Linked Defining the style of your text linked -> font-family:arial,georgia; embedded -> color:navy; inline -> font-size:2pt;
  72. 72. Copyright 2005 - The Small Business Depot72 HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Using IDs  IDs enable you to define a unique style which you can apply to a number of elements. <STYLE> <!– #copyright {font-style:italic; font-size:smaller; } --> </STYLE> <p ID=“copyright”> Any textual content </p>
  73. 73. Copyright 2005 - The Small Business Depot73 HTML – Fundamentals Images <img src=“images/pic1.jpg” width=75px, height=50px /> <img class=“pics” src=“images/pic1.jpg” /> img.pics { width:75px; height:50px; border-width:3px }
  74. 74. Copyright 2005 - The Small Business Depot74 HTML – Fundamentals Using Images Images take longer to download than text The larger the image, the slower the page Use optimization software Use thumb nail images
  75. 75. Copyright 2005 - The Small Business Depot75 HTML – Fundamentals Other uses of Images  Page background (not recommended)  <body background-image = “url” >  <body class=“background”> • body.background { background-image:$url; }  Table background  <table background-image=“url”>  <table class=“background”> • table.background { backlground-image:url; }  DIV background  <div style={ background-image:url; } >
  76. 76. Copyright 2005 - The Small Business Depot76 Resources http://www.w3schools.com/  HTML Tutorials Learn HTML Learn XHTML Learn CSS Learn TCP/IP  Browser Scripting Learn JavaScript Learn DHTML Learn VBScript Learn HTML DOM Learn WMLScript  Server Scripting Learn SQL Learn ASP Learn ADO Learn PHP  XML Tutorials Learn XML Learn XSL Learn XSLT Learn XSL-FO Learn XPath Learn XQuery Learn XLink Learn XPointer Learn DTD Learn Schema Learn XML DOM Learn XForms Learn SOAP Learn WSDL Learn RDF Learn RSS Learn WAP  .NET (dotnet) .NET Microsoft .NET ASP .NET Mobile  Multimedia Learn Media Learn SMIL Learn SVG Learn Flash  Web Building Web Building Web W3C Web Browsers Web Quality Web Semantic Web Careers Web Hosting Web Certification
  77. 77. Copyright 2005 - The Small Business Depot77 Courses at FVCC Introduction to Web Design FrontPage Web Design Intermediate Web Design Advanced Topics in Web Design Web Site Promotion Basic Perl Programming Using Macromedia Studio MX

×