CSS Layout Pages

Roll

Questions?

For Today You Were To:
Bring in two or three pieces of content representing two or three themes to use on your AIPE Project: images, news items, an image showing your color scheme, a font, a list, etc.

For Next Time:
Come in with a "Design Scheme" for your AIPE Project. This will include:

1. four or five pieces of content--images, chunks of words, lists, fonts represented in a .gif or .jpg, color swatch .gif (see example at right)--all inserted in a simple, visual list (a verticle stack of items) on a blank HTML page and posted to the web (in "www/4230/exercises/scheme1").This page is not your project, but only a platform for storing some possible elements that may be included on your actual page later.

Steps:

1. On your USB drive, be sure you have created a folder "aipe" at the top level of the folder "4230." Also check that there is an "assets" folder inside of "aipe." If you need to, create these folders.

2. In Dreamweaver (with the "www" site selected from the drop-down menu at the top of the "Files" panel), create a new blank page (File > New > Blank Page > Create)

3. Before inserting any images, save the page as "scheme1.hmtl" inside of "aipe"

4. Save all optimized images (.gif or .jpg only--no .psd's!) in the "assets" folder inside of "aipe"

5. Insert images onto the page from that "assets" (after saving!)

6. Paste in verbal content and format as desired. Note that if you're pasting from Word, you will need to choose Edit > Paste Special > Text Only, or hit Command+v+shift and click OK.

7. Title the page with your first and last names and "AIPE Scheme"

I will ask for the URL at the beginning of class.

2. At the beginning of class, I will also ask you to send me a formal, correctly written, thoughtful paragraph explaining how these pieces of content will work together to suggest two or three themes that are drawn from your autobiography. This paragraph should attempt to explain what your AIPE page will only be able to suggest through "indexical" pointing. This paragraph will eventually become the "Unity Paragraph" in your project Commentary.

An Original CSS Layout Page with Your Banner
Using what we've learned in McFarland's "CSS Page Layout" Chapter (9), we'll create a new page based on one of Dreamweaver's prefab CSS Layouts, save the page into the folder "www/4230/exercises/banner, and then insert the banner into the page. Send the clickable URL of the page (with the banner showing) to the forum, "CSS Layout Page."

HTML Mark-Up Language and CSS
In order to have a better understanding of what Dreamweaver is doing with HTML code behind the WYSIWYG interface, we'll also try our hand at writing our own HTML page. You will save this page in a new folder "www/4230/exercises/markup"

I will give you a copy of the handout.

For this exercise, we will use an application on your Mac called TextEdit (the directions on the handout have you use a Windows equivalent called Notepad).

You will also need this whale image (right-click on it, and choose to save the image to a new folder "www/4230/exercises/markup/assets"

I will ask you to send a clickable URL of the page to the forum "Mark-Up HMTL Pages"

Photoshop, Constitutive Themes

Roll

Open...
...Dreamweaver and--from your folder "www/4230/exercises/Chapter05"--open "confessions.html"

Questions?

For Today You Were To:
1. Read McFarland, Chapter 9 "Page Layout." and comlete the tutorial "CSS Page Design"

2. The following three pages use different themes to present the same content:

• Make 'Em Proud
• A Walk in the Garden
• Under the Sea
  
  

In the forum "Different Themes/Same Content," discuss how the different themes on each page influence the "ideas and impressions" made by the contentthat the pages share in common.

How does the meaning and effect of the title "Zen Garden" change?

How about the meaning and effect of the phrase "The Road to Enlightenment" change?

How does each theme support (or not) the mission of the page to promote the use of CSS as a campaign? Choose one other detail for each page that is given more or different meaning by the themes used on that page.  

For Next Time:
Bring in two or three pieces of content representing two or three themes to use on your AIPE Project: images, news items, an image showing your color scheme, a font, a list, etc.

Screen Shots to Capture Snippets from Your Monitor and Save in Photoshop
See the directions for Screen Shots from the Techniques Site.

McFarland Help Session
Visit with a neighbor or two, and fix any issues
Re-upload ("Put") your revised page if necessary. Post the "Chapter9" folder to the web, and send a clickable URL of the page to the forum "McFarland C9."

Different Themes/Same Content: How Themes Can Be "Constitutive"
We'll discuss some of your observations from the forum "Different Themes/Same Content," looking at themes used on the pages

• Make 'Em Proud
• A Walk in the Garden
• Under the Sea
  

Exercise
Intermediate Banner Techniques
We'll continue with this tutorial using the handouts I gave you last time

You should already have visited the page "Banner Techniques" and downloaded the two image files into your "wddc" folder.

We'll continue working with the "richlighthouse.psd" file you saved in your "wddc" folder.

We'll save the final .jpg version to a folder on your USB: www/4230/exercises/banner and upload the "banner" folder to the server.

We'll visit that .jpg with your browser, copy the URL, and create that URL as a clickable link in a message to the Moodle forum, "Banners"

Photoshop

Roll

Open...
...Dreamweaver and--from your folder "www/4230/exercises/Chapter05"--open "confessions.html"

Questions?

For Today You Were To:
Read McFarland's Chapter 7 "Tables" and Chapter 8 "Advanced CSS" and complete the "Tables Tutorial" starting on page 270

For Next Time:
1. Read McFarland, Chapter 9 "Page Layout." and comlete the tutorial "CSS Page Design"

2. The following three pages use different themes to present the same content:

• Make 'Em Proud
• A Walk in the Garden
• Under the Sea
  
  

In the forum "Different Themes/Same Content," discuss how the different themes on each page influence the "ideas and impressions" made by the contentthat the pages share in common.

How does the meaning and effect of the title "Zen Garden" change?

How about the meaning and effect of the phrase "The Road to Enlightenment" change?

How does each theme support (or not) the mission of the page to promote the use of CSS as a campaign? Choose one other detail for each page that is given more or different meaning by the themes used on that page.  

McFarland Tables Help Session (Chapter 7)

1. Visit with a neighbor or two, and fix any issues

2. Import Your "www" site

3. "Put" (Upload) the Entire "Chapter7" folder
The folder should be uploaded to "4230/exercises"

4. View the "table.html" page with your browser

1. Go to UMD's home page.
2. In the browser's location bar at the top, click at the end of the URL "http://www.d.umn.edu/" and type in a tilde (~), your userid, a forward slash, and "4230" so it looks like this: http://www.d.umn.edu/~youruserid/4230.
3. Hit Return (or Enter)
4. From the "index page" that appears, keep clicking till you get to where you want to go, or type "table.html" in the URL after "Chapter07/".
   
   

5. Submit the URL of your Page for Credit

1. Open your "confessions.html" page (the version from Chapter 5) in your browser and copy the URL from the browser's location bar at the top
2. Visit the Moodle forum "McFarland C7"
3. In a reply to my message at the top, paste in the URL
4. Highlight the pasted URL, and click the link icon above the message window
5. Paste the URL again into the "URL" box, and click OK

Exercise
Beginning Banner Techniques
I will give you a copy of the tutorial for this exercise.

You'll need to visit the page "Banner Techniques" and download the two image files into your "wddc" folder.

Save the resulting .psd file somewhere in your "wddc" folder.

Save the final .jpg version to a folder on your USB: www/4230/exercises/banner and upload the "banner" folder to the server.

Visit that .jpg with your browser, copy the URL, and create that URL as a clickable link in a message to the Moodle forum, "Banners"

Images, Themes

Roll

Open...
...Dreamweaver and--from your folder "www/4230/exercises/Chapter05"--open "confessions.html"

Questions?

For Today You Were To:
Read McFarland's Chapter 6, "Images," and complete the tutorial.

For Next Time:
Read McFarland's Chapter 7 "Tables" and Chapter 8 "Advanced CSS" and complete the "Tables Tutorial" starting on page 270

McFarland Images Help Session (Chapter 6)

1. Visit with a neighbor or two, and fix any issues

2. Import Your "www" site

3. "Put" (Upload) the Entire "Chapter6" folder
The folder should be uploaded to "4230/exercises"

4. View the "confessions.html" page with your browserz

1. Go to UMD's home page.
2. In the browser's location bar at the top, click at the end of the URL "http://www.d.umn.edu/" and type in a tilde (~), your userid, a forward slash, and "4230" so it looks like this: http://www.d.umn.edu/~youruserid/4230.
3. Hit Return (or Enter)
4. From the "index page" that appears, keep clicking till you get to where you want to go.
   
   

5. Submit the URL of your Page for Credit

1. Open your "confessions.html" page (the version from Chapter 5) in your browser and copy the URL from the browser's location bar at the top
2. Visit the Moodle forum "McFarland C6"
3. In a reply to my message at the top, paste in the URL
4. Highlight the pasted URL, and click the link icon above the message window
5. Paste the URL again into the "URL" box, and click OK

Themes

Questions about the assignment? the criteria?.

In a reply to the Moodle forum "Themes on Home Pages," type the name of a home page, paste in a clickable URL to it, and list the possible themes you see on the page. You don't have to explain how or why they fit together (unless you want to).

Three dimensions of themes (from page to the viewer's mind)

1. On the page (visual design choices, word choice, writing style)

2. Theme named

3. In the mind of the viewer (ideas and impressions)

Links, Themes

Roll

Open...
...Dreamweaver and--from your folder "www/4230/exercises/Chapter05"--open "confessions.html"

Questions?

For Today You Were To:

Read McFarland's Chapter 5 and complete the Links Tutorial at the end

Themes on home pages: Last time, we looked at the themes of "the lake" and "people/faces" on UMD's home page. For Friday, bring in an example of a home page (personal, organizational, corporate, or civic) that uses ideas or "motifs" on the page more than once. Be able to explain what those themes are, and how they work together to suggest something individualizing about the person, group, or organization the page represents.

For Next Time:
Read McFarland's Chapter 6, "Images," and complete the tutorial.

McFarland Links Help Session

1. Visit with a neighbor or two, and fix any issues

2. Import Your "www" site
Choose Site > Manage Sites > Import, and choose the "www.ste" file you exported previously to your USB drive.

3. Upload or "Put" Your "Chapter05" Folder to the Web.
With your "www" site imported and selected in the Files Panel, click the folder "Chapter05" once to select it, and then click the Up Arrow button ("Put" button) at the top of the Files Panel window

4. View the "confessions.html" page with your browser

1. Go to UMD's home page.
2. In the browser's location bar at the top, click at the end of the URL "http://www.d.umn.edu/" and type in a tilde (~), your userid, a forward slash, and "4230" so it looks like this: http://www.d.umn.edu/~youruserid/4230.
3. Hit Return (or Enter)
4. From the "index page" that appears, keep clicking till you get to where you want to go.

5. Submit the URL of your Page for Credit

1. Open your "confessions.html" page (the version from Chapter 5) in your browser and copy the URL from the browser's location bar at the top
2. Visit the Moodle forum "McFarland C5"
3. In a reply to my message at the top, paste in the URL
4. Highlight the pasted URL, and click the link icon above the message window
5. Paste the URL again into the "URL" box, and click OK
6. Return to your browser's other tab or window, navigate to "spice.html" and repeat steps 1-5 to add a working URL to "spice.html" to your message.
7. Click the "Post to Forum" button at the bottom.

Themes

Questions about the assignment? the criteria?.

In a reply to the Moodle forum "Themes on Home Pages," type the name of a home page, paste in a clickable URL to it, and list the possible themes you see on the page. You don't have to explain how or why they fit together (unless you want to).

My example
Edward Tufte is Professor Emeritus at Yale University, where he taught courses in statistical evidence, information design, and interface design.

Tufte's page uses all capital, san-serif, widely spaced lettering for links and headings, which is repeated in the "ET MODERN" logo at the top. (Notice that the text of Tufte's links and headings are done as images, which ensures that they will look the same on any computer or browser.) Together with the papery tan background, the lettering recalls the cool, clean look of architectural drawings. Though Tufte is not an architect, his work in "analytical design" brings together concerns about practical use of design with a sensitivity to what is visually pleasurable--one of his pictured books is titled Beautiful Evidence, for example--and so modernist architecture is a visual theme.

I notice too that "BOOKS" is the very first link after "HOME" in the menu at the top. I also see that the page heading reads, "THE WORK OF EDWARD TUFTE AND GRAPHICS PRESS." Down the page, you see lots of images from and of Tufte's books. Clearly, books are a theme too. On this page, "THE WORK" and "EDWARD TUFTE" and "GRAPHICS PRESS" are all the closely associated, not only in the heading but in the combination and presentation of content.

There is also the theme of modernist art: the first news item announces Tufte's new museum/gallery. Lots of the pictures on the page are not of his "information design" work--the subject of his books, and what made him famouis--but of his large outdoor art installations like "Larkin's Twig," right above his biographical paragraph.

Roll

Open...
...Dreamweaver and--from your folder "www/4230/exercises/c4"--open "confessions.html" and "spice.html"

Questions?

About the Class

or Next Time:
1. Read Chapters 2, 3 and 4 of McFarland, and complete the tutorial in Chapter 4 "Introducing Cascading Style Sheets"

2. Write a paragraph-long "Memory of Earth" in the style of Coupland's Generation X. The memory does not need to be true. I will not ask you to make this piece of writing public, but you will turn it in for credit.

For Next Time:
Read McFarland's Chapter 5 and complete the Links Tutorial at the end

Themes on home pages: Last time, we looked at the themes of "the lake" and "people/faces" on UMD's home page. For Friday, bring in an example of a home page (personal, organizational, corporate, or civic) that uses ideas or "motifs" on the page more than once. Be able to explain what those themes are, and how they work together to suggest something individualizing about the person, group, or organization the page represents.

First Project

Review the criteria on the assignment page.

McFarland Help Session

Why All These Styles and Rules?
See css Zen Garden: a contest where designers took the same page of html code and made it look different just by changing the css rules.

1. Open...
...Dreamweaver and--from your folder "www/4230/exercises/c4"--open "confessions.html" and "spice.html"

2. Questions about the McFarland Chapters 2, 3 and 4? The "Introducing CSS" Tutorial at the End of Chapter 4?

Your folders should now look like this:

>>>MM_DWCS3
>>>wddc
>>>www
>>>>>4230
>>>>>>>exercises
>>>>>>>>>Chapter01
>>>>>>>>>Chapter04
>>>>>>>aipe
>>>>>>>>>assets
>>>>>>>client
>>>>>>>>>assets

>>Let's Not Forget....
Every time you begin a new McFarland Chapter exercise, copy the chapter's folder from "MM_DWCS3" to your "www/4230/exercises" folder and work from there.

3. Import your "www" Site Information
To upload your Chapter04 folder to the web, you'll need your "www" site set up in Dreamweaver. Importing the site information can save lots of time:

Choose Site > Manage Sites > Import, and navigate to the .ste file that you exported last time. I suggested saving that exported file at the top level of your USB drive.

If you need to set up your "www" site again, see the directions from last time archived on the Previous page.

4. Post your Entire "Chapter04" Folder to the Web
This is the copy of the "Chapter04" folder inside your "exercises" folder (that is, "www/4230/exercises/Chapter04") where you copied the folder from the "MM_DWCS3" folder and where you completed the Chapter04 tutorial.

5. Visit your "Confessions" and "Spice" Pages on the Web

1. Go to UMD's home page.
2. In the browser's location bar at the top, click at the end of the URL "http://www.d.umn.edu/" and type in a tilde (~), your userid, a forward slash, and "4230" so it looks like this: http://www.d.umn.edu/~youruserid/4230.
3. Hit Return (or Enter)
4. From the "index page" that appears, keep clicking till you get to where you want to go.

6. Submit the URLs of your Pages for Credit

1. With your "confessions.html" page appearing in the browser window, copy the URL from the browser's location bar
2. Using a different tab or window of your browser, visit the Moodle forum "McFarland C4"
3. In a reply to my message at the top, paste in the URL
4. Highlight the pasted URL, and click the link icon above the message window
5. Paste the URL again into the "URL" box, and click OK
6. Return to your browser's other tab or window, navigate to "spice.html" and repeat steps 1-5 to add a working URL to "spice.html" to your message.
7. Click the "Post to Forum" button at the bottom.