1. ARTDM 171, Week 12:
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. Coding Templates

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

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

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

8. Your first page: Home
• Create a new html document
• Name the file index.html

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

10. div layout
header
nav
content
footer

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

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

13. Multiple Columns with tables
• Insert a table into your content div
• Create two columns
• Label each column
‣ main
‣ sidebar

14. Your First Template

15. Create a new page
• Create a folder called sublevel
• Use your homepage and save as
index.html in the sublevel folder
• Modify to make it match your sublevel
page comp

16. Save as a template
• Use File > Save as Template…
• Dreamweaver saves your template file into
a new folder within your site files called
Templates
• Create areas which can be edited by
highlighting placeholder content
‣ Go to Insert > Template Objects > Editable
Regions

17. Template Tags
• Open the code view of your template.
• You’ll notice Dreamweaver’s template tags
in your code
<!-- TemplateBeginEditable name="Page Title" -->

18. Using your template
• To begin using this template, open the
Assets panel and click the Templates
button
• If you don’t see your template, click the
refresh button at the bottom of the panel
• To create a new page using this template,
right-click on the file in the Assets panel
and choose New from Template

19. Library Items

20. Creating Library Items
• To add a new item to the Library:
‣ Click the Library button in the Assets panel
‣ Select some text in a page or template, such as
the text in the footer
‣ Click the New Library Item button (bottom of the
Assets panel)
‣ Name your library item
• Library items are highlighted in yellow
• To use your new library item, drag and drop it
onto any page

21. Sharing and detaching templates
• Share the Templates and Library folders
with collaborating developers or else
they’ll be locked out of the design
• If you want to edit a page, but you can’t
edit the template
‣ Use Detach from template in Dreamweaver
‣ Open the file outside of Dreamweaver and
remove all the template tags

22. Server Side Includes (SSI)

23. SSI for Templates
• If you know your server is running Apache
(most likely it is), you can use SSI to include
common items on every page.
<!--#include virtual="/includes/nav.html"-->
• More SSI commands: http://en.wikipedia.org/
wiki/Server_Side_Includes

24. iframes
<iframe name=“myfeed” id=“myfeed” src=“myfeed.html”
height=“100” width=“400” scrolling=“auto”>
If you can see this, your browser does not
support iframes!
</iframe>
• iframes allow you to embed external content
• Drawback: links have to be edited to load
pages in the parent window

25. Timeline
March April May Last day of class
9 16 23 30 6 13 20 27 4 11 18 25
Strategy
Present final projects
Research and discovery (two days)
creative user
brief personas
Design
Validation
Interaction design
sitemap
wireframes
Visual design
Present
mood revisions
boards
page
comps
Site development
Production

26. Timeline
March April May Last day of class
9 16 23 30 6 13 20 27 4 11 18 25
Strategy
Present final projects
Research and discovery (two days)
Design
Interaction design
Validation
Visual design
Site development
Prototyping (Text-only HTML) Present
revisions
Layout and styling (CSS)
User interface dev (images and backgrounds)
Production

27. Homework, due April 20
• Read Chapter 13: Using Behaviors and
Navigation Objects in the Dreamweaver
textbook
• Create a text-only version of your final
project site