Intermediate HTML Using Dreamweaver

Transcription

1 Intermediate HTML Using Dreamweaver Technical Support Services Office of Information Technology, West Virginia University OIT Help Desk: (304) , Last revised: May 25, West Virginia University

2 Table of Contents Course Description... 1 The Big Picture... 2 Course strategy... 3 Tables... 3 Creating a table... 3 Changing a table s properties... 5 Changing the number of rows or columns... 5 Changing table or cell width or height... 6 Sorting a table... 6 Changing other table properties... 6 HTML for tables... 6 Border, cellpadding and cellspacing... 7 Width... 8 Content Alignment... 8 Rowspan and Colspan... 9 Colors Selecting colors Text color Link and visited link color Background images Fonts Font size Font face Page Properties Div and Span tags Inserting Div tags Selecting a div Span tags Using Dreamweaver s built-in layouts Creating a page using a built-in layout... 19

3 Course Description In Intermediate HTML Using Dreamweaver CS4, we will add to the basic concepts that were covered in the introductory workshop. Topics that will be covered today include color specifications, the use of tables, setting a page title, the use of div and span tags, and Dreamweaver tools for editing your page. Throughout, we keep in mind the distinction between page content and page format. The web development training curriculum includes the following courses: Introduction to HTML Using Dreamweaver Intermediate HTML Using Dreamweaver Web Site Tools in Dreamweaver Cascading Style Sheets Creating Accessible Web Pages Introduction to Web 2.0 Thank you for attending today s workshop, The OIT Technical Support Services Trainers Intermediate HTML Using Dreamweaver 1

4 The Big Picture No, this section is not about incorporating large images into your web pages, but instead reiterates the approach we are using in all of the training courses in the web development curriculum. The key idea is that the content of your web page (that is, the information that you wish to convey to those who visit the page) is considered, developed, and stored separately from the specification of the page s design or format. Page Content: Text, pictures, links, tables, and other elements that contain the information presented by the web page. Stored in a hypertext markup language (html) file. Preparing the content file consists of inserting the content elements and labeling them using the tags in the hypertext markup language. For example, the language provides a means of denoting that a particular chunk of text is to be treated as a link. When a web browser encounters text labeled as a link, it puts the text on the screen in a manner that allows the person visiting the page to recognize the presence of a link and follow it if he or she wishes. Page Design: Colors, fonts, positioning, backgrounds, borders, and anything else to do with the appearance of the content elements. Stored in a cascading style sheet (css) file. Preparing the design file consists of specifying the attributes of appearance that are to be associated with content labeled in a particular way. For example, it is customary for links to appear blue and underlined on screen, but one could choose to present them in a different way by altering the attributes associated with the link label. Dreamweaver provides a means of creating each of these files through its graphical interface, but to understand fully how the page design controls the appearance of the page content, one must know something about the hypertext markup language. That s why we ll be looking both at the graphical, or design, view of a page and the html code that underlies the page. There s one other point to be made. Anyone looking at a typical page can easily pick out most of the content elements because they are distinguished visually. For example, we are accustomed to seeing paragraphs that are indented or separated from one another by some blank space in order to indicate where one paragraph ends and the next begins. Likewise, pictures, tables, and links are easily spotted. But to gain full control over the page s design through labeling the page s content and do so efficiently we need a mechanism for labeling a group of content elements or a group of characters. In a book, there might be sections or chapters containing a group of paragraphs along with any pictures and tables related to that portion of the book s content. In html, there are divisions and spans. A division, labeled with the tag div, consists of a contiguous block of content, possibly including other divisions. A span, labeled with the tag span, is a consecutive sequence of characters within the content 2 Intermediate HTML Using Dreamweaver

