Title and Modify Page Properties

Transcription

1 Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics that looked like:

2 Launch Dreamweaver This screen should be your introductory page when Dreamweaver launches. In the middle of the screen there is a heading labeled Create New and the first choice is HTML. Select HTML. If this is not your intro screen, use the File menu in the upper left corner and select New and from your options select HTML.

3 Title and Modify Page Properties At the top of your new HTML page you will see a text field labeled Title. Place your cursor in the text field and type your name (or whatever you wish to call your HTML page). NOTE: This is not the same thing as saving your page. Next, under the Modify menu select your first option which is Page Properties. At the bottom of the Page Properties preferences you will see text fields for the HTML page s margins. Place a 0 in all four of the margins. This will make sure that all of the contents in our HTML page are flush to the top and corners of a browser window. We don t have time to detail all of the options available to us in the Page Properties preferences but feel free to explore. Everything in place is at a default state. So, Background color is automatically white and Text color is automatically black.

4 Save the page Notice that the tab toward the top left corner of the HTML page reads Untitled-1*. Before we do anything else we are going to need to save our page. Under the File menu select Save. Make sure you save this file in the SAME DIRECTORY AS YOUR IMAGES FILES/PIECES. This will make life much easier on us in a moment. After you are sure you are in the correct directory, save this page as index.htm. When a web browser is pointed at a directory the browser automatically scans for and displays the page saved as index. For example, the path: Inside the ballentine directory is a page called index.htm that automatically loads when the browser is pointed at that directory. In other words, the path could also look like: After saving:

5 Tables The easiest and most effective way to assemble our pieces (and make sure the pieces stay in place) is to use tables. You may have used tables in applications like Word. In HTML, think of tables as empty containers that you can use to hold content whether that content happens to be the images you ve cropped or just some text that you type-in, it doesn t matter. Under the Insert menu select Table. You will see the following preferences menu. All you are doing here is creating a rectangular container to hold the first graphic you cropped out of Photoshop which is your name/title bar. 1 row by 1 column at 800 pixels wide. Enter 0s for the other text fields and hit OK.

6 Tables continued After you hit OK you will see the following: The table is actually the black box. The green lines are just Dreamweaver s way of indicating the size of the table. Place your cursor inside of the table and click. The screen should appear as below: The table border is now displayed as a series of small dashes (almost the size of periods) and the cursor should be flashing in the left corner.

7 Insert an Image Under the Insert menu select Image. Since you saved the index page in the same directory as your graphics you should see all of your pieces as available images. Singleclick on the image that displays your name (in this case top.gif ) and you ll notice that Dreamweaver provides a preview of the image you are about to insert on the right hand side of the screen as below: Click OK and the image will appear in the table as below:

8 Add table #2 After the image is inserted in the table the image is by default selected (as indicated by the black squares). De-select the image by clicking anywhere outside of the image but inside of the HTML page. The cursor should now be flashing next to your image and the green measurement bars should have disappeared. We need to add our next table. In HTML, tables stack. Even though the cursor is flashing next to the first table, when you insert the next table, it will actually appear below the first. So, use the Insert menu and select Table. This time, we want a 2 column table: Click OK.

9 Table #2 continued After clicking OK you will see the following: The 2 column table is automatically divided evenly but we need to declare widths for each side. Remember that our buttons are 150 pixels wide so our left-hand column needs to be set for 150. Place your cursor in the left column of the new table and click. The table will appear as a dashed outline again and the green measurement bars will have gone away:

10 Table Properties At the bottom of the Dreamweaver page the Properties for table #2 should be showing. If the properties are not showing, select the Window menu and check Properties. You will see a capital W with a blank text field next to it. Place your cursor in the text field and type in 150 and hit Enter on your keyboard. You will notice the left hand column of table number two get smaller (150 pixels wide). Next, you will see settings for Horiz and Vert. Select the Vert drop down menu and select Top. This setting makes sure that all of the contents placed into this column will be flush with the top of the column (the default is for the content to be centered). Place your cursor in the right hand column of table number two and click. Repeat the steps but this time enter 650 pixels for the width. Remember to set the vertical alignment to top.

