Exercise 1:



CS 1033

Multimedia and Communications

Lab 06: Webpage Tables and Image Links

(Website Design part 3 of 3)

REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!

Table Properties Reference Guide

Read this section to become acquainted with the table properties. Later in this tutorial you will build a website using the following adjustments:

|Table Id |An optional name for the table |

|Rows and Cols |The number of rows and columns in the table |

|W |The width of the table in pixels, or as a percentage of the browser window’s width. You do not need to set the |

| |height of a table as it is controlled by the amount of content in that cell. |

|CellPad |The number of pixels between a cell’s content and the cell boundaries. 0 means that the text will touch the |

| |edges of the cell boundaries. A number larger than 0 will leave space in all four directions in the cell. |

|CellSpace |The number of pixels between the double lines of a table grid. If you don’t explicitly assign values for cell |

| |spacing and cell padding, most browsers display the table as if cell padding were set to 1 and cell spacing were|

| |set to ensure that browsers display the table with no padding or spacing. Set Cell Padding and Cell Spacing to |

| |0. |

|Align |Determines where the table appears, relative to other elements in the same paragraph, such as text or images. |

| |Left aligns the table to the left of other elements (so that text in the same paragraph wraps around the table |

| |to the right); Right aligns the table to the right of other elements (with text wrapping around it to the left);|

| |Center centers the table (with text appearing above and/or below the table); and Default indicates that the |

| |browser should use its default alignment |

| |When alignment is set to Default, other content is not displayed next to the table. To display a table next to |

| |other content, use Left or Right alignment. |

|Border |If you don’t explicitly assign a value for the border, most browsers display the table as if the border were set|

| |to 1. To ensure that browsers display the table with no border, set Border to 0. To view cell and table |

| |boundaries when the border is set to 0, select View > Visual Aids > Table Borders. |

|Clear Column Widths and Clear Row |Deletes all explicitly specified row height or column width values from the table |

|Heights | |

|Convert Table Widths to Pixels and |Set the width or height of each column in the table to its current width in pixels (also sets the width of the |

|Convert Table Heights to Pixels |whole table to its current width in pixels). |

|Bg Image |The table’s background image |

Cell Properties Reference Guide

Allows you to set properties for table elements (cells, row, and columns).

|Horz |Specifies the horizontal alignment for the contents of a cell, row, or column. You can align the contents to the left, right, or |

| |center of the cells, or you can indicate that the browser should use its default alignment (usually left for regular cells and |

| |center for header cells). |

|Vert |Specifies the vertical alignment for the contents of a cell, row, or column. You can align the contents to the top, middle, bottom, |

| |or baseline of the cells, or indicate that the browser should use its default alignment (usually middle). |

|W and H |The width and height of selected cells in pixels, or as a percentage of the entire table’s width or height. To specify a percentage,|

| |follow the value with a percent symbol (%). To let the browser determine the proper width or height based on the contents of the |

| |cell and the widths and heights of the other columns and rows, leave the field blank (the default). |

| |By default, a browser chooses a column width to accommodate the widest image or the longest line in a column. This is why a column |

| |sometimes becomes much wider than the other columns in the table when you add content to it. |

|Bg |Is the background color for a cell, column, or row, chosen with the color picker. |

|Merge Cells |Combines selected cells, rows, or columns into one cell. You can merge cells only if they form a rectangular block. |

|Split Cell |Divides a cell, creating two or more cells. You can split only one cell at a time; this button is disabled if more than one cell is |

| |selected. |

|No Wrap |Prevents line wrapping, keeping all the text in a given cell on a single line. If No Wrap is enabled, cells widen to accommodate all|

| |data as you type or paste into a cell. (Normally, cells expand horizontally to accommodate the longest word or widest image in the |

| |cell, and then expand vertically as necessary to accommodate other contents.) |

|Header |Formats the selected cells as table header cells. The contents of table header cells are bold and centered by default. |

LAB #6 - Tutorial 1

Objectives:

➢ Working with Tables and their properties