5 file. We ll get a better understanding of div and span as we work with them in this course and later ones in the web development sequence. Course strategy In the introductory course, you saw how to incorporate paragraphs and headings, ordered and unordered lists, links, and images into a web page using Dreamweaver, and how those elements were labeled using html tags. In this course, we ll start by looking at some additional elements in isolation specifically, tables, colors, divisions and spans, and page titles in order to see how Dreamweaver facilitates our work with them and how html represents them. Then we ll put these elements together in the construction of a web page. Along the way, we ll also look at some of the tools that Dreamweaver provides for editing a page. We ll do this work in a brand new Dreamweaver site, set up as described in the introductory course. Tables Tables are the customary means of presenting collections of related data in an organized format. Note: In the past, tables have been used to control the layout of an entire web page, not merely the portion of the page on which an array of data appears. Using tables as a layout tool has even been presented in earlier versions of our OIT web development workshops. However, we now strongly recommend that style sheets be used to control layout, while tables are reserved for their original purpose, which is to present collections of data. Creating a table After positioning your cursor at the point in the page where you want your table to appear, create the table in Dreamweaver in one of these ways: 1. Select Table from the Insert menu. 2. Press Ctrl-Alt-T on your keyboard. 3. Select Table from the Common category in the Insert panel. Whichever means you use, the following window will appear, allowing you to set the initial attributes of the table. Any of these attributes can be changed later, but it s easiest to set them now. Ultimately, design attributes like the table s width, border thickness, cell padding, and cell spacing should be controlled by your style sheet. Intermediate HTML Using Dreamweaver 3

6 The number of rows and columns will depend on your data and can easily be changed later if you find you have more or less data than you originally thought. The numbers include any header row or column. Table width can be expressed in pixels or as a percentage of the width of the page element containing the table. If the width is expressed in pixels, then it will have that width regardless of the size of the browser window in which it is viewed. If expressed as a percentage, then the width will usually grow or shrink with the window s width. Specifying that the table has a header, which may consist of row or column labels, will facilitate formatting the header so that it stands out from the rest of the table. The table s caption will appear on the web page, just above the table. The summary may provide additional information about the table s contents, but is not included on the page. The summary may be helpful to a visually impaired person accessing the web page using a screen reader. Click OK when you have made your choices in the Table window. 4 Intermediate HTML Using Dreamweaver

7 At the bottom of the preceding page, you ll see how this table might look on your web page after some cells have been filled in. Notice the caption appearing above the table and the bold text used by default in the header cells. Changing a table s properties Changing the number of rows or columns Our example table has already acquired an additional row. If your cursor is in any cell of the table, then pressing the Tab key on your keyboard will move the cursor to the next cell, working left-to-right and then top-to-bottom. If your cursor is in the bottom right cell of the table, then a new row will be created and your cursor placed in its leftmost cell. This is the most straightforward way to add just the number of rows you need at the end of a table. Pop-up menu. More generally, one can use the context sensitive pop-up menu to insert or delete rows or columns. Start by placing the cursor in the row or column following the location where you want the new rows or columns to appear. Right-click and go to the Table submenu of the pop-up menu. From there, you can select the option appropriate to the action you want to take. If you choose Insert Rows or Columns you ll be presented with a window allowing you to insert a specified number of rows or columns either before or after the cursor s location. Property sheet. With the entire table selected, the property sheet displayed at the bottom of the Dreamweaver window will be that for the table as a whole. You can change the number in the Rows or Cols field to add or remove rows or columns from the bottom or the right side of the table, respectively. Intermediate HTML Using Dreamweaver 5

