Source: https://faculty.tncc.edu/hathaway/pages/id_schedule.html
Timestamp: 2019-04-23 16:59:28+00:00

Document:
(3 credits) Prerequisite(s): ART 131, ART 141, ART 208, and ART 283.
Focuses on creative concepts of design problem solving for interactive design: techniques specific to web, multimedia for the web, and other interactive design products. Advanced interactive design functions such as animation, rollovers, and audio are covered in ART 264. Part I of II.
Please read the syllabus for details about the structure and grading policy for this course.
NOTE: Project 1 Home Page will be graded at the end of the semester. During the semester you will update and revise the content and design of your home page incorporating techniques you learn during the semester.
Set up your site directory by making a folder on your personal drive or the student hard drive.
Inside the folder make two folders. One titled "working documents" and another titled "site".
Inside the "site" folder make another folder titled "www".
The "www" folder is where you will place all your HTML pages, CSS and optomized graphics for your class projects.
The "working_documents" folder is where you will place all of your Photoshop documents that you use to design your site.
NEVER put layered Photoshop or Illustrator documents in your "www" folder.
Choose the "Classic" workspace and revise for the class.
Save your Workspace with your name.
Buiild your class home page (index.html) and save into your local site folder. You must title your home page "index.html".
Access your class site at your online server space using SFTP and upload your site folders and index page.
Link your page to your index page and post to the server.
Link your page to your index page and post the HTML page the and CSS page to the server.
Revise your home page "index.html" with CSS. Use a linked style sheet titled "styles.css".
Constuct the div tests and post them on your class web page.
Base Bland has a basic HTML and CSS setup for a web site.
Constuct Base 1 Blank and Base 2 Content.
Post them on your class web page.
Base 3 Layout uses media queries that have a font-size setting, a grid for layout and a container that will hold all the content together.
Base 4 Home Page uses structural elements such as the header and main navigation. Our grid layout elements will be used to layout the main content area and tadd a footer.
Base 6 Site with Sub Pages (Multi-Page Site) incudes an About page with an article tag, a full width hero section with a background image and a Contact page with a form.
This week we will begin working on Project 4: Site Design. The business, product or service for your site is your choice although it must be discussed and approved. You may not build a portfolio site. Your portfolio site will be designed and built in ART 264.
You will design and build a fully coded site for your business, product or service using one of the three templates.
Before you begin building your site in code it is best to do a mockup in Photoshop of the home page and a minimum of two other pages. Please use one of the PSD documents provided as a template. Consider this a template and do not make significant changes to the layout. You may add, remove and reorder rows and vary the number of columns within a row.
To post your designs for the critique you will insert a jpg for each page into a HTML page. The HTML pages will linked together to give the impression of the site.
Choose a business, produce or service as the subject for your site design. This may not be a personal portfolio.
Review one of the three templates and make a choice.
Download the Photoshop document for your template.
Open the Photoshop document and Save As your business, project or service name.
Revise the layout by adding a new logo, catchy tag line, block quote, photographs and colors. Design the home page and a minimum of one sub-page.
Once you are finished with your designing your Photoshop document you need to post jpgs of them on HTML pages. This is a typical way to show a client what their site will look like before you actually build the site.
In you site directory add a test folder with a css and img folders inside.
Place a jpg of each page design inside the img folder. Title the jpgs the same as your primary links/navigation such as "home.jpg".
Make a HTML page and save as the link/navigation name such as "index.html" for your home page.
Make a css page and link it to your HTML page. You will use this single css page for all your linked HTML pages.
Add the css to format your pages as shown in the sample provided.
Each student will present their finished site in class starting at the beginning of the class period. Please be prepared to speak professionally about your design and your process.
Download the template and place it in a downloads folder outside of your site directory.
Move the upzipped template folder inside of your site directory.
Build your site using the template.
Export graphics from Photoshop as needed such as your logo and any images on the site.
By the end of the semester you will need to have your home page updated. You can use one of the templates to begin your design.
Site contruction in Dreamweaver. If you have not already done so please finish your class home page design. This design is worth 10% of your final grade.
Complete your site design in Dreamweaver. Post your site to your class web site before the beginning of the next class. The next class is last time the class meets and the final day to upload your completed Assignment 5: Site Construction.
Each student will be expected to make a presenation of both their final design for Project 1 and their final design for Project 5. Be prepared to articulate your design in a professional and clear manner (as if speaking to a client). Share with the class your design process experience (both discoveries and pitfalls) including the acknowledgment of any and all bugs.
Your final site must be uploaded to your class site on the server before the beginning of the class.
Next semester we will continue building web site with an emphasis on Content Management Systems (CMS).
A good resource for WordPress is Lynda.com. Please start to review WordPress.com Essential Training on Lynda.com.
You will need to purchase a domain name and secure hosting for your class projects. Please read this information before starting this process. BlueHost is highly recommended for hosting.
"Real web designers write code. Always have, always will."

References: ART 131
 ART 141
 ART 208
 ART 283
 ART 264
 ART 264