Adobe Dreamweaver I - Part II

Saving, Uploading, and Viewing

After completing the “Try it Out” on the last page, we have some basic content in the form of an “index.html” file that has the image “bunny.jpg” on it.

Now it’s time to make the remote copy of your site match the local copy of your site. There are actually several ways to do this depending on how many changes you’ve made and how thoroughly you want to review each transfer operation.

Remember that the local copy is the one that’s “living” on your computer: it’s only visible to you. The remote copy, however, is the one that everyone can see; it’s the public version of your site. These two copies of your site are independent: Changing a page on your local copy does not mean that your remote site will be updated accordingly, even if you save those changes.

Every time you view your site in Dreamweaver or preview it from Dreamweaver’s “Preview in Browser” button, you are viewing the local copy. Every time you view your site on the internet (at an address starting with “http://”) you are viewing the remote copy of your site.

The rest of this page discusses how to transfer files between these two copies of your site and how to synchronize the two.

Image of Local Remote DiagramGet and Put

Dreamweaver uses the terms Get and Put to talk about getting a file from the remote copy and putting a file on the remote copy. Dreamweaver uses a green down-facing arrow to indicate Get and a blue up-facing arrow to indicate Put:

Tip: If you have experience with other web design technologies, you might be familiar with the terms Download and Upload, which Dreamweaver has decided to call Get and Put, respectively.

The Files Palette

The Views Toggle Dropdown

Our last page focused primarily on the Properties Inspector. This page focuses primarily on the Files Palette.

The Files Palette is the primary method of transferring files between the local and remote copies of your site. You can only view one copy of your site at a time, but you can toggle between these views using the Views Toggle Dropdown.

Image of Views Toggle

(Dreamweaver CS3 actually has a button that allows you to view both the local and remote sites side-by-side; it’s the last button on the row of buttons below, but we won’t discuss how to use this view.)

Buttons on the Files Palette

Image of Files Palette ButtonsThe Files Palette has a row of buttons from left to right:

  1. Connect to remote host 
    Use this when you are ready to start transferring files between your local and remote versions. The “remote host” is simply the server (computer) that stores the remote copy of your site.

    This icon is meant to resemble an electrical cord and a socket into which the cord plugs. When you are connected to the remote host the icon changes to one where the two plugs are joined and the gray circle is green.

  2. Refresh 
    When you connect to the remote host Dreamweaver asks the remote site what files it has. Rather than keep on asking this question over and over again, Dreamweaver just holds on to the remote site’s answer and assumes that nobody else has done anything to add, remove, or change the files there.

    This button, resembling an arrow looping back onto itself, allows you to force Dreamweaver to get the current contents of the remote site. This is useful if you’re trying to view your remote site in a web browser and it’s not matching up with what you see in Dreamweaver.

  3. Get File(s) 
    Used to transfer the selected files in the Files Palette to the remote site. This is most useful when the Views Toggle Dropdown is set to “Remote view.”

  4. Put File(s) 
    Used to transfer the selected files in the Files Palette to the Local site. This is most useful when the Views Toggle Dropdown is set to “Local view.”

  5. Check Out File(s) 
    This button is not relevant to this curriculum.

  6. Check In 
    This button is not relevant to this curriculum.

  7. Synchronize 
    Allows you to let Dreamweaver automatically determine what files need to be transferred between the two copies of your site to bring them to the same. More on this later.

  8. Expand to show local and remote sites 
    This button is not covered in this curriculum.

Before Your First Transfer

Before we start transferring files it’s important to make sure that we’re not going to accidentally overwrite any files you might already have. To do this:

  1. Click the “Connect to remote host” button on the Files Palette, then

  2. Toggle to the “Remote view” using the “Views Toggle Dropdown,” then

  3. Click the “Refresh” button on the Files Palette.

Image of IndexIf you already have a file called “index.html”, “index.shtml”, or a file named “index” with any extension, then you should rename it to something like “old_index.html” by clicking on the file’s filename and waiting briefly and typing in the new name.

This file might have been set up for you automatically when you first activated your web site or it might be the result of past web design attempts.

In any case you should try visiting your site on the internet. The address depends on a wide variety of factors, but if you’re a UW Student, the address is probably something like http://students.washington.edu /YOURUWNETID/.

This page should look something like the screen shot to the right. This is what is shown if you do not have an “index.html” file, as was discussed on our Getting Started page.

Putting a Single Page

Here’s how to upload your “index.html” file to the remote site:

  1. Select “index.html” in the Files Palette.

  2. Image of Dependent Files BoxClick the (blue) “Put” button in the Files Palette. This will likely result in the following dialog box:

    This dialog box actually brings us back to an important bit of theory that we discussed on the Getting Started page. Namely, the notion that “Pages on Web Sites are just files”. In particular, you’re asking Dreamweaver to upload “index.html”, a file on your computer. The gotcha is that this file includes another file, namely bunny.jpg.

    Image of Bunny UploadedWhen one file includes another file (such as a page including an image or a stylesheet) then Dreamweaver calls the other file (the image) dependent in the sense that the image depends on the page in order to be displayed in context.

    This is a long-winded way of saying that you do want to “Put dependent files” when Putting files. That is, press “Yes” in that dialog box every time it comes up. Or simply check the box that allows you to always perform this action.

Upon clicking the Put button, Dreamweaver will Put your “index.html” and “bunny.jpg” files onto the Remote site. You can verify this by toggling to the remote site in the Files Palette and clicking the Refresh button to see the two new files uploaded, as depicted in the screen shot to the right.
Other Ways
Image of Get and Put Buttons

This method works but is slightly tedious. This operation is so common that Dreamweaver has duplicated the Get/Put buttons in the row of buttons above the Design View, as depicted in the screen shot to the right.

Dreamweaver also has a keyboard shortcut, Shift + Apple + U on the Mac and Shift + Control + U on the PC, that allow you to quickly and easily Put the file you’re currently working on.

Synchronizing Your Site

Arguably one of the more useful features of Dreamweaver’s built-in file-management tools is its ability to Synchronize your Local and remote sites.

Imagine you’ve just spent several hours updating a very large site with several hundred files. You were making some pretty serious design changes so you didn’t Put each file as you were working on it (you didn’t want any visitors that caught you mid-update to get confused as to why some pages looked different than others). Now that you’re done with those changes on the local copy of your site, how do you transfer those changes?

You could manually try to figure out or remember which files you changed, but this is error-prone: you’re only human. You could opt to simply Put your entire site, but your site is very large, so this could take a long time and might actually not work the way you would expect with some of Dreamweaver’s plug-ins. You could simply give up and have some sorbet, but then you’ve just consumed calories needlessly.

The solution, while slightly less delicious sans sorbet, is quite ingenious: Dreamweaver keeps track of which files you’ve changed since you started editing and allows you to transfer only those files that have changed since then. This operation is known as Synchronizing the two copies of your site.

You can synchronize your site at any time by clicking on the “Synchronize” button in the Files Palette. The icon looks like the green and blue Get and Put arrows circling back on each other.

Older versions of Dreamweaver also include this feature, but it’s slightly more hidden. In older versions of Dreamweaver you can click on Site > Synchronize… to get this same feature.

Synchronization Options

Image of Synchronized Files BoxDreamweaver is able to perform a Synchronize in many different fashions, and it allows you to select between them in the “Synchronize Files” dialog box:

The dialog box has two dropdowns, Synchronize and Direction:
  • Synchronize simply asks you what you want Synchronized, either the entire Site or only those files selected in the Files Palette.

  • Direction asks you which copy of the Site is “newest”:

    • If you are saving your changes to the remote Site, then you should select “Put newer files to remote” which will take all the files you’ve modified since you last Synchronized and Put them.

    • If you are just starting to make some changes to your Local Site, you should select “Get newer files from remote” which will look on the remote Site and see if any files there have changed and are newer than your Local copies. This feature allows you to work on your Site from anywhere and always be able to keep those changes the next time you modify your changes from home.

    • “Get and Put newer files” is perhaps the most interesting of the options: it allows you to do a “merge” of your Local Site and your remote Site. If your copy of “index.html” is newer than the remote Site’s copy, then it will Put your Local copy. At the same time, if the remote’s copy of “bunny.jpg” is newer (maybe you were doing some Photoshopping in the labs) than your Local copy, then it will Get it from the remote.

This author’s preference is always select “Entire…” and “Get and Put newer files” options in the Synchronize Files dialog box. This ensures your local and remote sites are always the same.

Once you select the desired option, select the “Preview” button to see what Dreamweaver proposes it must do to perform this operation.

Synchronizing Danger

“What’s this ‘Preview’ thing about?,” you ask? Simply, performing a Synchronize can be dangerous. Dreamweaver knows to Get or Put a file based on its “Last Modification Time,” information that most operating systems keep track of for files. This means that Dreamweaver doesn’t really keep “track of which files you’ve changed since you started editing.” Rather, it just compares the Last Modification Time of the files in the Local Site to that of the files in the remote Site, and if the two Last Modification Times differ, the newer of the files will be transferred.

To see why this is dangerous, imagine you go to the labs and make some significant changes to a file on your Site and you Put those changes and all is fine and good. Then you come home and make some small changes to that same file but you forgot to first Get that file from the remote Site. Your Local copy of the file doesn’t have all those changes you made in the labs. When you go to perform a Synchronize, Dreamweaver will see that the Local file was modified more recently than the remote file and will Put the file, overwriting all those changes you made in the labs.

(Yes, you’d have to be somewhat dense to not realize that all your prior changes weren’t there when you were editing your Local copy, but this can happen fairly easily in other contexts as well.)

It is for this reason that Dreamweaver asks for your approval before potentially modifying a large number of files on your two copies of your Site

Image of Synchronize Files BoxDealing with Synchronizations

If there are differences between your two copies of your Site (Local and remote), then you’ll be given a dialog box similar to this one asking you to review the operations Dreamweaver will perform to bring the two copies up to current with each other in a dialog box similar to this:

From here you can opt to go ahead with these changes by hitting “OK” or you can modify Dreamweaver’s course of action by selecting an item from the list of actions and using the arrows at the bottom to change the action.

Did All Go Well?

Once you’ve synchronized your site you should be able to visit it at the same address as before. We used to have something likeImage of Index:

 

 

 

 

 

 

 

and if everything has gone well, we should now have something like:

Image of Bunny Online

 

 

 

 

 

 

 

 

If you do not have this, ensure your page is saved exactly as “index.html” and that you’ve properly Put the “index.html” file. You might also try refreshing your web browser and clearing its cache. If you’ve tried all of this and still can’t get your Site to come up at your “http://…” web address, please send us an email via our email address available from our Contact Us page.

What Next?

Now that we know how to add content and how to save that content and upload it to the world wide web, it’s time to get into designing your own layouts with Dreamweaver’s Layers.

Working with Layers

Now that we’ve added basic content into an “index.html” page, it’s time to move on to adding content with more of a purpose in mind. In particular, we want to add content to specific regions on the page.

Remember from the earlier Getting Started page that the basic building blocks of content in Dreamweaver are

  • Sites, which have one or more
  • Pages, which have one or more
  • Layers, which have one or more, and
  • Paragraph Blocks, which contain the words and images for your page.

Until now we’ve talked about SitesPages, and Paragraph Blocks, but we haven’t yet mentioned Layers. How, then, is it possible that a Page (e.g., our index.html file) has “one or more” Layers when we never added a single Layer? The answer is actually subtle but is important to understand:

All the visible content on any Page in Dreamweaver is ipso facto inside of the Body Layer. You can think of the Body Layer as being like the piece of paper onto which you can draw additional Layers.

A Note on The Way of Things

The process of laying out content on a web site is full of caveats, subtle points, and mixed terminology. There are in fact four primary methods of laying out your Web Site, and Dreamweaver actually has support for all of them.

  1. HTML Frames are actually a sort of “meta” layout in the sense that a layout done with HTML frames is actually only putting two or more web pages side-by-side in the browser window, each of these pages being its own “frame”.

    HTML Frames are not accessible, are hard to maintain, and tend to be a usability concern because most users do not expect elements of your site to scroll (or not scroll) independently of other elements.

  2. HTML Tables allow you to construct a grid-like structure for your layout and were very popular in the early days of Web design.

    They are to avoided, however, because they are not accessible and are very hard to change once you have a lot of content inside them. Tables are intended to list tabular data, not to layout content.

  3. Layers allow you to create arbitrarily-sized, arbitrarily-positioned containers on the page. Layers are generally much more accessible than HTML Tables and offer more design freedom.

    They are, however, limited in the sense that the user cannot resize the page’s text and expect the integrity of the layout to be retained. They also tie the layout and the content very closely together, making the layout difficult to maintain across large sites.

  4. CSS Layouts including Dreamweaver CS3’s built-in elasticfixed,liquid and hybrid layouts (addressed later) are considered the “best” way to layout content: they maximize design freedom and are simultaneously very accessible and easy to maintain across large sites.

    The rub of CSS Layouts is the difficulty found in writing good CSS for layouts. Our workshop on CSS covers this topic, but it is not currently possible to create a CSS Layout from scratch in Dreamweaver without knowing a fair amount of CSS. Recognizing this, Dreamweaver CS3 includes a number of pre-built starter CSS Layouts that simply have a number of columns with some starter content.

So where does that leave us? The “best practices” in the industry are to use CSS Layouts, but Dreamweaver’s support of CSS Layouts is dependent on your knowledge of CSS, and many designers come to Dreamweaver hoping to reduce the amount of code they’re expected to learn and write.

We’ve actually decided to walk a tight line between following the industry standards, making the design process as code-free as possible, and appeasing users of older versions of Dreamweaver (e.g. MX 2004 and 8) which do not have pre-built CSS Layouts to work with. With all of this in mind, we will be demonstrating creating Layouts using Layers which are a fair balance of these aspects.

An Important Note on Terminology

Dreamweaver Version CS3 favors the term AP Div instead of Layer. The “AP” means Absolutely Positioned while the “Div” comes from the fact Dreamweaver implements them as HTML tags (simply generic containers) under the hood. These technicalities need not concern us at the moment.

We will stick with the term Layer despite Dreamweaver CS3’s preferred terminology. Dreamweaver versions MX 2004 and 8 use the term Layer in the sense that this curriculum does.

What is a Layer?

A Layer is a container for content. Unlike Photoshop’s concept of layers, which use the transparent-piece-of-plastic metaphor, you can think of Layers in Dreamweaver as being like stick-on cork-boards: they have a fixed size and location, and they contain visible content on the page. They can be moved and (unlike cork boards) resized to arbitrary measures.

Getting Started

First create a pen-and-paper mockup of your layout. It doesn’t have to be pretty: just good enough to get your mind off the layout itself and onto how to create the layout in Dreamweaver.

Image of Simple LayoutWe will be implementing the following layout, but feel free to follow along using your own layout.

(Colors added just to clearly distinguish the layers; a less-garish color scheme might be advisable.)

This layout has four layers:

  1. Header, which is 800 pixels wide by 150 pixels high (written as simply 800x150) position at the top left of the page,
  2. Menu, which is 150x400 and is all the way to the left and just below Header,
  3. Content, which is 500x400 and is to the right of Menu and is just below Header, and
  4. Sidebar, which is 150x400 and is to the right of Content and is just below Header.

When drawing these Layers it’s helpful to enable Dreamweaver’s Ruler by selecting View > Ruler > Show from the menu. Try and get as close to these dimensions as possible by hand, but we can always fine-tune height, width, and position later.

The Insert Window Again

Image of Insert Window LayoutWe’ve used the insert window before to insert content (i.e. images); it turns out that we need to use the Insert Window again to insert our Layers. This time, however, we need the “Layout” tab from the Insert Window (depicted to the right).

Image of Draw Layer ButtonMost of the buttons on this tab of the Insert Window are not relevant to this curriculum. We are, however, interested in the fourth button from the right, the “Draw Layer” button (labeled “Draw AP Div” in Dreamweaver CS3), depicted to the right. Clicking this will allow you to click-and-drag to create a Layer in the Design View.

Drawing Layers

Image of Drawing New LayerAfter clicking on the Draw Layer button, move your mouse down into the design view and notice that your cursor is now in the form of a cross-hair. Click and drag in the Design View to create a rectangle for your first layer.

Upon drawing a new Layer, its border turns blue and intensifies:

Repeat this process for the other three Layers:
  1. Click the Draw Layer button on the Insert Window
  2. Position the mouse in the Design View and click and hold down. This is where the top-left corner of your new Layer will be.
  3. Drag the mouse and let go. Wherever you let go will be the lower-right corner of your new Layer

Image of All Layers InsertedYou should now have something like the following:

Notice that the edges of the layers don’t quite meet and it doesn’t look very professional quite yet.

Cleaning it Up: Properties Inspector Reprise

Unless you have a very steady hand, chances are your Layers might not be exactly the right height and width or position. The ruler helps us with this initially, but the mouse is not a very precise tool. In order to get our Layers sized and positioned exactly right we’ll have to do some fine-tuning using the Properties Inspector.

Selecting Layers

To modify the Properties (including height, width, and position) of a Layer, you must first make it “active”. Making a Layer active is much like making an image active, which we discussed on our page on the Dreamweaver Interface, but it’s actually slightly more complicated since Dreamweaver thinks we’re trying to put our cursor inside the Layer to start adding content to it rather than selecting the Layer to make it active and change its Properties.

Image of Header Layer SelectedTo select a Layer:

  1. Position your mouse just to the side of one of the Layer’s borders, and then
  2. Slowly Move your mouse over the Layer’s border until the border turns red and your cursor turns into a hand, and finally
  3. Single-click the mouse. The Layer’s border will turn blue. The screenshot to the right shows the Header Layer selected.
Reading Layer Positions

Now that we have a Layer selected, the Properties Inspector changes to show us the Properties of that Layer:

Image of Header Layer Properties BarThere are four Properties that control size and position of Layers in the Properties Inspector. The screenshot to the right shows what your Header Layer’s Properties might be after drawing it by hand.
  1. Image of Header Dimensions PropertiesL indicates the distance from the left-hand edge of the page to the upper-right-hand corner of the page,
  2. T indicates the distance from the top edge of the page to the upper-right-hand corner of the Layer,
  3. W indicates the width of the Layer, and
  4. H indicates the height of the Layer.

So if we have

  • L = 0px
  • T = 0px
  • W = 793px
  • H = 148px

as in the above, this indicates that the layer is 793 pixels wide by 148 pixels high and is positioned with its upper-left-hand corner 0px from the left (L) and 0px from the top of the page.

Cleaning Up Layer Size and Position

One of the benefits of choosing “nice” layer sizes like we did (e.g., our Header Layer is supposed to be 850x150 and positioned at (0,0)) is that we can usually align and position layers simply by rounding the dimensions of the layers we drew by hand.

Sometimes it might be necessary to do a little simple arithmetic to figure out exactly what these Properties should be exactly, but the act of positioning and sizing the layers visually while choosing easy-to-work-with numbers should greatly ease this process.

The following table summarizes the L, T, W, and H properties of our four layers:

  L T W H
Header 0px 0px 800px 150px
Menu 0px 150px 150px 400px
Content 150px 150px 500px 400px
Sidebar 650px 150px 150px 400px

Image of all Layers Aligned

After filling out these values, you should have the following page:

 

 

 

 

 

 

Overflow

How do we know at this point the dimensions of our content? This layout is perhaps supposed to span our entire Site of tens or even hundreds of pages, each with a different amount of content. Certainly a height of 400px for our Content Layer isn’t going to be large enough for a very long page. This is precisely the problem with using Layers in Dreamweaver: they have a fixed size and a fixed position.

To help mitigate this problem, Dreamweaver allows you control how overflow is handled. Overflow is any content that is larger than the Layer that contains it. There are four distinct ways of handling overflow:

  1. Image of VisibleVisible allows content to overflow beyond the bottom edge of the Layer. Note that if you have background colors or background images set for the Layer that they will not be applied to the overflowing content. Similarly, if you have Layers placed below an overflowing Layer then the overflowed content will run into the lower Layer. This is to say that a Layer’s size or position will never change with respect to the size of its contents or the contents of any other Layer.
     
     
     
     
     

  2. Image of HiddenHidden simply hides any overflowing content from the viewer. This will have the effect of cutting off only the bottom-portion of text or images. 
     
     
     
     
     
     
     

  3. Image of ScrollScroll will put both vertical and horizontal scroll-bars on the Layer so the user can scroll only a portion of the page to view the overflowing content.

    Note first that the scroll-bars will not show up in Dreamweaver, only in the version rendered by a real web browser. Note second that the web browser will always display both horizontal and vertical scroll-bars, even if the content fits within the Layer. And note finally that this has some usability concerns in that many users might not expect your page to have “inner” scroll-bars: most users are accustomed to having a single scroll-bar on the right-hand side of the page.
     
     

  4. Image of AutoAuto is sort of a hybrid between visible and scroll in the sense that it will only use vertical scroll-bars (unless there is a very wide image or text that can’t be wrapped to the width of the Layer), and it will only display scroll-bars if the content overflows the Layer. The same usability concern about multiple scroll-bars exists here as well.

It is this author’s preference to always use “auto” when faced with this decision despite the usability concerns.

 

 

Adding Content to Layers

Once you have all your Layers drawn out and positioned exactly the way you want, you can add your content to them. Adding content to Layers is just as easy as adding content to the Body Layer, which is what we’ve been doing up to this point.

To add content to a Layer, simply click inside the Layer to put your cursor inside it, and then add away!

Enough With Layers…

You may have come to the conclusion that Layers are perhaps useful for single-page Sites or ones with a lot of visuals but that they are less useful for content- or text-heavy Sites or ones with a large number of pages. This conclusion is in many ways accurate. If you envision your Site being very large or having a wide variety of content types (e.g. some pages being very short while others being long while others being image-laden or with dissimilar layouts), then you will likely grow frustrated with the inflexibility of Layers. The solution is to use Dreamweaver CS3’s included layout options or to create your own. The latter of these options requires a fairly detailed knowledge of CSS.

What’s Next

So now we know how to add Layers and how to add content into those Layers. Fundamentally we’ve addressed “all there is” to designing and creating a Web Site. What’s left is how to make your site more customized (beyond what is possible with Layers) and easier to maintain.

At this point, if you wanted to change the color scheme of your Site, you’d have to manually change each page, just as you would if you wanted to change the layout of your entire Site. Both of these issues and more are addressed using Dreamweaver’s concept of Styles and Templates.

While we do occasionally venture into Styles and Templates in the Walk-In Workshop accompanying this curriculum, we omit these subjects here. For more information on these subjects, please proceed to the Resources section.

Resources

Although we’ve given a foundation for getting Web content online using Dreamweaver, we’ve only scratched the surface of using Dreamweaver to its fullest potential.

What we Left Out

Of the many things we didn’t cover, here is a list of those that you might look into next:

  • Styles
    are used as an extension to the built-in notion of “bold” and “italics.” That is, you could define a Style called, perhaps, french that makes everything blue and then apply that Style to everything that is french. If you then later wanted to change everything in french to be green, it would simply be a matter of changing the Style.

    Styles are Dreamweaver’s metaphor for dealing with CSS, so knowledge of CSS selectors and properties would be greatly helpful.

  • Templates
    are used to establish a common look across multiple pages. Simply, a Template is simply a regular Dreamweaver page but with the addition of so-called Template Regions. When a Template Region is added to a Page, its contents may be changed by any page that uses that Template. So if you wanted your Site’s menu to be constant across all its pages, you need only create a Template for your Page and create a Template Region for your content.

    Then you re-use your Template many times: each time you can change the content section of the page, but since the menu is not inside of a Template Region, it will not be editable. This has the added advantage that when you update a Template, all the pages that are created using that Template are updated accordingly.

Beyond these Dreamweaver offers many additional features including JavaScript Behaviors, Spry Data Objects, Database Integration, and much more.

Where to Go

To continue learning Dreamweaver, consider the following:

  • Dreamweaver’s Built-In Help
    is a better resource than you may expect. The newest versions of Dreamweaver (MX 2004 and later) all come with excellent help sections that are in many cases tutorial-based rather than troubleshooting-base. From this author’s experience, you will be hard-pressed to find a subject that is not very clearly covered and demonstrated using Dreamweaver’s built-in help.

    To access the built-in help features, simply press F1 while in Dreamweaver. This help information is also available online.

Styles

Motivation

A Review of CSS

Adding New Styles

Using Styles

Managing Styles

Templates

Motivation

Creating a New Template

Template Regions

Editable Regions
Optional Regions
Repeating Regions

Using Templates

Modifying Templates

Last modified: April 28, 2014