Site Creation Process
The site is designed as a multi-page tutorial, which dynamically updates the pages available and navigation process using PHP for server-side scripting based on html files added to the “pages” directory, thus working much like WordPress or other content management systems, but without using a database or authoring environment. Because the script is run on the server, it does not require the user’s browser to interpret the script.
Site creation follows a relatively simple process:
- Create the initial page content so that have the unique content for each page in the portfolio.
- Create the basic index.php page from which all other pages will be built.
- Create the CSS style sheet for the pages and link that to index.php.
Create initial page content.
- The author created one blank document for each page you want to include in your site.
- After adding the text content, the author added simple HTML content to each page. These pages do not include navigation menus, content wrappers, head elements, or body elements, just the content that would go inside these.
- The author used the following block-level elements on these pages:
- Tables for display of tabular data (do not use tables for layout)
- Lists (ordered, unordered, or definitions)
- The following inline elements are appropriate to include:
- Strong, em, b, and i elements
- The author saved each document in the “pages” directory with a meaningful 1-word name and the “.html” file extension. The author recommends not using extra periods or underscores in the file name: the file name will be used to create the links in the navigational system.
- Good file name: graphics.html
- Bad file name: my_images.html
- Links and images: In order address the requirement that inline images and links be used, the author included several on the graphics page.
Create the style sheet.
The author’s primary concern in choosing a visual design to apply to the site was ensuring that he included all required visual elements.
- General Layout: The author chose a three-column layout for the site, with a narrow left column containing the nav buttons, a center column containing the main content, and a right-hand column containing decorative images.
- Nav column: The nav column took all items in the nav element and used assigned them a float property and a narrow width property. This ensured that they appeared on the left side of the screen, parallel to the main body of the content. The links in this column have some additional decorative effects created through use of the CSS :hover pseudo-class to give them different styles when they are hovered over.
- Content column: The content column includes the main information for each page in the site. This was assigned a left-hand margin equivalent to the width of the nav column so that it would not wrap around the nav column. It was also assigned a width property ensuring that it did not extend into the third, decorative column.
- Decorative column: The decorative column made of the space to the right of the extent of other materials in the content wrapper. It has no real content in the HTML document, but the CSS style sheet gives this right-hand area the illusion of content by allowing the rotating images that appear in its background property to be visible without text or other HTML elements covering them. This creates a decorative area without placing additional image elements into the HTML, making the content easier to access for visually impaired users.
- The header: The header is the same width as the first to columns, which allows it cover both columns without interfering with the images to the right. The heading 1 element has a text-align property of “left” and the heading 2 element has a text-align property of “right.”
- The footer: The footer element is outside the main section of content and is the same width as the whole main section of the content. The text is aligned center.
- Backgrounds: The body element has a background color of gray and the main content section has a background of white, with background images along the right side, as mentioned above. In addition, users of browsers that comply with CSS3 standards (Chrome, Firefox, Opera, and Safari) will notice that the backgrounds include curved borders and drop shadows. This defaults to standard borders for Internet Explorer users since Internet Explorer does not support drop-shadow and curved border properties.
- Images: Images included throughout the site in the form of decorative background images (background images create the least interference for students using screen readers and are most appropriate for purely decorative images). In addition, several inline images are included in the graphics page.
- Typography: The author addressed each of the WGU requirements for typographic design.
- Two fonts: The author used two fonts in the design: Fontin and Fontin Sans. Fontin Sans is the primary body font (since it has a full range of font variants available) and Fontin is used for headings. The two fonts have a similar look, giving the design visual coherence, but are distinct enough to complement each other. Neither font is installed on many computers, so the author embedded them into the site using CSS3 font embedding, which is available in the past several versions of Firefox, Google Chrome, and Apple Safari and has been available in Internet Explorer for the past 10 years. For those who cannot use embedded fonts, the site defaults to Tahoma (or the computer’s default sans-serif font) for body text and Palatino (or the computer’s default serif font) for headings.
- Font colors: The site uses black, gray, and dark red (hexadecimal color code #aa2222) colors throughout the main section of the document, all assigned through the style sheet to specific elements. The type in the footer is white, with black used for emphasis.
- Color-blind users: While red is a tough color for color-blind users, the dark red color chosen has sufficient contrast from the white background and is coordinated with other visual distinctions so that color-blind readers can still distinguish red text from other text on the page and from the background.
- Emphasis: The site uses emphasis on various elements throughout the design, but they are most fully visible on the current “graphics” page.