ARTM2210 Intro to Web Design

Just another Intro to… site

Week 3: Layout with Dreamweaver and using Classes and ID’s

Dreamweaver

Views:

  • Code – acts just like TextWrangler, plus it will assist with coding
  • Split – shows your code and how it looks rendered
  • Design – allows for basic content editing, is best for the insertion of copy, links and images

Important Panels:

  • CSS Styles – allows you to quickly link external style sheets, it is also possible to edit styles here though it is less efficient than hand coding
  • Files – allows for file management and uploading
  • Properties – changes depending on what you have selected – generally allows the creation links, application of copy related html tags, and the application of classes & ID’s.

Taking control of your layout with more HTML and CSS

For greater control of your layout its helpful to group specific types of content together. This is done using organizational tags, such as, <header>, <article>, <nav>, <footer> and <div>.

For example all of the most important information lives together inside the header of a page (note: header, head and h1 all do different things.)

<!doctype HTML>

<html>

<head>

<title>Page Title</title>

<style>CSS rules</style>

</head>

<body>

   <header>

<h1>My biggest headline</h1>

<h2>My subhead</h2>

<p>some copy</p>

<p>more copy</p>

   </header>

   <article>

<h2>My subhead</h2>

<p>some copy</p>

<p>more copy</p>

   </article>

</body>

</html>

With CSS you are not limited to styling only existing HTML elements, you can create your own selectors called “class” and “id” which can be applied to any HTML element.

The ID selector is defined with an #, and uses the HTML element’s id=”” attribute. For example a css rule would look something like this:

#big_red_text {font-size:72px; color:red; font-family:Verdana;}

and could be applied to a single paragraph like this:

<p id=”big_red_text”>some big red text</p>
<p>some text that looks like all of my other paragraphs</p>

Id’s are unique and should only be used once within your HTML document.

The Class selector is defined with a . , and uses the HTML element’s class=”” attribute. For example a css rule would look something like this:

.small_blue_text {font-size:10px; color:blue; font-family:Verdana;}

and could be applied to multiple paragraphs like this:

<p class=”small_blue_text”>some small blue text</p>
<p>some text that looks like all of my other paragraphs</p>
<p class=”small_blue_text”>more small blue text</p>

Class’s may be used multiple times within an HTML document.

To take control over our sites layout we need to begin by using CSS’s position property. This allows us to tell HTML elements like <header>, <article>, <nav>, <footer> and <div> where to go on the page. The position property has three values, absolute, fixed, and relative, each with its own behavior.

Once a position property has been chosen then simply give the rule X and Y coordinates. X can be defined using either the left or right property. Y can be defined using either the top or bottom property.

So to position an element using an id the style would look like this:

#move_me {position:absolute; left:200px; top:150px;}

and would then be applied to only one html element

<nav id=”move_me”>my links are now 200 pixels from the left of the screen and down 150 pixels from the top</nav>

To position and element and define its size using an id the style would look like this:

#some_object {position:absolute; left:200px; top:150px; width:100px; height:100px; background-color:red; border:#666666 1px solid;}

and would then be applied to only one HTML element

<div id=”some_object”></div>

In class meet individually to review haiku. Then begin work on part of the Haiku project.

Part 2: Using HTML’s DIV tags and CSS’s absolute positioning recreate your sketches. If you used graph paper assume each square is 10 pixels by 10 pixels, if you used sketch paper assume 1 centimeter is equal to 10 pixels. Practicing using ID’s and Classes to style your boxes; focus on web safe fonts, background-color, background-image, border and position rules. For creating more complicated shapes explore css-tricks.com

Due Class Class 5 – 2.13 – Have all ten uploaded to the server, be sure to have links to each on your homepage and bring printed screen shots to hang for critique.