The basic template for a SciFair site is intended to be simple to edit and also
to isolate the general layout, headers, footers, and other design features from
the content you'll include. These instructions are written for use with
Dreamweaver, which is currently installed on four machines in the lab: student538-05
and student538-06 (3rd row from the door), student538-07 and student538-08 (back
row).
First, the basic way
To open dreamweaver, go to start->all programs->macromedia->dreamweaver and
open the appropriate file. Or, right-click the file and choose "edit with
dreamweaver MX2004".
To edit pages, you can simply open the appropriate .asp file (under
\\scicentr2\inetpub\wwwroot\worldsites\scifairYEAR\<yourschool>), choose
"design" under the view menu (unless you know html) and add content in the
appropriate place, between the header stuff, and the links at the bottom. I
gave the part you should edit a light-colored background to make it easier.
Please note that there is more information than what you see, so be careful
where you insert and delete things. If you delete a "tag" for a section of
the page, it can mess up the whole page. This will be obvious when it
happens (edit->undo is your friend). In the design view, in the status bar
it will tell you which sections you are currently in. Most anywhere you
click, you will see <body>, and if you are editing in the correct place, you
will see <div.main> (the main division). You may also see <p> if you are
inside a "paragraph", <img> if you selected a picture, <a> inside a link, or
<div.imagebio> if you followed suggestion #3 below. If you click on one of
those bracketed words, the whole section it denotes will be selected. Also,
in the properties box at the bottom lets you set properties of the section
you have selected.
You can also use code view or split view to see the html that you are generating,
editing, or selecting.
More advanced, but better techniques
Here are some tips that might make things go smoother, though they're a bit
more advanced.
- It will be easier to manage your files as part of a "site" in
dreamweaver. Go to Site->Manage Sites, and choose New->Site. Give it a
name such as "SciFair-<school>", next page "no, no server technology", and
next page choose "Edit copies on my machine" and create a folder IN YOUR
USER FOLDER ON H for this. On the next page, you connect by local/network,
and for folder put in
\\scicentr2\inetpub\wwwroot\worldsites\scifairYEAR\<yourschool> (and you can
check refresh automatically). On the next screen, choose enable
checkin/checkout I suggest defaulting to check-out, and enter your personal
info. Then under the files box/tab (probably on the right side of the
screen), you can choose the "site" you just made to edit, and choose "remote
view". When you double-click a file, it will check-out if possible
(download and tell the server you're editing it). When you save, it will
save locally, but not affect the live version. File->Preview in browser
will let you see what it will look like (almost). And right-click->check in
(or the check-in button) will upload it to the server and make your
modifications live. Be aware of whether you have files checked out, saved,
checked back in, etc - otherwise you might end up with an undesired live
version, or lose your changes.
- Many of you will want to use similar design patterns. For example,
unless you have another artistic idea, under the "mentors" and "coach" page
you probably want to put your pictures on the left with text on the right,
but text wrapping to below depending on the browser's window size. If you
plan to use the same sort of design pattern multiple times (or if you think
others might use a similar idea), please talk to me to come up with a
simpler way.
- On the mentor/coach page example, the way I implemented for this
particular task is as follows. First, insert a picture (there's a button
for this on the toolbar, or go to insert->image object...) Images are in
the "images" subfolder. I suggest making these 150x150 resolution in the
properties box. Then immediately after the picture put your biographical
info or whatever other content you want to put flowing around the right side
of the pic. Then hit enter, and add the next picture and bio. Now select a
picture/bio pair with a mousedrag. Then Insert menu->Layout objects->Div
tag. Under "class", choose "imagebio", leave ID blank, and leave "insert"
as "wrap around". Repeat for each picture/bio pair.
