Macromedia Dreamweaver Tutorial - Part One Setting Up the Site Definition

Transcription

1 1 Macromedia Dreamweaver Tutorial - Part One Setting Up the Site Definition One of the nice features of Macromedia Dreamweaver is the built in FTP client. If you enter your information correctly, Dreamweaver will automatically update your web site with the click of a button. This means that each time you wish to change your web site, all you have to do is open the version stored on your computer, update it, save it and hit upload. In this tutorial we will make a number of choices in setting up a site definition. This site definition is a set of characteristics regarding your web site and where you will be posting it on the Internet. It will allow you to create a web page and then upload it to your GPU web space with the click of a button. 1. Begin by clicking on the Site menu and choosing New Site Figure 1 The Dreamweaver Interface

2 2 2. After you ve selected New Site, Dreamweaver will open up a site definition wizard which will take you through the rest of the process. Don t worry if you input the wrong information, you can change it afterwards at any time. The first screen that shows up asks you to choose a name for your site. Choose any name you wish for your site and enter it now. Click Next to move on to the next screen. Figure 2 Naming Your Site 3. Next, Dreamweaver will ask you if you would like to work with a server technology. For the purposes of this class, just select No, I do not want to use a server technology and click Next. Figure 3 Selecting the Server Technology 4. Dreamweaver will now ask you how you want to work with files while you are creating your web site. For most designers, working with local copies on the machine and then uploading them to the server later works best. This doesn t take up bandwidth and slow down the design process. Select Edit local copies on my machine, then upload to server when ready and click Next.

3 3 Figure 4 Editing and Uploading Files 5. The next step is the most important step in the process of setting up the site definition. In this screen, Dreamweaver asks for your server information. In this tutorial we will be using your GPU account as the location to upload your web site to, so be sure that you have your ualberta UserID and password on hand. The first question Dreamweaver will ask you is how you would like to connect to your remote server (in this case, the University of Alberta s GPU server). Select FTP as your method to connect. Next, it will ask for the hostname or FTP address of your remote server. The address of the university s GPU server is: gpu.srv.ualberta.ca You will then be asked what folder you would like to store your files in. No matter what, you must at the very least enter public_html so that others can see your site on the Internet. If you wish, you may create a subfolder to put your files in. For example, if your web site is on a math lesson, you can create a folder called mathlesson to put your files in. If this were the case, you would enter public_html/mathlesson as the folder to place your files in. To see your lesson, you would then have to go to:

4 4 Figure 5 Remote Host Settings The last thing that you need to enter is your University of Alberta userid (where it says What is your FTP login: ) as well as your password. To make sure you have entered everything correctly, click on the Test Connection problem. If you have entered everything correctly, you will see a message that says: Figure 6 Correct FTP Setup Message If your settings are incorrect, you will get an error message. If you do get an error message, re-check to make sure that you have spelled everything correctly and that you have correctly entered your userid and password. 6. Your final choice involves whether you want files on your web space to be checked in or checked out to ensure that two people can t be working on the

5 5 same web page at once. Since only you will be working on this web site, simply choose No, do not enable check in and check out. Figure 7 Disable Check In and Check Out 7. Dreamweaver will now present you with a summary of all of your options. Figure 8 Summary of Your Selections

6 8. Instead of clicking on the Done button, you can also click on the Advanced tab on the top left hand side of the screen. The advanced settings allow you to make any changes to the selections you have just made. Click on the Advanced tab now and make any changes that you feel are relevant to the settings there. 6 Figure 10 Advanced Remote Info Figure 11 Advanced Local Info When you have looked through the advanced settings, click on the Basic tab and click on Done.

7 7 Macromedia Dreamweaver Tutorial Part Two Basic Web Page Construction Using Dreamweaver 1. Let s begin by becoming a bit more familiar with the Dreamweaver interface: Insert Bar Document Window Property Inspector Figure 1 The Dreamweaver Interface There are many other panels that you can use in Dreamweaver (click the Window menu to see them all). However, for the purposes of this tutorial, we will stick to the insert bar to add content and the property inspector to change the characteristics of the content. 2. Begin by writing some sort of welcome message as in the example below. Use the options in the property inspector to center the text and to modify the size and color of your text. Insert horizontal bar icon Size Color Figure 2 Text Modification Options

