Quick reminder
Make list and turn it into separate links.New CSS Rule → Advanced → Selector → a → OK
Complete formatting of Box, padding, margin, background, text, Block →display →block
See an example page showing vertical links formatted to look like buttons
Details
You can put boxes round links to make them look like buttons.
First make a horizontal or vertical list of links, without the pipe symbol.
Select each one separately and make them into real links by attaching them to another file, or dummy links by putting a hash (#) sign in the link box on the Properties Inspector bar at the bottom of the screen. When you do this DW treats them as links. (If you select them together DW makes them all into one link)
To make boxed links:
In CSS panel choose New CSS Rule icon and Advanced, then in Selector box put <a> (DW links tag) This will format all links the same. Click OK to bring up formatting menus.
In the Box section format the width and the padding (click Apply to see the results before moving on)
Also in Box section format the margin - this will separate the boxes
Also format the Border (in order to see the box) and/or the background colour.
The text can be formatted in the Type section, including whether you want the links underlined (Decoration).
To make the whole box the link rather than just the words: <a> → block → display → block
Then format a:hover by giving it a different background colour - this will make a rollover.
If you wish to format the other phases of a link (visited and active) make a New CSS Rule for each but you only need to change the colours etc, the boxes will remain in the .a tag part of the style. It is important that the correct order is kept in the CSS listing as this is then the order in Code. Links do not work properly in any other order. Note that CSS lists stylings in the order you do them but that they can be dragged to a different order. The order is: a:link; a:visited; a:hover; a:active.
Remember that the links will not work except in Preview in Browser and that dummy links are not linked to anything.
Horizontal or Vertical?
Format the links as above then Edit CSS Rule → box → float (left or right) If the container (eg sidebar or footer) is wide enough the boxes will go horizontal, otherwise they will stack themselves vertically.
To make links from a list:
Type the list of links vertically, select them all and put a # into the links box on the Properties Inspector Bar. DW Makes them into separate dummy links. They can be turned into real links later.
Select the links together and choose unordered list icon from the Properties bar - it is the bulleting icon.
(Note: an unordered list is one with no numbering or lettering - numbered or lettered ones are ordered lists)
Notice that you now have <ul> (unordered list) and <li> (list item) at the bottom of the page.
Format <ul> by New CSS Rule → list → Type → none, this removes the bullet points
Format <li> by New CSS Rule → box → float → left, this makes the list horizontal
Format <a> → block → display → block, this makes the box the link rather than just the word.
Continue formatting <a> as above: add border, background, padding, margin, etc
Format <a:hover>, change background colour
To position a horizontal list:
In CSS select the element that holds the links, (eg footer, sidebar, or wherever they are) and position →type →relative and fill in a suitable height.
In CSS select <ul> and Box → position absolute. This makes the <ul> with the links in it into an AP Div Tag which means that you can resize and position it where you want by dragging.