ARTDM 171, Week 11: Templates

478 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
478
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • ARTDM 171, Week 11: Templates

    1. 1. ARTDM 171, Week 11: Coding Templates Gilbert Guerrero, gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
    2. 2. Save Comps as PDF • Turn in your comps as PDFs or JPEGs. Keep your source files. ‣ In Photoshop, use Save as... and choose JPEG. Select standard and maximum quality in the JPEG options. ‣ Turn your JPEGs into one PDF document. There are several ways to do this using Acrobat Professional:  Drag and drop JPEGs onto the Acrobat icon  Open Acrobat and use Combine Files
    3. 3. Homework • Put your homework in my dropbox • Put them in a folder with your lastname and first initial Example: smith-h page-comps.pdf
    4. 4. Comps Volunteers?
    5. 5. Coding Templates
    6. 6. Process Deliver Create Break Apart Page Comps HTML Templates Template Elements Photoshop HTML, CSS, Template files (.dwt, .lbi, JavaScript SSI includes, etc)
    7. 7. Working folder structure • Create a new folder called assets • Move all of your strategy documents and page comps into assets • Create a new folder called html • All of the code, images (jpg, png, gif), cascading style sheets, and scripts for your site will go into html
    8. 8. Set up the directory structure • Create addresses for your pages that are easy to read and remember and reinforce the mental model ‣ http://example.com/about/ ‣ http://example.com/contact/ ‣ http://example.com/products/laptops/ • Use your directory structure as the backbone of your website
    9. 9. Your first page: Home • Create a new html document • Name the file index.html
    10. 10. Dividing your page with <divs> • <div></div> tag provides a way to define sections of your document that can be formatted with CSS • Use <div> tags for block-level elements • <span></span> tags for inline elements
    11. 11. div layout header nav content footer
    12. 12. div layout <div id=“header”></div> <div id=“nav”></div> <div id=“content”></div> <div id=“footer”></div>
    13. 13. Apply styles • Apply width, height, margins, padding, background colors • Center all sections using auto for left and right margins
    14. 14. Multiple Columns with tables • Insert a table into your content div • Create two columns • Label each column ‣ main div id="content" ‣ sidebar table id="layout" td id="main" td id="sidebar"
    15. 15. Timeline October November December 29 6 13 20 27 3 10 17 24 1 8 15 Last day of class Strategy Present final projects Design (two days) Site development Present (html coding) revisions Page production (add content and images) Usability Testing
    16. 16. Homework, due Nov 3 • Read chapter 15 in the Dreamweaver textbook • Start working on your HTML templates • Create two library items to be used on your site ‣ Next week you’ll turn in two .lbi files ‣ Try turning your header and footer into library items, e.g.  header.lbi  footer.lbi Next week: We'll discuss web hosting.

    ×