Project 3: Build a page and style sheet from client specifications
Assignment
Your client has some graphic images and has drawn a sketch of how she thinks her landing page should. You are required to create a wireframe for approval, design a layout specified by a style sheet, then produce the HTML content.
Create a Project_3 folder in your class uploads folder and download the project_3_assets folder from the server.
Create an images folder and a css folder.
Create a new site in Dreamweaver called Project_3.
Open all of your graphic assets in Photoshop and open the French_text.doc in Microsoft word. Write down the name and height and width of each image for use in setting up your CSS elements.
Look at the colors of your assets and decide a complimentary color for your screen background color or for 5 bonus points use the file background_image.jpg as your full screen background and have the image repeat across the page only once and fade into a constant background color.
Use the appropriate tag selector to remove browser defaults and to set up the basic styles for the document.
Set up the primary ID selectors (main containers) first, then set up the secondary ID selectors, enclosing them in the appropriate container and insert images where they are provided.
Your client wants the fleur_de_lys_logo.png on the far left at the top of the page and fleur_de_lys_title.jpg touching the far right, but in a little bit from the edge, also at the top of the page. She also wants gold_gradient_header.jpg as a background behind both images.
She wants the new_page_banner.jpg placeholder image directly below.
In the content area of the page, she wants a menu with 4 buttons (light_gray_button.png) on the left and the text on the right. She wants these buttons to turn color to a subtle green and have a drop shadow when the mouse rolls over them. These buttons will be: Home Page, About Our Company, Our Products, and Our Services – all in French, of course.
She wants a block of complimentary color behind the buttons with a little space between the buttons and the edge of the page. Make sure the two parts of the content area don’t crowd each other. She also wants fleur_de_lys_bg_2.gif centered in the background behind the text.
She wants a white background behind the text (dark grey text) and wants the subtitles to each paragraph bigger, bold, in a medium grey color and centered over the paragraph text. Use a tag or class selector for the subtitles. She also wants a dark green border to wrap around everything.
Last, you need to create a footer with the same background color as the left menu, with a thin black line separating it from the text area. Make the text smaller, grey and centered within the footer. Link to your email in this space.
Complete project due: week 14.
Deliverables
Upon completion, upload to your class folder your root folder with all pages, images, CSS documents, Flash files and Flash videos. Your site will be posted on the faculty.fairfield.edu/mediacenter /tl_110/student_projects site and will be shown and reviewed at the last class meeting.