Project One: Diners, Drive Ins and Dives
Following in the footsteps of the popular tv show, your first project will be creating a website for a restaurant. I will provide the details (and a choice of venues), you will put the pieces together and make it work.
In a step by step process, you will build a website for one of three fictional restaurants, using the content I provide (brief description of the restaurant and a menu).
- Mama's Kitchen, a gourmet southern style restaurant
- Bob's Burger Barn, a 24 hour dine-in or drive thru restaurant
- Oak Leaf Cafe, an organic vegetarian cafe
Step One: You will design and create the graphics, including a simple text logo, and image-based rollover buttons for the navigation.
Step Two: Layout a page using HTML and CSS to style and format the text and other elements.
Step Three: Refine your design and use it as a template for the pages of your site.
Step Four: Refine design again, debug problems, and upload site to the server.
You will have the opportunity to ask the "client" (me) questions about the project, to help define the objectives and guide the creative development of the site.
Pages will include: Home, About, Menu (can be multiple pages), & Contact. You can name the pages as you want.
Step One: Designing the Graphics
Use Illustrator, Photoshop or FireWorks to create a simple text-based logo/ banner to be used as a header/site identifier, page titles/headers for each site section, and image based rollover buttons for the navigation. Additional imagery can be added as desired.
~ Create a working (root) folder for all your files named Yourlastnamep1. Use a source folder to contain all the original input files and your working imagery (psds, layered files, etc). Plus an image folder to store your optimized jpgs and png files.
Step Two: Page Layout with HTML & CSS
Draw a rough layout of your design for your website. Decide whether you want a fixed width layout, or an elastic layout that expands to fill the browser window. Use divs to break up your page for your logo/banner, navigational menu, page titles, and body copy (text). Use the simplest structure that will work for your design. FOrmat using CSS. Once you set up your design, insert all your images and content and enable your links.
Step Three: Create a Template and Build Out Your Site
Refine and finalize your design, add all links (predetermine all page names) and then save as a template. Define the editable regions of the template. Create content pages based on your template using "New Page from Template". Insert the content for each page and format the text using external CSS.
Step Four: Finalize, Debug and Upload
Put on the final touches, upload to the MAT server and check to make sure everything works. Correct any errors and be prepared to present to class.
Project Two: Website of Your Choice
Take all the knowledge you will gain about DreamWeaver and create the website of your choice (on approval from your teacher). Whether it be a portfolio, business site, or just a personal site, there is a lot of flexibility. I will push for highly developed design work, so your final project will make us both proud.
More details on both projects coming soon.