Creating New HTML/CSS Pages

To create a new HTML page click on the file menu, and select new (or press CTRL+F1). Give you new HTML page a name and click save. You will notice that after you click save that a new HTML file was created, and a new CSS file was created. By default the HTML page contains the following link:

<link rel="stylesheet" type="text/css" href="YOUR FILE NAME style.css" />

This links the style sheet with your new HTML page. If you are not planning on using an external style sheet, select your style sheet in the top tab (it will be named YOUR FILE NAME style.css), click on the file menu and select close current (CTRL+F3). Finally remove the link from your new HTML page.

If you only want to create a style sheet (CSS) then go to the file menu and select new (CTRL+F1). When naming your file change the extension from .html to .css. This create a blank style sheet, and not create a HTML page with it.

Opening Existing HTML/CSS Pages

To ppen an existing HTML page, click on the file menu, and select open (or press CTRL+F2). Navigate to your HTML page and click open. Your HTML page will be opened and displayed on its own tab. Unlike with file-new, file-open will not open style sheets with your HTML file.

To open an existing CSS page, click on the file menu, and select open (or press CTRL+F2). Navigate to the folder that has your CSS file in it. You will notice that your CSS file does not appear in the open file browser. To find you file simply type in the first few letters of its name. A list of all files will appear. Select your CSS file, and click open.

Using the Live View Environment

HTML Live View uses a unique environment to help you create web pages. If you open or create a HTML file you will notice that your screen is split into two parts.

The left section of your screen is the HTML Code Editing panel. This panel is very similar to a notepad window.

The right panel is an Internet Explorer Web Browser that displays what your HTML page looks like. The web browser is updated in real time, so as you make changes to your HTML page, you will immediately see your changes.

In between these two panels is a splitter. This will allow you to control the size of each panel. If you are working on a HTML page and you need to be able to clearly see your design it may be useful to you, to make your HTML editing workspace smaller so that you can clearly see how your web page will look full screened.

At the top of the screen, below the file menu you will find a tabs for each page you are editing. If you want to switch from one page to another, simple click on the tab are it will switch your screen to editing the selected tab. To close a tab select it, and go to the file menu, and click Close Current (or press CTRL+F3) and the selected tab will close. To close all tabs, go to the file menu and click Close All (or press CTRL+F4).

Using the Tools

The first tool HTML Live View has to help you create web pages, is the Tag List. The Tag List can be found under the Tools menu, by clicking Tag List (or by pressing CTRL+F5) The Tag List is a complete list of all HTML tags. The use the tag list, simply move the editor cursor to the position that you want to insert a tag, and double click the tag that you want to insert. The tag will be inserted into your HTML page, and the cursor will be moved to the tag to allow you to quickly continue editing. To view detailed information on a selected tag in the tag list, right mouse click the tag and select Tag Information...

The second tool HTML Live View has to help you create web pages, is the Auto-Complete feature. Auto-Complete is a feature that will attempt to guess what you are trying to type as you type it. Currently Auto-Complete will only attempt to guess tags, but eventually attributes and styles will be added to it.

The third tool used to help you, is the options tool. Through the options tool you can change settings of HTML Live View to make the editing process easier. If you are having problems seeing the small font, use the options menu to increase the font size, or change the colors to increase/decrease the contrast.

Using the Console

The console is a tool designed for advanced users. Using the console incorrectly can cause data loss and damage if used incorrectly. Caution is advised.

Console Commands

Console commands come in 2 formats. The first format of commands are known as empty commands. These commands take in no value, or an empty value of "()". The Second format of commands are the value commands. These commands take in a value and modify some part of HTML Live View. The format of all commands is:

CommandType.CommandKeyWord Value

The 3 Types of Commands

Commands

The first command type is "Commands". This command type is used to modify some part of the console. All of these commands will start with "Commands.".

Get

The second command type is "Get". This command type is used to get information back from the console. However, unlike the "Commands" command type, these commands can be used to get information on all parts of HTML Live View. All of these commands will start with "Get.".

Set

