Web Projects - Click for web study materials.
Coding with HTML & CSS
Web - Web Design
Essential Standard - 207
Essential Question:
How do you create an interactive web page using HTML & CSS?
Objective:
Learn coding basics of using HTML & CSS to create interactive web sites that will utilize all areas of Digital Media.
In order to understand web design it is important to understand some basic coding languages. Follow the tutorials from the code academy to understand basics in HTML and CSS.
https://www.codecademy.com/tracks/web
This project is due on the date outlined in the syllabus.
When you complete all work, work on the Xtra Credit projects.
Essential Standard - 207
Essential Question:
How do you create an interactive web page using HTML & CSS?
Objective:
Learn coding basics of using HTML & CSS to create interactive web sites that will utilize all areas of Digital Media.
In order to understand web design it is important to understand some basic coding languages. Follow the tutorials from the code academy to understand basics in HTML and CSS.
https://www.codecademy.com/tracks/web
This project is due on the date outlined in the syllabus.
When you complete all work, work on the Xtra Credit projects.
|
|
|
Dreamweaver - Responsive Entertainment/Business SiteWeb - Web Design/Photoshop
Essential Standard - 207 Essential Question: How do you create a responsive web site using bootstrap? Objective: Create a responsive web site using bootstrap and the DOM in Dreamweaver Scenario: You have been hired as web designer by Entertainers Design Company. They want you to create a basic website for an entertainment industry - Sports Program (NFL, NHL, NBA, MLB, NCAA, etc), Music Company (Bad Boy, Def Jam, Atlantic Records, etc), or Film Company (Disney, Pixar, Paramount, Marvel, MGM, etc). You are to follow the directions given by the project manager for the target audience to complete the project. Once complete then you should review the checklist for grading criteria before turning in your work. Complete and submit the online rubric for this project once it has been completed. Using Adobe Dreamweaver, create a 4 page website for an entertainment company. Create a Root folder in your Web Folder and save all files/images inside your root folder. (Page names: index, about us, news, gallery) Remember you must save all files in your folder and do not move them from this folder. Use the slide show below and follow to create this site. Grading Criteria Checklist 1 - Responsive site created around theme of a entertainment company 2 - Page layout designed professionally 3 - Navigation buttons created for navigation, and all links function properly 4 - Image carousel (3 images) with 100% image fill in CSS 5 - Balance of text and images on each page 6 - Images added on index (3) and gallery page (9) 7 - Proper CSS properties applied to all text elements 8 - Proper grammar and sentence structure used on all text elements
10 - Final web file is zipped and submitted with the instructed name for the project (last name + first initial + boot) This project is due on the date outlined in the syllabus. When you complete all work, work on the Xtra Credit projects. |
Examples for researchhttp://www.theacc.com
http://www.nba.com http://www.defjam.com/ http://atlanticrecords.com http://www.pixar.com http://www.mgm.com |
Dreamweaver - Spring Break/Vacation Blog ProjectWeb Design - Dreameaver/Photoshop
Essential Standard - 207 Essential Question: How do you use a template to customize and alter HTML and CSS Code? Objective: Create a 3 page blob on your spring break or a recent vacation. You have been hired by Vacations Destinations. They want you to create a blog documenting a vacation destination. You are to follow the directions given by the project manager for the target audience to complete the project. Once complete then you should review the checklist for grading criteria before turning in your work. Complete and submit the online rubric for this project once it has been completed. We will be creating a 3 page blog. The blog will be structured around your spring break or around a recent vacation. Make a Root folder in your Web folder (call it BLOG). Make a new site in Dreamweaver, then make a new Dreamweaver Document. Select the Starter Templates > Responsive Starters > Responsive - Blog Posts. Save this template page as index.html. In the nav - change the links at the top right to Day1, Day 2, Day 3, and change the logo text on the left to SPRING BREAK (or whatever vacation destination you are covering). Alter the appearance of the Sidebar by deleting the extra links in the html code, and adding 2 extra image boxes to the sidebar by copying and pasting the code. Remove the Footer 1 and Footer 2 paragraph sections at the bottom. Use the CSS to alter the colors on the page. Link the navigation up top by typing in the Properties Link for each day. (day1.html, day2.html, day3.html). In the files window duplicate 3 times. Now all pages are set! Select the images you will use (4 per page), resize all images in Photoshop and save in the images folder. Replace placeholder images on each page relating to each day, replace all the lorem ipsem text to information about each day of your spring break or vacation for each day. Grading Criteria Checklist 1 - 3 page Web Blog created around a vacation 2 - Page layout created altering a responsive template 3 - Navigation buttons in proper places and work 4 - 4 different images on each page (3 images in sidebar replacing all the extra links below the original image box) 5 - Place holder text replaced with information about what you did on each day 6 - CSS altered so all items not shaded light grey 7 - Items listed above to be deleted from the original templated have been changed 8 - Heading same on each page, but subheading is different on each page 9 - Web file is saved as a HTML file and saved in the root folder (BLOG). The root folder is saved in the Web folder in your portfolio. 10 - Final web files are submitted with the instructed names for the project. This project is due on the date outlined in the syllabus. When you complete all work, work on the Xtra Credit projects. |
|
Dreamweaver - Web App ProjectWeb Design - Edge Animate/Photoshop
Essential Standard - 207 Essential Question: How do you create professional web app using HTML Code? Objective: Create a professional web app for a recording artist. You have been hired by Mobile One. They want you to create an mobile web app for a band, sports team, an individual athlete, or an actor. You are to follow the directions given by the project manager for the target audience to complete the project. Once complete then you should review the checklist for grading criteria before turning in your work. Complete and submit the online rubric for this project once it has been completed. We will be creating a Web App for mobile devices. We will be using an open source web standard called, WebKit. The tutorial is set up for creating for a musical artist. Since ours is different you will adjust the pages as follows: You will be creating 5 pages: a Homepage with bio, historical games or movies (in place of album page) with at least 4, game schedule or list of awards (in place of tour page), merchandise page, and a stats page (in place of top singles page). Grading Criteria Checklist 1 - 5 page Web App created around a band, single athlete, sports team, or actor 2 - Page layout created using HTML code 3 - Navigation buttons in proper places and work 4 - All links work correctly 5 - Images and text on each page 6 - Links to audio files that open a page to play the audio 7 - Same size/type font used for information text on each page (body text) 8 - Same size/type font used for headline text on each page (these will be slightly larger than your body text) 9 - Web file is saved as a HTML file and saved in the root folder. The root folder is saved in the Web folder in your portfolio. 10 - Final web files are submitted with the instructed names for the project. This project is due on the date outlined in the syllabus. When you complete all work, work on the Xtra Credit projects. |
Tutorials for the Project
| ||||||||
Dreamweaver - CSS WebsitesWeb Design - Dreamweaver/Photoshop
Essential Standard - 207 Essential Question: How do you create an interactive web page using CSS in a wysiwyg program? Objective: Create an interactive web site that will utilize all areas of digital media. Assignment: You have been hired as web designer by Fortune Design Company. They want you to create a basic web site for a business You are to follow the directions given by the project manager for the target audience to complete the project. Once complete then you should review the checklist for grading criteria before turning in your work. Using Dreamweaver, create a website for a business or company of your choice. You will download a CSS template from the web. Create a CSS folder in your Web folder. Move the template folder from downloads into CSS folder you created. Save all files/images inside the downloaded template folder. Utilize the code to make changes and make the site your own Customize using pictures and logos from the business you choose. Remember you must save all files in your folder and do not move them from this folder, that way everything will appear in Dreamweaver for use. I will check this off at your desk. Use the keyboard shortcut of Shift+Command+4 to get a crosshair that you can use to drag a box around each page to capture a screen shot. You will need to get a screenshot of each page and put those final pages in your portfolio folder. If you can not capture the entire page in one shot, then you must take multiple shots and piece together in Photoshop. Grading Criteria Checklist 1 - CSS site created around theme of a business with original logo on each page 2 - Page layout designed professionally 3 - Navigation buttons created for navigation, and navigation easy to follow 4 - All links work correctly 5 - Balance of text and images on each page 6 - Links to video/audio files that open a page to play the video and/or audio 7 - Same size/type font used for information text on each page (body text) 8 - Same size/type font used for headline text on each page (these will be slightly larger than your body text) 9 - Web file is saved as a Dreamweaver file and each page JPEG is saved in portfolio 10 - Final web file is submitted with the instructed name for the project This project is due on the date outlined in the syllabus. When you complete all work, work on the Xtra Credit projects. |
Links to resources: |
