Web Dev Class Main
GUI Class Main
Blogs
Book list
html
Dreamweaver
ImageReady
Usability
Assessment 2 Plan
Assessment 2 Build
Web Graphic Basics
Photos on the Web
Assessment 3
Sound on the Web
Video on the Web
Animation on the Web

TIP: Don't ever drag columns and row sizes, type them into the Properties Dialog Box. Otherwise, if you need to change the size you'll have a hell of a time finding where the width/height is set.

TIP: Don't ever merge or split cells, as the cell properties you set for one cell could affect another cell somewhere that you don't intend and there's no way to unlink their properties if Dreamweaver thinks they're related.

 

web dev class

assessment 2 sample build

I'm keeping this first example really simple, the most basic possible. You can experiment beyond what I've got here, but always check your code to make sure you're not doing anything outside the criteria for the assignment. If you want to do something beyond what we cover in class, ask me! It's a lot easier than redoing stuff if you step outside the assessment requirements.

Open Dreamweaver, and start a new page:

File>New(Basic Page, HTML)>Create

Before adding any content, we'll save the document. The reason we do this so early is because the graphcis etc are merely linked to in the code, not actually embedded - so where they are in relation to this document is very important, and if you haven't yet saved this document Dreamweaver won't be able to work out where your source content it in relation to this document. Clear as mud? So...

Save this first page as index.html into the top level of your web folder. Hopefully you decided on your directory structure in your planning stage? Because this is a pretty small site, I'm having all my html pages at one level of the directory, and then folders under that called photos, thumbs, titles and temp (where I've plonked all my original, unsized photos etc).

Now we know where this file is in the scheme of things, you can start to put in your content. In this example, I don't have rollovers in any of these title images, they're just basic, static gifs.

Title your document in the box at the top. This is not the filename, it's the title that appears in the browser when someone looks at or bookmarks your site.

I'll now create the table for my top panel:

Insert>Table(Rows=1, Columns=3, Table Width=100%, Border Thickness=0, Cell Padding=leave blank, Cell Spacing=leave blank, Header=none, Accessibility=leave blank)

Click in the first cell and Insert>Image then select logo graphic (from titles folder). Do the same with the title image (or text) and the sitemap image.

Since I want my middle cell in this table to take up any remaining browser space, I'll set a fixed pixel width to both the leftmost cell (240 pixels) and righthand cell (50 pixels). You do this by clicking into the cell (but not selecting the graphic and then using the Properties box W=240). You'll notice that there are a lot of things you can do in this Properties box - it's the main way that you apply behaviours to whatever's selected. You'll notice that the Properties box options change according to what's selected. eg, a whole table, a column, a cell, a graphic, text - all of these have different properties that you can apply.

Continue to insert tables, including tables within tables, to suit your layout plan. You can always adjust things like width, padding etc after inserting the table (just select the table in the grey bar at the bottom and then use the Table Properties to change whatever you want).

I usually save the file at this stage as all of the filenames in my plan - that way there's no risk of mistyping a file name in the Link of Properties box and causing a dead link, as you can actually select the file you intend to link to using the Browse function (the little file pic). I then overwrite these dummy-files with the real thing once all my links are created. Remember, no spaces, &'s etc in your file or folder names, and the folders I'm using are:

• /bigpics (containing my resized jpegs 500x500 with my name on them, made in Photoshop)
• /thumbs (containing both versions of every thumbnail 50x50 jpeg, made in Photoshop)
• /titles (containing all my gif titles, both versions if I want them to have rollovers of a different colour, or to be a different colour to show what page the viewer is currently on)
• /temp or /workinprogress (this folder won't be uploaded, or ever used in our Dreamweaver files, it's just somewhere to collect everything until we get it right and put it into one of the above folders - eg, unsized photos, Photoshop files in psd format to harvest layers from etc)

Remember to insert a table with a bit of padding if you have text. If you want to use a background image, Modify>Page Properties(Background Image, browse for image). You can also change such things as the background colour, overall text colours etc here. This is where you fiddle with things that apply to the whole page.

So, after creating my tables and placing my basic graphics, saving as all the filenames in my plan, I then end with saving as index.html. Then I create all my links using Properties (eg linking the Sitemap icon to sitemap.html).

For rollover graphics, I use Dreamweaver after creating both states on Photoshop or ImageReady and saving them into my thumbs folder.

Insert>Image Object>Rollover Image(Name your image, choose Original image, Rollover Image, Tick Preload, add a description or title in Alt Text, When Click Go To - use browse to link to appropriate file)

In a basic layout like this where all the pages are pretty much the same, I just get one right, linking ALL images to where they go, then save as every file name (again) and then unlink the "you are here" graphic on each page and change the variable content on each page afterward.

That's basically the building all done!

Preview in a browser to test if it works. Explorer's a bit dodgy on some of the OSX machines at school, so use Safari there. At home of course test it in Explorer, as that's the vast majority of traffic on the web. Also, remember to test at BOTH 800x600 and 1024x768 - the ability to make variable-size layouts is fundamental to this assessment.

The larger version of the site (ie, as per the above plan) can be seen at: jaspercook.com/progress/ Content for the smaller version is currently at jaspercook.com/progress/temp.html if you want to download all of that to use instead of using your own content (of course I'd much prefer you use your own content!)

Once the site's finished, you can upload it. You need FTP details for the space where you'll be uploading the site to. This usually includes an FTP address (or site), a username and a password.

UPLOADING TO YOUR REMOTE SERVER

The excellent ISP (Internet Service Provider) that I use myself provides a really good walk-through of how to set up and upload your site to their server from Dreamweaver MX:

arach.net.au/support/webpage_design_and_upload/uploading/windows/dreamweaver/index.shtml

Once the site's uploaded, you can test it on a range of computers, operating systems, anywhere you can get on the web for a look.

A MORE DETAILED SITE that would also meet the requirements of the assignment if you're more adventurous:

arach.net.au/~retrokat/