➢ Working with Cell properties

➢ Opening a Word Document and using Paste or Paste Special

Copying the Updated Material from the Instructor’s Area:

• Make sure KompoZer is NOT open!

• Download the file lab06.zip from the website () to your memory stick in your cs1033 folder (to F:\cs1033).

• Right click on the lab06.zip file and select Extract all... (or Extract files)

• On the window that appears, make sure the Destination folder is your lab06 folder

o (ex. F:\cs1033\lab06)

• Select Extract or OK (this depends on which unzip program you are using)

o There should now be a lab06 folder in your cs1033 folder, and the lab06 folder should now contain a folder named cross_company.

1. Start KompoZer.

2. Create a Site called “Cross Company Website”, and point it to the folder F:\cs1033\lab06\cross_company\

3. In your Site panel on the left side you will see the new website you just created. See all the files as indicated.

If you have been using your memory stick from other labs then you may see the remaining file folders as well.

4. Create a new file called “index.html”. Make sure you save it in

the folder: F:\cs1033\lab06\cross_company\

This will be the homepage of the website you are about to create.

5. If you don’t see the index.html file in the Site panel, then click on the Refresh button in the site panel.

[pic]

6. Set the property title to be “H. Cross Company – Home”. You do this by selecting from the menu bar Format> Page Title and Properties and filling in the Title field.

Create a Table

1. At the beginning of your document, press the “Enter” key a couple of times, simply to make some space in the beginning of your file.

2. To insert a table, from the menu select Insert >Table. In the dialog box, click on the Precisely tab, so you can enter the following values into the appropriate fields:

• Rows: 3

• Columns: 2

• Table Width: 780 pixels

• Border thickness: 0 pixels

• Then click on the Advanced Edit to set some more table properties that you can set.

• Click on Cell spacing and go to bottom of the dialog box and enter a Value of 0

• Set Cell padding: 0

• Press OK

3. A table is created that looks like:

[pic]

The lines are dotted because the parameter “Border Thickness” is set to 0, so there is no visible border.

Select a Table

To change the properties of a table you must always:

a) First select the table

b) And then Edit the values for the table:

1. To select the table, Right-click on any table cell, and select Table Cell Properties. A dialog box opens and you click on the tab Table.

2. The dialog box reflects the characteristics of that table, so that you can modify it if you choose. If you click on the Cells tab, it will show you the characteristics of that cell you were in before initiating the command.

Editing a Table

Be sure to read the “Table Properties Reference Guide” and “Cell Properties Reference Guide” at the beginning of this document at some point after the lab to familiarize yourself.

1. Merge the two cells in the first row combining the two columns to form one cell. To do this, highlight the two cells in the first row, Right-click and select Join Selected cells.

2. Into this cell, insert the image banner_top.jpg (it is in images sub folder) and set:

• Alternative text: H. Cross Company

• Tooltip: H. Cross Company

• Click OK to exit from dialog box.

3. Preview the page and hover over the image and rest your mouse for a few seconds. Watch the Title text show up momentarily and then it disappears.

4. Go back to KompoZer.

5. Delete the last row in the table

• Highlight all the cells in the last row of the table, and right-click with your mouse. From the pop-up box, select Table Delete > Row. The last row should be eliminated.

• Undo the operation by entering Ctrl-Z.Now to see another way to delete a row quickly. Click on the cell in the first column bottom row. You will see an icon. Click on the middle part with the “x”.. this deletes the entire row.

•

•

•

•

•

• You are left with one row below the banner.

6. Adding Menu Buttons

• First you have to create space for the menu buttons to fit into the row below the banner. Since each menu button was created in Photoshop and saved as an individual image we need to make the last row in the table as a single cell, so you will be joining the two cells.

• Highlight the two cells, and Right-click and select Join Selected Cells

• Click on this joined cell, and insert image images/but_home.jpg

Set Tooltip: H. Cross Company Home

Set Alternative text: H. Cross Company Home

Click OK

Add about 4 spaces (press spacebar)

