Dan Fergus Design > Student
Resources > Syllabus > Exercise: Rounded Corners and Shadows
Rounded Corners and Shadows
Assignment
Create a Web page layout that makes use of rounded corners and drop shadows. Imagine that you are putting together an art information site; on each page will be an image of a work of art, a box that describes the work's info (title, artist, dimensions, etc), and a box that contains a written description/explanation. In addition, the page will contain a set of links to other works of art/sections. Each text boxes should use rounded corners, and the image (at the very least) should have a drop shadow. I've put together a rough mock-up of such a page here.
Procedure
- Read through and try the rounded corner and drop shadow tutorials.
- Gather your assets. I have put together a basic html page with an image, dimensions, text info, etc., which you can see here. You may use the information and image I've provided or you can provide your own (you could choose to feature your own work of art, for example). Change any of the pertinent information, but don't eliminate any elements (you must have the navigation menu, etc.).
- Decide on a layout/visual style for your page. Choose colors, fonts, arrangement, etc. Remember, you must use rounded corners and at least one drop shadow.
- Create rounded-corner graphics in Illustrator or Photoshop. For this exercise do not use the CS3 method.
- Build your page using HTML and CSS.
- Test the page in multiple browsers.
- Link you home page to this page and upload everything to the server.