Html Editor Tips and Tricks - Page 2

User 11165 Photo


Registered User
4,316 posts

FIND and REPLACE Feature in CoffeeCup HTML Editor

Often you have a word(s), code(s), or error(s) that need correcting throughout your document(s). For example: I might want to change <br> to <br />
You can quickly edit and correct your entries by using "Replace" in the Edit Menu on the Toolbar, without manually searching through your document for each place you want to replace something you typed or coded incorrectly.
On the Toolbar, go to Edit and click on "REPLACE" in the menu.
A window will popup for you to enter your incorrect entry in the top window and enter your corrections in the next window. You have the choice to correct in a Current Document, All Opened Documents, or Look in a folder! Quick and easy to do for correcting your documents.

Also, under Edit, you can select "FIND" to quickly find something you are looking for in your document and the results are displayed at the bottom of your HTML Editor Window, or you can go to Edit on your tool bar, and click, "Find Next".
Darce Jean
User 428900 Photo


Registered User
651 posts

Create Snippets for code that is reused alot

The HTML Editor has a tab on the left side of the program named: Snippets. Use this to store bits of custom code you use often.

To use:
Write the code into the document then hightlight all of the code you want to save.

Right click on the code and select "save selected text as snippet" A box will open and you name the snippet whatever you want. Then click on "snippets" in the tabs on the left side of the program and click "refesh" . Your new snippet should now appear.

Now whenever you want to apply that code just click on the snippet tab and you can drag and drop it into any document anywhere you want.
User 117361 Photo


Ambassador
6,076 posts

Use table Wizard

Open up new page in Editor.
Click on area between <body></body> tags.
Click on Create table icon in toolbar.
From dropdown box, choose Quick Tables and open table window
Run cursor back and forth over little window and see how numbers at top change according to the number of little boxes which are highlighted beneath your mouse.
Choose the setting you prefer (number of rows, number of columns per row) and click on selection.
In your new page you will now see a <table><tr><td></td></tr></table> with your chosen number of rows <tr></tr> containing your preferred number of cells <td></td>

They will of course be visible in a downward list, whereas on you actual screen the cells will be aligned next to one another horizontally in rows.

Add your content according to your page layout plan.

See the animated demonstration on:
www.venicedigital.com/forum-trials/tables.htm
You will need a faster connection to view this at its best.
You may prefer to pick up the PDF file version here:
http://www.venicedigital.com/forum-trials/tables.pdf
User 117361 Photo


Ambassador
6,076 posts

Creating Rollovers

Here I am going to explain how to create a simple image rollover using the HTML Editor.

1. Create 2 images of identical size
These can be for your navigation buttons, or just purely to create effect as a design detail.
2. Remember that one will replace the other when the cursor passes over them.
3. Save them to the same folder in which you will be saving the web page with the rollover effect.
4. Look carefully at the source code in the following page where I have prepared an example rollover. Do feel free to copy the code and adapt it to your own image names and/or linked pages. This image button also has a link to a second page to demonstrate how you could use these rollovers for navigation buttons on your web site.
5. It is very important to remember that if you want several rollover images on one page every one of them must have a unique name otherwise the rollover script will be confused!!
6. For more than one image, you would be wise to use consecutive numbers for the buttons in the code - so this one example of a navigation button has been called button1 either blue or red (any name will do), but for extra images I would have had to call them button2 or button3 etc.
Even if you have several rollovers on one page, the consecutive numbering in no way affects the actual positioning on your page of the rollovers.
Have a go.
Example available here:
www.venicedigital.com/forum-trials/rollover.html

Script as follows:

Put this script immediately before the </head> (or <head/>) tag

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">

<!-- Hide script from old browsers

if (document.images) {
button1Red = new Image
button1Blue = new Image


button1Red.src = "that.jpg"
button1Blue.src = "this.jpg"


}
else {
button1Red = ""
button1Blue = ""


document.button1 = ""
}
// End hiding script from old browsers -->

</script>

For extra buttons or images, you will have to multiply the 4 different sections of the script by the number of buttons or images you are using.
eg.
button1Red = new Image
button1Blue = new Image


would become:

button1Red = new Image
button1Blue = new Image
button2Red = new Image
button2Blue = new Image


and so on.

Where you position your button/image somewhere between the <body></body> tags you would see:
<A HREF="return.html" onMouseover="document.button1.src=button1Red.src" onMouseout="document.button1.src=button1Blue.src"><IMG SRC="this.jpg" WIDTH="300" HEIGHT="100" BORDER="0" NAME="button1" ALT=""></A>



Where:

IMG SRC="this.jpg" WIDTH="300" HEIGHT="100" BORDER="0" NAME="button1" ALT="">


refers to your image name and size
And:

A HREF="return.html"

refers to the linked document your user will navigate to if he clicks on the linked rollover images.
User 117361 Photo


Ambassador
6,076 posts

