Object-Oriented Design for the Web Using Dreamweaver CS2 Carolyn Guertin, PhD [carolyn dot guertin at gmail dot com] ecreate Lab English Dept. University of Texas at Arlington Last updated July 2009 Dreamweaver CS2 Is a powerful tool for undertaking objectoriented design for web pages on the World Wide Web It also allows you to work with text, images, multimedia and behaviors as objects that you can move around What is HTML? Browsers encode It is encoded structure Hypertext Mark-Up Language is the skeleton of the web the browser determines a webpage s: Fonts Colours Window size Functionality 1
Dreamweaver lets you encode Website Structure: Using Property Inspectors Dreamweaver lets you encode structure: using Page Properties The Property Inspector is context sensitive. It changes for each object or text item, and shows the attributes for that item. It gives an easy way to view and edit the properties of each item. The expander arrow will expand or collapse the property inspector to show or hide properties. Any time the property inspector is not visible, go to Window > Properties on the Menu bar. Font, Font Size, Text Color, Backgrounds, Links, Title, etc. Dreamweaver lets you encode structure: Dreamweaver lets you encode structure: using Cascading Style using Cascading Style Sheets Sheets Basic Features of Web Pages Text styles Spacing Tables They are called this because they allow a consistent design to flow from one page to another. Fonts Links Images 2
What Websites Do NOT Do is Encode a Rigid Form Websites are spaces that we move through Everything floats on the surface, realigning itself to the browser s default settings on every different computer. Web Interface Designer Jeff Veen says that there are three questions you should always ask yourself when designing a page: Digital Design is composed of two activities according to Lev Manovich Where am I? Where is here? Where can I go? Interface design (what we might think of as surface) Navigation or spatial environments (what we might think of as depth) 3
Websites are Architectural cyberspace is architecture; cyberspace has an architecture; and cyberspace contains architecture ~ Marcos Novak The Web is made of text, image (and other multimedia components) and code Webpages are home not just to these objects, but to behaviors as well No Dead Ends Provide doorways, windows and escape hatches Give directional indicators Always point the way home Design any site as if it was a collection of rooms Remember that your site is situated in space and time The Three Panel Layout Identity or Brand Name Navigation Canvas (Site Content) Web Conventions Design Web-friendly sites: users bring expectations about how interfaces work Extend eternal conventions when you need too, but only when there is a reason Be original, but not at your user s expense Be true to your internal interface design: do not break your own rules 4
Golden Rule of Web Design = No Control Websites have variables whereas print has absolutes These are liquid pages: use percentages Design for fluid behavior rather than rigid style (advanced designers will use CSS, Cascading Style Sheets, to build the style in) Newspapers keep the most important information above the fold so it is visible on the stand and through the box window. Your Website should follow the same principle. The most important information should be visible when the page first loads. Less important information can be out of sight. Architectural Design Important Design Dos and Don ts A good architectural design incorporates: Context (goals, funding, politics, culture, technology, limitations) Content (document and data types, content objects, space, existing structure) Users (audience, tasks, needs, information seeking behaviour, experience, expectations) The FIRST FILE of any Website is always named index.html NEVER use spaces in file names Do keep file names SHORT and DESCRIPTIVE Search engines find your page by the TITLE: always give it one Keep images together in a folder (or, if a complex site, a subdirectory) with your other files Do NOT update links unless you want to change them all 5
Web Resources & Tutorials Web Monkey http://www.webmonkey.com Web Builder http://www.builder.com Free Graphics http://www.rainy.org http://www.free-graphics.com/ http://www.coolarchive.com/ http://artist4hire.net/free.html http://animationlibrary.com Contact: Carolyn Guertin, PhD Director, ecreate Lab Department of English University of Texas at Arlington carolyn dot guertin at gmail dot com 6