The third command type is "Set". This command type is used to change the value of a setting. This command must take in a value to be used. Values for set commands vary based on what set command is used. If you leave out the value for a set command, the command will not be recognized and you will be returned an error. All of these commands will start with "Set.".

Complete List of Console Commands and Their Funcitons

Note: "()" is an empty value, this means that no value should be given to the command. However if there is some text within the "()" then a value should be entered without including the "()".

Commands.Clear ()

This command clears the console of all data. It can be useful if you have previously used a large number of commands, and the console is getting cluttered.

Commands.Help ()

This command will bring up useful information about all commands through the use of this help page.

Commands.Close ()

This command will close the console.

Commands.Exit ()

This command will completly exit HTML Live View

Get.Files ()

This command will return a list of all currently opened files. This command is useful for finding where your files are located, and for internal testing.

Get.FileIndex ()

This command will return the integer value of the largest index of an open file. This command is primarly used for internal testing.

Get.ProgramSettings ()

This command will return all settings information about HTML Live View. The settings information that is returned is similar to the settings found in the options menu. This command is very useful, especially when using the Set command.

Set.BackColor (COLOR)

This command takes in a color as a value. The color should be formated as a standard color name, such as "blue", "red", or "green". This command does not take in hexadecimal values. If used correctly, this command will return "ProgramSettings.BackColor=COLOR" where "COLOR" is the color that you entered.

Set.ForeColor (COLOR)

This command takes in a color as a value. The color should be formated as a standard color name, such as "blue", "red", or "green". This command does not take in hexadecimal values. If used correctly, this command will return "ProgramSettings.ForeColor=COLOR" where "COLOR" is the color that you entered.

Set.WordWrap (BOOLEAN)

This command takes in a boolean as a value. There are two boolean choices, true and false. True will turn on wordwrap and false will turn off wordwrap. If used correctly, this command will return "ProgramSettings.WordWrap=BOOLEAN" where "BOOLEAN" is true or false based on what your choice was.

Set.FontFamily (STRING)

This command takes in a string value of the font that you want to switch to. Font family strings must be formated correctly. To change to the font "Time New Roman" you must type in "Times New Roman", with no quotes around it. If used correctly, this command will return "ProgramSettings.FontFamily=STRING where "STRING" is the font family you attempted to switch to.

Set.FontSize (DECIMAL)

This command takes in a decimal value of the font size that you want to switch to. If a negative number is used and error will be returned. If used correctly, this command will return "ProgramSettings.FontSize=DECIMAL" where "DECIMAL" is the font size that you want to switch to.

Set.RefreshHTMLOnCSSChange (BOOLEAN)

This command takes in a boolean as a value. There are two boolean choices, true and false. Setting this feature to true will make all web browsers refresh whenever a change is made to a CSS document. If used correctly, this command will return "ProgramSettings.RefreshHTMLOnCSSChange=BOOLEAN" where "BOOLEAN" is true or false based on what your choice was.

Set.ReloadOnClick (BOOLEAN)

This command takes in a boolean as a value. There are two boolean choices, true and false. Setting this feature to true will refresh the current web browser when the text box is clicked. Setting this feature to false can be useful when testing larger web pages. If used correctly, this command will return "ProgramSettings.ReloadOnClick=BOOLEAN" where "BOOLEAN" is true or false based on what your choice was.

Set.SaveSettings (BOOLEAN)

This command takes in a boolean as a value. There are two boolean choices, true and false. If this setting is true when HTML Live View closes, a text file with your current settings will be created. This text file, if it exists, is used when you open HTML Live View to load user settings. Setting this feature to false will stop the creation of the settings text file, but it will not delete already existing settings files. If used correctly, this command will return "ProgramSettings.SaveSettings=BOOLEAN" where "BOOLEAN" is true or galse based on what your choice was.

Set.ReloadOnType (BOOLEAN)

This command takes in a boolean as a value. There are two boolean choices, true and false. This setting controls if web browsers are reloaded when users type into the editing text boxes. blah blah blah to be continued...