An Introduction to Dreamweaver MX From Learn-ICT

Transcription

1 An Introduction to Dreamweaver MX 2004 From Learn-ICT

2 THE INTERFACE: When you open Dreamweaver you will be presented with a screen similar to that shown below. Similar if you still have all the default settings in place! You may see a few more "Panel Groups " down the right hand side (where it says Design Code etc.). Notice that in the "Files" panel there is a green folder displayed named "Site - dmx_newbie" which is the site set up for this tutorial. THE INSERT BAR: The insert bar sits near the top of the interface and contains a series of short cut icons for tasks employed during the construction of Web Pages. It looks like this Clicking on the various "Tabs" displays the tasks assigned to each "Insert Bar" collection. The collection we use most often is aptly named "Common". The following table explains each of the icons in some detail:

3 Insert "Hyperlink": Hyperlinks, more commonly just known as "Links" are what makes the web go round Insert " Link": This inserts a link that, once clicked, opens the visitors program with a pre specified address already entered in the "To" field like this "Mail Me". This can also be achieved in the Properties Inspector by typing mailto: followed by the address into the link box. Insert "Named Anchor": Whilst a "Hyperlink" enables you to link to other web pages both within and outside of your own web site, the "Named Anchor" is used to link to other parts of the same web page that the link is on Insert "Table": You are going to be using this one a lot. Tables give structure to your page layout Insert "Image or Images": This is another one that you are going to use a lot. Just click on the downward pointing arrow and you will be presented with a number of options, take a look at this As you can see, this covers everything from Inserting a single image. Inserting an image placeholder, useful if you are working on a page and don't have all the artwork yet. Inserting a Rollover image. Inserting HTML generated by Fireworks. Building a Navigation Bar. The three bottom icons are used when building an image map. Insert "Media": Another multi function icon. This one handles inserting the following Flash Movies Flash Buttons from Dreamweaver's inbuilt Flash Button Library. Flash Text. No fancy text effects though. Shockwave. Java Applets. A facility for setting tag parameters. ActiveX. Plug Ins. Warning: Once you have accessed a function in the menu, Dreamweaver will display that icon in the Insert Bar until a different function is accessed Insert "Date": Simply inserts today's date in the page!

4 Insert "Comment": Inserts a standard HTML comment into the code like this <!--hello John -->. Useful for keeping track of your thinking when designing complex pages. "Templates": Dreamweaver allows you to create templates for your web pages that contain editable and non editable regions. Useful when working within strict design parameters in a group environment. "Tag Chooser": A memory aid for when you are hand coding and can't quite remember the correct syntax for something. Covers HTML, CFML, ASP.NET, JSP, JRun, ASP, PHP and WML THE PROPERTIES INSPECTOR: The "Properties Inspector" lives at the bottom of the screen just below the "Status Bar" So what does this inspector do? Basically it displays the "Properties" for the part of the web page you are currently working on. So, if you are working on an image, it will show you the image properties. If you are working on text it will show you the text properties. Same thing for forms, layers, tables etc. CREATING A NEW WEBSITE: Create a new folder in My Documents and name it "newbie2". This is the folder that your Web Site will live in. Open the "newbie2" folder and create another folder inside it named "pics". This is where the pictures for your Web Site will be stored. Open the demonstration folder on the Desktop, locate the "7" image files it contains then copy and paste them into the folder named "pics". Now copy the "3" text files copy and paste them into the main "newbie2" folder.

5 Open Dreamweaver. It is now time to tell Dreamweaver where all the files for our Web Site are stored. To do this, we use the "Manage Sites" facility. This can be accessed from the "Site" menu by clicking on "Manage Sites". Click on "NEW", then select "Site" from the menu. When using Dreamweaver for the first time the "Basic Site Definition" wizard opens by default. I prefer using the "Advanced" features, so click on the "Advanced" tab to switch views. Once the "Advanced" window is open select "Local Info" from the "Category" list. Then type "newbie2" into the "Site Name" text box. Next, click on the yellow folder next to the "Local root folder" text box and browse your way to the "newbie2" folder you created in My Documents. Once you have found the "newbie2" folder and opened it, hit the "Select" button.

