Creating a Web-based Portfolio with Dreamweaver
You’re going to use Dreamweaver to create pages to house all of the projects you’ve created this semester. Each page will include background information about your project and a link to your actual project. Creating your page and setting page properties: 1. Open Dreamweaver. 2. Go to: File>New and click the “Create” button to create a basic html page 3. The first thing you’ll want to do is set the page properties: the default font, font color, page background, and linked text color. To do this you will need to go to Modify>Page Properties. 4. In the “Appearance” Category – select your default font, text color, and background color. 5. Some quick notes about appearance: you are limited to the 5-6 fonts available in Dreamweaver – do not choose another font – it may not exist on other computers. If you choose a light background, choose dark text. If you choose a dark background, choose light text. In other words – red and black should be accent colors – not your background and text colors! 6. Still in the Page Properties window, click the “Links” category. Change the color of all of the links to the same color as your page font color. 7. Click “OK” Creating a title for your page and saving your page: 1. Right above the canvas for your web page you will find a Title text box that currently says “Untitled Document”. Change this title to read Your Name’s Portfolio 2. Now is a good time to save your page. Go to File>Save and navigate to the portfolio folder on your key drive. This first page we are making will house links to your productivity tools project – so we’ll name the file: tools.htm 3. Click “Save”
Adding a table to organize information: 1. Insert a table into your web page. Go to Insert >Table. 2. In the Table window – choose 2 rows and 1 column 3. For Table width – choose 95% 4. Border thickness, cell padding, and cell spacing are up to you. 5. Click “OK” 6. You can always go back and change these parameters while you’re working on your page 7. In the Properties Inspector at the bottom of your screen – change the Align dropdown menu to “Center” to center your table on your page. 8. Click and drag on the bottom table border to expand the table to fit the entire page. This is similar to playing tug-of-war! 9. In the Properties Inspector, change the Vertical Alignment to “Top” for both cells in your table. 10. Add the following text to your table:
11. Later, you’ll return to this page to add 3-5 sentences about your Productivity Tools project and link to your various productivity tools. 12. You can change the color of the table as well as the background for each cell by clicking on the cell (or entire table) and changing the color in the Properties Inspector. 13. Spend some time working with your page layout – we’ll be using this page as a template for all of the others so you want to make sure you really like it! 14. Save the tools.htm page.
Linking to your other pages before you actually create them: 1. You’ll want to go ahead and create working hyperlinks on this page so that you won’t have to do them again (remember how we created one question slide in your game and duplicated it? Same idea, different software). 2. Highlight the text on your navigation bar that says “Home” 3. In your Properties Inspector, find the Link text box and type: index.htm (make sure you type it EXACTLY like this!) 4. Highlight the text on your navigation bar that says “Productivity Tools” 5. In the Link text box on your Properties Inspector type: tools.htm 6. Highlight the text on your navigation bar that says “Inspiration” (or “Kidspiration”) 7. In the Link text box on your Properties Inspector type: inspiration.htm (or kidspiration.htm) 8. Highlight the text on your navigation bar that says “PowerPoint Game” 9. In the Link text box on your Properties Inspector type: pptgame.htm 10. Highlight the text on your navigation bar that says “iMovie” 11. In the Link text box on your Properties Inspector type: imovie.htm 12. Highlight the text on your navigation bar that says “WebQuest” 13. In the Link text box on your Properties Inspector type: webquest.htm 14. Highlight the text on your navigation bar that says “Autobiography” 15. In the Link text box on your Properties Inspector type: autobiography.htm 16. Highlight the text on your navigation bar that says “Email” 17. In the Link text box on your Properties Inspector type: mailto:gbthomas@uga.edu (actually, you’ll type your email address – but you get the idea!). 18. Save your tools.htm page Okay – now you have this amazing page that doesn’t go anywhere. Let’s use it as a template to create all of your other pages. Using a page as a template for other pages: 1. Highlight and change the title of your page from “Productivity Tools” to “Kidspiration” (or “Inspiration”). 2. Go to File>Save As and name the file inspiration.htm (or kidspiration.htm) 3. Highlight and change the title of your page from “Kidspiration” to “PowerPoint Game” 4. Go to File>Save As and name the file pptgame.htm 5. Highlight and change the title of your page from “PowerPoint Game” to “iMovie” 6. Go to File>Save As and name the file imovie.htm 7. Highlight and change the title of your page from “iMovie” to “WebQuest” 8. Go to File>Save As and name the file webquest.htm 9. Highlight and change the title of your page from “WebQuest” to “Autobiography” 10. Go to File>Save As and name the file autobiography.htm 11. You have just created 6 total pages. 12. We will create the index.htm page next week to house the menu graphic you are creating in fireworks 13. We don’t need to create a web page for your email link – users can access your email from any page on your website.
More linking: You’ve linked all of your pages together – if you want to try them out and see if they work: click F12 to preview your pages in Internet Explorer. If something doesn’t work – today is the day to fix it. Now that you know how to link to pages of your own that are inside of your portfolio folder – how do you link to external pages – like the UGA website? 1. 2. 3. 4. Somewhere on a page (any page – this is just for practice) type the text: University of Georgia. Highlight the text. In the Link textbox on the Properties Inspector type: http://www.uga.edu When you preview this page in the browser (F12) – the link will take you to the UGA website.
Next Steps: 1. For the remainder of today’s class, you’ll want to spend some time writing 3-4 sentence summaries of the projects you’ve completed on the appropriate project page. You’ll also want to begin writing your autobiographical statement – who you are, where you’re from, what your career goals are, where you see yourself in 5 years (remember, your audience is future employers!) 2. You should be working on your two Fireworks elements (scrapbook image for autobiography.htm page and menu graphic for index.htm page) outside of class. They are due Wednesday, June 29 at the beginning of class. 3. On Wednesday, June 29 you will learn how to link to your various projects and how to save your resume as a pdf file. In addition, you will have class time to work on adding content (project descriptions) to each of your pages in your web-based portfolio. 4. On Thursday, June 30 you will learn how to export your two graphic elements from Fireworks and insert them onto your index.htm and autobiography.htm pages in Dreamweaver. You will also learn how to upload your portfolio so that it can be viewed on the web. Some class time will be given for content work. This will be the last day in class to work on your portfolio. The portfolio will be due at the beginning of class on Friday, July 1.