1. ARTDM 171, Week 11:
Coding Templates
Gilbert Guerrero, gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-171/

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. 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. Comps
Volunteers?

5. Coding Templates

6. Process
Deliver Create Break Apart
Page Comps HTML Templates Template Elements
Photoshop HTML, CSS, Template files (.dwt, .lbi,
JavaScript SSI includes, etc)

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. 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. Your first page: Home
• Create a new html document
• Name the file index.html

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. div layout
header
nav
content
footer

12. div layout
<div id=“header”></div>
<div id=“nav”></div>
<div id=“content”></div>
<div id=“footer”></div>

13. Apply styles
• Apply width, height, margins, padding,
background colors
• Center all sections using auto for left and
right margins

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. 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. 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.