CREATING A BASIC SITE TEMPLATE
Dreamweaver is the primary web site development tool used in our training programs.
To get more information on how it works and a short tutorial (as well as complete
manuals in several languages) go to: http://www.macromedia.com/support/dreamweaver/.
For more information and an evaluation copy, go to http://www.macromedia.com/software/dreamweaver/.
While this basic introduction will by no means provide you with exhaustive knowledge
of the features Dreamweaver offers, the directions here should at least get
you going. In what follows, we go over the basics of making a site with an index
page (home page) and several other pages linked from it. The examples we provide
here refer specifically to putting a syllabus and other educational materials
online, but obviously your links and site may look quite different if you have
a different goal for your project. These directions will help you get some familiarity
with some of what Dreamweaver offers, but as you become more comfortable with
the program, don't be afraid to experiment with your format and overall design.
Just keep in mind the following tips:
1) Always design with your audience in mind
2) Use consistent color, layout and navigation scheme throughout a site
3) Make sure a user can get any place in your site in two clicks
4) Don't let form dominate or overshadow content
5) Don't overuse images, especially large image files
6) Be aware of variables in screen size, platforms, browsers, and color variation
7) Fix the position of your page elements when possible by using tables
8) Keep visiting other sites to get new ideas for design and content
9) Get feedback and take criticism well!
1. Create a folder on your hard-drive or on a disk where you will save all these .html files. Call the folder "dream" (without the quotes). You can change the name of this folder at any time, but remember, no caps, spaces, or funny symbols.
2. Go to Start, Programs, Macromedia and Dreamweaver to open the program
3. Go to "Window" and click on "Arrange Panels" This should
pull up at least three panels or panels:
| The Launcher: |
|
| Properties: | |
| Objects: | |
If other panels appear you can go to "Window" and unclick them (they'll disappear). These other panels serve a purpose, of course, but right now we are going to keep things simple and use only the basic tools (we can still do a lot!). Likewise, if you find that one of your three main panels--objects, properties, launcher--isn't on the screen, go to "Window" and click on the one you're missing to make it come up.
4. By defining the site, all you are actually doing is selecting a root folder
on your hard-drive where all the html files you create will go. Then, when you
FTP the site to a server, you can transfer the entire folder that contains the
site files.
a) Go to "Site" and click on "New Site." Give your site
a name (anything will do--it won't affect any of your filenames and won't actually
appear on your site anywhere--call it "My Class Site" if you like)
and then click on the folder icon next to the "Local Root Folder"
box. Select the "dream" folder you created in step one. All you are
doing here is telling the program to dump all the files you're about to make
into that folder.
b) On the left hand side of this Site Definition box, you'll see that Local Info is highlighted in blue. Go down and click on "Remote Info." In the Access box select "FTP." For "FTP Host" put the name of the computer-server that you are sending your files to (for MSU students this will be pilot.msu.edu). For Host Directory you need to tell the program which folder to put these files in (for MSU students this will be: web/). You will then need to enter your username and password for this computer (for MSU students, this is your pilot username and password).
c) Don't worry about the other boxes and click OK.
d) When asked if you want to create a cache click Create (this backs up your files). A box should then pop up showing your site so far (which is nothing).
e) In order to connect to the remote server, you will need to click on the tiny little icon that looks like an electrical plug:
You should now be able to see the files on that remote server (MSU students will see their AFS space). FTP-ing is now as simple as clicking and dragging from the right window, which shows the site on your computer, to the left side, which represents the server. Keep close note of where you are placing these files, however, as it is common to find that you have actually placed your site within the wrong folder--this will affect the URL.
f) For now, disconnect from the Remote Server (click on that little icon again) as you can reconnect when you are ready to actually FTP, or upload your site. Minimize this window, but refer to it every now and then to see what happens as you begin adding your more files.
5. Returning to your Document Window, Go to "File" "Save As" and save this page into your site folder as "index.html" (this will be default page for your site).
Establishing the Page Properties
6. Go to "Modify" and "Page Properties." Give your page a title (this will appear in the blue bar at the top of the html page, and is not the same thing as giving a filename). Set the colors for background, text, links, etc, by clicking on the little boxes that pull up the colors. Click on the color you want with the dropper (remember to choose text color that will stand out well against your background color!). Don't worry about the other settings (although, you'll notice that you can use an image for a background wallpaper effect) and click OK.
Working With the Code View
If you have made any web pages by writing the html tags longhand, WYSIWYG (What You See Is What You Get) programs such as Dreamweaver will seem very easy. However, this editor offers a very nice feature where you can work in both code and WYSIWYG. At the top left hand side of the window there are three icons--the middle one looks like this:
Click on it, and you'll see that the top part of your window shows the html tags appear as you edit your page. You can also go into this part of the window and work in the code itself. This can be very useful if you're having formatting problems that you can't fix. Try clicking on the other two icons and see what happens to the page.
|
|
7. To create the inverted L, you'll need to insert a table. Go to "Insert" and "Table". A box will pop up asking you define the properties of your table. Give it 2 rows and columns, set the width to 580 pixels, and the cell spacing and borders to 0. Click on OK. 8. Your table should pop up on your page, and you'll find you can change its size, etc., by click and dragging with the mouse. Pull the table until it looks something like this on to the left (but with dots for the borders): |
||||
9.
You'll notice that when you click in the table, its properties appear in
the Properties panel: (If necessary, click on the tiny arrow on the bottom right side of the Properties panel to reveal the table properties). The panel will display and help you edit the properties of the particular cell you have your cursor in. But before we start adding colors and text to the inverted "L" we first need to merge the two upper cells. If your properties panel looks slightly different to this, don't worry! |
|||||
|
|
10. To merge the two upper cells, take your cursor and place it in the upper left-hand cell. Then click and drag across both the cells. Once selected, they should both be highlighted with a thick black line. Then, go to your Properties panel and on the left hand side, underneath the word "Row" there should be a tiny icon of a box with a blue dotted line through it--Click on that and the two cells will merge (the icon next to it lets you divide cells up). This might take a few tries! Your table should now look something like this one to the left (but screen-sized!). | ||||
11. You can now select a color for the inverted "L" of your table. Do this by clicking in the upper cell, and going once again to your properties panel. About halfway across the bottom of the panel the is a small box to the right of "Bg" (background). Click on it to have the color panel pop up, and move your cursor (which has now turned into a little dropper) to choose from the colors there. You'll notice that the box in the bottom left hand corner of the panel changes to the color you've selected (as does the hex code). Click on any color and it will immediately fill the selected cell. Now repeat the same procedure with the left hand cell, but this time as you move the little dropper you can simply move it outside the color panel to the cell you've already colored and click (this way you don't have to painstakingly reselect exactly the same shade of color you got before). Your table should now look something like this to the left
12. You notice that when you place your cursor in any of these cell it always wants to go to the center. If you start typing in the left-hand cell now, the text will appear in the middle. To allow the text to begin at the top, click in the desired cell, go to the Properties panel, and in the small box next to "Vert" (Vertical) select "Top." You can also click in the "Horz" box to align text horizontally to the left, right, or center.
Putting in a Heading and Navigation Bar
|
13. First you'll give the page a banner or heading. You may have already created a page banner in Fireworks (a .gif) and if so, then you can click on "Insert" and "Image" to insert that banner. But if you don't have a graphic yet, you can simply enter in large text. So go to the top cell and type whatever you would like to appear there (e.g. English 270: Introduction to Film). As with a word processor, you need to highlight the text in order to be able to adjust size, font and color. Once you've highlighted the text, go once more to the Properties panel. Here you can change the format from Paragraph to Heading, and you can also adjust the size and color of the text. The features to the right of the panel (bold, italics, justification, bullets, etc.) work in the same way as a Word Processing program. 14. Once you've played with the Header until you're satisfied, you should go to the left side cell. As we are just practicing here, we'll keep this simple, but of course as you become more confident with the program, you can revise and reformat these pages (or just scrap them and start again). So in this cell list 4 or 5 items, for example: Introduction; Schedule; Assignments; Policies; Resources. Your page should now look something like this one to the left (you might need to match up your text colors, but don't worry about this too much now, as the text color will change once more as we convert the text into links) |
||||
|
15.
We will now create the relative links for each page (pages that don't yet
exist, but will very soon!). By relative links we mean pages that
you create that will be held within the same folder as your index folder.
Links that go to pages on other sites (such as www.cnn.com) are called absolute
or external links. Remember when you are typing in the hyperlinks, you
are actually typing in the filename of the page you want to direct your
user to. The key here is to keep your naming system simple and easy. First,
highlight "Introduction" and go to the "Link" window
of the Properties panel. Click in this window and type "index.html"
(without the quotes). Press Enter. The reason we call this "index.html"
and not "introduction.html" is because we want this page to be
the default page for your site, i.e., the first one your users see as they
go to your URL.
16. Repeat
the above procedure for "Schedule." Highlight the word "Schedule"
on your page (or whatever the name of your next link is) and go to the
"Link" window of the Properties panel. Click in this window
and type "schedule.html" (without the quotes). Press Enter.
Proceed with the rest of your links: Assignments = assignments.html; Policies
= policies.html; Resources = resources.html. Make sure your remember what
what you named each page! Notice that the text will change color as it
is turned into links, and it may be that you need to go back to "Modify"
and "Page Properties" to redefine the link color so it stands
out better against the background color. |
||||
Note: use only lower case lettering as you type in these file names. As these are "relative links," i.e. links that go to pages within the same folder, it is only necessary for you to type the filename and extension.
18. If you wish to put external links on your page, i.e. links that go outside
your page to another site on the Internet such as the MSU Library, then it is
necessary for you to put the entire URL, including http://. So, on the example
above, the final link to "Library" is an external link
and in the link box we need to put the full address for that link: http://www.lib.msu.edu
Making the other pages for your site
19. The file you have been working on is still your index page, the first page your users will see when they type in your URL. The page can also work as a template for all your other pages, which we will now create. We want to make this page into the Introduction. In the right hand cell of the page, you can type in as much introductory information as you want (your name, office hours, course description, etc) but for now you can just type in "Introduction." (You can edit and add information later, and you can also cut and paste in information from Word files, though you'll lose a lot of the formatting). Go to "File" and "Save As" and resave this page as "index.html."
20. Now delete the text you just wrote in the blank space, and type in "Schedule" (you'd put the entire schedule in later, but just a word is fine for now). The go to "Modify" and "Page Properties" and change the title of the Page to something like "Class Schedule" (you can use Caps and spaces here, as it is simply the title that will appear in the blue bar at the top of the page). Click OK. Go to "File" and "Save As" and this time save the page as "schedule.html" (note that I am using exactly the same filenames as I gave for making the links--that's because I want the links to go to that specific page. Any difference between the two, including the use of caps, will mean the link won't work!).
21. Repeat the above procedure with all the other pages: Assignments = assignments.html; Policies = policies.html; Resources = resources.html, etc. You should now have 5 separate pages in your folder, all of which link to one another. For a schematic overview of the site, go to the "Launcher" panel and click on the small "site" icon on the left hand side. A window should pop up giving an overview of your site. To check and see if your links work, go to "File" and "Preview in Browser" (or open up your pages through a browser as we did in class). You should now be able to check that your site works. Don't be fooled, though, just because you are looking at it with a browser right now does not mean that the page is "on the web." It won't be accessible to the public until it has been "Served" by a server such as pilot.msu.edu.
22. Finally, you need to transfer all the pages and any images you might have added into your web folder of your AFS space. You can do this with the basic WS FTP program we've been using in class, or with the built in FTP program Dreamweaver provides--just reconnect to the Remote Server via the Site Window (Go to Site, and Site Files to reopen this window). We encourage you to use the basic WS FTP program until you become very comfortable with transferring files; then move onto using the Dreamweaver FTP feature. For MSU students: if you put the folder "dream" and all its contents into a folder called "matrix," the URL for this practice site will be http://www.msu.edu/~yourpilotusername/matrix/dream (note: there is no need to put a filename at the end of this address as the URL will automatically default to index.html). Alternatively, if you have already made a folder called "dream" in your matrix folder, then transfer only the contents and not the entire folder (otherwise you'll have two folders called "dream" one within the other). As you revise your site on your own computer you can refresh your web site by transferring the updated versions of those pages.