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

2. Tags: –Open: –Close: –Empty (no separate open and close tags): Attributes –Specify additional features of tags –Always of the form: attribute_name=“attribute_value” –Example: Recall What You Have Learned: tag is img attribute is src=“myphoto.jpg”

3. Recall that any XHTML tag’s look can be redefined by giving it an entry in your CSS file In particular, the anchor tag can be given, say, a new color by giving it a CSS entry: a { color: #0000ff; } However, links (anchors) have different states (e.g., “visited” or not). What to do about them? CSS for Anchor ( ) Tags

4. Pseudo-classes let us individually address each of the possible states of a link: a:link { color: #0000ff; } a:visited { color: #ff0000; } a:hover { color: #00ff00; } a:active { color: #cccc00; } CSS for Anchor ( ) Tags

5. You’re not limited to just changing the color: a:link { color: #0000ff; text-decoration: none; } a:visited { color: #ff0000; text-decoration: none; } a:hover { color: #00ff00; text-transform: uppercase; font-weight: bold; background-color: #cc0099; } a:active { color: #cccc00; text-decoration: none; } CSS for Anchor ( ) Tags

6. a:link and a:visited must come before a:hover in the CSS definition in order to be effective!! a:hover must come before a:active in the CSS definition in order to be effective!! This means there are only 2 correct orders: OK: a:link { color: #0000ff; } a:visited { color: #ff0000; } a:visited { color: #ff0000; } a:link { color: #0000ff; } a:hover { color: #00ff00; } a:active { color: #cccc00; } CSS for Anchor ( ) Tags

7. XHTML/XHTML Tables Tables

8. Tables for Displaying Tabular Data Tables for Displaying Tabular Data Here's an example of a table used for displaying tabular data: State July 2005 Population* Alabama 4,557,808 Alaska 663,661 *Source: http://www.factmonster.com/ipka/A0004986.html Displaying Tabular Data (cont.) table { width: 300px; border-style: solid; border-color: #000000; border-width: 2px; } th { border-style: solid; border-color: #000000; border-width: 1px; background-color: #0066ff; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-style: italic; } td { border-style: solid; border-color: #000000; border-width: 1px; } a:visited { color: #ff0000; text-decoration: none; }

9. Tables consist of 4 main tags: – and mark the beginning and end of the table, respectively – and mark the beginning and end of each table row of the table, respectively – and mark the beginning and end of each table header cell, respectively – and mark the beginning and end of each table data cell, respectively Displaying Tabular Data (cont.)

10. CSS Classes More CSS

11. In your CSS file, create an entry that begins with a dot (“.”), e.g.,.wide { width: 500px; }.narrow { width: 300px; } CSS Classes

12. CSS:.wide { width: 500px; }.narrow { width: 300px; }.red-on-blue { background-color: #0000cc; color: #cc0000; }.white-on-green { background-color: #006600; color: #ffffff; } CSS Classes HTML: col heading 1 col heading 2 r 1, c 1 r 1, c 2

13. CSS Colors More CSS

14. Colors can always be specified using the hexidecimal notation we’ve already learned: #ff003a = max red, no green, small amount of blue There are also 16 pre-defined color names that you can use directly: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow CSS Colors

15. CSS:.wide { width: 500px; }.narrow { width: 300px; }.red-on-blue { background-color: blue; color: red; }.white-on-green { background-color: green; color: white; } CSS Colors HTML: col heading 1 col heading 2 r 1, c 1 r 1, c 2

16. More on Tables, Dreamweaver Site Setup This Week

17. Spanning Rows and Columns with HTML/XHTML Tables More on Tables

18. 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; }

19. 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; }

20. 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.)

21. Create the following table in an XHTML page. You will need to use rowspan and colspan attributes to recreate this particular arrangement of cells. In-Class Exercise

22. Dreamweaver Site Setup Dreamweaver!

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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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.”

30. 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:

31. Creating Web Pages with Dreamweaver Authoring with Dreamweaver

32. 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…

33. 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.

34. 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.

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

36. 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.

37. 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.

38. 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.

39. Dreamweaver Views Split View Split view 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.

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

41. 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 its filename to select it, and then click the up arrow to upload it.

42. 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.

43. 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.

44. Viewing Your Uploaded Files Authoring with Dreamweaver

45. 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 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.

46. Set up your Dreamweaver site at home: –Make sure you know your SFSU web space account name (same as your sfsu email account name, which is the part before the “@sfsu.edu”) –You also need to know your SFSU email account password, because that is also your SFSU web space account password –Finally, make sure you can correctly configure a Dreamweaver site that can log in to your SFSU web space account, and can upload and download pages to and from it from within Dreamweaver. We’ll be using the SFSU web space and Dreamweaver for the rest of the semester, so you need to make sure it’s working for you now or you will risk falling behind For Next Week