Source Tab - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

As well as giving you the simplicity of being able to design your Web page in the WYSIWYG Designer window, XSitePro gives you access to the raw HTML code behind your page design too, via the Source Tab

 

The source tab is located under the Web pages tab, as showing in the below screen shot:

 

source-tab

 

 

The HTML code you will see, when viewing the source tab, is the code making up the Web page you may have already designed using the Designer window. Any changes you make in the source tab will be immediately visible on your Web page design if you switch back to the design tab, and vice versa.

 

 

What part of the Web page does this affect?

 

The specific area of your Web page that you are currently editing, be it in Design tab view or via the Source tab, is the ‘main panel’ of your Web page.

 

Remember, from your knowledge of the Page Layout of your site, this panel is as shown below:

 

example_layout_main_panel

 

 

As far as the actual HTML code for your Web page is concerned, the main panel content is in fact the ‘Body’ of the HTML page code.

 

In effect, the HTML you are editing in the source tab at any time is the HTML code that appears between the <body> and </body> tags in the page code.

 

 

To make it easier to identify the different elements in your page code, XSitePro helpfully indents and color-codes the HTML in the source tab to help you find your way quickly to the section you wish to review/edit.

 

Some examples of the sorts of indentation and color-coding used are given below:

 

This example is for a simple table:

 

 

<table style="TABLE-LAYOUT: fixed; WIDTH: 200px"

  bordercolor="#000000"

  cellspacing="0"

  cellpadding="0"

  border="1">

<tbody>

<tr>

  <td valign="top"

      align="left">Hello</td>

</tr>

</tbody>

</table>

 

 

This code, above, color-codes the opening and closing tags (in dark red text) and identifies the variable settings (in blue text). The text elements on your page are shown in black text.

 

This code, above, would appear on your page as shown below when viewed in the design tab:

 

example_source_code_table

 

 

Note: If you are not comfortable editing the HTML code for your web-page, do not worry – XSitePro takes care of all of the code for you if you would rather stay away from it. This said, if you are the sort of person who prefers to have complete control over your page HTML, the option is there for you in the source tab.

Home  Previous  Next