ࡱ> VXU tbjbjcc (Lvvt   $2V$X$X$X$X$X$X$%(`X$X$m$V$V$r>!T>" {qe`"!Z"$0$!))>">"  :   Craig Stroupe | University of Minnesota Duluth Tracing Images in Dreamweaver What to doHow to do itPagePaste a screen shot of your model page into a new Photoshop document (If you want to see more of the page layout in your browser, hit Command+minus to zoom out) On a PC: Viewing the page in your browser, hit the "Prt Scr" button On a Mac: Viewing the page in your browser, hit Command+Shift+Control+4 and drag with the cursor to select the main layout of the page. In Photoshop, hit control+n (for new) Hit control+v (for paste) If necessary, crop your screen shot exactly to capture just the layout table. Use the Marquee tool to select the layout table Choose Image > CropSize your images width to the width of your content on your intended page. Choose Image > Image Size Type in how many pixels wide the container div will be in your new page. For example, 780 px. is a standard width of some of Dreamweavers preformatted layouts. Save the screen shot as a .psd into your class folder (not www) for possible later useFile > Save Save the image as tracing_image.psdSave the screen shot ("Save for Web and Devices") as a .jpg into a folder on your USB drive: www/XXXX/exercises/tracing File > Save for Web and Devices Choose a low quality .jpg setting Save the image as tracing_image.jpg in a new folder www/XXXX/exercises/tracingIn Dreamweaver, create a new page using one of the preformatted layouts, choosing one that approximates the layout of your model page. Choose File > New In the New Document Window, choose Blank Page, Page Type:HTML, and an appropriate layout from the list (the correct number of columns, header or not, fixed or flexible, etc.)Save the page as index.html on your USB drive in the folder www/XXXX/exercises/tracingFile > SaveDelete the color from the page backgroundOpen the CSS Styles panel at the upper right Double click the body style and, in the CSS Rule window that appears, choose Background from the left and delete the code for the background color. Click OKDelete the color from the various layout divsDouble click the .twoColFixRtHdr #container style (your style may have different characters in front of #container) and, in the CSS Rule window that appears, choose Background from the left and delete the code for the background color. Click OK. Repeat for the other divs on the page. Insert the tracing image behind the pageChoose Modify > Page Properties > Tracing Image Choose Tracing Image from the left menu On the right, click the Browse button next to the Tracing Image box Browse to and select tracing_image.jpg  If necessary, align the tracing image with your layout dive In the document, select the layout div (click in the div and then select the divs tag from the tag selector bar at the bottom left of the document window Choose View > Tracing Image > Align with Selection  Adjust the width, heights, and margins of your various divs to match the layout of the tracing image, starting with #container. Open the CSS Styles panel at the upper right Double click the style for each div and, in the CSS Rule window that appears, choose Box from the left and try different width, heights, and margin values to make your layout divs match the sections of your tracing image. Click OK As needed, adjust the opacity of the tracing image Choose Modify > Page Properties > Tracing Image Choose Tracing Image from the left menu Drag the bar to set the transparency/opacity Click OK To make the tracing layer appear or disappear Choose View > Tracing Image > Show (to toggle between select and deselect)  /0MNOlm $ % & '   [ \ i j "##$|}st()ptѾѾѾѾѾѾѾѾѾѾѾѾѾѾh!'h!'6CJaJh!'h!'CJaJh!'h!'5h!'h;kh!'5CJ,aJ,h!'5CJ,aJ,h_Sh!'5CJaJh!'5CJaJ)0NOZgl$Ifgd!'l $If^`gd!'l H$If^Hgd!'l 0^0gd!'lm a>++$Ifgd!'l # & F $If^`gd!'l kd$$IflF0!  t0$6    44 lap  T U  $ % & $If^`gd!'l $Ifgd!'l & ' v w c@! $If^`gd!'l # & F $If^`gd!'l kd$$IflF0!  t0$6    44 lapw 5kd$$IflF0!  t0$6    44 lap$Ifgd!'l $If^`gd!'l  & $Ifgd!'l $If^`gd!'l # & F $If^`gd!'l  ' 4 c@! 5$If^`gd!'l # & F $If^`gd!'l kd_$$IflF0!  t0$6    44 lap4 Z [ \ 1kd($$IflF0!  t0$6    44 lap$Ifgd!'l  5$If^`gd!'l \  h i $Ifgd!'l $If^`gd!'l # & F $If^`gd!'l i j a> $If^`gd!'l # & F $If^`gd!'l kd$$IflF0!  t0$6    44 lap $Ifgd!'l $If^`gd!'l  $If^`gd!'l !c@%$If^`gd!'l # & F $If^`gd!'l kd$$IflF0!  t0$6    44 lap!"#MP-# & F $If^`gd!'l kd$$IflF0!  t0$6    44 lap$Ifgd!'l M|"#$5kdP$$IflF0!  t0$6    44 lap$Ifgd!'l $If^`gd!'l $RFR{|$Ifgd!'l $If^`gd!'l # & F $If^`gd!'l |}Hc@---$Ifgd!'l # & F $If^`gd!'l kd$$IflF0!  t0$6    44 lapHqrst5kd$$IflF0!  t0$6    44 lap$If^`gd!'l $Ifgd!'l tN$Ifgd!'l $If^`gd!'l  $If^`gd!'l # & F $If^`gd!'l  9c@%%$If^`gd!'l # & F $If^`gd!'l kd$$IflF0!  t0$6    44 lap'()5kdt $$IflF0!  t0$6    44 lap$Ifgd!'l $If^`gd!'l )]^$Ifl $If^`gd!'l $Ifgd!'l  $If^`gd!'l # & F $If^`gd!'l  !c@! $If^`gd!'l # & F $If^`gd!'l kd= $$IflF0!  t0$6    44 lap!"#nop$Ifl $If^`gd!'l  $If^`gd!'l pqrstca\agd!'kd $$IflF0!  t0$6    44 lap&1h:p!'/ =!$ "#$%$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap$$If!vh5 55#v #v#v:V l t0$65 55ap_HmH nH sH tH @`@ NormalCJ_HaJmH sH tH DA D Default Paragraph FontRi@R  Table Normal4 l4a (k (No List j@j s Table Grid7:V0PK!K[Content_Types].xmlj0Eжr(΢]yl#!MB;BQޏaLSWyҟ^@ Lz]__CdR{`L=r85v&mQ뉑8ICX=H"Z=&JCjwA`.Â?U~YkG/̷x3%o3t\&@w!H'"v0PK!֧6 _rels/.relsj0 }Q%v/C/}(h"O = C?hv=Ʌ%[xp{۵_Pѣ<1H0ORBdJE4b$q_6LR7`0̞O,En7Lib/SeеPK!kytheme/theme/themeManager.xml M @}w7c(EbˮCAǠҟ7՛K Y, e.|,H,lxɴIsQ}#Ր ֵ+!,^$j=GW)E+& 8PK!\theme/theme/theme1.xmlYOoE#F{o'NDuر i-q;N3' G$$DAč*iEP~wq4;{o?g^;N:$BR64Mvsi-@R4Œ mUb V*XX! cyg$w.Q "@oWL8*Bycjđ0蠦r,[LC9VbX*x_yuoBL͐u_. DKfN1엓:+ۥ~`jn[Zp֖zg,tV@bW/Oټl6Ws[R?S֒7 _כ[֪7 _w]ŌShN'^Bxk_[dC]zOլ\K=.:@MgdCf/o\ycB95B24S CEL|gO'sקo>W=n#p̰ZN|ӪV:8z1f؃k;ڇcp7#z8]Y / \{t\}}spķ=ʠoRVL3N(B<|ݥuK>P.EMLhɦM .co;əmr"*0#̡=6Kր0i1;$P0!YݩjbiXJB5IgAФ޲a6{P g֢)҉-Ìq8RmcWyXg/u]6Q_Ê5H Z2PU]Ǽ"GGFbCSOD%,p 6ޚwq̲R_gJSbj9)ed(w:/ak;6jAq11_xzG~F<:ɮ>O&kNa4dht\?J&l O٠NRpwhpse)tp)af] 27n}mk]\S,+a2g^Az )˙>E G鿰L7)'PK! ѐ'theme/theme/_rels/themeManager.xml.relsM 0wooӺ&݈Э5 6?$Q ,.aic21h:qm@RN;d`o7gK(M&$R(.1r'JЊT8V"AȻHu}|$b{P8g/]QAsم(#L[PK-!K[Content_Types].xmlPK-!֧6 1_rels/.relsPK-!kytheme/theme/themeManager.xmlPK-!\theme/theme/theme1.xmlPK-! ѐ' theme/theme/_rels/themeManager.xml.relsPK] t L t l & w 4 \ i !M$|Ht)!pt !"#$%8@0(  B S  ?vvDGHK GX*;=GMQesg k ^ o  vdsv::o$*,Z^zmZ#W,z~dh ^`hH.h ^`hH.h pLp^p`LhH.h @ @ ^@ `hH.h ^`hH.h L^`LhH.h ^`hH.h ^`hH.h PLP^P`LhH.h^`OJQJo(hHh^`OJQJ^Jo(hHohpp^p`OJQJo(hHh@ @ ^@ `OJQJo(hHh^`OJQJ^Jo(hHoh^`OJQJo(hHh^`OJQJo(hHh^`OJQJ^Jo(hHohPP^P`OJQJo(hHh^`OJQJo(hHh^`OJQJ^Jo(hHohpp^p`OJQJo(hHh@ @ ^@ `OJQJo(hHh^`OJQJ^Jo(hHoh^`OJQJo(hHh^`OJQJo(hHh^`OJQJ^Jo(hHohPP^P`OJQJo(hHh ^`hH.h ^`hH.h pLp^p`LhH.h @ @ ^@ `hH.h ^`hH.h L^`LhH.h ^`hH.h ^`hH.h PLP^P`LhH.zmZ*,o$,z                                    !'NOZglm%&'w 'Z[\hij!"#M"#$R{ | } r s t ' ( ) ^ #opqvx@t@UnknownGTimes New Roman5Symbol3 Arial? Courier New;Wingdings"qh2f2f/4&  $ 24d33QHP)?2`C:\Documents and Settings\Craig Stroupe\Application Data\Microsoft\Templates\advice template.dot)Digitalizing Images from a Print Document Craig StroupeCraig     Oh+'0x     ',Digitalizing Images from a Print DocumentCraig Stroupe`\Documents and Settings\Craig Stroupe\Application Data\Microsoft\Templates\advice template.dotCraig2Microsoft Macintosh Word@G@@`qe@`qe ՜.+,0$ hp  'UMD Composition Dept.  *Digitalizing Images from a Print Document Title  !"#$%&()*+,-.0123456789:;<=>?@ABCDFGHIJKLNOPQRSTWRoot Entry FpqeYData '1Table/*WordDocument(LSummaryInformation(EDocumentSummaryInformation8MCompObj`ObjectPoolpqepqe F Microsoft Word 97-2004 DocumentNB6WWord.Document.8