Oblikovanje spletnih strani

Oblikovanje odstavkov, naslovov ...

Spletno stran odpri v oknu Composer - ja.

1. Klikni na mesto, kjer želiš začeti z oblikovanjem, če pa je besedilo že napisano ga označi.
2. Klikni na puščico, zraven Body Text in iz dobljenega seznama izberi ustrezno oblikovanje:
3. • Body Text: Nam da osnovno oblikovanje besedila za navadno besedilo (regular text).
   • Paragraph: Vstavi zaznamek (tag) za nov odstavek,  uporabi to če hočeš začeti nov odstavek. .
   • Heading 1 - Heading 6: Oblikuje označen del besedila kot naslov. Heading 1 je največji po velikosti, medtem ko je Heading 6 najmanjši po velikosti.
   • Address: Se uporablja kot "podpis" spletne strani, ki  pokaže na avtorja strani  na primer: user@example.com

     Lahko vključiš datum in avtorske pravice. To oblikovanje se ponavadi uporablja na dnu strani pod vodoravno črto. Brskalnik pokaže to oblikovanje kot ležečo pisavo.

   • Preformat: Se uporablja za besedila kot naprimer : primeri kode,  izpisi podatkov in poštnih sporočil, ki jih hočeš enako izpisane v različnih brskalnikih. V osnovnem oblikovanju besedila večina brskalnikov samodejno odstrani dodatne presledke, tabulatorje in prazne vrstice. Če pa uporabiš  Preformat oblikovanje pa ostane besedilo tako, kot je bilo napisano v originalu.

Oblikovanje seznamov:

1. Klikni na začetek vrstice, kjer želiš narediti seznam.
2. Odpri meni Format in izberi List.
3. Izberi si obliko seznama:
4. • Bulleted: Pred vsako vrstico besedila v seznamu  bo pika oz. krogec.
   • Numbered: Pred vsako vrstico besedila v seznamu  bo številka - oštevilčen seznam.

Changing Text Color, Style, and Font

To change the style, color, or font of selected text:

1. Select the text you want to format.
2. Open the Format menu and choose one of the following:
3. • Font: Use this to choose a font. If you prefer to use fonts specified by the reader's browser, select Variable Width or Fixed Width.

     Note: Not all fonts installed on your computer appear. Instead of specifying a font that may not be available to all who view your web page, it's generally best to select one of the fonts provided in the menu since these fonts work on every computer. For example, the fonts Helvetica, Arial, Times, and Courier generally look the same when viewed on different computers. If you select a different font, it may not look the same when viewed using a different computer.

   • Size: Use this to choose a relative font size or select an option to increase or decrease text size (relative to the surrounding text).
   • Text Style: Use this to select a style, such as italic, bold, or underline, or to apply a structured style, for example, Code.
   • Text Color: Use this to choose a color from the color picker. If you are familiar with HTML hexadecimal color codes, you can type a specific code or you can just type a color name (for example, "blue"). You'll find a handy color code converter here.

To change the background color of the page:

1. Click anywhere in the page.
2. Click the background color block in the Format toolbar.
3. Choose a background color from the Block Background Color dialog box.
4. Click OK.

Tip: To quickly change the color of text to the color last used, select the text, then press Shift and click on the text color block in the Format toolbar. This is useful when you want to use one color for separate lines of text.

You can also use an image as a background. See Setting Page Colors and Backgrounds.

[ Return to beginning of section ]

Removing or Discontinuing Text Styles

To remove all text styles (bold, italic, and so on) from selected text:

1. Select the text.
2. Open the Format menu and choose Remove All Text Styles.
3. Continue typing.

To continue typing text with all text styles removed:

1. Place the insertion point where you want to discontinue the text styles.
2. Open the Format menu and choose Discontinue Text Styles.
3. Continue typing.

[ Return to beginning of section ]

Finding and Replacing Text

To find text in the page you're currently working on:

1. Click to place the insertion point where you want to begin your search.
2. Open the Edit menu and choose Find and Replace. You see the Find and Replace dialog box.
3. Type the text you want to locate in the "Find what" field. To narrow the search, check one or more of the following options:

   
   

   • Match upper/lower case: Use this to specify whether the search is for case-sensitive text.
   • Wrap around: Use this to search to the end of the page and then start again from the top or bottom, depending on whether you are searching forward or backwards.
   • Search backwards: Use this to search back from the insertion point to the beginning of the page.