Centering your pages
Please note that this will soon be replaced with an updated version using tables free css styling

If you are using your HTML Editor to create pages which use tables to organize the content, it is very simple to make sure that your pages remain centred, whether in a 800 x 600 or a 1024 x 768 page resolution (and of course all others for that matter)

Let us say, for instance, that you decide to make your page the recommended 760 (or slightly less) in width.
You create a table containing the number of rows and table cells that you require for your page content.
Leave the borders visible until you have completed the page, as this makes it much easier to see what you are placing where.
Now you have the option of leaving your page abutted over to the left-hand side of the screen as in this example:
www.venicedigital.com/forum-trials/non-centred.html
or you can centre everything on the page as this following example demonstrates:
www.venicedigital.com/forum-trials/centred-tables.html

Take a look at the simple code to see where the difference lies.
In the first page, the table has been created and allowed to "sit" in the default position on the page, whereas in the second example, the table has been centred using the <div align="center"></div> around it.

I have included comments in the code to help you see where these differences lie.
There is also a simple style sheet included up in the <head></head> area of the document which can be removed totally or altered to your own specifications.
User 211794 Photo


Registered User
73 posts

Warning: you webhost may be case sensitive.

I had a situation in which some pictures displayed on my LunarPage website while others couldn't be loaded. Needless to say, the pictures did show up on my local browser during testing - otherwise I wouldn't have loaded them in the first place.
It turned out that the web host couldn't find citrix.jpg because I was asking it to load Citrix.jpg. The same situation never happened during testing because my local browser is a much looser, easy-to-get-along-with sort that doesn't care about such silly differences.

Additional information by SARFF
Registered User


Also when checking your files for case-sensitivity, be sure to check the tag (e.g. .jpg vs .JPG; or .bmp vs .BMP) I have found that in this case where it also worked using .jpg while editing and when I uploaded to my server it uploaded as .JPG and wouldn't work on the site. Just make sure all the filenames are correct from editing to uploaded files so they match and work both in the editing stage and viewing stage.

Additional information by Janys Hyde
Advisor


Don't forget that you can highlight areas of text (or the whole page) in your CC HTML Editor and transform it all to lower case.
EDIT > convert to lower case
This is particularly useful if you are attempting to bring your page up to validation for the latest W3C xhtml compliance standards.
Once you have saved the document, you will then be able to go to
DOCUMENT > Validate HTML
to see whether your coding comes up to scratch.
Important to remember that every time you make changes to your page, you should do a repeat validation, particularly if you would like to include the W3C standards logo on your pages!!
User 53909 Photo


Registered User
37 posts

Very simple fast loading buttons

In case you want simple buttons, to change on Mouse Over,
paste this style tags in the <head> </head> part:

<style type="text/css">
<!--

.but A{background-color:#A5D8DC; color:navy; text-align:center; font-weight:bold; font-size:12pt; }
.but A:HOVER{background-color:#004080; color:#FFFFFF; text-align:center; font-weight:bold; font-size:12pt; }
-->
</style>

this will change the BG color and the TEXT color on Mouse Over.
in order for this to work, the table CELL must have the CLASS in it. <td class="but"> or if you have a link which is not in a table, add <span> tag to the TEXT of the link like this:
<a href="your-page.html"><span class="but">The link text</span></a>

you can change the colors as you like in the STYLE.
Hope you like it.

Lazer.
User 6573 Photo


Ambassador
2,649 posts

Default drive for Network will not saving?

Do you keep files on a network or shared drive and you tried to set it as the default in html editor. But everytime you do it defaults back to the coffeecup directory. The default drive is designed for a file on your hard drive or in my computer not my network. So here is an easy fix so that you can use your network drive.


Window XP instructions:

1. From Windows Explorer select from your menu >Tools >Map Network Drive

2. Select a drive letter, to avoid conflict problems, make sure you select a drive that you are not using for anything else!

3. Next click the browse button and select the network folder you want to use.

4. Press Finish.

Now your drive is set - go back into HTML EDITOR and go to the preferences for setting your working directories. You should be able to select the new drive letter you have assigned to that network directory and save it. It should work.

----------- Sorry at this time I don't have the Vista instructions on how to do this. But once I get them then I will post here.

Kim :)

User 11165 Photo


Registered User
4,316 posts

Naming html files

Do not use '/' in a file name: name/.html or something/name.html.

Cliff Main wrote:
Take care when using special characters when you name a page. The "/" is telling the web server to look into a different directory, which does not exist, so the pages can't be found.
You can us dash - or underscore _, orherwise keep it simple.

Cliff.
Darce Jean
User 6573 Photo


Ambassador
2,649 posts

Eyes tired and can't see the code that well?

You can increase the font size of your code that you are viewing! From the menu select TOOLS > PREFERENCES > click CUSTOMIZE tab > click MODIFY HIGHLIGHT button

Here you can have all kinds of options to change things as you see in your code. It is a great feature you are going to love.





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.