Dreamweaver & Tables

1. Dreamweaver & Tables Lab 8

2. Our Agenda Today: Lab 8 • Planning & Storyboarding Your Site • Creating Tables • Table Properties • Cell Properties • Page Templating

3. Planning Your Web Site – 6 Key Steps • Define the Purpose • Identify the Audience • Plan the Content • Plan the Site Structure • Plan the individual Web Pages • Plan the Navigation Our focus today

4. How to Start: Planning Content • Before planning content, know the purpose(s) and audience of your Web site. • Other key considerations: load time, navigation, and readability.

5. How to Start: Planning Content • In general, this course requires you to create a site with: • a portfolio, • resume, • an about me/biographical section, • and a resources section. • Other material may be included as well.

6. Storyboarding – Site & Page Architecture • Key Questions: • What content will you include on your site? • How will you arrange your pages’ content? • How will they connect together? • List potential Web pages and form an organizational chart for the site.

7. Storyboarding – Site & Page Architecture • Draw a storyboard of the pages on the site. • Visually represent what will be included on the page and what the overall “story” or message is for each page • Map where you want pictures and text to go. • Write short descriptions where content will be: “my picture,” “paragraph describing work experience,” etc.

8. Storyboarding, Cont. & Design Considerations • It can be very time-consuming to create a Webpage. • Keep it simple, at least for now. (You can always make it more complicated later.) • How will you make the design functional, unique, and appealing?

9. Storyboarding, Cont. & Design Considerations • Aim for consistency. • All of your pages should look like they are from the same site – after all, they are!

10. A Seat at the Table • Tables are a cornerstone of your page’s design – they’re used to organize content on your page’s space. • Tables have rows and columns – you can set these to any number and size you want.

11. A Seat at the Table • Tables (and the cells within them) can be sized using pixels or percentages. • Both of these options have pros and cons.

12. Tables: Using Pixels • Pro: Table size will always stay the same, no matter how big or small the browser window is. • Con: This may mean the table will be much larger or smaller than available space.

13. Tables: Using Percentages • Using percentages means the table will fit itself to that amount of the browser window (e.g., 90% of the width); • This means it will have to compress or stretch space within to accommodate different sizes.

14. Creating a Table • There are two ways to create a table: • Click on the table icon in the Objects palette. (Hit Window, then Objects if it’s not on your screen). • Or, click on Insert, then Table.

15. Creating a Table • There are two ways to create a table: • Click on the table icon in the Objects palette. (Hit Window, then Objects if it’s not on your screen). • Or, click on Insert, then Table. • You can choose the rows and columns in the dialogue box that appears – these can be changed later if you need to adjust, but you ought to have an idea. • “Cell padding” puts a margin between content inside a cell and the edge of that cell (like wall padding). • “Cell spacing” puts a margin between cells themselves (like wall thickness). • “Border” draws a visible line around every cell -- the border will not show if you choose a border size of zero.

16. Creating a Table • There are two ways to create a table: • Click on the table icon in the Objects palette. (Hit Window, then Objects if it’s not on your screen). • Or, click on Insert, then Table. • You can choose the rows and columns in the dialogue box that appears – these can be changed later if you need to adjust, but you ought to have an idea. • “Cell padding” puts a margin between content inside a cell and the edge of that cell (like wall padding). • “Cell spacing” puts a margin between cells themselves (like wall thickness). • “Border” draws a visible line around every cell -- the border will not show if you choose a border size of zero.

17. Edit Your Tables • You can also change tables after they are on the page. • Click the pull-down arrow on the Property Inspector to see cell properties. Click on any cell or combination of cells to edit cell properties. • First, click on the whole table (draws a black box around it) to get the table’s properties. • Do this by clicking on the bottom border of the table or right-clicking in a table and choosing “select” and “table.” • Again, you can change the size of the table, the number of rows and columns, the cell spacing/padding, and the border.

18. More Table Properties • “Align” changes where the entire table is placed on the page – left, right, or center. • “bg” with the file folder lets you choose a background image from your disk. • “bg” with the box next to it lets you set a background color – you can point and choose, or type in the hexadecimal code. • “brdr” lets you set the border color.

19. Cell Formatting • You can set background images or colors and border colors for individual cells by just selecting one cell and using the same functions. • You can also format text and object alignment within cells. • “Horz” is for horizontal alignment – the default puts it to the left in a cell. • “Vert” is for vertical alignment – the default centers it to float within the cell, but you will often want to change that to TOP.

20. Adjusting Cell Size • Under “cell,” you can use icons to merge (combine two or more cells) or split (divide a single cell into two or more) cells. • The borders of merged and split cells in one group will line up with other cell borders within a table, so you may want to use tables inside one another for complicated cell division (like in biology). • The “W” and “H” lets you set the width and height of cells. • Use just a number to set it in pixels (e.g., “40” would be 40 pixels). • Use a number with a percentage sign (no space) to use percents (e.g., “40%”).

21. Using Templates – a Time Saver • Once you have the design of your site and pages on paper, make a basic page with Dreamweaver. • Before making more pages, get everything “right” on this first page so that it looks good and professional, including all required elements. • Now, to save time you can “Save As” several times to create portfolio.html, resume.html, etc. • Once your basic page is ready, you’ll need only to modify it slightly to make others that are similar. • This is know as “templating” (you can save the basic page as something like template.html or stockpage.html so you can reuse it), but it is NOT the same as “Save As Template” in Dreamweaver – you probably don’t wanna mess with that.

22. That’s Plenty • It’s time to start thinking about your site and laying down the foundations. Get some storyboarding done and plan the design and content of your site. • Next lab will learn how to add some advanced functions to our Web sites.