GraphicDesignWebGuide
How to make your web page and put in on the internet:  
1. Go to http://directory.bethel.edu. Clik on MY ACCOUNT. Then select Create my personal Web site. You may have to do this a couple of times before it actually lets you load pages.  
2. Open Dreamweaver. In the title box, type portfolio. Then go to file> save as. Type in index.htm as the name of the file. Then make sure it says desktop in the where box. Then clik on the new folder button and put a new folder on the desktop, called your name'swebsite. And then again create a new folder called gd (remember all internet names are one word—no spaces, and all lowercase. Save this Dreamweaver page into that folder. If you are doing this for Two dimensional design class, make the folder name 2d. Or if digital imaging use: digimg, digital photography use: digphoto, and digital multimedia use: digmulti.  
3. In Dreamweaver notice at the top of the page, a row of tabs called INSERT. If this is not showing, go to window>insert. In the INSERT window choose the common tab. There will be a row of icons. As you set the mouse over the icons you will be given the name of the task that the icon fulfills. Choose the table icon which is the fourth from the left.  
4. In the table window add 10 rows and 10 columns and set the border to zero. OK.  
5. When you clik in a cel, the curser allows you to insert type. Type your name. You may not want to include our last name. You will see at the bottom of the page, a window that allows you to specify different type characteristics. You can choose a type style and size and color. You will notice that sizes are not set according to points. Size is limited but there is some range.  
6. In the same window with the type characteristics you will see adjustments you can make to the table. If you clik in and drag across several cels, you can then combine them into one cel by cliking in the merges selected cels tool on the left side of the Cell window. There are other things you can do so look around.  
7. You are going to set up a page as your portfolio. You may want to look at the pages set up for last semester's class  
8. These are the things you will need:  
 
                   
Your Portfolio            
  Figure/ground composition  
             
  Word Illustrations  
                   
        Logo/Stationary    
                   
        Readibitily Layout      
                   
        Proverbs/expressive type  
                   
 
9.         Be sure to save your page periodically. Now you will be switching to Illustrator to convert your designs to a format that can be viewed on the web (jpegs). Open a design, like your figure/ground compositions. Select all and scale the image so that it will fit nicely on the screen—say about six inches tall. You can also draw a rectangle around the whole design about an inch larger, but give it no fill and no stroke. this will give a little border to your image when it opens in the browser.Then go to file>save for web.  
10. You should see a picture of your illustration. Go to settings (underneath the save button). Choose JEPG high. Then save. Save to your  a folder that is yournamewebsite and then a folder that corresponds to your course, such as gd. Convert all your work to jpegs in this mannor.  
11. Return to Dreamweaver. Choose a cell in which to place the jpeg. Then go to the common tab in the insert bar at the top of your window. Choose the image icon. Then locate the folder where your image is saved and select the image to be placed–then choose. When the image appears it will be too big for the portfolio page. When you clik on it you will see anchor points that you can drag to rescale the image. Hold the shift key to constrain the image proportions. Make it a small thumbnail size.  
12. When the image is selected, the window at the bottom changes to give you some choices. In order for the image to show up, the name of the image.jpg must be the same as the name in the source box. Then in order to be able to clik on the picture and have it open in another window at the actual size you need to repeat the same name in the link box. Then select self in the target box or blank. Self means that the image will open in the same browser window as your web page. Blank means it will open in a new browser window on top of the current one.
13. Once your page is complete and saved again, you are ready to load it and the jpegs onto the internet. And remember, whenever you make changes to your pages or add pictures, both the pictures and whatever changed file must be reloaded to the internet using the steps outlined below.  
LOADING TO THE INTERNET  
14. Set up Dreamweaver so that it accesses your files on the internet: go to the site menu at the top and choose >manage sites. In the manage sites window choose >New >site. At the top of the site definition window select  Advanced. In this window you will set the name and location for the website files on your computer. Notice that the catagory is >local info. Type a site name: "yourname Website"  then click on the file icon and locate your website folder on the desktop of your computer. Inside your website folder you should have a folder simply labeled gd. (all internet names and folders should be one word—no spaces, and lower case.) In the gd folder you will keep all your web files—that is: jpegs and html files. Do not keep any illustrator or photoshop or inDesign files in this folder. But! do not choose the gd folder. Back up so that you are only choosing the website folder, then okay  
15. Next set the default images folder—which is the same folder: choose the website folder (not the gd folder). Click on the folder icon and locate yournamewebsite folder. Do not select the gd folder. Did I say that already?  
16. Then go to the catagory list on the left and select remote info. In this window go to the drop down Access menu and select >ftp. Now type in at the ftp host line: ftp.bethel.edu . In host directory: public_html .  In login type your user name or your bethel email name (usually the first three letters of your last name followed by the first three letters of your first name. Then type in your password (bethel email password). and click okay. And then, Done in the manage sites window.  
17. Return to your Dreamweaver page. Then go to >window menu, >files. It opens on the left side if it hasn't been open already. We want it to open in the middle of your screen with two columns. Find the expand icon on the left side of the icon bar on the file window, click on it. You should see a window with two columns open in the center of your screen. On the left is the remote files—those kept on the server that show up on the interenet. To see them you must click on the connect icon in the icon bar toward the top. If you set up the manage sites info correctly, Dreamweaver will open to your public folder on Bethel’s server. On the left side is the column that contains the files on your computer that are in your site folder., cli..  
18. To make your files show up on the internet you can drag them from the left side to the public folder. When you first start your website you can drag the gd folder to the public folder and everything in it will load to the internet. When you make any changes to your website or add images, you will need to reload only the things that change. Do simply drag the changed html page or the jpgs into the gd folder on the right. Sometimes you have to delete the file on the right side in order for the new file to show up on the internet. Once you do that, then re-drag them to the right side. They should show up when you go to your website address on the internet. Make sure you never have a gd folder inside your gd folder.  
19. When all this is done you should be able to type in your address—http://www.bethel.edu/~your user name/gd/index.htm. It should show up. If not, try all this again or ask for help. Good luck.