Presentation on theme: "Introduction to Web Design By: Cara Norton and Randi Hill Dacula High School Central Gwinnett High School Based on a Class by Joshua Hester New Horizons."— Presentation transcript:
Introduction to Web Design By: Cara Norton and Randi Hill Dacula High School Central Gwinnett High School Based on a Class by Joshua Hester New Horizons Training Center Tucker, Georgia June, 2003 (Revised & Edited by Memory Reed, Harris County High School, May 2009)
What is A Web Site? A group of pages with a common purpose maintained by one person or team Web Pages can be created in any number of ways: – HTML – XHTML – FrontPage (software) – Dreamweaver (software)
Dreamweaver (a commonly used web page design software) 1.Web Site Creation/Maintenance Program 2.WYSIWYG What You See Is What You Get Allows you to edit pages easily and see what is changing as you edit It’s both an HTML and Graphical Editor 3. Dynamic Web Page Can individualize Web pages – different users get different output (pages on the fly)
What Else About Dreamweaver? 1. Developed by Macromedia! 2. Flash, Fireworks, and Dreamweaver are all in the same software suite. 3. Order processing software has to be purchased separately. 4. It’s a whole lot of fun! 5. It’s very easy to use!
The Internet vs. The World Wide Web When did the Internet begin? – 1968 Who developed the Internet? – Created by the U.S. Department of Defense – Originally called ARPA (Advanced Research Project Agency) Why was it created? – As a way to connect computers so if one machine went down the others would keep working (SPUTNIK) What organization used it first? – The National Science Foundation (NSF) introduced it to college campuses in 1983.
Internet Questions What is the Internet? – The physical connection of the W_________ W_______ W____. – Basically it is hardware What year do you think email began? – 1971 – Before the first web pages were created!
What is WWW? World Wide Web Began in 1991 Created by Tim Berners-Lee – He, along with his research team of scientists in Sweden, completed it in 1989. – Their purpose was to share Physics research electronically, therefore creating HTML code. A piece of software that runs on the Internet that allows users to share files.
Before HTML Information was exchanged in two ways: – ASCII Files: American Standard Code for Information Interchange shared text only, but with no formatting options except line returns and tabs. Advantage: ALL machines could read it. – Binary Files: 0’s and 1’s Only read the text if you had the SAME software as the person who originally created the text. Disadvantage: there used to be over 400 different word processing software packages available.
HTML HyperText Markup Language – Hyper = fast (speed) – Text = ASCII text so ALL computers can read it. – Markup = Formatting of the text – an original printing press term Hello ---- bolds text The greater/less than signs are called WICKETS! – Language = the language of the Web Learn the codes before using any editor software – it will be well worth your time!
How Does it all Work? CLIENT SERVER Response 1.Who is the client ? A Web user – You and me! 2.What is the server ? A machine that provides you what you want – a connection to information on the Internet A server used to be a connection outside your company – called OUTSOURCING 3.What is the response ? The server sends back a COPY of the actual page The copy allows you to view the HTML code URL: Request
Requests From the Server URL – Universal Resource Locator – The request 1.HTTP:// – Hypertext Transfer Protocol Saying you’d like a Web page Domain Name asking you what type of information you’d like –WWW.MICROSOFT.COMWWW.MICROSOFT.COM 2.FTP:// – File Transfer Protocol Saying you’d like to download something 3.MAILTO:// – Email service Saying you’d like to email someone
Domain Names.com = commercial business (microsoft.com).gov = government institutions (cia.gov).edu = educational institutions (cornell.edu).mil = military organizations (army.mil).net = network organizations (internic.net).org = organizations that don’t fit in any of the other categories – usually non-profits (santafecares.org) Country Codes: – jp = Japanca = Canadade = Germany – ru = Russiaus = United Statesau = Australia http://www.gwinnett.k12.ga.us
Interesting Information 1.Web Browser A user agent that allows you to read HTML. 2.MOSAIC 1 st browser that allowed for graphics to be viewed on the Web page 3.MOZILLA A search engine that is used by both Netscape and Explorer 4.NETSCAPE Developed in 93-94 Huge browser which allows for a large influence on HTML code Is the only browser that has to be purchased!
Interesting Information, cont… 5. W3C – World Wide Web Consortium – Developed in 1993 – Used to set standards and recommendations for regulating HTML – Didn’t work because Netscape was so big! – President: Tim Berners-Lee He never trademarked or copyrighted his Internet invention, he called it “His Gift to the World”. He says it’s the biggest mistake he’s ever made! – Current version of HTML is 4.01 – Work is being done on HTML 5 Neither large browser fully supports this standard
5.08 Compliant All webs must be in compliance with the Americans With Disabilities Act 10% of audiences are impaired – couldn’t access the web 5 years ago Don’t use and tags – voices can’t speak in italics Go to www.W3.org and check to see if your web site is 5.08 compliant!
XML vs. XHTML XML: – Came out in 1998 – Means Extensible Language – Allows you to create your own tags so that you don’t have to conform to browsers – Mostly used by programmers behind the scenes right now XHTML: – Requires you to use ALL lowercase letters – No optional closing tags Every code must have beginning & ending tags Over 60% of people use a combination of both of these today!
Graphics There are many types of graphic files, they differ in the quality and size of the file Of course, you want the best quality on your web page, but you have to consider what size and quality most customers can handle This article shows the difference and how to choose your graphics for a website http://www.wfu.edu/~matthews/misc/graphics/for mats/formats.html http://www.wfu.edu/~matthews/misc/graphics/for mats/formats.html
Hyperlinks Hyperlinks are used in web pages to link the customer from one place or page to another place in the page or to another web page Links are usually underlined Links can also be “rollover” links, that change color when you rollover them indicating they are hyperlinks Some marketers use hyperlinks unethically, see this article - http://www.poeticsystems.com/blog/Ethical- Hyperlinks-SEO.html# http://www.poeticsystems.com/blog/Ethical- Hyperlinks-SEO.html#
Font Choices Choosing fonts are an important step in web design Serif (like Times New Roman - has the little feet on the bottom of the letters) ex: THIS IS SERIF – Best to use in the print industry Sans Serif (like Arial - clean and simple) ex: This is Sans Serif (Sans means without or NOT) – Best to use in web design Fancy or decorative fonts (like Script or Comic Sans) ex: This is Script ; Comic Sans; Lucida – Best not to use for several reasons - Hard to read, off-putting for some people, some people’s computers may not recognize the font
Site Maps Vs. Navigation Schemes Site Maps - ways for webmasters to inform search engines about their pages and make it easier for them to “crawl” or search Navigation Schemes - A consistent theme throughout the website that makes it easier for visitors to find what they need quickly
Web Design for Marketing Know your target audience Build your website with your target audience in mind Flash & graphics aren’t what builds up customers, it’s great customer service and customer engagement Cater to the customer Create positive user experiences, optimize usability and have technology that fits user needs