An introduction to writing and editing html documents for the production of Web pages. In addition, this course examines the history and future of web media
"Dreamweaver CS5 Bible" (or later edition) by Joseph A. Lowery. Wiley Publishing.
Lynda.com tutorials - you can check out through the school library.
Don't miss my tutorials and resources. Office hours immediately following class, or via email.
Upon successful completion of this course, the student should be able to:
Weekly Course Outline
Lecture: XHTML. Cascading Style Sheets. What is good design? What makes a design "sucky"? After last week's assignment, you should now be looking at other web sites and consider what makes it "sticky" and has clickthroughs, and what makes you never want to return.
Lab: Setting up your OLS account. Inline, embedded and external style sheets. Coding a table and lists.
To practice writing your html:
Coding HTML (W3c schools)
Lynda.com tutorials are available in the school library.
Logical files and structure
Setting up your OLS account.
Explaining XHTML 1.0 Transitional (yes, more coding)
Below is an example of a "logical" page at this point. There are no fancy hiding of links, but instead lists each item offered, in mind of the end user (me). How would this be different if this was intended as an artist personal portfolio? Or for employment?
An example of how your homework page should appear:
Lecture: Continued work with html, css and Dreamweaver.
Lab: Working with Dreamweaver, Photoshop and Bridge. Integrating graphics software with Dreamweaver.
Homework: Complete Chapter 5 of the text and upload to website. All past assignments are due no later than beginning of next class. NO WORK WILL BE ACCEPTED AFTERWARDS. We will be moving on to other things after week 5.
Lecture: Midterm quiz.
Lab: Frames. Link today's assignment to your homework page.
Homework: Research design documents online. Simple example: web/desdocument.html Decide who your target audience is, what your main objective is, and the overall style (typography and colors) you intend to use for your portfolio site. Begin working on your design document. Due week 7.
What I expect from your final portfolio site: list of requirements
Lecture: Best practices, design and usability in web production.
Week 7: Guest Instructor: Cele Hanzel
Lecture: Discuss project proposals. Analyze technical and design requirements.
Lab: For week 7, I want you to become more familiar with using Dreamweaver by doing two specific tasks in Dreamweaver and posting on your homework page for me to review.
Adding a Spry navigation menu. Please remember that we reviewed this week 5. In Dreamweaver from the dropdown menu, Insert > Spry and choose from the bottom 5 items. Make a change in the css and post a link from your homework page to the example. You can include the wireframe and a templated page all on the same page. Title the page "Dreamweaver Examples".
Using Dreamweaver templated pages. Again, we reviewed using these the last few weeks. But this time, let's use some of the new features in CS6. In Dreamweaver, File > New Fluid Grid Layout. Your choice which template, mobile, tablet or desktop. You will first have a dialog box asking you to save the css. Create a new folder within your root folder named layout, and save both the page and the stylesheet within the folder. You can use this page to mockup your wireframe if you like. The link provided would be to this page. See my web tutorial for more information: Creating a fluid layout using Dreamweaver CS6 (web page) or Fluid Layout (.pdf)
Creating a wireframe. Read the page from the link below and sketch or use a graphic software like Photoshop or Fireworks to do a visual mockup of the key areas of your homepage: navigation, content area, any asides, logo, headings, images, any interactivity.
Homework: Create a sample spry menu bar, altering text and size via the css page. Add a wire frame to your project proposal.
Lecture: Design and the psychology of the web user.
Lab: In groups of 2-3, discuss technical and design issues of your final project.
Homework: Validate two pages of your final project.
Lecture: Please work on your contact page of your portfolio site. ;-)
Homework: Add a contact page to your site.
What I expect from your final portfolio site: list of requirements
Week 10: Lecture: Final exam. SEO. Q&A.
Lab: Review of final project requirements. Check your points! All work is due except presentation of final project (next week.)
Homework: Email instructor.
Week 11: Lecture: Final presentations and critique of projects.
Link to the book's companion site: http://www.sitepoint.com/books/html1/
Lab: Code Archive (2008 version):
On a Mac and having issues with TextEdit not rendering your .html in text? View this help page from Adobe: http://support.apple.com/kb/TA20406
Ryan Tu | http://ryanxu.aisites.com/mm1123/index.html | Final Project
Elias Martinez | http://punisher18.aisites.com/ | Final Project
Thomas Vitale | http://tomachonai.aisites.com/ | Final Project
Robbie Espinosa | http://robbiefespinoz.aisites.com/mm1123/index.html | Final Project
Willey Rillo | http://willeyrillo.aisites.com/ | Final Project
Eugene Aquiler | http://eaquiler15.aisites.com/ | Final Project
Kyle Esguerra | http://jjesguerra.aisites.com/mm1123/ | Final Project
Stephanie Felix | http://steph100.aisites.com/ | Final Project
Jefren Villamor | http://villamorjin.aisites.com/ | Final Project
Diego Taborda | http://zuzugraphics.aisites.com/ | Final Project
Cecilia Barragan | http://ceci21barr.aisites.com/ | Final Project
Catherine Gonzalez | http://cgonzavill.aisites.com/ | Final Project
Bainti Singh | http://bainti.aisites.com/mm1123/ | Final Project
David Fernandez | http://davld.aisites.com/ | Final Project
Ted Wu - http://takumei.aisites.com/ | Final Project
Amanda Mathews - http://www.pandarooo13.aisites.com/ | Final Project
Matthew Patton - http://wynterkool.aisites.com/ | Final Project
Michael Doeschot - http://pixlepusher.aisites.com/ (final project)
Marie-Christine Gervais - http://www.mchristinegerv.aisites.com/ (final project)
Alex Magee - http://alexmagee.aisites.com/
Jose Toral - http://jtoral.aisites.com/
Brian Martinez - http://dizzguy.aisites.com/
Benjamin Dennis - http://entity157.aisites.com/
Patrick Kimble - http://mrkimble.aisites.com/
Jose Garcia - http://jrg373.aisites.com/
Corina Evans - http://corinaevans.aisites.com/
Kevin Deadder - http://www.lukeent.aisites.com/
Student information - Fall 2011
|Kelsey Baker | Final Project|
|Andrea Beach | Final Project|
|Tahanee Bean | Final Project|
|Ray Carey | Final Project|
|Matthew Chu | Final Project|
|Ericka Contreras | Final Project|
|Kevin Deadder | Final Project|
|Jessica Dolan | Final Project|
|Eleanor Encarnacion* | Final Project|
|Jeramee Flemming | Final Project|
|Kylie Gipson | Final Project|
|Joseph Ibarra | Final Project*|
|Anya Mettet | Final Project|
|Justin Otero | Final Project *|
|George Portillo | Final Project|
|Keojuckama Sar | Final Project|
|Tamirr Sykes | Final Project|
|Arjay Villanueva | Final Project|
|Sarah Tier | Final Project *|
Dave Hawkins | Final Project