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

Transcription

1 Dreamweaver: Simple page construction with DIVs.

2 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 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 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 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 normally ALWAYS be called index.html (or index.htm ). Now make sure the top page title box in DW 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 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 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 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 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 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 spec reads 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) 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 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) [same colour as the heading]. Re name the style in the properties as Bodytext

12 Creating the design in Dreamweaver 11/17: Adding other elements Make sure that the new bodytext is now grey and the right size..

13 Creating the design in Dreamweaver 12/17: Creating other elements We now need to add an image into the top header layer. (See module 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 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 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 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