Visual Site Designer Tips & Tricks -...

User 6573 Photo


Ambassador
2,649 posts

Share your tricks or tips for Visualsite Designer with others!

This thread is for tricks and tips only - please no problem questions. This is not an area to have conversations.

Have a problem or question or want to chit chat about this program then Start a new thread please.

When posting your tip or trick please, put a bold title at the top of the post about the subject. If you want to add a comment to existing one then use the "Quote Post". If you are adding to your existing idea that you posted, then PLEASE use the "edit post" feature to update your original posting.

Postings might be combined by monitor to keep subjects together.

Subscribe to this thread if you like to get emails on tips and Tricks people post

User 51909 Photo


Registered User
3,694 posts

Nudge Feature

Remember that when moving objects around the web page, use your keyboard arrow keys, they work as nudge buttons and make life a little easier when you are trying to get things lined up.

M
Mark Loves CoffeeCup
User 51909 Photo


Registered User
3,694 posts

Website Align

If you do not want your website to align to the left side of the page, or to the top, you can always photo edit your background image so that it will offset exactly the way you want in VSD.

Using Photoshop I took a background page and layered it over a larger goal background that permits this test website to be offset in the exact proportions that I want. It is easier to show you than explain. Please follow this link to see what I mean.

http://www.rentpadmichiana.com/test/index.html

Phil


---------------------------------------------------------------------
This posting was moved here by Mark Searson

Please note that if you are using the latest version of Visualsite Designer, the centering is no longer an issue as there is a check box option to centre your content
Mark Loves CoffeeCup
User 175417 Photo


Registered User
134 posts

Using Snippets in VSD.

As VSD does not allow you to save code as snippet for reuse,nor does notepad, you can use HTML Editor, Free one, to write and save codes, then copy and paste into VSD. Very handy if you're using HTML in VSD.

MichaelA
Bring on VSD5
User 175417 Photo


Registered User
134 posts

VSD+FREE HTML EDITOR

If you want to do more with VSD then what VSD has to offer, using the free HTML editor, create what you want, copy the code it create, and paste it into VSD's HTML BOX.You can then move it around to where you want it to be.
No more need to write HTML yourself.And the code is always correct.
Easy.

MichaelA
User 199286 Photo


Registered User
92 posts

Creating cross-browser stable text

This tip is for Visual Site Designer (VSD).

I figured out a way to lock in text so that it doesn't change from browser to browser, or allow the average viewer of your website to change the size of your website text on the fly...A problem I have been having personally when viewing my pages not only in Internet Explorer and Firefox, but in Apple Safari as well.

METHOD:

- Open up the OBJECT inspector

- Select your text using the pointer tool (which selects the text as an object)

- Click on "Allow advanced text"

- Toggle to the EFFECTS inspector

- Turn on the DROP SHADOW effect

- Set the transparency of the drop shadow to 100% (so that it can't be seen)

- DONE

UPSIDE:

- Use any text size or font you want to. It will all display exactly the way you created it in any browser. This works because the text is rendered as an image by VSD after saving and/or uploading your site.

- Your text is still text while editing the page in VSD. Make whatever changes and edits you want to at any time.


DOWNSIDE:

The text is actually rendered into an image by VSD when it saves your page and uploads it. Text cannot be selected or copied in the browser (or indexed).

(As discovered by Michelle) Embedded text links are lost using this method. I think I have a reasonable method for adding text links that I have posted further down.

I hope some of this helps until the fine crew at Coffecup do something to make this problem a non issue...

Dave Stevens
Fairly recent Coffeecup software user (I love this software).
User 199286 Photo


Registered User
92 posts

Adding embedded text links to converted text

The previously mentioned technique does not seem to allow for links once the effect is added, but at least the recovery of your links is just a simple matter of turning off the drop shadow in the original VSD version of your site.

I do have another workaround for adding links that could be done in VSD after "locking in" the text...

METHOD:

- Create buttons with the same typestyle as your body text. Make them the same colour as the background (obviously this will only work on single color backgrounds, unless you make the button a highlight colour on purpose, which might look alright depending on your site design). Create one, then copy and paste for duplicates that you can use for other links elsewhere in the text.

- Cover over the original links with the buttons. Colour the text within the buttons whatever your link color is overall.

- Retype the button text to match the original link wording

- Link the buttons as you would have if you were using text links.

UPSIDE:

- links are actually buttons, so could have rollover effects (changing text colour, font, boldness, highlighting, etc.)

- Use any font you want. It gets converted to an image later automatically when your page is uploaded.

- Text is editable in VSD, even after saving and/or uploading.

- Relatively easy to implement, and can be done directly in VSD.

DOWNSIDE:

- Font sizing is done differently for buttons than for regular text, so matching text sizes for your links to the original body copy might be a challenge.

- All text is converted to an image when the final upload is done, so it can't be catalogued or indexed.

Once again, I hope this helps.

Dave Stevens
Coffeecup-ing the light fantastic
User 199286 Photo


Registered User
92 posts

Another VSD tip for locking down text...

You could use the button feature to make a text block, as opposed to creating a regular text block and applying the invisible drop shadow...

METHOD:

- Create a box using the box drawing tool. Make the box the size of the text area you want to add to your site. It will have to be the same color as the background.

- open up the OBJECT inspector

- click on the BUTTON TEXT tab

- type in your text (note: you will have to add hard returns to fit the text...the button tool doesn't have a text wrap funtion

- DONE

UPSIDE:

- Easy to implement

- Effects can easily be applied to the text box as a whole

- Use any font you want to...it gets converted to an image on upload

DOWNSIDE:

- The button color must be the same color as the site background.

- You have to add hard returns after each line of text, because button text doesn't automatically wrap when you type it.

- Text is converted to an image on final upload so it can't be indexed (your VSD version stays as text, though, so it can still be edited)

- Embedded text links have to be added using the method I previously posted

I think the other other method I previously outlined is better, simply because the previous method allows for any background. That being said, this method could work well for text in a box for quotes and such...you decide!

Enjoy!

Dave Stevens
If you aren't using Coffeecup software, you're taking too long to make your site
User 122279 Photo


Senior Advisor
14,450 posts

Installing VSD in Windows Vista

There might be a problem running VSD in Vista. To avoid that, right click on the VSD installation file and select 'Run as administrator'. When installed that way, there should be no problems running the programme.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 11165 Photo


Registered User
4,316 posts

Using Keyboard Characters for dashes and etc in VSD
To enter dashes and etc, using keyboard characters, I use the HTML Tool:
I use: & # 8212 ; to get this: — for example, for my test. (I placed a space between characters in this example, so the browser would not convert the character to a dash, so be sure to take out the space.) And have a space before and after you enter your characters.
After you enter your characters for you dash you want, and click "ok", the next window will pop up. Select "I will Choose the Files That My HTML Object Needs Later" and click "Finish"

When you click on Preview you will get some more warning windows just select ok, and your preview will show your character.

Using the TEXT Tool
I hold the Alt Key down to enter numeric number on the numeric keypad.
Darce Jean

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.