 |
1. Assignment Log Site (Example) Content outline listed below.
I can:
Setup, create, and manage a personal “Assignment Log” web site using Adobe Dreamweaver. |
|
|
2. Personal Home Page Site (Link)
I can:
Setup, create, and manage a “Personal” website using Adobe Dreamweaver software. (Additional content: Navigation Menu, 5 Outlined Content Pages, Related Content Information and Photos, Additional Resource Links 4-5)
Resources:
Use this TEMPLATE – An outline of the templates from this site can be found here.
Beginners Guide to Dreamweaver – Video Resource Link
Alternative Video Resource Link
|
|
3. Northwest Theme Website (Assignment Link)
I can:
Setup, create, and manage a “Northwest” website using Adobe Dreamweaver software
The “assignment outline” for this site project will be as follows…
- Research and select a Northwest Site Topic
- Creating a Site Map outlining the contents of the site.
- Create a Folder/Directory to locate the site in.
- Select a “Template” and download the zip file of it into the site folder.
Copy the contents of the zip file into the root of the NW site folder.
- Set up manage the site in Dreamweaver.
- Creating Graphic Headers for each page in the site.
- Setup the header references on each page for the CSS and HTML to locate the different page headers.
- Research content and create content for each page.
- Locate graphic images and photos to support the topic pages in the site.
- Hyper-link key words in your content on each page.
- Locate reference (15-20) for page 6 the reference page in the site.
- Create the Footer for each page.
- Link all your site pages together.
Resources: Use this TEMPLATE – An outline of the templates from this site can be found here.
|
|
4. Northwest Blog Site Using WordPress OR Google Sites (Link)
I can:
Setup, create, and manage a blog site related to a given Northwest topic using WordPress or Google Sites. The site will be based around a Northwest topic and will include a blog posting page as the main page where you’ll be blogging about news, information, events, and related site topics.
Additional features you’ll need to add include:
– Select a “Theme” and add a custom site banner.
– Include a “Pages” 4 subtopic pages for the site.
– Blog Roll page (main page) with an average of 4 posts a week.
Blog posts must have a “photo” or “video” along with a “short paragraph” of info.
Hyper-link all key words.
– WordPress 5 Widgets (Custom Menu, Categories, JavaScript, RSS Feed, Other)
– 2 or more embedded video clips.
Javascripts for Test Widgets
Blog Search Engines
|
|
5. Elective Blog Site Design with WordPress
I can:
Choose a topic and create a Blog site using a variety of tools and skills applied in class.
Resources:
– Blog Search Engines/Directories (Bloggeries, Technorati, Google Blogs)
– Time Magazine’s 2010 Best Blogs
– Technorati Top 100
– Blogger’s Choice Awards
– WordPress Showcase Featured
– Blog Catalog
– Best of Web
– Eaton Web
– Blog Templates 1 2 3 4 |
| |
Skill Assignments
(Add examples to Assignment Page in this order)
|
|
Introduction to Graphic Formats, Graphic Editing, and “Fireworks” Software
- Identify the difference between a GIF, JPG, and a PNG graphic.
- Create and edit various graphic file type formats. (GIF, JPG, PNG)
- Apply various graphic image modifications in Fireworks. (Background Color, Resizing, Rotating, and Filter Adjustment properties)
- Apply various graphic editing tools, property settings, and functions using the Adobe Fireworks software. (Copy, Cut, Paste, Selection, Cropping, Magic Wand, Draw, and Text related tools).
- Understand how to work with and edit multiple graphic layers in Fireworks.
- Create a transparency layer (background) sing Fireworks.
- Optimize and image file size using Fireworks.
|
|
1. Graphic Banners
- Create (6) 728 x 96 pixels “PNG” image.
- Add TEXT related titles and at least 2 GRAPHICS to each banner. Crop and proportionally resize graphics to fit within the banners.
- Create 2 with solid color backgrounds, and 4 with texture or image backgrounds.
- CREATE the following folders in your student directory (folder) on the network to save ALL your classwork…
Website Design
Website Design/Assignments
Website Design/Assignments/images
Website Design/Assignments/images/PNG Files
- Name and save them as banner1.png, banner2.png, etc. into the directory you created called PNG Files. After completing all 6, re-save them into a .jpg or .gif format into your images directory.
|
| |
2. CHS Banner – Headers
- Create (3) 1200 X 150 pixels “PNG” image Banner Headers.
- Banner must include the following text and a graphic image(s).
CAMAS HIGH SCHOOL
“Home of the Papermakers”
26900 SE 15th St. | Camas, WA 98607 | (360) 833-5750
- See the following example.
- Take your own photo(s) around campus during part of the designated class hour. Send the photo’s to your self via your email so you can use them here in class. Locate and save your photos to the following network directory…
CHS Student Sharing/CHS Technology/Website Design/CHS Photos/
Extras
- Fireworks Tutorial Create Image inside Text, Masking w/ Text
|
|
3. Graphic Button(s)
- Create (3) buttons from templates via the internet. Add additional text and graphics to each button.
- Name each file as button1, button2, button 3.
- Save all completed graphic button images as a PNG type format.
- Create (3) graphic buttons from scratch using Fireworks. Each button must include additional text and graphics. Size 225 x 70
- Name each file as button4, button5, button 6.
- Save all completed graphic button images re-save your images into your images directory as either a gif or jpg type format and add each one to your assignment website.
- Add a “url” link to each graphic button in Dreamweaver.
|
|
4. Transparent Gif and Text Images
- Create (1) 350 X 100 px “Gif” image that has a grass textured background. On top of the grass background texture add two images that you’ve removed the background color or texture from. Add a text title to complement the images. Save the file as “transparent 1.gif”.
- Create (1) 350 X 100 px “Gif” image with a transparent background. On top of the transparent background add two images that you’ve removed the background color or texture from. Add a text title to complement the images. Save the image file as “transparent2.gif”. Tutorial for a guide.
|
|
5. Graphic Optimization with Fireworks
- Locate two graphic images (GIF & JPG) and apply the optimization process outlined to you in Fireworks. Optimize the graphics to it’s lowest possible size without loosing the quality of the photo or graphic. Save a copy of the original and optimized image.
- On your assignment page include both the original and optimized images side by side. Add a text label to identify both the Original and Optimized images, as well as the file size of each both prior and after the process.
- Using the on-line PNG optimization website TinyPNG, OR Compress PNG optimize a PNG image file and include the original and optimized image on your assignment site.
|
| *** Introduction to Adobe Dreamweaver *** |
|
6. Assignment Log Site (Example)
I can:
Setup, create, and manage a personal “Assignment Log Site” website using Adobe Dreamweaver.Instructions:
- In your student folder on the network create a folder called “Website Design”. Inside this folder create another folder called “images”. Save all your graphic related skill assignments in the images folder unless instructed otherwise.
- Using Dreamweaver “Manage” your site so your Assignment Folder on the network is visible in the files panel.
- Using Dreamweaver create an “index.html” file and save it inside in the Assignment site folder.
- You should now be looking at your Assignment Site in Dreamweaver with the “index.html” file and the “images file folder” visible.
- Using Dreamweaver you will now place and save all your graphic related assignment examples onto the index page.
|
|
7. Rollover Buttons / Image
(Using Fireworks to create the images and Dreamweaver to create the rollover effect.
- Create (3) Rollover Buttons with links.
- Create (2) Rollover Image. Keep images small.
- Tutorial Reference
|
|
8. Graphic Generators Sites (Web 2.0 On-line)
Access the following graphic generator websites listed below and create the outlined number of examples using each site graphic engine. Add and label the site name with each example on your assignment page.
Additional Graphic Generator Resource Sites
(Not assignments, just info…)
|
|
9. Animated GIFs (5) Using Fireworks CS6 Tutorial Site, following the instructions create the animated parot, and add to your assignment website
– Tutorial PDF Link | Web Link 2
Other tutorial sites for additional reference… 2 3 4 5
- (1) Animated Parrot Tutorial
- (1) Create and animate your own character. Minimum of 3 features that animate.
- (1) Animate a series of 3 to 4 Word(s) Text.
- (1) Created an Animated Graphic Banner
(100 x 728) Include Text & min. of 2 Graphics 
- (1) Animate the CHS MeanMachine (3 features)
- (1) Animate Joe Papermaker (3 features)
- (1) Animate a Graphic you locate on the internet. Include both the static graphic and the animated version on your assignment page. (3 features)
- (2) Import (save locally) 2 Animated Gif and Re-Animate Include both the original animated graphic and the re-animated version on your assignment page.
|
|
10. Image Map (Choose a topic theme, include a title, create the image map with (5) related graphics and supporting text. link (Create Hot Spots) from these areas to a related website via Dreamweaver) Create a seperate webpage and add this image map to it. Link to this page from your assignment page. |
|
11. Using one of the Navigation Menu Generator Site options below create one menu example with at least 5 page topic links within the menu. Add this menu to your assignment page.– Navigation Menu Generators (Graphic Nav Bar, Drop Down Menus) |
|
12. Cut & Paste Javascripts – (Complete a total of 15 scripts listed below, create each example on it’s own page and link to that page from your assignment page. Label each link with the title name of the script)
Required Examples
Add YouTube Video * to your page… Locate a YouTube Video and copy the “Embed” code provided. Copy everything in the box and paste it in your text editor. You may resize the viewing size by changing the “Height” and “Width” in the code. (you must change both in two locations).
Example code below.<object width=”325″ height=”250″><param name=”movie” value=”http://www.youtube.com/v/oXjInYHk2j0″></param><param name=”wmode” value=”transparent”></param><embed src=”http://www.youtube.com/v/oXjInYHk2j0″ type=”application/x-shockwave-flash” wmode=”transparent” width=”325″ height=”250″></embed></object>
Resource Example Sites:
|
|
13. Fireworks Photo Effects Tutorials
– Complete 10 photo effect examples using the sites listed below as a resource . Place each example on it’s own page with both the original photo and the one with the effect applied to it. Identify the Name of the effect that you applied as well as the site web address where the tutorials is located.Required Examples
- Light Painting In Fireworks
- Paste inside Effect
- Create a Collage by Fading Images
Other Resource Sites
14. Photoshop Image Effects
– 100 Tools and Effects Tutorials
15. Favicon Generator (Create a Favicon for your Assignment site) |
|
16. Batch Processing and Creating Thumbnail Images (Fireworks)Batch process 5 images to be all 200w X 150h, make them all black and white, and all in a .jpg format. |
|
17. Drop Down Navagation Menus (Dreamweaver) |
|
|
