How to Create a Dreamweaver Page using a CSS Style Sheet and a Word Document

How to Create a Dreamweaver Page using a CSS Style Sheet and a Word Document 1. Set up a Dreamweaver site on your computer with the remote site being...
Author: Garey Berry
1 downloads 2 Views 20KB Size
How to Create a Dreamweaver Page using a CSS Style Sheet and a Word Document

1. Set up a Dreamweaver site on your computer with the remote site being your Vista space. Directions: 1. Make a folder on your computer for your website. You can call it something like SSC 532 website. 2. Make an Image folder inside that folder as well. 3. Put your CSS file or folder in the SSC 532 website folder as well. 4. Open Dreamweaver and choose “Create New - Dreamweaver site”. Click on the Advanced tab for set up. 5. Give your site a name, such as SSC 532. 6. Browse to the SSC 532 website folder that you created as your Local root folder and the Images folder you created as your Default images folder. 7. All links relative to Document Leave the HTTP address blank and leave the check boxes checked as they are. 8. Click on the Remote Info Category. Under Access, choose WebDAV. Now you will need to get the URL for Vista the WebDAV transfer. 9. Open up Vista and go to the File Manager. Click on the down arrow to the right of the icon and the words that say File Manager. 10. Click on View WebDAV info and copy the URL that appears in the Folder Path box. 11. Paste that URL into the Remote location’s box in your Dreamweaver set up window. 12. Add your Vista Login and Password information. Click Save. Leave all check boxes as they are. 13. Now, when you create a file, it will upload directly to your Vista site from Dreamweaver when you click on the blue up arrow in the Files box. You will see that to the right when you are working on an HTML page.

2. Set up an HTML page using a Word Document and CSS document Directions: 1. Open a New HTML page. 2. Enter content from a Word document, a. Go to the code view (use split screen option in Dreamweaver) and clean up the code by removing unnecessary code. For example: i. remove all the   – which is code for a space; (You can use the find feature and replace with nothing, that is a blank) ii. close any spaces (double click in the space to highlight and press space bar). iii. you can leave in the code for quotes, dashes, etc iv. Tables will need to be formatted separately with a copy and paste from your Word document. 3. Make sure that the CSS style sheet that was created for your pages is in your Dreamweaver site. If not, put it there using your computer’s file manager. 4. Any images that you are using should be put in the Images folder using your computer’s file manager. 5. Attach the CSS style sheet. a. On right side of page find the CSS drop down menu b. On the tool bar at the bottom of Properties, there is an icon that looks like a chain link. If you roll over it you will see “attach style sheet” appear. c. Click on that icon. d. A window will popup requesting the name of your style sheet. Look for the file the ends in the extension, .css. e. Add it as a Link. Do not import it. f. If you have given any media .css style sheets, you can enter those under Media. g. Press OK. Now the style sheet is ready for you to use to format your Word document. 6. Check under Properties that you are showing individual styles that have been defined. If the css styles are not there, go into your Split View, and up into the header section of your HTML page. Look for the path of the link to your css file. It will be something like: . If you see a lot of //// before the file name or the whole path of your computer before the file’s name, the program is trying to make your link absolute instead of relative. Remove all the information about the file’s path except where it is in relation to where the other files on your website are living. In other words, the names should appear to be on the same level with each other in the file structure. 7. Now you are ready to start applying the various formats to your document by applying format or styles to various content on the page.

3. Applying Headings, Lists, and Call-Outs to your Page Directions: 1. Working in Split view, click next to the first word of a sentence that you want to apply formatting to, and then choose what formatting you want to apply. For example, all Titles should be h1. All sub-headers, h2, and so on. Apply the appropriate format by looking at the Properties box at the bottom of the page, then look at the Format box. Choose the Heading that you want to use. 2. Apply a Call-out such as an Assignment, Assessment, Animation, Lab, Discussion, or Readmore by clicking next to that particular item and chooseing the correct Style from the Style box.

4. Creating Tables Directions: 1. If you have a table, click on Insert Table button and choose the format that you want to use in terms of Headers, and then indicate the correct number of Rows and Columns. The Caption box is the header for your table. If you don’t have a header for your table then leave blank. Caption box is bold and centered by default. If you don’t want that, don’t use the caption box. Just enter the Title of the table above the insertion point for the table. 2. Write a brief summary of the table for accessibility purposes. 3. Copy and paste from your Word document the content for each cell of the table. The css style sheet will apply the correct formatting to the table that has been designed. 4. If you need to add a superscript or subscript to an entry, gp tp the edit view, place the cursor where you want the sub or super script to go, and type: x or y. In the Design view you will see your letter or number that you replaced the x or y with, showing as a super or sub script.

