To complete this lab, you should have a very basic knowledge of the PC desktop, including how to move a mouse, type on a keyboard, and create folders and files.
What You Will Learn
In this lab, you will learn how to:
- Set up web folders, and distinguish types of file extensions
- Securely connect to a web server, and how to upload and download files using ftp
- Use simple text editors to edit text files to create web pages using basic html structural elements
- Annotate your website with comments for yourself and others
- Use hyperlinks to navigate within your web page, your web site, to the rest of the web, and even to send an email
- Create and work with tables, including nested tables
- Create and work with lists, including nested lists
- Appropriately add styles to your website using cascading style sheets (css) to apply attributes to text (i.e., fontweight, font-style, font-family, color, text-align, text-indent, letter-spacing, line- height, text-decoration, margin, padding, etc.)
- Create various selectors (such as class and pseudo-class, ID, and dependent selectors) and learn when to use them
- Work with colors and images, using standard conventions to develop ADA-compliant websites for the broadest audience (including special needs audiences such as the visually-impaired or color-blind, etc.)
- Employ language standards to overcome cross-browser compatibility issues and style inconsistency
- Use various graphic design strategies to create visually appealing websites that are professional- looking and interesting, and that create value while taking into account your website objectives and your target audience
What You Will Need to Complete This Lab
To complete this lab successfully, you will be provided with, or will need to obtain the following:
- The use of a text editor
- A web server account (currently on Mercury)
- The use of Secure FTP software
- An internet connection Learning Outcomes:
This lab assignment is intended to fulfill the following outcomes of the course:
- I.1.0 Develop analytic skills Students will use css for all formatting, and observe how css enables the separation of document content from document presentation, including elements such as the colors, fonts, and layout. I.1.4 Develop ability to synthesize and integrate information and ideas Students will design and implement the organization of and relationships between multiple web pages.
- I.1.5 Develop ability to think creatively Students will create the content and layout of each page, and assess their expression in terms of the whole web site.
- III.1.4 Learn concepts and theories in computer science Students will use xhtml to create .html pages, and observe how plain text (xhtml) is converted to structured web pages through the interpretation of a web browser.
Conditions of Satisfaction:
To be considered for grading, your submission must meet the following conditions:
- Your website must be loaded onto Mercury, into your www folder, and it must display your index page (index.html) when your URL is opened by a contemporary browser.
- Your website’s home page must be given the name ‘index.html’.
- Your website must NOT be created with a website code generator (such as DreamWeaver), but instead, use text-based editors such as Notepad++, TextWrangler, etc.
- Your website should be professional, in good taste, and must not violate the Code of Student Rights, Responsibilities, and Conduct. Websites which serve to devalue a person or group of persons, or which are derogatory, hateful or intimidating to a person or groups of persons based on gender, religion or ethnicity miss the intent of the assignment and will be rejected.
- Your website must make use of embedded Cascading Style Sheets (CSS), and the styles must be declared internally (i.e., in the HEAD section of the document of each web page that is a part of your website).
You are engaged with a company that requires a website. This can be an imaginary company that you make up, or a real company you own or want to start up. Your company can be a not-for-profit, a service company, or a forprofit enterprise. Your job will be to inform the world about your enterprise.
For this assignment, you will be creating at least three separate pages for your company’s website. You will have a “home page” that will contain your company’s name, a description of what your company does, and links to the other pages of your website. Your second page will be a “products page” detailing and describing the products and/or services your company offers and sells. Your third page will be a “biography page” containing information about you and at least two other company executives. The information about yourselves should be relevant and appropriate to your company. You will use xhtml and css to provide the structure and dictate the content of your pages. You will use CSS to take care of all formatting, e.g., font selection, size and color, background color, positioning, etc.
Page setup and appearance, overall
- Begin by developing the structure of one page. Give it at least three sections: a top section (or banner bar for site identification), a middle section (for primary content), and a bottom section (footer). You will use <div> tags to create each section, and you will format each section using css. Control the width of your page. Each page will have the same look and feel. (2)
- Make a navigation section (menu) for the site links. Every page, except the index page must link back to the index page. Replicate this section on all pages. (1)
- Use an ID selector or class selector for each <div> on your pages. Also, style the links in your navigation section differently from the links on the rest of the website. (1)
- This page must be formatted using embedded css (not inline css). At least 4 elements from each page in addition to the section <div> tags must be styled using css. (2)
- The site should manipulate the title bar of the browser; Use <title> tags. (1)
- A relevant heading (headline) should appear at the top of each page after your site identification (banner). You may use additional headlines as necessary throughout the website. Use <h1> tags for the highest-level headline, etc. (1)
- Choose a font that you feel gives a representative, but professional appearance. Make sure that it is properly sized so that it is easy to read. This font must be used throughout your website. (1)
- You make use of at least 2 font-styles (not necessarily font-families). (1)
- Foreground and background colors should contrast well. Choose background colors that will give a professional impression. Remember that some background colors can make reading a screen difficult; choose the color wisely. This background should be used on all of your pages unless you have a particular design rationale for doing something different.
Your web site should look professional, and be in good taste. Containers (usually <div> tags) should stack nicely and line up vertically. (1)
Home (index) page set up: “who we are”
- Repeat the essential notions about your company (this should be a description about the company, or maybe how your customers talk about your product). Include what separates you from your competition and a call for your site visitors to experience (i.e., purchase) what you have to offer. Your writing style will be important here. (3)
- For at least one paragraph, invoke a special class or ID. The styling you apply to this paragraph must be visibly different from the remaining paragraphs on the webpage. This could include a first-letter drop cap, a pull-quote, shaded box, etc. (1)
Products page set up
- This page must have at least one table where you itemize your products that you sell. If you are not selling products, then show at least five things that you can offer (e.g., classes, consulting sessions, tours, etc. – whatever your company does). You must list at least five things; you are welcome to have more. Borders should be visible (at least 1px), and column headings must be centered and use bold font. Have at least four columns: the item number, item name, item description, and unit price. (3)
- In addition to this table, you should have at least one paragraph that concludes the matter, and summarizes your position convincingly. Your ability to argue matters here. (2)
“Key Figures” (corporate biographies) page set up
- Display the key players on this page. You may use a different label, such as “Directors”, “Executive Management”, “Proprietors”, “Board Members”, “Sales Team”, etc., if you prefer. There should be no fewer than three. Include the name of the key figure, an image or other representation of the key figure, their position in the company, and why they are a person of interest (maybe their credentials: education, prior experience, etc). Separate into paragraphs if necessary. (2)
- For the other key figures, have them appear horizontally or vertically with the first. Invoke a class attribute to “float” these additional figures as appropriate. Be sure to clear the floats when you are done.
This material may consist of step-by-step explanations on how to solve a problem or examples of proper writing, including the use of citations, references, bibliographies, and formatting. This material is made available for the sole purpose of studying and learning - misuse is strictly forbidden.<!DOCTYPE html>
<link href="style.css" rel="stylesheet" type="text/css"/>
<img id="logo" src="img/logo.png" alt="James Wang Drug Store" />
<a href="product.html">Product & Service</a>
<a href="about.html">About Us</a>