The website is a story book written and personalized for my seven-year-old son, Rickey. The author, David Cadji-Newby and the Illustrator: Pedro Serapico create personalized children’s books. Their site can be found at www.lostmy.name. I have the expressed permission from the creators to use this story for this project. I was inspired to use a story book design for this website from the lessons provided in “CSS3: Visual Quickstart Guide” and it’s use of excerpts from “Alice In Wonderland.”
THE WEBSITE: This website has seven html pages with proper use of selectors, where six are accessible through the navigation bar at the top of each page, and the seventh page, named “documentation” can be accessed in the footer of each page. Each page includes a “meta” block with the page title and link(s). The title of the site, “The Little Boy Who Lost His Name,” is located in the header on the first page, “It’s Gone,” (the index.html). Following is the navigation unordered list with relative paths to each page. Each subsequent page is named “First Initial” (ch02.html), “Next Two Found” (ch03.html), “Two More Around” (ch04.html), “Alas! The Last” (ch05.html) and “Recovered (recovered.html). A total of 8 cascading style sheets (CSS) are used to style each page. Initially I started with 2 CSS files for the first page, and found that the remaining HTML pages only required CSS file per page. The documentation page also has a corresponding CSS file.
THE DOCUMENTATION PAGE (this page): This documentation page located at the footer of each page, is styled for printing and details the styles implemented into this website and their locations.
SETTING OF FONTS: Each page has fonts that are stacked. The font families are as follows:
COLOR AND BACKGROUND:
THE TABLE: A simple table is on each page in the footer of the website.
THE LIST: 3 lists as follows: An unordered list was created for the navigation bar located at the top of each page except for the index.html, in which case is positioned under the title “The Little Boy Who Lost His Name.” 2 more lists are on the Document Page listing the SETTING OF FONTS and COLOR AND BACKGROUND.
WEB FONTS: Downloaded "Chalkboard" web font were used to design the title on the index.html title page.
CUSTOM BULLETS: On the Documentation Page (this page), a list was created under SETTING OF FONTS where custom bullets of the main character (the boy) were customized for this list and COLOR AND BACKGROUND of the robot character.
HORIZONTAL EFFECT: The navigation bar on each page of the website is styled with a horizontal navigation bar and two thin horizontal lines above and below the navigation links for each page.
SELECTIVE STYLING: Use of selective styling is utilized in several places such as the h group where the header is centered on the index.html page and centering of the page title on the Documentation Page (this page) as well as the italicized heading at the top of this page.
NOTES: Additional styling that I implemented was the background design. I wanted my site to represent a unique design look that we had not covered in class.