Comprehensive Introductory Tutorial to
Contents
1. Dreamweaver Workshop Home dreamweaver index Seles ia File Edit View Insert Modify Text Commands Site Window Help lt gt 2 E SB tite Dreamweaver Workshop Hor g C lt 2 0 1E aL SLs Common Layout Text Tables Frames Forms Templates Characters Media Head Sorp Applian RES ARIBR OSOSSS SHR QA 10 Entering Text The main part of the web site will consist of text passages These can be typed directly onto the page or can be copied and pasted from other documents Formatting of the text follows much the same rules as that of a word processor As mentioned earlier there are a few instances where HTML coding tends to break through and a very basic knowledge of some simple text formatting terms are needed Simple Text Formatting Tags HTML tags are how the computer interprets how web page elements should appear The following are the main html text tags Paragraph standard Heading 1 largest Heading 2 Heading 3 and so on to Heading 7 smallest Other common text formatting is very similar to regular word processing bold italics bullet points etc and is controlled using buttons on the Properties window hilli P a ine T Foma A Deamon v Ske None vL OB wO U OUO ae la a tii d be The font sizing differs slightly from standard word processing As with the Headings sizes range from 1 to 7 The drop down menu controlling font size lists the following options The sizes2. Close any of the newly created Dreamweaver documents that may be open and leaving the index htm open so we can add the links According to our flowchart we will be linking to four pages from the index htm page We will first arrange the links as a simple list On the open Dreamweaver document type the following four lines pressing Shift Enter at the end of each line Dreamweaver Tutorial Page 1 Dreamweaver Tutorial Page 2 Dreamweaver Tutorial Page 3 Dreamweaver Tutorial Page 4 Remember using Shift Enter forces each new line to begin directly under the previous one Using Enter alone will insert a blank line between each line of text Macromedia Dreamweaver MX Dreamweaver Workshop Home dreamweaver index File Edit View Insert Modify Text Commands Site Window Help lt gt de ZE BZ Title Dreamweaver workshop Hor Jt C lt 47 gt iE Common oat od 3 wea jee Dreamweaver Tutorial Page 1 Dreamweaver Tutorial Page 2 Dreamweaver Tutorial Page 3 Dreamweaver Tutorial Fage 4 ty indes lt body gt lt p gt lt hont gt THH DDE y G4 118 sec Format Arial Helvetica san se Size None we T H J Li BO Tas i 35 ES lay I List ltem 25 Highlight the first entry on the list Dreamweaver Tutorial Page 1 Drag the Properties palette to a prominent position Click on the folder icon to the right of the link text box X Properties Form
3. 14 Inserting Images The next step in the development of the web page is the insertion of images The images you wish to display on your web page should have already been saved to your project root folder As stated they should be either gif or jpg format as these have been optimise for use on the Internet Other image formats such as bmp are too large for web pages and software specific graphic images such as image psp Paint Shop Pro or image cdr CorelDraw drawing need the software installed on the computer trying to view the image Click on the Insert Image button on the Insert toolbar Macromedia Dreamweaver MX Dreamweaver Workshop Home dreamweaver index h alx a lt gt E tite Dreamweaver Workshop Hori Of C lt gt 0 E Common Application EA pace Vase Bees a ala A D red Select Image Source f Select File Name From File system Working O Data Sources This 1S an g tis aimed Leak in Q 2 em MRN 3 _notes ch ieexplore smallcat3 ci bigcati linkhome m smallcat4 m bigcatz bigcat3 5 eer m bigcat4 m smallcati index Cc emailimage Cc smallcatz tbody lt p gt lt Fonts p i Files of type image Files gif ipg jpeg prng UAL Images mycat jpg Relative To indes Preview Images Select the correct folder to Look in and then select the image mycat The Preview Image option allows you view the image highlighted before it is inserted deta
4. The Properties Panel The Properties panel can be expanded in the same way as panels on the right The default state of the panel is the expanded state The bottom portion of the panel appears blank initially but as more elements are added to your web page the relevant property boxes will appear On the bottom right hand corner of the Properties palette there is an inverted triangle To toggle between the expanded collapsed states of the Properties panel click on this triangle The Common Objects Toolbar Earlier versions of Dreamweaver had an Objects panel This panel is now embedded as a toolbar at the top of the Dreamweaver workspace It forms part of a tabbed toolbar which enables the user insert many elements into the web page We will use the Common tab only Defining a Project We define the project to ensure that all the elements of our site are kept in the correct folder s It is not absolutely necessary to define a project but it is good practice and as the site becomes larger and as images especially are included on the site it is important that all files are kept in a central location for the site to work properly Dreamweaver MX helps in this process only when it has a project defined We will create a folder dreamweaver as our Root Folder This folder will contain the images and other items we will be using on our page It will also be the first port of call for Dreamweaver when looking for files and when referring to ou
5. We will colour Macromedia Dreamweaver dark green Select Macromedia Dreamweaver Click on the colour palette on the Properties panel The square with the inverted triangle in the bottom right hand corner Foma sme BZ Mpi li lil E 13 9 Macromedia Dreamweaver MX Dreamweaver Workshop Home dreamweaver inde Sel Dreamweaver Workshop Introduction Working with Macromedia Dreamweaver THIS 1S an exercise In working with WeweneeriBECE UNEEN tis aimed at the first time user a toneen0 inde tbody lt p gt lt font lt Font Ve 1K i1sec eA Faragraph B Arial Helvetica san w Size Mone w JM 006600 E Fd ia MOA ii hil The colour of individual letters within words can be changed in this way also To remove a colour highlight the word or character and click on the white square with the red diagonal line This resets the colour to the default black To view more colours click on the small colour wheel The default colour palette is a collection of web safe colours this means that regardless of the computer type or web browsers these colours should look the same The colour wheel allows a much greater colour selection but these colours may not be web safe and may vary from computer to computer or on different web browsers Other font formatting options are available such as alignment bullet points and indentation Remember to save your work regularly click Save on the File menu
6. AUOMMCIN seseina EEEa eO EAE e iei 21 Previewing Testing your Web Page cccccssccccssssceceesseeeceasececeaeeeeseuseeeseaeeecsauseeeseageeessaueeessanes 22 Hoor nE a ENK oeren east cae tree cen dence eects ee vciese see eec sta lcaredetecaneesee sue oeeeesasees 23 Creating a New Page sees geass eticeats Solis Sarees eine ds Senn ee a are cove vane cd cameo ee eee 23 TS LN Scenes E ars came sce esas ee asec dass eeeepeeeete sees enesanences 25 LINK COLOU Ss se etc este bao ens ntti rcs dc denice dane wie vc etter es ater eeantaarte dd nts 27 MaC Bi 0 lt n ee ee ee E eee ee ee 28 Links within OC i ia ere a ine a slo ngs oes ae eck we EARRAS ESEE EEN 30 Inserting the anchor cccccssscceccssseeccasseecceseeecsececsageeecsauseeeseaseeecsageeecsaueeecsauseessaseeessageees 31 Links to External SIC dai cous nceiccetossnnscennsatiticsesicniensn sndeinteessactanwedeuxensiy lt euudetiesanceeueducwsesieueesingsceuaes 32 Links to E mail addresses eee ee ee eee en ee 33 Links to Zipped BCS isone eae a E E e E aE Eea EE E N 34 Dreamweaver MX DREAMWEAVER Dreamweaver MX contains a wide variety of new features Dreamweaver MX also now includes all of the application development features of Dreamweaver UltraDev 4 This makes Dreamweaver MX an ideal web site creation tool for the beginner and expert alike The new elements of Dreamweaver MX necessitated a new layout structure for the programmes Gone are the floating palettes and yo
7. are referred to as either Absolute or Relative Absolute Values PProximate Equivalents 1 HTML 8 point 2 HTML 10 point 3 HTML 12 point Dreamweaver Default 4 HTML 14 point 3 HTML 18 point 6 HTML 24 point 7 HTML 36 point Relative values are very similar to the Absolute Values The plus and minus signs to indicate how much bigger or smaller the text will be with respect to the default font on the users computer The computer font size is set when an operating system is installed and it controls the font size in all the applications on the computer Some computer owners will either increase or decrease the default font size to suit their needs e g Many Special Educational Needs classes schools will increase the default computer font for ease of use in the classroom Note Regardless of whether Absolute or Relative values are used it is important that there be consistency and the either one or the other is used exclusively throughout the web site 11 Page Heading Type the following on the blank document Dreamweaver Workshop Introduction To format the text highlight it by dragging the mouse pointer over the relevant section Alternatively move the mouse pointer and click so that the flashing insert bar appears within the piece of text On the Properties window select one of the Heading sizes form the Format drop down list Remember Heading 1 is the largest while Heading 7 is the smallest The f
8. difficult to enter text or an image in the cell If this happens click inside the cell with the image Use the tab key to move to the next cell The insert bar will appear in the next cell regardless of the width of the cell To assign a width to a cell the cell must be active that is the flashing insert bar must appear in the cell Either click inside the cell or use the tab button to move the cursor inside the cell Format Default Font ty Size None w None ve Fo H J eS Ta J Seje teepee v tow eof_ _____ 9 mr maji Yen H Header Eg Pi O Z Erdr FIL PRA i Mi li Mil To align the cell contents click inside the cell and click on the Horz dropdown menu selecting the left centre or right alignment option Cells are aligned independently of each other where one can be aligned left and the other aligned right The cell height property is not supported by Netscape Navigator 4 or earlier so this option is generally not used 19 Managing Tables It may happen that new cells are required in a table Dreamweaver allows existing cells be split to create new one Click inside the cell to be split Pat i gt aa Format Default Font WF Size Mone sy C u E zp a ee __ JG GE ver Derw v HL Header ea Pf er Click on the Split Cells into rows or columns button In the Split Cell dialogue box select Columns and 2 Click OK Ht li Miil p Fan Split Cell Split Cell Into 1 Rows OK Cancel
9. effort to ensure you have your files stored in a single folder for the purpose of creating your web site before you begin work Choose Local Root Folder for Site TeachNet fx TE Teach et wie 3 T Desktop My Documents H My Computer HA 38 Floppy A s Local Disk C O Documents and Settings 4 TeachNet Sa Removable Disk D p OYO Drive E bs CO Drive F ag Shared Documents O Gary s Documents D Greg Gilligan s Documents O My Documents E My Network Places Share to web Upload Folder dreamweaver Select Once these two basic pieces of information are in place click OK We have now defined our site and can progress to the next stage and begin work on our first web page Creating a Basic Web Page Using a software package such as Dreamweaver to create web pages eliminates the need to know HTML coding but it is handy to have a basic understanding of some of the terms used when writing HTML code as they may pop up when creating our pages HTML is the language in which most web pages are now written Like all technology related material it is constantly being updated and changed but certain elements remain constant and are common to all web pages and web sites Web pages are files that have a particular extension which tell a computer to display them using a web browser Web pages normally end with either htm or Atml which are both equally valid You must decide at the
10. view Visual Aids Hide All Ctrl ShiFt 1 Code View Options b i w Table Borders Rulers w Laver Borders Grid Frame Borders Tracing Image w Image Maps Plugins w Invisible Elements Hide Panels Toolbars The next step is to link the text at the bottom of the page to the anchor 31 Highlight the text Back to the Top and type followed by the anchor name into the Link box on the Properties dialogue box Format Paragraph Arial Helvetica san ve Size None PE H J a z S pD te vessa 5 When linking to another part of the same page the link will be of the form anchorname Examples Anchor Name Link Name top top bottom bottom image image Save your work preview the page in your browser Links to External Sites Creating a link to an external site works in exactly the same way as internal links but with a couple of extra details that need to be entered in the Properties palette The reason for the table with three cells now becomes apparent To create a menu bar of links we use a table of 1 row with multiple columns This menu bar will eventually have three links but a menu bar can have any number of links across a page within reason e Click inside the last of the three cells and insert the Internet Explorer or Netscape Navigator image from the images folder ieexplore gif or netsnav gif align the image to the right and enter the Alt text for your logo e Click once on the image and make sure
11. Highlight the word E mail and follow the same steps 33 Fomat Paragraph vA see noe v BF Ra mailto yournamem server com wt el Target O w F Horz Defaut w wax Nowrap Bg SDB jt ver Bororw H Header Ba A Bea rO x li M line be Save your work and preview your page F12 Click on the E mail link to launch your e mail software Links to Zipped files If you wish to allow users download resources that have been developed as part of your project it is possible to create links which when clicked allow the user save a file to their computer However it is important that files be as small as possible to facilitate most Internet users who do not have the luxury of high speed Internet access The standard form of presenting files for download is to compress them into what are called zipped files There are a number of File Compression software packages available the most popular being WinZip This and other compression utilities are available on the Internet Most are Shareware this means you may download them freely and evaluate them for a fixed period At the end of the evaluation period you should either buy the software or uninstall it from your machine ZipCentral is freeware and is available at http zipcentral iscool net Open page2 htm in Dreamweaver MX e Give the page a heading H2 Dreamweaver Tutorial Page 2 e Insert the image bigcat2 jpg e Click to the right of the image and pres
12. Macromedia Dreamweaver MX User Manual Table of Contents Macromedia Dreamweaver MX cccccccccccseecccceeeccecseeceeceueceeceeeecesseseceesseeceesseeeeesseeceeseeeeeessueeeetsaaes 1 User Manual isndiidconhadieSensmduhasanadund hasaditeraatinsela bodied cdidanduntdssmaibcsuneinmaraenataehaamnaiiadancon dedanttdadi aentuntneamas 1 Table of Contents ac neropscs eect nce edad inais E aas ia nip EANA 1 Launching Dreamweaver MX cccccccccccceeeccecesecceceeeceeeeeeceeeseeceesauseeeesueeeeessueeeessueeesseecessaaeeeesaaeees 2 DED POOE oe E E EE er ee eee ree 6 Creating a Basic Web Page ccccccssccccssssecceeseeeceasececeauseeeesaseeeceaeeecsauseeeseaeeeseauaeeesauseeessageees 8 Configuring the Dictionary Setting ccccccccccccccceseccecseeceeeeseceeceeeceeseeaecesseaeeeesseeeeeseeeeeseees 8 Giving a Name and Title to your Web Page 2 00 eccccccececceceeeceecaeeeceseeeeceesaaeceesaeeeeesaneeensnees 9 EEE TE E E E E E E 11 Page HeadiNo oeer ee E Ea 12 inserane MAG CS ara EEE EEE EE EAE 15 Image Properties eee eee ne deen ee oe ee ee eee 16 Usima TA LCS ace cost eee ate ee sme eesance E dn aeetceies ceeadsaseedatenesedcasseeweessdepecsesiee 17 Basie TAS Ss der eset tee a Geen cor ones oct nen oc oe et cece cc pedicels ccs ase die pnp ecie tinea eee 17 Managing Tables swices coisencatcaentececistexcnsdawedosudewenass au deasundeueiols ddd ewwesicinedneedelawenedacadnnedaesndesedeebeuedaneliek 20 Cell Sp c ing and
13. Number of Columns The new cell may not be visible To view the cell press the tab button This places the flashing insert bar in the new cell Use the Insert Image button on the Tools palette to insert a third image in this cell and align it to the centre ilil HUI E Format None v DefautFom w Size None w i BZ bik Tats i 35 arj o Hore Defautt w w sx Nowa e IC E jg vef HO Header C Bo OOOO ea E L TE la M ik ih Split the last cell as already outlined and insert a fourth image in this cell You will notice that the width setting for the cell which was set at 50 is now 25 in each of the new cells The merging and splitting table cells tool is a very useful when laying out a web page However repeated splitting merging will sometimes produce unexpected results This is due to the underlying html code As a cell is split or merged the html code is altered to accommodate the change As more code is added a conflict may arise when the code becomes too complicated for the browser to interpret properly With this in mind cells should be merged or split very sparingly and the layout of a page should be planned using a pen and paper before starting work with programmes like Dreamweaver MX 20 Cell Spacing and Alignment To space the cells evenly each cell can be given either an absolute of relative width It the Table has been set at a pixel with easily divisible by the number of cells this figure
14. Readme Tutorials lt Properties Update Panel Click Update to connect to Format A Default Font wy Size None w ET L J __ H J macromedia cam and get the latest List Iter The workspace layout of Dreamweaver MX differs from earlier versions of the programme The floating panels are now docked to the bottom and right of the screen The panels on the right are collapsible Clicking on the triangle symbol to the left of the panel name will either expand or collapse that menu lt Design Code New File Ctrl Shift h lt Application Mew Folder Ctrl Alkt ShiFt N Files Open Site Save Site Map Files Edite Views Site Rename C tinjo ae Turn OFF Read Only Edit Sites Local View Preview in Browser m ino site defined Check Links shift F amp Define a Sike Design Hotes Ej Desktop Exit Ctra Help Group Site with All palettes can be closed by clicking on the small menu icon to the right of the palette name and then selecting Close Panel Group from the menu As the panels can be minimised there is no need to close any of the panels For the purposes of this tutorial we will focus on the Files panel only The Properties palette has not changed much in appearance from Dreamweaver 4 It will play a very important part in the development of your web pages and should be left open X v Properties roma nore v A DeiatFom v Seeitne v B wO U O OO l Mhl
15. Untitled 1 a File Edit View Insert Modify Text Commands Site Window Help lt gt E amp te unttieddoumen Jgh C lt 9 0 E amp ot Untithed 1 lt body gt 5614 171 E i Link li Wii The dialogue box places Untitled Document in the title text field by default Type the Title of your page here It can be a short phrase that describes the content of the page 9 Here the Page Title has changed form Untitled Document to Dreamweaver Workshop Home lt gt g EE BZ tie Dreamweaver workshop orl Og C lt a gt 0 E BAS Common RES BR BB Oses SORQE The Untitled 1 refers to the fact that the page has yet to be saved The File Name It is good practice to regularly save files as you work on them To save your file click File gt Save As with all Windows applications when first saving a file the Save As 7 al A dialogue box opens d E i Save in ORE Enter the file name index in the File name text box The extension by default is htm so we do not need to enter that part of the file name Make sure you are saving the file to the Dreamweaver folder File name The filename should be Save as type All Documents htm html sht shtmlh lowercase one word and not include any punctuation marks Click Save when finished The title bar should now display the file and folder name A Macromedia Dreamweaver MX
16. at A Default Font w Size li Mh Link The dreamweaver folder should open by default as we set it as Select File Name From File system aur nook elder when Data Sources defining the site If not use the Look in drop folder Select File Click on the file page1 and click the OK button Heraa pena Files of type All Files Ww o Cancel UAL i Parameters Relative To Index On the Properties palette the Link text box should now display the following page1 html Click on the document to remove the highlighting form the text and you will see that the phrase Dreamweaver Tutorial Page 1 has changed in colour and is now underlined Dreamweaver Tutorial Page 1 Dreamweaver Tutorial Page 2 Dreamweaver Tutorial Page 3 Dreamweaver Tutorial Page 4 v index tbody lt p gt lt font lt a gt Tt 308 y 64K I 18 sec lt Properties Format Paragraph 2 Arial Helvetica san Size Mone d Link pagel htmil wt eC Target a n List tem FA 26 2 ly Ut Link Colours The default format for unvisited text links is a blue underlined word or phrase Links are referred to as being in one of the following three states each having a default colour Links unvisited blue Visited purple Active red These colours may differ on your computer due to a variety of factors such as customised browser settings where a user has made changes to how the bro
17. can be used A table of 400 pixels would have four cells of 100 pixels each The other option is the relative size Unlike using relative table width settings which are relative to screen resolution the relative cell width settings are calculated as a percentage of the table width not the screen resolution On a screen with a 800x600 resolution a cell with a 25 width setting in a 600 pixel table will be 150 pixels 1 4 of 600 wide not 200 pixels 14 of 800 To space the images equidistant from each other we will apply a relative cell width Here we will use the 25 width setting for each cell Click on the first image in the table the image in the cell on the extreme left Once selected the three black handles appear towards the bottom right of the image and a heavy black border also appears In the Properties window the cell properties are listed In the W text box type 25 The height of the image will determine the height of the cell and table the H text box can be left blank Centre the image using the Center option from the Horz drop down menu CS Foma See none v LOOO B 7 wO O OOD Te g ZE Cell Horz Center W 5s Mo wrap F Eg L t CSCSstsSC Yt gim F Cage ver petau s H Header Bo 3 lewn x li M linn Repeat this for each cell You will notice that as you click from one cell to the next the cell borders automatically re size to conform to the new width settings A table border of 1 has bee
18. differentiate between projects After entering the name of your site we will switch to the Advanced Site Definition window The Wizard asks a series of questions each in a new window While the Advanced window has many more options for defining a site we only need concern ourselves with the basics of the site name and the location of the site or Local Root Folder The Site Name will appear as entered on the pervious window This can be anything to describe your site It will not appear on the Internet it is simply there to help Dreamweaver recognise the project and all associated files when you are working on your site It also enables Dreamweaver keep track of different projects and remembering the settings for each Site Definition for Teachtet Sate Harte Local Aot Folder CW ecunerts and Seling T eschen De Refresh Local Pile List Automatically Delit mapat Fadar HiT TIP Adie hipi Tiet siatt enables the Link Cheacke bo detect HTTP F s thal rede to pour pan te Cache Enable Cache The cache maniare Gls are arbi riomaton in the ste This speeds up the Arha paral ink manker a mia Man iair The name and position of the folder the Local Root Folder into which you have placed all the relevant files needed to develop and publish your site It is important to note that while defining a site helps reduce the possibility of files being lost in the transfer from your computer to the web server you should make every
19. er text or an image as the link To link from the bottom of a page to the top e Type the following at the bottom of the Dreamweaver Tutorial Page 1 page Back to the Top and align it to the right using the text formatting buttons on the Properties Box e For the link to work there must be something an anchor to which the link will point To insert the anchor we need to change the Insert gt Common toolbar The position of the flashing insert bar determines where the anchor will appear Scroll to the top of the page and click just to the left of the phrase Dreamweaver Tutorial Page 1 30 Inserting the anchor Click on the anchor icon and type a name for the anchor in the dialogue box Common Named Anchor Anchor Mame Keep the name a simple single lowercase word eg top Click OK to insert the anchor The anchor should then appear as a yellow symbol H The anchor may not be visible To view hidden invisible page elements click on View gt Visual Aids gt Invisible Elements Macromedia Dreamweaver MX Dreamweaver Tutorial Page 4 dreamweave a File Edit SVE Insert Modify Text Commands Site Window Help q gt geg Soe race d Lah i C lt p hE E Ia P r e Ta w Design x coi bese Template Characte Media Head Sort Appt amp E ath Switch Views Ctrl a fa Refresh Design view FS Live Data trl Shift R Live Data Settings Head Content brl ShiFt yy Moscript Content Table
20. er the border X Properties U ciel whas Sre imagestmycatipg i AL MyCat Hiss unk IES Map OoOo V Space Target Border The alignment buttons allow you align the image left centre or right All images on a web page should have Alternative text accompanying them This is of particular importance to text only browsers or text to speech browsers as used in many Special Educational class situations The Alternative text or Alt text is displayed in place of the image in certain cases The Alt text can be a word or phrase The remaining image Property elements controls more advanced options and are not covered in this basic course 16 Using Tables We have added the two basic web elements to our page text and graphics We will now look at how these elements can be aligned on the page HTML does not allow tabs or columns on a web page Tables allow us get around these restrictions and Dreamweaver makes the insertion of table relatively simple Basic Tables Click on the Insert Table button on the Insert toolbar Common 82d EDE PERL ERI PEIEE The insert Table dialogue box allows you configure how the Table will appear The meaning of Rows and Columns are self evident 1 Row by 2 Columns will create a Table of 2 cells 2 across and 1 down Cell Padding refers to the amount of space between the cell content and cell wall Cell Padding of zero means that the cell content will sit flush against the cel
21. finished viewing the page CLOSE the browser window as this page is only a temporary copy of web page on which you are working Dreamweaver Workshop Home Microsoft Internet Explorer File Edit View Favorites Tools Help ZZ Jl O se l al amp _B T a x a ie A Search Favorites EA Media g2 T ep Address C Documents and Settings TeachNet Desktop dreamweaver TMPsxtikbgz0m htm ka Go Dreamweaver Workshop Introduction Working with Macromedia Dreamweaver THIS is an exercise in working with Macromedia Dreamweaver tis aimed at the first time user H My Computer The layout of a web page can be dramatically enhanced using tables not only in the placement of images on a page but also the manner in which text can be displayed Tables are commonly used to present Links in a grid format It allows the user easy access to a variety of linked web pages without having to scroll up and down a long list of hypertext links The next section deals with how to add links to your web page Click File gt Save to save your work 22 Inserting a Link A common mistake made when creating web pages is to insert a link to a page that does not yet exist It is important that you have a definite plan as to how pages within the site will be linked A helpful guide is a flowchart where you can visualise how the individual pages are linked We will use this simple flowchart as our guide indez_html nT a pagelhtml page html page t htm
22. he following is a brief descriptor of each lt table gt The table tag for the overall table Clicking on this will highlight the table outline T The table row tag to highlight the row of cells in which the flashing insert bar is currently sitting lt td gt The table data tag to highlight the individual cell into which data is placed 18 Click on the lt table gt lt tr gt lt td gt tags to view the changes Click inside the first cell and insert an image Click on the Insert Image button on the Objects window and then highlight another image from the folder click Select A Macromedia Dreamweaver MX Dreamweaver Workshop Home dreamweaver index g File Edit wiew Insert Modify Text Commands Site Window Help lt Ge gt EE E Title Dreamweaver Workshop Hor Mt O a7 1j E Common ix ZHE f Sagl SFEER E FSIE EE index lt body gt lt table lt tr gt lt td gt 444 308 35K 1 10 sec Format Nove A DetautFont v See None v O IB ik Ta EE cea Hor Derauk we wO owe O SE aaj 5 ven Dera e H Header eo OO er i hy III la M lay i Me The table height has not been set and is stretching to facilitate the images It is a good idea to set the width of the cells as the unoccupied cell may seem to disappear when a large image or amount of text is placed in the first cell What has happened in a case such as this is the second cell has contracted to a width of 1 pixel This makes it
23. hile most new Internet browsers will accept URLs of the form www website com in the address bar you must add the http when inserting a hyperlink in a web page A common reason for broken links is an incorrect form of a URL These are case sensitive and are unforgiving of spaces or the insertion punctuation where there should not be any Make sure that you have the correct address by checking on line that the address actually works If you see a web address written in a magazine or book it may not be correct check it Save your work Links to E mail addresses A link to an e mail address takes a slightly different form to that of web pages A link that allows users e mail questions or comments to you is an essential part of your web site Such links can be from simple text or an image just as with links to web sites To add an email link e Click inside the first of the three cells on our table and using the Properties palette insert the image emailimage gif and add the Alt text Contact Us e Align the image to the left e Click to the right of the image and press Enter Type the word Contact Us e Click on the image again to highlight it and in the Link text box on the Properties panel type the following o mailto yourname server com this is a fictitious address but it will work when you preview the document Replace with your own address when creating your own web site o note do not enter http it is replaced by the mailto e
24. i lsec Format A Default Font w Size TERE EE wT e H J gt eS 1 local items selected totalling 1560 byte la M lay hi Add a heading H2 to the blank page and insert the image bigcat1 jpg stored in the images subfolder within the dreamweaver folder e Click on the Insert Image button on the Objects palette e Select the file bigcat1 gif from the images folder e Add the Alt text Large image of the cat using the Properties palette 28 After inserting the image press Enter and insert a table e Click on the Insert Table button on the Objects palette e Insert a table of 1 Row and 3 Columns with a width of 75 0 border O cell padding 0 cell spacing e Using the Properties palette give the cells the following widths 33 34 33 total 100 Click inside the middle cell and insert the image linkhome gif add the Alt text image of house for link to homepage centre the image using the alignment buttons on the Properties palette When centred click inside the cell once again and the flashing insert bar should appear to the left of the image Press Enter once and type Home lt Macromedia Dreamweaver MX Dreamweaver Tutorial Page 1 dreamweaver page1 ay File Edit wiew Insert Modify Text Commands Site Window Help o E amp tee Dreamweaver Tutora Page 10 C lt 0 5 H se Common Files Edite Views Site a Q it B 0 El io Site TeachNet C Documents ar gt images Zi
25. iling the image dimensions format and file size with an estimate of how long it will take for the image to download Click OK when you have decided on the image to be inserted 15 A Macromedia Dreamweaver MX Dreamweaver Workshop Home dreamweaver inde Koef a File Edit View Insert Modify Text Commands Site Window Help lt gt ge E tite Ee toi C lt 0 E Common CS Fas Fae ai e T EE E ocenile Dreamweaver rae Introduction Working with Macromedia Dreamweaver hisis an exercise in working with Macromedia Dreamweaver tis aimed at the first time user index bodys lt p gt Font lt img gt B214 erly n BK l 2 sec iv Properties a wise Ste imagesimpestieg GOD ak w z ae w i oa Image Properties The image appears on the left of the page and the image properties are displayed in the Properties window The image can be resized on the page by clicking on one of the three handles on the right and bottom of the image This resizing stretches or reduces the image dimensions and changes are reflected in the W and H settings The original dimensions appear as plain text here 150 and 150 Changes in width and height appear as bold figures say 200 and 250 The image may appear distorted after the change To return the image to its original size click the Refresh button on the Properties window To add a border type a number in the Border text box 1 is a hairline border the higher the number the heavi
26. ine but also a new paragraph This is again an area where html coding is most evident Each paragraph is separated form the next by a blank line As it suits our purposes at the moment to have that blank line between the heading and the web page content we can use the Enter button We do not however want the text to appear as a heading so we select the text and change the Format to Paragraph on the drop down Format menu The font face will may return to Default again select the Arial Helvetica sans serif option to ensure consistency on the page The default size for Paragraph font is 3 approx 12pt The word None in the Size text box implies the default size 3 and can be left unchanged As with the Heading the absence of a colour again indicates the text will appear as black the default Now type Working with Macromedia Dreamweaver but do not press Enter This phrase will be Bold Highlight the phrase by clicking and dragging the mouse over the words Click on the Bold button once omat one v soe None vi Link Tea Target r ai l M lin E To begin a new line of text directly under the previous line without the apparent double line spacing press the Shift button and while holding the button down press the Enter button The flashing insert bar should now appear directly under the W of Welcome Type the following This is an exercise in working with Macromedia Dreamweaver It is aimed at the first time user
27. l paget html Here we have a link from index html to each of the subsequent pages and a reciprocal link back The second level pages will not have links to each other Initially the insertion of links can be a little confusing so we will keep the linking structure as simple as possible to begin with As you become more familiar with the software and the concept of linking pages you can then add the extra links As yet we have only created one web page We will now create four more We will then link to those pages from the first page we created Creating a New Page Click on File gt New New Document General Templates Category Basic Page Preview Basic Page gt HTML Dynamic Page gt HTML Template Template Page Library Iter Other T c55 C55 Style Sheets T JavaScript Framesets APRIL No Previews Page Designs Page Designs Accessible Description HTML document Make Document XHTML Compliant 23 Dreamweaver MX allows the creation of a variety of web page types We are creating a site using basic html documents Select Basic Page from the Category list and HTML from the Basic Page list Give the new page a title Dreamweaver Tutorial Page 1 for example and then click OK Save the new page using page as the filename Ensure the filename used is not the same as that of the images While it is not possible to have two files of the same type both have the same name there is nothing
28. l wall Cell Spacing refers to the space between individual cells Cell Spacing of zero means that there is in effect one wall between the cells Increasing the spacing is similar to putting two walls between cells and a cavity between them the greater the Spacing the wider the cavity The table width can be set as either an Absolute value or as a Percentage of the screen size Rows Cell Padding o viewing the page The example l shows a table width of 75 To set Columns Cell Spacing 0 this as an absolute value click on the Width drop down menu and Hel ioth select pixels Remember to Saden change the size as 75 pixels is too J o narrow The standard screen resolution for which most web pages are now written is 800x600 so setting the width greater than 800 will mean that people viewing the page may need to scroll over and back Also keep in mind that the scroll bars on the side of the web browser will reduce the width of the screen even further 700 pixels wide is probably the optimum size for a table filling the browser screen Insert Table The Table Border setting controls the border width A zero border setting means an invisible table border when displayed on the Internet Tables appear in Dreamweaver as a dotted outline when the border is set to zero 17 Macromedia Dreamweaver MX Dreamweaver Workshop Home dreamweaver index File Edit wiew Insert Modify Text Commands Site Window Help o E SE ti
29. lace of ib and c Minar Number of Histo Steps SO Insert Fomei loons ri psig Deiana e cea ae Select English British for the dictionary settings Click OK to close the Preferences dialogue box Giving a Name and Title to your Web Page All files on a computer must have a name When creating a word processing document the computer will always prompt you to give the document a name before closing the file if you want to save it The same holds true for web pages If the word processing is a story it will have a title The title will be something that reflects the story content The Children of Lir for example When saving the file there are some general rules which should be observed e Filenames should be kept to a single word e Do not include punctuation or spaces in the file name e Use lowercase letters only e No two files can exist in the same folder with the same name The filename unlike the title need not reflect the content of the story though it helps if there is some correlation between the two In the above example the word story could be used as the filename or if the story were written by a child storyjohn could be used So each web page needs a Title and Filename and it is important to remember the difference between them The Title Each web page should have a title This can be entered in the relevant text box on the toolbar at the top of the screen 3 Macromedia Dreamweaver MX Untitled Document
30. n added to highlight the realignment of the images within the table To align the table on your page select the table by clicking anywhere inside the table and selecting the lt table gt tag at the bottom left of the Dreamweaver window Once selected choose the desired alignment from the dropdown Align menu on the Properties panel F Table Id Rows 1 w CellPad 0 Align S fc fs CC CellSpace 0 Border tai tei BgColor BrdrColor a Fede ds Bgimage BO 21 Previewing Testing your Web Page To preview your web page select your preferred browser from the Preview Button menu It is good practice to test your pages in the main browsers as each handle certain html tags in different ways which may affect the final look of your page Click the Preview Button to open the page in your browser A number of options are presented in a drop down menu Select the Preview option The browser type listed will depend on whichever is installed on your machine as the primary Internet browser A Macromedia Dreamweaver MX Dreamweaver Workshop Home dreamweaver index a File Edit View Insert Modify Text Commands Site Window Help dh ae EE EF Title Dreamweaver Workshop Horr w SB C a iL E Gommon Templates E ae A Preview in iexplore Fiz h A EA Eh a GA i i Debug in iexplore Alt Fiz Edit Browser List Dreamweaver Worksho The page is now beginning to take shape When
31. ont face can also be selected JA Macromedia Dreamweaver MX Dreamweaver Workshop Home dreamweaver inde Selle z x m File Edit View Insert Modify Text Commands Site Window Help a E ae ZE g3 Title Dreamweaver Dreamweaver Workshop Hor Ai s E Common LEERE E R Dreamweaver Workshop Introduction index se B2lu2lf IK i lsec Link None Target I i n E 90 Ts Arial Helvetica sans sel Heading E Times Mew Roman Tim Courier Mew Courier md Georgia Times Mew Aa Verdana Arial Helvetica Geneva Arial Helvetica Edit Font List EAS lis UM li Wil Freformatted Here we selected Heading 1 as the Heading size and Arial Helvetica sans serif as the font face Arial is a windows font and its closest match on the Mac is Helvetica Where all three fonts are installed on a computer the first font listed takes precedence if the computer does not have the font installed the second font is then displayed and so on The size option is controlled by the Heading and the default colour for text is black To insert a second line of text click after the word Science and press Enter Note that the cursor moves down what appears to be two line spaces and that the font face and format are still the same 12 The double line spacing is explained as follows e Using the Enter button to start a new line instructs the software to start not just a new l
32. outset which form you will use and then stick to that for all your web pages Some web page editors allow you configure the software and you set one or the other as your default file extension Other software packages such as Microsoft Word automatically uses the htm extension so if you are using existing web pages check the file extensions and try and ensure all the pages on your site end with the same extension Dreamweaver 4 allowed you configure the filename extension This meant you could save files using a single word and the software will automatically add the extension While this facility is still available in Dreamweaver MX it is such a complex procedure that we will accept the default htm extension Configuring the Dictionary Setting Choose Edit from the workspace menu bar and select Preferences at the bottom of the list The Preferences dialogue box has a variety of options the only area of interest to us at the moment is the General option at the top of the list on the left Preferences Document Option C Show City Sate window on Startup Dipen Fikes in Hew incon Wann when Opening Aesi Fies Update Links when Moving Flex Fiompt Dhang fork pc E Showy Dialog when nperting Obsect Paral Farnia Table Editing Dndewed Update Pree n Borena Enab Dobie Bita nina Input Fag E dioe F Swatch to Plan F arsgraph After Heading Stahat Bat Allo Multiole Corpmcutien Spin Vakfa F Use lt etrong and came in p
33. ps H index html pagel html page html page html page html Ei Desktop Li gt indes pagel 1 local items selected totalling 1560 byte tbody lt table lt tr lt td gt Bore dod y 15F 4 sec ob Answers 9 To add a link e Click on the image linkhome gif e On the Properties palette click on the folder icon to the left of the Link text box e Click on the file index html and click the Select button e Highlight the word Home e Using the Properties create a link to the first page as detailed above Save your work and preview your page 29 2 Dreamweaver Tutorial Page 1 Microsoft Internet Explorer File Edit view Favorites Tools Help a yp Bac gt a a A Search gr Favorites a Media 2 T Sam Address C Documents and Settings TeachMet Deskkopidreamweaveri TMPbpmaebhoge htm we a0 Links 7 Dreamweaver Tutorial Page 1 i My Computer Click on the Home link to bring you to the first page If your font does not appear as it should i e reverts to Times New Roman highlight the text on the Dreamweaver document and select your font of choice from the Format Font drop down box Links within a Page Linking one part of a page to another section of the same page is a commonly used method of quickly getting from the bottom of a long web page to the top without having to use the scroll bars The links work in exactly the same way as linking to another page on the site using eith
34. r Project If we use a file which rests outside the root folder Dreamweaver will prompt us to copy it to this folder The name of the folder has no effect on the working of your web site but should make some reference the current project It is good practice to plan your web pages before attempting to create them Part of this planning should be the collection or creation of the image files you intend using Store these in your dreamweaver folder It is a good idea to create a sub folder for the images This helps avoid the confusion sometimes caused by having image files of a name similar to html files Any other relevant files should be placed in the folder as part of the planning process To define the project click on Define a Site in the Site tab of the Files panel Site Definition for Teachhet Site Site Definition File Edit Vie Site Editing Files 0M C te i a Ac gie in Macrona Cneanwenaved ROX it a collector of lies and lolders that comeipornds too webnte on d Serer What would you fice bo mame pour site IC ino site defined Define a Site Example MySite fi Desktop The Site Definition wizard opens by default Enter a name for your site The name you select should reflect the purpose of the site As with the folder name selected earlier this will have no effect on the final site and is only a descriptor used within Dreamweaver It is possible to define multiple sites in Dreamweaver and the site names help you
35. s Enter type Click here to download a sound file of a lion s roar e Highlight the line of text and click the folder icon to the right of the Link text box on the Properties panel e Open the zips folder and select the zip file lionroar zip then click the Select button 34 Macromedia Dreamweaver MX Dreamweaver Tutorial Page 2 dreamweaver page a File Edit View Insert Modify Text Commands Site Window Help Select File e Insert Select File Name From File system Data Sources wB ospr Ml lionroar File name Click Her PN or pe body lt p gt cfo UAL zips lionroar zip d Relative To page List Item 1 local items selected totalling 1560 byte 2 gt Answers e The Properties palette should now display the filename lionroar zip in the Link text box A Macromedia Dreamweaver MX Dreamweaver Tutorial Page 2 dreamweaver page2 a File Edit View Insert Modify Text Commands Site Window Help lt gt E 2 title Dreamweaver Tutorial Page 1M C lt 0 E BREE M eonen Lou Tet Tables Frames Fore Terpad haretel Meda Head Sorp pien HI bot Hiato e Hnn Files Site Assets File Edite Views Site Acvit reln El a Site TeachNet C Documents ar images zips index hkml pagel html pagez html pages html Click here to download a sound file of a lons roar l paged html Ej Desktop aa pane pane tbody lt p gt lt font lt a gt Far e239
36. t title on the window title bar The title will not appear anywhere on the page only in the Title Bar at the top of the browser window It is generally accepted that because hypertext links are underlined by default plain text ona web page should not be underlined You will notice that the text formatting buttons on the Properties palettes do not include an underline button To highlight a piece of standard text use either the Bold or Italics options instead Underlined text on a web page that was not written as a link will confuse the user they may think that the link is broken and will feel that perhaps they are missing an important part of your site as a result Image Links Images can also act as an anchor for a hypertext link We will add an image to each of the four pages which will link back to the first page Click on the page7 tab at the bottom of the workspace If the page has been closed simply double click on the page1 htm file icon on the right in the Files gt Site panel J Macromedia Dreamweaver MX Dreamweaver Tutorial Page 4 dreamweaver page4 Seles a File Edit wiew Insert Modify Text Commands Site Window Help A X _ amp g EE ae EET Sle wit a OO Sars _____ sasae on Site Assets Assets Files Edite Views Site Cc aal za H e i El Site TeachMet cae ar i images zips index htm r pagel htm mal pagez htrn J pages htm paged htm 1B Desktop lt body gt Boe 308 y 1E
37. te Dreamweaver Workshop Hor Og C lt 47 gt O E Common SE BREBBOOSE SOHR 9H Dreamweaver Workshop Introduction Working with Macromedia Dreamweaver This 1S an exercise in working with Macromedia Dreamweaver tis aimed at the first time user index lt body lt table gt THH n 308 y EK t2 sec el e M Pest a ia EgColor Brdr Color O la fr 4 Bgmae B After inserting the table click on the document outside the table and the heavy black outline will disappear and you will be left with the dotted outline of a two cell table Remember the dotted outline indicates a border of zero Initially the individual cell widths are set to 50 of the table In the case of four cells the split would be 25 etc The cells resize as content is placed within the cell Click inside the table and the note that the flashing insert bar appears inside one of the cells The bottom left corner of the workspace window displays a number of tags defining the table indes lt body lt table gt The tags only appear when the flashing insert bar is situated somewhere within the table If the mouse is clicked outside the table the tags will disappear from the list of tags These tags have been visible since we started our project but until now we did not have occasion to use them When working with tables they are very useful in selecting different parts of the table To help understand the role of these tags t
38. that it is highlighted the three black squares handles should be visible on the bottom and right edges of the image type the following URL into the Link text box on the Properties palette o http www microsoft com windows ie e Inthe Target options box on the Properties palette select _blank This will force the new web page to open in a new browser window leaving your website in the existing window This is common practice when linking to an external site 32 va G tT W oO El gt Site TeaachNet C Documents ar images zips index html pagel html page htrnl Hal pages html Ha paget html v m edon nse poe pea paar et tbody ctable gt lt tr gt td gt lt a gt lt img gt Sar s 239 20K 16 Sec image 3K whe Sre magestieexploregt E At C HE Link frosot somhindovsie gy Map OoOo Y Space Target Border a _self hop If you are linking to the Homepage of an external website there is no need to add the individual page address of index htm as the web browser will insert this automatically If you want to link to a page on an external site that is not the homepage you must enter the full address including the individual html page name e g To link directly to the Support section of a website the address is may be of the form http www website com support htm It is most important that the full and correct URL be inserted when add external links W
39. to stop you calling an image file and html file the same name However filenames of the same name can cause confusion when linking pages if you are not familiar with different file icons Save in dreamweaver GB EE Remember to save the file in the dreamweaver folder save as type All Documents htm html shtm shtml h 4 Create the three remaining pages using the following titles and file names Web Page Title eb Page Filename the htm extension is added automatically Dreamweaver Tutorial Page2 Dreamweaver Tutorial Page3 Dreamweaver Tutorial Page4 The dreamweaver folder should now contain the following html documents web pages dreamweaver File Edit View Favorites Tools Help i O Back gt Ba Fe Search Wey Folders i Address C Documents and Settings TeachNetiDesktopidreamweaver a 0 File and Folder Tasks Gd images Other Places You will notice that as new pages are added to you site existing open pages remain open and can be accessed using the tabs at the bottom of the workspace 24 Text Links Hypertext links allow web users jump from one section of a page to another to another page that form the web site to a page on another web site or to another computer application such as an e mail programme sound player or movie player There must be something on the page which the user will point to and click to activate the link To begin with we will use text hyperlinks
40. u now can access to tools that were hidden in earlier versions of the programme The old style Dreamweaver 4 workspace is still available to those who prefer it but that too has had to change to accommodate the new tools included in Dreamweaver MX This tutorial is aimed at the beginner and barely scratches the surface of the possibilities for web site creation using Dreamweaver MX There are many online support forums and tutorial sites dedicated to Dreamweaver and first port of call for those wishing to find out more should be the Dreamweaver online forums accessible through the Dreamweaver section of the Macromedia web site Launching Dreamweaver MX When launching Dreamweaver MX for the first time you are presented with the following option Workspace Setup IE i l l Eag ee a a a a i CF CF CP OTCOOO TETTETETT ka C Dreamweaver 4 workspace O HomeSite Coder Style For the purposes of this tutorial we select the Dreamweaver MX Workspace J Macromedia Dreamweaver MX File Edit View Insert Modify Text Commands Site Window Help S Commer Layoul Test Tabled Frame Forma Templ Chara Media Head Script Applic Design lt Code sooBnanooss SIRS a lt gt amp Gil Ge me mean 1 9 C em 0 pEEm Al Untitled Document Untitled 1 en ee Cl tk oD El io no site defined Define a Site Ej Desktop ow Answers Learning Macromedia Dreamweaver HX What s Hew
41. wser displays web pages to suit his her needs To change the default colours for the links click on Modify gt Page Properties Page Properties Ea Title Dreamweaver Workshop Home Background C Document Encoding W 4 Tracing Image Image Transparency Trangparent Document Folder C Documents and Settings Teachet Desktopdre Site Folder C Documents and Settings TeachNet Desktop dre The Page Properties dialogue box appears Click on the colour picker a small square with an inverted triangle in the bottom right corner A colour palette pops up and the pointer changes to an eyedropper when moved over the colours Click on a colour to select it If you select a colour and then wish to return to the default simple delete the colour code that appears in the text box beside the Links colour picker Changes made to the Links colours using the Page Properties dialogue box apply only to that page Be consistent and apply changes to all your pages ensuring that links appear the same across the whole site In this example we will retain the default settings Create the remaining links in the same way e Highlight the text to be linked to the file e Click on the folder icon to the right of the link text box on the Properties Palette e Click on the relevant file and click the Select button 21 When finished adding the links preview your web page Click on a link It should bring you to a blank page with the relevan
42. y lt Properties Format Paragraph oo 4 Arial Helvetica san Size Mone s L H Z Link ipstlionroar zip w Eyr Target w List Item m seta 1 local items selected totalling 1560 byte Bue lly itt Save your work and press F12 to view your web page Besides reasons of size files should be zipped so as to avoid corruption of the files in either the initial upload process to your web server or in the download process to the individual user s computer 35
Download Pdf Manuals
Related Search