Gdes2000 Graphic Design and the Internet

Transcription

1 Dreamweaver Rough Photoshop Layouts to DIVs. Using AP DIVs (Absolutely Positioned) Introducing RGB, 72dpi, page sections

2 Last Session: We created a basic DIV Page Layout (Above) We re going to build on what we did last week (as a reminder, we positioned DIVs, made them the size we required, colour we required, imported imagery into them and created and basically specced text within them). This week we re going to look at how to split a photoshop page mockup into elements on the webpage. We re also going to look into basic rollover graphic buttons in Dreamweaver.

3 Setting Up Creation of a blank HTML file / folders IMPORTANT As with last week, I d like you each to create a folder on your desktop labelled PSD to DIVs in Dreamweaver. INSIDE this folder create the usual images folder that your images will all live within. IMPORTANT Now start up Dreamweaver as per last week, then create a blank HTML page, save this as index.htm (all lower case, no gaps in the file name) in your new PSD>DIVs folder on your desktop so all that you can see are (it )and the images folder. Please also have you layout pads ready and a pen/pencil as you ll need em.

4 Setting Up Start Up Photoshop This section assumes that you ve opened Photoshop before and know some very basic commands. Download the psd-divs.psd file off the web timetable this week. Open this Pshop file on your workstation, you ll see that it has a number of layers - all describing various things such as suggested DIVs [see pic above], what each section does, etc.

5 Setting Up What you re looking at in Photoshop Note a few things once you ve opened up the duck photoshop document.. See the blue & green pshop guides to simulate a column/grid design. See also how there are sections of the page - identity, links and content IMPORTANT Note also that there s 2x photoshop documents that look similar that we ll use. psdtodivslayers.psd AND psdtodivsflat.psd. As this suggests, one is still in LAYERS and one is FLATTENED in photoshop.

6 Setting Up What you re looking at in Photoshop (see psdtodivslayers.psd) Now make sure that everything in Photoshop s layers palette is visible EXCEPT the sections of the page layer. We don t need this from here. IMPORTANT Each of the black boxes suggests a potential DIV for layout + number. The size in pixels (screen measurement) of this document in photoshop (and hence the size we ll make it in Dreamweaver) is 800x600 pixel (RGB) page mockup (72dpi only as most monitor /screen resolutions are only approx 72dpi).

7 Getting going Chopping-Up the Page There are a couple of ways that you can chop-up the Duck page, one of them is to use Photoshop s Save for Web and Devices option and create slices. There s more about this in Photoshop s help section if you want to follow it up.. We re going to chop-up basically & manually though :) IMPORTANT For starters, scribble a copy of the page design and it s suggested (Black lined) DIVs + their numbers/names onto your layout pads. You ll need this as a reference later.

8 Getting going Creating the container [also called wrapper by some] First we re going to make a CONTAINER DIV in Dreamweaver that does as it says on the tin and acts as a container for all of the other DIVs you ll use. The size of the document/design in photoshop (as mentioned) is 800x600 pixels. As such, our container in DW will match this size. To make this, make sure you re in DW with a blank web page open. Now click once top left in the page and select the AP DIV button/drop-down as you did last week. Draw the DIV with your cross hair, then re size it to 800x600 pix in your PROPERTIES palette as you did last week with basic DIVs. Also in the properties, make sure the CSS-P field says container [important]..

9 Getting going Chopping-Up the Page (see psdtodivsflat.psd) Now make sure you ve got the FLAT document to the front in photoshop. SOME of the DIVs we re going to make don t contain any imagery - rather just coloured backgrounds. As such we ll make these first in DW (DIVs 1,2 and 3). To get an idea of size in Photoshop, use your square marquee and drag it from the top left of the image to the bottom right of the BANNER only. Make sure via: Windows > Info that you can see how large this selection is in PIXELS. If it doesn t show pixels than look in Photoshop > Preferences > Units and Rules and turn to pixels as rulers.

10 Getting going Chopping-Up the Page & Nesting DIVs IMPORTANT add DIV1 INSIDE the container DIV by selecting: Insert> Layout objects> AP DIV. Then re-size it in your properties palette as measured in pshop (w800 x h131 pix). Make sure you give it a CSS-P name of banner-bg or DIV 1 if clearer for you. Colour, we also need to know the background colour of DIV1.. Go back to Photoshop and use the pipette tool, click it once on the banner, then double-click the orange square on the tools palette. A colour window should open, make sure it says only web colours (box bottom right) - this makes sure that this colour will be seen by all browsers ok [otherwise knows as web safe colours]..

