Transcript Document

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
Gdes2000 Graphic Design for Internet & Multimedia
1.
2.
3.
4.
Make sure that you’re logged in to an individual Mac.
Locate the green “Dw” icon in the Mac button bar.
DW should now start up. If it hasn’t been used before on the
machine it will offer you a ‘tour’ and summary.
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.
2.
3.
4.
To specify HTML text styles, sizes, colours, alignments, bold,
italic etc.
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*.
To enable size, colour speccing of tables & cells*.
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.
2.
3.
Ready and waiting for text / image content to be added.
Screen display of both the ‘WYSIWYG’ (what you see is what
you get) screen AND the HTML code (Code | Split | Design ).
Displays the preferred ‘screen size’ in pixels, estimated
download times etc.
Gdes2000 Graphic Design for Internet & Multimedia
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.
2.
3.
4.
5.
6.
7.
Select ‘File > New’ in the DW menu, you’ll be presented with a screen asking
what sort of document you wish to create.
Make sure you click once on ‘blank page > HTML’.
Click ‘Create’, a new blank document should appear on screen.
Now we need to create an obvious working folder on your machine’s desktop.
Do this on the Mac by clicking once on your Mac’s background desktop and
then selecting ‘File > New Folder’.
Click once on the folder’s ‘untitled’ text and call it (your first name) and
then ‘web-test01’.
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.
2.
3.
4.
5.
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!
Gdes2000 Graphic Design for Internet & Multimedia
Testing the new web page in a web browser
1.
2.
3.
4.
Make sure that you can see your new file (in the
named folder on the desktop)..
Click and hold on top of the new file (don’t let
go).
Drag the new file on to the Mac’s Safari browser
icon (blue, looks like a compass).
The browser should now start up and display your
line of text (Mac Safari browser displayed as
example above).
Gdes2000 Graphic Design for Internet & Multimedia
To create CSS-Specced Text
1.
2.
3.
4.
Get on to a new line in the DW
document (put a ‘return’ in).
Type “This is some test text with
colour and typeface specified in
Cascading Style Sheets.” (CSS)
Position the cursor to the left of the
new line of text, click and drag over
the line so it’s
selected/highlighted.
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!
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.
Gdes2000 Graphic Design for Internet & Multimedia
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’. Doublechecking 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.
2.
3.
4.
5.
6.
Go back into your DW page, click below all of
the text you’ve already created.
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.
Once done click the ‘select’ button bottom
right. DW will now ask you for any ‘ALT’ text..
The image should now appear in the DW
document where you left the cursor flashing.
Save the DW document and preview in a
browser.
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.