8 Changing table or cell width or height As usual, there are multiple ways to change width or height attributes of a table or its cells. These are attributes that, ultimately, you will probably want to control using a style sheet, but the Dreamweaver interface gives you easy ways to experiment with different table specifications. Click and drag. The most straightforward way to alter the dimensions of a table, row, or column is to move the mouse cursor over the boundary of the component you wish to change. When the mouse cursor changes to a two-headed arrow, hold down the left mouse button and drag the boundary in the direction you want to take it. Property sheet. With the table selected, so the table s property sheet appears at the bottom of the Dreamweaver window, you will find four tools on the bottom half of the property sheet that pertain to table width and height. Those tools are circled in the screen capture on the right. If you move your mouse cursor over a tool, a tooltip will appear on the screen, briefly describing the tool s function. The left hand tools in the two rows will clear column widths or clear row heights. That means that the widths or heights will be adjusted so that they are just large enough to accommodate the data currently in the table. The two right hand tools in the top row will convert the table s width specification from pixels to percent or vice versa. The conversion will be based on the current layout of the table, and will affect the table s behavior in response to changes in the size of the browser window in which it is viewed, as described above in the section on creating a table. Menu. The Modify menu can also be used to adjust widths and heights. With the table selected, go to the Table submenu of the Modify menu. There, you ll find all the options offered by the tools on the property sheet. (If you have difficulty selecting the table with your mouse, you can also use the Table submenu of the Modify menu to select the table. That option is the top item on the submenu. Sorting a table You can sort a table in Dreamweaver by selecting Sort Table from the Commands menu. Changing other table properties Other table properties include features like cell padding and spacing, borders, and alignment. If you look at the table s property sheet, shown above, you ll see that these features can be changed there. Our recommendation, though, is that you use a style sheet to control these design aspects of the table. HTML for tables We ve seen how to create and manipulate tables using Dreamweaver s graphical interface. Now we ll take a look at the underlying html code used to label a table s contents. 6 Intermediate HTML Using Dreamweaver

9 Here are the basic tags that are used together to create a table: Tag: Function: <table> <caption> </caption> <th> </th> <tr> <td> </td> </tr> </table> starts a new table starts the table s caption closes the table s caption starts a header cell closes a header cell starts a table row starts a table cell closes table cell closes table row closes the table Example Tags: <table> <tr> <td>apples</td><td>peaches</td><td>pears</td> </tr> <tr> <td>oranges</td><td>bananas</td><td>grapes</td> </tr> <tr>apricots</td><td>plums</td><td>kiwis</td> </tr> </table> How it looks in a web browser: There are several table and cell attributes that will allow you to shape the table and its contents to achieve a specific look. Border, cellpadding and cellspacing These three attributes appear in the table tag if you alter the table s properties directly, rather than through the use of a stylesheet. We ll look at them now in preparation for considering the same attributes in the context of stylesheets. Table border specifies the thickness of the border that frames the entire table. Cellpadding determines the amount of open space between each cell s contents and the cell s border. Cellspacing determines the amount of open space there is between each cell in the table. Below is an example of all three uses in the same table along with the HTML code: Intermediate HTML Using Dreamweaver 7

10 Cellpadding Cell #1 Cell #2 Border Cellspacing <table border=10 cellpadding=20 cellspacing=20> <tr> <td>cell #1</td><td>Cell #2</td> </tr> </table> Width Width is another table attribute that can be specified within the table tag. Notice that the % sign is added after the number, if you want to specify the width as a percent rather than as a fixed number of pixels, and the entire number value is enclosed in quotes. Tag: Function: <table width= 100 > <td width= 25% > specifies the table s width to be 100 pixels specifies this cell s width will be ¼ of the enclosing object s total width Content Alignment You can align the contents of entire rows or specific cells by using either a horizontal (left, center, or right) or vertical (top, middle, bottom, or baseline) alignment command in either the <th> or <tr> or <td> tags. Example: 8 Intermediate HTML Using Dreamweaver

11 Tags: Function: <tr align= left > <td align= left > Will horizontally align the contents of the entire row or an individual cell on the left, subject to the cell padding specification <tr valign= middle > <td valign= middle > Will vertically align the contents of an entire row or an individual cell in the middle of the cell(s) Rowspan and Colspan You can arrange for the contents of a cell to span multiple columns or rows. T Tags: Function: <td colspan= n > n specifies the number of columns the table cell will span <td rowspan= n > n specifies the number of rows the table cell will span Example using Colspan <table border="1" cellpadding="3" cellspacing="3"> <tr><td align="center" colspan="3">this goes across the top</td></tr> <tr> <td align="center">cell #1</td> <td align="center">cell #2</td> <td align="center">cell #3</td> </tr> </table> Example using Rowspan <table border="3" cellpadding="3" cellspacing="3"> <tr> <td ROWSPAN="2" align="center" Width="75">Down the side</td> <td align="center" Width="75">Cell #1</td> </tr> <tr> <td align="center" Width="75">Cell #2</td> </tr> </table> Intermediate HTML Using Dreamweaver 9

12 Colors Colors on a web page are clearly an aspect of design rather than content (unless, I suppose, color is the subject of the web page), so control of color should generally reside in a style sheet. We ll look at color in the context of tables in order to see how colors can be specified using either Dreamweaver s graphical interface or html code. The same core methods are used to specify color attributes in style sheets. Discussion of colors in web pages used to be dominated by so-called web-safe colors, a set of 216 colors out of the spectrum one could usually count on a display to be able to reproduce. Thanks to technological advances over the past two decades, the range of colors that can be displayed even on handheld devices is far greater than on a standard monitor in the past. As a result, the importance of restricting oneself to web-safe colors is greatly diminished. Nonetheless, this history of color selection is reflected in the set of colors made most readily available through Dreamweaver s graphical interface. Color notation reflects the historical use of red, green, and blue phosphors in the coating of a cathode ray tube. Colors other than pure red, green, or blue were produced by exciting multiple phosphors to different degrees. The contribution from each color of phosphor is represented by a hexadecimal, or base 16, number, whose digits are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. In different situations, Dreamweaver uses either a 6-digit or a 3-digit notation. In either situation, the first third of the sequence represents the red contribution, the middle third represents green, and the final third represents blue. Here are some examples. Color 6-Digit Code 3-Digit Code Red #FF0000 #F00 Green #00FF00 #0F0 Blue #0000FF #00F White #FFFFFF #FFF Black # #000 Yellow #FFFF00 #FF0 The original web-safe colors correspond to 3-digit codes in which each digit is one of 0, 3, 6, 9, C, or F. With 6 choices for each of the 3 digits, there are 6 x 6 x 6 = 216 possibilities altogether. The # symbol is not part of the color notation itself, but always precedes a color code when it appears in a html file or style sheet. You can use these hexadecimal colors to give your site a colorful background, color text, or specify the color of hyperlinks. One element that should be considered when adding color to your site is readability. Certain text and background color combinations can make reading difficult. Experiment with different combinations to find a few that allow your content to be displayed effectively. Selecting colors While you can always type the code for your chosen color, Dreamweaver often provides a convenient color picker that makes the most commonly used colors available to you. 10 Intermediate HTML Using Dreamweaver

13 For example, depending on the position of the cursor or the portion of the page that has been selected, you should see a property sheet for the appropriate region of the page, such as a table cell or row or column. Within that property sheet, you ll find a field labeled Bg (for background ) adjacent to a square and a rectangle, as shown in the screen shot to the right. The white rectangle is a space where you could type a color code. The square provides access to the color picker. Click on it to open the picker, which is shown to the right. Move your mouse over the picker and click on the color you want to use for the background of the selected portion of your page. The corresponding code will automatically be supplied. If you are working on a table and look at the code for it, you ll see something like one or more of the following examples. Tags: How it will look in a web browser: <table bgcolor= #FFFF00 > <tr bgcolor= #3399CC > <td bgcolor= #FFFF00 > The same bgcolor attribute can be used with any tag that governs a region of your web page. For example, to use a color as a background for the entire page, set a value for bgcolor in the body tag. Tag: How it will look in a web browser: <body bgcolor= #ffffcc > (pale yellow) Intermediate HTML Using Dreamweaver 11

14 Text color While you can specify the color of text for the entire page within the body tag by typing an appropriate attribute into Dreamweaver s code view of the page, most attempts to color text will lead you inexorably into the use of styles. Here is an example of how to use code view to specify a default font color for a page. Tag: <body text= #238E23 > (forest green) How it will look in a web browser: The most straightforward way to choose a different color for certain text on a page is as follows: 1. Select the text to be colored. 2. Select Color from the Format menu. 3. Choose the color in the Color window and click the OK button. At this point, the New CSS Rule window will open. 4. We ll work in this window much more extensively when we take on cascading style sheets directly. For now, it suffices just to give a name to our selector that is indicative of its intent. Since our intent right now is to color text, a name indicating the chosen color makes the most sense. After typing the name, click OK in the New CSS Rule window. Having been through this process once for a given color, you can more quickly apply the same color to other textual elements on your page by selecting from the Class menu 12 Intermediate HTML Using Dreamweaver

15 in the Properties sheet. You ll find that each time you create a new CSS rule of the sort specified above, a new entry for it will appear in the Class menu of the Properties sheet. The next screen shot shows a Properties sheet after creation of the red rule exemplified above. Link and visited link color As with the background and text colors, you specify the color of hyperlinks and visited links within the body tag. All links on the page will conform to the specified color selections. By default in HTML, links are blue and visited links are purple. Ordinarily, one would want to color links consistently throughout a page, so the link colors would be specified in conjunction with the body tag or, of course, through a style sheet. Examples Tag: <body link= #23238E vlink= C0C0C0 > (navy blue link, grey visited link) How it will look in a web browser: Background images You can use an image for the background of your web page. If the image is small, the browser will automatically tile the image, that is, reproduce it in columns across the page. Like colors, using images as backgrounds can also significantly hinder the readability of your page. Unlike using a single color, most images are made up of many colors that may not affect readability on one section of the page, but may greatly hinder readability on another section. Use background images with care. An example appears on the next page. Intermediate HTML Using Dreamweaver 13

16 Tag: How it will look in a web browser: <body background= trout_bg.gif > Fonts Like colors and background images, fonts and their attributes are aspects of a page s design, not its content, and thus are properly and most effectively controlled in a style sheet. We cover them here to introduce the ways in which fonts can be specified for a web page. Font size HTML and style sheets provide several ways to specify font size, either in absolute terms or relative to the current default size. This table illustrates the options: Point size Relative size HTML text size HTML relative text size 10 xx-small x-small/smaller Small 3 Default 18 Medium/larger Large 5 +2 ~36 x-large 6 +3 ~36 xx-large Intermediate HTML Using Dreamweaver

17 Here are some examples of these choices put to work in a HTML document: Tag: <font size = 6 >Size 6 Font</font> (Font sizes range from 1 to 7, with. 3 as the default font size) <font size= +4 >Plus 4</font> How it looks in a web browser: <font size= -2 >Minus 2</font> Font face You can specify a specific font to use for the entire body of the page or a particular section or item. To do so for the entire page, open the font tag after the body tag and close it just before closing the body tag. Example: <font face= Comic Sans MS >... text to be presented in the specified font... </font> You can also list alternate fonts. When the page is loaded, the browser will display the first available font. If none is available, the browser s default font will be used. Separate fonts in the list with commas. Example: <font face= Comic Sans MS, Arial, Tahoma >... text to be presented in the specified font... </font> As with text color, though, the most straightforward application of a font choice using Dreamweaver s Design view will lead to creation of a new style. 1. Select the text to be presented in a different font. 2. Select Font from the Format menu. Intermediate HTML Using Dreamweaver 15

18 3. Choose the font from the Fonts submenu. At this point, the New CSS Rule window will open. 4. We ll work in this window much more extensively when we take on cascading style sheets directly. For now, it suffices just to give a name to our selector that is indicative of its intent. Since our intent right now is to use the Arial font or its relatives, a name indicating the chosen font makes the most sense. After typing the name, click OK in the New CSS Rule window. Having been through this process once for a given font, you can more quickly apply the same font to other textual elements on your page by selecting from the Class menu in the Properties sheet. You ll find that each time you create a new CSS rule of the sort specified above, a new entry for it will appear in the Class menu of the Properties sheet. Page Properties We ve seen several aspects of a page s appearance text and background colors, background image, font, font size that we can alter for specific elements of the page. For the most part, though, our pages will be more pleasing aesthetically and thus more effective if we establish a consistent appearance from which we stray only when an element requires particular emphasis or special handling. Go to Page Properties to set the default features of the page s appearance. You can visit these properties in either of two ways: 1. Select Page Properties from the Modify menu. 2. Click on the Page Properties button on a Properties sheet. Either choice leads to the Page Properties window, shown below. 16 Intermediate HTML Using Dreamweaver

19 You can work your way systematically through the attributes presented in each category of this window to set your page s default appearance. You ll find some overlap in the attributes presented in the Appearance (CSS) category and those in the Appearance (HTML) category. Because these attributes are indeed aspects of the page s appearance, we strongly recommend that you control them through the CSS category. Div and Span tags Each of the attributes that we ve looked at has been associated with a specific tag that serves to determine the scope of the attribute. An attribute associated with a p tag applies to the entire paragraph. An attribute associated with the body tag applies to the entire page. But what if, for example, we wanted the attribute to apply to several paragraphs or to only part of a paragraph? In the former case, it would be possible, though tedious and inefficient, to apply the attribute to each of the several paragraphs. In the latter case, we need some way to specify a scope consisting of an arbitrary sequence of characters within a paragraph or other block of text. The div and span tags solve these problems. Use the div tag to group together several block elements (like paragraphs, headings, tables, and images) for common treatment. For layout purposes, div tags are often used to control the position of selected content on the page. The scope of a div tag cannot include only a part of any block element. That is, for example, if part of a paragraph is within a div tag s scope, then the entire paragraph must be. Dreamweaver will act to ensure that div tags are applied properly. Inserting Div tags The Dreamweaver interface provides two means of inserting div tags: Intermediate HTML Using Dreamweaver 17

20 1. On the Insert menu, go to Layout Objects and then select Div Tag from the submenu. 2. In the Insert pane, select Insert Div Tag from either the Common or Layout tool sets. Here s how to use one of these options: 1. Either position your cursor at the location where you would like to create a new empty div, or select the existing block elements that you would like to incorporate into a new div. 2. Insert the div tag using one of the two methods listed above. In either case, the following window will open: 3. If you selected page content in step 1, then the Insert field of the window will contain the text Wrap around selection, as it does here. If you merely positioned your cursor in step 1, then the Insert field will contain At insertion point. If you have already defined classes, such as to set text color or a particular font, the you can choose one of those classes from the Class menu. When you have made your selections, click the OK button. The Design view of your page will display a dotted outline around the page elements that constitute the scope of each div tag. Here is an example, in which the div encompasses a table and the paragraphs immediately before and after the table: 18 Intermediate HTML Using Dreamweaver

21 Selecting a div If you want to select a div in order to alter its properties, the easiest way to do so is to use the tag sequence that appears immediately below the Design view window. For example, if your cursor is positioned in one of the data cells of the table in the example above, then the tag sequence will look like this: The sequence indicates those tags within whose scope the current cursor position lies, beginning with the broadest scope (<body>) and working down to the narrowest (<td>). In the screen shot above, the div tag has been selected, so it is that div s properties sheet that is displayed below the tag sequence. Span tags For the most part, unlike div tags, you will not need to insert span tags manually. Instead, Dreamweaver will insert span tags for you when necessitated by the page design choices that you make. For example, if you select a section of text that does not match an existing paragraph and make formatting choices for that section of text, then Dreamweaver will set the scope of a span tag to match the selected text and record your formatting choices as attributes of the span tag. Here is the code produced by Dreamweaver when the words the last were colored red: <p>this is <span class="red">the last</span> paragraph.</p> Using Dreamweaver s built-in layouts Dreamweaver provides a large collection of page layouts that use style sheets to control the arrangement of content on a page. We re going to look at them now because: 1. They will let us create sophisticated pages with minimal knowledge of style sheets, and 2. They will illustrate and let us work with many of the page elements that we ve talked about so far in the web development workshop sequence. Creating a page using a built-in layout The procedure for creating a page using a built-in layout is very simple: 1. From the File menu, select New. 2. In the New Document window (shown below), select Blank Page from the leftmost column and HTML from the Page Type column. 3. In the Layout column, select a possible layout and judge from the preview that is presented whether the layout meets your needs. Once you have decide on a layout, be sure it is selected and then click the Create button. The example below comes from the layout named 3 column elastic, header and footer. Intermediate HTML Using Dreamweaver 19

22 20 Intermediate HTML Using Dreamweaver

23 As you may be able to guess just by looking at the layout, there are at least five divs in the page, for the header, footer, main content, sidebar1, and sidebar2. Less apparent from the layout is that there is a sixth div that encompasses all of the page content, but you can tell that it is there by looking at the tag sequences below the Design view when you place your cursor anywhere in the document. Now that the layout is set for you, you can modify the content to meet your own needs. Intermediate HTML Using Dreamweaver 21