Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Lecture notes powerpoint
Document related concepts
Transcript
Basic Web Design Technology is a tool FIRST, understand how people actually interact with each other and with the information in their lives, in all the complex, nuanced, often unintuitive ways that they do. SECOND, design ways to help support and enhance what people do in order to help them meet their goals. THIRD, use technology as one of several powerful tools to bring these solutions to life. Viewing technology as a solution in itself, you're almost destined to fail. Many have. Many will. At a high cost. Comments about good design Nobody should notice your design Noticing it is a failure Focus the person on content, not navigation or how great it looks Clean HTML <h2>Objectives</h2> <ul> <li>Define information structure <li>Explain the problems with using Word to create HTML files <li>Explain why different browsers give different appearances to a web page <li>Explain the type of files and naming conventions required for developing web pages <li>Explain why a web page designer cannot ensure how a page will look <li>Explain meta-structure for a web page design (page titles, file naming conventions, template construction) <li>Discuss the reasons for using tables to layout a basic web page <li>Explain why frames should not be used </ul> <h2>Readings</h2> <p>Williams & Tollett ch. 4-6</p> <p>Writing for Websites<br> Word HTML <h2 style='margin-left:0in;text-indent:0in'>Objectives<o:p></o:p></h2> <p class=BulletList><![if !supportLists]><span style='font-family:Symbol'>·<span style='font:7.0pt "Times New Roman"'> </span></span><![endif]>Define information structure <o:p></o:p></p> <p class=BulletList><![if !supportLists]><span style='font-family:Symbol'>·<span style='font:7.0pt "Times New Roman"'> </span></span><![endif]>Explain the problems with using Word to create HTML files <o:p></o:p></p> Browsers are not the same Different – – – – – browsers Internet Explorer FireFox Opera Safari Chrome Different levels of implementation Different ways of interpreting the tags Browser differences Must check your design in multiple browsers (and multiple monitor resolutions) Yes, IE is on most machines, but many people do not like it FireFox has about 25% of techie audience and that number is growing Cannot control appearance Many students want to run all windows maximized. With larger monitors, many people don’t (I rarely do.) A design must allow for different window sizes. Design for Content Cannot control how the user sees the page – Color can change – Graphics can be turned off – Browser window can vary Paper can be tweaked, web pages cannot Browser set wide Browser set narrow Testing with browsers Install multiple browsers and test on your machine. Change resolution and test Tables on Web Pages Only formatting method without using CSS – Only way to get side by side text – Navigation bars, etc all use tables Not just data lists, like in paper docs NOTE: tables do not resize Don’t use tables to reproduce paper In a longer course we would learn CSS, which is how most pages are now coded. Formatting with tables Same page with table borders Table Resize Problem Keep a consistent appearance Visually show that the site is the same – Always use the same background – Same graphic style – Same type formatting Ransom note effect can confuse the reader – Is this the same site? – Adjusting to new formatting style Templates for consistency Build and test templates first Get the overall design finalized If you don’t – Making same changes on bunches of pages – Missing some changes looks bad – Less chance of inconsistent design Create the design and then make copies Filename consistency Web sites have lots of files and must be maintained (perhaps not by you) The filenames you pick must make sense and say what the content is Avoid page1, page2 names Maintenance is hard since you forget the naming structure after a few months. Keep reader oriented Give all pages titles Page title of “Untitled” is unprofessional Makes development difficult. Frames are poor design Frame is essentially a way to have multiple web pages open on your site at the same time. Bookmarks fail Back button function is inconsistent Questions for discussion Good and bad points of the web What makes it good and bad Correctness of people’s attitude that everything is on the web? Especially from a student’s technical-level needs? End