11 Page Construction Creating the Background DIVs The colour that we ll set this to in DW is it s hex (hexidecimal) colour. This is the only sort of colour ref that web browsers understand. Here this orange is #FF6600. So now you ve got both a size to set your DIV to and a background colour. You should now have created the first layout element. Now create DIV s 2 and 3 in the same way (measuring in size and colour in pshop) IMPORTANT - remember to INSERT these inside the container DIV each time. (suggest names of linksbg and contentbg ). You should have the 3x background DIVs on the page - all various tones of orange..

12 Page Construction Creating additional DIVs Now we need to start adding other more specific DIVs nested in the others to help create our intended layout. Identify DIV no.4 on the LAYERS photoshop file [which is the page s title text]. Now move to the FLAT photoshop document for measuring. In the FLAT Photoshop doc, select around the title on the flattened file (see pic above). Use the info palette again to see what the size is. My measurements are w 775 x h 62. BUT.. We need the new title DIV to sit INSIDE ( nested in ) the banner-bg DIV.. To do this, click once inside the header DIV and then select: Insert > Layout Elements > AP Div as you did with the navigation options in the last workshop.

13 Page Construction Creating additional DIVs Make sure the DIV you create is w 775 x h 62 - check in your DW properties palette. Now it select it, make sure that the box is surrounded by it s handles, then drag/ nudge it into position - refer to the photoshop file for a visual check if needed (for fine-tuning you can use the arrow keys on the keyboard). The new DIV should now be sitting INSIDE the header DIV and is ready to accept an image (or text).

14 Page Construction Creating additional DIVs Now you ve set up the DIV ready in DW, we ll need to save the photoshop slice for the title. Go back to the FLAT photoshop doc, with the (dotted) selection box around the page title still on then: edit>copy. Now select file>new in Pshop, the dimensions in the box should be exactly the dimensions of your selection and also RGB and 72dpi (screen colours & resolution). You should now have a slim blank window on screen, now edit>paste into this and the title should magically fit in it!

15 Page Construction Creating additional DIVs Now save this image for web by selecting in photoshop: file>save for Web and Devices. A window comes up with the image.. as it s just flat colour (I.e. not lots of blends) then it s best saved as a.gif image in the file-format drop-down under the save buttons etc. Now save and it should ask you where you want to save it, IMPORTANT make sure it goes into the images folder you created inside the psd>divs folder on your desktop earlier. You should now be ready to import the image into the DIV you just created in DW..

16 Page Construction Creating additional DIVs Now go back into DW, click once on the new DIV s perimeter, make sure it has a CSS-P title that makes sense in the Properties palette (mine s pagetitle ). Now click inside it an import the pagetitle image into it (as per last week), give it an alt tag of page title image and a border of 0 in the properties palette [remember that we talked about it having a blue outline if made a link otherwise]. Now go through the same process for DIV5. N.B. This piece of text will change in relation to every web page you create after this one. For the moment it ll read Duckpond Home.

17 Page Construction Creating additional DIVs Now you should have created DIV4 and 5. Time to create DIV6 now then, this has HTML / CSS specced text in it though and isn t an image as were the last two.. (This DIV will serve as a backup navigation if there are ever any image display problems and your main nav buttons don t for whatever reason show momentarily). Measure-out DIV 6 in photoshop, then create it in DW and nudge it into position (rem to INSERT it into the header DIV again). To make sure that DIV5 and DIV6 are level, you can click on the ruler and drag a guide down (or as a vertical guide across) as in photoshop. If the rulers aren t showing then select: view>rulers>show in DW. Next we add a type spec to text..

18 Page Construction Speccing Text First type-out the 3x text options that form the subnav I.e. Duckpond Home, Duckpond New etc. Now go back to the LAYERS psd doc and select the same text, go to the colour picker we looked at earlier and jot-down the hex colour - it should be #FFCC99 [a sort of faded orange]. Also in pshop you should be able to see it s typeface which is Trebuchet MS and 14pt (NOT pixels). You now have all the details needed to set it s CSS type style in DW. Now set up the CSS spec for the text via the DW properties palette as you did last week [Properties palette > CSS button > New CSS Style > change font / set as new]. Now all you need to do is nudge the subnav text down so that it s baseline is level with the Duckpond home text along the green rule (see below).