6 There are some other goodies in the "Category" list that we don't need right now. However, let's take a quick look at them for future reference. The "Remote Info" screen is where we could set up the details of a remote server. This would enable us to upload and download files. You don't have to worry about it yet. Just make sure that "None" appears in the "Access" box. The "Testing Server" screen is where you select which particular server side scripting language you wish to use when developing dynamic web sites. We are just building plain old HTML sites at this stage so make sure that "None" appears in the "Server model" and "Access" menus. Once you have finished looking around, switch back to "Local Info" and hit the "OK" button at the bottom of the screen. You will then be sent back to the "Manage Sites" screen. As you can see, your newly defined "newbie2" site now appears in the list of sites. Hit the " Done" button.

7 Now go take a look in the "Files" panel under the "Files" tab. All your files are listed there. If you can't see the image files just click on the small + next to the "pics" folder to open it. Now you have all the content in place and Dreamweaver knows where everything is. Time to start building Web Pages! WORKING WITH TEXT: In this section we will explore some of the ways in which we can add text to a web page. Firstly though, we have to create some blank web pages to hold the text. Go to the "Files" panel and right click on the "Site - newbie2" folder. Select "New File" from the menu. You will see a new file named "untitled.htm" appear in the file listings. Rename it "index.htm". To rename a file simply click on it to highlight it and then press the "F2" key. You can then simply place your cursor on the file name, delete the section you want to edit and type in a new name. Create two more new files and name them "gallery.htm" and "links.htm". Once you have all your new files created the "Files" panel should look like this.

8 Just a quick word about creating new files. You can achieve the same result by selecting "File > New > Basic Page > HTML > Create" which will open an untitled page in the work area. Then select "File > Save As" and name the page. Or by hitting the "New" button and following a similar procedure. Double click on "index.htm" and it will open in the work space. In "Design View" the page appears as below. We will be doing most of our work in "Design View". Move down to the "Properties Inspector" and click on the "Page Properties" button. The "Page Properties" window will open. We are going to give our page a sort of beige background by entering the hex code "#F4F3DD" into the "Background" box. Note that I forgot to include the "#" when I typed it in. No problem, Dreamweaver will compensate and add the required "#" to the code for me. I am using a dark blue as the default "Text" colour and a lighter blue for all the links. I picked these colours by clicking onto the colour boxes and selecting them from the pallet. If you like, you can select different colours for each "Link State". For example, Red for the links initial state, Green for when it is clicked and Blue for after the link has been visited Switch from "Appearance" to "Title/Encoding" and type a "Title" for the page into the "Title" box. Then hit "Apply" and "OK". The "Title" is displayed in the title bar of a web browser. It has nothing to do with the name of your HTML file. Search engines look at the "Title" tag for keywords that match a query a visitor may have entered.

9 Back to the "Properties Inspector" again and click on the "Align Center" button. Notice that American spelling is always used when dealing with HTML. Take a look at your page and you will see the cursor flashing away merrily in the middle at the top of the page. Go to the "Common" insert bar and click on the "Image" icon. Open the "pics" folder by double clicking on it. Select the "banner.jpg" file and hit the "OK" button. The picture will be previewed in the "Select Image Source" window if you have ticked the "Preview Images" check box. You will now have the sites title/banner image at the top of the page. Ok, I know this section of the tutorial is supposed to be about working with text. However, we need that image in place before we start with the rest of the page. Place the cursor in the middle of the page just under the image.

10 Go to the "HTML" insert bar and click on the " Horizontal Rule" icon. A neat dividing line will be drawn just under the banner. as shown below. Place your cursor to the right of the line and hit the return key. The cursor will move down to a central position below the line. Type in the following text.. Home - Gallery - Links Now highlight the text by dragging the cursor across it, go to "Properties" and select: Font Verdana, Arial, Helvetica, sans serif from the list. Size - 2 Bold Verdana becomes the font of choice. If Verdana is not installed on the visitors computer, the browser will look for Arial as an alternative. Failing that, it will look for Helvetica then any other sans-serif font available. Press the return key again and move the cursor to the left of the page using the "Align Left" button.

