Gdes2000 Graphic Design for Internet & Multimedia An Introduction to Dreamweaver CS5 + Adding Text Overview of palettes and DW working environment. Creation

Gdes2000 Graphic Design for Internet & Multimedia

An Introduction to Dreamweaver CS5 + Adding Text

• Overview of palettes and DW working environment. • Creation of a new HTML document• Addition of basic text and image• Browser tests

1. Make sure that you’re logged in to an individual Mac.2. Locate the green “Dw” icon in the Mac button bar.3. DW should now start up. If it hasn’t been used before on

the machine it will offer you a ‘tour’ and summary. 4. Select: Window > Workspace Layout > Designer

This will give you the workspace best suited for most of us.


The Basics: Insert, Properties, Blank HTML page and CSS Styles palettes.


The Insert Palette

1. To add a new page link to a web page2. To add a new clickable e-mail link to a web page3. To add an ‘anchor’ link to a web page*4. To add a new table to a web page*5. To add a new ‘DIV’ to a web page*6. To add an image to a web page

7. To add multimedia and new media to a web page*

+ more… * We’ll be looking at these at a later date.


The Properties Palette

1. To specify HTML text styles, sizes, colours, alignments, bold, italic etc.

2. To enable the user to put a link into a web page and specify which page to link to and what ‘target’ to link to*.

3. To enable size, colour speccing of tables & cells*.4. To enable you to specify size, colour, font etc for CSS

styles*

+ more…

* This palette ‘changes’ it’s look depending on what you’re doing – i.e. it’ll look different if speccing text colours etc than when you’re speccing what size a DIV tag should be.



HTML Workspace

1. Ready and waiting for text / image content to be added.

2. Screen display of both the ‘WYSIWYG’ (what you see is what you get) screen AND the HTML code (Code | Split | Design ).

3. Displays the preferred ‘screen size’ in pixels, estimated download times etc.

The CSS Styles Palette

1. To enable and give a ‘quick list’ of preset ‘CSS’ text styles*.

2. To enable you to see ‘nested’ DIV layers(AP Elements). These are layers within layers I.e. the term ‘nested’..*

* We’ll be looking at these at a later date.


To create a new blank HTML document

1. Select ‘File > New’ in the DW menu, you’ll be presented with a screen asking what sort of document you wish to create.

2. Make sure you click once on ‘blank page > HTML’. 3. Click ‘Create’, a new blank document should appear on screen.4. Now we need to create an obvious working folder on your machine’s

desktop.5. Do this on the Mac by clicking once on your Mac’s background

desktop and then selecting ‘File > New Folder’.6. Click once on the folder’s ‘untitled’ text and call it (your first name)

and then ‘web-test01’.7. INSIDE this folder create 2x new sub folders [for later] “CSS” and

“images”


Creating basic text in Dreamweaver

• Click with your cursor once on the blank screen (not in the upper code section). Your cursor should just flash top left in the page.

• Now type in “this is some test text, no colour or spec at all”. It should appear in a black ‘Times’ sort of typeface.

• In the ‘title’ box at the page’s top type “ A test page by (add your first name).

• Now select ‘File > Save’ to save the document. Call the file ‘test01’ - DW should add ‘.html’ As you do this make sure that you save on the computer’s desktop in the (your named folder).

• You’ve just created your first web page - no design masterpiece though!



Testing the new web page in a web browser

1. Make sure that you can see your new file (in the named folder on the desktop)..

2. Click and hold on top of the new file (don’t let go).

3. Drag the new file on to the Mac’s Safari browser icon (blue, looks like a compass).

4. The browser should now start up and display your line of text (Mac Safari browser displayed as example above).

To create CSS-Specced Text

1. Get on to a new line in the DW document (put a ‘return’ in).

2. Type “This is some test text with colour and typeface specified in Cascading Style Sheets.” (CSS)

3. Position the cursor to the left of the new line of text, click and drag over the line so it’s selected/highlighted.

4. Now click the CSS icon in your ‘Properties’ palette. The palette should change to show new options.



1. Make sure that your type is still selected and then that ‘new inline style’ is showing in your drop-down box in the properties palette.

2. Now select font typeface in your properties palette [these are limited on the web]. Change font and size.

3. Now file > save your file

4. You’ve just changed your HTML web page to XHTML as you’ve applied a CSS Style to the text object!



1. Now drag and drop your file [as before] on to safari to see it in it’s full!


Copying text from another document to an HTML document

1. Open a suitable web page in Safari with text in it.

2. Drag across and select the text.

3. ‘Edit > Copy it’.

4. Click back into your DW page click your cursor where you want to copy the text into and ‘Edit > Paste’. The text should flow in to the web page. [If the text doesn’t show in DW then you may have to copy it into a text application first like Apple’s ‘Text Edit’. Then select and copy once more into the DW page].

N.B. Copying from ‘MS Word’ documents is common too but sometimes results in text irregularities [characters that word understands but Dreamweaver thinks is ‘Serbo-Croat’. Double-checking text copied is always important in these cases!


Inserting images into the page (1)

• Images are normally stored in a separate ‘images’ or ‘media’ folder (you set one up in readiness earlier)..

• This means that a page with many images displayed will haveAll of it’s constituent images stored in one convenient folder.

• Forget to do this and your website (and computer) can easilyBecome a ‘sea’ of unrelated (an non displaying) files!

• Now make sure that you download the test image off the Gdes2000 timetable page (today’s slot) and pop it into your ‘images’ sub folder.


Inserting images into a page (2):

1. Go back into your DW page, click below all of the text you’ve already created.

2. Now select the square ‘tree’ icon in the DW insert palette’s drop-down menu. A window appears asking you to locate your desired image. Do so by locating and selecting your test image in the ‘images’ folder you created.

3. Once done click the ‘select’ button bottom right. DW will now ask you for any ‘ALT’ text..

4. The image should now appear in the DW document where you left the cursor flashing.

5. Save the DW document and preview in a browser.

6. The text you see in the image is a way of displaying dynamic-looking text within your web page.

* See Public > Gdes2000 > Session02 > refs for pic, drag it into media folder.


Documents

Gdes2000 Graphic Design for Internet & Multimedia An Introduction to Dreamweaver CS5 + Adding Text Overview of palettes and DW working environment. Creation