Need to use the HTML code editor but don't know any code?

We are often getting asked by non-coders how on earth they can update coded pages without messing up the code. With a little care, this tip will help you see where the code is and where the editable text is in the CC HTML Editor.

Make the following changes in your preferences in the application:

Open up the program in the code mode
Click on TOOLS in top bar
Go to PREFERENCES at bottom of dropdown list
In PREFERENCES choose the CUSTOMIZATION tab and open
In the left dropdown box select HTML/PHP DOCUMENTS
Click on the MODIFY HIGHLIGHTING button next to it
Under the ELEMENTS box select the DEFAULT TEXT*
On the right in FOREGROUND use the dropdown colour list to select a strong, bright colour eg.red
Over in TEXT ATTRIBUTES select BOLD
In the TEXT SIZE you can increase the size of your text to say 12 or 14
Confirm all your choices with OK and close the application.
Reopen and find one of your web pages to open up in the cc code editor.

You should now see all the default text highlighted in your chosen colour and easily distinguishable against the code. If you still see a confusion of other colours in the code. Just do the same process as above but for all the other elements (eg. javascript, html tags, comments etc.) whereas you coloured the default text in a bright colour, now change the highlights for all the other page content in the ELEMENTS box to a very pale grey. Do not make any of them bold or increase text size.

If nothing else this method will help you see what parts of the pages you can change or not, and slipping between preview and code you should be able to pick out the areas of text that you are seeing in the code... and maybe even start to learn some coding of your own!

Stick the Footer to the Bottom of the Page

Have you noticed that the fluid layouts included with the CC HTML Editor don't stick the footer to the bottom of the page as you grow the window? That can be solved as discussed at the CSS Sticky Footer site.

There are several approaches from which to choose. As usually for Web stuff, each approach offers a trade off between clarity versus compatibility with various browser versions.

Would be great if CC would build footer stickiness into the Editor's example layouts.

Get your embedded flash to Validate on W3C

This is for CC website search

To the above: Depending on the doctype of the html file the tags inside the the <object></object> have to end like this: />

Visible Right Margin

I found it interesting that when I used the help pdf and searched for "visible right margin" there were no matches. Same when searching for "right margin" and "visible" and "little right side line thingy"

Document Display Properties
Select the document type(s) that you want to have the little right side line thingy.
Click Modify Options
Check the box that says "Visible right margin"
(it doesn't call it a "right side line thingy" for some strange reason)
Click OK

Easy Rollover Image Changes for Buttons

If writing javascript scares you, or if you're just lazy and don't want to write a script at the top of the page, this is a very simple way to change images for buttons:

Start with your basic image tag:
<img src="myimage.png" />

Add the mouse over or hover function:
<img src="myimage.png" onmouseover="this.src='myimage2.png'" />
*this.src= use single quotes

Add the mouse out function:
<img src="myimage.png" onmouseover="this.src='myimage2.png'" onmouseout="this.src='myimage.png'" />
*have to change the source back to the original image, or you can change it to something different
**fun for drawing a mouse path on the screen, using 1x1 pixel sized images you can create your own little etch-a-sketch type web page by changing the image and not using an onmouseout

And lastly, if you want the button to do something, add the onclick:
<img src="myimage.png" onmouseover="this.src='myimage2.png'" onmouseout="this.src='myimage.png'" onclick="do what you want" />
*if you want to open a link onclick="location.href='cool_web_page.html'"
** if you want to open the link in a new window onclick="window.open('cool_web_page.html')"

On a side note, using onmouseover and onmouseout, you can also change background and text colors or even change the class of buttons or table cells in instances when a class:hover is not supported by certain browsers

<td bgcolor="#444444" onmouseover="this.style.backgroundColor='#000000'"
onmouseout="this.style.backgroundColor='#444444'">
*the C in backgroundColor is case sensitive

when changing classes
onmouseover="this.className='classhover'"
onmouseout="this.className='class'"
again, the N in className is case sensitive

I use Position Absolute statements, especially if creating a form and inserting the reply to self. I start text blocks precisely, images where I want. I took this option so not have difficulty placing elements where I want them to be. Here is a text statement I use. A snippet now.

Another thing I do is use what a programmer uses to position buttons boxes etc on a window and that is a co ordinate program. There are a few types available.
My method. Hand sketch roughly a layout of the page. What goes on and where. Then open a basic page and preview. Start the co ordinate program and write down the approx co ordinates of the top left position of each element on the sketch.
Using that just build it adding text, Images, Menus,Forms etc. Then fine tune for colour, Text type and attributes etc.
I should mention the sketch is on tracing paper held up to the screen. Only if in a creative mood will I jump right in. I use that technique when asked to build a site. I request a photo or sketch of what a client wants, I do not make what I think they want.

Hiya Prism,

Just to touch on your code example, you have some deprecated code in there that shouldn't be used in the style tag and should actually be in the CSS. Most everything in your style tag should be done in the CSS file instead of inline styling. The Font tags are deprecated and shouldn't be used at all and should be put into the CSS file with all the rest of the styles you have listed.

Sometimes the obvious isn't, and buried in amongst all the techy stuff there really is, a real world

What a fab idea.....

Peter

I made this HTML5 and CSS3 very basic concepts and I hope it will be useful for new users.

http://www.feizsite.com/cc/Basic_HTML5_ … oncept.pdf

I hope my approach is well guided and if you guys see anything wrong you are welcome to comment.

Enjoy it