SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

Mastering Web Design: A Comprehensive Guide to Cascading Style Sheets and Interface Design

norris avatar
norris
12 diapositives · 291 Views · Jul 13, 2014

Explore the principles of effective web design with a focus on Cascading Style Sheets (CSS) and typography. This guide covers essential topics such as the advantages of CSS, including separation of content and design, efficient document control, and pixel-level typography management. Additionally, learn about the implementation of CSS in HTML files, selector types, and styling properties. Gain insights into optimizing your web pages for diverse browsers and tailoring complexity to your audience’s technical skills. Perfect for web designers seeking to enhance their skills.

Mastering Web Design: A Comprehensive Guide to Cascading Style Sheets and Interface Design - slide 1
01 / 12Mastering Web Design: A Comprehensive Guide to Cascading Style Sheets and Interface Design
1 / 17

Télécharger la présentation

Mastering Web Design: A Comprehensive Guide to Cascading Style Sheets and Interface Design
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  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.