Media Arts Class Blog

Final Project (Website) Checklist

Categories: General Information,Handouts,Project Info No Comments

Here is a checklist so that you can make sure that you have all the required elements for your websites:

Final Evaluation File

Categories: Handouts No Comments

Today I handed out your Final Evaluation. This is due on Monday. As promised, here is a digital version so that you can type into it if your handwriting is a bit messy…

Also remember, when you answer the questions on the first 3 pages, the trick to getting a good answer is to use the Elements of Art to describe WHY that Principle exists. But you must use them in a way so that you are describing the visual elements in the project, as well as answering the question of WHY those elements have created that principle.

For example, you could say something like, “I used rectilinear lines on the left side of my image, and then curvilinear lines on the right side of the images. This created contrast because of the differences in the shape of the lines. Furthermore, I created contrast because the curvilinear lines were cyan, and the rectilinear lines were magenta, which are complimentary colors.” IF that honestly describes the way your project has contrast in it, then that answer would get full credit.

The idea behind this isn’t to trip you up, but rather to make you reflect on your work. And a reflection answers the why and the how of the piece.

Last Two Steps for Your Website!

Categories: Class Notes,Demonstrations,Project Info No Comments

Okay – there are only TWO last steps for your website! The first is what I outlined in the previous post: You need to add an “h1″ title and the CSS to your page. Secondly you need to “link” your menu buttons, and then duplicate your index page and make the duplicates into the other 3 pages. Change the titles and you’re done!

Code for the Title Text

Categories: Class Notes,Project Info No Comments

It’s important to let your user know what page they are on, so at the top of the content area, you need to add a title. The code is very simple, but also remember that titles, by default, take up a lot of space. I always find that I end up lessening my padding at the top of the content div because of it. How much you reduce it to is up to you, but I usually go down to 3 or 5 pixels.

Here are screen shots of the code, first with the HTML, and the the second image is the CSS. Note that there is no “#” or “.” sign before the CSS!

Title_HTML


title_CSS

Creating Rollovers with Text-Based Menu Links

Categories: Demonstrations,Project Info No Comments

If you do not have images as buttons for your menu, you will need to create a rollover effect with the CSS. It’s very simple, and here is a demo video and screenshots of the code:

Here is the new CSS:

Rollover_CSS1

Rollovers with Images

Categories: Demonstrations,Project Info No Comments

One of the things that we need to do is add some interaction with the user on our websites. We do this via the use of “rollovers.” Rollovers are a simple change that happens with the menu items to let the user know they are placing the mouse over a link. It’s pretty easy to do, especially since Dreamweaver does most of the coding for you!

Configuring the Content Area with Dummy Text and CSS

Categories: Demonstrations,Project Info No Comments

What we need to do now is figure out what our content area would look like if we had actual content in it. But instead of taking the time to add real content, we can add “dummy text” that will help us figure out how to configure our content div.

When you add the dummy text to the content div, the text will probably burst out of the div. You need to modify the height of the div, from “height” to “min-height”. Also, don’t forget to set your margins and padding!

Screenshot:


Content_NewCSS

Video:

Moving from Photoshop to Dreaweaver

Categories: Demonstrations No Comments

NO AUDIO because someone unplugged the audio cable from my computer. But if you like silent film, this one will be a favorite. Because le’s face it – what’s better than NOT being able to hear me talk?!

HTML and CSS Fixes for Websites

Categories: Class Notes,Project Info No Comments

On Friday we applied some fixes to our code for our websites. The first thing we did was add a background color for the entire browser window, using a “html, body” css statement. Currently we only hack backgrounds on the wrapper and other divs, but that did not cover the entire window. So this will help us out a lot.

Here are the screen shots for that css (there is no HTML code necessary):

html_body_CSS_code

The issue was that the “title” div was sliding behind the logo div. The logo div was set to “float:left”, but the title div was not. If we set the title div to “float:left”, it would go into place correctly, but then the menu div would slide up next to the title div and everything would be all messed up. The solution to this problem is simple: Place a container div around the logo and title divs, with no float setting, and that will force the menu div to stack underneath it.

Here are screen shots of the code for this step:

Title_Area_HTML

 

TitleArea_Fix_CSS

Sketchbook Assignment : Self Portrait

Categories: Sketchbooks No Comments

This is the LAST SKETCHBOOK ASSIGNMENT OF THE YEAR! It’s a self-portrait, which we’ve done once before – but you have to do it again. Let’s see how you have improved! So here’s a few examples of what we’re looking for, in case you can’t remember…

All content © Weisbrod Imaging, unless otherwise noted. All rights reserved.