11 Nesting a new Table (Table #3) If we just start inserting the image buttons into the left hand column of table number two we are going to struggle with formatting. HTML allows us to nest a table inside of another table row or column. So, we are going to add our last table into the left hand column of table #2 that will hold all of the buttons in place. Put your cursor in the column and click. Choose the Insert menu and select Table. This time we need a 150 pixels wide table with 1 column and 5 rows (1 row for each button plus 1 for the bottom graphic that is our fading line). It will appear as: Click OK.

12 Table #3 After hitting OK you will see the following: Now all of our containers are in place to hold our buttons.

13 Adding the Buttons Click inside the first row of table #3 and the cursor should flash inside. Inserting these Roll-over buttons is a little different than just inserting an image. Select the Insert menu and then select Image Objects. Another sub-menu will expand to the right and you should see an option for Rollover Image. Select Rollover Image and the following preferences window will appear: There is no need to adjust the Image Name (unless you plan on editing the code by hand later). The original image is the image that should display when a user s cursor is NOT over the button. In this example it is the red version of the image. Select the Browse button next to that field and locate the image. Click OK. The Rollover image is the black version of the button or the version of the button when a user places a cursor on the button. Select the Browse button next to that field and locate the image. Click OK. Alternate Text should contain information that matches the button. Here just type Resume. When clicked, Go to URL is the name of a new HTML page your user will visit after clicking on the button. Even though these pages aren t created, pick a name now as below:

14 Adding the Buttons continued Click OK and you will see: Place your cursor in the next row of table #2 and click:

15 Repeat and Insert the rest of the buttons When you have finished your page should appear as below: Place your cursor in the remaining row and insert the image that is the bottom portion of the faded line.

16 SAVE! We should be saving regularly as we go along Put your cursor in the right hand column of table #2 and enter some text as below: Hit Save again as this will serve as your home/index page.

17 Save As I named my pages resume, portfolio, courses, and contact (all.htm). Now I need to make those pages by simply using the Save As function. Under the File menu select Save As and each time rename the page to one of your needed pages.

18 Making Links Under the File menu select Open and select your resume.htm page. Type in some new text such as Download my resume as a PDF here. Using your cursor, highlight the word here as below: Once again look to the Properties at the bottom of the application. This time locate the area labeled Link. Click on the yellow directory icon next to the text field and locate the PDF (or HTML page) you wish to link to: NOTE: Prior to doing this you must have a copy of your PDF file in the directory with all of your other materials, images, pages, etc. This linking process also works for Word files and of course other HTML pages. You could, for example, just type into the Link text field the URL of another web site such as to create a live link to Case s site.

19 Adding contact info Open your contact page by selecting the File menu and Open. Find your contact.htm page, select it, and hit Open. Add some text for your contact information as below: Notice that there is a large hard return between the name and the beginning of the address. This is achieved simply by hitting the enter key on the key board. The breaks or soft returns after each line of the address are achieved by holding down the Shift key and then hitting the enter key.

20 Adding an link Using your cursor, highlight your address: Once again, return to the Properties at the bottom of the application and place your cursor inside of the Link text field. Type the following: Mine would appear as follows:

21 Testing! Save everything you have worked on and open your index page if it is not already open. Under the File menu select Preview in Browser and another sub-menu will appear with a list of available testing browsers (most likely it is just Internet Explorer which will do). Your page will appear in a new browser window and you should be able to test your pages: Screen shot:

22 FTP (Getting your files online) While the web space is free and we all are entitled to accounts, we do need to register with the Office of Information Technology. Here is the link to do so: You will need to know your (or register for) a Central ID. The ID will be the last portion of your free web space. E.g., my ID is bdb026 and my URL is: community.wvu.edu/~bdb026 There is free software (SSH Software) available to download to do the actual file transferring. The computers in White all have this software pre-installed so you can just use it there once you register your account.