Setting
up your site
Adding
content to your page
- Under
the file menu in Dreamweaver, click on New. The blank
page you now see will become your webpage.
- Type
some text into the blank window.
- Use
the properties palette (ctrl+F3) to experiment with the font,
size, bold, italic, justification of the text you just typed. (note:
Links are also created by working with the properties palette).
- Use
the objects palette (ctrl+F2) to place other media such as
pictures or animations into your page.
- Navigate
to your own folder on the server.
- Within
your folder on the server, create a new folder called nameweb where
"name" is your first name.
- Launch
Dreamweaver.
- Under
the site menu, click on new site.
- In
the new site menu, type in a name (of your choice) under site name.
- In
the new site menu, also click on the folder icon and
then navigate to the folder you just created in step 2.
- After
you have chosen your webfolio folder in the new site menu,
click OK.
This
will be your working site folder.
Put everything into this folder that you want to appear on your webpage.
This means that ALL the pictures, animations, music files you work with
must physically be in this folder.
Create
a layout (and template)
- Based
on the research you did in Part 1, set up the basic design of your
page(s).
- Make
and execute design choices
- Be
sure to work for consistency and style in your layout (as you did in the
Layout Test.
- Of
course all the CRAP Rules apply here
as always.
design
choices:
•
background color
• text color, font, size
• image size & shape
• layout
• color theme(s) throughout
- Your
complete Webfolio should contain the following pieces:
- Review
your coursework and choose a file from each lab that you are
proud of.
- Build
a separate page for each lab and link to each of these pages from
your splash page.
- Also
build a personal page of content you are interested in (your choice)
but be sure that this page's graphic design is consistent with the rest
of your website.
-
Name & personal info
- Splash
page with links to various content
- Content
page(s) to showcase your work from each lab
- Working
Flash animation
- Link
to your own personal choice content from splash page
- Consistently
excellent graphic design
Testing
- Be
sure to test all your links before publishing. Do this by
<file> <preview in browser>. The keyboard shortcut
for this preview is F12.
- Be
sure that the content, images, links, linked pages are ALL contained
within your root folder.
- Be
sure that your root folder is named after you, e.g. <jchretien>
- When
finished, we will publish your site live in the lab.
The
images you've made in the course are likely not in the correct format for
webpages.
Web
graphics are:
-72dpi
-jpeg or gif format
The easiest way is to "save for web" in Photoshop
and the resulting images can be brought right into webpages.
your
main steps are:
1
set
up your site (map) in Dreamweaver
2
prepare all the images
3
do the layout for one page
4
add content to remaining page(s) (applying
consistent graphic design)
5
build in necessary links between pages
6
test all links
Preparing
images
Building
and testing links
Starting
a page
>>>>>>>>>
>>>
1
2
3
4
5
6
7
dreamweaver
web design
Remember
that any pictures or animations you use must, themselves, be located
in your site folder (webfolio), the same folder that contains the webpage
itself.
