- ✔ the design concept should reflect the organic forms of the jewelry. Incorporate curves, rounded corners, or overlapping elements
- ✔ the site must use a list-based navigation system
- ✔ the silversparktext.txt file includes text for the home page and sub-pages
- ✔ the site must include one of the three versions of the logo, supplied in the images_logo folder
- ✔ product photos of bracelets, earrings, and necklaces are provided in the images_jewelry folder.
- ✔ several different accent images are provided for your creative use in the images_transparent folder. These images are saved with transparent backgrounds, making them ideal candidates for absolute positioning
- ✔ 1. Using the given elements, and your understanding of what the client needs, sketch out the home page design on paper. Mock-up a home page layout in Photoshop or Fireworks.
- ✔ 2. Then move on to Dreamweaver, choosing a CSS layout that fits your design concept.
- ✔ Dreamweaver CS5 users: Go to File > New and choose a CSS layout similar to your wireframe. Choose "Create a new file" for the Layout CSS. Save to your silverspark folder as "styles.css". When the new HTML file opens up, save it to your silverspark folder as "index.html".
- ✔ 3. Make adjustments to the CSS layout. Modify the existing CSS properties directly from the CSS Styles panel or open the CSS Rule Definition dialog for the full set of options.
- ✔ 4. Incorporate the list-based navigation. Choose a list style from the listamatic folder. Open the list HTML file and switch to Code View. Copy and paste the unordered list into your Silver Spark index.html file. Then, open the list CSS file. Copy and paste the list styles into your Silver Spark external style sheet file. Modify the list styles to suit your design.
- ✔ 5. Insert the home page content from the "Opening text" section of the supplied document (Silversparktext.txt).
- ✔ 6. Format the typography using CSS. Redefine the p tag for the paragraph text and the h1 tag for the headers. Create class selectors for extra bits of formatting like photo captions.
- ✔ 1. First, make sure you are happy with the home page. Preview in a browser. If you would like feedback on your the home page design before building out the sub-pages, feel free to email your instructor.
- ✔ 2. Rather than rebuilding all the sub-pages from scratch, you can duplicate your home page. Go to File > Save As. Name the new page bracelets.html and save in your silverspark folder. Replace the home page content with the bracelet images and text.
- ✔ 3. Repeat this process for the other pages:
- ✔ home >> index.html
- ✔ bracelets >> bracelets.html
- ✔ necklaces >> necklaces.html
- ✔ earrings >> earrings.html
- ✔ custom >> custom.html
- ✔ about us >> about.html
- ✔ contact us >> contactus.html
- ✔ When you're finished, test your site in a browser and make sure all the links work.
- ✔ Open your index.html file and add a link to Exercise Five.
- ✔ Publish your project using Dreamweaver's FTP feature. Click the Connect icon at the top of the Files panel to connect to your Web host. Select the silverspark folder and click the Put Files icon.
- ✔ When Dreamweaver asks if you want to include dependent files, click Yes.
may 22 2011 ∞
may 26 2011 +
may 26 2011 +