W Toku

HTML Tables to CSS

This is a very simple one-page HTML/CSS project.

The deliverables are two files (one HTML and one CSS) to generate a single page on a website.

Do you have experience converting a table-based graphic layout into a CSS-based graphic layout? Are you up-to-speed on the latest HTML specification?

The right person will find this one-page HTML/CSS project to be a no-brainer.

## Deliverables

Project Summary

There are two (2) deliverables and five (5) specific tasks for this project. Once those tasks are complete,

you will deliver two files, one HTML and one CSS. Each specific task is accompanied by the QA tests which

must succeed for this project to be accepted.

Deliverables:

-- One HTML file

-- One CSS file

Tasks:

-- Convert the table-based layout to CSS layout.

-- Clean up the HTML code, replacing deprecated or out of date tags.

-- Make a flexible (not image-based) HTML+CSS headline in the upper left corner.

-- Replace Javascript OnMouseOver with CSS functionality.

-- Include comments in the files for long-term maintenance.

Put all style information in the external CSS file, all content into the HTML file. Reference the external

CSS file in the HTML file. The live page uses some deprecated tags (font) and (nobr). Please bring the code

into the 21st century by using only currently active tags. Overlay a white headline on the graphic in the

upper left corner. Old style OnMouseOver javascript must be converted to CSS. For long-term maintenance, you

must comment your code.

You will develop the code on your site. Point to the rendered page for initial review and comment. Submit

the deliverables and upon passing all QA tests (see below) the escrowed funds will be released.

Resources:

1) All images have been created, and are available on the site. You may refer to them directly, or you may

copy them to your local dev station. If you download them, set up an identical site structure and use

relative links so that the page loads properly when you send the files.

2) An image catalog has been created for your convenience to match images/names.

3) An image of the layout is available for your review: [url removed, login to view] NOTE: the image

has a white border all around. That border is simply an artifact of the display at screencast.com. The

actual site goes all the way to the edges.

4) The [url removed, login to view] file is available on the live site.

Project Specifics:

Task #1: Convert single-page template from tables to CSS.

Replace tables with flexible CSS layout. Use float.

Position:Absolute is not acceptable. The layout must flow and stretch as content is added.

QA Tests for Task #1:

1) Is the CSS in an external file?

2) Does the HTML file reference the external CSS file?

3) All styles defined in external CSS file - NO styles defined in the HTML file

4) Does the page render like the sample when displayed in IE?

5) Does the page render like the sample when displayed in Firefox?

6) Does the page render like the sample when displayed in Safari? (Simulator: [url removed, login to view])

7) Does the page float and automatically adjust when content is updated?

8) Does the code avoid using "position:absolute"?

Task #2: Replace deprecated tags with current tags and CSS styles

1) Replace all deprecated tags with CSS or updated tags. I have identified {font} and {nobr} - there may be

others. You know the latest HTML specification. Please update them all.

2) Remove all {br /} tags from the body copy. Those tags are a hack due to the table-based design. Replace

with style-defined {P} tags

QA Tests for Task #2:

1) All {font} and {nobr} and deprecated and out-of-date tags have been replaced with CSS Styles.

2) All {br /} tags have been removed from the body copy. Replaced with style-defined {P} tags.

3) All tables replaced with CSS.

4) HTML is valid, no errors - based on online HTML validator ([url removed, login to view])

5) CSS is valid, no errors - based on online CSS validator ([url removed, login to view])

Task #3: Create a flexible headline

Image gen_60.1 (the grapic in the upper left, with the two orange dots) must be a CSS background for a white

text headline. Please add the words "HEADLINE HERE" as text in the HTML file. That will allow us to modify

the headline copy over time.

Headline Attributes: Text color = white, font face =arial, Text Size: 20pt (or to fit).

QA Tests for Task #3:

1) Can the headline copy be updated through the HTML file?

2) Can the headline style be modified in the external CSS file without impacting other styles?

Task #4: Replace the OnMouseOver code with CSS functionality.

The menu on the right has rollover effects created using OnMouseOver javascript. Update the buttons to use

CSS instead of javascript while still achieving the rollover effects.

An example of rollover with CSS can be found at [url removed, login to view]

(NOTE: If you need this example, please do NOT bid on this project!)

QA Tests for Task #4:

1) Has OnMouseOver code been removed from the HTML file?

