RISD Division of Continuing Education :: Spring 2006 Web Site Design Studio with Dreamweaver Melissa St. Laurent :: risd@gagnet.net Cell 401-369-2487 Class Resources: http://faculty.risd.edu/cefaculty/mlaurent/dream/index.htm Schedule of this course: Class 1 Web site design and relationship to Dreamweaver. Class 2 Web site planning and architecture. Dreamweaver Demo Class 3 3-page site in 3 hours Tutorial Class 4 Implementation of Visual Elements Class 5 Lecture and Open lab Class 6 Design layout tools - Providing control over layout. Class 7 Rigged Frames and inserting plug-ins Tutorial Class 8 Advanced Interactivity and CSS Class 9 Open Lab and Preliminary Critique (beta testing) Class 10 HTML Class 11 Open Lab, FTP'ing, and final critique preparation Class 12 Web site presentations. Supplies for this course: 1. USB Flash Drive 2. 3 Ring Binder 3. Email address and internet connection Reading List: Required: Macromedia Dreamweaver MX 2004 H•O•T ISBN: 032120297X Grading: Grades will be based on class participation, attendance, grasp of technical material, and final project. Attendance: As in any creative and/or technical learning situation, class attendance is extremely important. In the event that an absence is unavoidable, contact the instructor prior to class via e-mail. Final Project: The Final Project for the course is an original web page fully functioning on the web. Class 1: Introduction Expectations: Class Format and structure, assignments, materials, grading and final project overview. Complete Student experience Survey* Discuss class's knowledge level and expectations for the course. Basic Overview of the World Wide Web * How it works * Bandwidth concerns * File formats * Navigation structures * Relationship to Dreamweaver Discussion of ideas for Sites: Types of sites, where to get ideas, what'll work for this class. Assignments: Begin to create and develop ideas for your web site (At least 2). Analyze other sites and bring in examples of what you're interested in creating. Send an email containing your two site URLs to: risd@gagnet.net. Reading: Planning Handout and Dreamweaver MX HOT Hands-On Training: Scan Chapter 1, Read Chapter 2 Class 2: Planning Phase Lecture and Basic Dreamweaver Tutorial Discussion of: Types of sites/ site architecture, Metaphors, Mapping and storyboarding, Flow chart ideas and styles. In Class project: Introduction to Dreamweaver: Hands on overview of defining a site and creating a home page. We will be using windows palettes, inspectors, site properties, HTML, and ways to work in both code and design views. Assignments: Formally storyboard your site. Take the site ideas and form a cohesive plan with text, images, and site design. Plan out your links and navigation! Plan out the number of pages and form a flow chart to exhibit your navigation from page to page. For next Time: Bring any source materials you need for text (word-processing files) and images (either to scan or digital work made in a paint or vector program). Reading: Dreamweaver MX HOT Hands-On Training: Read Chapter 3 (you do not need to do tutorial in chapter 3, but if your feeling ambitious, it will help you in the long run). Class 3: Basic Page Design In Class Project: Create a 3-page site in three hours complete with tables, navigation and rollovers! This page will act as a placeholder for your website during the design process. Have your page named (index.html) and ready to upload along with the images folder. Assignments: Take what you created in class and begin creating a functional home page. Organize all of your image files (JPG's) into a folder named images. – Bring to next class. Reading: Dreamweaver MX HOT Hands-On Training: Read Chapter 4 Class 4: Implementation of Visual Elements Implementing Photoshop, Image Ready and Illustrator. In Class Project: Demo! Optimize images and navigation to create a basic home page as a starting point of your site. * Preparing and using Assets (Images and text) / File formats * Linking (images. HTML pages, email links, and other file types) * Preparing images / Download time considerations and bandwidth. * Browser safe colors, backgrounds, and image compression. Assignments: Map and define your site in Dreamweaver, creating appropriate folders. Reading: Dreamweaver MX HOT Hands-On Training Chapters 5 & 7. Class 5: Open work Lab - Using what we completed so far for our own work. Assignments: Make adjustments as needed to layouts and prepare the images for your site. Begin actual preparation of web pages. Use your prepared text and create appropriate links. For next Time: Have page examples to discuss. Reading: Dreamweaver MX HOT Hands-On Training: Read Chapter 6. Class 6: Design layout tools - Providing control over layout. * Providing control over the layout using alignments, tables, layers and frames. * Discussion of which ones to use when and where. Assignments: Layout your screen designs and images adding content (text and graphics). Set up your navigation. Make revisions to site design and content as needed. Reading: Dreamweaver MX HOT Hands-On Training: Read Chapter 10 Class 7: Rigged Frames and inserting plug-ins Demo (all images and elements will be supplied). Reading: Review any of the past chapters that you feel the weakest understanding. Work on your site. If you get stuck the tutorials in the book can be utilized. E-mail me with any problems questions or concerns. Assignments: Finish establishing and creating links for your web site. Check the links to make sure they are working. Reading: Dreamweaver MX HOT Hands-On Training: Read Chapter 9. Class 8: Advanced Interactivity and CSS In Class project: CSS Tutorial Preparing, importing, formatting text, HTML, and typography Extra credit: Bring the Photoshop design into Image Ready to add rollovers and Java script. Class 9: Open Lab and Preliminary Critique (beta testing) Assignments: Work in class making revisions for final critique. For next Time: Continue revisions. Reading: Dreamweaver MX HOT Hands-On Training: Read Chapter 12. Class 10: HTML In Class Project: How would we be without Dreamweaver in Dreamweaver HTML tutorial Reading: Dreamweaver MX HOT Hands-On Training: Read Chapter 20. Class 11: Open Lab, FTP'ing, and final critique preparation. Discussion of publishing, servers, FTP options, search engines and meta Tags. Assignments: Finishing up design process and finish uploading the site. For next Time: Have your site finished and ready to be viewed by the class. Be ready to point out any revisions since your last critique. The site should be presented from “on line” rather than local. Upload all finished material. Class 12: Web site presentations/ Final critique!