11 Select "Heading 2" from the format menu, Arial etc from the "Font" menu and "None" from the "Size" menu then type the word Home Press the return key again and reset the "Properties" to Format - Paragraph. Font Verdana, Arial, Helvetica, sans serif from the list. Size - 2 Bold You will now type in some text. What I want to demonstrate here is the way that the Return key is used to vary the amount of space between lines of text. If you type a line of text and simply hit the return key, like so... Dreamweaver automatically creates a paragraph break which is equivalent to approximately two lines of text. Like so If you type a line of text and then hit the return key whilst holding down the shift key Dreamweaver creates a single line break placing the new line of text directly below the existing line. If you just type in a long line of text without using the return key. Dreamweaver will allow you to carry on for as long as you like. It will simply wrap the text when it reaches the edge of the browser window, creating a single line break as it wraps. When using the "Backspace" key for repositioning lines of text, "Backspace" alone moves a line up a whole paragraph break. Holding down the "Shift" key whilst pressing the "Backspace" key moves a line of text up a single line. The cursor must be positioned to the left of the line of text (or other item) that you want to move. Highlight the text you just typed in and delete it by pressing the delete key. Go over to the "Files" panel and double-click on the text file "prague.txt".

12 The text file opens in code view as shown below. Copy the text and then switch back to "index.htm" and paste it in. When you first paste the text into the index.htm page it will probably lose any formatting it had in the text file. Simply highlight the text, click the align left button and set the properties to our old favourite: Format - Paragraph. Font Verdana, Arial, Helvetica, sans serif from the list. Size - 2 Bold Tidy up the bottom of your page by inserting another horizontal line. Save your work either by by selecting "Save" from the "File" menu, Clicking on the "Save" icon in the document tool bar, or simply presing "Ctrl + S" on your keyboard. Then preview the page in your browser by pressing "F12" on the keyboard. Just a last quick word about inserting text from "Notepad" text files (.txt) or "Word" files (.doc). If you wish, you can simply click on the text file that is held in the "Files" panel then drag and drop it onto the web page in the work area. Dreamweaver will ask you if you want to link to the file or just insert the contents. Choose the latter. Dreamweaver MX 2004 even allows you to "import" the contents of a "Word" document, held elsewhere on your computer, into the page. To do this go "File > Import > Word Document" and browse to the document holding the content you wish to import. You should now have a basic understanding of inserting text into a web page. Create yourself a new page and practice a bit with what you have learned so far. Don't be afraid to explore and experiment.

13 CREATING LINKS: We will now take a look at creating links. First we will look at linking to other pages within our website. Then we will learn about linking to other external web sites. Open "index.htm" in Dreamweaver workspace and highlight the word "Home". A quick tip here, you can highlight single words by simply double clicking on them. Look in the "Properties" inspector and click on the yellow folder next to the "Link" box. Select "index.htm" from the file window and sekect the "OK" button. You have just created a link. Take a look at the page and you will see that the word "Home" is now displayed in the colour we assigned to the links. It is also underlined, indicating that it is now a link. Save the changes to the "index.htm" page by either going "File > Save" or by clicking the "save" icon.

14 USING TABLES FOR LAYOUT: A "Table" is simply a grid made up of "Rows" and "Columns". The spaces outlined by the "Borders" of these "Rows" and "Columns" are referred to as "Cells". You can place text, images and other objects inside these "Cells". cell with green border This is a row cell cell cell cell cell cell cell cell cell with red border border This is a column Insert a table from the "Layout" insert bar Table Properties: Number of Rows. Number of Columns. Header and Caption (available from the insert table panel). Summary, for use with non visual browsers rendering speech or Braille (available from the insert table panel). Align, Left, Right or Centre. Positions entire table on the screen. CellPad, sets the pixel space (padding) between cell content and borders. CellSpace, sets the pixel distance (space) between cells. Border, sets pixel thickness of borders. Bg Color, sets the tables background colour. A text box is also provided, into which you can enter a raw hexadecimal colour code like # Brdr Color, sets the table border colours. A text box is also provided, into which you can enter a raw hexadecimal colour code like # Bg Image, allows you to use an image as the background to a table. Table ID, allows you to assign a unique name to the table. Useful when you have multiple tables on a

