Step 2: Frame Settings - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

When you arrive at this second tab in the advanced text box window, the screen will resemble the one below:

 

window_design_wizard_advanced_textbo_tab2x

 

 

The settings we can adjust on this screen are:

 

 

Text :

 

Text Entry - In the box provided, enter the actual text that you would like to feature within the text box. As you type you will notice the real-time preview to the right side of the window updates to show the changes you have made.

 

 

Text Font - Using the font drop-down selector, choose the preferred font in which your boxed-out text should be displayed.

 

piece_advanced_text_box_font_selector

 

 

Text Font Size - Using the font drop-down selector, choose your desired font size (6pt - 72pt).

 

Note: If you want to change your text size at a later point, you will be able to do so within the page design tab for the page in question.

 

 

Font Style - If you want to make your text bold, italic and/or underlined, click the appropriate button. The below image shows the three text style buttons.

 

button_application_bold_stylebutton_application_italic_stylebutton_application_underline_style

 

 

Font Color - This color control sets the color of your boxed-out text. Either type the name of your desired color straight into the color text-box or click the button_basic_text_box_color_browse button, to the right of the color text-box to launch the color picker tool.

 

 

Align - To align your text, within your text-box, make a selection from the list of alignment options. Choose from the following alignment options:

 

Center

Left

Right

 

Clicking your preferred alignment option will apply that to your text.

 

 

Background:

 

Frame Background Color - The central area of your text box (in which the text will appear) has a background color that you can set using this control. Click the button_basic_text_box_color_browse button to launch the color picker tool.

 

Alternatively you can simply type the name (or hexadecimal reference) into the color text box directly.

 

 

Settings:

 

Width - Use the up/down arrow controls to increase/decrease the width of your text box (in pixels). Alternatively, simply type the value in place of the existing width value.

 

piece_advanced_text_box_width

 

 

Height - Use the up/down arrow controls once again (but this time, next to the 'height' setting) to increase/decrease the height of your text box (in pixels). Alternatively, simply type the value in place of the existing height value.

 

 

Note: The most common screen display size on modern computers is 1024 wide by 768 pixels high. Remembering this dimension will give you a good idea as to how high and how wide you want the box to be. For example, if you specify a width of 500 pixels that will be roughly half of the width of a typical computer display. It's also worth remembering the settings for your Web page. There's no point in creating a text box that is 600 pixels wide if you've set the main panel width to be 500 as this would mean you'd be trying to fit in a text box that was too wide for the page.

 

 

Padding - Padding is the space between the outer edge of your text box and the text within it - almost like an internal 'margin'. To increase this space, use the up/down arrow controls to increase/decrease the padding value (in pixels).

 

 

Alignment in Page - You can choose whether you would like your text box to be aligned to the left, center or right of your Web page. To adjust this setting, select the appropriate option from the list provided.

 

 

Once you are happy with your settings you can click the 'Insert' button to insert the completed text box into your Web page.

 

button_advanced_text_box_insert

 

 

Note: Each graphical frame is made up of many different graphical images. This means that once you have inserted a graphical frame into your page various aspects such as the design itself and the width cannot be edited. This means it is well worth double checking before you insert a graphical frame into your document. If you find you do not like the inserted frame and want to choose a different one instead the easiest thing is to cut out the text that typed into the first frame and copy it to your clipboard (i.e. press CTRL C), and then right click to select the Graphical Frames option again. You can then choose a different design and just paste the existing text into the box labeled Text.

Home  Previous  Next