This line of code tells the web browser to load a picture called climbing.jpg this is located inside of a folder called called pic1 . It also instructs the browser to display the picture with a width of 199 pixels, a height of 300 and a border of 2.
3. Look inside of the concept folder and find the climbing.jpg picture. See it? Create a new folder inside of concept called pic1 and drag climbing.jpg into it.
4. Return to the browser window that displays fixme.html (not the window that displays the source code but the other one) Click the refresh button. At this point the climbing.jpg picture should appear.
5. Return to the browser window that displays the source code and each segment of code that looks for a picture. You should find a total of nine pictures and four separate folders that they will need to be placed into. Where necessary, create folders, and place the appropriate pictures into the folders.
6. Finally, there is flash file (ending in swf) that displays a video that needs to be dealt with. Hint: the file that ends in flv goes into the flash/video folder.
7. Return to the browser and hit refresh/reload. Do you see everything? If so, congratulations you are done.
8. Still have time? Try to figure out how to swap a picture of yourself into the webpage!
9. More time? Login to mynmi.net with cyberduck (ask for password and username), make a new folder in the student folder based on your name, and put your work inside of it.
Introduction To Local And Internet File Management: Part 2
Almost everything that you produce in this course should ultimately make its way to the Internet where it will be accessible through a website that you will create. Having everything on the web makes it convenient for me to assess your work and you end up with a portfolio that you can use to show your work to other people, including prospective employers.
As a student who is taking this course in the 21st century, you live in an era when most computers are always connected to the Internet. Being constantly connected tends to blur the distinction between a local and a remote computer, and you may not be clear about the distinction between files stored on your computer and files placed somewhere else on a web server
Here is how it works.
In this course you will create files and folders on the local computer that is inches away from you and link them together into a local "website" that ONLY exists on YOUR computer.
Once everything works well on your local computer you will use a type of program known as an FTP client to move the files and folders to another computer in California that functions as a web server, that will make all of your work available to the wide wide world.
When you move files and folders to the web YOU HAVE TO CREATE THE SAME FILE AND FOLDER STRUCTURE THAT EXISTS ON YOUR LOCAL COMPUTER OR IT WILL NOT WORK!
Enough verbiage, let's get started.
Picture yourself: Here and on the web.
Turn on the isight camera on top of your computer by twisting the metal rim around the lens so that it is open and you can see the lens. Make sure that it is pointing at your face. (if the program Ichat launches, Commandq to make it go away.
Open the Photo Booth. Photo Booth, like most applications, is inside of your applications folder. To get to the applications folder, double click on Macintosh HD. On the left side of your screen you should see the list shown at right. Click on Applications.
Alternatively, you can use Spotlight, apples search feature, by clicking on the magnifying glass in the upper right portion of the screen. Start typing in Photo Booth and click on it when it appears.
Once Photo Booth is launched you should see yourself on the screen.
You can take a picture of yourself now or click effects to if you want to shoot something funky. I dont care how funky as long as the picture is recognizable as you. Be advised however, that you and other students may use this picture several times during the semester!
To find your picture go to the Photo Booth folder inside of your images folder (hint: use spotlight to find the folder by typing Photo Booth again and this time click on the Photo Booth folder)
If you like the picture rename it after yourself (use your full name with an underscore between first and last as in emuel_aldridge) and be sure to add the .jpg suffix.
Duck (ftp) your picture to the web.
Earlier I used the intimidating term "ftp client" to describe the class of programs that are used to move content from your computer to your website. The ftp client we are going to use has the very un-intimidating name of Cyberduck. In spite of the funny name Cyberduck works about as well as any other ftp client and it's free, although it will occasionally quack and ask you to donate money to its creator.
1. Use spotlight to locate cyberduck and start it up. Click "New Connection".
2. Type (a) mynmi.net into the server field;
(b) mystudent (or whatever your instructor tells you to) into the username field; and
(c) jefflunn (or whatever your instructor tells you to) into the password field.
3. Click Connect.
4. Welcome to California. Once you are connected, you should see a screen that looks like the one at right. mynmi.net is the domain name that will hold your website for this class. Since mynmi.net is hosted on a webserver in California, anything you put there literally crosses the continent.
5. Open mynmi.net and inside you will find a folder named student.
6. Open student and inside there should be additional folders with names that roughly correspond to the time of your class: 9am, 10am, 11am, or whatever.
7. Open the folder that corresponds to your class time and drag the picture of yourself that you saved onto your desktop into it.
8. Using your web-browser navigate to your new folder, starting with mynmi.net/student (the rest should be obvious). Ultimately you should end up in a folder with a path name like HYPERLINK "http://www.mynmi.net/student/10am/" http://www.mynmi.net/student/10am/. If everything is working properly your picture should be inside. Congratulations you are now on the Internet. Click on the picture to see yourself.
9. Copy the address of your picture from the browser's address bar (something like HYPERLINK "http://www.mynmi.net/student/10am/emuel.jpg" http://www.mynmi.net/student/10am/emuel.jpg) and send it to your mom.
Introduction to Dreamweaver.
When the WWW first arose back in the mid-nineties most people (including myself) produced content for the web by producing and editing what are called html-tags (html stands for hypertext markup language). One of the reasons that the www grew so quickly is that any text editor such as Windows notepad can be used for html editing and it really isn't that hard to produce a basic webpage. It wasn't long, however, before web designers began to produce pages with fancy formatting and to tie them together into huge complex websites that were challenging to maintain and update. As web development became more complex, software tools were developed to make the job easier and these days there are lots of different ways to build a website. The most popular, and arguably the best, of these tools is called Dreamweaver, which is the program that you are about to be introduced to.
Dreamweaver's Site Tool
The first step in building a website is with Dreamweaver is to decide where on the local computer to build and store it. In this lesson you will create the location on your computer where you will store all of the work that you will later upload to the Internet. You will also be introduced to Dreamweaver's site tool and file panel. The purpose of both of these tools is to help you manage the folders and files that go into making a website.
If you haven't already, create a new folder inside of your Documents folder called mysite. Start Dreamweaver
Use finder (commandkey +f) or look inside of the applications folder in the Adobe Dreamweaver CS4 folder. Open Dreamweaver.
The third to the last menu at top is named Site. Click on Site and select New Site.
A site definition box will pop up and ask you a series of questions. Click the Basic tab and answer the questions in the following manner:
Question: What would like to name your site?
Answer: Name it after yourself, your dog, your little sister, whatever makes sense to you.
Question: What is the Http:// address (URL) of your site?
Answer: Leave this one blank.
Question: Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP?
Answer: No, I do not want to use a server technology.
Question: How do you want to work with your files during development?
Answer: Edit local copies on my machine
Question: Where on your computer do you want to store your files?
Answer: Browse to your mysite folder and select it. (this is important to get right, so ask for help if you need it).
Question: How do you connect to your remote server?
Answer: Select None from the drop down list.
Time to play by starting your homepage. (1) Create a new basic html file (File New) and save it into your mysite folder as index.html.
a. Using the dropdown menu at the top of the page choose the "classic view" (you can change this later if you prefer another view).
Go to the Window menu and make sure that Insert and Properties are checked. Next, go to the View menu and make sure that document toolbar is also checked. Make sure that you are working in the Design View.
Next, give your document a title (in the document toolbar where it currently says Untitled Document). Since you are creating your home page for this course you may want to name it after yourself.
4. Click inside of the work area and type your name.
Select the text that you typed. Using the property inspector (see below) change the font to one of the headings. We will learn about more advanced text formatting options later.
6. Take a picture of your self with photobooth, find the picture and drag it into your mysite folder.
7. Now use your file browser (shown at right) to drag YOUR picture into the document. The file browser is a great tool for organizing and utilizing all of the different files that make up a website. Whenever you add files of any sort to a folder that is designated by Dreamweaver as part of a website, the file browser finds them and makes them easily accessible for use. 8. Type a couple of sentences about yourself Drag the picture around on the page, placing it in the middle of the text. Watch what happens. Click on the picture. Using the property inspector, experiment with different alignments. Click on the picture again. Add Vertical space to the picture by typing in 50 (V space). Do the same with Horizontal space. Now take the vertical and horizantal space away. Play around with the various picture options until you find settings that you like.
Now it's time to play around with fonts and to start learning about an important feature of web development called CSS (Cascading Style Sheets). CSS has evolved into the primary formatting tool for web developers and we will spend LOTS of time in subsequent lessons learning about how CSS works. For now, let's use CSS to format your text.
Double click on the CSS styles tab in the upper right corner of the screen.
Now click on the + sign to create a new CSS rule.
Name your CSS rule as "Bigtext" and click OK.
Now choose a font family (your choice), set the font size to 36 and click OK.
Select some text and use the Class selector on your property inspector to apply the Bigtext CSS rule to the text. Did it get bigger? Good!
Create another CSS rule with different text characteristics and apply it to additional text so that you have two separate text blocks with distinct formatting.
Use these new-found tools to make your page beautiful (create as many new css rules as you like).
Once you are happy with the way that your page looks, save it (it should already be named index.html). Now preview the file by clicking on the globe on the document toolbar.
Congratulations, you have created your homepage. You will be making lots of changes to this page as the course progresses.
If your web account is already set up (it may not be) upload the index.html file and the class_images folder into your website location. To do this, open Cyberduck and click "New Connection."
(a) Type mynmi.net into the server field; (b) your username into the username field; and (c) your new password into the password field.
(d) Click Connect.
21. Once you are connected, you should see a screen that looks like the one at right. mynmi.net is the domain name that will hold your website for this class.
22. Open mynmi.net and inside you will find a folder with your username such as ealdridge. This folder is web active and anything you put in there is open to the world so use discretion.
23. Drag the index.html file and the class_images folder into the folder with your username and then check it out with your web browser. The url will be something like HYPERLINK "http://mynmi.net/student/ealdridge" http://mynmi.net/student/ealdridge
24. Before you leave Cyberduck set a bookmark so that in the future you won't have to type your username and password.
Introduction to Tables with Dreamweaver
1. Start Dreamweaver and open the Insert Toolbar. Choose the Common view.
2. Click on the table tool and create a table with 4 columns, 4 rows with the following characteristics: (1) 80% width (2) 0 cellpadding (3) 0 cell spacing (4) 0 border
Type some gibberish into each of the 16 cells just to have something there to play with. Select the entire table by clicking on the outside edge. Three little squares should appear on the table border when it is successfully selected.
Once the table is selected, look at the property inspector and take note of the information that is presented there about your table, especially width (W). The width of tables can be set to pixels (an absolute measure) or % (a relative measure determined by the width of the browser window).
Use your mouse to make your table wider and taller. Now look at the property inspector and see if anything has changed.
Now, type 15 into the cellpad window and press enter. Your cells are now padded and the text should be much further inward. Type 0 into the cellpad window and 15 into the Cellspace window and note the effect. Now play around a little with the border feature.
Practice merging cells by selecting two or more cells and using the cell tool to join them together.
Now use the cell tool to split some cells.
Time to put a border on your table. Create a new CSS rule, name it tableborder and click OK. Click on Border and set Style, Width, and Color to your specifications as shown at right.
Select your table and apply the tableborder rule to it. Your table should now have a border with the specifications that you chose.
Create a new css rule using the Background tab. Select a color of your choice and apply the color to one of your table cells.
Do the same with a new CSS rule and another table cell.
Now for the challenge (or who knows, maybe it will be easy?). Create a table that looks as much as possible like the one below. NOTE: You will have to navigate to HYPERLINK "http://mynmi.net/ealdridge/table.jpg" http://mynmi.net/ealdridge/table.jpg to see the table in its full splendor. Be sure that you insert an image into the bottom middle cell. It doesn't have to be a badge but if you like the badge that I used try the key combination of Command, Shift, 4.
More Tablework. Make a page of your classmates.
Create a new html document. Next, click on the table tool (from the insert toolbar or menu) and create a table with 4 columns, 8 rows with the following characteristics: (1) 100% width (2) 0 cellpadding (3) 0 cell spacing (4) 1 border.
Insert all of the class pictures into alternating rows of the table starting with the second row. Use the first row to type in the names of your classmates. When you are finished, your table should look something like the one below. Save the document as classmates.html and test it.
Create an link from index.html to classmates.html.
Creating a link in this case involves typing in the name of the link (the text that your user will actually see as in "click here to see all of the attractive people who share this class with me)
highlighting the text with your mouse.
Using the property inspector to target the file that you are linking to. This can be accomplished by clicking on the folder that appears in the property inspector after highlighting text or by using the the pointer (shown at right).
Test it. If it works upload both files to your website. Go to your website HYPERLINK "http://mynmi.net/student/yourname" http://mynmi.net/student/yourname and test to see what happens. Did your picture and your classmate's pictures show up? No? Did you remember to upload your pictures?
More time? Try making a nested table. Nested tables are sometimes used by web designers to have greater control over placement of pictures and text. In spite of the strange name, a nested table is simply a table that has been created inside of another table. The purpose of a nested table is to visually break a big table cell into smaller component cells. To see how a nested table is created complete the following steps.
Make a new table with at least two cells.
Make a brand new table (with lots of cells so that you see the effect) inside one of the existing table cells that you just made. Set the border of this second table to 0.
Type some text into each cell of the table. Preview the document to see how it looks in the browser. This lesson is oversimplified but don't forget the nested table technique. It may come in handy later.
Intra-document links and image maps. Naming the class.
This lesson introduces two basic tools- internal links and image maps- that have the attractive characteristic of being both useful and very easy to learn.
A. Internal Links: As you know, web pages are full of links. Most times those links take you to external documents that may take a few seconds to load into your browser, but you can also create internal links within documents that take no time at all to load. To make internal links you first must insert a marker (called a named anchor) inside of your document so that you have something to link to. Internal links are easy to implement but can be challenging to implement effectively, so that it makes sense to you users. The biggest issue is that when you link within a small document, it may not be clear to the user where the link has taken him or her because the information associated with another link is also visible. So that this statement will make sense go to:
http://normaltown.net/resources/Internal_demo1.htm and test the links. Then, go to:
HYPERLINK "http://normaltown.net/resources/Internal_demo2.htm" http://normaltown.net/resources/Internal_demo2.htm and notice the difference. You are about to learn what causes this difference
B. Image Maps: Image maps are typically useful when you have a complex image, such as a group picture or a map, with features that you want to highlight by linking to them.
Enough Talk.
Look on your desktop for a picture called classmembers.jpg and drag it into your mysite/images folder. (make the images folder if you don't have it) If you don't have a picture called classmembers.jpg let me know. We may need to take a class picture!
Create a new html file, name it wholeclass.htm and save it into your mysite folder.
Insert classmembers.jpg into your document.
Insert a table with one row, one column, and a border of 0 below the classmembers.jpg image.
Click inside the table's cell and give it a height (H) of 966. (ask me why if it still doesn't make sense)
Click below the table and insert a named anchor (from the Insert menu). Name it after one of your class members (make sure you have no spaces in this name as in john_smith instead of john smith. Next to your anchor, which will look like this graphic symbol, type the class member's name as in: John Smith
Now click on the classmembers picture. Use the Hotspot tool to draw a circle on someone's head. Type # next to the name you gave to the anchor in step 6 (as in #john_smith ) into the Link window.
Test your file. If it worked, repeat the process with all of the other class members. Be sure to add tables between each person's name and anchor (remember, you can copy and paste your table)
Link to this project from your hompage and upload everything to your website, including the picture and your updated homepage. Test it. Does it work? Keep trying till it does.
Using frames to target websites
Create a new html document.
Use the layout menu of the insert bar to create a Top Frame Frameset.
Go to Window Frames (or press f2) to open the View Frames Panel. Click on the parts of the frame inspector and look at the property menu. Note that both parts of the frameset have a name.
Click Save All. Save All will prompt you to save three separate files. The first file will be your frameset. Frameset files provide the structure for a framed webpage by providing a place to display more than one html or image file at the same time. Name this first file frameset_for_class_picture.htm and save it into a new folder called frames.
The second prompt will give you a visual reference in your document that will indicate which portion of the frame you are saving. If the bottom portion of your document is highlighted name it bottom.html and save it into the frames folder, otherwise name it top.html. Repeat the process with the other file. Now browse to the frames folder and look inside. You should see the three files that you just created.
Click inside the lower frame and insert the picture of the entire class (this file by now should be somewhere inside of your mysite folder. If not, ask me to send you a copy).
Click on the class picture and use the Hotspot tool to draw a circle a circle or rectangle around someone.
Link to the website of each person by typing in http://mynmi.net/student// theperson's first initial and last name as in in HYPERLINK "http://mynmi.net/student/ealdridge" http://mynmi.net/student/ealdridge. Set the target to topframe. It is important to set the target. Otherwise the page that you link to will open in the same frame as the link which can result in a weird experience for the visitors to your website.
Save All and test it! If you did it right all of the websites should open in the top frame. Chances are though, that they don't display very well because the top frame is too small. Go to View - Visual Aids and make sure that Frame Borders is checked. Next, use the bar that divides the upper and lower frames to make the top frame larger. Save all and test again.
Still can't see everything? From the frames panel click on the topframe and set scroll to yes. Test again.
Once you have finished create a link from your homepage to frameset_for_class_picture.htm. Save your homepage and upload it to your website. Test the link. Forget something? Now upload the frames folder and test again.
Finished? Try something else. Open up the file that you created earlier called bottom.htm. Bottom.htm should contain the class picture with all of the hotspots that you just created. Resave bottom.htm as open_in_new_window.htm. Click on each hotspot and reset the target to blank. Now save and test. Changing a link to blank tells your browser that everytime you click a link a new page should open. If it works properly, create a new link from your homepage to open_in_new_window.htm and upload both to your website.
Quick and Dirty Website Lesson Using Framesets
Although website development is often done in a slow, elegant manner involving multiple consultations with clients over weeks and months, there are occasions that call for expediency and speed. After all, how long do you really want to spend setting up a free website for your friend's Christmas tree farm or your niece's 11th birthday party? Although framesets present printing and (in some cases) navigational problems that may preclude their use in a big important project, they may be just the solution you need for that website that you really don't want to spend a lot of time on. Hence, today's lesson is dedicated to the slacker who lurks somewhere inside of the best of us.
Create your frameset. There are several ways to create a frameset using Dreamweaver but remember, we are focusing on expedience, so for today's lesson we will use the EASIEST way. Create a new html page, set the insert toolbar to the layout menu, and pick out one of those nice readymade framesets that Dreamweaver provides. For this lesson let's use the Top and Nested Left Frames, the next to the last frameset in the menu. The appeal of this particular frameset is that it provides a nice upper frame for a title and banner and a left frame for navigation.
Once your frameset is complete, quickly choose a background color for the upper frame, which will be your banner. Do the same for the left frame, which will be your links page.
Copy the framelesson folder into your mysite folder. If this folder is not already on your desktop download it from HYPERLINK "http://mynmi.net/ealdridge" http://mynmi.net/ealdridge/framelesson.zip . From Dreamweaver "Save Frameset" into the framelesson folder as index.htm. Click inside each frame and "Save Frame." (FYI: when you create a frameset Dreamweaver automatically creates html files for each frame. When you "save frame" what you are really doing is saving the individual html files that were created by Dreamweaver to fill the frames.) Give the frame files representative names that make sense to you such as left_nav.htm, upper_banner.htm, innercontent.htm, etc.
Make A WEBSITE! Yes, your mission is to make an instant Christmas Tree farm website. The framelesson folder contains a folder called treepix with multiple pictures of several different species of Christmas trees. Each tree is represented by photos of different sizes, and there is also a twig photo of each species. Your job is to create (a) an intro page that says something about your Christmas Tree farm; (b) a navigational page (in the left frame) that links to the intro page and seven separate pages for each of the seven types of Christmas trees; (c) a banner page in the top frame with the name of your Christmas tree farm; (d) a separate page for each of the seven tree types, containing three photos of each tree, a title, and any other text that you have time to put in.
Remember, when you link from the left frame to one of the html files that contain tree pictures, you MUST also use the Target feature of the property menu so that the new html file opens in the correct frame (probably called the Mainframe).
Make it beautiful. Well, do the best you can anyway. Your best strategy for actually pulling this assignment off in the ridiculously short amount of time you have to do it, is to "right click" on the empty tree1.htm file that is provided for you inside of the framelesson folder and copy it. Then paste the tree1.htm file into the same framelesson folder seven times (commandv) and rename each file to reflect the species of Christmas tree that it will be displaying (spruce.htm, whitepine.htm, etc.- look at the images names inside of the treeepix folder to find appropriate names). After renaming, create links in the left side of the frameset to each file. Next, insert the pictures into the appropriate files and save them. At this point everything should at least work. Test with your browser and find out. Once everything is correctly linked, spend the remainder of class time making it all look as good as possible (you may find it useful to employ tables for displaying pictures).
Forms Intro
This lesson utilizes a cgi script that you will modify to send the contents of a form to your email account. What is a cgi script you may ask? A cgi script is a small program that is designed to run on a webserver.
In order to modify a cgi script you have to open it in a text editor, edit it, and then re-save it as ascii text.
Move the file called nmiclass.cgi to your mysite folder.
Open nmiclass.cgi with textedit and make the following modifications being very careful not to change anything such as quotations marks that could affect the coding.
substitute your email address for mine, Do NOT use your university email address or yahoo mail unless you have LOTS of patience. Cgi email works better with Google or Hotmail.
Modify the $backurl so that it points to your homepage.
Modify the Follow Up html at the bottom of the page to whatever you want it to say.
Save the file as yourname.cgi (for example: emuelaldridge.cgi).
This will become your very own cgi mailer that you can use to send form-based info to your email address.
Send the file to your instructor. Ask him or her for instructions on how to send the file.
Your instructor will move your cgi file to a location on the WWW where it should work. One of the things your instructor will have to do is to "chmod" your file by using cyberduck to set the files permissions to execute. To chmod a file with Cyberduck, right click it and change the settings to match those shown at right. Although YOU don't have to complete this step at this point, it is worth knowing how just in case you want to set up your own cgi file sometime.
Now your instructor will provide you with the URL to test your file. Test the file by clicking on it to see if you get an email. No email? Check your spam/junkmail folder to see if it got screened out.
Create a new html document. Save it into your mysite folder into a folder named formlesson
Open the insert toolbar to the forms menu. Open the property inspector.
Familiarize yourself with the forms menu by moving your mouse slowly over each element in the menu until a box balloon appears with the name of the item.
The first item on the left is the icon that creates the form itself. Click this item to insert a form in your document. Your property inspector should now be showing form options as at right. Type the following URL into the action field: http://emuel.com/cgi/yourname.cgi (not literally yourname.cgi, but the cgi file that you just created) The URL that you just typed leads to the cgi script that you just uploaded.
Click inside of the form (indicated by dotted red lines. If you dont see red lines refer to the view visual aids menu).
Click on the third to the last item in the toolbar to insert a submit button into the field. Make sure submit is checked on the property inspector. Save your form and test it with your browser. Click the submit button and check your email. If everything worked as planned you should receive an email from the form that you just clicked. Sometimes it takes a while for the email to come through and some times (especially with UGA accounts) the email ends up in the spam bin. If you don't get an email fairly quickly, check the spam bin.
Now, create a table inside of the form with 2 columns and 12 rows. On the left side of the table in the first row type Name. On the right side insert a one-line text field (second element on the tool bar). Refer to your property inspector and name the text field name (Under the heading Textfield).
In the next row type email in the left column and insert a new text field into the right column. Name it email. In the third row type the word comments on the left side and insert a textarea (also known as a multi-line text field) at right. Name it (are you ready?) comments. Make sure that you select the virtual setting for wrap, which insures that your users long, multi-line reply will be visible while he or she is writing it and will also arrive to you in the ideal format.
Save the document and test it again by typing information into the various text fields and (once again) clicking the submit button. Check your email again to see the output.
Now its time for some creativity. On the left side of your table, enter some text that reflects a simple yes-no choice such as Fries or Would you like a visit from our salesman Bruno? On the right side insert a check box (this one should be obvious). Give the check box a name related to the choice that you just created (Fries, Brunovisit) and and a checked value such as yes, no, etc. that makes sense in terms of the choice. Save, test, check email (STCE). Did the input that you received in the email make sense in terms of the choices that you made for check box name and checked value? If not, change the name and checked value, and STCE.
Time to create a multiple choice question. On the left side of the table type in a question. On the right side insert a radio button. Name the radio button question1 and give it a checked value of 1. Click to the right of the radio button to deselect it, press your space bar once and, type in the first choice for your question
Shift Return insert a new line and put in a new radio button. Name IT question1 and give it a checked value of 2. Repeat the process until you have four possible answer/choices. Only one of the choices should be the correct answer. Click on the radio button that corresponds to the correct answer and add text to the checked value to indicate that it is correct (as in 3-correct) .
Repeat step 11 with a new question answer set, but this time insert a radio group and name the set of radio buttons question2. STCE.
More Fun with Forms
Now let's visit some additional form elements. The first, called the jump menu, can be very useful when you want to have lots of links on a page but still preserve space; the other, the image field, falls more into the "just for fun" category.
1. Let's begin with the jump menu, which allows you to insert multiple links into a dropdown menu that takes only one line of space on your webpage. If it is not already open, open the forms document that you created previously. Next, open the forms menu of the insert toolbar and click . The Insert Jump menu will appear. Your task is to use this menu to create 4 links. For the first link, browse to a document in your work folder, and give the link a representative name. Next, link to three websites of your choice by clicking on the + button and entering the appropriate information. Remember, sometimes it is easier to browse to a website, copy the URL, and paste it into your link than it is to type the URL. Once you have four links, check the "insert go button after menu" checkbox and click OK. Save it and test it. Neat?
2. Now that your jump menu is working it is time to insert an image field. All an image field does is provide a colorful alternative to your submit button. Find or create a small image (one of your rollover buttons, perhaps?) and insert it with the image field button. Save and test.
Stylesheets: Lesson #1
Stylesheets are a powerful formatting tool for web developers with far too many capabilities to talk about all of them here. One of the best things about stylesheets is the ability to attach a web document to a pre-existing group of styles that can instantly offer advanced formatting options. Another nice capability is that once you have applied the same style to multiple places in a document, all you have to do to change the look of your document is change the style. At that point, all instances of that style are automatically updated. Confusing? Let's go styling and find out.
Download HYPERLINK "http://www.nmi.uga.edu/ealdridge/stylesheet_example.zip" http://mynmi.net/ealdridge/stylesheet_example.zip and unzip it by doubleclicking. Once the unzipped stylesheet_example folder appears on your desktop, copy it into your mysite folder.
Look inside of the stylesheet_example folder and open example_page.htm with Dreamweaver.
Open the CSS Styles Panel (it may already be open)
From the CSS Panel, click on the chainlink to attach a style sheet, select "link", browse to the stylesheet_example folder, and attach the file named stylesheet.css.
Make sure that the triangle in the stylesheet panel is pointing downward so that all styles are visible. Take a look at the style names. Select some text and click on the style menu in your property inspector. Compare the names of the styles with the styles in the style panel. They should have the same names.
Now the fun starts. Select the text "Style 1. Nmix 4110" and (from the property inspector), apply Style 1 to it. Do the same with "Style 2. Nmix 4110" etc. until you have applied all five styles to a different text block.
Now that you have applied the styles, click on the pencil tool at the bottom of the CSS window and edit each style by changing colors, sizes, letter spacing, etc.
Now create your very own new style by clicking on the plus sign. Create a few more and experiment.
When you are done be sure and save the stylesheet. Close example_page.htm.
Create a new html file and attach the same stylesheet. Add some text and apply the different styles to it. Now change each of these styles. Change them radically!
Reopen example_page.htm. Does it look different?
Drag the file named stylesheet.css out of the stylesheet_example folder to the desktop. Now look at your example page. All of those styles should disappear. Put stylesheet.css back into the stylesheet_example folder. Did the styles reappear?
Once you have a truly funky looking document, save it and link it to to your homepage. Upload everything to your website so that I can see it. Be sure and upload stylesheet.css into the same relative location as example.htm so that web browsers can find it!
CSS Background Lesson
By now I may have put a folder called stylesheet_example2 on your desktop. If not, you can download it from HYPERLINK "http://www.nmi.uga.edu/ealdridge/stylesheet_example2.zip" http://mynmi.net/ealdridge/stylesheet_example2.zip. Once you have this folder, copy it into your 4110/mysite folder.
Open example_page.htm inside of the stylesheet_example2 folder, and open the stylesheet panel if it is not already open. Click on the plus sign in the stylesheet panel to create a new style. Name the style ".background", select "This document only", and click OK. A style definition window will open. Select Background as the category.
From the Background Image Menu, browse to the pix folder and select background.gif. Select Repeat and click OK.
Now, type some text in the top left corner of your document. Select the text and use the property inspector to select the .background style that you just created. The style should now be applied to your entire document. To be sure, click the code button and locate the body tag I n your html code. You should see some code that looks like this: . If your code looks different and the background style has not applied to the entire page, try modifying your code.
Return to design view and save example_page.htm.
Time for some right brain activity. Open your file inspector (window files) if it is not already open. Use the file inspector to locate the background.gif file inside of stylesheet_example2/pix. Doubleclick background.gif. It should open in Fireworks automatically and show you a long skinny image. That image forms the background of your page. You may want to zoom in some with the magnifying glass in order to see the image better.
Use the paintbrush tool to change the color of the background.gif file. Save the file (as a gif if fireworks asks).
Reopen example_page.htm and check out the changes. Alter the colors on background.gif again, save it and take another look at example_page.htm.
Time to turn the artist inside of you loose! Use Fireworks to create a brand new background image that is 40 pixels high and 1500 pixels wide. Paint this one with with the colors of your choice; as many colors as you want. Along the way, experiment with different brush settings to see what effect they have on the image (you will need to have the property inspector open and the brush selected). Save this image inside of the pix folder as background2.
Return to example_page.htm and create a new style called .background2. Repeat steps 3-5 with your new background image (background2.gif). Feel free to play and experiment with your background for a while.
More Css. Lists
Now let's focus on a new aspect of css styles: lists. Create a new style called .list. Click on the list category and select square for the type, outside for the position. Click Ok. Click inside of your document and type some text. Press return and type some more text. Now select the text that you typed and click the bullets tab in the property inspector. Next apply the list style to the same text. You should see the original round bullets change to squares.
Edit the .list style and experiment with the other type settings of circle or disc. Each time you apply a different setting, the bullets should also change.
Edit the .list style one more time and click browse for image. Select the image called eye.gif inside of the pix folder. Apply it and watch what happens. Now do the same with the image named monkey.gif.
Return to Fireworks and create your very own bullet (take a picture of your self with quicktime and the isight if you want). Save your new bullet inside of the pix folder and try it out by using it as the image for the .list style.
More CSS: Changing the look of text-based links. Rollover effects.
Later on we will learn how to use image substitution for fancy rollover effects with graphics. This particular lesson shows how to use CSS to add rollover effects directly to text.
Create a brand new html document named css_rollover.html.
For starters lets take a look at the easiest, but necessarily the best, way to create textual rollover links. Go to modify Page Properties and select Links. A menu will appear with several options for controlling the appearance of your pages links including changing the color of a link when the users mouse rolls over it. This menu works and actually generates CSS code, but only works for the individual document. Another limitation is that this menu is limited and does not offer additional options such as changing the font of your links.
These limitations do not exist when you create the CSS styles yourself. Heres how.
Create a new style by clicking on the plus sign.
When the New CSS Rule window appears select Advanced as shown at right.
Use the Selector to choose a:link. Click OK and save the stylesheet as rollovers.css.
Once you save rollovers.css the window shown at left should appear. Choose the Font, Size, and Weight that you want to apply to all of your links. This will set the look of your links before anyone clicks on them. Note that you have LOTS of options such as color, ALL CAPS, blink, underline, none, etc.
Repeat steps 2 and 3 to create new styles for a:visited, a:hover, and a:active. (a:visited defines how a link appears after it has been clicked, and a:hover sets the rollover effect. a:active defines the look while the link is being clicked!
***CSS can be very picky and IT IS VERY IMPORTANT TO DO THESE STEPS IN THE PROPER ORDER OF (1) a:link (2) a:visited (3) a:hover and (4) a:active.
Create some links and test it out. Did it work? If so, change it and experiment with different fonts, sizes and effects. Once you have the look that you like be sure that the rollover.css stylesheet is saved.
Congratulations, you have created a set of rollover effects that you can use in any future webpage just by attaching rollover.css (or by pasting the styles from rollover.css into another css document and attaching it).
Laying out a website with Div tags and CSS.
In the early days of web design the options for making a website look the way you wanted it to were limited. Most developers, including me, became very familiar with the table tool but there has always been a demand among designer types for more flexible options. Over time, css used in conjunction with div tags has become an increasingly common way to lay out websites. Even though I find that I can do almost anything I want with tables, you as future web developers are going to encounter css and div tags a lot so you need to become familiar with how they work.
Download div_layout.zip from HYPERLINK "http://mynmi.net/ealdridge" http://mynmi.net/ealdridge. Unzip it an drag the div_layout folder into your mysite folder
Create a new web page and save it inside div_layout as layout.html.
Find the rollovers.css file that you created in the previous lesson and copy it into div_layout.
Create a new style by clicking on the plus sign. When the New CSS Rule window appears select Advanced and create a new style called #allcontent. This style, as its name suggests, will define the div tag that contains all of your content.
Be sure and add the # sign to the style name. The purpose of adding # to the style name is to create a style than can only be used one time per document.
Click OK and save the stylesheet as div_layout.css.
Once the stylesheet is saved click on the box category and set the characteristics shown at right. In case you are wondering, setting the right and left margins to auto centers the div tag.
Click on the background category and set the background image to pix/bkg.gif.
Now that you have made this style it is time to apply it to a div tag and find out what it does. Using the insert toolbar click insert div tag (from either the common or layout view). When the Insert Div Tag menu appears select ID- allcontent, and click OK. If everything worked properly you should have a totally new two-columned look in the middle of your page. FYI, the columns are actually made up of a tiled image called bkg.gif that you set as the background image in the previous step. Later you may want to change the look of background by opening bkg.gif in fireworks or photoshop and change its colors.
Click on "Split " so that you can see your page's source and take a look at the code that you created by inserting the div tag and attaching it to the all content style. It should look like the code shown below.
The part that says o `o ao u 6u 7u 8u }v v K{ L{ t{ u{ v{ { { } } ിxqfx]x ho hE 0J j ? hE U h hE j h hE Uh( hE H*)j h( hE UaJ mH nH sH tH hfY0 hE 0J j> hE Uj h} hE U h} hE #j hE UaJ mH nH sH tH h( hE 5 h( hE h( hE 5B*ph h( hE B*ph $u 6u 7u w w !z z } y z { | } ~ h ۆ q A
& F gdE
& F gdE
& F
& F
gdE $a$gdE Z [ < = $ % u / 0 1 b c {pg hk hE 0J jd hE U hVf hE j hVf hE U hQ hE hQ hE 5j:_ hE U)j h K hE UaJ mH nH sH tH h K hE j? h& hE Uh& hE 6)j h& hE UaJ mH nH sH tH h& hE h& hE 5h K hE 5 %A
Z ; < o W m
Q R $a$gdE gdE
& F gdE R t u ߣ I } ~ ' ( f g I J U V L M
& F
gdE
& F
h^hgdE $h^ha$gdE gdE $ H I { | } ~ ( ) f g R S T ӭ I Ǯ ڮ ۮ 6 q ҿҷttlldtt jqf hE Uh[ hE 5h[ hE B*ph h[ hE 0J je hE Uj h[ hE U h[ hE #j hE UaJ mH nH sH tH h( hE 5hQ hE 9hQ hE B*ph hQ hE hQ hE aJ mH nH sH tH )j hQ hE UaJ mH nH sH tH & { | έ ' ñ X * ;
& F; gdE $a$gdE
& F gdE
$h@& ^ha$gdE
& F
& F
gdE gdE ӳ ( * ; k l m g h Ⱦ ɾ ` a b - . ññÚÓynyeyaVOV h_8 hE h_8 hE B*ph hE h =3 hE 0J jA hE Uj hu hE Uh_8 hE 5 h( hE hu hE -j h5P hE CJ UaJ mH nH sH tH #j hE UaJ mH nH sH tH h5P hE CJ h5P hE 5CJ hQ hE hu hE 5 h[ hE h[ hE B*ph hE B*ph k l f g Ⱦ P # a o
& F= gdE $a$gdE gdE
& F< gdE
& F< gdE
& F; gdE R * z W p # ^ F }
& F> gdE
& F= gdE
& F= gdE ' d e ( ) p q r m ~ 6 W _ i c d + տյܜܕ||ss h# hE CJ
hE CJ hR hE CJ hR hE 5CJ h K hE !hbA hE B*CJ OJ QJ ph hn hE 6hn hE 5CJ j hn hE Uj hn hE U hn hE hu hE hE #j hE UaJ mH nH sH tH h_8 hE *} I
+
F G
& F+ gdE gdE $a$gdE
& F= gdE
& F= gdE d .
b 8 9
& F gdE
gdE
& F+ gdE
& F+ gdE + - 7 8 u v ߾߅piaiapiaiaiV j hlU hE UhlU hE 5 hlU hE )j hlU hE UaJ mH nH sH tH h( hE hE 0J CJ h|e hE 0J CJ jQ h\l hE CJ Uh hE CJ
hE CJ j hE CJ U *hR hE CJ j hR hE CJ UhR hE CJ -j hR hE CJ UaJ mH nH sH tH ! " 1 p r
, - O u w $ & f h o ' ( 0
Ľ j hH hE UhH hE B*ph )j hH hE UaJ mH nH sH tH hH hE hH hE 5 h( hE hlU hE aJ )j hlU hE UaJ mH nH sH tH hlU hE 5 hlU hE 9 r
- w & h ' *
& F0 ]gdE ]gdE gdE
& F
& F gdE
D
! c ? $ G H
& F1 ]gdE ]gdE
& F0 ]gdE
.
/
! ( H J K L l m $ H = > ? | n δp^ά #j hE UaJ mH nH sH tH )j hH hE UaJ mH nH sH tH h|e hE 0J $j h\l hE B*Uph h. hE B*ph hE B*ph j hE B*Uph hH hE 5B*ph hH hE B*ph hH hE hH hE 0J j hH hE Uj hE U ! = > : & s! ! " $ {$ $ m& & H' {' ' ( ) * * ,
& F3 gdE gdE $a$gdE ]gdE
& F2 ]gdE n o : $ & ' "
" U" Y" " " " nfTfMBM hn hE B* ph hn hE #j hE UaJ mH nH sH tH hn hE 5,j hyVd hE 5UaJ mH nH sH tH hyVd hE hyVd hE 5 h( hE hH hE B*ph h6 hE B*ph j h6 hE B*Uph hE B*ph hfY0 hE 0J $j hfY0 hE B*Uph h} hE B*ph j h} hE B*Uph " " 0# K# M# $ $ $ $ T$ W$ y$ m& n& & & ' ' ^( v( #. . . . . . / / L/ M/ s/ t/ u/ / / / / 0 0
0 %0 ިޤ~s~h~ j hE UjF hE Uh[I hE 0J j hE U h>hv hE j h>hv hE UhE hyVd hE B*OJ QJ ph )j hyVd hE UaJ mH nH sH tH #j hE UaJ mH nH sH tH hyVd hE hE B* ph hn hE hn hE B* ph ( , 7- #. $. I0 J0 =1 >1 ?1 \1 1 N2 n2 2 3 4 S5 6 6 9 : : > > > ? h^hgdE
& F gdE gdE
& F3
& F3 gdE %0 &0 <1 =1 \1 1 1 n2 o2 2 2 3 3 S5 T5 6 6 8 8 : : ]: ^: : : _< < < < > > > ?
A A B B G ڼڱڼڼڠڕڠڊumfufuf h
hE h
hE 5)j h
hE UaJ mH nH sH tH j@
h` hE Uj h` hE U j h` hE UmH nH u j h` hE U%j h` hE UmH nH sH tH h` hE B*ph h` hE h` hE 5 hyVd hE hE j h>hv hE U %? ? `? a? ?
A ^A B B B .C D D D E ZF G G G DG EG G ,H .H H I
& F gdE $a$gdE
& F gdE gdE h^hgdE G BG ,H -H H H 5L 6L T T U U U U U U U V V W W W W W W X Y 얦{tbt[PbP hTG hE B*ph h/ hE #j hE UaJ mH nH sH tH hTG hE hTG hE 5h( hE 5hz[ hE 0J aJ j h( hE UaJ j hz[ hE UaJ $j hz[ hE UaJ mH nH u j hz[ hE UmH nH u )j hz[ hE UaJ mH nH sH tH hz[ hE aJ hz[ hE 5aJ I J K 5L M M N P R T T ~V V W W }W ~W W X Y Y Y Z [ Q[
& F
& F ]gdE @& gdE $@& a$gdE gdE
& F gdE Y
Y EY Y Y Y [ [ [ [ ^ ^ !c "c d d e e e e e e f f yg zg {g i i i i Qm Tm rm o o o o ]p ^p q q r 堵{slllll h(~ hE h(~ hE 5hz[ hE aJ j hTG hE UmH nH u hTG hE 569)j hTG hE UaJ mH nH sH tH #j hE UaJ mH nH sH tH hTG hE aJ mH nH sH tH hTG hE 5B*ph hTG hE B*ph jA
hTG hE B*Uph *Q[ [ [ \ 0] ] ^ ` b !c e e e f wg yg h i i k Qm Rm Sm Tm h^hgdE ^ gdE gdE
& F gdE
& F
& F gdE Tm rm sm
o o o o
p ]p q q &r r 's s zu `v >w x /x gx x x %y ^y y y gdE
& F gdE
& F gdE $a$gdE r r 's s s s t t zu {u u u >w ?w y y .{ /{ 0{ 1{ { { O} P} ʎ}rjb j!T hE Uj9 hE Uj h(~ hE U h(~ hE aJ mH nH sH tH j h(~ hE U h(~ hE 569OJ QJ h(~ hE 5 h(~ hE 569OJ QJ j h(~ hE U)j h(~ hE UaJ mH nH sH tH hQ& hE h(~ hE #j hE UaJ mH nH sH tH &y y .{ /{ O} ~ $ g O h^hgdE
& F gdE
& F gdE
& F gdE Љ 9 : ; e f ʍ ˍ e s O P
B C D _ ~ < > l m k l F ĽoĽd j h hE U#j hE UaJ mH nH sH tH h hE 9)j h hE UaJ mH nH sH tH h hE 0J j֎ hE Uj h hE U h hE h hE 5 h( hE h
hE hz[ hE aJ h(~ hE )j h(~ hE UaJ mH nH sH tH ' Љ щ h ʍ ؑ O C E ʖ < l k
& F
gdE
& F
gdE
gdE $a$gdE gdE
̢ ͢ Ϣ Т Ѣ @ " į N A
ڸ ۸ ܸ ݸ gdE
& F gdE $a$gdE
gdE F 4 5 6 Z [ Ѣ Ӭ ٬ $ ( . 4 į ů z IJĝĐĀuĝhĝ\hi hE 59aJ hi hE 569aJ hi hE 0J aJ j h( hE UaJ j hi hE UaJ )j hi hE UaJ mH nH sH tH #j hE UaJ mH nH sH tH hi hE aJ hi hE 5aJ h hE 0J j h hE Uj h hE U h hE $ ' ڷ [ c ϼ м Ѽ | } ~ J K ~qjQjj 1j hxU hE OJ QJ UaJ mH nH sH tH hxU hE hxU hE 0J OJ QJ #jv h( hE OJ QJ U j hxU hE OJ QJ UhxU hE OJ QJ h hE hi hE OJ QJ aJ hi hE 5aJ #j hE UaJ mH nH sH tH $j hi hE UaJ mH nH u hi hE 9aJ hi hE aJ ݸ ߸ ~ L ] p q
& F
hh^hgdE
& F gdE gdE # $ ] ^ d u 0 q r ֵ֜֜{f[E[[ +j hE OJ QJ UaJ mH nH sH tH hE hE OJ QJ (hE hE OJ QJ aJ mH nH sH tH hxU hE 9OJ QJ (hxU hE OJ QJ aJ mH nH sH tH 1j hxU hE OJ QJ UaJ mH nH sH tH )j hxU hE UaJ mH nH sH tH hxU hE 5OJ QJ hxU hE OJ QJ hxU hE B*OJ QJ ph hxU hE 569OJ QJ q 8 I +
& F gdE
& F gdE gdE $a$gdE
gdE
& F gdE G H + , V l v s t M
b s F G xmxdx h ( hE 0J j= hE Uj h ( hE U!hi hE 569CJ OJ QJ h ( hE 56 h ( hE 6 h ( hE 569OJ QJ )j h ( hE UaJ mH nH sH tH #j hE UaJ mH nH sH tH hE h ( hE h ( hE 5h( hE 5CJ h hE ' r s L K h H K ~ 4 ^
& F gdE $a$gdE
& F gdE
& F gdE
& F gdE gdE
& F gdE ^ _ & i m @ A B [ \ r ή{pg__W_{ h3 hE 5h X hE 5h w hE 0J j hE U h X hE j h X hE Uhi hE 56 #j hE UaJ mH nH sH tH hE h@ hE 5h( hE 5 h hE )j h ( hE UaJ mH nH sH tH hi hE 5 h ( hE hi hE 5CJ j hE UmH nH u!^ j & ' 8 x y y $a$gdE gdE
& F gdE $`^``a$gdE
& F gdE 8 ; y { = H h ! " Z [ ĺ{{jaaaahXc hE 0J j hXc hE UmH nH u hXc hE 5aJ $j hXc hE UaJ mH nH u hXc hE 59\aJ hXc hE 59aJ hXc hE aJ h# hE 5aJ h hE hE #j hE UaJ mH nH sH tH h X hE h X hE 9CJ h X hE 569CJ &
F u K h ! Z | y q
& F gdE gdE " y z % & 5 > # $ : yooh^ h hE 59 hDj hE hDj hE 59 #j hE UaJ mH nH sH tH hE hOz hE 5CJ h hE hXc hE 59aJ hXc hE 59\aJ hi hE hXc hE 0J \!hi hE 569CJ OJ QJ $j hXc hE UaJ mH nH u hXc hE aJ hXc hE 0J $q r y 6 \ ]
7 # $ % : ; $a$gdE
gdE
& F gdE
& F gdE gdE
= ? 9 ; P Q l ; \
& F8 gdE
& F8 gdE $a$gdE gdE = > ? Z b ; < v M O P A B C g h m Ƽ|si`S j hi hE CJ UhOz hE CJ hOz hE 5CJ h+ hE 0J j hE U ha hE j ha hE UhOz hE 5 h =C hE h =C hE CJ aJ hi hE aJ hi hE 5aJ hi hE h hE 59CJ #j hE UaJ mH nH sH tH hE h hE 59 h hE @ A : ; [ \ 9 : Z [ b" c" g" j" " & & 2- 3- 3 3 3 3 3 9 : c: ǽxpipi htY hE htY hE 5 h( hE h hE 59 h hE )j h;; hE UaJ mH nH sH tH h;; hE h;; hE 5hOz hE CJ hOz hE 5CJ hi hE 5h hE 0J CJ j hi hE CJ U j h hE CJ Uhi hE CJ $\ : [ D! c" d" e" f" g" h" i" j" y" " % F% % & N' '( ( D) ) + 2-
& F gdE $a$gdE gdE
& F8 gdE
& F8 gdE 2- <. V/ 0 71 1 1 2 3 3 3 3 3 3 3 7 7 9 9 ; ; ; ; b; ; #< <
& F gdE $a$gdE gdE
& F gdE c: j:
< < 9> :> ;> <> W> E E E E E E E "F $F =F ?F F F F F F PG RG vG xG G G DH FH H H I I GI fI I I J J J BL CL L L L L ¸£¸¸¸¸¸¸¸¸¸¸¸¸¸¸¸ٛ )j how hE UaJ mH nH sH tH how hE 5)j h+$8 hE UaJ mH nH sH tH h+$8 hE 59 h+$8 hE h+$8 hE 5h( hE 5 h( hE hE htY hE 59 htY hE h+ hE CJ aJ 1< #> 9> :> V> W> %D &D 'D lD D D FE E E E $F ?F F F RG xG G FH H I fI
& F gdE gdE $a$gdE
& F gdE fI I J CL L L L L L L N N (O O P UP P S S DT ET U U
V V W W
& F! gdE gdE $a$gdE
& F gdE L M N N (O )O FO NO PO YO O O O O gP zP P P S S U U U U U
V I[ J[ [ [ [ [ [ D_ E_ F_ a_ ` ` .c Fc Gc uk h( hE 5aJ #j hE UaJ mH nH sH tH h) hE 0J j hE U hKs hE j hKs hE UhE h( hE 5 h( hE how hE 9#how hE 59B*OJ QJ ph )j how hE UaJ mH nH sH tH how hE how hE 59)W yX zX X ~Y pZ Z $[ ~\ ] ^ ^ E_ O_ P_ a_ b_ ` ;a a a Mb ,c -c .c Gc Qc $If gdE $a$gdE
& F" gdE Gc Pc Qc \c ]c ^c kc lc c c c c c c c c c c d d d 9d :d _d `d ad qd rd |d }d ~d d d d d d d d d d d d d d d d e e e e e yNO,U 8wzn^o*Q5K(G/Q8YUUB!a5ʈ=X WQw64 ް鰦{'5Xꇴ |!Wii)M̢ P4Mp$I A:; yܿ{\zEsێZ> 5X4ܷ}Vva?Ү].6 r;}]JKKmUU)2YYYF@B
&B*T)kR #V\+0 fQr{vNݿ ^5(뚷2Qfn#WK+IN=4S-<2DAt/'>tR)+92a ^Z˕gm 6LN͜*]s)wvQ*P^9q*WRȶ8 zw97C:sn_!ulE-Oigӱ
Scyd[Mr_Ȼ=*z~|x
jWK l1>5Q A+ i
7슮3a,I\fhQ4͘ Hc¢! ,( וUo\47r.]f*$Lhș&T&Ӷ\|!5̦.**:v$IEh"...::Zϧ dY
-9 o?F
۾ /X, ɷ}J aH#VQRbDPt&~8(EY*`d;@ԙIfRi]e\2V$!T_~%\ݾY4K>} N8YH=CTu!T %%k\lvJR .BM$2e(@I=2 ĤEҸ6dNcێ =.YCUR tm殾%?yucgvvoX[C3TUeYSx
R "} mq4#d;Δ "y2£8 7""|ňHHKԖTWSObu] X~]OGI( {#_ϿJ> l&ٺpցL- 3 20004b59^}:eUFMmؓ,vfb ytFh˕ϕa
X%UH콤 ʕ D~ED2s$C
׃<0g3
)}h */ܵ|$=! bi{ |GMJJg >_t? njӫ|Jk
u3 HlTۛT>$ &u}o >[@XsVr>zpC I,(k7oٲZi_f/totQKˉT¢˅R- ӯK G"=}&_ϙU.z]:&JքW{07:hFH)%+]$3a61<|k;A /@0ON :Z}A] ێRc3+Ht* -C4;ȶi@9|
2|F?/j2'xMfX7{h>$nrr a:DnL'IC2sB)q5A]E
`]XrcZ7@ f pLG&&^_RckQ \UpWtR _ qA9ֈ<3LKϖ
O
#V\+ P:Mz8S+̨6nIHG2<~.#އDke`uci q\HTfafsoI \uDGG7fV8q|ݠ蔟/p+ot9 hĥ'?r8\ǂ7Mt-7P8{X(;y͞8;eޠ wp &f9q/d{m]-~z ,Vߞ~)ߞ^iYUK<%ujz◵X4ZBB,AaL|z6~ebY6U>/,Y+Kb]}eٸe/7leRVOڿ,7)I,fMll6HQ+Neggj q`VV 'V?(Y%LONIEQI wSǧaD2vOڎO"aagE
?ہ(J^Z'&c彉6[XtlHvŗ9Hc%N_iR/~2'(Lzw? ;@:jUN EQ Vz朖 @)0(yU 8?INJ{_DVߺ }#5U, òh| Ԁ0a7|.-rq4<~@ (ae .;| nfcMZSM-.&FIE 3ZhgW_}ՈTie1bCҧK-ߧӿ_ `C9S ۨi0 p g<]bTlqpA kzvn .^>IFdEbİ/g]cU!gRh oԣ!ȩg&O{aA/u<xيWYE Ng+[-"ise
V#<:OFZtLF =t~ֿiP(Pq+;[o%/=wܕuD#Z@$KU鮣O"+
,eA1L,CCʙm3&~(mSoM\3W/>rbX::ЪX7 uiMGW6bgjbt@ly4-+X fkV )Gq:`] u F?;xJ ~uA:zg :iyv;rs/O\sK\ȍ?N "-qB%cӚlʱ26;9-C/8{>ۚdG\4: <} ^IG t҅bZcyRX
#㠏 iJ,}p 돞
|ر{' ]71YYY̙t tZ{ߛ ڶI)%SL5S 3
vp"t< DB QS+*$ IDAT;U4b"Km]$,3a&* ) \VwlxDo\ YV;([V_W,{`9kSoٓsIuU+=}Ӫ]3gOŰ#>86~ٙW|i) ~}˙# -wܷo^uϜ%{-pIK`E-ȇ
J$I>缘yBW3 t ;1w8#:d( t*VzH,ё
P ̔ x
nD<
_ј{cj,#'"^Kf0+K!/CN^td$! c=2Cy`Δ$fY֫!qA8Dwe&86o[{Ijզ@fj"p"U5Q2JU 22eWlQj$IJzU Yχ4
0^FE)0.a q;Lh^Z/FM ,=Ew1kl۶܉BZ2G)H0Ѥxk 㡏bmmjhLB;XEӈӏc/L^[iƞk чB4 6s |K6sMHTD FH)$%,Z
z~ o?/VM
dD*ɢB
RO; ĸ;wwrL4 y RBT?C1bC/h&cG͉ F3aۘ N)1?=yع7^X8s837U̦aPF/|}K&LRcw˗PLi)ifKn >Qƚ0utU`3EI GU1yQmd3 a5 n=:{X@.'JiG$V Bʹy642|4 Y?%\UFpt 0j uu
1f{լO fFSLkM_O9ɰcE&
u4zY=pIri qIfyi sw7
ɇG`4J]+3qj?opXs4R'??|/>Yyw[1]Ir"ŲeJ-Lw& E3hυ+G&$Z~OcϿ[?o & :UrWʾ@cP2!d_7 G?m۶??2Ր-[ɟ U5j:LL=N2X A|f|Ko8wsndpL#3Dh)U:We6A~B gu| {ޏ/On_-,B+Y ,f{:L4 2Λ5WMҢ/ai)Z.)Vs=- My]{jReSU*W~DU-ۚbGuIܴ*櫰hm m>8:zs,2olUG.: 51D#kExQ$uTWI$Jɸ̥M!
ZR<.֯MȎulT!p2OR>@NZ,PDŽTF@?غ: ?;Q~չH[jEB&)H:q>
l`deVR]ݭ 즵ji,"D:lIHk`-E#.'ŐyfFSƫ؝i r+S^*a#Nu۾~{
رck}[9'$\'K3.7 zF4??AnY<Z#d x *wI&0}&6vP6THpx
RTG<0!yS5ֳ^KUsJjdo"E ^2#\jW%^L{T= h2X7zQ{Xv !kɛR6UʋZםpigpB* )go"}c:*"Hl$Fe Q 8cɨbU'ɯk 2hus1K]{Ü^^ya&&I3k@L!.ZW5kKTmu>}˥9V4 cu75ݓ#10;ݹE'RR3' ۾|Xjy.Wɉg|nvy>..HaJR5'TJf
ŦO.@ Ƞ<.^S٭V EL.X>w۟Ɨi֕g]ͻk"7U4 ??w ii c~}O$ 0 {~ G>7^ ]N\}K?@#pfk|~Q/
9wϟygS{JNrTH1ۜiw4 dh
Zrq*w@Xrb,( fٔߍR&c8
hd>q&PTQ ݚ6K/?uGّz:5bbJu1uhN',0'A
&K׀Nt3MH
1|{ !Ղh袚UE]wͲ+OuJIjl"^rD 0#nS 'ԣu:b14UDه\ 4 ѡ&Lw!Uu`Ȑwr T[ ,2@Zz#on/* Rs%Yg̮b`c^
5dg>rK_ΔP}
9 >KP<᷻O:AFcn>pf+
bsz!?jg;mT jrA@DޓO Bq|- 嬤$Y#hr48,u̽K2<ng!,'T}4MwQ~el_7lc n>LSaBW{E[;Jña*i :#.zg$paK~Yʅ_ҲڽǞ;ݺq8i}# vnu;[m/{Н> k,y;nr{nyf,漏cyqgf&VLj9)x
l?~^ TMYܗ,1jL+Fq%T6KҦBY3Ţ*7O?4/ru ih[9 :_ Y@Mר9+/