• Save
Artdm 171 Week12 Templates
Upcoming SlideShare
Loading in...5
×
 

Artdm 171 Week12 Templates

on

  • 848 views

 

Statistics

Views

Total Views
848
Views on SlideShare
811
Embed Views
37

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 37

http://www.gilbertguerrero.com 36
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Artdm 171 Week12 Templates Artdm 171 Week12 Templates Presentation Transcript

  • ARTDM 171, Week 12: Coding Templates Gilbert Guerrero, gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
  • 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
  • Homework • Put your homework in my dropbox • Put them in a folder with your lastname and first initial Example: smith-h page-comps.pdf
  • Coding Templates
  • Process Deliver Create Break Apart Page Comps HTML Templates Template Elements Photoshop HTML, CSS, Template files (.dwt, .lbi, JavaScript SSI includes, etc)
  • 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
  • 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
  • Your first page: Home • Create a new html document • Name the file index.html
  • 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
  • div layout header nav content footer
  • div layout <div id=“header”></div> <div id=“nav”></div> <div id=“content”></div> <div id=“footer”></div>
  • Apply styles • Apply width, height, margins, padding, background colors • Center all sections using auto for left and right margins
  • Multiple Columns with tables • Insert a table into your content div • Create two columns • Label each column ‣ main ‣ sidebar
  • Your First Template
  • 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
  • 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
  • Template Tags • Open the code view of your template. • You’ll notice Dreamweaver’s template tags in your code <!-- TemplateBeginEditable name="Page Title" -->
  • 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
  • Library Items
  • 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
  • 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
  • Server Side Includes (SSI)
  • 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
  • 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
  • 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
  • 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
  • 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