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:
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.
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 we will return to Page Properties when it comes time to make links. So, Background color is automatically white and Text color is automatically black.
Save the page Notice that the bar toward the top of the HTML page reads Untitled. 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. Dreamweaver will automatically append the.html extension. 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: http:community.wvu.edu/~bdb026/ Inside the root directory bdb026 directory is a page called index that automatically loads when the browser is pointed at that directory. In other words, the path could also look like: http:community.wvu.edu/~bdb026/index.html After saving:
Centering Since we created our design in Photoshop to be centered on the page we will need to set up our HTML page to do the same. Look to the Preferences at the bottom of the page and click the Center Alignment icon as in the image below. You also have the option of clicking on the Text menu at the top of the screen, selecting Align and then Center. Either way you should see your cursor move to the middle of the page surrounded by box with a dashed line (as below). Don t worry, the box will not show up as part of our final design.
Tables (Table #1) 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 top bar or title bar. 1 row by 1 column at 800 pixels wide. Enter 0s for the other text fields and hit OK.
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.
Insert an Image pt. 1 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.jpg ) 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 Choose.
Insert an Image pt. 2 After clicking Choose you will be prompted to enter Alt tag information. Alt tags are written descriptions of the image itself. Each image can have its own Alt tag associated with it. These tags are very important for web users with disabilities who rely on the Alt tags to describe what they are viewing. When we use images as links or buttons it is especially important to describe what the links do. In this case I ve kept it simple and described this image as the PWE Top Graphic. Type in some text and click Ok. You should see: To prepare for the next step, click just outside of your newly inserted image.
Add table #2 After the image is inserted in the table the image is by default selected (as indicated by the black squares). Make sure the cursor is 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.
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 left hand menu was designed to be 200 pixels wide so our left-hand column needs to be set for 200. 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:
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 200 and hit return on your keyboard. You will notice the left hand column of table number two get smaller (200 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 600 pixels for the width. Remember to set the vertical alignment to top.
Nesting a new Table (Table #3) If we just start inserting our remaining images into the left and right hand columns of table 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 just two more tables into our design one into the left hand column of our new table and one in the right. They will both be 2 ROWS and 1 COLUMN. The table on the left will be 200 pixels wide and the table on the right 600. Put your cursor in the left column and click. Choose the Insert menu and select Table. This time we need a 200 pixel wide table with 1 column and 2 rows. It will appear as: Click OK.
Table #3 continued After hitting OK you will see the following: Table #4 Put your cursor in the right hand column of table number 2 and repeat the process. This time, the only difference will be that your 2 Row by 1 Column table will be 600 pixels wide. When you are finished it should appear as:
Adding more images Click inside the first row of table #3 and the cursor should flash inside. We need to adjust the table Properties once again at the bottom of the page. We know form our design that the menu we created and cropped for the left-hand menu is 250 pixels high. Adjust the Vert alignment to Top and adjust the height to 250. Hit return and your page should appear as:
Adding a Background Image Rather than just inserting your Left Menu image as a regular image (the way we did with the top image earlier) we are going to insert it as a Background image. As a background, we will be able to type over the top of the image and add the text for our links and buttons. Make sure that your cursor is inside of the top row of table number 3 (the table you just adjusted) and click on the icon in the Properties window that allows you to brose for your background image. (See below). Once you locate your image and click OK your page should appear as step 2 below.
Adding images continued The bottom portion of the left menu can be inserted simply as a regular image. Place your cursor inside of the lower row of table number 3 and adjust the Vert setting to Top as before. Next, click Insert from the top menu bar and find Image. Locate your image (here, bottomleft.jpg) and click Choose. You will be prompted to add Alt tag text. Your page should appear as below:
Repeat and with Table #4 Repeat this same process for table number 4. Place your cursor inside the first row of the table and adjust the height to 250 and the Vert alignment to Top. Insert your appropriate background image. Place your cursor in the second row of table number 4 and adjust the Vert alignment to Top. Use the Insert menu at the top of the screen to insert your remaining image. Your final page should appear as below: SAVE!
Adding buttons and text Place your cursor in your menu area of your design. For this example I m just going to type Menu and then Buttons 1, 2, 3, 4. Hit return after each entry. Notice that your text is black and set to a Times style font by default as below: Our next step will be to create a style sheet to format our text.
CSS Style Cascading Style Sheets (css) can be created as separate files (with a.css extension) or embedded right in your HTML page. Dreamweaver allows for both. In this example we are going to great a separate.css file called pwe.css that we could potentially use to create uniform formatting across many many pages for a consistent look and feel. Don t worry, Dreamweaver makes it easy. From the Text menu at the top of the screen select CSS Styles and then New from the subsequent menu. You will be prompted to Name your new style. I named mine leftmenu and clicked OK. You will be prompted to name your CSS file. Again, I called mine pwe. Any new style that you create can be added to and stored in the pwe.css file. Leftmenu is just one style.
CSS continued After successfully creating your style (leftmenu) in your new style sheet (pwe.css) you are ready to define some of the style characteristics (rule definitions) you would like associated with leftmenu. The screen below automatically appears asking you to provide some parameters. Use the menu bar on the left hand side to toggle between categories. In this example we are only going to add to the first screen Type and then click on the third option, Block. Below I selected Veranda as the font at size 18 and I changed the color to White. Next, click Block.
CSS continued (block) The only change that I ve made to the Block category is to adjust the Text Indent which I ve set to 20 pixels. This will give us some space between the edge of the graphic and the menu text. Click OK In order to apply your style to your menu text, use your cursor to highlight and select the text in your menu. Click the Text menu at the top of the screen and select CSS Styles and you should see an option for leftmenu. Select it and your highlighted menu buttons will change to your style sheet settings as below:
The pwe.css File Notice that Dreamweaver creates and opens your new.css file. If you click in its tab to view the contents all you will see is the code that defines your new style. The only thing that you need to concern yourself with here is to remember that when it comes time to load all of your HTML pages and JPG images up to the web you will need to also include this.css file.
Adding another Style Next we are going to create one more style for the text we will add in our main text area. Return to the Text menu and select Css Styles and New. You will be prompted to once again name your style but the biggest difference is that Dreamweaver will ask you if you would like to define this new style inside of your already created pwe.css style sheet. In the screen shot below I ve named my new style maintext but notice the Define in setting is pointing at pwe.css. Make life a little easier on your self and leave it be and click OK.
CSS Style #2 maintext I m only making changes to two categories for this style. The Type I am again selecting Veranda but at 12 points and set to black. Under the Box category I am setting the padding around the text to 20. Click ok.
CSS Style #2 testing To test my new style I went online and grabbed a bunch of text to paste into my text area. After pasting in the text, I selected it and clicked the text menu and found CSS Styles followed by maintext. Your page should appear as below.
Making Buttons Since we were good designers and planned out our pages before we started designing we know what kind of content we d like to have. Maybe one page will be courses and another will be research. Maybe you want a contact button and definitely a home button. At this point rename your buttons and write down what you would like to name all of your HTML pages. E.g., research.html and contact.html. Here s what I came up with:
Making Links To make text an active link you will need to highlight each button separately. In the example below, I ve selected the Courses button. Once again look to the Properties at the bottom of the application. This time locate the area labeled Link. Since I know that I m going to create a page called courses.html that is what I will enter. Remember, no caps or spaces At this point you may link to external web sites like Google just by typing in http://www.google.com and it will become a live link. This linking process also works for Word files and PDF pages. In this example I just completed linking up my home page (which is simply my index page) and I automatically get that default bright blue underlined link. In the next step we will take control of our link appearances
Formatting your Links At the top of the screen find the Modify menu and select Page Properties. From the available categories select Links. Here you can make many changes to the appearance of your links including their colors both before and after they ve been clicked on as well as whether or not they change color when a user places his or her cursor over the link. Here I ve set the link color to white, the visited color to a light gray and the rollover color to a saturated yellow. Click OK and you links will change in appearance automatically.
Formatting your Background Color Since many of your viewers will be seeing this page in a format larger than 800 x 600 we will need to adjust the rest of our background color to match with the rest of our design. Once again, select the Modify menu from the top of the screen and select Page Properties. Under the first category of appearance locate the text field for your Background color. Recall from our Photoshop design that the value for our dark blue was 000336. Enter that value and hit OK. See below:
Using your page as a Template Now that your index page contains all of your live links and has all of the proper formatting you can use it as a template to create all of the other pages you know you need to link to. Simply use Dreamweaver s Save As function and make multiple copies of your index page renaming each time to the needed page, e.g., research.html. The only thing that you will change from page to page is the main text or content. All of the links in the menu should stay consistent.
Adding contact info If you created a contact page or want to add your contact info on your home page type in your email address and highlight as you would to create a regular link. In the Link text field of the Properties inspector type in mailto:youremail@mail.wvu.edu. The mailto command will automatically launch an email client when clicked on in a browser. 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. Rather than hitting the return key, hold down the shift key and then hit return. Hit it twice for a hard return and once for single or soft return.
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. Your page will appear in a new browser window and you should be able to test your pages: Screen shot:
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: http://www.systems.wvu.edu/web/community/ 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.