LAYOUTS, LINKS, IMAGES, & TYPOGRAPHY ART340. New HTML 5 Elements section represents a generic...
33
LAYOUTS, LINKS, IMAGES, & TYPOGRAPHY ART340
-
Upload
ethan-pitts -
Category
Documents
-
view
214 -
download
0
Transcript of LAYOUTS, LINKS, IMAGES, & TYPOGRAPHY ART340. New HTML 5 Elements section represents a generic...
LAYOUTS, LINKS,IMAGES, & TYPOGRAPHY
ART340
New HTML 5 Elements
section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
article represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside represents a piece of content that is only slightly related to the rest of the page.
hgroup represents the header of a section. header represents a group of introductory or navigational aids. footer represents a footer for a section and can contain information about
the author, copyright information, etc. nav represents a section of the document intended for navigation.
XHTML vs. HTML 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<!doctype html><html>
<img src="" /> <img src="" >
<div id=“header”></div> <header></header>
<div id=“footer”></div> <footer></footer>
Attribute names are case sensitive.
Attribute names are NOT case sensitive.
Starting your Site
Get organized:1. What is the purpose of your website?2. How many pages will you need?3. What will those pages do/talk about?4. What will they look like?
?
Standard Monitor Resolution
The total number of pixels available on the screen. Useful in determining the likely dimensions of your page.
On average, most commercial web sites are designed to fit in an 1024 x 768 monitor (the smallest monitor that is still in use).
Available space could be as small as 760 x 400.
“Above the Fold”
What users will see without scrolling. The site name and logo Your primary message What your site is about The navigation Important calls to action Any other important information
Put your most elements and messages in the top-left corner and work from there.
Hint: For a 1024 x 768 window, above the fold is 575px.
Liquid or Fluid Layouts
Resize and adapt to the changing window size.
As the window gets narrower, so do the columns.
The text re-wraps as necessary. Pro: They keep with the normal flow and spirit of the medium.
Con: On large monitor, the line lengths may get too long to read comfortably.
Example: http://htmlandcssbook.com/code-samples/chapter-15/liquid-layout.html
Image Source: http://matthewjamestaylor.com/blog/perfect-3-column-dimensions.gif
Fixed-width Layouts
Keep the content of a particular width, measured in pixels, regardless of the window size.
Pro: Allow for more predictable pages and line lengths.
Con: Can result in awkward empty space on large monitors. Users can also miss out of content on the right if their browsers isn’t wide enough.
Example: http://htmlandcssbook.com/code-samples/chapter-15/fixed-width-layout.html
Image Source: http://www.cs.unh.edu/cit/502/resource/tutorials/fall09/sdrolet/ima
ges/Fixed_Layout.jpg
How to Create Fixed Layouts Stay put at a specified pixel width. Decisions to make:
How wide will your page be? (in pixels) Where will your page be positioned in the browser? By default, stays on left edge with white space to the right. You can also center your page.
Typically, all content will be wrapped in a div often named “content,” “container,” “wrapper,” or “page.” That div will then be set to a specific pixel width. This is the div that can be centered (margin: 0 auto;.
Links
The anchor element
The one element that makes links possible <a></a>
The content of the anchor element becomes the hypertext link.
The “href” attribute provides the URL of the linked page.
<a href=http://www.oreilly.com>Go to</a> To make an image a link, put the <img> element inside the anchor element.
By default, browsers show links as blue and underlined.
2 Ways to Specify Links
Absolute URLs: provide the full URL for the document. Mostly used when linking to pages outside your server or site.
Relative URLs: describe the pathname to the linked file relative to the document. Used when linking to a file on your own site.
Links in the same directory as the current page have no path information listedfilename
Sub-directories are listed without any preceding slashes weekly/filename
Links up one directory are listed as ../filename
Don’t start with the drive name (C:, D:, etc.)
target=“_blank”
You can also choose to open links in a new page. Example:
<a href=“http://google.com” target=“_blank”></a> Example: http://htmlandcssbook.com/code-samples/chapter-04/opening-links-in-a-new-window.html
Images
Images
Best image quality with smallest file size possible. jpg (Joint Photographic Experts Group) – lossy, millions of colors. Best for images and photos.
gif (Graphic Interchanged Format) – lossless, 8BIT, 256 colors, animation support. Best for thumbnails, icons and graphical images with solid colors.
png (Portable Network Graphics) – designed to replace gifs, lossless, 24BIT, supports transparency
Images in the Flow
Image before and outside of paragraph tag.
Image before and inside of paragraph tag.
Image inside of sentence within paragraph tag.
Example: http://htmlandcssbook.com/code-samples/chapter-05/where-to-place-images.html
Assets Panel
Organize images, and see thumbnail images and image information.
Shows ALL images in site. To insert an images from this panel, click insert on assets panel, or drag & drop.
Placing Images in Dreamweaver
4 Different Methods: Click where you want the image to go, go to Insert Menu > Image.
Go to Insert Panel on Common Objects. Insert Image. Go to Files Panel. Locate image. Drag & Drop. Go to Assets Panel. Locate image. Drag & Drop, or click insert button.
Images on Properties Panel
Never change the width and height. The “src” property tells the user agent where to find the images.
Infinity symbol – re-optimizes images. Image Map. Areas with the image that can link. Not very popular today.
Don’t use border on properties panel. Use CSS. Don’t use align on image captions. Not ideal. Use CSS.
CSS & Images
Allows for different looks and eases updating. To wrap text around an image:
On image, float: left or right. Padding – space between image and border. Can use to create frames.
Borders – Can experiment with shadows.
Background Images
Background images are referenced through the CSS. Every single element on the page can have one. By default, background images repeat. divs need a width and a height. Always supply a background color, just in case your image fails to load!
Example on <body>: http://htmlandcssbook.com/code-samples/chapter-16/background-image-body.html
Example on <p>: http://htmlandcssbook.com/code-samples/chapter-16/background-image-element.html
Typography
Font Families
font-family Sites rely on user machines to have fonts installed. Font families declare multiple fonts to ensure one is used. The are called font stacks.
All font families, with the exception of generics, must be capitalized.
Go to codestyle.org/css/font-family/BuildBetterCSSFontStacks.html
Example: http://htmlandcssbook.com/code-samples/chapter-12/font-family.html
Font Sizes
font-size The most popular way to specify is using ems and percentages. Both are relative.
Every single user agent has its own, unique style sheet. To use ems:
Set body size to 100% Set headlines: <h1>2em, <h2>1.6em, <h3>1.3em Set paragraphs to 1 em= 100%
Example: http://htmlandcssbook.com/code-samples/chapter-12/font-size.html
Font Weight
font-weight <strong> and <em> are structural. font-weight (CSS)
normal: The default standard font weight, it corresponds to 400 weight.
bold: The standard bold weight of a font face, corresponding to 700 weight.
font-style (CSS) normal: The default, also referred to as "roman" or "upright". italic: Displays a version of the font in an italics style.
Example: http://htmlandcssbook.com/code-samples/chapter-12/font-weight.html
Line Height
line-height Adjusts the spacing between the baselines of the lines of text – leading.
Online type needs more white space than print. Browsers typically center text vertically in the overall line height.
Example: http://htmlandcssbook.com/code-samples/chapter-12/line-height.html
Text Alignment
“text-align: left;” sets the rag to the right. “text-align: right;” sets the rag to the left. “text-align: justify;” sets the text justified.
Tip: Justified text only works if long words are hyphenated, and HTML/CSS provide no support for hyphenation. Simply put, avoid justified text on the web.
Example: http://htmlandcssbook.com/code-samples/chapter-12/text-align.html
Letter Spacing
letter-spacing Letter-spacing on the web is risky because you cannot always guarantee the size of the typeface, along with the typeface you will be spacing.
In the case that you do use letter spacing, specify in ems to ensure that the amount of kerning is applied in proportion to the text size.
Example: http://htmlandcssbook.com/code-samples/chapter-12/letter-and-word-spacing.html
The Measure
The measure is the number of characters in a single line of text.
Rule of thumb: Optimal line length is typically 10 to 12 words, or between 60 and 75 characters.
Text decoration
text-decoration Underline: underlines the element Overline: draws a line over the text Line-through: draws a line through the text Blink: makes text flash on and off None: removes all decoration. Used to take underlines off of links.
Example: http://htmlandcssbook.com/code-samples/chapter-12/text-decoration.html
The color property
The color property allows you to specify a color. RGB values (color: DarkCyan;) HEX codes (color: #ee3e80;) Color names (color: rgb (100,100,90;)
The hex number corresponds to #RRGGBB. Here are a few examples of how to make an h1 gray:
h1 { color: gray;} h1 { color: #666666;} h1 { color: #666;}
Foreground vs. Background Color
Background Color: h2 { background-color: #ee3e80; }
Foreground Color: h2 { color: #ee3e80; }
Example:http://htmlandcssbook.com/code-samples/chapter-11/example.html
Web Elements of Typographic Style
For more info on the elements of typographic style applied to the web, visit: webtypography.net/toc
