1. ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 7

2. Spanning Rows and Columns with HTML/XHTML Tables Recall from Last Week

3. Rowspan and Colspan Spanning Table Columns Navigation on the left... Modules: Module 1 Module 2 Module 3 Content on the right... Module 2: Layout with Tables Blah blah blah, content content content, blah blah blah, content content content, etc. etc. etc., content content content, blah blah blah, content content content, etc. etc. etc., content content content, blah blah blah, content content content, etc. etc. etc., content content content, blah blah blah, content content content, etc. etc. etc. <-- Back | Next --> Displaying Tabular Data (cont.) th { font-family: Arial, Helvetica, sans-serif; color: #FF0033; background-color: #FFCC00; text-align: left; padding: 10px; } td { vertical-align: top; padding: 10px; } h2 { color: #FF0033; } a:link { text-decoration: none; } a:visited { color: #FF0033; text-decoration: none; } a:hover { color: green; text-decoration: underline; }.selected { font-weight: bold; }.navigation { width: 200px; height: 600px; background-color: #FFCC00; }.bottom_nav { background-color: #FFCC00; text-align: right; font-weight: bold; }

4. Rowspan and Colspan Spanning Table Columns Navigation on the left... Modules: Module 1 Module 2 Module 3 Content on the right... Module 2: Layout with Tables Blah blah blah, content content content, blah blah blah, content content content, etc. etc. etc., content content content, blah blah blah, content content content, etc. etc. etc., content content content, blah blah blah, content content content, etc. etc. etc., content content content, blah blah blah, content content content, etc. etc. etc. <-- Back | Next --> Displaying Tabular Data (cont.) th { font-family: Arial, Helvetica, sans-serif; color: #FF0033; background-color: #FFCC00; text-align: left; padding: 10px; } td { vertical-align: top; padding: 10px; } h2 { color: #FF0033; } a:link { text-decoration: none; } a:visited { color: #FF0033; text-decoration: none; } a:hover { color: green; text-decoration: underline; }.selected { font-weight: bold; }.navigation { width: 200px; height: 600px; background-color: #FFCC00; }.bottom_nav { background-color: #FFCC00; text-align: right; font-weight: bold; }

5. Use colspan=“ n ” when you want a table cell to span n columns (see example on previous slide). Use rowspan=“ n ” when you want a table cell to span n rows. Displaying Tabular Data (cont.)

6. Dreamweaver Site Setup Dreamweaver!

7. Dreamweaver Site Setup STEP 1: Create New Dreamweaver Site

8. Dreamweaver Site Setup Before After: Click Next > to continue Name your site Your URL is http://userwww.sfsu.edu/~[your account name] Since my account name is “rayc”, my URL ends with “~rayc” STEP 2a: Site Name and URL STEP 2b: Site Name and URL

9. Dreamweaver Site Setup Click Next > to continue In this class, you won’t be using server technology, so leave this radio button set to “No.” You want to Edit local copies Create a folder on your computer where you will store your web pages prior to uploading them to the web server, then specify its full path here STEP 3: No Server Technology STEP 4: Edit Locally, In Specified Folder

10. Dreamweaver Site Setup STEP 5a: Select FTP STEP 5b: Hostname, Folder, Login Info Use FTP (the File Transfer Protocol) to connect to the web server Hostname is: apollo.sfsu.edu Folder is: public_html FTP login is your SFSU email account name (not including “@sfsu.edu”) Do not click Next > yet! Your FTP password is the same as your SFSU email password

11. Dreamweaver Site Setup STEP 5c: Click the Advanced Tab STEP 5d: Hostname, Folder, Login Info Do not click Next > yet! Click the Advanced tab Click Use passive FTP to avoid possible problems with your home network’s firewall, then click Test

12. Dreamweaver Site Setup STEP 5e: Can Dreamweaver Connect? STEP 5f: Click Basic Click OK on the dialog, but do not click OK on the Advanced tab! After clicking Test, you should see this dialog if Dreamweaver is able to connect to the web server Click Basic to return to the Basic tab

13. Dreamweaver Site Setup STEP 5g: Click Next STEP 6: Disable Check In/Out Click Next > to continue Dreamweaver’s check in and check out features are designed to prevent two people from editing the same file at the same time. Since you’ll be working by yourself on your project, you won’t need to enable this feature. Leave this set to “No.”

14. Dreamweaver Site Setup STEP 7: Validate Settings Click Done to complete your site setup There’s nothing to do here except validate that your settings are correct. Look them over, then click Done Congratulations, your Dreamweaver site is now set up and ready to use. It should appear now in the Files panel on the right:

15. Creating Web Pages with Dreamweaver Authoring with Dreamweaver

16. Creating a New Web Page There are a couple of ways to create a new web page in Dreamweaver, including: Under Create New on the Dreamweaver startup screen, click HTML, or… Click File  New…

17. Authoring with Dreamweaver Creating a New Web Page If you use File  New…, Dreamweaver will present you with a dialog that contains a list of items similar to the list on the startup screen. From this dialog, choose Blank Page in the first column, HTML in the second, in the third, and a DocType of XHTML 1.0 Transitional, which is the specific XHTML standard you’ll be validating your pages against in this class. Most of these values are the default values. Click Create to complete your selection.

18. Authoring with Dreamweaver Creating a New Web Page Whichever method you use, you will end up with a bare- bones XHTML 1.0 Transitional web page ready to go in your edit window.

19. Dreamweaver Views: Code, Split, and Design Authoring with Dreamweaver

20. Dreamweaver Views Intro to Dreamweaver Views Dreamweaver can show you the page you are authoring in any of 3 different “Views”: Code Split Design Select a view by clicking the appropriate button.

21. Dreamweaver Views Code View Code view lets you directly edit the XHTML code for your web page, just as if you were editing it in a simple text editor, but with the advantages of color-coding, end-tag completion, and other time-saving features.

22. Dreamweaver Views Design View Design view hides the XHTML tags. Instead of directly editing the code, you are able to edit the page in a WYSIWYG (What You See Is What You Get) environment. It can also act as a kind of simple preview if you want to quickly check how your code looks when rendered.

23. Dreamweaver Views Split View Split splits your edit window into two halves and places the code view in one half and the design view in the other. In some ways, this gives you the best of both worlds, but at the expense of being able to see only half as much code/screen at a time.

24. Uploading and Downloading Web Pages To and From the Web Server Authoring with Dreamweaver

25. Uploading to the Web Server Uploading Your Files to the Web Server There are a couple of ways to tell Dreamweaver to upload your XHTML page to the web server. One way is to find the page in the Files panel on the right, click on its filename, and then click the up arrow to upload it.

26. Uploading to the Web Server Uploading Your Files to the Web Server When the dialog box comes up asking if you want to upload dependent files, click Yes. Dependent files are files (like the CSS file) that are associated with the file you are uploading. If you forget to save your file before trying to upload it, Dreamweaver will ask you if you want to save before uploading. Usually you’ll want to answer Yes.

27. Downloading from the Server Downloading Your Files from the Web Server Find the page in the Files panel on the right, click on its filename, and then click the down arrow to download it.

28. Viewing Your Uploaded Files Authoring with Dreamweaver

29. Downloading from the Server Your Web Site’s URL You can view your web page by entering the basic URL for your web site, followed by the name of the page. In this example, the basic URL for your SFSU web site will always be: http://userwww.sfsu.edu/~[your account name] My account name is “rayc”, so my base URL is http://userwww.sfsu.edu/~rayc To reach the testing.html page, I need to enter http://userwww.sfsu.edu/~rayc/testing.html into my web browser. Doing so brings up the page.

30. XHTML Validation, CSS Terminology and Scope Graphic Hyperlinks, Nested Tables This Week:

31. The XHTML 1.0 Transitional web standard is maintained by the World Wide Web Consortium, popularly known as the W3C. Helpfully, the W3C has an automated code-validator at its web site: –http://validator.w3.org/ Just enter the URL of your page and click Check. XHTML Validation

32. Things the Validator Will Complain About

33. Don't Put <h1> Inside <p> Don't Put headings inside paragraphs It's not legal to put headings inside of paragraphs. Headings must appear outside of paragraphs. Headings Can’t Be Inside Paragraphs

34. Don't Put Lists Inside Paragraphs Don't Put Lists Inside Paragraphs It's not legal to: Put lists inside of paragraphs Lists must appear outside of paragraphs. Lists Can’t Be Inside Paragraphs

35. Don't Cross Different Open and Close Tags Don't Cross Different Open and Close Tags If you open two or more tags in a row, without an intervening close tag, you must close the most recently opened tag first. So this is legal: <b><i>This text is in bold and italic.<i><b> But this is not: <b><i>This text is in bold and italic.<b><i> Open1 Open2 Close2 Close1

36. The validator will also complain about: Uppercase letters in tag or attribute names Missing “/” at the end of empty tags such as,,, etc. Missing alt attribute in img tags Missing tag Unclosed non-empty tags And, of course, anything else that violates the XHTML 1.0 specification. Other Validator Complaints

37. CSS Terminology and Scope

38. The various elements of a CSS rule have names: blockquote { font-style: italic; } Selector Property Value CSS Terminology

39. Each CSS rule has “scope” that the browser uses when two rules specify different values for the same property. Example: CSS Scope i { color: aqua; } b { color: red; } Will this font be rendered in aqua or red? How about this font?

40. Each CSS rule has “scope” that the browser uses when two rules specify different values for the same property. Example: CSS Scope i { color: aqua; } b { color: red; } Will this font be rendered in aqua or red? How about this font? Answer: red Answer: aqua The CSS rule associated with the tag closest to the content “wins.”

41. Page Types and Reserving Screen Areas with Tables

42. Interactive Interview: Redone Most professionally-created e- learning is “page-oriented,” meaning that it doesn’t scroll. Further, certain design principles generally hold, including: Course titles, navigation, and other controls appear around the edges of the screen. When working with the content of a single interactivity, never separate a click and its response onto different pages Tables make adhering to these design principles easy.

43. Interactive Interview: Redone In this re-do of our Interactive Interview page-type from a few weeks ago, the page has been organized into a table: Top row: Course Title Middle row: Content Bottom row: OSD and Nav The middle row has 2 columns. In the left column are the questions the learner can click to ask. The right column initially is blank or (in this case) contains an image that will be replaced with the answer after the learner clicks a question.

44. Interactive Interview: Redone After the learner clicks the first question, the answer appears in the right column. How is this implemented?

45. Interactive Interview: Redone After the learner clicks the first question, the answer appears in the right column. How is this implemented? Answer: This page is a duplicate of the first page, with only the contents of the second cell of the middle row of the table changed. Everything else stays put, so it looks like only the left column of the middle row has been updated. In fact, the whole page has changed. It’s just that the other parts of this page are the same as they were on the previous page.

46. Interactive Interview: Redone Here’s the answer page the learner sees after clicking the second question. Notice how the bottom edge does not leap up, but instead stays put. There is a blank space at the bottom of each cell in the middle row that keeps the bottom edge in place. How is this achieved?

47. Interactive Interview: Redone Here’s the answer page the learner sees after clicking the second question. Notice how the bottom edge does not leap up, but instead stays put. There is a blank space at the bottom of each cell in the middle row that keeps the bottom edge in place. How is this achieved? Answer: With a CSS class applied to the first cell in the middle row:.content { height: 500px; }

48. Interactive Interview: Redone Here’s the last page. Like the others, it has a nice border around only the outer edges of the table. How is this achieved?

49. Interactive Interview: Redone Here’s the last page. Like the others, it has a nice border around only the outer edges of the table. How is this achieved? Answer: With CSS border properties: table { border-top: solid; border-top-color: black; border-right: solid; border-right-color: black; border-left: solid; border-left-color: black; border-bottom: solid; border-bottom-color: black; }

50. Graphic Hyperlinks and Nested Tables Links, Nested Tables

51. Graphics can be made into links by surrounding the tag with anchor tags ( ). Also, table cells can contain nested tables. The blue cells on the top, left, and bottom, plus the large white area are constructed of one table. The page title (“What You Will Learn”), text, and graphic are each in a separate cell of a nested table.

52. Midterm Exam next week in class. For Next Week