2) Have Hover (etc.) effects been incorporated into the external CSS file?

3) Do the rollover effects work like the sample when the page is rendered in IE?

4) Do the rollover effects work like the sample when the page is rendered in Firefox?

5) Do the rollover effects work like the sample when the page is rendered in Safari? (Simulator:

[url removed, login to view])

Task #5: Include maintainence documentation through comments

Add comments in the CSS and HTML code providing future coders with instructions.

1) How to update the "HEADLINE HERE" text. Where to find the text in HTML; where to modify style in CSS.

2) How to add additonal buttons with rollover functionality to the right side of the page.

3) Which parts of the HTML can be modified, which parts must be left alone.

4) Other important considerations you feel a future coder would need to know.

QA Tests for Task #5:

1) Are there comments/instructions in the HTML file to update the headline text?

2) Are there comments/instructions to the external CSS file to update the headline style?

3) Are there comments/instructions in the HTML file to add new rollover buttons?

4) Are there comments/instructions to the external CSS file to add new rollover buttons?

It's one page, and a fairly straightforward table conversion and HTML update.

You can view the page to be converted here: [url removed, login to view]~kdweprop/

Umiejętności: CSS, Inżynieria, MySQL, PHP, Architektura oprogramowania, Testowanie oprogramowania, Tłumaczenie, Usługi hostingowe, Administracja serwisami WWW, Testowanie serwisów WWW

Zobacz więcej: xhtml jobs, xhtml css jobs, www dev net com, where to find translation jobs, where to find jobs, where to find design jobs, where to find a coder for simple css, where to find a coder, where do you find coders, where do i find jobs online, where can i find online jobs, where can i find jobs online, where can i find a html coder, website to find coders, website project specification template, website maintenance jobs online, website layout using css, website html 5 download, website design and graphic design online jobs, translation p, translation jobs without experience, translation jobs available, to do or to make a translation, the need for coders in the future, template htm and css

O pracodawcy:
( 2 ocen ) United States

Numer ID Projektu: #3311177

Przyznane użytkownikowi:

martinmccann

See private message.

$10 USD w ciągu 2 dni
(2 Ocen)
2.8

24 freelancers are bidding on average $62 for this job

saggar365

See private message.

$34.85 USD w ciągu 2 dni
(249 Ocen)
6.7
umnuscom

See private message.

$85 USD w ciągu 2 dni
(117 Ocen)
5.8
jaredsark

See private message.

$80.75 USD w ciągu 2 dni
(62 Ocen)
5.8
petersmith

See private message.

$85 USD w ciągu 2 dni
(38 Ocen)
5.8
masterkk

See private message.

$51 USD w ciągu 2 dni
(81 Ocen)
5.5
madhazelnut1

See private message.

$42.5 USD w ciągu 2 dni
(43 Ocen)
5.4
costeldumitru

See private message.

$85 USD w ciągu 2 dni
(58 Ocen)
5.3
maxrovw

See private message.

$12.75 USD w ciągu 2 dni
(129 Ocen)
5.2
Raju1978

See private message.

$255 USD w ciągu 2 dni
(63 Ocen)
5.2
buddyq

See private message.

$55.25 USD w ciągu 2 dni
(60 Ocen)
5.0
matrixhosur

See private message.

$51 USD w ciągu 2 dni
(84 Ocen)
4.8
sukarelawatilx

See private message.

$25.5 USD w ciągu 2 dni
(90 Ocen)
4.5
michaelgrosser

See private message.

$38.25 USD w ciągu 2 dni
(17 Ocen)
4.4
outsourcepk

See private message.

$75.65 USD w ciągu 2 dni
(19 Ocen)
4.2
zincksoft

See private message.

$72.25 USD w ciągu 2 dni
(27 Ocen)
4.0
ChadDolan

See private message.

$76.5 USD w ciągu 2 dni
(19 Ocen)
3.6
cyb1n

See private message.

$42.5 USD w ciągu 2 dni
(2 Ocen)
1.2
vw6932379vw

See private message.

$34 USD w ciągu 2 dni
(1 Ocena)
0.2
wildsmart

See private message.

$68 USD w ciągu 2 dni
(0 Ocen)
0.0
mskt

See private message.

$34.85 USD w ciągu 2 dni
(0 Ocen)
0.0