Unit 1. Dreamweaver 8 Basics (IV)

Introducing Dreamweaver 8  Tutor 1

Dreamweaver 8 is a easy to use software that allows you to create professional web Pages. The design edition features of Dreamweaver 8 allow you to quickly add objects and functionality to your pages, without having to program the HTML code manually. It's possible to create tables, edit frames, work with layers, insert JavaScript behaviors, etc., in a very simple and visual way. In addition, it includes a complete FTP client software, allowing among other things to work with visual maps of the Web sites, and updating the Web site in the server without leaving the program. In order to follow this course you can download the trial version of Dreamweaver from the Macromedia's Page, this version expires after 30 days, but you can surely at some stage bring yourself to buy the full version of this wonderful program.

If you don't know the basic HTML characteristics you can see them here.

From Dreamweaver MX 2004 to Dreamweaver 8

In this point we will see the main features the new version of Dreamweaver includes: RSS Integration: with Dreamweaver 8 you can integrate RSS feeds from other pages just setting the source and drag-and-droping the fields you want to appear. This way you would insert XML data easily. CSS improvement: in this latest version the compatibility and handling of CSS styles have improved considerably. The CSS styles has been remade for a faster access to the page's style, and includes a new grid from which you will be able to modify the properties of every aspect of the style. Moreover, Dreamweaver 8 adds a new toolbar that helps you to set differents styles deppending on the kind of media the pages is being visualizing (screen, printerm webTV, PDAs...) . Accessibility: Dreamweaver 8 incorporates an evaluation tool that supports the new WCAG/W3C Priority 2 checkpoints. File Transfer: Now with Dreamweaver 8 you could keep on working with your files while the program uploads you recent modified files to your server. Its synchronization has been improved in a way that will allow you to manage the file changes and block/unblock files to avoid overwriting. Improved Interface: The users with visual problems could access to a new Zoom option of the Design View in order to work comfortably and help them to work easily with nested tables. Also the inclusion of rules will help to the measuring of the elements pixel to pixel. New toolbar: A new toolbar has been added in Dreamweaver 8, you will find it in the left side of the Code View, and it will help you to make the code more accessible since it allows us to browse the code by tags or even to collapse them. You can even add comments with just one click! Compatibility: We have to mention also the new added compatibility with PHP%, Coldfusion 8 7 and Video Flash.

Editing a Web Page

Any text editor allows you to create web Pages. It's only necessary to create documents with HTML or HTM extensions, there you'll have to include the HTML code that you want. Even the Notepad can be used to do it. Creating Web Pages with a text editor (and thus adding all the HTML code manually) requires more effort than using a graphical editor. If you don't use a graphical editor is much more difficult to insert each one of the elements of the Page, and at the same time it is more complicated to create a professional appearance for the Page. Nowadays a wide range of web Page editors exists. One of the most commonly used, and emphasized by its simplicity and the numerous features that it includes, is Macromedia Dreamweaver.  Tutor 2

In addition to Dreamweaver, another series of good Web Pages Editors exists, such as Microsoft FrontPage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer and Arachnophilia, some of which have the advantage of being free.

Planning your site online

