Assignment Description:
For this project, you will work with a partner (one other person) and select one local service agency from among several for which to create a web site (no less than three pages). The agency has supplied the content for their website, and you will structure the website design and rearrange the content (text, graphics and data) into a website according to (if supplied) the agency’s preferences. Your focus will be on professional design elements, adding value, and following the customer’s instructions.
XHTML will provide the structure of your pages, and CSS will be used for all formatting, including as much as possible the layout of the html elements. Tools permitted include text editors with syntax highlighting and tag completion (e.g., NotePad++, HomeSite+, etc.), text editors with drag-and-drop capabilities (e.g., DreamWeaver, NVU, etc.), pre-existing website templates found online (you must retain all credits to the original source as required by any license agreement), and any FTP or SCP application of your choice.
This assignment involves the following tasks:
Cleaning up, Formatting, and Documenting the Code
Updating and Modifying the XHTML and CSS
Improving the Website
Clean Up, Format, and Document the Code
Remove extraneous code (unnecessary meta tags, incomprehensible comments, tables that don’t serve much purpose or which need to be converted to css, scripts that you will not be using, etc.) Filenames should not include spaces, parentheses or brackets.
Apply a style of your choice to the code. This involves inserting tabs and spacing to make the code readable to both yourselves and others who want to modify the site, and to demonstrate the hierarchical structure of the elements (i.e., to show which elements arc contained within other elements, etc.)
Markup your code with useful and explicit comments so the agency (and your instructor) can see what you have done, and to make debugging easier.
Update and Modify XHTML and CSS
The layout of each page should provide a consistent look throughout the website, making use of sections. Therefore, insert <div> tags with the following classes or identifiers: “heading’', “main”, and “footer’. Include a logo image in <div id=”heading”>, the primary content in <div id=”main”>, and a copyright in <div id=“footer”>. Since the content belongs to the agency, they retain the copyright. (You can put your name on the project in a well-placed comment within the code on each page).
Use an additional <div> with id=“all” to control properties such as margin, width, and background. The other <div> tags should be contained within this one.
Create an external style sheet named “style.css” and link it to each web page on your site. Use at least five of the following html selectors or css properties below (you will assign your own values):
<h1>, <h2>, or <h3> as appropriate. (Counts only once).
Create a class of <p> for a distinguishing purpose (a magazine pull quote, for example). Use at least once; class=’shade”.
Use a descendant selector other than an anchor tag.
Tables should be indented left and right, and have a background color distinct from the body background. Table headings should have a distinguishing property.
Choose a contemporary professional font for all pages, except where it may be appropriate to use italics or bold. Avoid the use of whimsical fonts.
Make use of background images for at least two elements, o Invoke the float property appropriately.
On each page the navigation should include a link to “home” (index.html).
Follow the current xhtml standards (i.e., every tag requires a closing tag). Supply a DOCTYPE with valid DTD (we will use XHTML 1.1). Validate your website (xhtml and css) using an approved validator.s
Improve the Site
Choose two or more ways to improve the site overall. Each item is worth 3 points, for a maximum of 6 points.
Modify index.html to be appealing and descriptive of what the agency’s social issue is and what they are doing to address it.
Move content from large, difficult -to -understand pages onto easier-to-use, shorter pages designed for a narrow topic. Use appropriate links or submenus.
Improve the layout of all pages. Different from the above option, this would involve moving the content itself into better positions using recognizable layouts. Avoid content straight down the center of the page, with no complementary text to the left or right; avoid stacking each element in blocks and content-dominant sections with large, unexplainable “white space”.
Incorporate pages with little to no content onto higher-level pages in an elegant way. Remember that some pages might be under construction and will be used later by the organization.
Standardize the navigation for all the pages. This should include identical language and position on the web pages. Use lists or apply styles to anchors.
For an image gallery, be sure to make thumbnails of the images and link from the thumbnails to the high-resolution images.

Solution PreviewSolution Preview

These solutions may offer step-by-step problem-solving explanations or good writing examples that include modern styles of formatting and construction of bibliographies out of text citations and references. Students may use these solutions for personal skill-building and practice. Unethical use is strictly forbidden.

**** Website is optimized for 1440 x 900 resolution ****
/* Main sections of the page */
html, body {
height: 100%; /* Sets up height of the body to 100%. Necesarry because of the footer. Otherwise, footer won't be at the bottom of the page. */
margin: 0; /* Margin and padding 0 in order to use the entire space of the page */
padding: 0;
font-family: Verdana, Arial; /* Sets up primary and secondary font for entire html */
#all {
min-width: 1440px; /* Optimizing for 1440 x 900 resolution */
max-width: 1440px;
margin: 0 auto;
background: -webkit-linear-gradient(#FF9900, #FFFFFF); /* Sets up linear-gradient background color for various browsers, except earlier versions of IE */
background: -moz-linear-gradient(#FF9900, #FFFFFF);
background: -o-linear-gradient(#FF9900, #FFFFFF);
background: -ms-linear-gradient(#FF9900, #FFFFFF);
background: linear-gradient(#FF9900, #FFFFFF);
min-height: 100%;
position: relative;
#heading {
width: 1120px;
height: 125px;
margin: 0 auto; /* Centers the heading */
#main {
padding-bottom: 50px; /* Reserves the space for footer */
#footer {
width: 100%;
height: 50px;
position: absolute; /* Sets up footer's position. It will always stay at the bottom of the page, regardless of the page size */...

By purchasing this solution you'll be able to access the following files:

50% discount

$100.00 $50.00
for this solution

or FREE if you
register a new account!

PayPal, G Pay, ApplePay, Amazon Pay, and all major credit cards accepted.

Find A Tutor

View available Web Development (HTML, XML, PHP, JavaScript, Adobe, Flash, etc.) Tutors

Get College Homework Help.

Are you sure you don't want to upload any files?

Fast tutor response requires as much info as possible.

Upload a file
Continue without uploading

We couldn't find that subject.
Please select the best match from the list below.

We'll send you an email right away. If it's not in your inbox, check your spam folder.

  • 1
  • 2
  • 3
Live Chats