Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Creating a Web Page An Intro The first phase of the web: the time of experimentation •In the early days, most websites were run by webmasters who did a bit of everything. •Web authoring with simple hand-coding tools - no special features to deal with HTML. •Hobbyists learned HTML by playing around with web sites in their spare time. •There wasn't a lot of money in the web. People worked on web sites because they loved it. The second phase of the web: big business overnight. •Web teams became larger, more structured, and more fragmented. •Information architects worked on overall site architecture. •Visual designers worked on visual designs. •Production people did the actual HTML code. Specialized tools for web authoring began appearing on the market. Visual tools focused on giving people a more visual way to work with HTML - WYSIWYG Dreamweaver - new ways to help people work visually with technologies such as cascading style sheet (CSS) - offered more assistance with new technologies. Hand-coding tools focused on making hand coding more efficient by adding special features for HTML and other web technologies. HomeSite - improve the efficiency of coders offered more control The third phase of the web: Isn't there a better way? •Corporations still want websites; they just want to spend a lot less money. •Design shops still want to do business; need to find a way to be radically more productive than before. •Internal web teams still need to get their jobs done; they just have to make do with less. The emergence of hybrid tools Dreamweaver MX - an environment for both hand-coders and visual authors The future... The web will only continue to grow, evolve, and change. The the web will become more of a collaborative communication medium. Web authoring will become increasingly componentized. Keep It Simple One of the keys to a good website is simplicity. You've heard of the "KISS" principle? Keep It Simple Silly. This applies doubly for websites. It is nice to be able to create frames and tables and font sizes and animated GIFs, but if you have every possible HTML feature on every page, it's highly likely that your readers are going to be overwhelmed rather than impressed. Remember, just because you CAN create an effect, doesn't mean you SHOULD. Ask yourself: what value am I adding with this technique? Is this the best way to communicate what I want to say? Simple Doesn't Equal Boring Simple doesn't necessarily mean dull and boring. Lots of people confuse fancy effects with effective communication. What keeping it simple really means is this: think about how people will be using your pages and present your information to them in a way that matches their needs and expectations. Use technology and effects where appropriate and where they make for more effective communication. Clean design + Good use of technology = A Good Web site The Purpose • Plan carefully and spend time on this part • Good communication requires clarity of purpose – make friends – make a point – collect links – recruit members for … – publish you résumé – provide information for your course • If on campus, what are the policies? The Audience • Who will read your page? • Who do you want to attract to your page? • These greatly affect – the level of language – the style of language – the design Know Your Audience You aren't creating your Web work in a vacuum or just for yourself! If you were, you'd keep it on your own computer. You're publishing a Web page because you expect someone to stop by and visit it. That someone is your audience. The more you understand your audience, the more effective you can make your site. Know Your Audience Are your readers on slow modems? Then you'd better be extra careful about page size. Are they expecting to hear your band's music clips? Then you'd better think about an audio format. Are they quilters? Then blood red and black might not be your best color choices. Are they hard core gamers? Then you might want to avoid pastels and soft-edged graphics. Definition of a good Web site: A site that delivers quality content for its intended audience and does so with elegance and style. Five Fingers Making your site easy to navigate is critical. Lots of small factors add up to create easy paths through your site. For example, one thing you can do is keep the number of "next step" choices small so that people don't become lost in a long list of options. Did you know that the average human mind sees five or fewer items as one group, but when it encounters more than five items it has to divide them into smaller sub-groups to process them? Try to keep your selections arranged in groups of five or less. Three Clicks Another way to help your Web site be a good experience for your readers is to make information no more than three clicks away. One of the fastest ways to frustrate readers is to make them click ... and click ... and click... and click .. and click ... and ... to find the information they want. Additionally, when you make readers burrow deep into your site to find content they often become lost and never make it back to your home page. When people get lost, they tend to surf off someplace else instead of fighting their way around a site. 30 Second Attention Spans • When someone comes into a Web page they should be able to easily see what options they have and select one quickly. As a rule of thumb, it should take less than 30 seconds for a reader to load your page and be able to decide what to do next. If it takes longer than that, you'll start to lose your audience. • Make sure your pages are a reasonable size and don't take forever to download. If many of your readers are on modems, try to keep the total page size (that means all graphics plus HTML file added together) under 30 to 45K. • Make sure your page layout is clear enough that with a quick glance your readers can grasp your navigation scheme and understand how to select a "next step" option. Words Matter Remember your fifth grade English teacher? Remember how she told you that good spelling and grammar were important? She was right. The Web has far too many pages whose creators forgot the basics. Just because your Web page is online doesn't mean you can toss out all those rules that govern written communication. Just because it is online doesn't mean you can forget to proofread it. Take a deep breath and spend a few extra minutes with your text. Your readers will thank you for it. Balance, Balance Balance is a big part of good Web design. Balance between text and graphics. Unless the content dictates an all-text or an all-graphics site, use common sense and aesthetic judgement so that one doesn't overwhelm the other. Balance between download time and page content. Of course you want beautiful pages, but you need to balance the content of the page with the reality that your readers are out there logging on through a modem. Is that photo of your wedding trip really worth a 120 second wait? Balance between background and foreground. Most of us print things on white or another solid color paper. On the Web, it's pretty exciting to be able to create textures and backgrounds, but it's also easy to let the background overwhelm the content in front. Frames in Moderation Frames can be a great addition to your site. Like all Web features, however, be sure you don't overuse them! If you want to create a navigational structure that will always be visible, such as a table of contents, frames are the way to go. But frames aren't for every use. For example, if you are looking to display information in columns or rows, then tables are the better match. Keep Learning Creating Web pages is a continual learning process. Getting up a first version of your site is just the beginning! The technology and tools are constantly evolving and our understanding of how people use the online medium is changing. To create good websites you can't just rest on your laurels. Look at other sites. If you want to be a great novelist you read great novels. If you want to be a great screenwriter you watch great movies. By the same token, if you want to design a great Web site you need to look at other Web sites. As you look at sites, notice what does and doesn't seems to work. View the source. When you see something you like, use your view source function in your browser to see how the effect was done. It's amazing what you can learn by looking behind the scenes. Web Publishing Process • • • • • • • Define the purpose Define the audience Choose an HTML editor Make design decisions Create the page Test the page Publish the page The Editor • Text editors - HTML is ASCII text • Word processors have “Save as HTML” feature • HTML editors - can click on the tags you want – Lightning, HomeSite, HTML editor • WYSIWYG editors -special programs – Netscape Composer to manage multi • Site managers designed document Web sites – NetObjects Fusion http://www.macromedia.com/software/dreamweave r/productinfo/tutorials/ What is JavaScript? JavaScript is NOT Java. JavaScript is a basic scripting language that allows Web authors to create dynamic pages that react to user interaction. In other words, JavaScript is a language that lets you make your pages interact with your readers and respond to what they do. JavaScript is based loosely on the Java programming language. JavaScript programs are contained within the HTML code of the Web page and are interpreted by the browser as it its read in contrast to Java programs that are downloaded separately from the HTML page. JavaScript is a "safe" programming language, one that cannot access any system controls or hardware on a user's computer. http://javascript.internet.com/ HTML • HTML = hypertext markup language – tags - special formatting symbols opening and closing tags ex. <b>…</b> turn bold on and off ex. <h3>…</h3> turn a heading on and off • Works cross-platform • Identifies the parts of the text • Standard maintained by W3C (World Wide Web Consortium) W3C: www.w3.com HTML • Browsers interpret HTLM code • Different browsers may interpret the codes differently – cascading style sheets style sheet = a listing of what each tag is to do • Word processors – have hidden codes and style sheets – may be read only if a compatible program is available The Design • Knowing how to use HTML does not guarantee a great looking page • Rules of thumb – keep page length to 1 - 3 screens – (in 2001) assume users view on a 15” monitor with 800x600 resolution – be consistent with colors, background, font, and style – design for your audience – KIS - “keep it simple” The Creation • Global structure – head - title and show relationship to other files • <title> what appears in the window’s title bar – body - what appears in the browser window <html> <head> <title>document title</title> </head> <body> main part of the HTML document </body> </html> Creating the Body • Background – color- <body bgcolor = “white”> – graphic - <body background = “parchment.jpg”> • Font – color - <font color = “green”> – face - <font face = “arial”> Color Codes: www.htmlgoodies.com/basic_cl.html Creating the Body • Headings - six, 1 is largest and 6 is smallest – appearance depends upon browser’s formats - typically, <h6> is 10 point, bold • Spaces and paragraph breaks – extra consecutive spaces ignored “A B” is interpreted as “A B” – the Enter key does NOT give a new line go to next line - <br> (no closing tag) skip a line - <p> Creating the Body • Lists – bulleted - <ul> (unordered list) – numbered - <ol> (ordered list) – menu - <menu> Each item in the list begins with <li>, is indented and begins on a new line. – <li> alone gives unindented bulleted lists Creating the Body • Character attributes – bold - <b> – italics - <i> – underline - <u> • Signing your page – provide a contact and date last modified <address> This adds a preceding blank line and italicizes the text. Creating the Body • Hyperlinks – anchor text element + reference attribute <a href = “link”> screen text</a> – absolute - a complete URL – relative - link to a local Web page – mail to - an email address • Images – use GIF or JPEG graphics <img src = “source of graphic”> The Test • Always test the page and proof read it • Use “File Open” and “Browse” option – typos – missing < or > – missing / to end a tag – missing the entire end tag – missing quotation marks Coming Soon - XML • Extensible Markup Language (XML) – adds the ability to create your own tags – permits more exact searching • XHTML – defined using XML – it is extensible – tags are case-sensitive – all tags must have an end tag