Eng 110, Spring 2008 Week 03 Lab02- Dreamwaver Session Assignment Recreate the 3-page website you did last week by using Dreamweaver. You should use tables to control your layout. You should modify fonts, colors, and alignments to accomplish this. Use the knowledge you learn from Tuesday/ Wednesday s lab session, to create a nice looking and well-design website. For example, the text and colors should be legible and matching (don t mix neon green and bright purple), and the text is properly aligned no matter the sizing of the browser. If you have your button created from the Photoshop lab, you could use that for navigation. Open Macromedia Dreamweaver 1. Under the Create New menu, select HTML 2. A new blank webpage appears. Go to View menu and make sure Code and Design is checked. The result should look like the screen below. 1
The Interface CODE VIEW Design VIEW 1. The upper screen is the code view and the lower screen is the design view. 2. Click the curser in the design view and type some text followed by a hard return (push enter). What do you see? In the design view, the text you typed appears much like it would in a word processor document. In the code view you will see that Dreamweaver is inserting the necessary HTML code to make your webpage appear as it does below. It has added <p> tags around your text. In the design view this gives a double spacing between paragraphs. What if you wanted to use a <br /> tag instead of the <p> tag? You can press Shift + Enter and DW will insert a line break instead of starting a new paragraph. 2
3. You can work seemlessly between the design view and the code view. Insert the curser immediately after one of your <p> tags (not </p>). Press Space bar. You will notice a drop down menu shows different attributes that can be associated with the <p> tag. Some of these you have seen, others you have not. Select align. Then another drop down menu shows all the possible alignments of the paragraph tag. Select right. Now, although the code is there the design view doesn t display it. You can either click the refresh button on your properties pane or simply click in the display view. If you don t see your properties pane at the bottom of the screen, go to Window and make sure Properties is checked. 3
4. Now look at the Properties pane. You will notice a number of buttons. Most buttons give you a quick way to make text bold, italic, right aligned, left aligned, centered, unordered lists, ordered lists (ideal for making outlines), fonts, sizes, text color, text format (paragraph, h1, h2 etc). Properties Pane Making tables 1. Save your work and go to File and New. Make sure basic page and HTML are highlighted and click Create. 2. Save your new document to the desktop 3. Now on your blank document go down to the Properties pane, select manage styles. 4
4. Click on Attach and browse for the style sheet (style.css file) you created last week. Save the style sheet file at Desktop. Right Click CSS Style Pane, and select Attach Style Sheet. CSS Style Sheet 5. Now we want to set up a table that can be used to format the layout of our website. Tables are commonly used on professional websites to separate navigation from content. The orange lines show how a table might be framing the content of this website. The trick is to set the cell sizes and to merge cells to create larger blocks for content. Notice 5
also that the browser window is wider than the content. In other words, the content doesn t stretch out to the extent of the window width. This is also a more professional practice because if the content gets stretched beyond what is optimal, text wrapping from paragraphs of text can adjust the height of columns leaving undesirable results. 6. In Dreamweaver, at the top of your screen you should have the insert pane visible. If not go to Window and make sure Insert is checked. 7. As the name implies, in this pane there are many items you can insert into your webpage. For example under the forms tab you can insert buttons, text boxes and check boxes instead of typing <input type= text name=...> every time. You can explore some of these options as you work on your research project later. For now, under the common tab, press the Insert table button (looks like a grey waffle). 8. Something like this will appear (it may be a little different). You can specify the # of rows and columns to start the table. Under Table width you see that you can specify the width in pixels or percent. Pixels will set the absolute size of your table, just like the website example above. Percent will scale the table to the width of the browser screen, meaning it will also stretch text fields and resize the table in the vertical direction. 6
9. You can now edit the column width and height by clicking and dragging on the column or row lines. You can also easily type text into the cells you wish. For other options regarding tables you should explore the Properties pane. 10. Reshape your table to be similar to the example above by merging cells. To merge cells you highlight the cells you want to merge, right click on the cells, go to table--> merge cells. Merge the first row of cells. Next merge cells under row 2 and between columns 3 and 6. Also merge cells under row 2 and between columns 7 and 10. Manually set the last two column widths to be 320 pixels. 7
11. Enter text into each of the 9 rows of column 1, similar to CNN.com. Then enter gibberish into one of the two large cells to the right so that it extends the height of the 9 cells to the left. It either extends the height of the second row... Or if you click out of the cell it extends the height of the last row. Either way, this is undesirable given that you want the height to be constant for a left side navigation. 12. Highlight the second column below the second row and merge cells. Click the curser in the newly merged cell. In the insert pane press insert table. Specify a table of 1 column and 9 rows 8
You will find that now you have a navigation that is independent of the size of the content to the right. It is a table within a table cell. 13. Save your file. 14. Now you can copy-paste the html code you made last week in the code view. After you edit the code, you could click Refresh button to see the result on design view. 15. You could 16. To preview how the table will look like on a browser press F12 17. Save your file. 18. Repeat the instruction, and create another webpage file until you finish your 3-page website. MORE ABOUT DREAMWAVER Make More hyperlinks Highlight some text, at the Properties Panel, click the folder icon. The following screen will appear. 9
If you want to create a link between another webpage you have created you can simply browse for the file on your computer. If you want to create a link to an outside page you need to enter the full URL into the URL text box. A strange file name will appear in this dialogue box, but you can ignore it and push OK. Manage Style As you learned in Chapter 3, style sheets is a more useful way of specifying appearance than inline specification (<body bgcolor= yellow >). DW makes it easy to manage and set up styles. 1. If you haven t already done so, highlight some text and change the font, color, and size. After you do this, you will notice that the Style drop down menu in the properties pane says style 1 roughly appearing as your style should appear. By default, DW creates a new style of text for you so that at any point in the future of your document, you can highlight text and select this style and it will appear the same. Look at the code that DW inserted into your HTML document. 10
2. Notice first that the text you highlighted and changed, became a span element with a style class of style1. This is the generic inline tag you learned in chapter 3. Next look at the internal style sheet that was created in the head element. It created a generic style called.style1. You learned how to create custom classes in style sheets like p.nouppercase or p.intro. This code allows the style definition of.style1 to be used with more than just the <p> tag. You can specify in the body <h1 class= style1 > or <td class= style1 > and the text will appear exactly like style1 3. Now in the Style drop down menu in the Properties pane and select Manage Styles.. You will see style1 there. Select it and click on Edit.. 11
This dialogue box shows all the possible specifications for this style. You will see your specifications for style1 are already selected. Other options are available like creating an overline, underline, etc... just about anything you ever wanted to do with a style. Navigate through some of the options, change some things and see what effect it has on your text in that style. 4. You can also make style tables by clicking outside of the table (unselect anything on the table). Go down to the properties pane and go to manage styles. Edit the style sheet you linked to this page previously. Select Edit the <td> tag. Go to Block and select baseline vertical alignment. Click ok and done out of everything. 5. Notice that now the table within the cell is now vertically aligned in the middle. You might want to avoid this when you are creating a webpage. 12
Go back to the manage styles dialogue box Click on New... Under Selector Type, If you select Class you will create a generic style class like style1 that can be applied to multiple tags. In the Tag drop down menu, you can type in the name of this class such as style2 or yellowtxt. select Tag you will create a style definition for a specific tag like <h1>, <p>, <td>. The Tag drop down will contain all the possible tags that you can specify styles and 13
classes. Under Define in, If you select (New Style Sheet File) you create your style in an external style sheet select This document only you create an internal style definition in the head element. From ch. 3 you should know the difference between these two. Select Tag under selector type, Select td under Tag, and define in New Style Sheet File and press OK 6. Save your new style sheet file on the desktop. 7. Now you will see a fresh style definition dialogue box. Select the Block Category on the left and specify the vertical alignment to be top. Now for all table data tags, your vertical alignment will be top. If you wanted to create a class of <td> tags you can go back and create a generic class using the same process as described above. TOP 14
If you want to learn more about Dreamwaver, go to Bspace->Resources->Labs->Labs, you can download the tutorial ( Dreamwaver Module.pdf. ) 15