Gdes2000 Graphic Design for Internet & MM

1. Gdes2000 Graphic Design for Internet & MM • Dreamweaver: Simple page construction with DIVs.

2. Gdes2000 Graphic Design for Internet & MM Websites and the design process 1/17: 1. We're making the assumption that you've been given a project or brief and are looking to create a basic web page sample to start the ball rolling. 2. Referring to the HCI considerations such as audience and relevant interface etc I’ll first sketch a [very] rough layout (see above). I’ll probably add annotations, comments and colour notes too dependant on the nature of the work in my sketch pad so I’ve got ref still if I need to come back to it.

3. Gdes2000 Graphic Design for Internet & MM Websites and the design process 2/17: 3. My next consideration is how to fit this layout into ‘DIV’‘boxes’. Essentially a ‘DIV’ can contain many elements - either graphic or text-based. It can also include other sorts of layout elements i.e. text or images. 4. Now that we're aware of DIVs we need to allot the best plan to suit our required design (see above). 5. Our sample layout suits a design with 3x main DIV containers (see above).

4. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 3/17: Folder setup • Click on the Mac's desktop. Select File > New folder. Type (your name) and then ’Test Site DIVs'. • Locate the folder on your desktop. Double click it to open it. • Inside create a new sub folder called 'images' (this is where present and future images will live). • [Do this via File > New Folder + then name it ‘images’]

5. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 4/17: Page setup and saving • Make sure DW is up and running on your Mac or PC. • In DW select the ‘Classic’ screen layout in the grey ‘DW’ bar.• As per the last DW exercise, create a new blank HTML file (File > New HTML in Dreamweaver). • Select file > save and save to the folder on the Mac or PC’s desktop as ’index.html' (it should automatically put in the '.html' bit). The first page of any web site will be called ‘index.html’ (or ‘index.htm’). • Now make sure the top ‘page title’ box says ‘Basic DIV Layout’.This will display as the page’s header/title in any web browser that you look at the page with..

6. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 5/17: Set the Body Text Style • In the blank new web page type ‘bodytext’. Now select this and look in your ‘properties’ palette to spec this type as a new inline style. Make sure: ‘CSS’is selected in the left of the palette. • It should now say ‘Inline style’ in the Properties grey drop-down palette. ‘Font’ is set to ‘Verdana, Arial..’‘Size’ is set to ‘12 (points in the drop-down menu at the side)’ ‘(Colour box) is set to a dark grey (#666666) colour.

7. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 6/17: Creating DIV layout • In DW click top left and select the ‘layout’tab. Click once on the dotted + square ‘AP DIV’ option. Now move your cursor (now a crosshair) over the white page area and diagonally drag a thin box across the width of the screen. Now select this box once on any edge, dots should show around it.. • Now look in your properties palette, set it’s size by typing W ‘820’(px) and H ‘160’(px) - the box should now remain this size. In the ‘CSS P’ field, type ‘header’. Now set the box’s colour by typing #CCCCFF into the ‘bg color’ box. Your box should now turn pale blue (same as the image header we’re going to put in).

8. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 7/17: DIV Layout / Styles Palette • Next select Window > AP Elements, look to your ‘CSS’ palette on the right and make sure that you can see both CSS Styles (named ‘#header’) and AP Elements or DIVs (named ‘header’) with a layer order (or ‘Z index’) of 1. • This order (Z index) can be moved around if needed to move some layers ‘above’ others on the page (a bit like in photoshop)..

9. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 8/17: Creating other elements • We now need to create the other visual elements (the left menu) and (the ‘contents’) area.. To do this first create [on the left] a long vertical slim box as you did the header box. Make sure you spec it in the properties palette as: AP Element‘Navsurround’, W160px, H140px, bg color #CCCCFF (make sure you type the ‘#’). • Now look in your AP Elements palette and see how it’s changed (click on one of the layers here and move them about if needed).

10. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 9/17: Creating other elements • We now need to create an area where content will sit in the page.. Create an AP box as with the original 2 but do not place it next to the others, rather leave an equi-distant gap from the blue areas.. My properties palette specreads CSS-P element‘Content’, W644px, H425px, bg color (none) or white. • Now type “This is my heading” in the new layer. Select this text and in your properties palette, then click the drop-down to show New Inline Style. Spec this: FONT Verdana, Arial etc, Size 24 points, Colour (Dk Grey) ‘333333’. Re name the style in the properties as ‘Headings’ N.B. Ideally text styles should be in an external style sheet if it’s a large site. We’ll do this in a subsequent session.

11. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 10/17: Creating text elements • We now need to create the CSS text spec for our body text.. First type in your sample text below your new heading I.e. “This is bodytext”(and a bit of a story of your own to add bulk - a fascinating fact maybe?..). • Select this body text and in your properties palette, spec this: FONT Verdana, Arial etc, Size 12 points, Colour (Dk Grey) ‘333333’ [same colour as the heading]. Re name the style in the properties as ‘Bodytext’

12. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 11/17: Adding other elements • Make sure that the new bodytext is now grey and the right size..

13. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 12/17: Creating other elements • We now need to add an image into the top ‘header’ layer. See web timetable. • Make sure that you have your ‘tut-top-banner.gif’ in an images folder in your working folder. Click once inside the top blue (header) AP element and then make sure that you’ve got your ‘common’ drop-down palette back up top right. • Select the image button (looks like a tree) and tell DW which image [and from where] you want to import into the layer.. It should look like (above) ..

14. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 13/17: Adding Navigation Text Links • We now need to add some text in the left DIV to make navigation links.. • You can do this by creating a new AP element of text nested [new word] inside the existing left navigation AP Div. • To do this click once in the left navigation DIV. Now look up at the main DW menu on your Mac and select: Insert > Layout Objects > AP Div • The new DIV should now sit nested inside the original navigation DIV.. • Click on the new DIV and name it ‘Navtext’ in your properties palette.• You’ll know if you’ve done it right by looking at your AP elements palette [see above] and see the ‘step’ with the new text DIV below the main navigation DIV..

15. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 14/17: Adding Navigation Text Links • We now need to add some text in the left layer to make navigation links.. • See above, I’ve just written ‘Link 1’ etc.. You can create a suitable CSS type spec of your choice for this – I recommend it being a little bigger and bolder than the body text though. • Now make sure your page is saved. Now try and view the page in as many browsers as you can - this part is crucial and will tell you whether or not you may need to revise some part of your design.. Remember to speed up displaying the file in a browser, you can ‘drag and drop’ the DW file into any browser window from your desktop or folder window..

16. Gdes2000 Graphic Design for Internet & MM Creating the design in Dreamweaver 15/17: File management • If you’re happy with your page design and you want to use it again and again, you may wish to consider DW’s ‘template’ system. This is also useful if you’re using the template via a large team and only want certain areas ‘editable’. • See DW’s ‘help’ section on this or go to: File > Save as Template. • I prefer to manually keep all my files together in folders but DW offers a file management system too if you want to try and ‘automate’ some changes via templates etc.. Again, see DW’s help section on this or go to Site > Manage Site

17. FIN