Introduction to Web Design Part 1 w. Mike Tyler Copyright 2005 - The Small Business Depot
Use of this material l If you would like to be able to distribute this Power. Pont 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 Copyright 2005 - The Small Business Depot 2
Web Components l Clients and Servers l Internet Service Providers l Web Site Hosting Services l Domains Names, URL’s and Ips l Registrars Copyright 2005 - The Small Business Depot 3
Clients & Servers l l l l Clients (Browser) Internet Explorer Firefox Mozilla Netscape Opera Amaya AOL MSN l l l l Servers Apache Microsoft Netscape zeus AOLserver AV Java. Web. Server Oracle Copyright 2005 - The Small Business Depot 4
Web Components l Clients and Servers l Internet Service Providers l Web Site Hosting Services l Domains Names, URL’s and Ips l Registrars Copyright 2005 - The Small Business Depot 5
Internet Service Providers Connect Clients to the Internet l l l Phone Company AOL Earthlink Verizone Net. Zero Basic internet connection l Dialup/DSL/Cable/Sat l Email l Copyright 2005 - The Small Business Depot 6
Web Components l Clients and Servers l Internet Service Providers l Web Site Hosting Services l Domains Names, URL’s and Ips l Registrars Copyright 2005 - The Small Business Depot 7
Web Hosting Services Connects Web Sites to the Internet Computer (server) farm l Web server software l Firewall hardware and software l IT services l ¡ (Backup, troubleshooting, hardware repair) Disk space l Bandwidth / connection to internet l Routers and switchers l Email server / storage l Copyright 2005 - The Small Business Depot 8
Web Components l Clients and Servers l Internet Service Providers l Web Site Hosting Services l Domains Names, URL’s and Ips l Registrars Copyright 2005 - The Small Business Depot 9
Domain’s URL’s and IPs l Domain name: The specific address of a computer on the Internet ¡ microsoft. com l Uniform Resource Locator (URL): ¡ http: //www. microsoft. com/faqs. html l Internet protocol (IP) address ¡ 192. 168. 1. 1 Copyright 2005 - The Small Business Depot 10
Web Components l Clients and Servers l Internet Service Providers l Web Site Hosting Services l Domains Names, URL’s and Ips l Registrars Copyright 2005 - The Small Business Depot 11
Domain Registrar l. A company that provides domain name registration services for a fee. l Maintain database which maps domain names to IP’s l Propagate new domain name/IP address information across the internet Copyright 2005 - The Small Business Depot 12
Creating a Web Site 1. 2. 3. 4. 5. 6. 7. Choose a domain name Register with a Registrar Choose a hosting service Tell Registrar the IP address Create web content Store (publish) onto hosting server (FTP) Submit new site to search engines Copyright 2005 - The Small Business Depot 13
12 Principles of good web design 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. Visitor-centric, clear purpose Progressive disclosure Displays quickly Browser compatible Intuitive navigation Spelling, grammar, writing Secure (e. Commerce) Attractive design, easy to read Cultural bias? (Regional? Domestic? International? ) No technical problems (broken links, buggy scripts) Maintainable (separate content from style) Search Engine Accessible Copyright 2005 - The Small Business Depot 14
Creating your Web Site Technologies & Tools l Markup ¡ HTML, Languages DHTML, XSLT, etc. . l Cascading Style Sheets (CSS) l Scripting languages ¡ perl, javascript, php, l Web etc. . creation and editing software ¡ Notepad, Front. Page, Coldfusion, Flash, Hotmetal, Site Builder, etc. . Copyright 2005 - The Small Business Depot 15
Markup Languages - HTML Derived from SGML (Standard Generalized Markup Language ) l Hyper. Text Markup Language Copyright 2005 - The Small Business Depot 16
HTML Fundamentals l Clear text, case insensitive l Ignores white space l Comprised of tags <tag /> l Open tags and closed tags Copyright 2005 - The Small Business Depot 17
HTML - Fundamentals l Open tags ¡ ¡ ¡ l Closed tags ¡ ¡ ¡ l <name attributes/> <hr/>, <br/> <img src=“url” width=‘ 100 px’ height=’ 60 px’/> <name attributes> stuff </name> <b>text to be bolded</b> <h 1>level 1 heading text</h 1> Comments < ! - - comment text -- > Copyright 2005 - The Small Business Depot 18
HTML – Fundamentals Document Structure < HTML > Header Body < / HTML> Copyright 2005 - The Small Business Depot 19
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> Copyright 2005 - The Small Business Depot 20
HTML - Fundamentals header <body> Hello world </body> Copyright 2005 - The Small Business Depot 21
HTML - Fundamentals header <body> Mike Tyler PO Box 190387 Hungry Horse, Mt 59919 </body> Copyright 2005 - The Small Business Depot 22
HTML - Fundamentals header <body> <b>Mike Tyler</b> PO Box 190387 Hungry Horse, Mt 59919 </body> Copyright 2005 - The Small Business Depot 23
HTML - Fundamentals header <body> <font face=“Arial, Times, Courier” color=“red” size=“ 3”> <b>Mike Tyler</b> PO Box 190387 Hungry Horse, Mt 59919 </font> </body> Copyright 2005 - The Small Business Depot 24
HTML - Fundamentals header <body> <p align=‘center’> <font face=“Arial, Lucida Sans” color=“red” size=“ 3”> <b>Mike Tyler</b> PO Box 190387 Hungry Horse, Mt 59919 </font> </p> </body> Copyright 2005 - The Small Business Depot 25
HTML - Fundamentals header <body> <p align=‘center’> <font face=“Arial, Lucida Sans” color=“red” size=“ 3”> <b>Mike Tyler</b> PO Box 190387 Hungry Horse, Mt 59919 </font> </p> <img src=‘http: //www. myserver. com/images/mike. jpg’/> </body> Copyright 2005 - The Small Business Depot 26
HTML - Fundamentals header <body> <p align=‘center’> <font face=‘Arial, Lucida Sans’ color=‘red’ size=3> <b>Mike Tyler</b> PO Box 190387 Hungry Horse, Mt 59919 </font> </p> <img src=‘http: //www. domain. com/images/mike. jpg’> <a href=‘biopage. html’>Read my Bio</a> </body> Copyright 2005 - The Small Business Depot 27
HTML - Fundamentals Copyright 2005 - The Small Business Depot 28
HTML - Fundamentals ANCHORS (Hypertext Link) <A href=“url” attributes>Displayed text </A> Attributes NAME = “text” l TITLE = "text" l TARGET = “frame_name|window_name” l Copyright 2005 - The Small Business Depot 29
HTML – Fundamentals Hypertext links <a href=“mywebpage. html” target=“window 2” >Click this link </a> Click this link opens mywebpage. html in the window / frame named “window 2” window 2 Copyright 2005 - The Small Business Depot 30
HTML – Fundamentals Hyperlink Colors <BODY LINK=color, VLINK=color, ALINK=color > <BODY LINK=“blue”, VLINK=“purple”, ALINK=“red” > <BODY LINK=“#0000 FF”, VLINK=“#FF 00 FF”, ALINK=“#FF 0000” > Copyright 2005 - The Small Business Depot 31
HTML – Fundamentals Colors l Cathode Ray Tubes (CRT) Copyright 2005 - The Small Business Depot 32
HTML – Fundamentals Colors color = “red” (Browser compatibility issues) color = “#FF 0000” values vary from 00 to FF (hexadecimal) 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f #FF FF FF Blue Red Green Copyright 2005 - The Small Business Depot 33
HTML – Fundamentals Headings l Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text. <h 1>Heading 1 level text</h 1> <h 2>Heading 2 level text</h 2> <h 3>Heading 3 level text</h 3> <h 4>Heading 4 level text</h 4> <h 5>Heading 5 level text</h 5> <h 6>Heading 6 level text</h 6> Copyright 2005 - The Small Business Depot 34
HTML – Fundamentals Lists Unordered list Ordered list <ul> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ul> <ol type=‘i’ start=‘ 2’> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ol> Copyright 2005 - The Small Business Depot 35
HTML – Fundamentals Lists Unordered list Ordered list apples l bananas l grapes l strawberries II. l III. IV. V. apples bananas grapes strawberries Copyright 2005 - The Small Business Depot 36
HTML – Fundamentals Tables <TABLE> <CAPTION ALIGN="bottom">Class Grades</CAPTION> <TR> <TH>Student</TH> <TH>Grade</TH> </TR> <TD>Tom</TD> <TD>B+</TD> </TR> <TD>Sue</TD> <TD>A-</TD> </TR> </TABLE> Copyright 2005 - The Small Business Depot 37
HTML – Fundamentals Tables Copyright 2005 - The Small Business Depot 38
HTML – Fundamentals Tables l BORDER=value l ALIGN=left|right|center l CELLSPACING=value l CELLPADDING=value l WIDTH=value|percent Copyright 2005 - The Small Business Depot 39
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> <TD>Tom</TD> <TD>B+</TD> </TR> <TD>Sue</TD> <TD>A-</TD> </TR> </TABLE> Copyright 2005 - The Small Business Depot 40
HTML – Fundamentals Tables Student Grade Tom B- Sue A+ Class Grades Copyright 2005 - The Small Business Depot 41
HTML – Fundamentals Tables rowspan and colspan Copyright 2005 - The Small Business Depot 42
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> <TD><b>Student</b></TD> <TD><b>Grade</b></TD> </TR> <TD>Tom</TD> <TD rowspan=2>A</TD> </TR> <TD>Sue</TD> </TR> </TABLE> Copyright 2005 - The Small Business Depot 43
HTML – Fundamentals Student Grades Student Tom Sue Grade A Copyright 2005 - The Small Business Depot 44
Screen Compatibility 1280 x 1024 x 768 800 x 600 640 x 480 Copyright 2005 - The Small Business Depot 45
HTML – Fundamentals Tables l Tables are frequently used to layout the basic web page design. 1280 640 Copyright 2005 - The Small Business Depot 46
HTML – Fundamentals Frames l Basic Frames l Floating Frames (inline frames) l Picture in picture l Frames let you divide a screen into windows with each window viewing a different web page. Copyright 2005 - The Small Business Depot 47
HTML – Fundamentals Basic Frames Banner Menu Content Footer Copyright 2005 - The Small Business Depot 48
HTML – Fundamentals Basic Frames Basic tags l <frameset>. . </frameset> l <frame /> l <noframes>. . </noframes> Basic attributes l cols = “values” l rows = “values” l name = “frame_name” l src = “frame_source(url)” l target = “frame_name” Copyright 2005 - The Small Business Depot 49
HTML – Fundamentals Basic Frames Banner Menu Content Footer Copyright 2005 - The Small Business Depot 50
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> Copyright 2005 - The Small Business Depot 51
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> Copyright 2005 - The Small Business Depot 52
HTML – Fundamentals Basic Frames FRAMESET attributes FRAMEBORDER="yes|no"|0 l BORDER=pixels l BORDERCOLOR="#hexcolor|colorname" l < frameset rows="80, *, 80" border=2 bordercolor=“red" >. . </frameset> Copyright 2005 - The Small Business Depot 53
HTML – Fundamentals Basic Frames Individual FRAME attributes l l l l SCROLLING="yes|no|auto" NORESIZE MARGINWIDTH=pixels MARGINHEIGHT="pixels" BORDERCOLOR="color" FRAMESPACING="pixels" FRAMEBORDER="yes|no"|0 NAME=“frame_name” Copyright 2005 - The Small Business Depot 54
HTML – Fundamentals Floating Frames l Floating frames allow you to create a frame within the boundaries of a page Basic Frames Floating Frames Copyright 2005 - The Small Business Depot 55
HTML – Fundamentals Floating Frames <IFRAME attributes ></IFRAME> Attributes l l l l SRC=URL HEIGHT=pixels|percent, WIDTH=pixels|percent HSPACE=pixels VSPACE=pixels ALIGN=left|right FRAMEBORDER=0 Copyright 2005 - The Small Business Depot 56
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> Copyright 2005 - The Small Business Depot 57
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 Copyright 2005 - The Small Business Depot 58
HTML – Fundamentals DIV and ILAYER l Allows you create a position-able block of content. Content positioned within this block Copyright 2005 - The Small Business Depot 59
HTML – Fundamentals DIV <div attributes> content </div> attributes l ID=“name” l STYLE = “style parameters re: CSS” Copyright 2005 - The Small Business Depot 60
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> Copyright 2005 - The Small Business Depot 61
HTML – Fundamentals DIV contentc content Copyright 2005 - The Small Business Depot content 62
HTML – Fundamentals DIV <div style="position: absolute; left: 100 px; top: 100 px; width: 100 px; height: 100 px; background-color: #ffffff; "> Copyright 2005 - The Small Business Depot 63
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) l Styles enable you to define a consistent 'look' for your documents by describing once how headings, paragraphs, quotes, etc. should be displayed. l Style sheet syntax is made up of three parts: selector {property: value} selector = element. class Copyright 2005 - The Small Business Depot 64
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) H 1 {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: 10 px } font {color: navy; font-size: 2 pt; font-face: trebuchet; } hr {color: #ff 0000; width: 80%; align: center; } table {width: 80%; align: center; border: 2 px; padding: 5 px; } Copyright 2005 - The Small Business Depot 65
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) H 1 {text-align: center; color: blue} H 1. 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: 2 pt; font-face: trebuchet; } font. fred {color: blue; font-size: 2 pt; font-face: trebuchet; font-weight: bold; } element. class {property: value; } Copyright 2005 - The Small Business Depot 66
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Embedded <head> <title> My Page Title </title> <style TYPE="text/css > <! - element. class { property: value; } --> </style> </head> Copyright 2005 - The Small Business Depot 67
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> Copyright 2005 - The Small Business Depot 68
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) /* Example style sheet file (note how this comment was created) */ BODY {background: #FFFFD 8; margin-top: 20} A: link H 1 {color: #400080; background: #FFFFD 8} {font-weight: bold; text-align: center; color: #006000; background: #FFFFD 8; 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 */ Copyright 2005 - The Small Business Depot 69
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Inline Styles can be placed within individual elements <font style=“color: red; font-face: ariel; ” > Copyright 2005 - The Small Business Depot 70
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Inline > Embedded > Linked Defining the style of your text l linked -> font-family: arial, georgia; l embedded -> color: navy; l inline -> font-size: 2 pt; Copyright 2005 - The Small Business Depot 71
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Using IDs l 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> Copyright 2005 - The Small Business Depot 72
HTML – Fundamentals Images <img src=“images/pic 1. jpg” width=75 px, height=50 px /> <img class=“pics” src=“images/pic 1. jpg” /> img. pics { width: 75 px; height: 50 px; border-width: 3 px } Copyright 2005 - The Small Business Depot 73
HTML – Fundamentals Using Images l Images take longer to download than text l The larger the image, the slower the page l Use optimization software l Use thumb nail images Copyright 2005 - The Small Business Depot 74
HTML – Fundamentals Other uses of Images l Page background (not recommended) ¡ ¡ <body background-image = “url” > <body class=“background”> • body. background { background-image: $url; } l Table background ¡ ¡ <table background-image=“url”> <table class=“background”> • table. background { backlground-image: url; } l DIV background ¡ <div style={ background-image: url; } > Copyright 2005 - The Small Business Depot 75
Resources http: //www. w 3 schools. com/ l l l HTML Tutorials Learn HTML Learn XHTML Learn CSS Learn TCP/IP Browser Scripting Learn Java. Script Learn DHTML Learn VBScript Learn HTML DOM Learn WMLScript Server Scripting Learn SQL Learn ASP Learn ADO Learn PHP l XML Tutorials Learn XML 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 Copyright 2005 - The Small Business Depot l . NET (dotnet). NET Microsoft. NET ASP. NET Mobile l Multimedia Learn Media Learn SMIL Learn SVG Learn Flash l Web Building Web W 3 C Web Browsers Web Quality Web Semantic Web Careers Web Hosting Web Certification 76
Courses at FVCC l Introduction to Web Design l Front. Page Web Design l Intermediate Web Design l Advanced Topics in Web Design l Web Site Promotion l Basic Perl Programming l Using Macromedia Studio MX Copyright 2005 - The Small Business Depot 77
Скачать презентацию Introduction to Web Design Part 1 w Mike
aeeb861c239d7160247554d27e2e647e.ppt