Recommended
More Related Content
Viewers also liked
Viewers also liked (17)
Similar to Dreamweaver
Recently uploaded
Recently uploaded (20)
Dreamweaver
- 2. Today We’ll Learn… Organizing Folders Opening Dreamweaver Titles and Saving Tables Text Images Links Email Links
- 3. Organizing Folders You will have a name to log on under Create a MASTER FOLDER jennifersilva Create an IMAGES FOLDER images Create a PAGES FOLDER pages Create a WORK FOLDER work
- 4. Organizing Folders Why is it important to save in LOWERCASE with NO SPACES? Good: jennifersilva >> pages >> pageone.html http://plaza.ufl.edu/jennifersilva/pages/pageone.html Bad: Jennifer’s Cool Page >> Pages >> stuff about penguins.html http://plaza.ufl.edu/Jennifer’s Cool Page/Pages/stuff about penguins.html
- 5. Opening Dreamweaver FINDER >> APPLICATIONS >> MACROMEDIA STUDIO MX >> MACROMEDIA…WEAVER MX >> DREAMWEAVER MX Close every window EXCEPT the Properties toolbar Basic HTML page MODIFY >> PAGE PROPERTIES
- 6. Titles and Saving Change the TITLE to HEADER you will have Save your document with a simple term, LOWERCASE Title: My Home Page (appears at top of WINDOW) Header: My Home Page Saved As: home.html http://plaza.ufl.edu/jensilva/jennifersilva/home.html
- 7. Tables INSERT >> TABLE Rows vs Columns Rows across Columns down Percent 100% for the full page Borders Higher number = Thicker border
- 8. Tables Properties Toolbar Alignment Select the table On the Properties Toolbar Horiz: Changes LEFT, RIGHT, CENTER Vert: Changes TOP, MIDDLE, BOTTOM http://plaza.ufl.edu/jensilva/jennifersilva/pages/tables.html
- 9. Text Click inside the table you want to type in Paragraphs Return = large space Shift/Return = single space Properties toolbar Size (+1, -1) Color Paragraph Alignment (LEFT, RIGHT, CENTER, JUSTIFIED)
- 10. Text Alignment Align on in TABLE using Properties toolbar Horiz: Changes LEFT, RIGHT, CENTER Vert: Changes TOP, MIDDLE, BOTTOM Headers Insert a table Larger text size, centered http://plaza.ufl.edu/jensilva/jennifersilva/pages/text.html
- 11. Images INSERT >> IMAGE >> look in your folder >> look in your images folder for an image >> select >> OK DO NOT DELETE IMAGES! Images are NOT pasted onto your page
- 12. Images Good: Jennifersilva >> images >> 1stgrade.jpg When I paste this on a page, it will retrieve it from the FOLDER, which is on the SERVER Everyone can see the server Bad: My Documents >> jensilva.jpg http://plaza.ufl.edu/jensilva/jennifersilva/pages/images.html
- 13. Links Type your text - KEEP IT SHORT Good: Helpful Links Bad: Here are some links to help you out Highlight the text Properties toolbar Link: Type URL here for an outside Select the folder icon to insert a page from your PAGES folder
- 14. Email Links Highlight the text >> INSERT >> EMAIL LINK >> type address >> OK http://plaza.ufl.edu/jensilva/jennifersilva/pages/links.html
- 15. Congratulations! Let’s get started… http://plaza.ufl.edu/jensilva/techrichlesson/pages/TUTORIAL.HTM
Editor's Notes
- 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.