Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Web Development
Transcript
Web Development 311 Fall 2003 Why web pages? • Most companies have intranets, extranets, and web sites • Content can be changed quickly and easily – Make sure all links are still updated • More and more people are putting up personal pages – E.g. blogs 311: Fall 2003 2 Developing and managing a web site Web server Internet Web developer Extranet server Access, publish Intranet server Business manager 311: Fall 2003 3 Web basics • HyperText Transfer Protocol (HTTP) – Browser sends server an HTTP request – Server sends browser an HTTP response – No established connection between the two computers • HyperText Markup Language (HTML) – Ordinary text files, but “marked up” with code that the browser interprets • Hyperlinks – Jump from page to page – <a href = “http://www.google.com>Search at Google</a> – Search at Google 311: Fall 2003 4 You need this to develop web pages • HTML editor – Text-based • Can be very powerful at editing HTML code • Tedious – WYSIWYG (e.g. FrontPage) • Means of publishing files – FTP program or built into editor • Web server – IIS or Apache are most popular – IIS can have FrontPage extensions – Where is it hosted? • Domain name – Some ISPs will let you have your own domain name – www.gardenrocks.com vs. www.myISP.com/users/webs/gardenrocks 311: Fall 2003 5 Web Development Basics • Planning the site • User centered design – Who are the users? Different user groups? – What should they get out of visiting the site? – Example www.uwosh.edu • Planning the content – Draw a flowchart – E.g. 311 website 311: Fall 2003 6 Partial 311 Flowchart Welcome Syllabus Assignments IT Problem 1 Schedule Grades IT Problem 2 Not always hierarchical structure: Page 1 Page 2 311: Fall 2003 Page 3 7 Navigation through the Site • Site identity – Each page needs to clearly identify where it belongs – Good example: Most corporate web sites – Bad example: UWO Calendar of events and TitanWeb • Knowing where you are – Give clues on where you are and how to get out of there – Good example: www.about.com – Bad example: 311 web site • Navigational tools – Persistent Menu (710-Osh web site using frames) – Sitemap or Index (www.kelloggs.com) – Logo that leads to homepage • More guidelines – Top Ten Guidelines for Homepage Usability 311: Fall 2003 8 10-minute exercise • Define the purpose for your web site – Is there more than one purpose? • Determine possible audiences for your personal web site • What would be each group’s reason for visiting your site? • Draw a flowchart for some of the pages that might be on your site – Hierarchical? Sequential? • Sketch the welcome page. How do you give each group information about where to go? • What basic navigational structure would you use? 311: Fall 2003 9 FrontPage Tutorial • Startup • File location – Develop and test web on local machine. When it’s ready to go, post it to the server – A Frontpage web is a directory that has some special files in it. To copy/move a web you just copy/move the entire folder 311: Fall 2003 10 FrontPage Tutorial - 2 • Entering information – Create a single-page web – Entering text – Adding images – Hyperlinks to text, images, and email addresses – Using tables to set up layout 311: Fall 2003 11 FrontPage Tutorial - 3 • Managing a web site – Multiple pages, folders – Navigation – Shared borders, frames • Publishing to web server – UWO server does not have FrontPage extensions – Must publish using FTP 311: Fall 2003 12 Coding in HTML <HTML> Every HTML file must begin and end like this </HTML> 311: Fall 2003 13 Coding in HTML <HTML> Appears in browser title bar <HEAD> <TITLE>My first Web page</TITLE> </HEAD> Nothing inside HEAD appears on actual page </HTML> 311: Fall 2003 14 Coding in HTML <HTML> <HEAD> <TITLE>My first Web page</TITLE> </HEAD> <BODY> Page content goes inside BODY tags </BODY> </HTML> 311: Fall 2003 15 Coding in HTML <HTML> <HEAD> <TITLE>My first Web page</TITLE> </HEAD> <BODY> <H1>Top Level Heading</H1> <p>A simple paragraph of text. A simple paragraph of text. A simple paragraph of text. A simple paragraph of text. A simple paragraph of text. A simple paragraph of text. <p>A new <b>bold</b> paragraph. Picture <img src=“image1.gif”> <a href=“http://www.google.com”>Search</a> </BODY> </HTML> Hyperlink 311: Fall 2003 16 Hyperlink from image • Put image inside the <a href...> tags instead of text: <A HREF="http://www.mypage.com"> <IMG SRC="http://www.myimage.com/myimage.gif"> </A> 311: Fall 2003 17 More detail about HTML Tags • Structure of every tag: – <ELEMENT ATTRIBUTE=value> – Example • <H1 Alignment=center>Centered Heading</H1> • <img src=“../images/mypic.img” – Different tags have different possible attributes 311: Fall 2003 18 FrontPage and HTML • Don’t use Frontpage to handcode HTML – It’ll mess up everything – Can use it to view source • Use Notepad or other text editor – Not Word or WordPad – Save with .html or .htm extension • Save file and open in browser (refresh) 311: Fall 2003 19 Coming up • Thursday – Lab: DB Project or Problem 4 • Tuesday: TBD • Thursday – Gobble-gobble, thank you 311: Fall 2003 20
