Dreamweaver 8 Instructional exercise for Fledglings By Marion Wood August, 2006.


90 views
Uploaded on:
Description
Dreamweaver 8 Instructional exercise for Fledglings By Marion Wood August, 2006 Setting up a site Page format utilizing tables and Including content Including and advancing design Page Properties, Content Properties, Making new pages and connections Utilizing layouts Documents Board Properties Reviewer
Transcripts
Slide 1

Dreamweaver 8 Tutorial for Beginners By Marion Wood August, 2006 Setting up a site Page format utilizing tables & Adding content Adding & enhancing illustrations Page Properties, Text Properties, Creating new pages and connections Using layouts Files Panel Properties Inspector

Slide 2

Part I Setting up a Site in Dreamweaver 8 with a specific end goal to keep all records together and in respect to one another, it is important to make an envelope for every one of your documents in every site. Right-tap on the desktop, click on New , click on Folder . Name the new organizer “My Practice Web Site.” Create another envelope inside the “My Practice Web Site” envelope and name it Media . Open Dreamweaver. The first occasion when you utilize Dreamweaver, you pick whether you will work in Designer View or Code View . Pick Designer . On the off chance that this is not your first time to utilize Dreamweaver, you ought to consequently open in Designer View.

Slide 3

Open Dreamweaver, and pick Dreamweaver Site. Verify the Basic Tab is picked. Name your webpage “My Practice Web Site” and click on Next . Until further notice, pick No, I would prefer not to utilize a server innovation . Pick Next.

Slide 4

Choose Edit nearby duplicates … and peruse to choose the envelope you made for this site. Click on Next . Pick None. Click on Next. We will change this later. Your next page is the Summary Page and ought to resemble this. Click on Done . Your Site has been made and you ought to now see it in the Files Panel

Slide 5

Choose Create New, HTML . Your page ought to appear to be like the one on the privilege. Pick File, Save . Name your page list . Each site has a landing page and it is named list. Programs search for the page entitled index.html . Critical Note: Your landing page must be named index.htm or index.html. You have completed Part I and set up your site.

Slide 6

Part II Page Layout Using Tables & Adding Text Tables are the most basic and direct method for making a format for your site. From the list page you made in Part I, Choose Insert, Table . Make a basic 3 line and 3 segment table. Click OK . Your page ought to resemble this. Select the 3 cells in the top line.

Slide 7

Choose Modify, Table, Merge Cells . Sort in your page title. Note the Property Inspector at the page\'s base. (This progressions by what you have chosen.) Click on the Align Center catch. Your Title is currently focused in the cell. Select the content. Open the content box in the Property Inspector. Pick the Verdana group of text styles.

Slide 8

Highlight your title. In the Property Inspector, pick a bigger textual style and snap on Bold. Select you\'re table and notification this one is 200 pixels wide. In the Property Inspector, change the width to 800 pixels and the stature to 600 pixels. Your table ought to now seem to be like the one on the privilege. Click inside the base right cell. Keeping in mind the end goal to choose it, click on the <td> at the report\'s base window. This is a convenient approach to choose distinctive cells in a table.

Slide 9

Select the top cell by clicking inside it. Click on the <td> at the report\'s base window. Sort 50 in the stature box and press enter . Your table ought to appear to be like the one here. Select the 2 base left cells. Pick Modify, Table, Merge cells . We will utilize these combined cells to make an even route bar. With the combined cells chose, change the vertical and flat arrangement inside of the cell to Left and Top. Notice your content cursor moves to the upper left of the cell. Once in a while it is useful to place a table inside of a table. Click inside the left consolidated cell. Pick Insert, Table, and pick 6 Rows and 1 segment.

Slide 10

Type page names in the table. These will be the connections to alternate pages in the site. Your table may change when you embed representation or content. Simply extend it to the coveted size. You will need to make your page measure give or take 800 X 600 pixels. Minimize Dreamweaver to your taskbar. You have completed Part II. You have laid out your page utilizing tables. 5 Basic Rules of website page configuration and format Your site ought to be anything but difficult to peruse. Your site ought to be anything but difficult to explore. Your site ought to be anything but difficult to discover. Your website page format and configuration ought to be predictable all through the webpage. Your site ought to rush to download. http://www.grantasticdesigns.com/5rules.htm

Slide 11

