Learning Journal

Tutorial 1 – Using XHTML to Create Web Pages

Wednesday, June 16: Because I was focusing on reworking the proposal (Chapters 1, 2, and 3) for my online degree, I got a very late start on this HTML course. I had been reading through the text, but had not done Tutorial 1 (Cases 1 and 3), the Syllabus Quiz, or Quiz 1.
Thursday, June 17: I installed Adobe Creative Suite 4 (CS4), to use including Dreamweaver as the HTML editor. I was able to finish Tutorial 1, Case 1 and most of Case 3.
Saturday, June 19: I was able to finish Tutorial 1, Case 3.

Web Development Perceptions

Q: What is your current perception of web design?
A: I don’t surf the web, but I do research for my coursework and some online shopping. For one course I searched for both good and bad examples of organization, visual layout, usability, etc. and studied a book called “Don’t Make me Think!¹” on making user interfaces more effective. I have seen some excellent web sites and some pathetic ones. Most web sites need serious work to impress users and bring them back.

Q: Where do you think [web design] is headed?
A: Because the web is such a vital part of our culture, it will continue to become more important in our society and economy. For any online business, a professional-looking web presence is crucial. According to our text, 'Increasingly, employers are looking for a web page devsigner who can perform both functions: design web pages and also write programming code to add greater functionality' (Bojack, 2010, p. 2)². I missed out on an employment opportunity at CSI for an Online Course Designer because I had the educational theory but lacked hands-on experience with web design tools and the Blackboard platform. That is precisely why I need/want to acquire more practical skills.

