Art 444 Lecture Notes

Syllabus
---------------------

Calendar/Schedule

---------------------

Lecture Notes

---------------------

Projects

---------------------

Resources

---------------------

Student Work

Art 444 Lecture Notes
Web Alignment Techniques & Horizontal Rules
To control line leading:
<P> PARAGRAPH BREAK -creates a space between lines of text or slightly larger leading between objects (Dreamweaver: use return)
<BR> LINE BREAK -returns text or an object directly under the line above (Dreamweaver: use return + Shift)

Aligning content horizontally across the page:
The default alignment of content is to the left. Use the Alignment buttons in the Properties Window to align text or objects in Dreamweaver.

To center an object or text use the <div> tag:
<div align="center"></div>
Note: You may also use the <center></center> tag

To right align an object or text use:
<div align="right"></div>

How to "bleed" graphics on your page:
To override the defaulted margins set in the browser you will need to add LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" to the <BODY> tag.
Note: LEFTMARGIN="0" TOPMARGIN="0" is for the IE browser and MARGINWIDTH=0 MARGINHEIGHT=0 is for the Netscape browser.

Example:
<BODY BGCOLOR="FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">

Dreamweaver: Specify zero margins in the Page Properties in the Modify menu.
Alignment of text in relation to images:
Add the following to the <IMG SRC> tag to control alignment of text in relationship to an image.
ALIGN="TOP"
ALIGN="MIDDLE"
ALIGN="BOTTOM"
Example:
<IMG SRC="image.gif" HEIGHT="100" WIDTH="100" ALIGN="TOP"> NOTE: If you use the three tags above with text longer than a few words you might see the text wrap awkwardly. In this case, use the two alignment tags below.
ALIGN="RIGHT -Tells a block of text to wrap LEFT of the image. Image appears on the RIGHT side of the browser.
ALIGN="LEFT" -Tells a block of text to wrap RIGHT of the image. Image appears on the LEFT side of the browser.
Example:
<IMG SRC="image.gif" HEIGHT="100" WIDTH="100" ALIGN="RIGHT">
Dreamweaver: Use the Align pull-down field in the Image Properties window to set the text/image alignment relationship. Don't confuse the left, center, and right image alignment buttons for this function.
Horizontal and vertical space tags for images:
Use to insert a "cushion" of space around an image.
HSPACE="10" -Creates a horizontal "cushion" of 10 pixels on either side of the image
VSPACE="10" -Creates a vertical "cushion" of 10 pixels on the top & bottom of the image
NOTE: 10 is a pixel measurement
Example:
<IMG SRC="image.gif" HEIGHT="100" WIDTH="100" VSPACE="10" HSPACE="10">
Dreamweaver: V space and H space can be found in the Image Properties window.
Note: You can create transparent gif spacers in Photoshop to space objects. Make the transparent gif only 1 pixel in width and height and stretch them using the height and width tag!
Adding Horizontal Rules:
<HR> -creates an embossed horizontal rule the width of the browser page
<HR WIDTH=500> -changes the width of a rule
<HR SIZE=10> -changes the height of a rule
<HR ALIGN=RIGHT> -to change the alignment of the rule (right or left)
<HR NOSHADE> -no embossing
Dreamweaver: Click the Horizontal Rule icon in the Common Objects palette to add a rule to your page.