WEB DESIGN ACTIVITY - PERSONAL "RESUME" SITE
PART 1: PERSONAL BANNER DESIGN (PHOTOSHOP)
To begin your website design training, you will create a personal banner graphic for your resume site using Adobe Photoshop. You will have approx. 2-3 classes to complete this challenge. CLICK HERE to view a sample banner.
- Complete a basic rough sketch of proposed web banner
- Size/Resolution - 950 pixels wide X 150-200 pixels high
- Will include at least 3-4 combined/layered images
- Export your logo from Coreldraw and use somewhere in the banner (as Jpeg or GIF file)
- Text title (created in Photoshop)
- Clear use of layer, image and/or transparency effects.
- Well composed "collage" image
- Photoshop File (to hand-in folder)
- Exported Jpeg file version (for website use)
PART 2: WEB PAGE GRAPHICS IN FIREWORKS
During this short challenge activity, you will use Adobe Fireworks (CS4) to reproduce your "resume" created in Dreamweaver. You can use the same text content, but will work in Fireworks to make a much more graphically appealing site. Your site will include the following:
- Page size: 950 pixels wide X min. 600 pixels high
- 3 pages (Home, Work History & School History)
- BIG HINT! Complete one page, including banner, navigation bar/buttons and content. Save this page as a PNG file. When done, choose SAVE AS from the File Menu and save two additional copies as your other pages. You can then open each of these copies and edit each one on its own. This creates three pages that have the exact same page layout, but different content.
- HOME PAGE CONTENT: a general introduction/about me content page (share information about personal interests, goals, career plans, why you took comm-tech, etc.)
- WORK HISTORY CONTENT: treat this page as a bit of a "resume" - list real (or imaginary) work experience, with details about jobs, etc.; try to add graphics to this page (ex. a logo from a company you worked or wish you did)
- SCHOOL HISTORY CONTENT: list details about your educational background; can be completely accurate or slightly creative (you decide); include graphics that will be used as external links to school sites (such as BCI logo)
- Original graphics (Photoshop banner, titles, buttons, etc.)
- Rollover buttons for site navigation (Home, School, Work)
- Consistent graphics, layout, etc. for all pages
- Proper file management (folders, etc.) for exported graphics and HTML files.
- AND DON'T MISS THIS...
- Include at least one graphic on your pages that you will use as a hotspot in Dreamweaver for an external link (school or employer logo would work).
- Include an empty slice somewhere on one of your pages that you will use to create an image rollover in Dreamweaver.
Working in Fireworks
Fireworks CS4 is very similar to Photoshop. In fact, you'll notice many of the exact same tools found in Photoshop in the Fireworks toolbar. The program is fairly easy to use, but you'll want to follow some of the basic pointers below to help you get started.
When designing your web page, one feature you are required to include is multi-state rollover buttons for site navigation. For the resume site, you should have at least the following: HOME, WORK HISTORY, SCHOOL HISTORY.
- Buttons can have up to 4 states - UP, DOWN, OVER and OVER WHILE DOWN.
- Up State - how the button looks when you first load a page
- Over State - how the button looks when you rollover the button with your mouse
- Down State - how the button looks after you have clicked on it
- Over While Down State - how the button looks when you roll over the it and click your mouse button
TRY IT OUT! Create a 3-state button below!
PART 3: FOLDER STRUCTURE & EXPORTING PAGES
BEFORE STARTING THE EXPORT STAGE OF YOUR FIREWORKS SITE, YOU MUST CREATE A WEB FOLDER STRUCTURE!
EXPORTING TO HTML & IMAGES (for use in Dreamweaver)
Once you have completed your page design for your website in Fireworks, you'll need to export the file in HTML format for use in Dreamweaver. This will allow you to manage the Fireworks pages and create links using the easy site management tools in Dreamweaver. Follow the steps below to export your material.