2. Dreamweaver is an XHTML editor that allows you to: Create a site Create external Cascading Style Sheets (CSS) to store the styles used in your pages Create templates to give your site a consistent design Import a wide range of media e.g. Flash animations & graphics created in PhotoShop Manage your site Publish your site to a Web Server

3. Three things you must consider first The creative brief An idea for the site Decide on a Navigation Model How will users get around the site? Create a paper based design Plan out your design – PowerPoint is a good tool for this. Create your “Wireframe” Used as a quick and effective means of testing the navigation of the site

4. The Creative Brief So the first question is what shall we make our site about? You have this week and next to decide on a topic for your site In this example we shall make a site about this module. (Boring I know but it at least makes the point.)

5. The Navigation Model (Examples) Linear Navigation Model (Slide show) Hub and Spoke Navigation Model

6. “Paper” Based Design Welcome to CSCI2608 Unit 1 – Web Development Unit 2 – Digital Imaging Unit 3 – Animation Unit 4 – Sound and vision

7. The Next Page Unit 1 Week 1 Week 2 Week 3 Back to index. CSCI2608 Multimedia and Internet Technology. Week 4 Week 5 Week 6

8. And the next Unit 2 Week 7 Week 8 Week 9 Back to index. CSCI2608 Multimedia and Internet Technology. Week 10 Week 11 Week 12

9. Compare these pages… Unit 1 Week 1 Week 2 Week 3 Back to index. CSCI2608 Multimedia and Internet Technology. Week 4 Week 5 Week 6 Unit 2 Week 7 Week 8 Week 9 Back to index. CSCI2608 Multimedia and Internet Technology. Week 10 Week 11 Week 12

10. Two Tools for Creating Pages Templates

11. Cascading Style Sheets Internal Style Sheets External Style Sheets (This is the one we care about!)

12. Selecting a Directory Structure The next step is to decide on a directory structure for the site, we will need … A main folder for the site. e.g. h:\public_html\csci2608 CSCI2608 Unit 1Unit 2Unit 3Unit 4

13. Once you have done all the prep! You may now open Dreamweaver!