Q: What kinds of occupations are available to a web developer?
A: In May I stopped by the CSI Career Center, where Amy Windle directed me to O*Net Online (http://online.onetcenter.org/link/summary/15-1099.04 ) for information about career opportunities. Three common job titles are: web designer, web developer, and webmaster. Several basic tasks of a web development professional are: (1) analyzing user needs, compatibility, and technology requirements; (2) designing, building, and maintaining web sites using authoring tools, scripting languages, and digital media; (3) planning, directing, or performing web site updates; (4) writing, designing, editing, and testing web page content; and (5) evaluating and resolving technical issues.

Q: What do you want to do with your knowledge?
A: Many years ago at Intel in Folsom, CA, I worked editing HTML scripts for the call center. I also took several extension courses at California State University at Sacramento, but I am rusty, and many things have changed. Several elements I used are now deprecated, and I had never learned some of the elements and syntax. My goal is to develop excellent online courses about education, language (English and Spanish), mathematics, and music theory. To accomplish that, I need to know how to make instruction very effective and efficient as well as how to make presentations very engaging and user-friendly.

¹ Bojack, H. (2010). Blended HTML, XHTML, and CSS: Introductory (2nd ed.). Boston, MA: Course Technology.
² Krug, S. (2006). Don't make me think: A common sense approach to web usability (2nd ed.). Berkeley, CA: New Riders.
Back to Top

Tutorial 2 – Creating Hyperlinks

Saturday, June 19: Finished Tutorial 2, Case 1 and most of Case 3. I was glad to be able to refresh my memory on how to do internal links and links within a document.
Sunday, June 20: Finished Tutorial 2, Case 3. Took the Tutorial 2 Quiz, scoring 27/30 on the second try. There was no link in students.csitech.net, so I was not able to FTP the assignments I have done. I e-mailed Ryan for help. Setting up the web site has been frustrating, but the concepts and syntax are coming together.
Monday, June 21: I reworked my Resume page, replacing asterisks (*) and paragraphs with breaks with heading levels, unordered lists, and list items. Took the Syllabus Quiz and Tutorial 1 Quiz: scored 28 out of 30 on the first try. I studied Ryan's FTP documentation. I realized that the images needed to be in a separate folder, so in 3 cases, I reworked the 'src' links and tested them.
Tuesday, June 22: I researched and inserted answers to the questions for Tutorial 1 and Tutorial 2, with footnotes and divided te entres for each tutorial into two sections: journal entries and the research questions and answers. I also learned three ways to validate each xhtml file within Dreamweaver: from the File menu, the toolbar, and the keycode. I validated all files in the tutorials and my website.
Wednesday, June 23: I e-mailed Ryan about the FTP problem and got a response. Thank you! In Case 3, I thought the coordinates for the image map in the Bremerton Clothiers regions (as given in the text) were really whacked. In the West and North regions, the points were in clockwise order, but in the West and South regions they were in counter-clockwise order. I reworked the coordinates for each region in clockwise order. In the mid-1990's I used segmented hypergraphics in online help documentation for The Money Store. I dig segmented hypergraphics!

HTML History

Q: How did HTML and XHTML get where we are today?
A: In the early years of HTML, no clear standards existed. Although its creators originally conceived of HTML as a semantic language devoid of presentation details, practical uses (driven largely by the various browser vendors) pushed many presentational elements and attributes into the language. The latest standards surrounding HTML reflect efforts to overcome the sometimes chaotic development and create a rational foundation for building both meaningful and well-presented documents. HTML now identifies three types of markup elements: (a) structural, (b) presentational, and (c) hypertext. To return HTML to its role as a semantic language, the World Wide Web Consortium (W3C) has developed both stricter coding standards - specifically Extensible HTML (XHTML) - and style languages such as Cascading Style Sheets (CSS) to shoulder the burden of presentation. In conjunction, the HTML specification has slowly reined in the presentational elements.³

Q: Identify the problems with early web development.
A: Since the mid-1990’s, web development had been one of the fastest-growing industries in the world, pushed by large businesses wishing to sell products and services to their customers and to automate business workflow. During this time, the cost of Web site development and hosting has dropped dramatically. Web site development companies are able to make web design accessible to both smaller companies and individuals, further fueling the growth of the web development industry. Another contributing factor has been the rise of easy-to-use WYSIWYG web development software which allows virtually anyone to develop a Web page in a matter minutes, without requiring knowledge of HTML or other programming languages.⁴

Q: Is there anything you find particularly interesting?
A: I think separating the content elements (in the XHTML file) from the presentation elements (in a CSS file) makes perfect sense and is very wise. It should not be necessary to rework the code in order to change the font or spacing of headings, text or background colors, or any other feature related to the ‘look and feel’ of a document. For many years I have used styles in MS Word to define the levels of headings, body text, tables, etc. It possible to attach different formatting files to the same document file to alter the look and feel. Using more than one formatting template in XHTML and CSS also allows parallel publication of the same content in web sites or documents with different formatting requirements.

Q: Are there any implications of future changes?
A: I see tremendous possibilities for the growth of educational software delivered via the Web, not just at the corporate or college level, but at the high school, middle school, and elementary school levels. As economic issues shrink school district budgets and legal requirements at the federal, state, and district levels further encumber school administrators, thus raising the overhead for brick-and-mortar schools and putting a greater strain on teachers, educational software will become more and more cost-effective, feasible, and attractive. That will create a much greater demand for the design, development, delivery, and support of educational webware. Future versions of XHTML, CSS, and other tools must support these applications.

³ Wikipedia. (2010). HTML. Retrieved June 22, 2010, from http://en.wikipedia.org/wiki/HTML.
⁴ Wikipedia. (2010). Web Development. Retrieved June 22, 2010, from http://en.wikipedia.org/wiki/Web_development.
Back to Top

Tutorial 3 – Introducing Cascading Style Sheets (CSS)

Wednesday, June 23-Thursday, June 24: Studied Tutorial 3, pages 97-125. Completed Case 1; validated it in Dreamweaver.
Friday, June 25: Took the Tutorial 3 Quiz; scored 28 out of 30 on the first try.
Tuesday, June 29: After completing Tutorial 4 (Cases 1 and 3) and Tutorial 5, Case 1 (by mistake), I decide to fill out that pattern in each tutorial, so I completed Case 3 (Gild Shipping) and linked to it in the Homework page.

Tutorial 4 – Formatting Text

Friday, June 25: Studied Tutorial 4, pages 135-166.
Saturday, June 26: Completed Case 3; validated it in Dreamweaver and W3C sites. The validator complained about the quotes around the word 'green' and 'zero-carbon footprint' so I replaced the quotes with 'strong' elements. I took the Tutorial 4 Quiz, scoring 28 (actually 29) out of 30 on the 2nd try. I created an external CSS stylesheet for my website pages and linked them to it.
Sunday, June 27: I added a graphic to my home page and selected complementary text and background colors. I defined syles for the h2, h3, and h4 headings, link states, and sup element. In the Resume and Learning Journal pages I added id='top' to the heading and a 'Back to Top' link at the bottom. I also defined a 'center' independent class and used it in the Resume to center my name and contact information.
Monday, June 28: I created a style for unordered lists to use a purple square bullet and a descendent (contextual) selector for 'strong em' to display the text in burgundy (#803) for new terms (like devsigner) and the Q: and A: labels in the Learning Journal.

CSS History

Q: Why has CSS been a major player in web design in recent years?
A: Prior to CSS, nearly all presentational attributes of HTML documents (font colors, background styles, element alignments, borders, sizes, etc.) were embedded within the markup, which made documents more complex and difficult to maintain. CSS allows authors to separate presentation from the structure by moving formatting information to a separate style sheet, and apply different styles depending upon the output device. CSS can also resolve conflicting styles with 'cascading' style sheets by using a priority scheme from highest to lowest.⁵

Q: What is so beneficial about using style sheets?
A: CSS provides a way to easily and efficiently format an unlimited number of Web pages so they have the same appearance (p. HTML 98).

Q: Define the purpose of [X]HTML, CSS, and their relationship to each other?
A: The purpose of XHTML is to create structure for the page content. CSS is used for the presentation/formatting of web pages. CSS offers many advantages over using XHTML alone, including: greater consistency, easily modified code, more flexible formatting, and greater functionality (p. HTML 98).

Q: Which version of CSS is currently supported by most modern web browsers?
A: The current version of CSS is 2.1. However, no contemporary browser supports all the features of CSS, nor do they support CSS in a consistent manner (p. HTML 100).

Q: What additions are expected in the next release?
A: CSS3 in under development. It will be modularized and consist of several separate recommendations. The W3C maintains a progress report at http://www.w3.org/Style/CSS/current-work#table.⁵

Q: What are your personal feelings at this time concerning [X]HTML and CSS?
A: Having completed Tutorial 4, Case 3, with lots of embedded styles, I think the CSS code looks too much like the 'C' code I was learning almost 20 years ago. It requires too much thinking like a computer or programmer and not enough thinking like an end-user.

⁵ Wikipedia. (2010). Cascading Style Sheets. Retrieved June 26, 2010, from http://en.wikipedia.org/wiki/CSS.
Back to Top

Tutorial 5 – Working with the Box Model

Monday, June 28: Studied Tutorial 5, pages 177-212. Printed the article 'The Principles of Beautiful Web Design'⁶ (all 34 pages).
Tuesday, June 29: In the About Me page, I used the float element to move my picture left and have text to the right. Completed and validated Case 1 (Shore River Planetarium), by mistake, and inserted links in the Homework page. In the Learning Journal I changed the dated entries from 'p' to 'li' (to use single spacing and square bullets) and set the margin-left at '1em'. Completed and validated Case 3 (Wordpendium Books) and inserted links in the Homework page. In both cases I increased the margin-bottom of the right-floated images to prevent wrap-around in narrow windows.
Wednesday, June 30: Studied first 11 pages of Web Design article.
Saturday, July 3: Finished studying the Web Design article and responded to the questions below. I also printed and read his article, 'Color for Coders - Color and Design for the Non-Designer' ⁷

Web Design

Q: What did you take away from this article?
A: My daughter Erin mentioned that Ryan Jund and Teresa Sept can bring up the home page of a student's website and tell at a glance whether he/she is a designer or a programmer. I agree that programmers need to think more like designers, and vice versa. Both the content and the 'look and feel' are extremely important.

Q: Was it worth your while?
A: For the most part, yes. Jason's approach to discovery and implementation is valuable. So is his discussion of bread-and-butter layouts, inspiring websites, and fresh trends.

Q: What did you find most interesting?
A: Learning the web page anatomy (Figure 1.5) and its components, then using the 'rule of thirds' to draw the grid and layout options. I appreciate the illustrations of basic art/design principles: balance (symmetrical and asymmetrical), unity (proximity and repetition), and emphasis or dominance (placement, continuance, isolation, contrast, and proportion). Having a morgue file of excellent layouts and color schemes is a great idea.

Q: What did you find least interesting?
A: Some of the illustrations (especially Figure 1.9 of symmetrical balance) were bizarre or odd. It was a huge distraction to me that he referred to several figures (1.7, 1.11, 1.12, 1.14, and 1.20) that were missing. He could have presented the concepts, processes, and practical applications in a much stronger logical order.

⁶ Beaird, J. (2007). The Principles of Beautiful Web Design. Retrieved June 28, 2010, from http://articles.sitepoint.com/print/principles-beautiful-web-design.
⁷ Beaird, J. (2004). Color for Coders - Color and Design for the Non-Designer. Retrieved June 28, 2010, from http://articles.sitepoint.com/print/color-for-coders.
Back to Top

Midterm Project & Exam

Thursday, July 1: Drove to Twin to take the HTML Midterm at the CSI Testing Center but decided to wait. Got my CSI Student ID card. Restudied Tutorials 1-4.
Friday, July 2: Restudied Tutorial 5. Drove to Twin and took the HTML Midterm. Scored 69 out of 75 (92%). Was able to FTP my files to students.csitech.net; checked the links on the remote site.
Saturday, July 3: Began working on my Midterm Assignment.
Sunday, July 4: Researched information about Yosemite National Park. Began constructing the website.
Monday, July 5: Completed my website about Yosemite, validated the XHTML and CSS files through W3C, put them to the csistudents server, and checked the links.
Back to Top

Tutorial 6 – Creating Fixed-Width Layouts

Thursday, July 15: Studied Tutorial 6, pages 225-262. Printed the article 'Breaking out of the Box' by Jina Bolton (30 pages).
Friday, July 16: Completed Tutorial 6, pages 263-273. Completed Case 2 (Griff Jewelers), validated Case 2 through W3C, and inserted a link to Case 2 in the Homework page. Put Tutorial 6 to the csistudents server. Took the Tutorial 6 Quiz, scoring 28 (actually 29) out of 30 on the 1st try.

Tutorial 7 – Creating Liquid Layouts

Saturday, July 17: Studied Tutorial 7, pages 283-319.
Sunday, July 18: Studied Tutorial 7 and the Review, pages 319-329.
Monday, July 19: Completed Case 2 (Canyon Lake College). To get the middle column to fit in IE, I made the Main column 36.5%, the Section column 29%, and changed the margins of the Sidebar column to Left 37.5% and Right 31%. The Sidebar column looked cluttered, so I commented out the padding and set a solid thick yellow border. In the #block, #modblock ID selector, I simply set the background color to navy. Case 2 now looks good in both Firefox and IE. Validated Case 2 through W3C; I had change 6 double quotes to single quotes. Inserted a link to Case 2 in the Homework page.
Monday, July 19: Revised the stylesheet for my website (mkerr.css) and moved it to the CSS directory. Inserted a universal selector to zero out all default padding and margin settings and moved the body selector beneath it. Defined headings and paragraphs (h2, h3, h4, p) to have a margin-top of 0.7em and line items to have a margin-top of 0.2em. Updated the CSS link in the 'head' section of each page and revised my Homework page to have two fixed-width side-by-side sections with no 'Back to Top' link. Took the Tutorial 7 Quiz, scoring 25/30 on the 1st try and 28/30 on the 2nd try.
Monday, July 19: Read the article, 'Breaking out of the Box' ⁸ by Jina Bolton. Responded to the questions below. Added a Photo Album page to my website as a work in progress and revised the nav bar in all 6 pages. Modified the external 'printstyles' CSS file, linked all website pages to it, and tested them with Print Preview. It still won't print square bullets. Put Tutorial 7 and my updated webpages to the csistudents server.
Tuesday, July 20: Began constructing my Photo Album page. Called my daughter Jamie to get digital photos. Refined the 'printstyles' CSS file.
Saturday, July 24: Entered text for my Photo Album page. Began gathering digital photos.
Sunday, July 25: Uploaded photos for the Photo Album page. Color-adjusted and resized them to fit as well as possible. Worked out some bugs on floating and clearing.

Out of the Box

Q: What did you take away from this article?
A: I appreciate seeing how Jina used negative margins to overlap the grid lines and create a more interesting, creative layout. I borrowed her final CSS and XHTML code, trying to replicate the webpage, but without the images and dimensions, it didn't work well. I noticed that, in the 'head' section of the XHTML code, Jina puts 'title' before 'meta' and the 'link' to the stylesheet, indicating that the order is optional, so I changed the order in my webpages to meta, link, title. I also noticed that, in the 'link' line, the order of attributes is 'type', 'rel', and 'href', so in my webpages, I changed the 'link' attributes to that order. She needed to label each ending div with a comment such as 'end content-secondary'.

Q: Was it worth your while?
A: She could have eliminated several pages by not repeating the CSS and XHTML code with modifications. I really wish that this were a tutorial in our Bojack text, so we could have access to the graphics, experience the step-by-step transformation, and have a working prototype of a non-boxy layout using negative margins.

Q: What did you find most interesting?
A: Filling in the header and footer with a solid color, then superimposing a decorative graphic at the bottom center of the header or the top center of the footer to make it look the graphic covers the entire width is cool!

Q: What did you find least interesting?
A: I was really irritated by the filler text in Latin, which I had seen before in page format options in PowerPoint. Not only did it waste pages, it distracted from the concepts she was explaining.

⁸ Bolton, J. (2008). Breaking out of the Box. Retrieved July 16, 2010, from http://articles.sitepoint.com/print/breaking-out-of-the-box.
Back to Top

Tutorial 8 – Creating Data Tables

Tuesday, July 20: Printed the article 'Tables vs. CSS - A Fight to the Death'⁹ by Sergio Villarreal. Studied Tutorial 8 - pages 339-376.
Wednesday, July 21: Studied the Tutorial 8 Review on pages 377-378. As a technical writer, I thought the body text was poorly written, so I reorganized the 3 paragraphs into 4. I didn't like the vertically-centered text, so I tried to set 'vertical-align: top' in the table style, but that didn't work, so I put it in the 'th' and 'tr' styles. I wanted the table rows to have a background color halfway between the table header (teal or #008080) and the body background (#a6c3a8), so I calculated the averages of the RGB values: #53a294. I included this page in my Homework page for Tutorial 8. Completed Case 2 (Berst Used Cars) on pages 380-382, but omitted the caption padding of 0.5em. Validated Case 2 through W3C, and inserted a link to Case 2 in the Homework page. Took the Tutorial 8 Quiz, scoring 25/30 on the 1st try and 28/30 on the 2nd try.
Wednesday, July 21: Read the article by Sergio Villarreal and responded to the questions below.
Saturday, July 24: Constructed a Calendar page in my website and reworked the navbar.

Tables vs. CSS

Q: What did you take away from this article?
A: I am very skilled at using tables in Word and fairly adept in Excel, so I appreciate the power of tables. I liked the approach of a head-to-head confrontation of the two methodologies - tables and CSS- but it was definitely geared to experienced web designers who had been exposed to both. Now, 6 years after this article was written, I cannot relate to the stuggles of building a web site using the traditional tools and technology, and I am just getting familiar with CSS, so the full impact of the showdown eludes me.

Q: Was it worth your while?
A: I like his breezy stream-of-consciousness style, because it is entertaining while being educational. That is what 'edutainment' is all about. However, I would probably have related better to a feature comparison, first verbally then in a summary table. To me, the most valuable parts were his Conclusions, first on Table-based design then on CSS-based Design.

Q: What did you find most interesting?
A: I liked the imaginary client he created - the Butterfly Watchers Association - which lent itself to picturesque graphics, and the slogan is cute: 'They flutter. We watch them.'

Q: What did you find least interesting?
A: Wading through his step-by-step thought process regarding font styles, java code, and nested tables.

⁹ Villarreal, S. (2004). Tables vs. CSS - A Fight to the Death. Retrieved July 20, 2010, from http://articles.sitepoint.com/tables-vs-css.
Back to Top

Tutorial 9 – Creating Forms

Tuesday, July 20: Printed the article 'Get Specific with Your CSS Styles'¹⁰ by Paul O'Brien.
Wednesday, July 21: Browsed Tutorial 9, pages 387-399.
Thursday, July 22: Studied Tutorial 9 (pages 387-416). In the Legend style I adjusted the top and bottom padding to 5px. In the Fieldset style I adjusted the padding-bottom to 5px. In the Select and Textarea styles I set 'margin: 0.2em 0 0.5em 0'. Worked through the Review (pages 417-418) and created a link from my Homework page. It looks good in both Firefox and IE and validates in both Dreamweaver and W3C, but it looks goofy on csistudents.net. Completed Case 2 (OnLoin Meat and Poultry Food) and inserted a link in the Homework page. Within Dreamweaver Case 2 renders strangely, but it validates and looks good in both Firefox and IE. However, when I validate Case 2 through W3C, it reports 2 errors. I don't know what's wrong.
Friday, July 23: Found a couple of glitches in Case 2, but I still can't get the buttons to look right in Dreamweaver. Asked Ryan to help me figure it out. Took the Tutorial 9 Quiz, scoring 25/30 on the 1st try and 28/30 on the 2nd try. Read the article by Paul O'Brien and responded to the questions below.
Sunday, July 25: Constructed a webpage for $uper Deals$ including the assigned registration form and validated the code in W3C. Submitted it using the 3 radio options, and it worked great. Yeeeah! It looks good, too! Put all my new and revised files to csistudents.net.

Specificity

Q: What did you take away from this article?
A: The term 'cascading style sheets' implies a hierarcy of styles which (as the book says) resolves conflicts automatically, but to this point we have simply stood back and watched the magic. It helps to have a glimpse of the logic 'behind the scenes' that makes it happen. My understanding is now a little less fuzzy.

Q: Was it worth your while?
A: For the most part, no. I probably would have understood a simpler breakdown of the hierarchy from inline styles to IDs to classes/attributes/pseudo-classes to element types and pseudo-elements, but even the simpler section of code at the beginning was too complex for me, and the 'crazy style sheet' was way over my head.

Q: What did you find most interesting?
A: The concept of constructing a 4-column table to calculate and compare the specificity of the types of constructs is great. Unfortunately, I don't know CSS well enough yet to be able to use it effectively. When I have more experience, it may be a powerful tool.

Q: What did you find least interesting?
A: This article was not written for novices; it was written for more experienced CSS coders or to impress his near-peers. I think it is far more important to help readers comprehend the concepts and acquire important skills than to dazzle them with your brillance.

¹⁰ O'Brien, P.(2008). Get Specific with Your CSS Styles. Retrieved July 20, 2010, from http://articles.sitepoint.com/print/get-specific-css-styles.

Final Project & Exam

Friday, July 23: I began by printing the HTML – Final Project document and reading through the Project Description, Content Specifications, and Technical Criteria. I created a 'twinlife' directory under my websites folder and two subfolders for 'images' and 'textfiles'. I copied the .htm files to the 'twinfiles' directory, all images to the 'images' subfolder, and all .txt files to the 'textfiles' subfolder.
Saturday, July 24: I started off with the layout for the fixednew.htm file (from Tutorial 6), with three changes: The body color was red (instead of gray); I had embedded the navbar into the header, so there was no silver navbar section; and I had no orange sidebar section, so the aqua main section was full-width. Consequently, I had a solid color for each div and could easily see which div was taking up which areas of the screen. For each page – index, news, features, articles, and survey – I inserted links to the images and looked at the .txt files. I pasted in the contents and broke up the text into paragraphs. I noticed some missing words, poor grammar, and awkward phrasing, so I did a spellcheck on each file and eventually replaced all the double quotes with single quotes. Because the Features page had so much content, I decided to break it into two pages, so I created a separate 'twintips.htm' file, making a total of six pages.
Sunday, July 25: I decided to use the green Twin Life logo with a green oval and blue text because the others were way too busy or blah. I constructed a Header div with the Twin Life logo floated to the left and the page name in blue floated to the right to balance it. I first created a separate inline Navbar div below the header with the same width, blue links, and white background color, but there was too much white space above it, so I decided to embed the navbar in the header below the page name. Using the same green color in the Twin Life logo, I worked on a coordinated color scheme. Assuming the background color of the site would eventually be white, I made the background color of the text sections green, put a dotted navy border around them, and used straight 'blue' for the heading levels.
Monday, July 26: I worked on formatting the text files, first the Articles page. I noticed that the left article (about roles) was shorter than the right article (about talking), so I considered using a narrower left column and wider right column. Within the #main div I defined styles for a fixed-width #leftcol div and wider flexible #rightcol div, with black Arial text. I put the column title in the top left corner and the image of the author in the top right corner, with the 'by' line naturally centered vertically at its left. I had a lot of issues with adjusting the div widths, padding, margins, etc. Eventually, I had a very nice-looking Articles page. Early on, I moved all the CSS formatting to a separate file, and I have been maintaining from each page as I edit the content, occasionally reviewing all of the web pages to see if I have introduced any errors.
Tuesday, July 27: I copied the Articles page as the Twin Tips page, but I needed a standard column width, so I created a fixed-width #lefthalf div and comparable flexible #righthalf div, which worked pretty well. Again I placed the title in the top left corner and 'continued' the article in the right column. I still had a bare #footer div with a 'Back to Top' link to the page name in the header. I then tried to format the News page. Given that there was an article and picture on the left and two articles without authors and on the right, I decided to use the #leftcol #rightcol format (from the Articles page) and place both news stories in the right column, which worked really well. The Features page wasn’t as easy. Even with the delivery picture the photo of the month article was very short, which fit into the #leftcol easily, but the recipe needed a two-column format, so I struggled with splitting the #rightcol div into two columns – an #ingredients div for the unordered list and an #instructions div for the ordered list. I finally got that to work, and it looked pretty good. As I added each page, I checked the links in the navbar in the header. I also changed the page order to: Front Page, Articles, Twin Tips, News, Features, and Survey. Building the Survey page was very difficult. I began with my #lefthalf #righthalf layout and pasted in sections of forms from the tutorial assignments I had done. I made the background of the fieldsets a lighter shade of the background green of the text areas and refined the color scheme. Because some questions have up to 9 radio buttons, I didn’t want to arrange them vertically, which would waste a lot of space and require vertical scrolling, so I tried to arrange them horizontally. I couldn’t find any examples in the text, so I posted a question in the Discussion Board and e-mailed Ryan for help.
Wednesday, July 28. It occurred to me to Google for 'XHTML' and 'radio', and I immediately found two hits that were very helpful, so I was able to lay out three questions using horizontal radio buttons. I also figured out how to combine several questions into a single fieldset. I had trouble laying out checkboxes vertically, because there wasn’t enough room for the labels , so they would wrap, making extra lines. I accidentally discovered how to adjust the width of the label to make enough room and align them with the sets of vertical radio buttons. I was still having trouble with nesting the divs – main, form, lefthalf, righthalf, - and unnesting them. I began creating the Front page, using the #leftthalf #righthalf template. Pouring in the letter from the editor and picture in the left column was easy, but the creating a table in the right column was more challenging. I created the basic table with a rowspan – without header columns. I finished up the Survey page, with the original set of questions in the left column and additional fields (name, address, etc. and a text area) in the right column. I converted the State field from a text box to a selection list with only 6 options.
Thursday, July 29: Reading through the Content Specifications and Technical Criteria, I realized that I would need to enhance the table in the Front page with headers, scope, a caption, and a title - the summary element was deprecated with HTML 5.0 - so I added those to the Front Page. I wanted to even up the length of the two columns, so I reduced the size of twins.jpg, used it in the top right corner of the right column, and placed the table below it on the left. I rewrote the Editor text in the left column, putting the bullets into a different logical order (which matched the new order of the pages in the navbar) and linked each reference to that article, feature, or page. I added some text to the Editor notes, so I could insert a 'mailto' link, created the company contact information in the footer, and left a place marker for the (optional) scrolling text. I also moved the ‘Back to Top’ link in each page to the end of each article or feature, in case a future edition of the online magazine goes 'below the fold'. In the Features page, I added text to the left article, to balance the columns. In the Twin Tips page, I added text to the last answer, to include links to three external web sites. With all six pages looking pretty darn good, I did troubleshooting, testing to see if rendering each page in Firefox and IE would break the layouts. I had to narrow the overall width of the layout, as well as each major div, to get them to work in Internet Explorer. I am still using the different-colored backgrounds for each major division. When the layout is done, I will change them all to white, so they will blend together in the browser.
Friday, July 30: I drove to Twin Falls to take the HTML Final Exam at the CSI Testing Center. Reading through the Content Specifications and Technical Criteria, I printed the instructions to insert the current date/time in the Front Page and put it below the Staff table with an h4 header. I copied in calendar.txt below the date/time, created an h4 header, and formed paragraphs. I decided NOT to try to use the CreditRoll.class, but when I have more time, I would like to know how. I then decided to switch the order of the elements in the right column to table, calendar, date/time. At this point, the right side was longer than the left side, so I converted the page layout from the #righthalf #lefthalf format to the #leftcol #righcol format, which worked great. I noticed in the Survey that Internet Explorer was wrapping the text area to the next line, so I shortened the Label width to leave enough room on the same line. I then validated all six .htm files in Dreamweaver and began validating them in W3C. I first tried putting the code for the W3C validation icon in the header, but it was too big and conspicuous, so I moved it to the right end of the footer. Given my color scheme, I selected the blue validation icon. In order to get it to fit in the footer, I had to define an img.flush style with no top/bottom padding but some padding on the right, I also had to increase the height of the footer. I copied this footer code to each page then validated all 6 files in W3C. It picked up some errors in Twin Tips, News, and especially the Survey. The instructions I found online about laying out radio buttons and checkboxes horizontally had showed me incorrect values – like name='radio1' – so for each radio button and checkbox, I had to make the name and value identical. W3C validation also croaked on my names/values beginning with numerals (such as '0to1'), so I had to spell out each name/value (such as 'zerotoone'). There were 2-3 other glitches, like double quotes. I then revalidated all six files in W3C. I tried to validate my CSS file through W3C, but the link in my favorites got the message, Page Not Found. I tried to Google W3C CSS and got the same link, but again got the error message. Just for fun, I inserted a photo of a triple stroller to the right of the last Twin Tips answer. I still need to insert a background image and change the background color of the structure divs (container, main, etc.) to white before I am ready to upload it to the csistudents.net server.
Sunday, August 1: I tried to find a small background image (like a light-blue bullet) to repeat behind the #header div, but the only ones I liked were too busy and distracting. I thought about putting a background image behind the table in the Front Page, but couldn’t find a suitable image. I then decided to put an image behind the #instructions div in the Features page but couldn’t find a suitable clip art image. I widened my search and found a nice photo of a man’s hands breaking an egg, reduced it to 50%, and linked to it. Because the background image was light, the black text was still readable. I had to change the repeat value to 'no-repeat' and experiment with the vertical position coordinate until it covered only the first few steps of mixing the ingredients. Having checked off all of the technical requirements, I changed the background color of the structural sections (body container, main, and footer) to white, so the site background color would blend together and tested each page in Firefox and IE. I then uploaded the site to csistudnets.net and checked the links and pages there. I uploaded my entire 'twinlife' folder which included all the raw text files (which were not needed) plus additional copies of some graphics in different sizes. I eliminated the unneeded files on my laptop and using Manage Sites in Dreamweaver to remove them from the server.