Add rest of menu buttons as follows (what’s in parentheses is the ToolTip and Alternative text information):

• Images/but_companyhistory.jpg (H. Cross Company – Company History)

• Images/but_news.jpg (H. Cross Company – News)

• Images/but_purchasing_policy.jpg (H. Cross Company – Purchasing Policy)

• Images/but_catalog.jpg (H. Cross Company – Catalog)

• Images/but_contactus.jpg (H. Cross Company – Contact Us)

[pic]

7. Setting Links on Menu Buttons

We have provided you with the webpages for these links.

• Save your file index.html

• Click on Home image, and Right-Click and select Create Link

• The dialog box appears. Click on the folder icon and select the index.html file.

• The homepage will always be pointing to a file called index.html (which we have created and are still working on since it is open)

• Click OK.

• Repeat the above steps and create the links for the menu buttons.

• Company History: Link to ( company_history.html

1. News: Link to ( news.html

2. Purchasing Policy: Link to ( purchasing.html

3. Catalog: Link to ( catalog.html

4. Contact Us: Link to ( contactus.html

|Tip for Assignment 2: VERY IMPORTANT! |

| |

|Since you will not be given ready made webpages (.html) files for the assignments, you still should link them to something when creating your |

|navigation menu. |

| |

|If we did not provide you with the files for: Catalog, instead of pointing to the file in the dialog box, simply type the name of the file |

|i.e. catalog.html, company_history.html, news.html, and etc. So it creates files names but they are empty placeholders pointing to |

|filenames. Once they are all linked, continue with setting up the rest of the homepage with all the tables etc. (which you are doing in this |

|lab) and then you can save the index.html file over and over again as company_history.html, news.html, and etc. since the menu system is in |

|place. |

| |

|And they will link to each other regardless of which webpage you are on. |

|But remember you will have to change the property title for each page as you learned during last lab. |

| |

5. Save the file as index.html and Preview it in browser.

8. Next you will be adding another table below this banner so you can keep one table with the banner/menu buttons separate from the content section in case you want to do some drastic edits in redesigning your layout.

• Place your cursor at the end of the first table.

• Press the Enter key four times so you can leave some space between the tables.

• This will allow you to work with the separate tables more easily. (You will eliminate the space later)

• From the menu, select Insert > Table, and create a table with width=780, border=0 and 2 Rows and 2 Columns.

9. Place your cursor at the left top cell of the second table. You can use each cell for any purpose i.e. adding images, paragraphs or simply leaving it empty.

• But you will now enter the following text in the top left cell:

“H. Cross Company is a specialty metal rolling company fulfilling customers' needs for 65 years. We sell our products to a worldwide customer base.”

It will look like this perhaps depending on what you may have done to your webpage. Either way you need to adjust the column width.

• See how the cell width where you inserted the text is very narrow. You need to adjust the width of this cell.

To do so, hover over this spot (the ruler guide on top of the page) until you see a bidirectional arrow… and drag it to the right to get a nice column layout. When you release the mouse it will stretch it to exactly the position you moved to.

[pic]

10. Save the file as index.html and Preview it.

11. Next replace this content in the left column with an image called

“ images/side_bar.jpg” and assign Tooltip and Alternative text to “H. Cross Company - Products”. And this is what you will end up with.

You are not going to link these buttons to anything, since you would need a technique called Image Maps, and KompoZer is not capable of executing this.

But in case you didn’t want the menu buttons along the top, you would individually insert the buttons down the left side and after each button add a Shift-Enter line (a break line)

Bring the two tables together

12. Up until now you had two separate tables separated by whitespace. To remove this space, position your mouse between the two tables and using the Delete or Backspace keys, delete the spacing until the tables come together. Note that they remain two separate tables.

Save the file index.html. (In case you still have a space between the tables, you will have to go into the source code and look for a line break tag … Ask the TA to help you).

Add the content to the webpage – Paste vs. Paste Without Formatting

13. In the cell to the right of the side image you just entered, you will add paragraphs. In order to avoid typing a lot of text, the text is saved in a Word document you copy it from and paste it into the webpage.

• Your KompoZer session is still active with the index.html webpage.

• Open the Word document using MS Word: “content for cross company.doc”

• Highlight the text, and copy it.

• Switch over to KompoZer. Click in the cell to the right of the side navigation bar, and paste into the cell by Right-clicking on your mouse, and selecting Paste.

Notice how the text looks identical to the Word version. It copies over all the Word formatting. Never do this as some browsers interpret things and may cause your webpage not to look right. (on a Mac you may not get the formatting perhaps)

14. Undo this operation by hitting Ctrl-Z.

15. Put the cursor back in that same cell and right click and this time just pick Paste Without Formatting. IF YOU DO NOT SEE THIS OPTION, then KompoZer got glitch on you. First save the file, and then close KompoZer and restart it again and open up index.html and follow through with the instruction again.

Notice that all the formatting is not copied over this time. This allows you to format things within KompoZer with your choices.

Change the vertical/horizontal alignment of the text within the cell.

You probably have noticed that the content does not start at the top of the cell, and even you try to delete the space before it, you’ve discovered that there are no empty lines to delete. This happens because the text is centered by default within that cell because one of the other cells on that same row has more height. (In this case it is the side bar image that occupies more lines than the text you just copied).

16. To force the text to the top of that cell (vertical alignment):

• Right-Click in the cell, and select Table Cell Properties.

• In the dialog box, set the field “Vertical” to “Top”. (notice that there are other options as well, you can play these options now, but return it to “Top”). On a Mac the setting may be Top by default.

17. To change the horizontal alignment of the text within the cell:

▪ In the dialog box, set the field “Horizontal” to “Center”. (Notice that there are other options as well) Never leave paragraphs centered. Always have them left aligned or right-aligned if there is an artistic reason for it.)

18. Your file should look like this.

19. Change it to Left Alignment

20. Save the file as index.html.

Change the Cell Padding

21. In order to demonstrate column adjustments, set the grid line between the two columns to look like the picture.

Since the text runs into the edges of the cell, you need to add some padding in that cell.

22. Right-click in the rightmost cell (that contains the paragraph) and select Table Cell Properties.

23. Then click on Table tab at top of this dialog box.

24. Set the cell padding to 20. (You are exaggerating so that you can see what is affected.

25. Notice how the left column also gets padding as well as every cell. If you do not want that space between the left edge of the table and the image, you will have to set the padding to 2 or something less, and then adjust the column width to give the extra “simulated” padding you need.

26. Set cell padding to 2.

27. Change the cell spacing to 10 and watch what it does. Then set it back to 2.

Positioning text/images in table by inserting a nested table

28. Add a nested table to this cell: Click in the same cell but click after the last paragraph “…radar systems and many more” add a couple of “Enter”s.

• Now insert a nested table in this cell by selecting from the menu Insert > Table with width=90% and 1 row by 2 columns (you can add as many rows and columns as you may need).

• To set table alignment to the left of the cell, double-click on cell. In the dialog box, click on the Table tab, and then set Table Alignment to Center (you can play with the other two options as well)

29. Save your file and preview it in the browser. Notice that it is neatly aligned.

Add another image inside this nested table

30. Place your mouse inside the SECOND column and first row of the nested table.

31. From the images folder, insert the image “uncle_charlie_ad”.

Set the alternative text and Tooltip to Uncle Charlie.

32. Copy the first paragraph from the content and paste it into the first column of the nested table.

33. Save your file and preview it in the browser. Notice that the text doesn’t start at the top of the cell. Change it so it does by setting Cell property Vertical Alignment to Top.

Turning an Image into a Link to another webpage

34. Right-Click on the image of “uncle_charlie_ad.jpg” and select Image Properties.

35. Set the link field to “history.html”

You are linking an entire image to the file.

36. Preview your page in the browser and make sure the link works.

Changing the table background color, cell background color and page background

Change the Entire Table Background:

o Right-Click in any cell of the lower table (that contains the nested table or sidebar) and select Table or Cell Background Color.

o In the dialog box, check Table.

First click on a color in the color palette and then you can set the Hex: value to: #16018A and click OK.

Notice how the entire table takes on the blue color. And the font color is black on blue.

o Next change the table cell background color to a white by Right-clicking in the right cell and selecting Table or Cell Background Color.

o In the dialog box, check Cell. First click on a color in the color palette and then you can set the Hex: value to:#FFFFFF and click OK.

To change the Cell(s) Background color of the Inner table (you can use the steps as outlined above, or follow the next steps):

▪ Highlight the cell of the inner table containing “uncle_charlie_ad”.

▪ Select Table or Cell Background Color.

▪ In the dialog box, check Table.

▪ First click on a color in the color palette and then you can set the Hex: value to:#FCE49C Notice how the entire inner table takes on the light cream color.

▪ Since the webpage doesn’t quite look balanced with the top navigational links, you can set the entire right hand side of the webpage (i.e. the cell containing the “nested” table of the company description) to white. Use the Cell Properties/Table properties of the inner table and cells to make the right hand portion white.

▪ Next change the table cell background color to a dark blue. (hex#0b017c), by clicking somewhere in the cell between buttons Catalog and Contact us (i.e. in any space between the items of the navigational bar). And Then right-click Table Cell properties. In the dialog box, Set the background color by checking it off and this allows you set the color hex#0b017c

▪ You should end up with something like this:

[pic]

• Eliminate the empty blank line between the menu bar and the lower table to bring it together by hitting delete and backspace.

• Other options, are you can set the entire upper table to the same blue as the menu bar, or change the menu bar to another color so that the blue buttons show. The choice is yours as to do whatever you want. But for now, follow with the rest of the instructions.

To change the Page Properties background

▪ Click anywhere on the webpage, and select from the menu “Format>Page Colors and Background”, and from dialog box:

▪ You can change

o the Normal text color

o Link Text color (how links appear… you may want to remember this when working on your assignment)

o Active Link Text (how links appear when you click on it … you may want to remember this when working on your assignment)

o Visited Link Text (how link appear after you visited it. Keep this the same as the Link Text color for uniformity)

▪ Set the Background color to “#E3C096”. Preview the page in the browser. Watch the webpage jump out at you because the entire page background sets the webpage apart.

[pic]

To create a rollover effect on links:

In this section, you will be shown how to create a rollover link. It assumes that you have two images of a button with a difference in color perhaps.

For Example: In the case below, the buttons are identical in shape and size but not in color. They are labelled:

but_company_history.jpg, and but_company_history_mo.jpg where “mo” stands for “mouse over version”. However, you can call your images anything you want.

[pic] [pic]

or but_processing.jpg, and but_processing_mo.jpg where “mo” stands for “mouse over version”. However, you can call your images anything you want.

[pic] [pic]

1. Click on the menu button Company History you already had inserted it before.

2. Right-click on this button, and select Image and Link Properties. A dialog box will open.

3. Click on Advanced Edit button.

4. To create the effect:

Under dropdown: select name

Value: companyhistory (you can give whatever text name you want but remember it)

Click on tab JavaScript Events

5. To create the effect, from the Attribute dropdown, select onmouseout.

For value: type panyhistory.src='images/but_companyhistory.jpg'

Note companyhistory is associated with step 4 above name. They must match.

6. Repeat step 5 with the table as you see it below:

[pic]

7. Then click OK.

8. Preview the page in the browser to see if the rollover effect works.

9. Save the file and close the application.

CONGRATULATIONS YOU ARE DONE WITH THIS TUTORIAL

BRING YOUR OWN HEADPHONES TO THE REMAINING 4 LABS!!

-----------------------

IMPORTANT: Tooltip is actually called setting the Title parameter associated with the image. When in any browser (ie. Firefox) when you hover on the image, it displays the title setting you gave it.

If you look in the Source code, you will see the following code:

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download