1 / 19

Ideas to Layout

Ideas to Layout. Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site using CSS. CB Averitt Florence-Darlington Technical College c b.averitt@fdtc.edu. Topics. My Challenges Media Types

jin
Download Presentation

Ideas to Layout

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. Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site using CSS. CB Averitt Florence-Darlington Technical College cb.averitt@fdtc.edu

  2. Topics • My Challenges • Media Types • Links with Preloaded Images • Button Rollovers – Sprites • CSS’s relationship with accessibility • Let’s Build a Page • Questions? • What is CSS • CSS Syntax • 4 CSS’s • Classes • ID • <div> tag • Tools & Resources • CSS Best Practices • What Browser should be used in designs and layouts?

  3. What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles are normally stored in Style Sheets • Styles were added to HTML 4.0 to solve a problem • External Style Sheets can save you a lot of work • External Style Sheets are stored in CSS files • Multiple style definitions will cascade into one w3schools.com

  4. CSS Syntax • Selector {property: value} - example: body {color: black} • More than one property – Semicolon - Selector {property1: value1; property2: value2;} example: p {text-align: center; color: red} • Readable – example: p { text-align: center; color: black; font-family: arial; } • Grouping – use a comma h1,h2,h3,h4,h5,h6 { color: green; }

  5. 4 css’s • Browser Default • External style sheet – example <link rel="stylesheet" type="text/css" href="main.css" /> • Internal style sheet (inside the head tag) – example: www.powersaviation.com • Inline style (inside an html element) – example <p style="background: blue; color: white;">A new background and font color with inline CSS</p> link

  6. Classes • Different styles for the same type of html element – example: p.right { text-align: right; } p.center { text-align: center; } p.left { text-align: left; } <p class="right">This paragraph will be right-aligned.</p> <p class="center">This paragraph will be center-aligned.</p> <p class=“left">This paragraph will be left-aligned.</p> link

  7. ID • HTML elements with particular attributes. a unique identifier to an element -example: #red { color: red; } <p id="red">This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. </p> link

  8. <div> tag • defines a division or a section in an HTML document. • is often used to group block-elements to format them with styles. • Browsers add a <br /> between

  9. Tools & Resources • Dreamweaver • Web Developer for Firefox • Cssfly.net – www.cssfly.net • www.w3schools.com • Google • Validation • Existing Websites

  10. CSS Best Practices • Doc Types – examples: http://www.w3schools.com/tags/tag_doctype.asp • The doctype declaration should be the very first thing in an HTML document, before the <html> tag. • The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. • The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly. link • xhtml • Closing – example: <p>This is some text.</p> • Self closing – example: <hr />

  11. Best Practices continued • Use standard html tags first - H1, H2, etc. • Defining styles (browsers may be different – default styles) • Screen Resolutions • 1024 X 768 • What are the big boys doing? • CSS Comments – example: /* This is a comment */

  12. What Browser should be used in designs and layouts? • Types • Firefox • Internet Explorer 7 • Internet Explorer 6 • Safari • Opera • Chrome • Browser Stats Over the last 30 days IE is 93%, Firefox is 5.6% and Safari is .68%. Within IE, IE 7.0 is 90%, IE 6.0 is 9% and IE 8.0 is .8%. All Of Them!!

  13. My challenges in the beginning • Pushing a page down (min-height. IE 6.0) • Do not start your class name with a number – example: #1heading {color: black;} • Site Centering • Positioning on the parent - link

  14. Media Types • example: <link rel="stylesheet" type="text/css" href="/source/fdtc_screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="/source/print2.css" media="print"> http://www.w3schools.com/css/css_mediatypes.asp & link

  15. Links with preloaded images • example: www.imperialinktattoo.net

  16. Button rollovers – Sprites • example: www.ptli.org https://www.ptli.org//source/images/button2.jpg • Entire site as one big image with positioning.

  17. CSS’s relationship with accessibility • Converting from tables to CSS is the first step. • Not an “end all” • Alt tags on images • Closed Captioning/Transcripts for videos • Links that make sense – avoid “click here” • Organize page with H1, H2, p, etc

  18. Let’s Build a Page

  19. Questions? CB Averitt cb.averitt@fdtc.edu

More Related