This page will have information about and resources for your assignments.
Remember: Most assignments will need to be turned in to Blackboard to complete them.
- November 19, 2012The basic idea behind this assignment is to add CSS to an HTML page to create a typographic hierarchy. You will also need to add some enhancements like CSS3 and web fonts. I’ve put up a page with some CSS resources and will add to that as we go: CSS3 Resources Download the attached zip file and read through the instructions on the index.html page. Make sure you read through both the instructions and look at the content. Typography Challenge_v2.zip This assignment is due on Monday, November 26. It will be the last assignment that is not directly Final Project related. Here are some images of students assignment from previous semestsers
- November 17, 2012Last class we went over a few things, the most important of which was the 960 Grid System. This is the grid system we will be using for the final Project. You were given the Layout Challenge assignment. A number of you didn’t feel comfortable enough with the 960 GS to complete the assignment so two things are happening around that. The due date for the assignment was changed so you can work on it in class on Monday I updated the 960 GS resources on this site so they are much more complete. If you can (due to my error this is published two days later than I meant to), before class on Monday go to the resources page and at least watch the first three videos in the Tutorials section. The third video has files that you can use to follow along and practice using the system. These should be enough for you to complete the assignment, or at least get a good start on it and finish it up on Monday.
- November 12, 2012UPDATE: As promised here is the CSS file we used on the example in class styles.css – from 11.9.12 class Your assignment is to create an HTML/CSS layout using the 960 Grid system that matches the image below. The latin text for the paragraphs and lists is from this site: http://html-ipsum.com/ The images are from placehold.it. The way you make an image is to make a link in the src of your img element to placehold.it and then after the slash list your image dimensions. for example to make a 300 by 200 image you would write: <img src="http://placehold.it/300x200"> I will update this assignment with a video that walks through some of the process of setting up and working with the 960 grid system. We will give some time on Monday, November 19 for you to work on this in class and ask questions. sIt’s due on Wednesday, November 21.
- October 10, 2012It is assumed that you reviewed the typography materials before completing this assignment. This assignment is to take the page in the zip file below and add CSS and HTML (if needed) to it to accomplish the following: Give the page a layout. How you organize the sections is up to you. You can see my examples below or look at the midterm examples given in a previous post for better understanding and inspiration. Each of the major sections (header, nav, tracks, session etc) should be defined in some way (spacing, alignment, line, color). Style the text to give it a typographic hierarchy. Make sure each different type of text is treated differently in some way (font, style, color, size, alignment etc). Upload it to the web server and then turn in the link through Blackboard. Starting file: Assignment_8_Typography.zip Examples note: these don’t make much use of color and are kind of the minimum to complete the assignment. You are free to use color and fonts as you see fit. One thing to keep in mind is that this content is from the midterm project so you should be using this assignment to help you figure out what font/color/layout/etc you will have on the midterm project and not just do things randomly
- October 1, 2012The assignment is to make wireframes for each page that you made in the sitemap. I am going to talk about the content on the site in class, going over what you have been given on Blackboard. You should refer to that content and you can also use the previous projects to help yo understand what should go on each page. In some cases it is up to you exactly how and in what order you want to group the content. You can also refer to this page for help: http://webdesign.blogs.peopleio.net/planning/wireframe If you were in class and handed in paper drawings to me, I will take those and look at them for the grade. If you didn’t finish then upload the wireframes in one of two formats for this assignment: PDF file PNG files If you started on paper you can just take pictures with a digital camera or scan them in and then convert to PNG format. Upload the files to Blackboard. This assignment is due on Monday, October 8.
- October 1, 2012The assignment here is to download this zip file: Assignment_6_Page_Layout.zip And follow the instructions. Start by opening index.html in a browser and take it from there. I’m assuming that you have watched the two layout videos before completing this assignment: http://mmp240fall2012.blogs.peopleio.net/2012/09/28/preparation-for-class-4/ I will open the files and explain a bit more in class. So if you missed class on 10.1.12 then you may want to ask me some questions if you are confused. Complete the assignment by uploading the three files (index.html, gallery.html, about.html) to the server and putting the URL in Blackboard. This assignment is due on Monday, October 8.
- September 24, 2012Your assignment is to take the HTML files you completed in Assignment #2 and add CSS to them following these rules: All CSS must be in a css file named styles.css and that file must be in a folder named css. You must use at least a basic CSS reset (see CSS Fundamentals Part 2 video). You must give the page a width (you choose how wide) and center the page. Define basic type settings in the body element (font-family, font, line-height) Define basic type settings for headers (h1,h2,h3…). You only need to give font sizes for the headers you use. The font for the general text (set in body) must be different from the font for headings. Add some styling for the links. You can choose what you want to do but at least do something like change the color so it’s not like the default. Paragraphs should be separated from each other with a blank line. You must use and style at least one id and at least one class. Each different type of text on the page (Main title, title of sites, url of sites, names of people, comments) should look different from each other. See image example. Turning it In Instead of uploading all of your files to Blackboard I want you to upload them to the Multimedia Server (or if you have your own server you can do that too), and then in Blackboard just past in the URL to your assignment. If you can’t remember how to upload files with FTP here are some how to video links: Dreamweaver: http://www.youtube.com/watch?v=za6mzNs7wOU Windows: http://www.youtube.com/watch?v=_lX-P7BzXcQ This assignment is due on Thursday, September 27. Color Scheme: Moon Landing by chadgfallon
- September 24, 2012Based on your knowledge so far of the web site (from the design brief and the content showed to you). Create a sitemap for the midterm project. You can create it however you like (on the computer, hand-drawn etc) but you must turn it in as either a .pdf file or an image file. Here is the resource on sitemaps we looked at earlier: http://webdesign.blogs.peopleio.net/planning/sitemap/. If you’re trying to do it quickly on the computer either Writemaps or just using the MS Word document (watch the video linked to in the page above if you don’t know how) are two of the fastest. If you have a decent phone camera you can draw it on paper, take a picture and then use that. Complete the project by uploading your sitemap to Assignment #4 in Blackboard.
- September 24, 2012Basically this assignment is to ask me any question you have after reading the Midterm Design Brief MidtermDesignBrief.pdf. What other information do you need from me to complete your midterm project? Almost every time you get a design brief it is not complete. The client has left out information that you need to know to complete the project. When you are starting with a new client all of your questions are aimed at making sure you understand a few things: GOALS. Why does the client want the web site? Why would people want to visit the site? What exactly is going to be on the web site? What exactly am I expected to do? This is very important as sometimes there are hidden expectations like logo creation, copy writing, photography etc. When is the deadline? What is the budget? This one is often something you have to negotiate with the client. Someone new to web design won’t fully understand what it costs and what it involves. Remember that professional web design is essentially people paying you for your time. So you have to figure out how long the site will take you to complete and charge accordingly. If you don’t know exactly what is going to be required to build the site then it is impossible to estimate your time. No one is perfect at estimating their time but you get better at it as you go along. When you are working on a site for a business then there are some business questions you want to ask. As our midterm site is not a business site we will leave some of those out. Some other things to make sure are included in the brief or you ask about after reading the brief: Target Audience Content: Who is creating the text, images, media etc. If they have media, what shape is it in (so you can estimate the work needed to get it ready for the web). Examples of sites they like Examples of sites they don’t like (or specific features, colors etc they would not like to see on the site). To complete this assignment, log in to Blackboard and write your questions in the form before you submit. You must have at least three questions.
- September 10, 2012For this assignment you will turn the three attached text files into .html files and follow these rules: For each page you must show at least (you can do more) the top three (3) sites from each of our three categories in assignment #1 You can only choose sites that people have listed in the comments for that assignment (view assignment # 1) use the three .txt files (design.txt, funcitonality.txt, content.txt) as the starting point for the three pages. The text inside of the is meant to be replaced or removed. Read it carefully to figure out which one All three pages should be in the navigation All three pages should have the same header and navigation Follow this format for each of the sites you list (there is an example in the .txt files) Screenshot of the site Title of the site URL of the site Names of people who put the site up in Assignment #1 The comments they added about the site Add your reasons for choosing the site as well This assignment is due on Wednesday, September 19. Turn it in by uploading the three files you create to Blackboard (there will be an Assignment #2 in Blackboard). If you have FTP access to a web site you are welcome to upload the files there and just paste in the URL to Blackboard to turn it in. content.txt functionality.txt design.txt