1 / 12

Web Site Design

Web Site Design. Lee Honeycutt English 313 March 8, 2001. with C. a. s. cading Style Sheets. Process Interface Design Site Design Page Design. Typography Editorial Style Graphics Multimedia. Design Principles. http://info.med.yale.edu/caim/manual/contents.html. Typography.

norris
Download Presentation

Web Site Design

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. Web Site Design Lee Honeycutt English 313 March 8, 2001 with C a s cading Style Sheets

  2. Process Interface Design Site Design Page Design Typography Editorial Style Graphics Multimedia Design Principles http://info.med.yale.edu/caim/manual/contents.html

  3. Typography In present HTML: • Alignment (limited) • Line Length (invisible tables) • Upper vs. Lower Case (by hand) • White Space (blank GIFs)

  4. Cascading Style Sheets • Advantages: • Separation of content from design • Efficient control over large document sets • Pixel-level control over typography • Netscape & Internet Explorer incompatibilites • Standard in next few years

  5. HTML Files How CSS Works Web Pages CSSheet

  6. How CSS Works • Similar to “Master Document” in print programs • Various type attributes included in single CSS file • CSS file controls type choices for all documents in a site • Changes in type cascade to all HTML documents

  7. CSS Link Link inserted in header of all HTML files: <link href= "master.css" rel="styleSheet” type="text/css">

  8. CSS Content Contents of master.css file: Selector {Property: Value} declaration tag-selector {property1:value1;property2:value1 value2;…} h1 {color: green; font: Arial, Helvetica, sans-serif}

  9. CSS Content Content of master.css file: h1 { color: maroon; font-weight: bold; font-size: large; font-family: FontName, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; text-align: left; word-spacing: 12px; letter-spacing: 8px; list-style-type: square } h2 { color: black; font: italic small-caps medium FontName, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; text-indent: 20px; list-style-type: square }

  10. Four Selectors • Tag selectors - correspond to HTML tags, such as <H1> and <p> • Classes - independent of HTML code; applied locally to unlimited select blocks of text • IDs - used on a limited basis to modify existing HTML elements. Carry higher weight in “cascade.” • Pseudo classes and pseudo elements

  11. CSS Properties • Fonts • Text • Color and Background • Boxes • Lists • Classifications

  12. Implementation Advice • Start small, making only simple style sheets • View style in different browsers to see results • Let audience’s technical abilities determine complexity of styles • Find a good CSS editor, but learn to tweak code yourself.

More Related