|
|
|
|
Macromedia Dreamweaver is one of today's leading products for creating high quality web sites, and offers many tools that will allow anyone and everyone to create a good, professional looking website. This course will teach you how to take advantage of all this wonderful program has to offer. When you first open up Dreamweaver, you will see a blank page, and another window may have opened as well, the sites/site files window. If this is not the case, open up the site files, by going to Site -> Site Files. This is where the uploading of your site will take place, and you can now close this window. Next you need to specify you local root folder, which is the area in which all of your site's files will be held. If you do not have a folder for this, go to your desktop and create one. Browse using Dreamweaver and find this folder. It is suggested that you click the box that says Refresh Local File List Automatically. If you already know the final destination for your site, enter in it's URL in the space provided. It is also suggested that you enable the cache, which will make your site run more smoothly. Next click on Remote Info, and use the drop down list to choose which ay you will transfer files from your computer to the server. The most common of these methods is FTP, and we will explain this in detail. The FTP Host is the area that your server asks you to upload your site to. For instance, although our site is located in the Thinkquest Library, we were asked to upload it to dev.thinkquest.org, a different location o their server. Enter in this location now. The Host Directory is not needed, but it is suggested that if you have a password and username, enter it in the space provided. It will save you the trouble of entering in the password every time you connect to the host. Click OK, and your site will be created. There are most likely either one of no pages in your site. If you look at the title bar, you will be able to tell what page you are viewing. If you are on index.htm then your site currently has one page, the page you are viewing. If not, your site has no pages, and you will have to save the next page you create as index.html You should notice four major parts to the Dreamweaver work table. One of these are the standard toolbars at the top. Another is the horizontal Properties bar at the bottom, and a third is the vertical objects bar. The four item is the white, plain, page. All four of these parts will be used in your time with Dreamweaver. The Properties Bar will give you properties of any picture of item on your site that you click on. When the white work area is clicked, the Properties Bar will allow you to format your text. It does this in a standard way, much like Microsoft Word. If you look at the box on the Properties Bar that has a drop down arrow, and is colored; you will that when clicked this is your color palate. It contains all of the web-safe colors that you may use. It also gives the hexadecimal code for the color selected, and you can choose a color by entering in it's hexadecimal value as well. The objects Bar is one of the most important parts of Dreamweaver, and you will use this very often. Here you will be able to insert graphics, tables, frames, and many other items as well. The first list in the Properties Box is the "common" list. We will now go over the different items in this list. The first of these is inserting pictures, and looks like a picture of a tree. When clicked, you will be able to browse your hard drive for any picture file. The item to the right of inserting a picture is inserting a rollover image. This creates an image that when the mouse is passed over will change in some way. An example of this is at the top of our site. When your mouse travels over any of the buttons, they change to a brighter blue color. Below the picture icon is the inserting tables in, which is in the shape of six tables. You have a few options when it comes to tables. Your first option is how many sections you would like your table to be in. You can set the rows and columns. Rows are horizontal sections and columns are vertical sections. You can also set the size of these sections in either pixels, or percentages. When you set it in pixels, the size of the table will not change when the browser is made smaller of large. When you use percentages, the browser window will make the tables change size along with it. To the right of the tables icon is the Inserting Tabular Data, which just means filling in the table with information. Dreamweaver has a special feature called layers, which are only supported on the latest browsers. A layer is a box in which you can edit text and images more like a printing house would, instead of a web programmer. These layer can be controlled, and you can make layers appear at different times. Below that, in the fourth row of common objects, you can insert a Horizontal Rule, which is a line that is mainly decorative, but can serve as a way to separate information into sections without needing to use a whole separate page. Be aware that you may not want to use these two after as they are considered full fledge pictures, and may slow the loading time quite a bit if you over-use them. To the right of this is an email-link, which looks like this: Email us at Webarchitect@aol.com. When clicked, a window will open as though you are about to write a letter. This just saves your visitors time and suggests that you want to them to email you. Inserting the Date will put the current date on the page, and if your site is properly set up and your server allows it, the date will update automatically each day that goes on. If you are good at coding and are interested in using Server Side Includes, you can insert them in your document using the button that looks like a page with a pound sign over it. You can browse your hard drive for the Include. The 5th, 6th, and 7th rows all contain ways that you can incorporate other Macromedia programs into your site. Macromedia Flash is one of the most commonly used programs with Dreamweaver. If you are not familiar with Flash, we highly recommend that you read our Flash course. You will see that Flash is great for creating site intros, and if you are talented enough you can design your entire site using it. Macromedia Fireworks is a graphics design program that mainly exports it's graphics in .png format, which is very useful for the web. If you are using Fireworks, you can insert Firework's HTML using the appropriate button on the Object Menu. If you look where the word common is on the objects bar, you will see that it is actually a drop down list. Go up one and click on 'Characters'. This shows a list of easily accessible characters that you can insert into your document, This will save you the time of going to the character map every time you wish to insert a character that is not on the keyboard. You can insert any character of your choice on the list, and put new ones on the list by clicking the colored button that has a Spanish question mark and an n with a tilde. After you have made yourself comfortable with the available characters, go to the Forms sub-menu. This is where you can easily put forms into your website's pages. The first button, a canvas colored button, is the button you will use to insert a form. The red lines of the form will not be visible when the site is published. This list also contain many other inputs for the form such as: This is a single line text box, commonly used for short input (a couple words, like an email address). You can specify what characters may be used, and how many maximum and minimum .This a mult-iine text box, useful for comments or even entries to contests, or anything that needs a written answer longer than a few words. You can set word and character type constraints. This box can be checked an unchecked, and provides a place to give a binary answer (either one option or the other, check or not-checked). This is good if you have a list of things, and want to see which ones a person likes or dislikes. These radio buttons are good for choices where you do not wish the answerer to be allowed to choose both options. An example would be if the user was asked, "Are you over 25 years old". Only one choice can be chosen, as nobody can be both over and not over 25 years old. This is called a dropdown list, where the user can choose one of several choices. This saves space when there are many choices (such as which state the user is a resident of). You can also insert a special hard drive file finder that looks like this: On a site made with Dreamweaver, you would be able to browse your hard drive and find a file.
These are all of the input types, but the user still needs a few buttons that will allow him/her to reset or submit the form. This button will reset the form when clicked. All answer will be put to there original state. This button will submit the form to one of many places, which you specify. It can be sent directly to an email address as long as you have the server extensions. It can be sent to a database, and can be sent to a cgi script. It can also be sent to a file. You can also insert a hidden field: This was done using hidden fields. You just have to click the Hidden Field button, and it will insert it into your document. Click the gold shield to set its name and value. If you want to do it in HTML, then you will need to use this coding. You view the HTML for your current page by clicking the brackets at the top left corner of your screen. You can also have a split view with the middle button. Here is the code: <input type="hidden" name="XXXXX" value="ZZZZZ"> Where the X's are, you will need to enter in the input name, such as age, date, location, etc. The value is what your answer is, the one that the user does not have to fill in, but is automatic. For instance, lets say you have a separate form for different age groups; when users entered it into a certain form you would be able to tell what age they were. After the Forms sub-menu is the Frames sub-menu. A frame is a split windowed browser, where two or more HTML documents can be viewed at once. The one highlighted in blue is the main window. Frames are useful if you want a document to be updated by a users choice, but still have the choices available. Be aware that not only are frames not supported by all browsers, but some users choose that the computer not display them. Be aware that users under these circumstances need another site to go to, known as the "no frames" site. The Head sub-menu will insert various tags into the head of your HTML documents. A meta tag is invisible to the user, but when search engines "crawl" your site, they use meta tags for their search engines. For instance, lets say that one of your word in the meta says "Candles", if a user type in the word candles, your site will be some where on the list. The more matching meta words and keywords, the higher that your site will be in the rankings. Try to be as descriptive as you possibly can, but you should not enter in words more than once. Search Engines will not read the second, so it is a waste of time. Entering in a description is also useful for search engines. When your site is in the rankings, your description is usually posted along with the link to your site. A refresh is a very useful option for any web designer. Some web sites heavily rely on information driven programs, which may change very often. You can make the users page refresh automatically, which may update any variable you have put on your site that have changed. For instance, if there is a list of people who are on the companies Intranet at the moment, you can click the refresh button, but it is easier if it refreshes automatically. In this case, you would now be able to see who has entered and who has left. Invisibles are objects that are not read by the browser, or are not visible to the user. A script could be a JavaScript, a cgi-script, or a variety of other scripts. Comments are useful if you want to leave yourself a note for later use, or leave anyone else who is planning on updating the page a note. The bar at the bottom of the screen is known as the mini-launcher, and is where you can launch things like your sites HTML, Behaviors (you can set these by opening up the Behaviors window in the windows menu), and even the last couple of things you've done (like deleting this, inserting that, etc.). Try opening up the launcher, by going to Windows -> Launcher. Clicking 'Site' will let you see your sites files, which is mainly used for uploading which we will explain later. Assets is another amazingly powerful tool in Dreamweaver. The first button, one of a picture, will allow you to view all of the pictures on your entire site. Every one has a preview of it own (Beware, our site has well over 1500 picture files, so this list might take a little while to load if you have a fairly large site). The next list, which looks like a colored grid, shows each and every color that your site uses. It also tell if the color is web-safe or not, which is an amazingly good thing to know. You should change any colors that aren't web-safe, as they will not display as accurately as a web-safe one will. The picture of a chain provides a list of every link to an outside address on your site. If you happen to utilize any of the other technologies there are to choose from you can view any of the following on your site: Flash, Shockwave, Movies, Scripts, Templates, or Libraries. HTML/CSS Styles are html ad CSS styles that you commonly use, and this is an easy access area for them. Dreamweaver also has the interesting feature of allowing you to insert behaviors. These will allow you site to interact with the user whenever they perform the action that you have set the reactions for. You can redirect the user, and do many other interesting and practical things. The History keeps track of every last keystroke you do, typing, backspaces, inserting objects, the whole works. You can replay any of these actions. (Like inserting an image can be done easily in mass). After you have created your site, you should have a very easy time uploading. All you have to do is go to Site -> Site Files, and click the connect button at the top (looks like a three pronged plug going into a socket). The click and drag your sites folder into the wanted place on your web and you're done! That's all you need to do to upload, easy as 1-2-3! That's a wrap for the Dreamweaver course.
|
|
<espaņol> <french> <hebrew> <german> <russian> <italian> <portuguese> <arabic> <japaneese> <chinese> <korean>
Copyright Thinkquest Team C0110523: Jordan, Maegan, and Chris. Please contact us
if you wish to use any part of
this website Click Here to Sign our Guestbook!
|