15 page. Class, allows you to assign a CSS style to the table. Dreamweaver also provides some (frequently ignored) utilities for formatting tables. Format Table: Insert a table into your page with 2 columns and 6 rows and insert the following data: Name Fred 33 Bill 42 Joe 25 Xavier 63 Alfred 102 Age Click on it to select it. )Quick tip here, clicking on the <table> tag in the status bar to makes selection easy.) Select "Format Table" from the "Commands" menu and experiment with some of the options. Now select "Sort Table" from the "Commands" menu. Set it up to sort Column 1 alphabetically in ascending order. Then press the Apply and OK button. Now play around with sorting column 2 numerically, then sort both. Single Cell Tables Sometimes it's useful to use a single cell table for displaying artwork etc. Insert a new table with the following settings: 1 Row 1 Column 100 pixels width Border thickness, Cell padding and Cell Spacing to zero Hit OK

16 You will see a dotted outline of a table on your screen. Above it you will see the table width displayed in green. You can turn the width display off by unticking the Table Widths option in the Visual Aids menu. The dotted lines represent the borders of the table. We set the border width to zero. If we had set the border width to "1" we would see a solid 1 pixel border around the table like so. Insert a picture into a table and experiment with "Border Widths": Border = 0 Border = 1 Border = 5 Border = 10 Now play around with the "Cell Spacing". Border = 0 Cell Spacing = 0 Border = 1 Cell Spacing = 2 Border = 5 Cell Spacing = 4 Border = 10 Cell Spacing = 5 Finally we will play around with "Cell Padding". I have changed the background colour of each table to black so that you can see the effect better. Border = 0 Cell Spacing = 0 Cell Padding = 2 Border = 1 Cell Spacing = 0 Cell Padding = 4 Border = 5 Cell Spacing = 0 Cell Padding = 6 Border = 10 Cell Spacing = 0 Cell Padding = 8

17 Nested Tables By now you will have discovered that tables are extremely useful but, structurally, can be a bit rigid. Everything works on a grid pattern, so if your design ideas fall outside of that pattern you could run into problems. This is why "Nested Tables" are so important. A "Nested Table" is simply a "Table" placed inside a cell of another table. Take a look at the example below and you will see what I mean. The "Red" table is the main table and features 3 "Rows" and 3 "Columns". The 3 cells in the middle row have been "merged" to make one long cell. Now, my design calls for three equal columns (cells) in the top and bottom rows and 4 equal columns split into two rows in the middle cell. If we tried to just split the long centre cell into 4 columns we would come unstuck because the columns would try to align themselves to the existing three. To overcome this we simply insert another table, the "Green" one, inside the long middle cell of the "Red" table and give it a grid pattern of its own. You can use as many "Nested Tables" as you like. It's a good idea to give each table its own unique name using the "Table ID" box in "Properties". REBUILDING THE GALLERY PAGE: Set up a new page using the same page properties that you used for the original Gallery Page. This time though, set all the margin parameters to zero. Just a little trick to make your page go right to the edge of the browser window with no margins. Insert a table of: 10 rows 2 columns 100% width 0 (zero) cell spacing, cell padding, border.

18 I have put some numbers onto the picture below as a guide to what comes next. Don't put them on your page. Using the "Merge Cells" tool, merge the cells in row 1, row 2, row 3, row 4, row 9, and row 10. Our thumbnails are all 150 pixels wide so click on the line representing the column and drag it towards the left of the page until it looks around the right width for the pictures. You can set it up more accurately using "Properties" if you wish, but for this demonstration that's not strictly necessary.

