Casa Basa ~ blending art with technology

Creating Your First Web Site

1. On your hard drive or removable drive, save a folder. The name should be all one word and lower case. This will become your root folder, the place where you will save everything related to your website.
2. Create a second folder within your root folder to store your graphics. Traditionally, this is named "images" without the quotes.
3. Open a new document in Macromedia Dreamweaver (File > New). A New Document dialog box opens. Under the General tab, select Basic Page and HTML, then click on Create.

3. Save (File > Save As) this new web page as "index" (no quotation marks) within your root folder. Do not put it into another folder within the root folder. It must be on what is called the root level, which means it is only in the root folder.
4. Give your web page a title (Modify > Page Properties >Title/Encoding) that reflects what your web page is about. Save the page.

5. While there, select Appearance and you can add a Background color or a Background image, change the font and font color, or determine the font size.

6. Select the Links Category and you can change the way your links look, if you don't want the standard underlined blue. Then click OK to return to the main window.

7. In your main window, make sure the Properties Inspector window is open (Window > Properties). In the properties window, under Format, select Heading 2 using the dropdown arrow next to the box.

8. In Dreamweaver, type an appropriate heading for your page. If it is a portfolio site, you might type something like The Digital Portfolio of a Design Student, for instance.
9. Hit Enter or Return. The Format should now read paragraph. Continue typing in information as you would if you were in Microsoft Word. The Properties Inspector will allow you to change the size, color, font, etc. of your type similarly. Periodically, remember to save your work.

Return to the top

Linking your Pages

10. Each document you make and save through Dreamweaver is a web page. You can create links between pages by using the Link box in the Properties Inspector. Just highlight the word or graphic or button or icon that you wish for the viewer to select to go to another web page, then browse by selecting the folder icon to the right of the Link window:

Inserting an Image

11. To insert an image, using the drop down menus at the top of the screen, select Insert > Image then browse to the image. Notice you can also select Insert > Image Objects > Rollover Images if you want to create rollover buttons. If you create a set of rollover buttons, you can use Insert > Image Objects > Navigation Bar, you can create a row of links to different sections of your site. When creating any image for the Internet, your Resolution will always be 72 pixels/inch and in general, try to keep the file size under 50 kb (actually smaller the better - any under 5-10 kb is good). A graphic that will fill about 1/3 of your page would measure about 350 pixels wide. Buttons or icons should be under 50 pixels in width, generally.

Uploading Your Site using Dreamweaver

1. In Dreamweaver, select Site > Manage Sites, to open a new dialogue box called Manage Sites. Click on New > Site. Do not click on FTP & RDS Server.
2. If your new dialogue box isn't at Advanced, but instead wants you to use the beginner's mode (Basic), click the tab for Advanced. It should look like this:

3. Under the Category list, the Local Info category is selected. Under Site name, just put a name for your own information only. More importantly, under Local root folder, use the browse (the folder icon to the right of the text box) button to browse within your computer for your root folder. Remember: this is the one folder that contains everything for your web site. It may contain additional folders, but your homepage, index.html, is not in any folder.
4. Again, under Category, select the next list item, Remote Info. Choose FTP from the dropdown box at Access:

5. If you are a student at The Art Institute of California - San Francisco, your setting for the next dialogue box to appear will look almost exactly like below, except the Login will have your initials and number, and, since you're a student, your email address reads ex. sk374@stu.aii.edu:

 

6. Remember your remote information may vary. Below is an example of Angelfire's login:

7. Click OK, then click Done.  You will be returned to your Site Files.
8. Click the Connect button (it looks like 2 plugs) to establish your connection.  You will see your Remote Files appear, usually on the left side of your screen, if you have used the expand/contract button in upper right.
9. Choose the files you wish to upload (or the entire root folder if you want), and then click on the blue arrow pointing up.  This puts your files to the remote server.  It may take awhile so just relax and wait.
10. Go to any browser, like Firefox or Internet Explorer, and type in your new URL. It will be something (for AI) like http://stu.aii.edu/~sk374. You should see your work online!
11. Please Note: If you are working on a public computer, like at your school or the library, do not click Save for your password within Dreamweaver. Leave the password blank. You will be asked for your password when you are ready to upload.

For more tutorials, visit my web site at: www.casabasa.com , or any of the numerous online tutorials, such as www.webmonkey.com

Return to the top

~ peace, polka and piwo