Posts Tagged ‘Dreamweaver’

Need two columns? Float those divs!

Monday, September 14th, 2009

Divs want to display “block” style, meaning they want to sit atop one another. If you want them to work as two columns, you need to set them both to float.

What is a float? Well, the easiest analogy is that floated items allow content placed after them in the code to “wrap” around the floated item. If you have used InDesign, you have probably set the “Text Wrap” characteristics for a photo, allowing text to wrap around one side of the photo in question.

Floating is basically the same thing. By floating a div, you force the next div in the code to wrap around the floated div. In order to create two true columns, you must set them both to float.

Float property in Dreamweaver CSS Rule window.

Float property in Dreamweaver CSS Rule window.

Depending on your layout, you can choose to set them to float to either the left or the right. Web designers will often set them both to float the same direction, to control the space between columns more efficiently.

For an example using the Sequoia exercise, watch the video below:


Tags: , , , , , ,
Posted in Podcast, Web Design |

Making a new Site in Dreamweaver

Saturday, September 12th, 2009

You guys are going to have to do this at least twice in Web Design, at least twice in Interactive Design, and GOD KNOWS how many times after graduating, so, without further ado – here’s the magic recipe to setting up a Site in Dreamweaver.

Step 1: Gather up your files for the Web site into a local root folder. This folder will store everything that will eventually be uploaded to the server, so don’t clog it up with a bunch of extra files, such as high-resolution scans that have no yet been “Saved for Web.”

Step 2: In Dreamweaver, go to Site/New Site, and click on the “Advanced” tab at the stop of the screen. You will need to fill in the following items on this (the LOCAL INFO) screen:

  • Site name (which can be anything, including any characters)
  • Local root folder: use the blue folder (browse) button to select the local root folder from step 1.
  • Default images folder: OPTIONAL – create a folder called “images” inside your local root folder and select it here.
  • Links relative to document (yes, unless you are an advanced user and know how to set site relative links for your own domain name)
  • http address: OPTIONAL – provide the actual URL of this website (for this blog, it’s http://joel.creighton.edu/blog/
  • Use case sensitive link checking (yes) 
  • Enable cache (yes)

Step 3: Set up your Remote Info screen (selected in the left column of the advanced view). Again, go through the following settings:

  • Access: FTP (I’ve never used anything but FTP)
  • FTP Host: people.creighton.edu (or another URL used by your own server – if you have purchased space and a custom domain name somewhere else)
  • Host directory public_html (this is for people.creighton.edu, this will almost certainly be different if you have a different server)
  • Login & password (either your Blue user/pass, or your user pass for another server)
  • Other settings: Some servers require Secure FTP (people does) and some require Passive FTP. I have found the only way to discover this if you haven’t been provided the information about the server is by trying the different settings and clicking “Test”
  • click Test, and if it connects successfully, you are ready to go.

Step 4: Finish and be smart with your site. Remember, Dreamweaver will be able to track changes to links, locations and file names ONLY if you make the changes in the Files window. If you do ANYTHING outside of the Files menu (F8), Dreamweaver will not update links, and you’ll end up with broken links, pages, and missing images.

Tags: , , , , ,
Posted in Interactive Design, Web Design |

Revenge of the Nerds

Monday, August 25th, 2008

In the 1984 Jeff Kanew magnum opus, nerdkind takes it’s revenge on a cruel, jock-centric society by engaging in sexually charged acts of high-tech mayhem.

In 1991, Nerds got their revenge in real life with the invention of the World Wide Web. It took about five years for the rest of the world to catch on, but since the advent of the hypertext transfer protocol, the balance of power worldwide has shifted from high powered Dom Perignon MBA types to high tech Red Bull folks. I would say that the real revenge was lacking in sexually charged acts of high-tech mayhem, but a few minutes spent with Google can dispel that myth pretty quickly.

As you get started in JMC 382 Web Design, you’ll want to heed these few free pieces of advice:

Be on time. Be awake. My two pet peeves are people walking in late, and people sleeping in class. Do not be one of these people. Incidentally, I tend to quiz on material that people sleep through, and I start quizzes promptly when class begins.

Buy the book. I quiz from the book. You’ll also need it for the paper. The Zen of CSS Design is actually a damn good introduction into a lot of the issues we’ll be dealing with, and it balances tech with aesthetics in a similar fashion to my lectures.

Find a buddy. The buddy system is a great way to reinforce all the techie things you’ll be learning. If you are having problems figuring something out, maybe your buddy knows what is wrong.

And most importantly, ask questions. If you don’t ask it, I don’t know that you don’t know it. Awkward sentence structure aside, the really interesting questions (and answers) end up in this blog. That way, you can come back and check out the answer again and again, and I get a nice, organized place to keep all the answers. Cool, eh?

Anyhoo, have a lovely semester. This should, at the very least, be very interesting.

Tags: , , ,
Posted in Web Design |