Interface:Main Menu

From Wiki openElement
Jump to: navigation, search

This section is a more detailed look at Category:Interface



The main menu, located by default above the editing pane, consists of four different tabs. The two last tabs (Selection and Element Style Zone) are only displayed if an element is selected on the page being edited is selected.


Default position of Main Menu in the general interface.

'Project' Tab


This menu contains general commands relating to the project.

'Home' Section

Interface-ongletprojet02.png New project: Create a new openElement project
Interface-ongletprojet03.png Open project: Open an openElement project
Interface-ongletprojet04.png Close project: Close the current project
Interface-ongletprojet15.png Import a project: (starting with version 1.29) Recover a project from an automatic backup on the web server

'Pages' Section

Interface-ongletprojet05.png New Page: Create a new page for the project, opening it in the editing pane. This page will only be included in the project's Site Explorer once it is saved
Interface-ongletprojet06.png Save All: Save all pages open in the page editor (editing pane)
Interface-ongletprojet07.png Close All: Close all pages currently open in the page editor

'Management' Section

Interface-ongletprojet08.png Preferences: Opens the project preferences menu. This menu allows users to configure the global settings of the project, web publishing (FTP) settings, website languages, website maintenance, and more...
Interface-ongletprojet09.png Resources: Opens the project's resources manager. From this menu, users can add images, videos, audio files, flash animations, and other documents to their project. These resources can then be selected using the appropriate elements.
Interface-ongletprojet10.png Htaccess: Allows users to secure the website, or only certain pages of it. This feature is only accessible if a publishing/FTP connection has been entered.
Interface-ongletprojet11.png FavIcon: Allows users to select a 'favicon', a small image/icon that serves as a symbol for the website, displaying alongside the URL in the browser address bar, title bar, tabs, bookmarks, and other shortcuts.
Interface-ongletprojet12.png Recycle Bin: Opens the project's Recycle Bin. When a page or folder is deleted, it is sent to the bin. Items can then be permanently deleted if the user chooses, from the option within the Recycle Bin.

'Publishing' Section

Interface-ongletprojet13.png Publish to Web: Publishes the website to the web. Publishing a website is only possible if connection settings have been entered in Preferences.
Interface-ongletprojet14.png Export to Folder: Exports the entire website to a local folder. All necessary files for the website to work (or uploaded to web server) will be copied to a folder on the computer, which will then be opened in a new Explorer/Finder window.

'Page' Tab


'Clipboard' Section

Interface-ongletpage02.png Paste: Pastes the items in the clipboard (from a Cut or Copy) to the current page

'Document' Section

List of available zoom options

