... part of the Web Site of George North -- Back to Site Index
Webpage Design and Development, CPST-2400-10
with HTML5 and CSS3
Fall 2019

WebSite Elements

WebSite Elements will be a Grading Rubric item beginning in Week 6. This will be a Rubric Item every week through the Final Exam.

========== below two paragraphs are about 100 words ============

WebSite Elements: WebSite Elements points are earned by a written discussion of your work on a WebSite assignment. You will publish your WebSite Elements as one WebPage, part of your Weekly Assignment WebSite. Make certain that your Elements WebPage is easy to navigate to/from by linking it to/from the other WebPages of the Assignment. If this is not clear, send George eMail with your questions.

Use the same due diligence in your written discussion as you would for any essay required in a college level course. Your discussion will be a few hundred words. How many is a few hundred ... well these two paragraphs are about one hundred words. A few hundred words would be anything more than 100 words more than 100 words, a few hundred (more than 200). You may want to keep notes while you are working on your WebSite to make it easier to remember what you want to include in your WebSite Elements discussion.

=========== above two paragraphs are about 100 words ============

Your WebSite Elements discussion will include some of, but not be limited to, these topics:

  • A discussion of the CSS (and HTML) design elements that were introduced in this Tutorial
  • Difficulties you encounter while completing the assignment and how you may have overcome them
  • Elements of your WebSite that are unique (not otherwise required by the Grading Rubric)
  • Design ideas included that were learned in previous Tutorials
  • Discuss WebSites that were helpful to your understanding of HTML/CSS used in your work
  • Discuss how external style sheets were use to enhance your design
  • Discuss why you used inline styles to enhance your design
  • Document content (text, graphics, video, etc.) you included in your WebSite that were borrowed from others
  • A discussion of your success or failure using the W3C Markup Validator
  • I am especially interested in your discussion of anything not mentioned above
  • Use WebSite Elements to tell me about your design ideas. I will take that into consideration when forming my own opinion about the visual appeal of your WebSite. In other words, you tell me why your WebSite looks good, and you will earn most of the points available for visual appeal (see Grading Rubric).

  • The best discussions will receive full credit for "WebSite Elements". Others less.

    Below are several example discussions turned in by students that meet and exceed the requirements for "WebSite Elements" item of Grading Rubrics.

    "WebSite Elements" ... for Mansfield Classic Theatre

    This week’s assignment, Mansfield Classic Theatre proved more difficult than I originally thought. I started reading the chapter and taking notes early in the week. I found the shorter chapter much easier to get through and picked up on the idea of frames fairly quickly. I understood the concept of what I was going to create for my Mansfield Classic Theatre page. I decided to follow the steps in the book pretty closely when designing this page. I created 3 columns and one row. My row at the top of the page contains The Tempest logo. I chose a different logo than the one provided because I wanted to enhance my color scheme using purples, grays, and blues to represent a storm. I used the left column for links to the different acts and scenes of the play. These acts/scenes then appear in the center column when clicked on. The home page is a short paragraph about the theater as well as picture of a storm. My right column contains related links to the play, more information about Shakespeare, information about seeing the production live, links to a place to purchase tickets, as well as links to student/affiliate pages.

    My center column contains most of the unique styles. I used contextual selectors to color the italicized play titles magenta. I also used contextual selectors to color the bold face names purple. I used pseudo-classes to create a drop cap for the first letter of the first word in each paragraph. My positioning styles moved the picture of the storm, as well as padded and added margins to the other columns. The left and right columns contain rollover effects, as well as different colors for links visited and not visited.

    The difficulty with this assignment came when it was time to validate my pages. I had no problems with the external style sheet, the home page, and the heading page. I was having problems with my links page, my scene list page, and my overall frames page. It took a lot of trial and error before I validated the remaining pages. I started off with only a few errors and found that each time I attempted to correct an error I was just creating more problems on the page. I had to step away and come back the next day so I could look at it with fresh eyes. Other than my difficulty in validating the pages, I enjoyed creating the page using frames.

    Part of this assignment is to provide a discussion related to "WebSite Elements."

    As with most other cases, I begin my assignment doing research on the topic it's self. Then, after reading over the description of the assignment, again and again, I began to formulate what I felt would best meet the requirements of the assignment (just as I would with any client), and bring together a balance of design and function, while selling the message.

    I found the story board process to be most helpful in putting down a plan before beginning. In the past, I have had the tendency to dive right into and work my way out. For this assignment, I spent more time planing the navigation and how my style sheet would support the over all project.

    I did run into some difficulties with bringing my pages together regarding style sheets. After a good bit of frustration, I backed off and stuck to one page. I worked with just one page until I had achieved a balance of what I wanted to do within the individual page, and what I felt I could benefit (efficiency wise) from the style sheet.

    The Markup Validator and I are getting along better these days. At first, I was getting a bit frustrated, but have learned to start early with checking my assignments and filtering them through. On this assignment, it was a challenge to keep all my pages in check, while keeping my external style sheet in check. I will confess, I have a spent a majority of this evening working out the kinks and correcting errors and my assignment does not look as it started. I attempted to do some fancy stuff, but in the end, I just couldn't get the validator to cooperate.

    I learn much by reviewing the other class members assignments. It has been helpful to review how they approached the assignment and how they formatted their html. Also, I am learning to search around the web. However, so many web sites seem to be utilizing java, flash, and scripting that it's hard to truly pick up much as it relates to html and/or xhtml.

    The decision as to when to embed the style versus when to utilize the external style sheet I'm sure will come in time. I tried to think of what a client might want to change down the road as this (in my opinion) is a powerful aspect of external style sheets. So, on this project, I did my best to follow along with what was directed by our assignment, but I also took steps to include the external style sheets as often as possible.

    As for topics not covered, one area that seems to be difficult for me is refraining from overworking a project or going over and above what's required. This may sound somewhat strange, but I do feel I need to handle my time better. As mentioned, I am loaded down with responsibilities at the present, and I am taking 3 other classes along with this one. I truly enjoy this class and do desire to excel and learn how to design. However, I cannot devote the amount of time I would like as other projects, assignments and exams always seem to push the limits.

    I guess what I am getting Professor North, is I need to learn to negotiate successfully through a project, focusing more on the information being presented within the context of that assignment and I need to quit trying to knock it out the park each and every time. Perhaps my work is not extraordinary, but I do pour myself into these assignments as well as my time devoted to learning outside of the required curriculum.

    I've said enough -- I've enjoyed yet another assignment and look forward to the next.


    I got some frustrating problems this week when writing the assignment.

    I'm afraid that I have already messed up what I learned from the 3 tutorials and some websites: they have became a pot of Gumbo soup in my head. It seems there are lots of ways to reach a goal, but none of them really worked when I tried. I don't know what I should do when I faced a project.

    For example: I'd like to set an image as the background in full screen without border, and center the second layer background. I just can't find a perfect way with the simplest syntax sentence to do that. I tried to follow the syntax from the tutorial or the codes what I found on the web. None of them worked. I know it must means I didn't use them in correct ways, but I just couldn't find what was wrong, and how to correct them.

    Another problem: it is about the slide show. I found a piece of code works really well. I was so glad it worked ideally. However, after I finished the project and checked them by W3C Markup Validator, it told me it is not allowed to include the "<" character. I checked the codes, it is not for CSS 2.1. Then I tried several different codes from a website. None of them worked either. I'm so desperate. Finally, I kept the codes for the slide show, although it caused 1error and 1 warning. The slide show is so beautiful and I just love it!

    One more problem is the code for linking to the Youtube video. The Validator shows that the used document type does not support that attribute for this element. I don't know how to correct them either. I tried. It seems every Youtube video have the same type of codes. It looks fancy and cool. I kept it too. It caused 7 errors. Sorry for that.

    I spend 2 days to figure out these problems, but just couldn't resolve them.

    I really don't like the codes I wrote this time. I wish I could have written the codes in a perfect way: simple, short, correct, and super functional. I saw some class peers' codes after the due date. Some of them really did good jobs. But none of them is perfect for me. Do you have any codes similar with our assignments? Could you please sent them to me or post it to the class after the homework is handed in. I really wish to see some professional works and I think it will be very helpful for us to learn this course more successfully.


    A discussion of your success or failure using the W3C Markup Validator

    The W3C Markup Validator has been a welcomed addition to my HTML learning experience. It has steered me in the direction of writing code that is both semantically correct as well as stylistically easy to read. I’ve noticed a great improvement in my own abilities over the course of our six assignments, and I attribute a lot of this success to the W3C Markup Validator.

    Initially, I was focused on simply writing code with little regard to style. As I was learning HTML, I found myself making several “rookie” mistakes along the way, which the Validator kindly pointed out to me. One thing that I did notice was that these mistakes were rather difficult to correct due to the fact that my code itself was not organized logically, nor did it flow easily on the page. My indents were wrong, and while not affecting the outcome, made troubleshooting a difficult task.

    As I grew more confident with the coding itself, my style of coding became much more fluid over time. I still find myself making errors from time to time -- the main one being differentiating between in-line styles and block styles. I often neglect quotation marks or punctuate the code incorrectly. I also find myself leaving the occasional <div> open, which the Validator catches. Now that I am coding with regards to my own readability, I find these errors much easier to identify and correct.

    I was surprised with myself when validating my .css file for this assignment. It is a new element as far as my learning goes, and I expected to find numerous errors when validating. This was not the case! My .css file validated on the first try. I was extremely pleased.

    Assignment 6 has been the most involved and detailed of our assignments to date. As such, I anticipated numerous errors that would be in need of correcting. Again, much to my surprise, I only found one common error within all 8 of my .html files for this assignment! Identifying the error was simple, as was the correction. I owe this to the W3C Validator in that I believe I am now troubleshooting and stepping through my code as I write it instead of simply getting it out and fixing it later.

    I find my experience with the W3C Validator specifically for this assignment, and generally for my learning experience, to be extremely successful and beneficial.

    WebSite Elements for Travel Scotland

    In this tutorial we learned how to apply styles via embedded style sheets and external style sheets using CSS. Design elements introduced allowed us to change many aspects of our websites. We learned how to change how the websites actually are shown. Including, font color, size and style, adding background colors and images, and adding margins as well as borders.

    Difficulties were making sure I had everything correct in the external style sheet. I had a plan for what I wanted to achieve and it took quite awhile for me to set the margins correctly and get the border the right size and color. I just had to slow down and take my time. The validator is very good about pointing out mistakes. I’ve learned where to look now, though. Before when there was an error it would take me some time to find it, then correct it. Now, it seems that I know what is causing the problem, and where it is.

    With my website, I wanted to add a colored border, which wasn’t included in the Grading Rubric. I also wanted to add the Scottish flag to my “Travel Tips” website because it looked very empty and basic.

    Design ideas from previous tutorials were added to the address element. I thought making it green would be a nice addition.

    I didn’t really use and embedded styles because using the external style sheet and ling it was so much fun. It was amazing to see one little thing change all the websites at once. The borders and background really amazed me. I had to add some padding because the font was right next to border and it just didn’t look right to me. I also enjoyed making the headings pop out and look better by adding a little color to the font.

    The Markup Validator. It is a source of great pain and great relief. When you click “validate” and it comes back red, it’s kind of a bad feeling. On that same note, when it comes back green, it’s a great feeling. I haven’t had a bad experience with it for the last couple of assignments.

    Another WebSite Elements for Travel Scotland

    Tutorial 3 is an introduction to external styles through the use of cascading style sheets (CSS). This allows for styles to be implemented across a number of pages because they obey the CSS. This is very beneficial for creating websites that share like components of font-text style, background, page margins, and so on. The external styles controlled by CSS yield to embedded styles within the html page itself. A page background color can be set in the CSS but modified in the individual page file and this new embedded style will prevail. Likewise, the embedded style yields to inline styles which are found within the html document and these inline styles will yield to individual browser settings for style. A good understanding of the hierarchy of styles allows one to create unique pages while still controlling for aspects of unity across a site.

    In creating this Travel Scotland site, I ran into some difficulty when trying to set the background for the page and a background for a particular section of the page. I ended up using Div Containers for a these separate sections and setting the page background in the CSS document and the individual backgrounds that varied by page within their respective html documents. However, I still realized that as much as I can control for width of certain aspects of a page, the browsers will modify these. This led me to realize that I’d need to center the header image in front a solid color background.

    I added some unique items to my site such as the mapped tour route via Google maps. Originally, I had mapped the route and save the image and put the still image of the mapped tour in my site as an inline image. Then I realized that Google Maps provided the html code that allowed me to insert the active map into my page. I did this as an inline image and altered the size of the map and how it displayed on my site by adding a navy border and floating it to the right. I also removed a link from underneath the image.

    Additionally, I added some “Scottish” items to my site such as the way Scottish flag GIF that is located at the bottom of the page and the changing header images that reflect the different landscapes of each tour. The background image is also a Celtic pattern that I modified to be blue and white, the colors of the Scottish flag. In order to make the text readable with a patterned background, I altered the opacity of the image using Photoshop (first experience with that) and used it as the embedded style for the div container that contained all of the text of the page.

    Overall, I feel that the external styles were very useful in creating the framework for my page. I was able to create the sections of my pages and then fill them in either using embedded styles of inline styles where necessary. An example is when I wanted to increase the letter spacing on the home page while keeping within the overall design of the site. The external style maintained the font style, while the embedded style changed the spacing and the inline style handled the alignment of one particular element. I have a good understanding on how to use external, embedded, and inline concurrently and would like to better learn the use of tables in order to enhance the professional look of my site.

    I am grateful for the W3C Markup Validator and the W3C School websites. They are my main resources, after the text book, in creating sites correctly. The “try it out” text-editor on the W3C school site is extremely useful for seeing how minute details in the html script drastically change the display within a browser. Perhaps this is where my joy of writing html comes in, I love learning new languages and the power of learning html is immediately apparent with that test text-editor. Doing this assignment, I finally felt like I was in charge of what I was writing, understanding and capable of writing WebSite Elements without constant reference help.

    Below is a sample WebSite Elements for Mid-Term Exam -- Chamberlain Civic Center

    The Chamberlain Civic Center


    Website Elements & the Chamberlain Civic Center Website

    Welcome ... this website_elements webpage for the Chamberlain Civic Center website presents an explanation and justification for the design of the site from consideration of the client's initial design ideas to the impact of color (always an important consideration, given humanity's visual propensity) as well as a discussion of the elements of the site as design evolved. Some of the topics to be covered in more detail below include CSS techniques employed (the extensive use of the named attribute selector to control styling), elements of the website that may be unique (how the css file code is divided up), how external style sheets helped to enhance design, and difficulties encountered.

    Here are the links that will allow one to quickly navigate to the various parts of this discussion:

    Design & Colorspace

    The open, almost spare design communicated to us (the student web designers) from the example web page we were given to examine (HTML p. 383) and which the instructions of the Rubrik guide us to create for the initial page (Rubrik steps 12 [HTML steps 3-7 on p. 384], 13 [HTML steps 8-15 on p. 384-5} and 14 [HTML step 16 on p. 385]) provides an excellent model to continue throughout the remaining pages of the website we are directed to develop.

    In fact, it is important to continue this design for several significant reasons. First, one is given to understand from the image provided in Fig. 5-55 on HTML p. 383 that this is the type of design the client prefers. Second, it is an open, inviting and clean design -- with an almost Scandinavian sparseness to it, which gives it a decidedly elegant and artistic look and feel -- and as the Chamberlain Civic Center represents and works with all types of performing arts organizations, this is an excellent association to cultivate. Third, cohesiveness of design (i.e., having all pages present a common design structure) is, as was learned earlier, of utmost importance to the satisfaction vistors report when visiting a site. Hence, the decision was made to continue on each page the open, white field (as background); the top, horizontal, tabbed navigation system (with small gray tabs and black text before mouse activation and with small red tabs and black text upon activation); and the use of predominantly red H1 text (no background) {note: a few pages, such as Events.html, used gray H1 text as well) with gray H2 text and black body text. All hyperlinks are in red, but on mouse activation they turn a plummy purple. There is also spot color use of purple. Dt text can also be either gray (events.html) or black (facilities.html or box_office.html).

    From this discussion, one may gather that the primary (only) colors are: white, black/gray, plum/purple, and red.

    Also, all of the pages use the primary (horizontal) navigation system as laid out on the calendar page, but some have an extra "internal" navigation system as well that is included within the text of the file (e.g., local_arts.html, web_elements.html, events.html). These use the red hyperlinks and when the mouse scrolls over them (activates them), the text itself changes color to a plum/fuchsia color.


    Text & Code Reuse

    In this section, I wish to provide a note about text and code reuse and acknowledge contributors, including myself and others. First, the text for the Feb.html page was provided for us in the assignment. On the Events.html page, I came up with all the text (quite a bit) EXCEPT for the ones that are February events, as these were provided for us as part of the assignment. I based the text for the box_office.html page on that for the box office for Dixon Hall at Tulane, i.e., the Lupin Theater box office, though I simplifed it a good deal (text and styling). I did the same for the facilies page (i.e., I based this text on that for the Tulane Theater page: Department Facilities), but again, I simplied everything and created much of my own text to fill it out. Nevertheless, I owe a debt of thanks to the Tulane Theater web folks, whoever they are.

    Furthermore, I designed the text and layout for the directions page after looking at the one for the University of Mississippi's Ford Center for the Performing Arts, which gave me the idea for using the Google map. So a debt of thanks is owed to them as well. (If you get some idea that I did some web research before and while constructing my page, you would be correct.)

    I also reused one of my own .html pages; one from week 6's assignment, the Gresham Children's Choir Home page -- i.e., the one for the local arts. I redesigned it a bit and added a number of organizations to it (almost double the links!) I was able to reuse the .html and just add more links; I only had to re-tool the .css file to present a new design-face consistent with the design for the Chamberlain Civc Center. Very convenient! In other words, I took to heart the works in the assignment: "You are not expected to start new websites from scratch. Don't. Remember, reuse is one important topic in computer science. Be a scientist, reuse your work!"


    HTML files v/s CSS files

    There are 12 files that make up this website: 8 html files and 4 css files. First, we will cover the names of the html files, followed by the names of the css files, and then the relationships between the html and css files (which html files depend on which css files for styling and layout), and we will briefly consider the styling choices made by these particular file groupings.

    Of the eight html files, we have the following: Feb.html, events.html, box_office.html, facilities.html, directions.html, local_arts.html, web_elements.html, and contact.html. Of the four css files, we have the following: ccc.css, calendar.css, ccc_others.css, larts.css.

    Two of the three html files with secondary navigation systems (discussed above - include: local_arts.html, web_elements.html, events.html) use the ccc_others.css file. These two files also use the larts.css file. Of the three files with secondary nav systems, only local_arts.html and web_elements.html uses ccc_others and larts.css. The styling for events.html was a sort of hybrid between what was used for these other files and for the calendar web page (feb.html), so it was handled differently -- more like the calendar web page.

    Consequently, we have two html files that depend on ccc_others.css and larts.css (local_arts.html and web_elements.html) and the other six html files all depend on the ccc.css file (except that events.html also depends on larts.css and feb.html depends on calendar.css because of its inclusion of the calendar styling. The reason that events includes the larts.css file for styling is because it uses the "Top" link that is placed throughout the content of the file, allowing the page viewer to immediately jump back to the navigation system at the top rather than scrolling; larts.css holds the styling for this "Top" link system. For more on the styling that is produced by each of these .css files, please see discussion in sections below.

    Before concluding this section to move to the next, a few words should be said about the decision-making behind the division of css code into various files. Partly it was due to borrowing files and heredity thereof. For example, since I needed to use the "Top" hyperlink (discussed in the previous paragraph) and its styling was in lart.css, I saw no need to 'reinvent the wheel' and I simply borrowed this small file with its limited styling (it also has some limited paragraph styling).

    Next, because I foresaw that those html files having multiple navigation systems would need a different styling approach to those that did not -- I decided to encapsulate their styling in a file separate from the others; hence, this accounts for the establishment of ccc_others.css for the local_arts.html and the website_elemente.html files (as both of these html files have two navigation systems) and the establishment of ccc.css for the other 6 files (feb.html, events.html, box_office.html, directions.html, facilities.html, contact.html). [Note: at this point, I had not foreseen that events.html, whose styling started out like the files using ccc.css (the other 5), would end up needing a second navigation system. I was not yet far enough along in design. This would, of course, present problems to be surmounted. See discussion in a later section.

    At this point, the intention was to keep (most or all of) the rest of the styling in what was intended to be the primary file for this purpose, ccc.css, especially as it was initially thought that the rest of the files would be very similar in structure. However, there were differences that eventually had to be addressed within ccc.css that could have merited separate css-styling files for each html file (but there would have been, undoubtedly some significant code duplication this way). Nevertheless, the solution I adopted, that of leaving the code to account for all the styling idiosyncracies between the remaining 6 html files in one css file could be said to be confusing. My answer to this is: yes it *could* be, without proper commenting, which I think (and hope) I have provided.

    Furthermore, the main (structural) difference between the two sets of files (set one, 2 files: local_arts.html and web_elements.html; and set two, 6 files: feb.html, events.html, box_office.html, facilities.html, directions.html, and contact.html) is that the first set (of two files) has the main navigation system AND a secondary inter-page navigation system (mentioned above). Because of this, it was felt that styling would be sufficiently different (though there would be overlap, as well, between the two groups) to merit handling the styling of the two groups in two different files, hence the establishment of ccc.css (for the group of 6 files) and ccc_others.css (for the group of two files).


    CSS for Style and Layout

    Using named sections and div's were more important in this project for dealing with what I termed above as 'styling idiosyncracies' between pages. So, not only is it important to know what css file goes with what html file (discussed in the immediately preceding section) in this code design, but it is also important to know what section or div applies to what html page (or part of a page) to, effectively, 'turn on' some parts of the styling code and 'turn off' others.

    First, since neither larts.css (designed before this project and simple enough that it does not have to address more complex styling issues) nor calendar.css (designed purely for the calendar layout only) deal with multiple, changing styling complexities, they are both exempt from this consideration (they have no sections or divs) and need not be considered for this discussion. So that leaves only ccc.css and ccc_others.css

    Second, ccc_others is by far the simpler of the two files. Inside it one will find the default styling, body styling and header styles, all fairly standard. Where it becomes interesting is where the id attribute selectors come into play. As mentioned above, they cause different sections of styling code to be activated or deactivated. For example, in ccc_others.css, there are two sets of id attribute selectors at play, labeled #ONE and #TWO. Since the HTML files that employ the ccc_others.css file have two sets of navigation systems, one might reasonably assume that #ONE applies to the first (or main) one and #TWO applies to the second (or secondary) one; such an assumption would be correct. Within the HTML files, the main navigation system resides within a Div section id'd as ONE and the secondary navigation system lies within a Div section id'd at TWO. Then using these labels within the css file allows us to target styling for each section that can be (and is) different from the other section. Consequently, whereas the main navigation system has gray tabs (that turn red when activated) hanging from a red line, which distinguish it as the main nav system, the secondary nav system is a set of embedded links in the page the text of which is red and which turns fuchsia when activated. Thus, the two different systems have different styling and are distinct from each other.

    The last file (the behemoth - at least for this project) is ccc.css. With minimal comments, it is eight pages long. Fully commented, it should run to 10 or 11 pages. Why so long? Because of the various styling idiosyncracies handled. For example, several use horizontal lines, but some of them need the lines to be 50% in width, black in color and centered; some need to be 85% in width, red in color, and not centered. Also almost all the html files use either unordered or ordered lists and they all call for different fonts, font-sizes, colors, margins, weights and more. Using divs and sections provides a way to easily keep everything consistent for all divs or sections of a certain name, but yet allow for variety (between divs and sections) without having the variety of styling creep into and affect other areas you would not like to expose to alternate formatting. In other words, it provides a wonderful mechanism for managing your styles and maintaining control.

    CCC.css, like ccc_others.css, also employs the id attribute selectors for managing the two sets of navigation systems. Initially, it was not foreseen that this would be needed. The idea was to keep this within ccc_others.css. However, the html file which eventually made use of two navigation systems necessary for ccc.css was events.html. In the beginning, I did not have a clear idea of what the file content for this file should be and I was thinking it would be shorter than it turned out to be. However, as it grew, I realized it would need an internal navigation system with links to jump back to the top. Yet, it was more of a hybrid file at this point, having more styling in common with the files using ccc.css than the ones using ccc_others.css EXCEPT for this one point. So, I took the div's in play within the html files using ccc_others and set them up in events.html in much the same way AND THEN took the code from ccc_others.css having to do with the styling of these div's (the #ONE and #TWO) and put this into the ccc.css file. One might ask, why did I just not include the ccc_others.css into the html file for events.html (instead of taking the code for #ONE and #TWO out and putting it in ccc.css); good question. Yet, I did not do this because it would have been too much work to overcome the other styling that ccc_others would have applied to the html file of events.html, especially when I had a perfectly serviceable file in ccc.css EXCEPT for the need of the #ONE and #TWO div styling code.

    In addition, ccc.css employs still other id attribute selectors and it does so as follows (i.e., the majority of the functional html code in the files listed is encapsulated into the section with the given name):

    • 1. Section: 'summary';
            Files: feb.html, box_office.html, facilities.html, directions.html.
    • 2. Section: 'summary_addy';
            File: contact.html.
    • 3. Section: 'summary_events';
            File: events.html.

    So, in other words, the styling for those files encapsulated in 'summary' will be the same; the styling for 'summary_addy' will be similar but have suble differences for variety; and the styling for the file in 'summary_events' will be like that for 'summary_addy'.

    So, as mentioned above, it is true that the code identified by id attribute selector could have been put in different files (instead of sections named 'summary,' 'summary_addy,' and 'summary_events,' we could have had css files with these names to include in the html files instead) and then ONLY those file could have been included in the html file it went with, but this would duplicate common code at least 3 times. So, it was felt that using sections was a better way to go. Without a clear preference expressed by our book, I was left to my own thought processes to decide and that is what I came up with.



    I should write down issues as they occur because in the heat of design and pursuing the goal, the next one that arises tends to supplant the one that came before. I feel like I had so many during the design of this project, yet now I can only recall a few. Maybe it happens that as I work with what, to me, is an issue at the time, once I have the solution, it no longer looms as large nor seems like it should have been such a problem, but seems more like an 'old friend' now (weird as that may seem).

    At any rate, there is one issue I HAVE NOT resolved and it vexes me mightily, but I think I am in good company, so that makes me not feel quite as bad as I might otherwise. It involves the unordered list. For some reason, I have not been able to get it to work properly with this project, try as I might. I even spent a fair bit of time researching it on the web and trying out different solutions that were proposed there, all to no avail. Finally, in the interests of making progress in limited time, I had to give up and go on. Still, rather annoying, that!

    Another issue which turned out to be solved very easily (and which I did not notice myself at first) was the trailing red line for the main navigation system. When I was getting close to being done with coding both html and css I asked a friend to look at my project and he immediately said, "What's up with that red line trailing out?" I hadn't really noticed it before then (too close to the forest to see the trees). But fixing it simply involved tweaking the margins of the nav system.

    The usefulness and necessity of controlling code (the application of styling or not) by using named attribute selectors as often as I did was a real eye-opener for me, too. At first, I was a bit perplexed how to handle some of these styling differences. It was a kind of mental leap to permit myself to use these so freely. Once the leap was made, I was off like a gazelle!

    In building feb.html -- specifically the calendar segment of the code -- I encountered some difficulty with step 9 at first. That is, getting the spiral notebook edge to show up correctly on the borders was non-trivial. When I attempted to enter it, I thought I could specify each piece of the back ground image (the top-left piece, the top-right piece, etc.) on its own line of code as in 'background-image: url(top-left.jpg)' and then 'background-image: url(top-right.jpg)' with several of these statements, one for each image (and then an accompanying background-position and background-repeat statement for each image -- I know it probably sounds goofy NOW, as I would have had loads of these statements, but I was thinking it would be a simple way to easily grasp what I was doing when I looked back at it). Only this DID NOT work. To work, it had to be entered as:

    "background-image: url(topleft.jpg), url(topright.jpg), url(bottomleft.jpg), url(bottomright.jpg), url(top.jpg), url(left.jpg), url(right.jpg), url(bottom.jpg);

    background-position: top left, top right, bottom left, bottom right, top left, top left, top right, bottom left;

    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-y, repeat-x;"

    Sigh ... live and learn. I hope I have a lot of living left to do because I sure have lots of learning left to do!!!