Part III Adding & Optimizing Graphics Open Fireworks. You will see that it is entirely like Dreamweaver in that it utilizes the Property Inspector. Click on Open and search to the photo envelope on your desktop (or where you are let it know is). Pick a photo to speak to you. You can see a specimen when you tap on it. Click on Open . Click on Modify, Canvas, Image Size . Our photo needs to fit in one of the cells in our table in Dreamweaver. So retreat to Dreamweaver to see what size the cell is. Open Dreamweaver , click on the base left cell. Notice the one here is 279 pixels wide. We would like our photo to fit in this cell.

Slide 12

Go back to Fireworks . Choose how wide you need your realistic to be in connection to the cell. 200 pixels may be great. When you change the width to 200, notice the stature changes moreover. It is critical to have the container adjacent to Constrain Proportions checked. Click on OK . The photo is 47.8 kb in record size. That is not extensive but rather should be far better. Likewise the white foundation should be made straightforward. Jpg records are not ready to have straightforwardness. Png’s and gif’s can have straightforwardness. http://darkwing.uoregon.edu/~jqj/bar intro3/pictures gif.html

Slide 13

The Export Wizard is an extraordinary instrument. It can be utilized to diminish the record size and to make straightforward parts of the document. Pick File, Export Wizard. Select a fare organization ought to be checked. Press Continue. Select Dreamweaver and press Continue. Firecrackers examines your record in light of the data you gave and makes suggestions. Press Exit to see the suggestions. Firecrackers prescribes 2 possiblities. The top decision is a gif record. The base decision is a jpg.

Slide 14

Notice how Fireworks has diminished the document size. Keeping in mind the end goal to make the photo\'s foundation straightforward, pick the gif record. Click on the select straightforward shading symbol. With your eyedropper apparatus, click on the white foundation of the photo. The checkerboard foundation demonstrates that it is presently straightforward. Pick Export . At the point when sparing this document, adding “tr” to the title will help you to realize that this is the photo with a straightforward foundation. Spare it where you will recall.

Slide 15

Click on Export . The document is presently enhanced . It is decreased in size while looking after quality. It additionally has a straightforward foundation . About-face to Dreamweaver , click inside the cell where you need to put your photo. Pick Insert, Image . Pick your enhanced document. Notice the size is presently just 7kb. Click OK . Essential! The document should be foreign into your root organizer so click Yes . Placed it in your root envelope, inside your Media organizer. Double tap on your Media envelope to open it. It is great configuration practice to keep your records perfectly documented. Click on Save .

Slide 16

New in this variant of Dreamweaver, is the chance to include interchange content at the time you embed the picture. This makes your site more available to those with vision issues. Click OK . Your photo is currently in the cell of you\'re decision. While the picture is chosen, utilize the Property Inspector to focus it inside of the cell. Presently, click inside the cell. Click on the Center content catch. Your photo is presently focused inside of the cell. You have now streamlined, made straightforwardness, and embedded a realistic.

Slide 17

Part IV Page Properties, Text Properties, Creating new pages and connections It’s time to include shading. Pick Modify, Page Properties . Clck on the Background Color Box. Pick a shading. Click OK . Notice how the straightforward foundation on the picture permits the page foundation shading to appear on the other side. Without the straightforwardness, your picture would have a white box aound it. Open the Page Property dialog box again to see every one of the things you can do.

Slide 18

6. Select the content as appeared. Change the textual style to the Verdana gang. Add content and illustrations to alternate cells in you\'re table. Change the textual styles to the Verdana crew. Adjust the content to the highest point of every cell. Your page ought to now appear to be like the one beneath.

Slide 19

Creating New Pages – Save this page to begin with, then Choose File, Save as to spare a duplicate of this page as “photos.” Always spare pages in lower case , without images , and as short a name as could be allowed. Double tap on the photographs page to verify it is the one open. For consistency of outline, the left route cell won\'t be changed. Change the title as appeared. It is presently time to include photographs in the cells. About-face to Fireworks. Open the Class2 picture. It is a jpg.

Slide 20

This photo should be resized and after that improved. Since it is a photo and does not should be straightforward, it should be traded as a jpg. Pick Modify, Canvas, Image Size . We need this picture to supplant the one as of now on the page. Keep in mind, the photo should be 200 pixels wide. Pick File, Export Wizard. This time, select the jpg. Notice the size is 12.82k. This is a decent record size and the photo is great in quality. Pick Export and spare it with a “tr” in its name. Do likewise with the class3 picture.

Slide 21

Go back to Dreamweaver. Select and Cut the picture. With your cursor in the same cell, embed class2tr. Click in the upper right cell and addition class3tr. Your page o

Recommended
View more...