|
Putting a page on the web
moving things around
There are as many ways to publish things on the web as there are people doing it. You can use any tool or set of tools you like, they all do variously different things. Coming up in a few weeks, we'll cover the tools and what they do. I think it would be generally helpful for you to understand the basics of moving files around, and you might want to read about FTP before you try and use some other tool, so that you understand more fundamentally what's going on.
Dreamweaver is one tool among many. It's what most people are likely to use in a class room, it's what a lot of companies use, and it's a reasonably priced, powerful, relatively easy to use WYSIWYG tool. So, I'm going to cover posting web pages using Dreamweaver, but feel free to use any tool or set of tools you like.
using dreamweaver
The goal for this week is for everyone to post something onto the web, with explicit instructions as to how to do that using Dreamweaver. Following are the basic steps, along with the account and user information you'll need, and how to view the finished results. You might also try Project 7 for other Dreamweaver tutorials on line, and there are many others as well.
project 7 dream tutorials
- Before you begin
Learning how to move files around on the web is incredibly frustrating — it requires either that you have an incredible visual sense of what's going on when you push the buttons, or that you follow the instructions exactly, and everyone knows the manual is always wrong. DO NOT beat yourself up if you can't get this to work. It's not easy the first time, my instructions may be wrong, and a whole mountain of things that are not covered below could go wrong, about which you can do nothing.
So, if you follow the steps below, and you actually manage to see your web page on the web, you're a genius, or you were really, really lucky. Relax. Try a couple of times, and if you can't get it, we'll cover it again. And again. And again.
Also, a quick note - all file names, and all folder names on the web are CaSe SeNsItIvE - type exactly what you see, or copy it off this page. The only thing that is not case sensitive on the web is the domain name (http://www.domain.com/) - everything after the last "/" is case sensitive.
These are all the same:
http://www.colum.edu/Folder/File.GIF
HTTP://WWW.COLUM.EDU/Folder/File.GIF
These are all the NOT the same:
http://www.colum.edu/Folder/File.GIF
http://www.colum.edu/folder/file.gif
One last thing - this is definitely one of those tests where you should read the instructions before you start, so you'll have some idea of what's going on when you get there.
- Find something to post
Picture, text, text and picture - it doesn't matter much. Definitely don't go hog wild on creating a
whole web site, there isn't enough room on the server. Find a picture of a flower and a haiku - whatever.
- Create a "home" folder
No, it doesn't have to be named "home," rather, create a new, empty folder somewhere you can readily find it (I like the desktop).
- Format your content
You'll need to get your content into a web-acceptable form. You can use any tool to create or format your page, but you'll need to format the text and image as follows. For the text, make certain that you've saved it as a text file, using the "save-as" command of your favorite editor. Or, super easy, paste some text into Simpletext, and save the text file from within Simpletext. Make certain you save this text file in your "home" folder.
You'll also need to format your image (if you have one). Open your image in Photoshop. Under "Image," select "Mode:RGB color" (if it isn't already). Flatten your image (under "layers:flatten" or "layers:merge visible"). Make certain that your image resolution is 72 pixels per inch (under "Image:image size"). Size your image so that it fills the correct amount of your screen (make certain you're looking at the image at 100%).
Now, you'll need to save the image as a JPEG or a GIF - typically, photographs are better as JPEG's, large blocks of simple colors are better as GIF's, but it's not a big deal right now, just decide on one or the other.
GIF: If you want a GIF, go to the "Image" menu, select "Mode:Indexed Color". Choose the "web palette" and click "OK". Now, choose "File:Save As", and save the image in your "home" folder. PLEASE NOTE: it is very important that your file name end with ".gif" (or ".GIF"). On a Windows machine, you have no choice, but on a Macintosh, you can save files without extensions (those wacky three letters appended to a file name). In order to be certain you can see a gif on line, the file name must end in ".gif". You need to choose "Compuserve GIF" next to the "Save As" on the pull down menu. ALSO NOTE: make certain the file name does not have any punctuation, including spaces - it needs to be all letters. For more detail on file names, read up on FTP.
JPEG: If you want a JPEG image, leave the image as RGB, choose "File:Save As," and select the JPG choice in the pull down menu next to "Save As." Again, it's important that the file name have no spaces or punctuation, and that it end with ".jpg" (or ".JPG" - also, ".jpe" is acceptable, but little used).
Now, you should have a text file, and a web image in your home folder. To double check, drag the text file into an open Netscape or Explorer window, and make certain you can see the text (if will be badly formatted, don't worry). Do the same for your image.
- Create a new Dreamweaver "site" (a project)
Launch the Dreamweaver application. Usually, a horizontal bar with some buttons appears (among several other windows), and the left button says "Site." If you don't see this bar, choose the "Launcher" choice under the "Windows" menu, and the bar should appear.
Click on the "Site" button. You should now see a new window, that has some stuff at the top, and a left hand pane that says "Remote Folder," and a right hand pane that says "local folder." At the top of this window, near the left, there should be a pull down menu that says "define sites." It's possible that someone has already defined a site, and you'll see their site, and their site name in this pull down menu. If so, click on the menu, scroll to the bottom, and choose "define sites."
Now you've got a new Dialog window, and on the left it says "Category," and the first choice (local info) should be highlighted. Click on it if it isn't hight lighted. The first line is the name of your web site - this is really the name of the Dreamweaver project, and it won't show up on the site itself. Pick anything you like. Underneath is the "Local Folder" line - click on the blue folder on the right, and browse until you find the "home" folder you defined earlier. Finally, there's a line that begins with "http://" Make this line read as follows:
Now, on the left, under "Category," choose "Web Server Info." No, you do not need to click "OK" first. If you did, go back to the pulldown menu where you originally saw "define sites," choose your site, and you'll see the editing dialog again.
After choosing "Web Server Info," on the right it says "Server Access," choose "FTP" from the pulldown menu, and a whole bunch of empty boxes appear.
Now, click OK in the lower right of the dialog window. On the right, you should see the contents of your "home" folder (image file and text file), on the left, nothing. Now, click on the "Connect" button. If you've done everything right, and you're lucky, you should see the contents of the "public_html" folder on the left, which is basically a bunch of folders with everyone's last name.
If you made it this far, congratulations - you've just defined a new web site project in Dreamweaver!!
If, on the other hand, you get a "couldn't connect" message, choose your site name (from the same menu you chose "define sites" before), choose "Category:Web Server Info," and double check that you've got all the FTP information exactly right. If you keep trying and failing, give up - my instructions are wrong, or there's some other error, and we'll figure it out in class.
- Create a web site folder
First, you'll need a place to put your web site - a folder of your own on the Remote Server. Create this folder by clicking on the left, in the grey area (somewhere in the background - don't highlight any of the folders or files). Now, at the same time, hold down the Shift, Option, Command (looks like a clover leaf) and the "N" - that's Shift+Option+Command+N - you should see a new Untitled folder appear, with "Untitled" being hight lighted. Change the name of this folder to your last name - note once again that this is case sensitive.
Now, as a best practice, you should set up Dreamweaver (or any FTP client) to default to your home folder. To do this in Dreamweaver, once again, choose your site from the "define sites" menu. Choose "Web Server Info", and add your name to the host directory:
Now, the quick-footed will wonder, "why couldn't I do this the first time I set this up?" Well, I'll tell you - because when you tried to "Connect" to that folder, it would not have existed already, and you would fail to connect — you can't get to a folder that isn't there yet. You don't have to do the above, but it's a good idea to set your defaults from the get go when working on a web site on an ongoing basis.
This a good point to note that what you've done is define a web site project in Dreamweaver (on the computer at which you're sitting). If you quit Dreamweaver and restart it, you should see your site on the pulldown menu after you click on the "Site" button - chose your site, and "Connect," and you're ready to go again.
- Create an actual web page
We're almost home. Normally, when Dreamweaver opens, it opens a blank web page, which is a big white window that says "Untitled" at the top. Click on that window to bring it to the front. Now, under the "File" menu, choose "Import" (I think it's import, otherwise, choose "Open"), and browse to your home folder and open your text file.
If you "Imported" it, the text should be on the "Untitled" page. If you "Opened" it, it will be in it's own new window. In the latter case, copy all the text, and paste it on to the Untitled page. Under the File menu, "Save" the page in your "home" folder. Make certain that you name the file index.htm. You can in fact name it anythingAtAll.htm (no spaces or punctuation), but if you want it to come up by default, name it index.htm. In other words:
is normally the same as:
These are also the same:
http://graphics-gw.colum.edu/~wd101/name/
http://graphics-gw.colum.edu/~wd101/name/index.htm
Which file names are default names actually depends on how the web server is set up, but index.htm virtually always works. Unless your using M!*&$@#$! products, and then it might be default.htm. But anyway.
Now, Dreamweaver should also have a tall vertical window, with two columns of icons, and no text. Normally, it's over on the left. Click on the upper left hand button ("Insert Image"), and you'll get a File Dialog - browse to your "home" folder, and selected your GIF or JPEG image.
Please Note that the image will be inserted wherever you put your cursor. So, make a few blank lines, and put your cursor in the middle before you insert the image. Also, make certain that you click on exactly that spot after you've chosen your image from the File Dialog window. Now, save the page.
- Put your page on the web
Return once again to the page with the "Remote" and "Local" folder panes on the left and right, respectively. If you don't see it, choose the "Site" button from the launcher, and your local site should come up on the right. If the left hand window is empty, drag your "index.htm" file from the right into the left hand window. If your left hand window is the public_html folder, and has everyone's folder in it (including yours), drag index.html into your folder (make certain it's highlighted before you let go of the file).
Dreamweaver will bring up (should bring up) a Dialog window that asks "move dependent files?" — click OK (meaning, yes, mr. dreamweaver, please move the other pages if any, and the images that this web page depends on to work correctly). On the left, you should now see your "index.htm" page and your image file inside your folder.
- Look at your page in Netscape or Explorer
In your favorite browser, go to your web page as follows:
If you get a "forbidden" message, your file name is not index.htm, so do this:
If you get a "not found" message, you probably have a capitalization problem - you named your file, folder or image with capitals in it, but aren't typing them into the browser:
Folder name: Verplank
http://graphics-gw.colum.edu/~wd101/verplank WRONG
http://graphics-gw.colum.edu/~wd101/Verplank RIGHT
Congratulations - you're now on the world wide web!
|