Dreamweaver

Basics 2011

Dreamweaver Basics
Introduction
Adobe Dreamweaver CS4 is a web authoring software that aids in the creation and maintenance of web pages. Dreamweaver uses tools similar to those found in a word processing program to allow for the development of web pages without knowledge of HTML. It also provides the option of hand-editing the HTML for greater control of the document.

Contents
Table of Contents
Introduction ..................................................................................................................................... 1 Contents .......................................................................................................................................... 1 Opening Dreamweaver ................................................................................................................... 2 Defining a Site ................................................................................................................................ 2 The Dreamweaver Work Area ........................................................................................................ 8 Modifying Page Properties ........................................................................................................... 11 Formatting Text ............................................................................................................................ 16 Using Text from Microsoft Word ................................................................................................. 18 Saving Pages ................................................................................................................................. 20 Adding Links ................................................................................................................................ 21 Adding Email Links ...................................................................................................................... 23 Adding Anchors ............................................................................................................................ 23 Inserting Images ............................................................................................................................ 25 Inserting Tables ............................................................................................................................. 27 Laying Out a Page ......................................................................................................................... 29 Previewing Your Site .................................................................................................................... 30 Uploading Files ............................................................................................................................. 31 Viewing Your Published Site........................................................................................................ 33

SPH Web Services

Page 1

D Dreamw weaver B Basics 2 2011