19 Click inside the top row (row 1) and set it's properties to "Horz = Center" and "Vert = Top" The properties for rows 1 to 4 and 9 and 10 should all be "Horz = Center" and "Vert = Top" Insert the top banner image into row 1 Insert a "Horizontal Rule" into row 2. Insert the text for the navigation links into row 3. Insert a "Horizontal Rule" into row 4. Insert a "Horizontal Rule" into row 9. Insert the text for the "To The Top" link in row 10. Your page should now look like this. Rows 5, 6, 7 and 8 should all be set to "Horz = Center" and "Vert = Top". Insert the text "Gallery -" in the left cell of row 5. In this example the text has been formatted as "Heading 3". Insert the thumbnail "CharlesBridge_thumb.jpg" into the left cell of row 6. In the image "Properties" give the picture the following "V Space = 10" and "H Space = 5". That will provide a bit of space around the picture and stop the table cell snapping inwards to the edge of the image. Insert the other two thumbnails into the left cells of rows 6 and 7 respectively. Give them the same "V Space" and "H Space" as you gave to Charlie's Bridge. Copy and paste the text relating to each thumbnail into the appropriate column as shown below. The cell alignment for the text should be "Horz = Left " and "Vert = Top". You can bring the text a little further down the page by inserting a single line break above it.

20 Save your work and check it in the browser (F12). FORMS The Forms Insert Bar: Take a look at the Forms Insert Bar and you will see the following. Let's first go through all the icons to see what they do. Insert "Form": This is the icon that inserts the <form></form> tags into your page. All other form elements must be enclosed within these "opening and closing" form tags. The first thing you do when building a form is to click on this icon. Insert "Text Field": This inserts a standard single line text field like such... their details. into which your visitors enter Insert "Hidden Field": A hidden field is not visible to your visitors. It is often used to pass information regarding the processing of the form to other pages, mailing programs or to a database. Insert "Text Area": This inserts a multi line text box into the page. Multi line text areas are normally used by visitors for entering comments etc.

21 Insert "Check Box": This inserts a Check Box into the form like so. Check boxes allow visitors to select single or multiple options from the form depending on how it is configured. Insert "Radio Button": This inserts a radio button on the page like so. Radio buttons are normally used in groups which allow a user to select just one item from a list of options. Insert "Radio Button Group": This brings up a wizard that guides you through the process of configuring a group of radio buttons. Insert "List or Drop Menu": This enables you to insert a "Drop Down" menu like so so... one tw o three one or a scrollable list of links like Insert "Jump Menu": This inserts a "Jump Menu". A Jump Menu is something like a drop down menu but it sends the user to a new URL as soon as a selection is made. Insert "Image Field": Allows you to insert an image as a replacement for a standard Submit button. Insert "File Field": This is sometimes used in advanced routines that allow users to post attachments to the webmaster (not a good idea unless the webmaster has a heavy duty virus blocker). It brings up a text field and a "Browse" button and allows the user to browse to a file on their hard disk that they wish to attach to the or upload to the web site. Insert "Button": This inserts the standard Submit and Reset buttons. Submit Reset Insert "Label": Labels are sometimes used to relate descriptions to various form controls. It simplifies assigning uniform styles to form elements. Insert "Fieldset": Fieldsets allow the "grouping" of form elements. This is useful when designing sites for the visually impaired and or other users who may use speaking browsers or have to navigate a site purely by using the keyboard.

