Presentation on theme: "Gdes2000 Graphic Design for Internet & Multimedia An Introduction to Dreamweaver CS5 + Adding Text Overview of palettes and DW working environment. Creation."— Presentation transcript:
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. Gdes2000 Graphic Design for Internet & Multimedia
The Basics: Insert, Properties, Blank HTML page and CSS Styles palettes. Gdes2000 Graphic Design for Internet & Multimedia
The Insert Palette 1. To add a new page link to a web page 2. To add a new clickable e-mail link to a web page 3. 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. Gdes2000 Graphic Design for Internet & Multimedia
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. Gdes2000 Graphic Design for Internet & Multimedia
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. Gdes2000 Graphic Design for Internet & Multimedia
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” Gdes2000 Graphic Design for Internet & Multimedia
Creating basic text in Dreamweaver 1.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. 2.Now type in “this is some test text, no colour or spec at all”. It should appear in a black ‘Times’ sort of typeface. 3.In the ‘title’ box at the page’s top type “ A test page by (add your first name). 4.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). 5.You’ve just created your first web page - no design masterpiece though! Gdes2000 Graphic Design for Internet & Multimedia
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. Gdes2000 Graphic Design for Internet & Multimedia
To create CSS-Specced Text 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! Gdes2000 Graphic Design for Internet & Multimedia
To create CSS-Specced Text 1.Now drag and drop your file [as before] on to safari to see it in it’s full! Gdes2000 Graphic Design for Internet & Multimedia USEFUL NOTES Text can have a separate controlling CSS file, design and structure can have a separate CSS file too. The technical name for these is “external style sheets”. Once set up then you can keep adding any new text specs to these. Keeping all this information outside of the web page itself and just ‘linked’ to it keeps the amount of code in the web page as least complexed and as small as possible. This means simpler, quicker to load web pages. We’ll look at external style sheets again in more detail later in the module. USEFUL NOTES Text can have a separate controlling CSS file, design and structure can have a separate CSS file too. The technical name for these is “external style sheets”. Once set up then you can keep adding any new text specs to these. Keeping all this information outside of the web page itself and just ‘linked’ to it keeps the amount of code in the web page as least complexed and as small as possible. This means simpler, quicker to load web pages. We’ll look at external style sheets again in more detail later in the module.
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! Gdes2000 Graphic Design for Internet & Multimedia
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 have All of it’s constituent images stored in one convenient folder. Forget to do this and your website (and computer) can easily Become 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. Gdes2000 Graphic Design for Internet & Multimedia
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. Gdes2000 Graphic Design for Internet & Multimedia