3. Organizing FoldersOrganizing Folders
You will have a name to log on underYou will have a name to log on under
Create a MASTER FOLDERCreate a MASTER FOLDER
jennifersilvajennifersilva
Create an IMAGES FOLDERCreate an IMAGES FOLDER
imagesimages
Create a PAGES FOLDERCreate a PAGES FOLDER
pagespages
Create a WORK FOLDERCreate a WORK FOLDER
workwork
4. Organizing FoldersOrganizing Folders
Why is it important to save in LOWERCASE withWhy is it important to save in LOWERCASE with
NO SPACES?NO SPACES?
Good:Good:
jennifersilva >> pages >> pageone.htmljennifersilva >> pages >> pageone.html
http://plaza.ufl.edu/jennifersilva/pages/pageone.htmlhttp://plaza.ufl.edu/jennifersilva/pages/pageone.html
Bad:Bad:
Jennifer’s Cool Page >> Pages >> stuff aboutJennifer’s Cool Page >> Pages >> stuff about
penguins.htmlpenguins.html
http://plaza.ufl.edu/Jennifer’shttp://plaza.ufl.edu/Jennifer’s Cool Page/Pages/stuff aboutCool Page/Pages/stuff about
penguinspenguins.html.html
5. Opening DreamweaverOpening Dreamweaver
FINDER >> APPLICATIONS >>FINDER >> APPLICATIONS >>
MACROMEDIA STUDIO MX >>MACROMEDIA STUDIO MX >>
MACROMEDIA…WEAVER MX >>MACROMEDIA…WEAVER MX >>
DREAMWEAVER MXDREAMWEAVER MX
Close every window EXCEPT theClose every window EXCEPT the
Properties toolbarProperties toolbar
Basic HTML pageBasic HTML page
MODIFY >> PAGE PROPERTIESMODIFY >> PAGE PROPERTIES
6. Titles and SavingTitles and Saving
Change the TITLE to HEADER you will haveChange the TITLE to HEADER you will have
Save your document with a simple term,Save your document with a simple term,
LOWERCASELOWERCASE
Title: My Home Page (appears at top of WINDOW)Title: My Home Page (appears at top of WINDOW)
Header: My Home PageHeader: My Home Page
Saved As: home.htmlSaved As: home.html
http://plaza.ufl.edu/jensilva/jennifersilva/home.htmlhttp://plaza.ufl.edu/jensilva/jennifersilva/home.html
7. TablesTables
INSERT >> TABLEINSERT >> TABLE
Rows vs ColumnsRows vs Columns
Rows acrossRows across
Columns downColumns down
PercentPercent
100% for the full page100% for the full page
BordersBorders
Higher number = Thicker borderHigher number = Thicker border
8. TablesTables
Properties ToolbarProperties Toolbar
AlignmentAlignment
Select the tableSelect the table
On the Properties ToolbarOn the Properties Toolbar
Horiz: Changes LEFT, RIGHT, CENTERHoriz: Changes LEFT, RIGHT, CENTER
Vert: Changes TOP, MIDDLE, BOTTOMVert: Changes TOP, MIDDLE, BOTTOM
http://plaza.ufl.edu/jensilva/jennifersilva/pages/tables.htmlhttp://plaza.ufl.edu/jensilva/jennifersilva/pages/tables.html
9. TextText
Click inside the table you want to type inClick inside the table you want to type in
ParagraphsParagraphs
Return = large spaceReturn = large space
Shift/Return = single spaceShift/Return = single space
Properties toolbarProperties toolbar
Size (+1, -1)Size (+1, -1)
ColorColor
Paragraph Alignment (LEFT, RIGHT, CENTER,Paragraph Alignment (LEFT, RIGHT, CENTER,
JUSTIFIED)JUSTIFIED)
10. TextText
AlignmentAlignment
Align on in TABLE using Properties toolbarAlign on in TABLE using Properties toolbar
Horiz: Changes LEFT, RIGHT, CENTERHoriz: Changes LEFT, RIGHT, CENTER
Vert: Changes TOP, MIDDLE, BOTTOMVert: Changes TOP, MIDDLE, BOTTOM
HeadersHeaders
Insert a tableInsert a table
Larger text size, centeredLarger text size, centered
http://plaza.ufl.edu/jensilva/jennifersilva/pages/text.htmlhttp://plaza.ufl.edu/jensilva/jennifersilva/pages/text.html
11. ImagesImages
INSERT >> IMAGE >> look in your folderINSERT >> IMAGE >> look in your folder
>> look in your images folder for an image>> look in your images folder for an image
>> select >> OK>> select >> OK
DO NOT DELETE IMAGES!DO NOT DELETE IMAGES!
Images are NOT pasted onto your pageImages are NOT pasted onto your page
12. ImagesImages
Good:Good:
Jennifersilva >> images >> 1stgrade.jpgJennifersilva >> images >> 1stgrade.jpg
When I paste this on a page, it will retrieve it from theWhen I paste this on a page, it will retrieve it from the
FOLDER, which is on the SERVERFOLDER, which is on the SERVER
Everyone can see the serverEveryone can see the server
Bad:Bad:
My Documents >> jensilva.jpgMy Documents >> jensilva.jpg
http://plaza.ufl.edu/jensilva/jennifersilva/pages/images.htmlhttp://plaza.ufl.edu/jensilva/jennifersilva/pages/images.html
13. LinksLinks
Type your text - KEEP IT SHORTType your text - KEEP IT SHORT
Good: Helpful LinksGood: Helpful Links
Bad: Here are some links to help you outBad: Here are some links to help you out
Highlight the textHighlight the text
Properties toolbarProperties toolbar
Link:Link:
Type URL here for an outsideType URL here for an outside
Select the folder icon to insert a page from yourSelect the folder icon to insert a page from your
PAGES folderPAGES folder
14. Email LinksEmail Links
Highlight the text >> INSERT >> EMAILHighlight the text >> INSERT >> EMAIL
LINK >> type address >> OKLINK >> type address >> OK
http://plaza.ufl.edu/jensilva/jennifersilva/pages/links.htmlhttp://plaza.ufl.edu/jensilva/jennifersilva/pages/links.html
Today, I’m going to talk a little bit about Dreamweaver. This is the program we are going to be using when we create our class Website. It allows you to create a page without using HTML code, but if you know code, you can use that as well. If you don’t understand EVERYTHING right now that’s ok. I will be guiding you through a hands-on lesson when we go to lab. I just want you to know what you are going to encounter when we get there. This lesson will also be up on the web page you access in lab so you can refer to it for guidance. Has anyone ever used Dreamweaver before? Has anyone used a program like it? Does anyone have experience using HTML or some other code to make a Web page? This will be a review for you, and you can help the rest of us as we go along if we have questions. By the end of the year, everyone in here should have a basic understanding of how this works.
Today we are going to cover the following. If we don’t get to all of it, I’ll take a few minute before we go to lab to finish up.
When we go to the computer lab, you will log on to the computer using your last name and first initial. This will open up a space on the school server with your saved files. When it comes time to do the Website, each group will come up with a group name, and you will log on using that name. Any questions? The next thing you will do is go to MY DOCUMENTS, and create a MASTER FOLDER you will put all of your work related to the web project. Everyone should name it in ALL LOWERCASE, using their FULL NAME, like my example. The reason for this is so I can easily find your folder and later your web page. Next, you will create an IMAGES FOLDER. Go to FILE >> NEW FOLDER and type images in ALL LOWERCASE. I’ll explain why this is important in a minute. You will then create similar new folders named PAGES and WORK, also both in lowercase. IMAGES is where you put all pictures for your site. PAGES is where you put any pages you want to link to your home page so you know where to find them. WORK is where you store any word processor documents you are working on. Any questions before we go on?
Why is it important to save things in LOWERCASE with NO SPACES, specifically how I tell you? Does anyone have a guess? To see why let’s look at this example. If I save something in my MASTER FOLDER in the PAGES folder (because it is a link from my home page), and then try to upload it to FETCH, here’s what happens. The folders and files are taken exactly as they are seen on the computer and become a URL. In the second example, you can see what happens when spaces or complicated titles are used. The link is not recognized Questions?
When we go to the lab, you will open up the finder window (located in the bottom left corner of the screen on the toolbar). When the finder window opens you will select APPLICATIONS, find MACROMEDIA STUDIO on the list (which should be in alphabetical order), and open the MACROMEDIA…WEAVER MX folder and then open DREAMWEAVER. A bunch of windows will open. You can close them all EXCEPT the Properties window. This palette will make it easy to change text and background colors. When opening any new pages, remember we are working with BASIC HTML pages. It should be the first choice on the menu if you open a new page. You can change setting for the ENTIRE PAGE by finding the MODIFY menu on the top toolbar, and selecting PAGE PROPERTIES. This will save you having to highlight and change the color on every new piece of text you type, for example.
The first thing you want to do before you forget is change the TITLE. This is what appears as the title of the WINDOW, not the title of your PAGE. It’s smart to choose something similar to your HEADER. For example, I called my home page MY HOME PAGE. I decided to make my TITLE MY HOME PAGE as well. To change the title, find the box labeled TITLE at the top of the Dreamweaver window. It should say something like UNTITLED when you find it. Click on it and type what you want. It’s a good idea to save your page now too. Remember to save it as something simple, in LOWERCASE. For example I chose simply HOME. When you make pages for me, your first page should always be home, so we know where you started from. HOME can be saved in your MASTER FOLDER folder. You can see by my URL that I saved mine in JENNIFERSILVA. Questions? Let’s take a look at a sample page.
The next thing you are going to want to do is make a TABLE. TABLES are everything in Dreamweaver. You can put an unlimited number of tables within tables to create cool effects. To create a table, go to the toolbar up top, find the INSERT menu, and scroll down until you find TABLE. A box will pop up, asking you how many ROWS and COLUMNS you want, as well as TABLE WIDTH and BORDER. Just like if you were drawing a chart, ROWS go across and COLUMNS down. For a FULL PAGE table, change them to one. For smaller tables on your page you can play around with this feature later. Can anyone tell me what they think will happen if you change the numbers here? WIDTH should be done in percent. For a full page, leave it at 100%. For smaller tables you can play with the percent or click on the table and drag it to make it bigger or smaller, just like you would resize a picture in another program. For a full page table, don’t use a BORDER. If you want to experiment with BORDERS on smaller tables you can, just remember, the higher the number the thicker the border. Can anyone tell me what would probably happen if I typed a 15 in here?
You can change any settings for your table by going down to the properties bar. For ALIGNMENT of your smaller TABLES on the page, select the TABLE you want to modify, and look in the PROPERTIES TOOLBAR. Find the boxes that say HORIZ and VERT. They will usually have a default setting, but you can change them so your table is at the LEFT, RIGHT, or CENTER (horizontal settings) or TOP, MIDDLE, or BOTTOM of your page (vertical settings). If you wanted to have a table in the EXACT CENTER of a page, what would you select? Questions? Let’s take a look at a sample page.
To add text, simply click inside the table you wish to add text to and type away. How many of you have surfed the web and noticed something different about the paragraphs? Can anyone tell me what that is? PARAGRAPHS on the web ARE NOT INDENTED. Each new paragraph simply has a double space between it and the paragraph before. Dreamweaver will automatically make this space when you hit RETURN. If you only want a single space, you must hit SHIFT and then RETURN. I will let you play with size and color when we get to lab. For paragraph alignment, look for the icons that look like the alignment buttons on a WORD PROCESSOR. For size, since HTML sizes aren’t like normal font, use the (+) and (-) sizes to make things larger or smaller. Questions?
GENERALLY, keep most things aligned top and left, unless there is a picture or table you want to center. Otherwise, your page looks messy and is hard to read. To change the ALIGNMENT of something in a TABLE or on your WHOLE PAGE, you’re going to use the HORIZ and VERT boxes again. For headers, INSERT A TABLE at the top of your page, type your header, use the (+) sizes to make the text bigger. You want to center a page header, but you may not want to center smaller headers. Questions? Let’s take a look at a sample page.
To insert an image, go to the top toolbar, find the INSERT menu, scroll down, and find the IMAGE selection. When the desktop folder comes up, look in YOUR FOLDER, then in your IMAGES (they must be saved as single, LOWERCASE files), select an image and hit ok. The reason you will be using images from your folder only is that you will save your entire folder onto the server, so your image will always follow its page. DO NOT DELETE IMAGES. Unlike a word processor document, IMAGES are read from the folder they came from, NOT pasted onto your page. Here’s an example.
EVERYONE can see what is on the server. You give the Web page commands when you insert things, telling it where to find items on the server. If everything is saved in the correct folder, the server will ALWAYS be able to retrieve it, and you won’t have to remember where you put things. Can anyone tell me what would happen if you inserted an image the bad way? What’s wrong with saving something on the desktop? Something saved in MY DOCUMENTS cannot be found on the SERVER, because it is only on YOUR PERSONAL COMPUTER. Questions? Let’s take a look at a sample page.
The shorter the text the better. Nobody wants LINK buttons that take up the whole page. Tell us in as few words as possible where the link will take us. For example HELPFUL LINKS says exactly what you will find. So does HERE ARE SOME LINKS TO HELP YOU OUT. Which would look nicer on a page? HIGHLIGHT THE TEXT. Go back down to the properties toolbar (you should be getting familiar with this game by now), find the LINK box. If you are linking to an outside site (such as our school’s website), type its FULL URL. If you are linking one of YOUR PAGES, click on the FOLDER ICON to the right of the LINK BOX, and find the page in your PAGES folder (see why its helpful to have everything in one place?)
To create an email link, simply highlight the text, find the INSERT menu on the top toolbar, select EMAIL LINK, and type the address. Here is an example of some links.
Congratulations! You’ve made it through your first Dreamweaver introduction. Does anyone have any questions for me? Ok, here’s what the plan for tomorrow (or NEXT WEEK) is. When we go to the computer lab, you are going to access the site below. I’ll give you the URL when we get there. The page will give you a checklist to follow to create a sample page for me. I will be reading along with you in the lab to make sure everyone is keeping up. Remember, this is just the basics. When I get done with this checklist, you will have time to play around and see what other things can do. We will learn how to upload our pages onto the school server at a later date.
