The Good, the bad, and the ugly of websites:
Go online and surf around, starting by looking at websites. You need to find 2 GOOD websites and 2 BAD websites. Don't just pick the first 4 websites you go to. On a piece of paper, answer the following questions. Be prepared that after the first 40 minutes of class you will present these websites to the class and explain your choices.
- Describe the Good or Bad elements that led you to choose this website.
- If Good, what makes you like this website, what about it appeals to you? What rules of design did it do a good job of following? Could it be better?
- If Bad, what makes you NOT like this site, what elements of design does it break or not follow at all? How would you improve it?
- How long did it take you to make a decision about this website? Why?
- Name the elements of design that are included in each website. For the Bad websites, name the elements that are missing or the principles that they are blatantly breaking.
HTML/CSS Coding Lessons:
Web App Project:
Software Used: Dreamweaver & Photoshop
Essential Standard - 107.01 & 107.02 Essential Question: How do you create a professional web app for a recording artist 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 or a sports team. 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. Grading Criteria Checklist 1 - 5 page Web App created around a band or a sports team 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. |
|
Portfolio Website Design Project:
You are creating a website using Photoshop & Weebly. The theme is "What is Digital Media?" The site will consist of 6 pages of visual layout design, text, graphics, and media. You will create a home page that defines Digital Media and a page for each of the 5 areas of Digital Media - Graphic Design, Animation, Audio, Video, and Web Design (total 6 pages).
Each page should have the same look and feel as the previous page. The 5 pages of areas of Digital Media will showcase examples of your work from the entire semester. You will create a top banner for each page that is a visual representation of the topic. You will need to decide on your banner size based in the layout of your website. You will create this in Photoshop with at least 2 images in the banner. You will add navigation to your site. This navigation should appear in the same place on each page (either along the side or at the top below the banner). Make sure to spell check all words - points will be counted off for spelling and grammar. Use the file to the right to answer the questions for each page and which files to put on your site. |
|
Image Map Web Design Project:
The visual layout is one of the most important parts of Web Design. You are creating a web site using Photoshop & Dreamweaver. The theme is "What is Digital Media?" The site will consist of pages of visual layout design, text, graphics, and media. You will create a home page that defines Digital Media and a page for each of the 5 areas of Digital Media - Graphic Design, Animation, Audio, Video, and Web Design (total 6 pages).
Each page should have the same look and feel as the previous page. The 5 pages of areas of Digital Media will showcase examples of your work from the entire semester. You will create a top banner for each page that is a visual representation of the topic. You will design a visual button for each page using the button template in this folder. The 6 buttons you create will be used for the navigation menu for your site. This navigation should appear in the same place on each page (either along the side or at the top below the banner). Make sure to spell check all words - points will be counted off for spelling and grammar. Make sure all images, videos, etc that you are going to use are saved in the correct website folders. Follow the tutorial in this folder to create your project. As you work, save your project as Dreamweaver files (.HTML) and name the project last name +first initial + dmwebsite. When you have finished your project, you will take screen shots of each page using Shift+Command+4. Zip the Dreamweaver folder. Rename the Dreamweaver folder as last name + first initial + dmwebsite. Submit the zipped file using the class's Dropbox. If the file is too large then I will grade it at your desk. Don't forget to review the rubric to make sure you are meeting all of the project requirements! |
|