Openi ing Dream mweaver r
T To open Dre eamweaver in the Train ning Room (2615 ( Cross sroads), dou uble-click th he Dreamwe eaver ic con. Your home h or offi ice compute er may not have h a Drea amweaver ic con. If that i is the case, you s should find Adobe A Drea amweaver in n your Start t Menu -> P Programs.

Defining a Site
T There are tw wo parts to your y website e your loc cal files, and d your remo ote files. You u create loca al files o on your com mputer using g Dreamwea aver, and up pload them to your rem mote web sp pace via SFT TP ( (secure file transfer t pro otocol). It is very impor rtant that th he files on your local computer are set u up exactly the t same as a the files on your rem mote web s server. Tha at is, that th hey are all in the s same location relative e to each ot ther. B Before you can c upload local files to o a web serv ver, you mu ust create w what Dreamw weaver calls s a Site F File. Site Fil les contain information about wher re your files s are stored locally, whe ere they are e stored r remotely, an nd how they y will be tran nsferred bac ck and forth between yo our compute er and the w web s server. You should do this t before you y create your y first we eb page. A All UM stude ents, faculty y and staff have h free we ebsite space e available to them from m ITCS. We e will u utilize this sp pace in toda ays worksh hop. The UR RL of your p ersonal web bsite space is h http://www-personal.u umich.edu/~ ~youruniqu uename/. A All of your website w files will be stored in the Pu ublic/html fo older of your r IFS space. Please see h http://www-p personal.um mich.edu/~pa attyb/websp pace.html fo or instruction ns on check king your we eb s space. If you u do not hav ve an html folder, f pleas se contact IT TCS. If you need to work on a web page e on the SPH H web serve er, I will help p you set up p your site f file d definition.

T To create a new Site File, click the Manage Sites link in y your Files P Panel.

Ma anage Sites Lin nk

T The Manage e Sites dialo ogue window w will come up. Click N New. The Site Definitio on wizard w will come u up:

SPH W Web Services

Page 2

D Dreamw weaver B Basics 2 2011

Site Site Nam me: Give yo our site a de esired name e. Type in a name that provides a meaningful description of your site. s Local Si ite Folder: This T is where you will store s the loc cal copies o of your files. Click the fo older ect it. icon and d navigate to o your perso onal space. Create a fo older there f for your proj ject and sele

SPH W Web Services

Page 3

D Dreamw weaver B Basics 2 2011

Click Servers in the e left-hand column. c

Click the e plus sign (+) to add a new serve er. This nex xt set of que estions refer r to the remo ote web ser rver you are e using. This s will be the ITS web serv ver: Server S name e: does not matter m Connect C usin ng SFTP SFTP S addres ss of your web w server is s sftp.itd.um mich.edu Username U is s your UM uniqname u Password P is your Kerbe eros passw word Root R director r: Public/html/

SPH W Web Services

Page 4

D Dreamw weaver B Basics 2 2011

Click k the Test bu utton. If you u have enter red all of the e informatio on in succes ssfully, you w will see a me essage sayin ng that you have conne ected succe essfully. Clic ck OK and then Next.

SPH W Web Services

Page 5

D Dreamw weaver B Basics 2 2011

Do you y want to o enable checking in and a checkin ng out files s? Only say y yes to this ques stion if you will w not be th he only pers son updating g this websi ite. Enabling g checking in and checking out ma akes it so that only one person can n edit a sing gle file at the e same time e. Click Next t.

SPH W Web Services

Page 6

D Dreamw weaver B Basics 2 2011

Y You will see e a summary y of your Sit te Files definition. If eve erything loo oks good, cli ick Done. Y You can mo odify your Site Files def finition at an ny time by g oing to Man nage Sites in the Files s Panel. T This will brin ng up the Site Definition n dialogue box, b where y you can ma ake the desired change es. You c can also hav ve as many different Si ite Files as needed.

SPH W Web Services

Page 7

D Dreamw weaver B Basics 2 2011

The T Drea amweaver r Work A Area

D Document Window W T The Docume ent Window w is your work area whe ere you crea ate and edit your web p page. D Dreamweav ver has the option o to dis splay the Do ocument Wiindow in thr ree different t ways: the c code v view, the de esign view, and a the code and desig gn view. Th he code view w shows HT TML only. T The d design view shows only y the design n, or the visu ual layout of f your page. The code and design n view s shows a com mbination of f the two.

SPH W Web Services

Page 8

D Dreamw weaver B Basics 2 2011

T To toggle be etween the different d vie ews, go to View V and select Cod de, Design, or Code an nd D Design. Yo ou can also use the sho ortcut icons located at t he upper le eft of your sc creen.
Code Co ode and Design Desi ign

Insert Pane el The T Insert Panel P allows s you to inse ert web obje ects into you ur web pages, p such h as images s, forms and d media. Eac ch Group (s such as common listed here) c contains a g group of spe ecific objects. The Common C group has eve erything you u will need t today.

Files s Panel The Files Pane el is more th han a file bro owser. It allo ows you to see the struc cture of all the t files and d directories s in your website. You c can open n, move, co opy, rename e and delete e files from t the Files Pa anel. We will talk t more ab bout your S ite Files late er in the workshop.

P Properties Panel T The Propert ties Panel provides deta ails of the properties p of f a selected object. The Properties s Panel w will change depending on o the objec ct or text tha at is selecte ed.

SPH W Web Services

Page 9

D Dreamw weaver B Basics 2 2011

T Tag Selecto or T The Tag Selector is located in the bottom left corner c of th e screen. It shows the e HTML Tag gs that c correspond to the area where your r cursor is placed in the e Document t Window. S Selecting a tag in t the Tag Sele ector it will select s the co orrespondin ng area in th he Documen nt Window.
Example of the Tag Selector wh hen the d on a linked imag ge that is cursor is placed inside of a table e.

D Document Toolbar T T The Toolbar r allows you u to toggle between b view ws, and sho ows the title e of the docu ument. It also has s shortcut icon ns that allow w you to upl load and do ownload you ur file, and p preview the page in a b browser.

Do ocument Title Change Views

Uplo oad/Download Preview w/Debug in Brow wser

O Other Pane els There e are several additiona al panels on the left side e of the wor rk area, including Desig gn, Code e, Applicatio on, and Tag Inspector. These T pane els are desig gned to provide additio onal inform mation abou ut Web Dev velopment. For F example e, the Code Panel allow ws you to look up HTML tags, CSS S syntax, Ja avascript syntax, and m much more. W We will not cover these e panels durin ng this works shop.

W Working wi ith Panels Occa asionally, a panel will be ecome deta ached from m the workspace and be ecome a flo oating windo ow. This can be annoying because e the panel is always o on top, block king your vie ew of the page. p To re-attach a panel, click the e Designer r button at th he top of the e window, a and choo ose Reset:

SPH W Web Services

Page 10

D Dreamw weaver B Basics 2 2011

Modifyi ing Page Properti ies
W When you modify m the Page P Proper rties by click king the Pag ge Properti ies Button in the Prop perties P Panel (or go oing to Mod dify Page e Properties s), you mak ke global se ettings to your documen nt.

O On the left side s of the Page P Proper rties window w are severa al categorie es of page p properties. T The first o one is Appe earance (CS SS). Here yo ou can choo ose the defa ault font-fam mily, font siz ze, font colo or, b background color, back kground ima age and all four f margins s for your do ocument. Y You can still use d different fonts and color rs in differen nt parts of your y web pa age. This jus st sets the d default settin ngs for t the entire pa age. F Font Famili ies Y You will noti ice that whe en you click the carrot for f page fon nt, there are not many f fonts on the list. T This is beca ause the font you choos se will only display d in th he user's bro owser if the user has th hat font installed on their machine. You ma ay also notic ce that each h item in the e list contain ns more than n one f font, for example, "Arial l, Helvetica, , sans-serif." Sans serif f is what is k known as a font family, , as are s serif, fantasy y, script and d monospac ce. By choosing "Arial, Helvetica, s sans-serif," you are say ying "If t the user has s Arial installed, display y my text in Arial. If they y don't have e Arial, but t they have H Helvetica, display my te ext in Helvet tica. If they don't have A Arial or Helvetica, disp play my text in w whatever sa ans-serif fon nt they have chosen as their defaullt.

SPH W Web Services

Page 11

D Dreamw weaver B Basics 2 2011

F Font Sizes It is importan nt to choose e a measure ement of fon nt size that allows user rs to increas se or decrea ase the s size of text on o your pag ge, or a relat tional font size. s This is especially t true for user rs with visio on d disabilities who w need th he text to be e bigger in order o to read d it. While pixels is desi igned to rela ational, it t is not treat ted as such by Internet t Explorer. Try T using 1 e em instead of 12 pixels s, or .8em in nstead o of 10 pixels. . C Colors It is importan nt to use hig ghly-contras sting foregro ound and ba ackground c colors. For e example, if you use a dark backg ground, cho oose a light text color. Also, A even if you want a white bac ckground an nd black t text, you sho ould select these, t as gr ray is the de efault backg ground color r for the Net tscape brow wser. A All computer monitors can c display 216 colors called c the B Browser Sa afe Colors. Browser Sa afe C Colors are defined d by a hex (six-ch haracter) co ode containin ng 00, 33, 6 66, 99, CC, or FF. An e example o of a Browser Safe hex code c is 33C CCFF. Drea amweaver a allows you to o choose fro om the 216 a available Browser Safe Colors by using u the co olor picker:

Y You can clic ck the color wheel at the e top of the color picke er to find add ditional colo ors. B Background Images P Please note that background images tile on a web page. That means s that they d display over r and o over in rows s and columns. If you use a backgr round image e, make sur re that it is a small (usu ually a around 100 pixels by 10 00 pixels) and will blend d well when n tiled.

SPH W Web Services

Page 12

D Dreamw weaver B Basics 2 2011

L Links (CSS) T The next thing you will define d is the e Links cate egory.

H Here you ca an change th he font face e, size and color c of the f four link sta ates: Linke ed color: the e color of lin nked text Visite ed links: the e color of links to pages s that the us ser has alrea ady visited Rollo over links: th he color of li inks while th he user is ro olling their m mouse over them Activ ve links: the color of link ks while they y are being clicked on

You can also select t an Underlin ne style. The default is that links a are always u underlined, w which users ex xpect, but yo ou can chan nge it so tha at links are n never under rlined, are o only underlin ned during mouse m rollov ver, or are underlined ex xcept during g mouse rol llover. It is perfe ectly accept table to leav ve these all on their def faults (whic ch is blue un nderlined tex xt for links and d purple und derlined text t for visited links) but fe eel free to play around w with these s settings. What is most import tant is that your y visited link color is s different fr rom your reg gular link co olor. This is a visua al clue to us sers that the ey have alre eady visited a page.

SPH W Web Services

Page 13

D Dreamw weaver B Basics 2 2011

H Headings T The final cat tegory of Pa age Propert ties that you u should set t are Headin ngs (CSS).

H Headings ar re used for page p titles, section title es, sub-sectiion titles, an nd so on. Th hey are use ed to s structure your web page e. HTML off fers six leve els of headin ngs, with He eading 1 be eing the largest and H Heading 6 being b the sm mallest. I rar rely use mor re than thre ee levels of h headings to o structure w web p pages. In the image e above I ha ave set the heading h fon nt, specified that all hea adings should be bold, a and set t the font size es for headin ngs one thro ough three. Note that I again used d the em me easurement of font s size so that users can increase and d decrease the size of the text. O Once your selections s ha ave been made, m press Apply to ap ttings to the page and O OK to pply the set a accept the changes. c

SPH W Web Services

Page 14

D Dreamw weaver B Basics 2 2011

P Page Titles for the Title Bar T The last glob bal page pro operty that you y will set is the page e title for the e title bar. Th he title bar i is the ge: b blue space at a the very top t of every y browser window, as c ircled in the e below imag

E Enter the tex xt that you want w to appear in the title bar in th e Dreamwe eaver title bo ox:

W Whatever yo ou enter the ere will appe ear in the we eb browser''s title bar. U Use short bu ut descriptiv ve page t titles.

SPH W Web Services

Page 15

D Dreamw weaver B Basics 2 2011

Formatting g Text
Y You can mo odify individu ual sections s of text by using u the Pr roperties Pa anel. First s select the te ext you w would like to o change an nd then mak ke the neces ssary chang ges by using g the option ns available to you in the Prope erties Panel. . Using the available to ools, you ca an: Crea ate headings s and paragraphs Chan nge the face e and size of o the font Chan nge the colo or of the text t Crea ate bold, or italic text Adjus st alignment to right, ce enter, or left t Inden nt text Crea ate bulleted or numbere ed lists
Format Bold/Italic L Left, Center, Righ ht

Font Type

Font Size

Color

Indent Bulleted/Num mbered List

F Formatting Headings and Paragr raphs T The first thin ng you want t to put on your y web pa age is the pa age title. Put your curso or in the doc cument w window and type in the page title. Next N click th he drop-dow wn for the Fo ormat property in the P Properties Panel. P Here you see your choices: paragraph format, any y of the six le evels of hea adings, a and Preform matted. Since the level 1 heading is s the highes st level, it sh hould be use ed for page titles. C Choose Hea ading 1 in th he Format drop-down d list:

SPH W Web Services

Page 16

D Dreamw weaver B Basics 2 2011

T To go to the e next line, put p your cursor at the end of your p page title an nd click the Enter (or Re eturn) b button on yo our keyboar rd. Type in your y first paragraph. No otice that the e value of th he Format property in the Prope erties Panel now says Paragraph P . This is beca ause Dream mweaver is smart enough to k know that yo ou wouldn't want two le evel-1 headi ings in a row w. Y You might also a notice th hat there is a blank line e between y your page tit tle and your r first paragr raph. A Any time you hit the Enter (or Retu urn) button on o your keyb board, you w will skip dow wn a line. This is b because in HTML H (the language l web w pages are written in n) there is always a blank space be etween b block-level objects o on a page, such h as headings and para agraphs. If you want a line break instead o of a paragra aph break, hold h down th he Shift key y while hittin ng Enter (or r Return). Y You can select any wor rds in your paragraph p and a change their font-f face, font-size, color, a and m make them bold or italic by chang ging those properties p in n the Proper rties Panel. You can ch hange t the alignmen nt of headin ngs or parag graphs by cl licking any o of the alignment icons s in the Properties p panel. L Lists T There are tw wo types of lists on web b pages: Or rdered (or n numbered) a and Unorde ered (or bull leted). T To create a list, put you ur cursor jus st above where you wan nt the list to o be and hit Enter (or Return) to s start a new paragraph. p For an orde ered list, clic ck the Orde ered List ico on in the Pro operties Panel. For a an umordere ed list, click the Unorde ered List ic con in the Pr roperties Pa anel. T Type your first list item, and then hit h Enter (or Return) to g go the next line. Your li ist will continue. W When you are a finished with your lis st, hit Enter and click th he Ordered or Unordere ed List icon again to t turn it off (or r just hit Ent ter twice). N Nested List ts L Let's say you want an unordered u (b bulleted) list t nested ins side an orde ered (numbe ered) list as a sublist. Type in your ordere ed list, then put your cursor at the e end of the li ine just above where yo ou want y your sub-list t to start. Hit the Enter (or ( Return) button on y your keyboa ard, then clic ck the Inden nt Icon in the Prope erties Panel. . Next, click k the Unorde ered List ic con in the Properties Pa anel to chan nge the n nested list to o an unorde ered list. Typ pe in your unordered lis st. When yo ou want to re eturn to you ur o ordered list, hit Enter (o or Return) and click the Ordered L List icon in t the Properties panel to resume y your ordered d list. Here is an examp ple:

SPH W Web Services

Page 17

D Dreamw weaver B Basics 2 2011

Us sing Text t from M Microsoft W Word
We frequently ne eed to copy y text from Microsoft M Wo ord and pas ste it into Dr reamweaver. Unfortunately, doing so cau uses many problems. p H Huge amoun nts of junk code that can quad druple the file size, and can only be e displayed by Internet Explorer, get copied and paste ed along wit th the text. The T worst offenders o are e auto corr rect while yo ou type cha aracters such as curly qu uotes and em mdashes. Text should never be copied d from Word d and direct tly pasted in nto Dreamw weaver. For rtunately, Drea amweaver gives us two alternatives s: 1. Import a Word Document

t entire co ontents of a Word file into your we eb page, ple ease If you want to place the your curs sor where yo ou want the text to go o on the page e and click th he File drop p-down menu an nd choose Im mport -> Word Docum ment. You w will be promp pted to navigate to

SPH W Web Services

Page 18

D Dreamw weaver B Basics 2 2011

the Word d file you wa ant to import t. Dreamweaver will ins sert the contents of the documen nt at the plac ce of your cursor. c 2. Clean Up p Word HTM ML If f you dont want w to insert the contents of an en ntire Word d document in nto your pag ge, you ca an copy and d paste just the text you u want from m Word, use e the Clean Up Word HT TML co ommand to get rid of th he junk code e that came e with it. Jus st copy and paste and s save the file. Then clic ck the Commands dro op-down me enu and choose Clean n Up Word HTML.

Its fine to o leave the default d setti ings intact a and click OK K button to r run the com mmand. 3. Run the text throug gh NotePad d or WordP Pad first. A t third alterna ative is simp ply to paste the e text copied d from Word d into either NotePad or Wordpad, then copy it from f the there and d paste it int to Dreamwe eaver. You w will lose som me formattin ng, but all of nasty Wo ord code will be gone.

SPH W Web Services

Page 19

Dreamweaver Basics 2011

Saving Pages
To save the web page you are working on, click the File drop-down menu and choose Save. Please note the following file naming conventions for the World Wide Web: 1. 2. 3. 4. 5. All web page files must end with the extension .htm or .html. Your default homepage must be named index.htm or index.html. Use all lower-case letters and numbers in your file and folder names. Do not use spaces. Do not use special characters like &, %, etc. Underscores (_), dashes(-) and periods(.) are OK.

If you are saving your work to your personal space on the UM web server, you may notice that you already have a file in your file list called index.html. It is fine to over-write this file. You cannot have two index files in your html folder, one named index.htm and the other named index.html. You should have only one default home page file. Once you have your page properties and formatting set, an easy way to create secondary pages is to click the File drop-down menu and choose Save As Give the page a new file name and edit its content appropriately.

SPH Web Services

Page 20

D Dreamw weaver B Basics 2 2011

Adding A Li inks
To add a link to ano other web p page, first place your cu ursor where you want the e link to app pear. Next, c click the Lin nk icon on C Common Insert Panel.

The Hyperlink H di ialogue box x will open. Here H you wiill need to ty ype in the text that t you wan nt to be clickable in the e Text field the fu ull URL of th he webpage e you want to t link to in t the Link fie eld the Target T field allows you to have the e link open i n a new win ndow by cho oosing _bla ank. If you do d not want the link to open o in a ne ew window, leave the T Target field blank. Text that describ bes the link into the Titl le field (this s can be the e same as th he text you want to be clickable) You may leave the t Tab Index and Acc cess Key fie elds blank.

SPH W Web Services

Page 21

D Dreamw weaver B Basics 2 2011

B But what if you y want to make text that t you hav ve already ty yped link to o another we ebpage? Fir rst select would like is selected, t the text you activated a as s a link. Once the text type in the full URL (e.g. h http://www.s sph.umich.e edu) in the Link L field an nd the title into the Title e Field in th he Propertie es Panel.

I If you need to t link to ano other page in n your site, you y can click k the folder icon next to o the link fiel ld and n navigate to th hat file. You u can also cli ick the Point to File ico n and drag i it to the page e you want to o link to in the Files Panel P .

SPH W Web Services

Page 22

D Dreamw weaver B Basics 2 2011

Addi ing Emai il Links
Email l Links are special s links s that you ca an use to m make e-mail addre esses on your webpage e clickable. If your user r has an email client installed on their computer, w when they c click an ema ail link, their r email client will open a new messa age address sed to the e email addres ss you have specified. To ad dd an email link, first pla ace your cursor where you want th he link to appea ar. Next, clic ck the Emaiil Link icon o on Commo on Insert Pa anel.

T The Email Link L dialogue e box will op pen. Type in n the text th hat you want t to be click kable, and th he em mail address s, and click OK.

N Note: Email links are of ften harvest ted by robot ts that searc ch the web, collecting e email addres sses for s spammers.

Ad dding Anc chors

Anchors are links tha at jump to a specified location with hin the same page. Creating an Anchor is a two-ste ep process. First, you m must indicat te where you want he page (na t the link to jump j to in th ame the anc chor). Then n you have to create c a link k to that loca ation (link to o the named d anchor). Creating g a Named Anchor A To create e a Named Anchor, pla ace the curs sor in the Do ocument Window in the locati ion you wou uld like your r link to jump p to. Then click on the e Named Anchor icon. i

SPH W Web Services

Page 23

D Dreamw weaver B Basics 2 2011

A After clicking g on the Na amed Ancho or icon, an Insert Nam med Anchor r dialog box x will appear r. Type a short one-word name e for the anc chor in this. Press OK. The ancho or has been named and d you c can now link k to the anchor.

L Linking to a Named Anchor In the Docum ment window, select the text you would w like ac ctivated as a link. In th he Link Field d of the P Properties Panel, P type the t number sign (#) followed by th e name of y your anchor r (e.g. type # #top in t the Link field d if you nam med your anchor top).

SPH W Web Services

Page 24

D Dreamw weaver B Basics 2 2011

Ins serting Im mages
To inse ert images in nto your we eb page, pla ace the curs sor in the Do ocument window w in the loca ation you wo ould like the e image inse erted. Next, , click on the Ins sert Image icon i in Com mmon Inser rt Panel. Th his will open na dialogu ue box that will w allow yo ou search fo or the file wh here the ima age is located d. Browse to o the desire ed image file e and press s Select. Th his will insert the image in nto the Docu ument Wind dow. Import tant Things s to Remem mber about Using Ima ages It is aga ainst U.S. copyright c law w to take im mages from s someone el lse's web pa age and disp play them o on your own pages with hout permiss sion. Always s make sure e that your im mages are s small both h in dimensi ions and in file size. s The sm maller the file e, the faster r it will down nload and b be d displayed on n your page e. I try to kee ep my images under 10 00k. A Always mak ke your imag ges the size e you want them to disp play before i inserting the em into your page. D Don't insert them and th hen resize them. A Always supp ply alternate e text for your images using u the Alt field in the e properties panel. This s helps u users with vision v disabilities who ca an't see you ur images u nderstand w what your im mages are a about. U Use short, descriptive d words w for yo our alternativ ve text. F Formatting Images O Once inserte ed, you can use the too ols available e to you in th he Propertie es Panel to resize and align t the image (left, center, right), make e the image into a link, or place a b border around your ima age. Y You may no otice that ima ages you in nsert into your page are e contained in their own n paragraph h. There a are two way ys to make other o conten nt like text t wrap aro ound your im mages. One e is with tables, and t the other is with w alignment, as show wn in the fo ollowing ima age:

SPH W Web Services

Page 25

D Dreamw weaver B Basics 2 2011

C Changing th he value of the t Align fie eld to Left will w make tex xt wrap arou und your ima age on the right. S Similarly, ch hanging the value of the e Align field d to Right w ill make tex xt wrap arou und your ima age on t the left.

SPH W Web Services

Page 26

D Dreamw weaver B Basics 2 2011

Ins serting T Tables
To in nsert a table e into your w web page, p place the cursor in Docu ument Wind dow the loca ation you wo ould like the e table inser rted. Next, click on the Insert Table e icon in Co ommon Inse ert Panel.

The Inser rt Table Dia alogue Window

T The Insert Table T dialogue window allows you to control a ll aspects o of your table: how many y rows a and columns s it has, how w wide it is, whether or not it has a border, and if it does, how thick that b border is, ho ow much sp pace there is s between cells c (cellspa acing), how w much spac ce there is b between a cells content and the edge of the e cell (cellpa adding), hea ader rows a and/or colum mns, and mo ore. Text

SPH W Web Services

Page 27

D Dreamw weaver B Basics 2 2011

inside heade er rows and d columns is s automatica ally bolded a and centere ed. Have tex xt appear ab bove y your table by entering a Caption. O Once the de esired forma at has been specified in n the Insert T Table dialog gue box, press OK. Th he table w will now be inserted i into o your Web page in the e Document t Window. Y You will then be able to o place y your cursor in each cell to add text t or images. O Once you in nsert your ta able, you can make add ditional chan nges to the tables form mat by selec cting the t table and us sing the Pro operties Pan nel to make change the e number of rows and c columns, the e a amount of cell padding and cell spa acing, the alignment a an nd width of y your table, a and the size e of the t tables borde er.

SPH W Web Services

Page 28

D Dreamw weaver B Basics 2 2011

Layi ing Out a Page
U Using Drea amweaver's s Sample La ayouts D Dreamweav ver comes with w built in sample s page e designs th hat you can use to set up your pag ges. Go t to File -> Ne ew you will see a list of f these sample page lay youts:

Y You can use e any of these sample designs d to create c your own web pa ages. Just r replace the sample t text with you ur own text, and add im mages. U Using a Consistent Pa age Design n for Multiple Pages

O Once you have h gotten your first page p format tted the wa ay you like it t, you can u use it as a t template for r other pages in your web w site. Af fter saving the file, clic ck the File drop-down menu a and choose e Save As and save e it with a ne ew file nam me. Now you u have a ne ew file and a new p page. Chan nge the content approp priately. Re emember to o save the p page title fo or the title bar as w well.

SPH W Web Services

Page 29

D Dreamw weaver B Basics 2 2011

Previ iewing Y Your Site
It is importan nt to preview w your site in several browsers b be efore you po ost your site in order to ensure t the content will w be displ layed appro opriately. Yo ou can prev view your do ocument at any time, but keep in mind that links will no ot be active until the site e is preview wed or poste ed to a serv ver. T To preview your y docum ment, you mu ust first sele ect a browse er. To do so o, click the Preview/De ebug Icon in Brow wser icon in the File Toolbar and choose to Ed dit Browser List.

Preview w/Debug in Brow wser Icon

Select Previe ew in Browser

SPH W Web Services

Page 30

D Dreamw weaver B Basics 2 2011

A After the bro owser has been b selecte ed or changed, you can n preview th he site by cli icking the P Preview/De ebug Icon in n the File To oolbar. You can also pr ress the F12 2 key on your keyboard d to d display the current c docu ument in the e primary br rowser.

Up ploading Files
O Once your site s has bee en defined, you y can pub blish your sit te. This me eans you ca an transfer y your files t to a server so s others may have acc cess to your web site th hrough the Internet. Y Your Files Panel P is alw ways visible on the left side s of the D Dreamweav ver work are ea. You can n see b both your local and rem mote files at any time by y clicking the e Expand/C Collapse but tton at the to op of the F Files Panel.

The Expand d/Collapse button

C Clicking the Expand/Co ollapse butto on will open a Site Win ndow with tw wo panes, o one for the L Local F Folder and one for the Remote Site. L Local Folde er T The Local Folder appea ars on the ri ight-hand side of the w indow and c contains a list of the file es s stored on yo our compute er or networ rk. R Remote Site T The Remote e Site appea ars on the le eft-hand side of the win ndow and sh hows a list o of the files s stored on t the server. Until you co onnect to the server, the Remote S Site side of t the window will remain blank.

SPH W Web Services

Page 31

D Dreamw weaver B Basics 2 2011

Rem mote Site

Local Folder

T To connect to the serve er and view the Remote e Site, click the Connec ct button in the Site Files t toolbar.

Connect Button

Get File e(s)

Put File(s)

O Once you ha ave connected to the server, you can c transfer r files from the Local Fo older to the Remote S Site and vice e versa. Yo ou can do th his by dragg ging selecte d files from one pane to the other, or by u using the Ge et File(s) an nd Put File( (s) buttons in the toolba ar. W When you tr ransfer files to the server, you will be asked if you want to o Include D Dependent F Files. Including De ependent Files means that t all the files f depend dent on the file you are transferring g ( (images, ext ternal style sheets) will also be transferred to the server. K Keep in mind that when n you transfe er files, you overwrite t he existing file. Make s sure you do o not t. c copy over th he most rece ent version, or the edits s will be lost

SPH W Web Services

Page 32

Dreamweaver Basics 2011

Viewing Your Published Site
To view your published site, open a web browser and go to http://www-personal.umich.edu/~youruniquename/filename.html.

SPH Web Services

Page 33