22 WHAT FORMS DO Forms can be used to Gather information from a site user and send that information to the site owner or another person by . Gather information from a site user and send that information to another page for processing in some way. Gather information from a site user and send that information to a database for use at a later stage. Facilitate navigation (within the site or on the www) with the use of drop down, jump or list menus. "mailto" If you are building a bog standard HTML page you are a bit limited as to how you can use forms. HTML does allow you to send form contents by . However, in order to do this, you are restricted to what is known as the "mailto" method. This method simply takes the contents of the form and mails it to the recipient using the visitors own program. Unfortunately, not all programs support this method. Netscape users should not have a problem. Internet Explorer users with Outlook Express get a pop up window asking them if it's OK to send the form. As long as they click on "Yes" then the form is sent. CREATE A FORM Create a new page, click anywhere inside it, then click on the "Form" icon in the "Forms" insert bar. You will see a box surrounded by red dotted lines appear. This is your form "Delimiter". If you do not see the red dotted lines, go "Edit > Preferences > Invisible Elements" and put a tick in the checkbox next to "Form Delimiter". Click inside the "Form Delimiter" box then click on the "<form>" tag in the status bar. This will select the form and open the form "Properties" inspector. In "Properties" change the "Form Name" to something that is relevant to what the form is for. Set the "Method" to "POST" and enter the following into the "Action" field: mailto:you@yourmail.co.uk Use your own address because you are going to be sending the form contents to yourself. Set the "Enctype" field to "multipart/form-data". So what does all this do?

23 Form Name - is just that. A name you give the form. Useful when debugging if you have more than one form on a page. Action - is the action that is taken when the form is submitted. In this case, you are sending the contents of the form to yourself by . Method - "POST" is the method we are using in order to post the form to your address. The other method available to us is "GET" which is usually used when searching databases etc. Enctype - basically "Encryption Type". Choosing "multipart/form-data" splits the contents of the form to separate lines when it is sent. You will see the effect of the other options later. Target - we are not using this. It comes into play when using "Frames" or when opening a new browser window to display form data. Class - only gets used when we start applying CSS (Cascading Style Sheets) to the form. Don't worry about it right now. Click inside the "Form Delimiter" and type the words "First Name". Add a couple of non breaking spaces after the text (Ctrl+Shift+Space) then click on the "Text Field" icon in the Forms insert bar. A text field will be inserted as shown in the picture below. set up the "Properties" as follows... TextField - give it the name "FirstName". NEVER use spaces or special characters when naming ANY form element. If you do, your form will generate all sorts of errors once you start playing with any of the scripting languages (JavaScript, PERL, ASP etc.). Char width - this sets the width of the TextField. I have set it at 30 characters. Type - Check the "Single Line" radio button. There are several other properties you can set. Max Chars - maximum characters. Set this to the maximum number of characters you want to allow a visitor to enter.

24 Type Multiline - simply converts the text field to a multi line Text Area. More about these on page 2. Password - displays anything the visitor types in as black dots. Thus stopping nosey people from grabbing his password by peeking over his shoulder. When the submit button is pressed the text is transmitted as normal readable text. Class - only gets used when we start applying CSS (Cascading Style Sheets) to the form. Now type the words "Last Name" beneath "First Name" and insert another "Text Field". set up the properties as... TextField - give it the name "LastName". Char width - set it to 30 characters. Type - Check the "Single Line" radio button. Press the return key so that your cursor is underneath the Last Name line and click on the "Hidden Field" icon from the forms insert bar. You will see a little gold shield appear if you don't see it, go "Edit > Preferences > Invisible Elements" and put a tick in the checkbox next to "Hidden Form Fields ". Now click on the gold hidden field symbol to highlight it. Look in "Properties" Leave the name as HiddenField. You could name it anything you liked but as we are only using one hidden field here, we will leave it as is. Give it a value of "My Hidden Field" The text you just entered will be hidden from the visitor but will be transmitted with the rest of the form data when the submit button is clicked.

25 Talking about "Submit Buttons", let's put one in. Stick in some non breaking spaces so that your cursor lines up nicely under the text fields and Select the "Button" icon in the Forms insert bar. Leave the button name as "Submit" seeing as that's what it's going to be doing. The "Label" field determines what is written on the button. So if you were to change it to "Send" the button would have "Send" written on it. Make sure that "Action" is set to "Submit form". The "Reset Form" radio button changes the name on the button and its action to "Reset" so that clicking on it clears the form. "None" prevents the button from sending or resetting. This is used in situations where you want to assign some other action to the button using JavaScript or another scripting language. Save your work. Press F12 to preview the page in your browser. Enter a first name and a last name then hit the "Submit" button. You will probably get a couple of pop up messages telling you that an is being sent. Just say yes. Check your inbox and you will find that you have an with an attachment named "Postdata.att". Open the attachment using "Notepad" and you will see that the contents of the form has been sent to you. Not very pretty though is it? We will sort that out later.

