1 / 19

CSW 131 – Chapter 4 Formatting Your Pages

CSW 131 – Chapter 4 Formatting Your Pages. Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston, Wiley. Introduction to CSS (pp. 96-97). CSS (Cascading Style Sheets) formats web pages . Uses plain text (like HTML) and are white space insensitive

marjorie
Download Presentation

CSW 131 – Chapter 4 Formatting Your Pages

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. CSW 131 – Chapter 4Formatting Your Pages Prepared by Prof. B. for use withTeach Yourself Visually Web Designby Ron Huddleston, Wiley

  2. Introduction to CSS (pp. 96-97) CSS (Cascading Style Sheets) formats web pages. • Uses plain text (like HTML) and are white space insensitive • Syntax requires the use of selectors and declarations • Selectors: define rules for part of page to be styled • Declarations: include property : value pairs, e.g., body_text{ font-family: Times, Baskerville, serif; color: #660033; } • Embedded Style Sheets within page using <style> tags • External Style Sheets can link to ALL web pages of site • Inline Styles (within an HTML tag) should be avoided • Browser Support: Very good except older versions, e.g. IE6

  3. Create an Embedded Style Sheet (pp. 98-99 • Embedded Style Sheets are placed within HTML pages and take priority over External Style Sheets • download ch04.zip into downloadssubfolder • copy & paste ch04zip into class_work subfolder • extract (unzip) ch04.zip, which becomes subfolder ch04 into class_work subfolder Note: indexDONE.html is for your reference (do NOT edit) • Using Notepad, open index.html • Embedded Style Sheets use this required tag and value: • On a new line before the closing </head> tagtype: <style type="text/css"> </style> • Note that styles are placed within the <head> section (this is only the opening & closed tags, so page appears unchanged).

  4. Understanding Units of Measurement (pp. 100-101) Many CSS properties require varying units of measurement, usually more than 1 type/page. • English & Metric units vary by monitor: do NOT use! • Pixels: good for widths of borders, padding and margins around elements • Points & Picas: 72 points or 6 picas = 1 inch, so 12 points = 1 pica. Based on an inch, so these are also NOT recommended. • Ems & Exes: Ems = width of a capital M in the current font, so if the font is 16 pixels, 1 em = 16 pixels. Exes are the width of a lower case x, but usually = ½ em. • Percents = % of the parent element or page. If page is set to 90% and paragraph to 80%, paragraph’s size = 80% of 90%. • IE Browser & Font Scaling: Users can only resize on screen text if font sizes are set using ems, exes, or percents (IE9?). • Specifying Units: CSS requires a unit of measure (except 0). pixels = px, ems = em, exes = ex, percent = %, points = pt,picas = pc, centimeters = cm, inches = in, millimeters = mm.

  5. Set the Font and Text Size on Your Page (pp. 102-103) You can set the style and size for any text on a page, but ONLY if they reside on the USER’s computer: • Continuing to work on index.html on a new line before the closing </style> type: body { font-family: Arial, Helvetica, sans-serif; font-size: 90%; } • Save index.html and view in browser. • Note: Using font-family looks on users computer for Arial 1st, else Helvetica 2nd, else any sans-serif last.

  6. Understanding Color on the Web (pp. 104-105) Color not only sets the mood for a website, it can render it unusable for 5% of your (color blind) users. • RedGreenBlue: Each color can be 0 to 255, e.g., purple as rgb(128, 0, 128) – 128 of red, 0 green, and 128 blue. • Hexidecimal: Using 16 digits, 0-9 & A-F, the 0 to 255 can be expressed as 2 rather than 3 digits – Purple as #800080. • 16 Named Colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, & yellow. • The Web-Safe Palette: 216 colors shared by Windows & Apple on early 256 color monitors. Millions of colors display today. • Accessibility and Colors: Color contrast can make websites more useable for the color blind. See for yourself @ Vischeck. • CSS 3 and Alpha: This will add the ability to specify an Alpha channel, or color transparency – rgba(128, 0, 128, .5) will create purple with 50% transparency. Browser support!?

  7. Determine a Color Scheme Using Kuler (pp. 106-107) Adobe Kuler is a GREAT, FREE online resource for designers to access and use color schemes you or others in the community created, and identify colors within images. MANY students use this. • Go to http://kuler.adobe.com (check out their Help). • View color schemes; click tosee the hexadecimal values. • If you like using it you can set up a free account: • Save and download themes, making it easy to use them on your web site, and change colors as you wish. • You can also save your own color schemes there. • You can also determine the colors in an image .

  8. Set Text Color (p. 108)Set a Background Color (p. 109) CSS color property actually sets the color for the foreground of an element – this is usually for text. • Continuing to work on index.html on a new line before the closing } type: color: #540907; • Save index.html and view in browser. W3 color help! Background color is set using background-color. • Continuing to work on index.html on a new line before the closing } type: background-color: #FFC955; • Save index.html and view in browser

  9. Add a Background Image (pp. 110-111)(Designer) Comments / Notes (NOT IN BOOK) Background images can be used instead of color. Use jpeg or gif (png?) files that do not overwhelm users. These can be on any element, but mostly on body. • Continuing on index.html on a new line before the closing } type:background-image: url("images/backgroundtile.gif"); • Note: Subtle, non-distracting images are usually best. Always set a background-color in case image fails to appear. (Designer) Comments / Notes, not visible to users, help you remember, notify other designers, disable code, etc. • Three examples of use: • //color: #540907; [line disabled] • color: #540907; //maroon;[comment only; line works] • /*Colors are defined below */ [/* & */ can be used on one, part of and multiple lines]

  10. Control Background Image Tiling (p. 112) The background-repeat property controls tiling, with values of repeat-x (horizontal), repeat-y (vertical), and no-repeat (none). • Continuing to work on index.html, comment out the previous background-image://background-image:url("images/backgroundtile.gif"); and on a new line below it replace it with: background-image: url("images/gradient.gif"); Save index.html and view in browser… Now add the following line background-repeat: repeat-x; [repeats: horizontal axis] • Save index.html and view in browser.

  11. Position Background Images (p. 113) Background images default to top left of the element – to specify a location, background-position is used, with two values; the 1st is distance from left of page, the 2nd from top of page. • Continuing to work on index.html, to match the book, first comment out the previous background-image and background-repeat lines://background-image: url("images/gradient.gif");//background-repeat:repeat-x; and on a new line below it replace it with: background-image: url("images/flowers.gif"); background-repeat: no-repeat; [shows once] • OK, now on a new line before the closing </style> type: background-position: 550px 0; [book shows 450px] • Save index.html and view in browser.

  12. Apply Additional Text Formatting (pp. 114-115) CSS line-height sets the distance between the baseline of the 1st and following lines, while text-transform controls text capitalization with values uppercase, lowercase, & capitalize. • Continuing to work on index.html on a new line before the closing </style> type: h1{ text-transform: uppercase; [different than "capitalize "]}p { line-height: 1.5em; [note "em " is used for consistency]} • Save index.html and view in browser. • Change uppercase to capitalize, view in browser, undo & save.

  13. Indent and Align Text (pp. 116-117) CSS text-indent controls indentation of the 1st line of text, while text-align controls the look with values center, left, right, & justify. Measures used most often are px and ems. • Continuing to work on index.html on a new line before the closing } type: p { line-height: 1.5em; text-indent: .75em; ["em" offers editing consistency] text-align: justify; [careful using justify value]} • Save index.html and view in browser.

  14. Apply Spacing with Padding (pp. 118-119) • CSS uses what is referred to as a box model regarding the space around elements: • Padding • Border • Margin • Continuing with index.html we will add padding in h1 & p: On a new line before the closing } for BOTH h1 & p type padding-left: 20px; [padding only to left of element] } • Save index.html and view in browser. • Note that there is shorthand or a shortcut for coding padding: • 1 value for all sides • 2 values for top & bottom, left & right • 4 values in clockwise order, top, right, bottom, and left The element content

  15. Control Whitespace with Margins (pp. 120-121) • Again using the CSS box model, the margin represents space between elements: • Padding • Border • Margin • Continuing with index.html we will add margin in body, h1 & p on a new line(s) before the closing } using shortcut, add: margin: 0; [no (0) margin for all 4 sides of body] margin-top: 0; [no (0) margin for top of h1] margin-bottom: 10px; [10px margin for bottom of h1] margin-top: 0; [no (0) margin for top of p] margin-bottom: 10px; [10px margin for bottom of p] • Save index.html and view in browser. • Note: shorthand or shortcut for coding per the previous slide: The element content

  16. Specify Widths (pp. 123-124) • Again using the CSS box model, the width property sets only the element content width: • Padding: 20px • Border: 10px • Margin: 20px But total width = 520 + 20 + 20 + 10 + 10 + 20 + 20 or 620px! • Continuing with index.html we will add width in h1 & p on a new line(s) before the closing }: width: 520px; [520px width for h1 content] width: 520px; [520px width for p content] • Note: As h1 & p have 20px left margins, elements are 540px wide. • Save index.html and view in browser. element content: 520px

  17. Add Borders (pp. 125-126) • The CSS border defaults to 0 (not visible), but the values width, color, & style, make it appear: • Padding: 20px • Border: 10px • Margin: 20px • Continuing with index.html we will add border in h1on a new line(s) before the closing }: border: 1px dashed #540907; [values can be in ANY order] • Shorthand is used meaning there will be a border on all 4 sides of the h1 element. Other options for border are:border-top, border-bottom, border-left, & border-right. • Note: As h1 is now 542px wide (520 + 20 + 2). • Save index.html and view in browser. • Note: 10 available border style values are: none, hidden, solid, double, dotted, dashed, groove, ridge, inset, and outset. element content: 520px

  18. Notepad ++ (NOT IN BOOK) • Notepad++ has extended Notepad features • Numbered lines • Color coding • Encoding choices, and many other features • Save and close index.html • Right click index.html and select Edit with Notepad++ (or open with it) NOTE: use Encoding | Convert to UTF-8 without BOM • Evaluate the differences compared to Notepad • Many designers like this as a simple tool for coding

  19. To Do List • Read Chapter 4 • Revisit what we did in class • Be careful as we do not follow book • Remember, MUCH more detail about anything we cover is: • at w3.org • the Appendices of your book • DOCUMENT Your Project using Word doc ProjectPlan • Remember, pick something you LOVE – your website will benefit!

More Related