In order to be able to upload a web Page to the Internet, it's necessary to hire a web hosting company to make your web site available to others on the internet 24 hours a day. The price to have your own space on their servers will depend on the company, the space on disk you need, the volume of transference and many other options that you can ask for. There are companies that offer this service for free, but with certain limitations: justa a few disk space, slowness and a name for our Page preceded by their own etc... It's also necessary to consider that these companies must generate income in some way it is the reason why they are dedicated to sell advertising spaces within your Pages, ads that we'll not be able to avoid including in our web Pages. For these reasons, it is not recommended to use a free hosting for a bussiness Page, although it is acceptable for a personal one. When we are going to hire a web hosting service it is necessary to also contract a domain, a task which usually is in charge of the hosting company. To register a domain consists of registering a name for our Page. This name cannot be repeated in Internet, has to be unique, as happens with the names of the companies. It's possible to register the same name with different extensions, like for example, .net, .org, .biz or .com. In the case of free hosting it isn't necessary to register a domain, since our Page will not be more than a file within the one of the hired company. At the time of hiring a web hosting service it is also necessary to consider the number of email accounts and if we are going to need a database, although this last one will only be useful for advanced users. Let's see the two basic ways to start Dreamweaver 8. From the Start button normally located in the bottom left corner of the screen. Place the cursor on the Start button and click, the start menu will open, select All Programs and then another list will appear with the programs that are installed in your computer, look for Macromedia, then select Macromedia Dreamweaver 8, and the program will be opened. From the Dreamweaver 8 shortcut on the desktop . Now start Dreamweaver 8 to explore everything what we have explained. When performing the exercises you can also arrange the program the way we explain you here. To close Dreamweaver 8, you can use anyone of the following actions: Click on the close button .   Press the combination of keys ALT+F4. Click on the File menu and then select the Exit option. If ther is a modified document and it has not been saved before closing Dreamweaver, a confirmation will be requested in order to save or not each one of the modified files. Opening and saving documents   In order to open a document, you can use any one of the following actions: Click on the open button of the standard toolbar. Press the combination of Ctrl+O keys. Click on the File menu and select the Open option. Double-click on the file in the Files Panel. In order to open a new document, you can use anyone of the following actions: Click on the new button of the standard toolbar. Press the combination of keys Ctrl+N. Click on the File menu and select New... After this a new window will appear, where you will have to choose its Category (usually Basic Page, HTML). In order to save a document, you can use anyone of the following actions:. Click on the save button of the standard toolbar. Press the combination of keys Ctrl+S. Click on the File menu and select Save. Dreamweaver includes the possibility to save multiple documents, without having to do it one by one. In order to save all you can follow anyone of the following actions: Click on the save all button of the standard toolbar. Click on the File menu and select Save All. When we have several open documents it's easy to forget all the modifications done in each one of them. You must take care when using the Save all option, since sometimes it's possible not to wish to keep the changes in all modified documents. For that reason it is advisable that at least you don't use this option in the beginning, until you have become more experienced in handling the program. Tutor 3 So now that you have an idea of how Dreamweaver works, we're going to create a simple web Page, with several text styles, an image, and a link to another Page. To create this single Page will take you a few minutes, and you will know how to work with the basic elements with which most Web Pages are made. If you have never made a Web Page, this is the moment to discover how easy it is. My first Page   The first thing you need to do is to open Dreamweaver. You have already seen how to do this in the previous Page. Then open a new document and select the Category Basic Page, HTML. Next, type the text that appears in the following image in the blank document. Once you type the text, we're going to modify the title and the background color of the document. For this you must click on the Modify menu and select the Page Properties option. Then a window will be opened like the one appearing below. Change the title for My first page. In Background color type #CCCCFF, this way the background color of the document will be blue. Next, click on the OK button. Now you are going to insert an image. For this, it has to be accessible in your hard drive, on a CD-ROM, or a floppy disk, but preferably in the hard drive. Many of the images that we see in the Internet can be copied to your hard drive. By right-clicking on the image a window opens with the option to Save image as... (it depends on the browser that you use, but it will be similar). That allows you to save this image in a file on your hard drive. In the most modern browsers when placing the cursor over an image these icons appear in a corner of the image, if you click in the icon of the floppy the same menu Save image as... will appear, which we previously have made reference to. Copy the image that appears next, so you can insert it later in the web Page that we're creating. You can keep it, for example, in My Documents folder. Now you must insert the image underneath the second line of text. For this, place the cursor at the end of the second line and press intro (enter) to go to a new line. Later you must go to the Insert menu, and then to the Image option. In the new window that appears, you will have to look for the folder in which you had saved the image. Tutor 4 Now we're going to change the format of the text. For this you need to visualize the properties inspector, normally found in the inferior part of the window, and has the following aspect: If it doesn't show, you can view it through the Window menu, and clicking on the Properties option. If only the title of the panel is displayed, it is because it's contracted. To expand the panel click on the button , next to the name. Select the first line of text and change the Format to "Heading 1" and color to "#404890", the way it is in the following image. After this, the appearance of the first line will have changed. Now select the image and the two last lines of text. Click on the button to center them. Once you have centered the image and the two other lines, select the second line of text that has not yet been modified. Change the Format to "Heading 3", click once on the button and click three times on the button. Select the last line again, and in Link type "http://www.teacherclick.com", to create a link to this Page: Finally, save the document. You already know that you can do it through the File menu,and then selecting the Save option. You can name the document as you wish, but consider that the extension has to be htm or html. For example, you can call it "test1.htm". After all these steps, you can see the Page with the new Format by pressing the F12 key.