8 8 Use the insert horizontal bar icon, or click insert>horizontal bar to frame your welcome message with horizontal bars. 3. It s good practice to save your web site repeatedly when working on it. Click File > Save As now to save your work. You should create a new folder to contain everything for your web site. This will make the process of uploading your web site to the server much easier later on. Click on the New Folder icon and create a new folder for your site. Make sure you are in this new folder and then save your work as index.html. This is a special name that every web site must have. When a web browser goes to a web address (i.e./ the site that shows up first automatically will be the index.html file. New Folder Icon 4. Click on the Insert Image icon. Figure 3 Save Your Web Site Figure 4 Insert Image Icon The following menu (figure 5) will appear. Move through the computer hard drive and find a picture that appeals to you. I suggest moving to Microsoft Office in the Applications folder. Once there, you will find a folder called clip art that contains hundreds of gifs and jpegs. Make sure when you select an image that you have selected document in the Relative to: menu. This will make sure that the browser will look for the picture wherever you save it relative to where your document is saved, instead of by looking for a pathway on your computer (which will not be accessible/exist once you have uploaded your page to the internet).

9 9 Figure 5 Select an Image Once you have found an image that appeals to you, select open. You will then see the following window pop up: Figure 6 Saving to Your Root Folder Dreamweaver is asking you to move a copy of the image to the folder where your web site is located. Choose YES (as you will have to upload the image to your web space along with the html files). If you want, you may rename it to something more descriptive as shown below. Figure 7 Renaming Your Image

10 10 Most designers consider it good practice to have a separate folder for images and other media content. If you wish, instead of clicking on save, chose to create a new folder called images and save your image in there. No matter where you put the image (in an image folder or in the same folder as your index file), Dreamweaver will link the newly saved copy to your web site so that it appears correctly when it is published online. 5. Click on the Link icon. The following box will appear: Figure 8 Link Icon Figure 9 Inserting an Link Fill in the correct information for your address and a text message that will let users know where to click to you. Click OK when you are finished. Center this link on your page. 6. Press enter so that you are on a new line. To the left of the link button is the hyperlink icon. Press this link once and the following menu will appear. Figure 10 Inserting a Hyperlink

11 11 Create a hyperlink for any web site that you frequently use. All you need to include is text and a link. Press OK. Add some text around your new link so that people reading your site will know exactly what your hyperlink is for. For example, Need to search? Try Google! 7. Under the hyperlink you have just created, insert another horizontal bar. 8. Next, we ll add some finishing touches to the site. Make sure that you have given your web site a title, as shown below. Figure 11 Giving Your Site a Title This title will appear as the name of the browser when someone looks at your web site. Figure 12 The Title in a Browser 9. Finally, choose Modify > Page Properties. Experiment with the settings in this window. You can change the background image or color, text color (including link color) and a number of other formatting options. Chose the settings that you feel make your site the most attractive and click OK. Figure 13 Changing the Page Properties

12 12 Congratulations! You have completed the first part of your first web page using Dreamweaver. Your page should look something like the one below (taking into account the personal style selections you made). Figure 14 Basic Dreamweaver Page

13 13 Macromedia Dreamweaver Tutorial Part Three Adding Multimedia Audio, Video and Animations There are two methods of adding multimedia content to web pages. The first method is by linking. Just like a web page can be linked to another web page, it can also be linked to a multimedia file such as a sound file or movie file. When a user clicks on the link, two things can happen: 1. If they have the appropriate browser plug-in, the multimedia file will open up in a new browser window. 2. If the user does not have the appropriate plug-in, they will be prompted to download the file to their computer to play with an external application. The other method of adding multimedia content is by embedding it. Using this method, the user will see or hear the file directly inside the page they are currently looking at. If they don't have the appropriate plug-in to do so, they will simply see an error image. Each method, embedding and linking, has its own pros and cons. Embedded media should be used if there is text or other images that needs to be viewed at the same time as the multimedia file, however, embedded media also loads automatically and users with slower internet connections may find this slows them down considerably or even crashes their system. With linked media, the user has the option to view it or not, however, all the user can see on the page is the controls for the multimedia element and no other content to elaborate on it. 1. Begin by creating a title ( Multimedia Content ) for your new section. Change the text characteristics so that the font is not the default font and the text is another color of your choice. Figure 1 Changing Text Characteristics 2. Move to a new line and start a bulleted list. Type in the sentence Click to listen to my favorite song!. Move the cursor to right between the words

14 14 Click and to and then click on the Hyperlink icon (looks like some chain links). You will see the dialogue box below: Figure 2 Adding Linked Media Now click on the little blue folder button. This will allow you to choose the audio file that you wish to link to. Choose a sound file from somewhere on your computer (you may wish to look in the Hyperstudio media library) and add it as the link. Just like when you added a picture to your web site, you will be asked to save it to your root folder. Choose Yes and then click Ok to finalize the creation of the link. You now have a linked audio file on your web site. 3. We will now add an embedded sound file to your web page. Move to the Media tab and click on the icon that looks like a puzzle piece. This is the Plug-in icon and it allows you to embed any media that needs a plug-in to view it (almost all movies and sounds fall under this category). Figure 3 Adding Embedded Media When you click on this icon, you will see the same file selection menu as you saw when you added a picture and a sound. Select a sound file from somewhere on your computer (I again recommend you choose one from the Hyperstudio media library). You will now see an image on your web page that looks like the puzzle piece. Don t do anything to it yet we ll change its attributes later. 4. On your own, using the same steps we used for the audio files, add a linked movie and an embedded movie underneath your linked and embedded sound (as shown below):

15 15 Figure 4 Add a linked and embedded movie 5. Now let s look at the various ways to change the characteristics of our multimedia files. The obvious characteristics are located in the inspector: Figure 5 Changing Embedded Media Characteristics Using the property inspector, we can change the size of the media, the source of it, its alignment, and we can also preview it by pushing the play button. Click the Play button to preview your movie now. When choosing the size of your media, you have two options. One is to leave the W(width) and H(height) blank. This will ensure that whatever you are viewing is show at the same size it was created. The other is to actually resize it by either changing the width and height or by clicking on and dragging the corner of the plug-in image. If you chose to resize it, you may actually cut off something you need to see, so make sure you preview any resized media. Experiment with resizing one of the media elements (either the sound or movie) and leaving the other one empty. Figures 6 & 7 The Embedded Media in Dreamweaver and a Browser You can also edit some of the extended media properties by left clicking on the media element and choosing Edit Tag :

16 16 Figure 8 Editing a Tag In this section you can change some of the advanced playback options for your sound or movie. Figure 9 Tag Characteristics 6. We will now add an animation to the web page. Adding an animation is just as easy as adding an image all you have to do is insert an animated gif instead of a static one (one that doesn t move). Move to a new line, create a bulleted element and type This is my favorite animation. Practice inserting an image into your web page that is an animation instead of an image.

17 17 Figure 10 Adding Animations 7. You re almost done! Go through and make sure that all of the multimedia elements ONLY are centered on your page. Preview your page in a browser and note the differences between the Dreamweaver version and the Browser version. Figures 11 & 12 The Media Page as it Appears in a Browser and Dreamweaver

18 18 Macromedia Dreamweaver Tutorial Part Four Adding Advanced Content Part of the great thing about Dreamweaver is its ability to integrate multimedia files and applications from the entire Macromedia family of software. Multimedia content like Flash files, Firework animations and Freehand images, as well as databases using ColdFusion. Obviously we will not be exploring how to build elements in Flash, Fireworks or Freehand to integrate into our sites. However, Dreamweaver does have a few commonly used multimedia elements integrated directly into Dreamweaver, so that you do not have to actually create the files using another program, but can instead design and insert them with a click of a button. The elements we will explore in this tutorial are rollover images, Flash buttons and Flash text. You may also notice in the menu that you can also insert a navigation bar. This is a longer, more involved process; however, if you feel like you are up to the challenge, read the Macromedia help file on creating navigation bars and try it out! Insert a Fireworks file (requires premade file). Insert a Flash file (requires pre-made file). Insert a rollover image. Insert a navigation bar. Figure 1 - Advanced Media in the Common Bar Insert a Flash button. Insert some Flash text Insert a Shockwave file (requires a pre-made file) Insert a Java Applet (requires a pre-made file). Insert an Action Script parameter. Insert an ActiveX control (requires a premade file). Figure 2 Advanced Media in the Media Bar 1. The first thing we are going to do is add a rollover image to your page. This allows you to display one image normally and another when the user s mouse goes over the image (this is particularly useful when designing things like menu bars). Insert a horizontal bar to begin a new section, type Advanced Content and then create a bulleted list with the first item being This is a rollover image:.

19 19 2. Next, click on the Insert a Rollover Image button (see Figure 1). Once you have clicked that, you should see the following options: Figure 3 Creating a Rollover Image 3. Creating a rollover image is actually very simple, first, give the image a name. This is what will appear when the user does a mouseover of the image. Next, select the two images you want to use. To do this, use the Browse buttons to explore what images are on your computer. There is a preview window in the image selection panel that will allow you to see what the image looks like. Note that you do not have to select images that are the same size if you don t want to. Next, add a URL to go to when the image is clicked. Finally, make sure you enter some alternative text for the image. Many people do not know this, but these alt texts (or tags as they are referred to as in code) are important not only for low bandwidth users who don t have a fast enough Internet connection to see images a quickly, but also for individuals with vision impairments. Many of these individuals have a special program on their computer that will read to them what is on a given web page. When the program encounters an image, it reads whatever is in the alt tag, therefore, a descriptive alt tag becomes an important feature for these users. When you click okay, you will be prompted to save copies of the images in your root folder (as you always are when you add images or multimedia content). Be sure to choose yes when prompted to do so. 4. Next, we will add a Flash button to your web site. These can be used nicely in a frames page as a navigation menu/bar or as hyperlink buttons. Create another bulleted item and write, Here is a Flash button:. Next, click on the Create a Flash Button icon as shown below: Figure 4 Creating a Flash Button

20 20 You will then see the following options: Figure 5 Choosing Flash Button Characteristics Choose a button from the style menu and give it a caption other than Button Text. If you would like, you can change the font, font size and background color of the button (you will notice later when you see the finished product that I neglected to change the background color of my button to fit with my page what results is an awkward looking button). You can specify whatever web site you would like in the Link area and you don t have to worry about the Target menu, because we are not working with frames in this particular page. Finally, give your button a name to save it as. Click on the Browse button to make sure you are saving it in either the same folder as your index.htm file is saved in, or in the images folder of your web site if you chose to make one earlier in the tutorial. 5. Next, we will add some Flash text to our page. Create another bulleted item and type, This is Flash text:. Click on the Create Flash Text icon: Figure 5 Creating Some Flash Text

21 21 You will then see the following options: Figure 6 Choosing the Flash Text Characteristics Just like before write some text and choose whatever font attributes you wish, as well as a font color and a rollover color. Insert a link to go to when the user clicks on the text, as well as a background color that either matches your page background or contrasts it to give the Flash text a banner look. Name your flash text something in the Save As: box and click on Browse to make sure that you are saving it the correct folder (just like you did for the Flash button). 6. You re almost there! Add a horizontal line under your Flash text. Write a message for the user to know when the page was last updated, and then click on the Insert Date icon as shown below: Figure 7 The Insert Date Icon Once you have clicked on the icon, you should see the following options:

22 22 Figure 8 The Insert Date Options Select a format for your date and click OK. 7. That s it, you re done! This section should look something like the image below: Figure 9 The Advanced Content Section Now, explore some of the other features Dreamweaver offers. Outlined below are a few tabs you may want to check out and modify before you upload your web page to your server space: The Layout tab gives you icons that allow you to toggle between the code and layout views of your page (check out the code for your page it s huge!) The Tables tab obviously allows you to insert tables and table elements. The Frames tab allows you to add frames to your page. The Head tab allows you to choose keywords, titles and other elements that would ordinarily be in the <head> area of HTML code.

23 23 Macromedia Dreamweaver Tutorial Part Five Uploading Your Page Now that you re finished your page, you re ready to upload it to your web server space using the site definition we set up in part one. 1. The first time you upload your web site, you have to upload the whole thing. To do this, click on the Open Site option in the Site menu and then click on the name of the site that you created in part one. Figure 1 Site Menu 2. A panel will appear with two windows in it. If you have used an FTP client before, you will note that the interfaces are very similar (though the Dreamweaver version has far more functionality than most FTP clients do). Connect icon. Put Files icon Public_html folder Your site folder Figure 2 Choosing What to Upload First, make sure you are connected to the server by clicking on the Connect icon. When you are connected, the dot in the corner will turn green (see Figure 2). In the Local Files section, choose your entire site folder to upload (since you have been saving everything in it as you ve gone along by choosing yes when Dreamweaver asked if you wanted to save copies to your root folder). Make sure that in the Remote Site section, you have double clicked on public_html so that you are actually in that folder. If you don t, the upload will work and the files will technically go to your server space, but no one will be able to see them on the Internet. When you have done that, all you have to do is click on the Put Files arrow to upload your folder (see Figure 2).

24 24 Once you have done that, you should see all of your files on the Remote Site end of the panel. You can now click the Connect icon again to disconnect. Figure 3 - Uploaded Files 3. The next time you upload your site is much, much easier. From the Site menu, select Synchronize. In the menu that appears, select your entire site in the Synchronize menu and select Put newer files to remote in the Direction menu. When you click Preview Dreamweaver will compare the files on your remote site to your local files. If there are new files in the local site, Dreamweaver will automatically upload them to the remote site. Files that have the same name get compared by their Modified date. If a newer version exists on the local site (i.e./ because you changed something on it), Dreamweaver will automatically transfer it to your remote site. Congratulations, you have now completed this series of Dreamweaver tutorials! Take advantage of the capabilities of this program and have fun designing your own web site!