Artdm 171 Week12 Templates

789 views
698 views

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide



























  • Artdm 171 Week12 Templates

    1. 1. ARTDM 171, Week 12: 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. Coding Templates
    5. 5. Process Deliver Create Break Apart Page Comps HTML Templates Template Elements Photoshop HTML, CSS, Template files (.dwt, .lbi, JavaScript SSI includes, etc)
    6. 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. 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. 8. Your first page: Home • Create a new html document • Name the file index.html
    9. 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. 10. div layout header nav content footer
    11. 11. div layout <div id=“header”></div> <div id=“nav”></div> <div id=“content”></div> <div id=“footer”></div>
    12. 12. Apply styles • Apply width, height, margins, padding, background colors • Center all sections using auto for left and right margins
    13. 13. Multiple Columns with tables • Insert a table into your content div • Create two columns • Label each column ‣ main ‣ sidebar
    14. 14. Your First Template
    15. 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. 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. 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. 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. 19. Library Items
    20. 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. 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. 22. Server Side Includes (SSI)
    23. 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. 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. 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. 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. 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

    ×