19 Page Construction Creating rollover buttons. Now we ve got to build DIVs 7,8 and 9 which will form background containers for our rollover buttons. Do this by measuring them out on the pshop FLAT file and creating appropriate DIVs in place in DW. INSERT them into DIV 2, label them homebutbg, newbutbg and issuesbutbg in the CSS-P Element section of the properties palette. Now we need to create BOTH states of the buttons in pshop (on/off). We have one state already (the ones which sit in the pshop image). We need to make slightly altered ones though that will show when the buttons are rolled-over in a browser. First create separate graphical buttons in pshop and save them for web in your images folder. Make sure the file names are labelled as above. Then image>adjust>desaturate in pshop, (they should go grey), save/name them as above.

20 Page Construction Creating rollover buttons. Now we ve got to import the buttons into the relevant button bg containers in DW.. Click once in the first button container and then to insert>image objects>rollover image. A pop up box appears. Fill it in as above then press ok. Your home button should now be visible in the container. Now do the same process for the other 2x buttons in the other containers.

21 Now test your file.. Page Construction Creating Photo and Text DIVs. Now you might like to test your file so far by dropping the index.html file on top of a browser - either Safari or Firefox should be fine. Does it work? Do the colours show correctly? Remember that you need a # in front of all colour specs in CSS. Now to create DIVs 10, 11, 12 and 13.. Firstly measure-out DIV10 in pshop and INSERT it into DIV 3 (I called mine mainheading ). Now type the title words into it and select them. Spec the text in the properties palette as previously.

22 Page Construction Creating Photo and Text DIVs. Now measure DIVs 11, 12 and 13 in the FLAT pshop file and INSERT DIV s to that spec into DIV3. In the CSS-P elements section of the Properties palette call them duckypic, contentleftcol and contentrightcol so we can see them in the CSS palette. Now you ll need to save the duck image off your FLAT pshop file as you did the titles a while back. Copy, file new, paste, save for web and devices as a JPG (not a.gif as before as jpg is better for showing photos of things). Now import this into the duckypic DIV, add it s ALT text and make sure it s got a border of 0 in the properties palette.

23 Page Construction Adding Bodytext Now we need to add the bodytext. For the sake of this test, find any old web page with text content, copy some of this and paste/fill up the left and right columns in DW. [As with last week] spec text as a new inline style trebuchet, 10px, colour # (a sort of grey). Look at your page in a browser - it should be near complete! Now we re going to link/create the other pages that the buttons link to.. First file>save as in DW and re-name to new.html. Then do the same but call it issues.html. Make sure each file is saved alongside index.html in your PSD>DIVs folder.

24 Page Construction Adding Pages Now you should have 3 identical pages that are all linked by buttons. To distinguish between them, change the main text titles on the new and issues pages to mirror what they are I.e. Duckpond New and Duckpond Back Issues Why not also change the HTML text bg DIV to a slightly different colour too for the 2x new pages. Remember also to change each new page s title (top of the DW page above the HTML bit) to mirror their functions too. You can use capitals and spaces in here. You may also want to try linking the sub nav text links to the new pages too.

25 Page Construction (Note): Using the DW file management system To date we ve done things manually when creating new pages. DW offers a function which allows you to save a page as a template though (bit like you can save templates in Office etc and then use them to create new duplicate files). If you want to try this on your pages so far then it relies on you keeping all in the same folders etc. If you move a file out of the present order in folders it ll throw a wobbler though and not play. I must admit that I ve had more trouble than anything from this function in the past so I tend to stay working manually to set up basics - it s personal prefs though and as you get to know DW better you ll need to make your own decisions.. To find out more about this option look at the DW help under Creating and managing files.

26 And Finally So What have you just done/learned? Logical setting-up of files and folders. How to take designs in Photoshop and create them in Dreamweaver with DIVs. How to create Rollover link Buttons. How to re spec Headings and Paragraphs so that you can use them for your own specs of text. How to basically link and create new pages from a master page manually. There s still things to learn from here but master the above and it ll stand you in good stead for creating basic templates for CMSs or static sites from here onwards.