Scenario:
Every designer needs to market themselves, and the most affordable way to get information out to your prospective clients is a website. For around $100 a year, you can get hosting that will allow anyone in the world to access your portfolio, contact information, rates, and anything else you might want to share. This project will introduce you to the basics of setting up and designing a website.
Project Objective:
Create a Web site portfolio
Specifications:
- The site must contain at least 5 pages.
- The site must be easy to navigate using links.
- The site must be easily organized and contain your art from class.
- The site must include graphics, text, and tables.
- You must include all of the projects you’ve done in class so far this year.
- The site must have a professional appearance
Materials/Equipment:
- Pencil/paper/markers/colored pencils
- Computer Workstation with Internet access
- Adobe Dreamweaver
- Graphics software (Fireworks, Photoshop)
Resources/References:
- Here are some great tutorials at the Maclab
- Help menus in software
- Class or school library resources
- PREZI on Website Basics
Guidelines:
- Make a new folder called “portfolio” for your site first. EVERYTHING for the website must go in that one new folder. Pictures, html pages, scripts, flash… EVERYTHING.
- Define a site in Dreamweaver. It will help you with keeping your files together, and will also help you make your links a lot easier.
- Back up your site configuration, it won’t be saved on the hard drive when the re-imaging happens at shutdown.
- Avoid dead-end pages. There should always be a link back to your main page or the sub-page of the site that the current page is in.
- If you use a background image, make sure that it is easy to read the text over the background you choose. If you pick a crazy background, sometimes it makes text hard to read and people won’t stay.
Evaluation:
Your project will be evaluated on the usefulness and beauty of your site. Is the site well organized? Can the text be easily read? Does the layout catch your eye and make you want to come visit again? Is it easy to get from one page to another? Are your graphics appropriate?
Enrichment:
- Find a web site that relates to this project and summarize it in one or two sentences. Give it a rating of one to five stars concerning it’s usefulness to solving problems in this scenario.
- Create a web page that is a tutorial for other students doing this activity (for example, how to add a counter). Explain in detail (with graphics) a specific concept related to this project.
- Research careers related to this project. Write a report on careers related to Web Page Design.
- Create a web site for another subject area. Do an online report or poetry page. Make a web page to display original student artwork.
- Create a website for your school, one of your subject areas, or for a school club
BONUS LESSON:
- 3 page site
- Each page must have
- title
- h1 text
- blockquote text
- background color is FFFF99
- Text links to the other pages
- each page must have an image with the following properties named
- left aligned
- alt text
- lightened 30
I’m pretty confused here. The MacLab tutorials involve Flash files, but we haven’t started Flash yet? I’m not exactly sure where to start here. I can make really simple websites but I’m not sure how to do all the coding for ones with a “professional appearance”. I know most of the basics involving slicing layouts and the like but that’s as far as my knowledge goes.
Yeah, but he also has a lot of basics on dreamweaver. My tuts are coming soon- so you can get the basics done (write 5 pages and have them in a folder) and handle links later.
Schwartz,
css-tricks.com has some great resources. He even has vids going through the whole process from PSD mockup, to HTML, to CSS. Even some of the recent ones go into basic coding to turn into a WP theme. They are usually 50 minute tutorials, but may be useful for some of your more adventurous kids.