Homework
Read the following carefully and come to class with your index.html webpage with three images inserted into a table. See if you can figure out how to insert a ROLLOVER image.
Add a biographical paragraph about yourself, complete with additional spaces and a
line break.
Defining
a Site
First,
on your computer, create a new folder and name it YOUR NAME (e.g., Bettina Web
Folder).
Next
create 3 more folders within that first folder:
Make
sure all the names are lower case.
YouÕre
going to want to work with this site in DW, therefore you need to tell DW where
this site is. If you end up moving website files to another computer, you'll
need to define the site on the new computer. But if you stick with this particular computer, this is the
only time you'll need to "Define the Site."
1.
To define the site, go to the DW start page, and click on the "Dreamweaver
Site" link under the Òcreate NewÓ column.
At the top of the window you'll see basic
tab an advanced
tab.
Use advanced tab (donÕt let advanced scare you). When you define a site, youÕll be working with it on your
own computer. When you work on
your own computer, youÕre working Òlocally.Ó When youÕre working with files on your web server, youÕre
working Òremotely.Ó Make sure your
Local Info category is selected.
You'll
see 2 very important fields:
"Site Name" and "Local root folder."
Site
Name: the name you enter here
is for your computer only. It
doesnÕt have anything to do with website; so give site a name that makes sense
to you. If you were working
on a site about New Jersey waste management, youÕd name it NJwaste.
Local
root folder: So now you have
to tell DW where the site is.
Browse for it by clicking the folder icon. Find the folder.
Make sure you select the entire folder for your site. ThatÕs all you
have to do to get started.
Other
things in local info category:
You
already have created an "images" folder so you don't need a default
one!
Http://
field: Here is where you put in
the web address you will end up having.
You
should put: http://www.uni.edu/username
Case-sensitive
links field: you should know ONLY
TO USE lower case letters, so this shouldnÕt be a problem.
Cache: Enable cacheÉ..don't worry about this, we will address this
later.
DW becomes a conduit through which you
can interact with the folder on your desk top.
File
and folder management
Once
youÕre site is defined, you can access the folders you created in Dreamweaver's
File folder. Go to Windows/Files
(or select F8)
You're
going to come here OFTEN so get used to it!
If
you decide to delete or change a file, youÕre going want to do as much of this,
"file management" as possible from the Files panel. Avoid making any changes from the
Windows or mac interface itself.
Moving files is a big no-no unless you want the hassle of fixing broken
links. Make all changes within
DW. You can create new file
folders, etc. and you can easily add them to your local computer.
To
create new webpages within the site, select File/New and create it within
DW/File management system.
You
can see the contents of your folder in the File panel:
Adding
images onto your webpage:
ThereÕs
going to be times where youÕre going to want to bring in images that are
outside the root folder, like on a USB drive or something.
To
use them, you need to move them into the Root folder.
Here are 2
TRY
ALL THREE METHODS multiple times.
Creating
and saving a new document
3 ways to do this.
1.
preferred
method!!
Right
click Windows/Control Click Mac, on the main site folder and choose ÒNew
FileÓ. DW generates a new
page. Create it as Index.html, and
off you go. It saves a couple of steps, itÕs automatically saved in root
folder. Fastest way to create a
new page.
2. On start page, click on ÒHTMLÓ to
generate a new page. DW opened a brand new fresh page. But the issue here is
that itÕs not yet saved, and in the right place. Whenever you create a page in this method, you have to SAVE
IT IMMEDIATELY. That way DW will
know exactly where it should go. File/Save, and save it in the local root
folder. It should automatically
display local root folder, but always double check.
Since
you should always give your page a title, donÕt forget to do that asap. Give it
a good descriptive title.
3.
Select File/New.
Gives you all sorts of options as well as templates. Again, youÕll get a blank
document. Save it right away. You can even create a new folder in
which to save the file.
As
long as everything is in your main folder, you can have as many sub folders as
youÕd like.
Assets
panel
Very
important panel, youÕll find it in the files panel group. A catalogue of all the different
images, colors, links, templates, library itemsÉthings you might be using in
DW, and this panel is like a one-stop shop to find access to all these
different things that youÕll continue to use.
The
panel is broken down into several different categories. When you open DW, it automatically
scans your site and finds stuff to put into the appropriate categories. So you can have immediate access to
them. If you start adding
different colors to your site, youÕll see the colors there. You never need to manually add assets
to your assets panel.
Occasionally
you might need to hit the refresh button to give it the most current listing,
but DW does add assets automatically.
With
each image selected you can see a preview of what each image looks like. So itÕs good to use the assets panel
for previewing images before you bring them into your site.
You
also may want to take advantage of your ÓFavoritesÓ categoryÉ.store all of your
most commonly used images. Instead
of having to hunt through all of your images, stick a few in your favorites
category. (The little purple
button at the bottom right corner of the Assets folder).
When you go into
to Favorites window the little purple button will have a minus sign next to it
so you can remove favorite images.
Inserting
images
Several
different ways to do this.
Add an image to the page using the assets
panel. Select image in assets
panel and drag it onto your page.
YouÕll see the Image Tag Accessibility Attributes window pop up. This will happen every time you add an
image to your page. Accessiblity
is a major concern when it comes to web design. ItÕs about making your page as accessible as possible for
people with vision disabilities and to people who will be viewing on smaller
browsers (a phone or PDA, for example).
Here you can put an alternate TEXT in replace of the image, so that
people who are using screen readers (or audible readers), which read the text
of a webpage to a person out loud, can know what the image is about. You can
have this window not come up if you want to by changing your preferences. If you know what image you want you can
make real quick work at this.
That takes you to a dialogue box that allows you
to hunt for the images that youÕll use. You can get a preview of the
image. If you donÕt see it, make
sure you have Òpreview imagesÓ checked.
Problem here is there is a lot of unnecessary clicking. Much easier to go to the assets panel,
find image you want, and drag it in.
When
you go between Design and Code, whatever is highlighted in code is whatever you
happen to be working with.
<p><img
src=Òimages/header-top.gifÓ width=Ó720Ó height=Ó58Ó/>
This
is what is known as a relative path.
Meaning this path is relative to the page in which it appears. If you switch to your files panel, this
is what the path means: In
the main root folder, look for the folder called images and in that folder look
for the image that has the name Òheader-top-gifÓ
An
Absolute path is when you give the exact address of a file regardless to the
relationship of the page itÕs on.
In most cases itÕs not necessary to give an absolute path unless youÕre
linking to a website other than your own.
Accessiblity means many different
things: a person with vision disabilities
or a person wanting to access a webpage on a mobile phone. Some people will
still surf with their images turned off so things will go faster. By providing alternative texts you can
help people out who want to, for example, go faster and search using their
phone. In Properties Box for the Images, thereÕs a little area across the top
layer of the box labeled ÒAltÓ and itÕs here where you can name your images.
Inserting
text
Text is the most common
kind of content. Not much to show
you here. A lot like working w/ a
word processer. Type whenever you
see a flashing cursor.
Add a Space: If you want to put space between words, you CANÕT
HIT THE SPACE BAR MORE THAN ONCE.
HTML only recognizes one line of space. If you want to add space, you
can insert non-working spaces or use CSS to control the position of texts. To
add more than one space between characters, you can press CTRL+Shift+Spacebar
or you can insert the "Non-Breaking Space" character by choosing the
Insert menu, HTML, Special Characters and then choosing NON-Breaking Space.
Add
a Line Break: When you press ENTER
after another line of text, there is an awkward space between the new line and
the old line. ItÕs a Paragraph break.
You can control this to some extent if youÕre working with CSS. But what if youÕre typing an address
and you want the town on the very next line. Instead of a Par. Break you need a LINE break. To insert a linebreak, hold down
Shift on the keyboard and then press return. (in code this will be represented by
<br /> )
If
you go into the code view, this is a really great way to learn the basics of
HTML.
Aligning
text and images
Default
for alignment: Everything will be aligned to the LEFThand side of the
page. You can center by putting
cursor on an image or in a line of text, and choose one of these and it will center, align right, etc.
Page
properties
You
find Page Properties by going Modify/Page Properties or going Control J (windows) Command J (Mac). Remember this key command, b/c youÕll
use it often. If youÕre not going to use CSS, you can use Page Properties
instead (just go to Edit/Preferences to turn off the CSS default option). You can apply a background color
here.
Using
meta tags
When
you insert metatags you make it much easier for search engine robots to
understand how to categorize your site.
How do you add this information?
They only appear in the HTML code, not in the document body whatsoever. Go to INSERT bar and switch to the HTML
category. Concern yourself with
the Head button and select Keywords. ItÕll open up a Keywords dialogue box
Keywords reflect the content of
the page. Pick words that any
person would type in to Google or Yahoo to find your site. Separate each word
with comma and space: tea, tea stores,
brewing, green tea (etc). DonÕt go
too overboard. A lot of search
engines limit the keywords you can use, and will just pass you over.
Another
type of metatag is a ÒSite DescriptionÓ which will describe site when it comes
up in your website listing. If you
donÕt do this, itÕll take the text off the first few lines of the body of the
text itself. Keep it short and
sweet. In the code, these changes will be marked by ÒmetaÓ You CAN add a series
of keywords to every single one of your pages, but most of the time people just
do this to the front page of your site.