docThe ITRC has excellent news for people interested in web design! Now, all computers on campus are equipped with Macromedia Dreamweaver MX along with Flash MX and other Macromedia Studio MX programs.
If you are not new to websites, you may still need to refer to this in order to get help with the new interface on Dreamweaver MX.
If you are new to Dreamweaver and website design, please refer to this in order to get started with the excellent new programs now available on campus!!
1. Defining Sites
The first thing you must do when creating a webpage is DEFINE THE SITE. This is the key to the development of your site. The following is how to define your site:
After you have opened Dreamweaver MX, go up to the SITE option on the menu across the top of the screen, and then go down to NEW SITE The following will then appear on your screen: In the section of the image that is highlighted and says "Unnamed Site 1”, erase that and enter the name of your site. "My Homepage" or something like that is fine. After you have entered the name of your site, click the NEXT button at the bottom of the screen and the following will appear: Make sure that on this screen you select the radio button that says "No, I do not want to use a server technology." After you have selected the appropriate option, press the NEXT button at the bottom of the screen and the following menu will appear: On this menu, make sure that the "Edit directly on server using local network" option is selected. Then, where it says "Where are your files on the network?" Select the yellow folder on the right of the text box in order to browse for your WWW folder. This is the folder in which ALL of your site pages and images should be stored. When you select the yellow folder, the following will appear on your screen: Go to the SELECT box and look through the list of folders/drives to find your personal H drive. It will have your username (i.e. doe1234) next to it. Select that drive. Then, within that drive you must select the WWW folder. After you have opened that folder, press the SELECT button shown on the above graphic. When you return to the previous menu, make sure the text box reads something like "H:\WWW". Now that you have chosen your directory in which your website will be saved, the following will appear on the screen: This is a confirmation screen. If you have followed all other directions correctly you should simply select the DONE button at the bottom of the page. After you have chosen to finish by doing that, the following will appear: This is simply showing that Dreamweaver is scanning all files currently in your WWW folder. Many of you will have nothing in your folder when you start this process, thus it will not be on the screen for very long or you may not even see it at all. Please be patient, however, if it does take some time as it is scanning your drive in order to help you later. Now you have finished defining your site!2. Tools you Need to Know For Dreamweaver MX
To begin working in Dreamweaver MX after defining your site, you must become familiar with the new toolbars. Like previous versions of Dreamweaver, there is still an Objects Toolbar and Properties Toolbar. These, however, have moved. In the new interface, they are on your main page and do not get in the way.
The following will help you recognize common tools you will use while developing your site in Dreamweaver MX.
The Objects Toolbar
The objects toolbar can be seen at the top of your screen such as the highlighted area in the following graphic:
Notice that the tab at the top is set to common. This is where you always want your objects toolbar panel to be set unless you are a more experienced website designer. As you work through this tutorial, you will learn a few of the common tasks for which you will need to use the objects toolbar.
The Properties Toolbar
The properties toolbar can be seen at the bottom of your screen. It looks like the highlighted area in the following graphic:
Notice that at the top it is labeled Properties. This box will be primarily used for text editing or table editing on your page. With this toolbar you can change the font, justification, color of the font, indentation, etc. like you would on any word processing program. The icons used to do these simple tasks are the same as they are in a word processing program so that it is easy for you to navigate through. As you work through this tutorial, you will learn how to use the properties box in more detail.
If you are more experienced and need help with other options on these toolbars, please contact the itrc!
Saving Your PagesThere are a few rules to saving your pages. Before we begin extensive work on a page, it is important to save it. Saving in Dreamweaver is very similar to saving in a word processing program. You must save your page before you can add images, etc. If you are creating your FIRST PAGE in your site, please refer to the appropriate section. Saving that first page incorrectly can cause problems for you in the future.
A. Saving Your First Page
Go up to FILE at the top of your screen and down to the Save As… option. The following will then appear on your screen: In the File name box where it says “Untitled-1.htm” you need to type index.html. All pages should have the .html or .htm extension. However, when creating your FIRST page of your website, you MUST call the file index.html. This is necessary because when someone goes to your site on the web, the index page is the first page that they see. If you call it something other than index.html your site will not be visible to others. After you type index.html into the File name box, press the SAVE button and you are finished saving your page. Saving All Other Pages Go up to FILE at the top of your screen and down to the Save As… option just as you would if you were saving the original page. In the File name box where it says “Untitled-1.htm” you need to type the name of your page. When naming your file do not use spaces or underscores. This causes complications sometimes. All pages should have the .html or .htm extension. Therefore if this page is a page of pictures of you and your friends you could type: FriendsPics.html After you type file name you desire into the File name box, press the SAVE button and you have finished saving your page. Text Editing and OptionsBelow are some methods on how to enter text and edit it within Dreamweaver.
Entering the Body of Your Page
To enter the text for the body of your page, simply type in your information in the white working space. This is done just as it would be in a word processor. To justify your information to the left, center, or right, click on the appropriate justification icon in the Properties toolbar. The following image locates the justification icons in the Properties toolbar: After you have entered all the information into your page, you can change the font, size, color, etc. For more information on these options please continue reading.Changing the Font
To change the font, use the Properties toolbar. Highlight all text on your site that needs to be changed (including the title). Then go to the Properties toolbar. On the toolbar it says Format, and to the right of that are two scroll-down boxes. One says Paragraph and the other says the name of the font used. (Usually this will say Default Font if you have not yet changed it.) Click on the small light blue box with the arrow pointing downward to the right of the second box. The following will appear: Select the desired font bundle from the menu. This will change all of the selected text to the specified font.A Note about Font Bundles
If you are using Dreamweaver to develop your website you should know that it stores fonts in "bundles". Here are a few reasons why Dreamweaver does this for you, and why you should NOT attempt to use a special font for your text.
Why not use special fonts?
Let's consider a scenario where you enter your website just the way you want it with a special curly font that looks really cool to you. When you enter information on your website and view it from your computer you see it the way you want it to look. All images are in place and all text is just the way you like it.
Now, consider another user in another state, another country, or even your next door neighbor! This person goes to look at your site on the web and your text is disjointed and in a font such as Times New Roman.
What happened? Well, when you use a special font that's on your computer for your website you are making the assumption that viewers of your site have that font on their system as well. If they don't, the computer makes a random substitution for the font that it is missing. This ruins the aesthetically pleasing look that you intended for your audience. Thus, bundles are a wonderful tool to help eliminate this!
Why bundles?
When you use bundled fonts for your text on your computer such as those offered in Dreamweaver, you safeguard yourself from the unfortunate problem described above.
When you look at the bundles that are offered, you see they are in the form of a list. For example, one of the lists says "Verdana, Arial, Helvetica,..." What this means is that when you choose this bundle for the text in your site, all text will be put in VERDANA. Then, if a user does not have Verdana installed on his or her system, then their system will use the next specified font which in this case is Arial. This continues until the user has a font that IS in the list. This helps eliminate the inaccurate viewing of your site for those who do not have specific fonts on their computers.
Changing the Size of Your Text
To change the size of the text on your site, use the Properties toolbar. Highlight all text on your site that needs to be changed. Then go to the Properties toolbar. On the toolbar it says Size, and to the right of that is a scroll-down box. This menu has a set of numbers. These are not normal font sizes such as would be used in a word processor (i.e. 12pt font, etc.) Instead, they are numbers as would be used for HTML (hypertext mark-up language) to change the size of the text. Select the desired number (typically size 2 is the equivalent of a 12-pt in Word).Changing the Color of your Text
Changing the color of the text on your site is usually something that is desired. We will now show you how it is done.
Colors are also determined by specific 6-digit numbers in HTML code.
Highlight the text to which you would like to make the desired color change. Down on your properties box, look for the little gray box next to the number of the font size. The following image should help you locate it: By clicking on this box with your mouse, a block of colors will appear such as the following: Select the desired color. You will notice that once you select a color, a particular number will appear in the box next to the little gray box that we clicked originally. This is as follows: If you happen to know the HTML number of the color you would like to use, you can just type it in the box.5. Naming Your Page and Changing Backgrounds
Naming your page is a very important part of designing your website. Changing backgrounds of your pages can also be desirable. Here are some methods:
Naming Your Page
To name your page and change the background of your page, you must first go up to the MODIFY menu across the top of the screen, and then go down to PAGE PROPERTIES. The following menu will then appear on the screen:NOTE: Making sure your pages are titled is VERY IMPORTANT! The title of the pages within your site is vital to assist in search engines when people search for your site via Google, Yahoo, etc.
To title your document simply enter in the name of the page in the TITLE box at the top of this menu. After you have named the page, you can change the background of your page in two ways: Using images as backgrounds, and using solid colors for backgrounds.Changing your Background
A. Using Images as Backgrounds
To use an image as a background, you must first have the image saved in your WWW FOLDER. For a note on this, please see the Note about Adding Images. To select an image as your background, click the BROWSE button next to the Background Image box, and select the image you would like to insert for your background. Please keep in mind that if the image is small, the image will be TILED across the background of the page. If the image is large, it could cause problems with loading times on your site. Please keep in mind that webpages are all about the user. Making sure that the page is easy on the eyes and aesthetically pleasing is very important! To preview what your background would look like using this image, simply press the APPLY option to the right of the menu. Do not press OK unless you're happy with it.B. Using Solid Colors for Backgrounds
To use a solid color for your background refer to the prompt on the menu that says BACKGROUND. Next to it is a small, white square with a very small black triangle in the lower right-hand corner. If you click on the square, you can select any color you would like to use for the background. To preview what the color will look like press the APPLY option (DO NOT PRESS OK). PLEASE KEEP IN MIND that bright colors are distracting to users. A website is designed for USERS!! Making it user-friendly with color scheme is very important so that they want to stay on your site! After you have completed changing your background and titling your document, press OK and the menu will close and the appropriate changes will be made.6. Adding Images
To add an image to your page you will need to use the OBJECTS toolbar.
Before you begin inserting images, you must be careful that the images you try to insert are saved in your WWW folder! For more information on why, please see the Note About Adding Images Section. To add an image, click on the icon in the middle of the objects toolbar. This icon (a small picture of a tree) is for inserting images. (See highlighted part of image below if you need help locating the "add image" button) After you have clicked on the icon to insert an image, the following menu will appear: After this appears, select the image you wish to insert on your page and the press Select. Remember, your image MUST BE SAVED IN YOUR WWW FOLDER! For more info on this see the following Note about Adding Images.7. A NOTE About Adding Images
In order to add images to your website, the images MUST BE saved in your WWW folder otherwise they will not be viewable to individuals on the internet, and will appear as "broken images." To save an image to your WWW Folder please follow the steps below.
A. Saving from the Internet
To save a picture file from the internet onto your hard-drive for your website while using a PC, please do the following:
Right-click on the image you wish to save and select "Save Picture As…" from the pop-up menu. Then the following will appear on your screen: Go up to the "SAVE IN" box where it says "My Pictures" and select the small black triangle box to the right of it. Now the following will appear on your screen: Notice where the image is highlighted. That is the personal H drive of the individual user (in this case, will6434). That is the drive you need to select. After you are prompted with this, select your personal drive (H:). Then a menu similar to the following will appear: Double-click on the WWW folder. (Note you may have more or less folders in your drive than are pictured here. As long as you have a WWW folder it does not matter. If you do not have a WWW folder listed, please contact the itrc and we will take care of it). After you have opened the WWW folder, name your graphic with a title that you will remember, and then press the SAVE button in the lower right-hand corner of the menu. To insert the newly-saved graphic, please refer to the Adding Images Section.8. Inserting Tables
Tables, when used wisely, can be a great way to organize material on your website. The following is a simple explanation on how to insert tables.
First, click your cursor on the line in which you would like to add the table. Go to the Objects toolbar and click on the fourth icon from the left in the objects toolbar. Please see the following image to help you locate the table icon on the toolbar: After you select the table icon, the following image will appear: Enter the number of Rows and Columns you would like in the table and press OK. Now you have a table inserted on your page!9. To Add a Link to Your Site
There are a few different ways to add links to your site. Here we will discuss the basics.
A. Links to Pages Within Your Site
To add a link to your page that points to ANOTHER page in your site, click on the area of the page where you would like to insert the link. Type in the text you would like linked, and then highlight what you typed and go to the PROPERTIES toolbar. On the Properties toolbar there will be a box next to the word "LINK". The following image shows this box: Next to the Link box, there is a YELLOW file folder. If you click on that icon, you can browse your WWW folder for the page to which you would like the highlighted text to link.B. Links to Other Websites
To add a link that points to a page external to your site, click on the area of the page where you would like to insert the link. Type in the name of the link, and then highlight what you typed and go to the PROPERTIES toolbar. In the Link box, type the full URL of the site to which you wish to link. The following is an example of what you would type if you want to link to the Saint Mary's homepage: http://www.saintmarys.eduC. Email Links
To make a link that will point to your email address, click on the area of the page where you would like to insert the link. Type in the name of the link, such as "EMAIL ME" and then highlight what you typed and go to the PROPERTIES toolbar. Click within the LINK BOX, and type your email address in the box in the following form:mailto:doe1234@saintmarys.edu
NOTE: BE SURE THERE ARE NO SPACES IN THIS LINK!
10. Where can I Get Help on My Website?
If you need any assistance while making your website, feel free to stop by the ITRC in the basement of the Library, set up an appointment by calling at x4773, or emailing us at: itrc@saintmarys.edu. We hope to hear from you!