26 JUMP MENU The Dreamweaver Jump Menu is a way of creating a list of links within a pull-down menu structure. Open a new HTML page and insert a Form (or use the form you created earlier). Then type "Select A Link" in between the form delimiters. If this is a new form, select the form and set up the Properties as follows... Form name = jump1 Method = Default Leave the Action field empty Place your cursor below the text you just entered and click on the Jump Menu button. The Insert Jump Menu window will open as shown below.

27 In the Text: box type Select A Link. This is the wording that will appear as the heading for our Jump Menu. In the When selected, go to URL: box just enter a hash mark #. This will just send the browser back to the page the jump menu is on should someone select our heading and not a link. Once you have entered the heading and the hash go click on the + button to add the next link. This is going to be a link to an external web site. I have chosen the BBC site. Text: = BBC When selected go to URL: = When linking to an external web site ALWAYS USE THE FULL ADDRESS including the bit, or your link will not work.

28 Hit the + button again and create another external link. This time to WebThang. Text: = Learn ICT When selected go to URL: = Hit the + button again. This time we will create a link to another page on our own web site. I have used the first page of this tutorial for this example. Text: = Page 1 of This Site (or whatever page you are linking to) When selected go to URL: = Hit the Browse button. Browse to the page you want to link to and select it. Hit OK That's it for the links. Hit the OK button on the Insert Jump Menu window. Look in the Properties panel. In the Initially selected box, highlight Select A Link. It will then appear as the heading for our Jump Menu. Save your work. Open the page in a browser and test your jump menu. There are a few other features you should know about OpenURL's in: - Your only choice here is Main window. If you had built your web site in Frames then you would be presented with a list of the Frames available into which you could load the new pages.

29 Menu name: - This is the name you give your Jump Menu. When Dreamweaver creates the first menu it calls it menu1. If you have more than one menu on a page they MUST be named differently, e.g. menu2, menu3, menu4 etc. If you don't do this, your menus will not work. Options: Insert go button after menu - This is supposed to insert a go button after the menu so that visitors have to select an item and then click the go button in order to open the new link. However, Macromedia forgot to delete the automatic jump function code when a go button is inserted. So no matter what happens, selecting an item sends the visitor off to the next page anyway, go button or no go button. There is a way around this at the bottom of the page, but only for the brave! Here is what that go button I was talking about looks like. Options: Select first item after URL change - In theory, after you have made your selection and gone to the new page, the menu will be reset to the first item (i.e. the heading). However, inserting it does not remove the automatic jump code. It just inserts both. In the code below, the Red code is the automatic jump menu code and the Blue code is the code for the go button. If we just want to use the go button we have to edit the code by changing the Red line below: <form name="form1" method="post" action=""> <select name="menu1" onchange="mm_jumpmenu('parent',this,0)"> <option value="#">select A Link</option> <option value=" <option value=" ICT</option> <option value="dmx04_4_1.asp">page 1 of This Web Site</option> </select> <input type="button" name="button1" value="go" onclick="mm_jumpmenugo('menu1','parent',0)"> </form> to this... <form name="form1" method="post" action=""> <select name="menu1"> <option value="#">select A Link</option> <option value=" <option value=" ICT </option> <option value="dmx04_4_1.asp">page 1 of This Web Site</option> </select> <input type="button" name="button1" value="go" onclick="mm_jumpmenugo('menu1','parent',0)"> </form> Leave the Blue line as it is.

30 BEHAVIOURS Should time allow, we will finish the course by looking at some of Dreamweaver s built-in Behaviours. These are chunks of code which provide some utilities which could prove useful. These include opening a pop-up web page, validating forms (ensuring that all fields are complete) and making roll-over images (an image which changes when the mouse pointer is over it).