Interface-ongletpage03.png Save: Saves the current page
CInterface-ongletpage04.png Convert to Layer: Converts the current page into a Layer page. (This option is only available for non-layer 'web' pages).
Interface-ongletpage05.png Refresh: Refreshes the current page. This reloads the page as well as the elements that it contains.
Interface-ongletpage06.png Zoom: Allows users to zoom in and out on the current page. Note: This is the browser's zoom and may cause layout issues compared to normal zoom (100%).
Interface-ongletpage07.png SEO Info: Opens the SEO menu, allowing users to enter information for search engine optimization (helps search engines' robots to find your site online). Note: This information is specific to each page of the website.

'Layer' Section

Interface-ongletpage08.png From this section, you can select a layer page to incorporate into your current page. The list of available layers will drop-down after clicking the button.

'Properties' Section

List of available server scripts

Interface-ongletpage09.png Styles: A list of available style zones for the current page. If a style zone is selected from the drop-down list, the "Element Style Zone" tab will automatically open for the selected zone.
Interface-ongletpage10.png Current Language: Allows users to select the language in which the current page is being edited. This allows one to easily pass from one version (e.g. English) of the page to another (e.g. French). The list of available languages can be found and customized under Preferences in the Project tab.
Interface-ongletpage11.png Server Scripts: Allows users to select the type of web page to generate when the site is published (PHP, ASP, etc.). Users can then execute a server script directly on the page. If none is selected, only plain html files will be generated.
Interface-ongletpage12.png Secure: Allows users to secure the page. If your page is already secure, the icon will change and allow you to either modify the secure settings or remove the security all together: Interface-ongletpage13.png

'Publishing' Section

The list of available web browsers depends on which browsers are installed on the computer.

Interface-ongletpage14.png Preview: Launches a live preview of the current page in the selected web browser. Clicking the arrow allows users to choose a web browser, and clicking the icon alone launches the default browser. Note: Only web browsers installed on the computer appear in the list of browsers.
Interface-ongletprojet13.png Publish to Web: Publishes (uploads) the website to the web. Publishing is only possible if hosting connection settings have been entered in Preferences.

'Selection' Tab

This tab is only available if an element on the page (or the page itself) is selected (the name of the element will appear in the tab's title).
Multiple elements can be selected at the same time: at this point, the Alignment section will become active.

'Clipboard' Section

Interface-ongletselection02.png Copy: Copies the selected element to the clipboard. It can then be pasted into the same page, or any other open page.
Interface-ongletpage02.png Paste: Pastes the most recently copied item to the page.
Interface-ongletselection03.png Cut: Cuts the selected element from the page to the clipboard, and allows users to paste it to the same or a different page.

Element Section

Interface-ongletpage12.png Lock: Locks the selected element in place. While an element is locked, no action can be performed on it; it cannot be deleted, modified, or moved. It can however be copied. The element can also be unlocked by clicking the same button.
Interface-ongletselection04.png Duplicate: Quick action performs a copy-and-paste of the selected element on the current page.
Interface-ongletselection05.png Delete: Quick action deletes the selected element or elements.

'Overlay Position' Section

Customize the overlay of elements in relation to one another (foreground, background, and everything in between). In the case of page layers, they will always be in the 'back' of the page.
Interface-ongletselection06.png Foreground: Moves the selected element to the foreground, in front of all the others.
Interface-ongletselection07.png Background: Moves the selected element to the background, behind all the others.
Interface-ongletselection08.png Forward: Moves the selected element forward in the overlay hierarchy, i.e. closer to the foreground.
Interface-ongletselection09.png Backward: Moves the selected element backward in the overlay hierarchy, i.e. closer to the background.

'Alignement' Section

Only available if two or more elements are selected.
Interface-ongletselection10.png Align Left: Aligns all selected elements with the position of the left-most element.
Interface-ongletselection11.png Align Right: Aligns all selected elements with the position of the right-most element.
Interface-ongletselection12.png Align Top: Aligns all selected elements with the position of the top-most element.
Interface-ongletselection13.png Align Bottom: Aligns all selected elements with the position of the bottom-most element.
Interface-ongletselection14.png Align Vertical Center: Aligns all selected elements centrally on a vertical axis.
Interface-ongletselection15.png Align Horizontal Center: Aligns all selected elements centrally on a horizontal axis.
Interface-ongletselection16.png Spread Height-Wise: Vertically spreads out all selected elements so that the distance between each is equal.
Interface-ongletselection17.png Spread Width-Wise: Horizontally spreads out all selected elements so that the distance between each is equal.

'Element Style Zone' Tab

This tab is only available if an element on the page (or the page itself) is selected. Settings will appear specific to the selected style zone (the name of the zone will appear in the tab's title).
If a different style zone is selected from the list of available zones, the tab will automatically update accordingly.

'Current Element Zone' Section


Contains three drop-down menus:

  1. Style Preset: Displays the current style preset for the selected element and options for saving changes to the current style as a new or existing preset.
  2. Style Zone: Displays the element's currently active style zone, and allows users to select a different zone to which style changes will be applied. From this, users can change the styles of just one zone (i.e. text area, image, etc.) or a parent zone (i.e. main frame) and change the element's style globally. The cascading principle of CSS is respected, so it is possible to override styles.
  3. Element State: For each style zone, there is also the current state (i.e. normal, hover/mouseover, on click, active link). Switching between cursor states allows users to customize the style and behavior of an element as the user interacts with the page.

'Style Zone' and 'Element State' Drop-Down

Example of style zones for the 'option list' element

This drop-down allows users to select the zone to which style changes will be applied. Users can apply individual styles to each zone and for different states.
The cascading principle of CSS is respected, so it is possible to override styles.

Style Zones: The list of available zones depends entirely on which element is selected. In the upper menu (drop-down), this list is restricted to the element's main style zones. There is an exhaustive list of zones in the 'Style' tab in the Elements and Styles Menu on the right of the editing pane. All elements contain the zone "main frame." This is the default zone of each element.

Element States: These are the different states of the mouse/cursor.

  • Normal: Default state in which the page/element is displayed.
  • Mouseover: Style is applied when the mouse hovers (passes over) the element in question.
  • Mouse Click: Style is applied when the element is clicked with the mouse. The Mouse Click style remains active as long as the mouse button is pressed down.
  • Active Link: Style is applied to an element/link when the visitor is on a specific page. Click through to Page Association to specify which page you want the element's style to be applied to.

'Text Styles' Section

This section contains the main actions available to modify the text styles (font, style, color, size, etc) of the element.
Note: If the element selected is the page itself, whichever text style is chosen will be applied to all the text on the page, except for elements with an "overriding" text style.

  • (a) Font: Select or import a font. The list of available fonts consists of the fonts installed on the machine being used. There are several free web fonts included, and users may also import purchased or royalty-free .ttf fonts.
  • (b) Size: Change the font size
  • (c) Color: Select color of text
  • (d) Emphasis: Apply Bold, Italics, or Underline formatting to text
  • (e) Align: Align text right, center, left, or justified
  • (f) List: Create a numbered (ordered) or bulleted (unordered) list
  • (g) Indent: Increase or decrease indentation of text
  • (h) More: Advanced formatting options, including Subscript, Superscript, Strikethrough, and special characters
  • (i) Restore Formatting: Clears all formatting from the selected text and restores defaults

If no style is explicitly defined, the visitor's browser defaults will dictate how the text is displayed.

'Background' Section

This section allows users to add/modify/remove the background style of the selected style zone.
A: Add/modify/remove a background image
B: Add/modify/remove a background color
C: Specify how the image should repeat
Note: The background image and color can be combined

'Border' Section


This section allows users to add/modify/remove the border style of the selected style zone.

To display a border, first select a border style from the available list, then choose a size.
The default color is black, but it can also be modified from this menu.

'Spacing' Section

(details) modify spacing

This section allows users to modify the spacing values for the selected style zone.

Spacing can be external (margin in css) or internal (padding in css).
The relationship between external and internal spacing, borders, and the element's content are detailed in this diagram:


Note: Depending on the selected style zone, internal and external spacing are not always accessible.

'Advanced' Section


Interface-ongletpage09.png Edit CSS: Quick link to directly edit the element's css (expert mode). The tab for editing the css of the selected element's style zone will open in the Elements and Styles Menu on the right of the editing pane.
Interface-OngletStyleZone13.pngRestore Defaults: Removes all styles and formatting, and reverts the element or style zone to its default configuration.
Interface-OngletStyleZone14.png Tools and Wizards: Contains useful tools and wizards for modifying elements' styles, including the Frame Editor. The Frame Editor allows users to quickly and easily add a frame to the selected element and customize it.

Personal tools