5. Inserting Images Directions: 1. Collect the images that you need for a particular chapter and put them into your Images folder under the correct chapter, and then under the Source folder. After you have decided on the correct image size for your page, save the new image in the Chapter folder, but outside of the Soruce folder. Try to keep your Source folder for original images only. You can also put any .png files you create in Fireworks in that folder as well. Be sure and identify the images correctly, eg. prokaryotic cell_smaller.png meaning that it is the smaller version of the original prokaryotic cell. The original may be either a .png, .jpg, or .gif but once you have altered it in Fireworks, the Fireworks image is a .png and you can go back if necessary and modify that .png image. Once you have exported it as a .jpg, you can’t edit what you have done. This becomes important if you need to change Fig. numbers for instance. 2. When you have an image to insert, put your cursor at the place of the insertion, click in the Menu bar on Insert – Image or click on the icon for an Image – Image. 3. Browse for your Image in the folder and choose it. 4. Once the image has been inserted, then you can format it by clicking on the image and then looking at the Class menu, which is also in the Properties box. You can float this image either to the far left or to the far right where the text will flow around it. You can also perform this same function by just placing the cursor next to the picture, and using the Style menu. Again choose either left or right. 5. If you want the image centered, just click on the Center icon next to the Border box. The center icon is not a “float” command, so text will not be able to be placed on either side. 6. If the picture needs to be resized, you can change it in Fireworks from a link on the Dreamweaver page. DO NOT resize it in Dreamweaver using the W and H boxes. That can result in some serious problems with different browsers. In the Properties box click on Edit and choose the Fireworks icon. If nothing happens when you click on the Fireworks icon, you may need to set Preferences to recognize the file extensions of the images you are using. (jpg or .gif). a. Go to Edit – Preferences b. Category – File Types Editors c. make sure extensions of .gif and .jpg have opposite the Editors – Fireworks. If not, add. d. Make sure Fireworks is shown as the Primary editor for a .gif or .jpg extension. If not, then highlight and click on the Make Primary button. e. Click OK. 7. When Fireworks opens you may be prompted if you want to use a .png file. If you have saved your earlier work to a .png, then you can find that file. If you are opening a new .jpg that you just download, say no, since you don’t have a .png file. 8. On the Toolbar, click on Modify and then Canvas and then Image size.

9. Change the pixel dimensions to the ones that you want. I find somewhere around the 250 – 400 pixel range is good. You can click on an image that has been used in a page and see what that size is (it says the size in Dreamweaver’s Properties box. 10. Make sure that the “Constrain proportions” box is checked so that you don’t get distortion of the image. Click OK on the image. 11. Now, on the images box, you will see a button, “Done” next to the words, “Editing from Dreamweaver”. Click “Done “ and you are back to Dreamweaver with a resized image. If the image does not resize automatically after you press “Done”, if you look at your Properties box where the W and H boxes are, you will see a small semi-circle with an arrow. Click on that for the new size to take. 12. If your text doesn’t seem to want to flow around the image, check in Code view and see if you have accidentally inserted a tag before the image command. If so, remove that tag and the text should flow. 6. Inserting Special Characters – Degrees, sup- and super-scripts, Directions: 1. Degrees and other non-Greek symbols: a. Place your cursor in Design view where you want the degree symbol to show. b. Click on Insert in the Menu Bar c. Choose HTML, then Special Characters, and then others. d. Choose from the table that comes up the symbol for degree. (2nd row, col. 1) e. Examine the other characters in that table as well, since you have used several of them in your lectures. This is where you can find them. 2. Greek letters, math symbols, a. Place your cursor in Code view where you want the symbol to be shown. b. Type in the symbol, ampersand (&) c. A list of all the special codes will appear. You will need to scroll through the list to find the items you want. d. Math symbols are almost at the bottom, right before the Greek letters, which are at the bottom of the list. e. You may also notice some other familiar symbols, such as degree, divide, fractions, etc. which can also be accessed this way also.