Supplement web design
- 1. Designing forthe Web Overview CHAPTER
- 2. DISPLAY RESOLUTION • The Current trend is that more and more computers are using a screen size of 1024x768 pixels or more. • Account for “Chrome”! – Chrome refers to scroll bars and other items in a browser window that takes space away from the viewable page. (Google/Yahoo toolbars) – 750-775px wide is safe for a 800px wide browser window – 900-960 wide is safe for a 1024px wide browser window • Users will scroll! It has become more common for users to understand that you have to scroll down the page to access certain content.
- 3. FONTSFOR THE WEB • Make sure that your fonts are cross platform compatible! This means they should be common fonts found on windows/mac machines. • Refer to this list: – http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html • Choose sans-serif fonts for large blocks of text. Sans-serif fonts are easier to read on a monitor. • Serif fonts are good for headings and short blocks of text.
- 4. COMMON WEB IMAGE FORMATS • JPG - Joint Photographic Experts Group – used for photorealistic images – Use a lossy compression method. Some image data will be lost during compression. • GIF - Graphic Interchange Format – used for logos and drawings with limited colors • PNG – Portable Network Graphics – PNG-8 – Like a gif image – PNG-24 – Like a JPG image but supports transparency. • Images for the web are usually 72dpi (dots per inch)
- 5. HTML – HYPERTEXT MARKUPLANGUAGE • Elements – – Basic structure for HTML markup as they tell the browser what to render. – All elements usually have a start tag and an end tag. – Made up of two basic properties: attributes and content. • Attributes – Name-value pairs written within the start tag of an element after the element name. The value is usually enclosed in quotes. – Ex: <a href=“http://www.com205.safiredesign.com”>Multimedia Apps </a> • Continuity – Make sure your elements stay in order! – <p><b>This is bold!</p></b> is not correct. – <p><b>This is Bold!</b></p> is correct.
- 6. XHTML • XHTML – eXtensible Hypertext Markup Language – HTML syntax conforms to XML specs. – All elements and attributes must be in lowercase. – All element tags must be closed. – Ex: <p>Paragraph Tag</p>, <br /> • Structural or Semantic Markup – Tags imply meaning. A list of items in written using one of the list elements. Headings are denoted using the Heading elements, etc…
- 7. HEADING ELEMENTS • There are 6 heading elements included in HTML. – <h1> Heading 1 </h1> – <h2> Heading 2 </h2> – <h3> Heading 3 </h3> – <h4> Heading 4 </h4> – <h5> Heading 5 </h5> – <h6> Heading 6 </h6> • Search engines place importance on the text between heading tags. • Treated correctly regardless of style • Convey meaning to the user.
- 8. INLINE STYLES • Inline styles are used within the HTML document to add style to the text. Choose strong and emphasized to convey the most meaning. – Bold - <b>Bolded Text</b> – Underline - <u>Underlined Text</u> – Italic - <i>Italic Text</i> – Strong - <strong>Strong Text</strong> – Emphasized - <em>Emphasized Text</em>
- 9. ANCHORS/LINKS • Links allows us to point to files or specific sections of a web page. – <a href=“http://www.mywebpage.com”> My Page </a> • Links have different states – Link – normal state – Hover – when moused over – Visited – after link has been clicked
- 10. TEXT BLOCKS& QUOTES • Paragraph Tag – <p>Contents of the paragraph</p> • Blockquote Tag – <blockquote>Contents of a blockquote are usually indented.</blockquote> • Code Tag – <code>The code tag is used to place example blocks of demonstration code</code>
- 11. TABLES • Tables are used to markup tabular data like calendars, spreadsheets, charts, and schedules. • Table-based layout - Using the grid system of a table to layout an entire webpage. (Not standards compliant!) <table cellspacing=“0” cellpadding=“0” border=“1”> <tr> <td>Table Data</td> <td>Table Data</td> </tr> </table>
- 12. FORMS • Forms are used to collect data from users. • Since some forms can be complicated most designers still employ the use of a table to align all the elements in a form. <form method=“post” action=“”> <label for=“email”>Email: </label> <input type=“text” name=“email” id=“email” /> <input type=“submit” name=“submit” /> </form>
- 13. LISTS- ORDERED LISTS • Ordered Lists are used for step by step instructions. • List items can have either letters, numbers or roman numerals. <ol> <li>List Item 1</li> <li>List Item 2</li> </ol>
- 14. LISTS– UNORDERED LISTS • Unordered lists are used for generic lists of items. • They can also be styled using CSS and used for navigation. • Default style is a bulleted list. • List shapes and style can be changed using CSS. <ul> <li>List Item 1</li> <li>List Item 2</li> </ul>
- 15. LISTS- DEFINITION LISTS • Definition lists are used to provide a relationship between term/definition pairs. • These can be easily styled using CSS. <dl> <dt>Term</dt> <dd>Definition</dd> <dt>Term</dt> <dd>Defininition</dd> </dl>
- 16. CSS– CASCADING STYLE SHEETS • Cascading Style Sheets is the W3C Standard for controlling the visual presentation of web pages. • A style sheet consists of one or more rules that describe how page elements should be displayed. • A web page can have more than one style sheet attached to it. • The cascade order provides a set of rules for resolving conflicts between different style sheets. Styles with more weight take precedence over styles with lower weight. • CSS Styles can be applied to a document in 3 ways
- 17. CSSRULE STRUCTURE • Every CSS rule has two parts – the selector – specifies the parts of the document to which the style should be applied – the declaration – a combination of the CSS property and a value for that property. Declaration Property Value Selector H1 { color: purple }
- 18. CSS– INLINE STYLES • Inline Styles – style information is specified for an individual element using the style attribute within that elements HTML tag. <h1 style=“color: purple; font-size: 20px;”> Purple Heading</h1>
- 19. CSS– EMBEDDED STYLES • Embedded Style Sheets – placed at the top of an HTML document inside the Style element which must be placed within the head portion of the document. <style type=“text/css”> h1 { color: purple; font-size: 20px; } </style>
- 20. CSS– EXTERNAL STYLE SHEETS • External Style Sheets – style rules that are stored in a separate document and referenced from an HTML document in one of two ways. – <link rel=“stylesheet” type=“text/css” href=“mystyles.css” /> – <style type=“text/css” @import url(mystyles.css); </style>