4. Click Find Next to begin searching. When Composer locates the first occurrence of the text, click Find Next to search for the next occurrence.
5. Click Close when you are done.

To find and replace text in the page you're currently working on:

1. Click to place the insertion point where you want to begin your search.
2. Open the Edit menu and choose Find and Replace. You see the Find and Replace dialog box.
3. Type the text you want to find and then type the replacement text.
4. To narrow the search, check one or more of the following options:
• Match upper/lower case: Use this to specify whether the search is for case-sensitive text. If you don't select this option, the search will find matching text in both upper and lower case.
• Wrap around: Use this to search to the end of the page and then start again from the top.
• Search backwards: Use this to search from the end to the beginning of the page.
5. Click Find Next to search for the next occurrence. Composer selects the next occurrence of the text.
6. Click Replace to replace the selected text with the replacement text. Click Replace and Find to replace the selected text and find the next occurrence. Click Replace All to replace every occurrence in the document with the replacement text.
7. Click Close when you are done.

[ Return to beginning of section ]

Inserting Horizontal Lines

Horizontal lines are typically used to separate different sections of a document visually. To insert a horizontal line (also called a rule) in your page, begin from the Composer window:

1. Click to place the insertion point where you want the line to appear.
2. Open the Insert menu and choose Horizontal Line.

Setting Horizontal Line Properties

You can customize a line's height, length, width, alignment, and shading.

1. Double-click the line to display the Horizontal Line Properties dialog box.
2. Edit any of these properties:
• Width: Enter the width and then choose "% of window" or "pixels." If you specify width as a percentage, the line's width changes whenever the Composer window's or browser window's width changes.
• Height: Type a number for the line's height (in pixels).
• 3-D Shading: Select this to add depth to the line by adding a bevel shading.
• Alignment: Specify where you want to place the line (left, center, or right).
3. Click Use as Default to use these settings as the default the next time you insert a horizontal line.
4. To edit the properties of a horizontal line manually, click Advanced Edit. See the section, Advanced Property Editor, for details.

Tip: You can select "Show All Tags" from the View menu to show all the HTML elements in yellow boxes. Click any yellow box to select everything within that HTML tag or element. Double-click any yellow box to display the Advanced Property Editor dialog box for that HTML tag or element.

[ Return to beginning of section ]

Inserting Special Characters

To insert special characters such as accent marks, copyrights, or currency symbols:

1. Click to place the insertion point where you want the special character to appear.
2. Open the Insert menu and choose Characters and Symbols. You see the Insert Character dialog box.
3. Select a category of characters.
• If you choose Accent Uppercase or Accent Lowercase, then open the Letter drop-down list and select the letter you wish to apply an accent to. (Note: not all letters have accented forms.) Select Common Symbols to insert special characters such as copyright symbols or fractions.
4. From the Character drop-down list, select the character you want to insert.
5. Click Insert.

   You can continue typing in your document (or in a mail compose window) while you keep this dialog box open, in case you want to use it again.

6. Click Close when you are done inserting special characters.

[ Return to beginning of section ]

Inserting HTML Elements and Attributes

If you understand how to work with HTML source code, you can insert additional tags, style attributes, and JavaScript into your page. If you are not sure how to work with HTML source code, it's best not to change it. To work with HTML code, use one of these methods:

• Place the insertion point where you want to insert the HTML code, or select the text you want to edit, and then open the Insert menu and choose HTML. In the Insert HTML dialog box, enter HTML tags and text, and then click Insert.
• Select an element such as a table, named anchor, image, link, or horizontal line. Double-click the element to open the associated properties dialog box for that item. Click Advanced Edit to open the Advanced Property Editor. You can use the Advanced Property Editor to add HTML attributes, JavaScript, and CSS to objects.
• Open the View menu, and choose HTML Source, or click the <HTML> Source tab in the Edit Mode toolbar at the bottom of the Composer window. (If you don't see the Edit Mode toolbar, open the View menu and choose Show/Hide; then make sure the Edit Mode Toolbar is checked.)