1 / 19

Advanced Web Page Design with CSS: Enhancing Usability and Aesthetic Appeal

This comprehensive guide explores advanced web design utilizing HTML and CSS, focusing on creating effective wireframes and visual designs. It emphasizes the arrangement of site elements like logos, navigation menus, and media components to enhance user experience. Key topics include the application of traditional design principles to web elements, the significance of color, texture, and typography in creating visual hierarchy, and optimizing layouts for accessibility. Discover how CSS simplifies site maintenance and enhances presentation while adhering to best practices in intelligent interface design.

rafe
Télécharger la présentation

Advanced Web Page Design with CSS: Enhancing Usability and Aesthetic Appeal

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Advanced Web pages and Cascading Style Sheets (CSS)

  2. Wireframe Information Design • Arranging all the site elements together to build context and meaning. • Page Elements • Logo • Courtesy Links • Footer links • Masthead • Global Navigation • Search Form • Rotating image • Features • Local Navigation

  3. Design Composite Visual Design • The visual presentation of the information design. • Design Elements • Colour • Texture • Contrast • Image Treatments • Fonts • Hierarchy • Ornamental graphics • Style • Buttons

  4. Create a visual focus • Make one element (picture) your focus and pull colors from it

  5. Media Elements • Use embed or object tags to add video and sound to your page

  6. Script <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="30" width="145"> <param name="src" value="radioplaybyplay.mp3"> <param name="autoplay" value="false"> <embed src="radioplaybyplay.mp3" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" autoplay="false" height="30" width="145"> </object>

  7. Early Web Present Simple Sharing Graphic Design Techno-Hype Usability Used by academics and researchers for sharing information. Information (text) is presented in a structure defined by basic HTML (h1, h2, p, li, table, b). Example Graphic support and HTML extensions make advanced layouts possible. Designers begin to apply traditional design rules to web pages. Example Many different HTML tags and client side technologies are implemented by IE and Netscape. Designer overindulge in using them. Example A focus on site objectives and user needs gives the user experience high priority. Intelligent interface design using best practices. Example No Frills Publishing User Experience Evolution of Web Design • Since the beginning of the web designing for it has gone through four distinct trends: Design for the Web

  8. Table layout • The simple choice for layout http://www.1421.tv/

  9. CSS layout • The expert

  10. CSS power http://www.csszengarden.com/

  11. Creating Richer and More Maintainable Sites with CSS • Makes page editing and updating easier • Reduces messy HTML coding (faster downloads) • Advanced controls for presentation look and layout • Font size (unlimited) • Float (text wrapping an image) • Multiple web pages can be updated quickly from one external style sheet • Increased accessibility by maximizing the number of viewers that can access your site regardless of the platform, browser, computer or user disabilities. Design for the Web

  12. Basic CSS Syntax element declaration h1 { font: 30px Arial; color:#0000FF; } CSS property value HTML <h1>Welcome to my page</h1> Welcome to my page Page

  13. CSS and HTML tags CSS Allows you to redefine HTML elements like paragraph and header tags p { font: 14px Verdana; color:#999900; } h1 { font: 18px Verdana; color:#CC3300; } <p> example text </p> <h1> example text </h1> example text example text CSS HTML Page

  14. CSS Classes You can create your own classes that are used in conjunction with HTML tags .coolfonz { font: 26px Arial; color:#9966FF; } .uncool { font: 8px Arial; color:#111111;} <p class=“coolfonz”> example text </p> <p class=“uncool”> example text </p> example text example text CSS HTML Page

  15. CSS Location CSS File • External Style Sheet • Embedded Style Sheets • Inline Styles Linked HTML File Header Body

  16. Cascading Order CSS File • Inline Styles • Embedded Style Sheets • External Style Sheet • Browser default Linked HTML File Header Body

  17. Order of Inheritance • Nested tags inherit styles of their parent tags • Not all properties will inherit • Nested tags value override inherited style p { font: 14px Verdana; color:#999900; } b { font: 20px Arial; } <p> example <b> text </b> </p> example text CSS HTML Page

  18. More information and utilities • Tutorials • http://www.w3schools.com/css/css_intro.asp • http://www.w3.org/Style/CSS/ • Utilities • HTML Tidy - http://tidy.sourceforge.net/ • CSS Validator - http://jigsaw.w3.org/css-validator/ • Sites • CSS Zen Garden - http://www.csszengarden.com/ • Glish - http://www.glish.com/css/

  19. Acadia Template • http://webmaster.acadiau.ca

More Related