WELCOME Ladies & gentlemen

1. WELCOME Ladies & gentlemen YOUR LESSON WILL BE TAKEN FROM THE GOOD BOOK OF BARBARA & LISA

2. WHAT IS A TABLE?WHAT IS A TABLE?What is a table? What is a table? What is a table? What is a table?

3. OH NO…NOT A DINNER TABLE

4. YES, HTML TABLES. NOW WHAT DOES IT DO?. • A table is made up of columns and rows and it is used to organize our data on the world wide web. • LETS EXPLORE FURTHER INTO WHAT A TABLE CAN DO…..

5. A TABLE IS • HTML Tables • Tables are defined with the <table> tag. • A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). • tdstands for "table data," and holds the content of a data cell. • A <td> tag can contain text, links, images, lists, forms, other tables, etc.

6. TO CREATE A TABLE LETS OPEN UP DREAMWEAVER

7. BUILDING A BASIC TABLE • With your top strengths open from week 2 select File>New from the dropdown toolbar.

8. In the New Document window set the DocType to HTML 5 and press “Create”

9. Give it the title Strengths Table and save it in your wk 4 folder

10. If you’d like you can add a title at the top of the page with some space underneath.

11. Save As

12. If you’d like you can add a title at the top of the page with some space underneath.

13. Add a table by selecting Insert>Table

14. In the Table menu put the following optionsRows: 5Column: 3Table Width: 850Header Left

15. Cut and paste your strength information from week 2 into the appropriate cell (The divided blocks from the table). This might require some adjustment to the text.

16. Text Alignment If you’d like to change the alignment of your text it is a simple procedure.

17. Hover over the final column in your table. When it is outlined in red and there is a black arrow pointing down click once to select.

18. The cells of that column should now have a black outline

19. Chose format from the drop down and select Align>Justify

20. ADDING A COLUMN OR IMAGE IN A TABLE

21. From your 10 portfolio photos select the five that best suit your strengths and save in myRoot>images. It should now show in your File menu on the right.

22. Click on a cell in the right column. Then select Insert>Table Object>Insert Column to the Right.

23. Click on one of the empty cells and the select Insert>Image form the drop down toolbar.

24. Locate the image, select it and press open

25. In Alternate Text give a one word short description (with no spaces description on the image.

26. With the picture still selected go to the Property menu at the bottom of the screen and make sure the W +H (width and height) are locked.

27. Make lock is on

28. Change the W to 200

29. To correct the alignment of the table click anywhere outside the table. The table should now have adjusted for the new size of the picture. You can add when after we finish building the table.

30. Picture align corrected

31. REMOVING THE GRID/BORDER AROUND THE TABLE

32. Hold your curser over the boarder until it turns red and click.

33. The boarder should now be black with square markers.

34. Down in the properties menu change the Boarder setting from 1 to 0.

35. Click outside the table.

36. The table will now appear with dotted lines in Dreamweaver but be invisible on the web.

37. But be invisible on the webBorder/grid removed

38. WHAT IS CSS?

39. CSS Tutorial for Beginners - part 1 of 4 - Applying Stylhttp://www.youtube.com/watch?v=Wz2klMXDqF4 CSS is a Cascading style sheet that is used to set styles, colour and size of text. It is also used to border around an object.

40. CSS STEPS

41. Select a cell from the dropdown select Format>CSS Style>New

42. A dialog box should appear.

43. In the Sector Name field give your style a name with no spaces.

44. In the Rule Definition dialog box select type.

45. Select the colour dropdown and choose a colour.

46. SELECT APPLY FIRST then hit OK.

47. Click ok

48. To change another cell to match first select the cell. From the dropdown select Format>CSS Style> your style.

49. Thank You