]> Shamusworld >> Repos - ardour-manual/blobdiff - include/about-ardours-interface.html
Replaced divs by imagemap in Ardours Interface Overview for maintainability and PDF...
[ardour-manual] / include / about-ardours-interface.html
index 52add950b4494ce705e7a9f7055fda7062b88522..b9e5d3fecf4073777dbbed732eb1793f1b606c1b 100644 (file)
@@ -5,74 +5,67 @@
 </p>
 
 <figure style="width:100%;">
+       <img src="/images/editor_map.png" alt="The Editor window" usemap="#editor_map" width="600" height="325">
+       <map name="editor_map">
+               <area shape="rect" coords="0,0,336,8" href="@@main-menu" />
+               <area shape="rect" coords="336,0,600,8" href="@@status-bar" />
+               <area shape="rect" coords="0,8,68,28" href="@@transport-bar" />
+               <area shape="rect" coords="68,8,108,28" href="@@selection-and-punch-clocks" />
+               <area shape="rect" coords="108,8,144,28" href="@@other-toolbar-items#monitor-options" />
+               <area shape="rect" coords="144,8,196,28" href="@@other-toolbar-items#latency-compensation-info" />
+               <area shape="rect" coords="196,8,228,28" href="@@other-toolbar-items#playhead_options" />
+               <area shape="rect" coords="228,8,348,28" href="@@transport-clocks" />
+               <area shape="rect" coords="348,8,368,28" href="@@other-toolbar-items#status_indicators" />
+               <area shape="rect" coords="368,8,384,28" href="@@other-toolbar-items#monitor_section_info" />
+               <area shape="rect" coords="384,8,428,28" href="@@selection-and-punch-clocks" />
+               <area shape="rect" coords="428,8,552,28" href="@@mini-timeline" />
+               <area shape="rect" coords="552,8,600,28" href="@@other-toolbar-items#mode_selector" />
+               <area shape="rect" coords="0,28,36,324" href="@@audiomidi-mixer-strips" />
+               <area shape="rect" coords="36,28,144,36" href="@@toolbox" />
+               <area shape="rect" coords="144,28,188,36" href="@@grid-controls" />
+               <area shape="rect" coords="188,28,240,36" href="@@nudge-controls" />
+               <area shape="rect" coords="516,28,600,36" href="@@zoom-controls" />
+               <area shape="rect" coords="476,36,600,60" href="@@selection-and-punch-clocks" />
+               <area shape="rect" coords="476,60,600,324" href="@@editor-lists" />
+               <area shape="rect" coords="36,36,476,76" href="@@ruler" />
+               <area shape="rect" coords="36,296,476,324" href="@@summary" />
+               <area shape="rect" coords="36,76,44,296" href="@@track-and-bus-groups" />
+               <area shape="rect" coords="44,136,476,156" href="@@audio-track-controls" />
+               <area shape="rect" coords="44,96,476,136" href="@@midi-track-controls" />
+               <area shape="rect" coords="44,156,476,176" href="@@automation" />
+               <area shape="rect" coords="44,176,476,196" href="@@audio-track-controls" />
+               <area shape="rect" coords="44,196,476,236" href="@@bus-controls" />
+               <area shape="rect" coords="44,236,476,296" href="@@control-masters-mixer-strips" />
+       </map>
 
-  <div class="container" style="float:left; width: 600px; height: 347px; background-image: url('/images/Split_Backgroundeditor.png');">
-                       <a href="/ardours-interface/main-menu/" alt="Main Menu"><div class="hoverimg" style="left: 0px; top: 11px; width: 297px; height: 13px; background-image: url('/images/Split_MainMenu.png');"></div></a>
-                       <a href="/ardours-interface/status-bar/" alt="Status Bar"><div class="hoverimg" style="left: 297px; top: 11px; width: 303px; height: 13px; background-image: url('/images/Split_StatusBar.png');"></div></a>
-                       <a href="/ardours-interface/the-transport-bar/" alt="Transport"><div class="hoverimg" style="left: 0px; top: 24px; width: 86px; height: 24px; background-image: url('/images/Split_Transport.png');"></div></a>
-                       <a href="/ardours-interface/selection-and-punch-clocks/" alt="Record and Punch Options"><div class="hoverimg" style="left: 86px; top: 24px; width: 50px; height: 24px; background-image: url('/images/Split_RecordandPunchOptions.png');"></div></a>
-                       <a href="/ardours-interface/status-indicators/#monitor-options" alt="Monitor Options"><div class="hoverimg" style="left: 136px; top: 24px; width: 46px; height: 24px; background-image: url('/images/Split_MonitorOptions.png');"></div></a>
-                       <a href="/ardours-interface/status-indicators/#playhead_options" alt="Playhead Options"><div class="hoverimg" style="left: 182px; top: 24px; width: 43px; height: 24px; background-image: url('/images/Split_PlayheadOptions.png');"></div></a>
-                       <a href="/ardours-interface/transport-clocks/" alt="Clocks"><div class="hoverimg" style="left: 225px; top: 24px; width: 154px; height: 24px; background-image: url('/images/Split_Clocks.png');"></div></a>
-                       <a href="/ardours-interface/status-indicators/#status_indicators" alt="Status Indicators"><div class="hoverimg" style="left: 379px; top: 24px; width: 23px; height: 24px; background-image: url('/images/Split_StatusIndicators.png');"></div></a>
-                       <a href="/ardours-interface/selection-and-punch-clocks/" alt="Selection Clock"><div class="hoverimg" style="left: 402px; top: 24px; width: 55px; height: 24px; background-image: url('/images/Split_SelectionClock.png');"></div></a>
-                       <a href="/ardours-interface/mini-timeline/" alt="Navigation Timeline"><div class="hoverimg" style="left: 457px; top: 24px; width: 90px; height: 24px; background-image: url('/images/Split_NavigationTimeline.png');"></div></a>
-                       <a href="/ardours-interface/status-indicators/#mode_selector" alt="Level, Mode, Scripts"><div class="hoverimg" style="left: 547px; top: 24px; width: 53px; height: 24px; background-image: url('/images/Split_LevelModeScripts.png');"></div></a>
-                       <a href="/ardours-interface/audio-midi-mixer-strips/" alt="a Mixer Strip"><div class="hoverimg" style="left: 0px; top: 48px; width: 43px; height: 299px; background-image: url('/images/Split_aMixerStrip.png');"></div></a>
-                       <a href="/ardours-interface/the-toolbox/" alt="Toolbox"><div class="hoverimg" style="left: 43px; top: 48px; width: 112px; height: 14px; background-image: url('/images/Split_Toolbox.png');"></div></a>
-                       <a href="/ardours-interface/the-zoom-controls/" alt="Zoom Controls"><div class="hoverimg" style="left: 155px; top: 48px; width: 111px; height: 14px; background-image: url('/images/Split_ZoomControls.png');"></div></a>
-                       <a href="/ardours-interface/the-grid-controls/" alt="Grid Controls"><div class="hoverimg" style="left: 266px; top: 48px; width: 90px; height: 14px; background-image: url('/images/Split_GridControls.png');"></div></a>
-                       <a href="/ardours-interface/the-edit-point-control/" alt="Edit Point"><div class="hoverimg" style="left: 356px; top: 48px; width: 40px; height: 14px; background-image: url('/images/Split_EditPoint.png');"></div></a>
-                       <a href="/ardours-interface/the-nudge-controls/" alt="Nudge Controls"><div class="hoverimg" style="left: 396px; top: 48px; width: 61px; height: 14px; background-image: url('/images/Split_NudgeControls.png');"></div></a>
-                       <a href="/ardours-interface/selection-and-punch-clocks/" alt="Selection and Punch Clocks"><div class="hoverimg" style="left: 498px; top: 62px; width: 102px; height: 26px; background-image: url('/images/Split_SelectionandPunchClocks.png');"></div></a>
-                       <a href="/ardours-interface/editor-lists/" alt="Editor Lists"><div class="hoverimg" style="left: 498px; top: 88px; width: 102px; height: 259px; background-image: url('/images/Split_EditorLists.png');"></div></a>
-                       <a href="/ardours-interface/the-ruler/" alt="Ruler"><div class="hoverimg" style="left: 43px; top: 62px; width: 455px; height: 49px; background-image: url('/images/Split_Ruler.png');"></div></a>
-                       <a href="/ardours-interface/the-summary/" alt="Summary"><div class="hoverimg" style="left: 43px; top: 295px; width: 455px; height: 52px; background-image: url('/images/Split_Summary.png');"></div></a>
-                       <div class="hoverimg" style="left: 43px; top: 110px; width: 7px; height: 185px; background-image: url('/images/Split_GroupTabs.png');"></div>
-                       <div class="hoverimg" style="left: 50px; top: 110px; width: 448px; height: 26px; background-image: url('/images/Split_MasterBus.png');"></div>
-                       <div class="hoverimg" style="left: 50px; top: 136px; width: 448px; height: 27px; background-image: url('/images/Split_anAudioTrack.png');"></div>
-                       <div class="hoverimg" style="left: 50px; top: 163px; width: 448px; height: 26px; background-image: url('/images/Split_someAutomation.png');"></div>
-                       <div class="hoverimg" style="left: 50px; top: 189px; width: 448px; height: 27px; background-image: url('/images/Split_anotherAudioTrack.png');"></div>
-                       <div class="hoverimg" style="left: 50px; top: 215px; width: 448px; height: 26px; background-image: url('/images/Split_aMIDITrack.png');"></div>
-                       <div class="hoverimg" style="left: 50px; top: 242px; width: 448px; height: 54px; background-image: url('/images/Split_anotherMIDITrack.png');"></div>
-               </div>
+       <img src="/images/mixer_map.png" alt="The Mixer window" usemap="#mixer_map" width="600" height="325">
+       <map name="mixer_map">
+               <area shape="rect" coords="0,0,336,8" href="@@main-menu" />
+               <area shape="rect" coords="336,0,600,8" href="@@status-bar" />
+               <area shape="rect" coords="0,8,68,28" href="@@transport-bar" />
+               <area shape="rect" coords="68,8,108,28" href="@@selection-and-punch-clocks" />
+               <area shape="rect" coords="108,8,144,28" href="@@other-toolbar-items#monitor-options" />
+               <area shape="rect" coords="144,8,196,28" href="@@other-toolbar-items#latency-compensation-info" />
+               <area shape="rect" coords="196,8,228,28" href="@@other-toolbar-items#playhead_options" />
+               <area shape="rect" coords="228,8,348,28" href="@@transport-clocks" />
+               <area shape="rect" coords="348,8,368,28" href="@@other-toolbar-items#status_indicators" />
+               <area shape="rect" coords="368,8,384,28" href="@@other-toolbar-items#monitor_section_info" />
+               <area shape="rect" coords="384,8,428,28" href="@@selection-and-punch-clocks" />
+               <area shape="rect" coords="428,8,552,28" href="@@mini-timeline" />
+               <area shape="rect" coords="552,8,600,28" href="@@other-toolbar-items#mode_selector" />
+               <area shape="rect" coords="0,28,121,154" href="@@favorite-plugins-window" />
+               <area shape="rect" coords="0,154,121,237" href="@@strips-list" />
+               <area shape="rect" coords="0,237,121,324" href="@@groups-list" />
+               <area shape="rect" coords="121,28,432,33" href="@@track-and-bus-groups" />
+               <area shape="rect" coords="514,28,548,324" href="@@master-bus-strip" />
+               <area shape="rect" coords="548,28,599,324" href="@@monitor-section" />
+               <area shape="rect" coords="432,28,474,324" href="@@control-masters-mixer-strips" />
+               <area shape="rect" coords="263,33,333,324" href="@@audiomidi-busses-mixer-strips" />
+               <area shape="rect" coords="121,33,263,324" href="@@audiomidi-mixer-strips" />
+               <area shape="rect" coords="474,28,514,324" href="foldback-strip" />
+               <area shape="rect" coords="333,33,343,324" href="adding-tracks-busses-and-vcas" />
+       </map>
 
-  <div class="container" style="margin-left:10px; float:left; width: 600px; height: 347px; background-image: url('/images/Split_Background.png');">
-                       <a href="/ardours-interface/main-menu/" alt="Main Menu"><div class="hoverimg" style="left: 0px; top: 11px; width: 297px; height: 13px; background-image: url('/images/Split_MainMenu.png');"></div></a>
-                       <a href="/ardours-interface/status-bar/" alt="Status Bar"><div class="hoverimg" style="left: 297px; top: 11px; width: 303px; height: 13px; background-image: url('/images/Split_StatusBar.png');"></div></a>
-                       <a href="/ardours-interface/the-transport-bar/" alt="Transport"><div class="hoverimg" style="left: 0px; top: 24px; width: 86px; height: 24px; background-image: url('/images/Split_Transport.png');"></div></a>
-                       <a href="/ardours-interface/selection-and-punch-clocks/" alt="Record and Punch Options"><div class="hoverimg" style="left: 86px; top: 24px; width: 50px; height: 24px; background-image: url('/images/Split_RecordandPunchOptions.png');"></div></a>
-                       <a href="/ardours-interface/status-indicators/#monitor-options" alt="Monitor Options"><div class="hoverimg" style="left: 136px; top: 24px; width: 46px; height: 24px; background-image: url('/images/Split_MonitorOptions.png');"></div></a>
-                       <a href="/ardours-interface/status-indicators/#playhead_options" alt="Playhead Options"><div class="hoverimg" style="left: 182px; top: 24px; width: 43px; height: 24px; background-image: url('/images/Split_PlayheadOptions.png');"></div></a>
-                       <a href="/ardours-interface/transport-clocks/" alt="Clocks"><div class="hoverimg" style="left: 225px; top: 24px; width: 154px; height: 24px; background-image: url('/images/Split_Clocks.png');"></div></a>
-                       <a href="/ardours-interface/status-indicators/#status_indicators" alt="Status Indicators"><div class="hoverimg" style="left: 379px; top: 24px; width: 23px; height: 24px; background-image: url('/images/Split_StatusIndicators.png');"></div></a>
-                       <a href="/ardours-interface/selection-and-punch-clocks/" alt="Selection Clock"><div class="hoverimg" style="left: 402px; top: 24px; width: 55px; height: 24px; background-image: url('/images/Split_SelectionClock.png');"></div></a>
-                       <a href="/ardours-interface/mini-timeline/" alt="Navigation Timeline"><div class="hoverimg" style="left: 457px; top: 24px; width: 90px; height: 24px; background-image: url('/images/Split_NavigationTimeline.png');"></div></a>
-                       <a href="/ardours-interface/status-indicators/#mode_selector" alt="Level, Mode, Scripts"><div class="hoverimg" style="left: 547px; top: 24px; width: 53px; height: 24px; background-image: url('/images/Split_LevelModeScripts.png');"></div></a>
-                       <a href="/ardours-interface/favorite-plugins-window/" alt="Favorite Plugins"><div class="hoverimg" style="left: 0px; top: 48px; width: 66px; height: 122px; background-image: url('/images/Split_FavoritePlugins.png');"></div></a>
-                       <a href="/ardours-interface/the-strips-list/" alt="Strips List"><div class="hoverimg" style="left: 0px; top: 170px; width: 66px; height: 88px; background-image: url('/images/Split_StripsList.png');"></div></a>
-                       <a href="/ardours-interface/the-groups-list/" alt="Groups List"><div class="hoverimg" style="left: 0px; top: 257px; width: 66px; height: 90px; background-image: url('/images/Split_GroupsList.png');"></div></a>
-                       <div class="hoverimg" style="left: 66px; top: 48px; width: 363px; height: 9px; background-image: url('/images/Split_GroupsTabs.png');"></div>
-                       <a href="/ardours-interface/the-master-bus-strip/" alt="Master Strip"><div class="hoverimg" style="left: 490px; top: 48px; width: 46px; height: 299px; background-image: url('/images/Split_MasterStrip.png');"></div></a>
-                       <a href="/ardours-interface/the-monitor-section/" alt="Monitor Section"><div class="hoverimg" style="left: 536px; top: 48px; width: 64px; height: 299px; background-image: url('/images/Split_MonitorSection.png');"></div></a>
-                       <a href="/ardours-interface/control-masters/" alt="Control Masters Strips"><div class="hoverimg" style="left: 429px; top: 48px; width: 61px; height: 299px; background-image: url('/images/Split_ControlMastersStrips.png');"></div></a>
-                       <a href="/ardours-interface/busses-mixer-strips/" alt="a Bus Strip"><div class="hoverimg" style="left: 373px; top: 57px; width: 43px; height: 290px; background-image: url('/images/Split_aBusStrip.png');"></div></a>
-                       <a href="/ardours-interface/audio-midi-mixer-strips/" alt="an Audio Strip"><div class="hoverimg" style="left: 66px; top: 57px; width: 45px; height: 290px; background-image: url('/images/Split_anAudioStrip.png');"></div></a>
-                       <a href="/ardours-interface/audio-midi-mixer-strips/" alt="a MIDI Strip"><div class="hoverimg" style="left: 155px; top: 57px; width: 43px; height: 290px; background-image: url('/images/Split_aMIDIStrip.png');"></div></a>
-               </div>
-
-  <!--<figcaption>
-               <ol class="multicol3">
-                       <li>Main menu</li>
-                       <li>Status bar</li>
-    </ol><ol class="multicol3" start="3">
-                       <li>Transport bar and Times</li>
-                       <li>Mode switch</li>
-    </ol><ol class="multicol3" start="5">
-                       <li>The <dfn>Mixer</dfn> window</li>
-                       <li>The <dfn>Editor</dfn> window</li>
-               </ol>
-       </figcaption>-->
   <figcaption>
                The Editor and Mixer windows. Click on a section to access its description.
        </figcaption>
   Switching between the Editor and the Mixer windows is done:
 </p>
 <ul>
-       <li>with the <a href="/ardours-interface/status-indicators/#mode_selector">Mode Selector buttons</a> in the upper right</li>
+       <li>with the <a href="@@other-toolbar-items#mode_selector">Mode Selector buttons</a> in the upper right</li>
        <li>with the <kbd class="mod2">M</kbd> shortcut</li>
        <li>with the menu <kbd class="menu">Window &gt; Editor <em>(or Mixer)</em> &gt; Show</kbd>.</li>
 </ul>
 
 <p>
-  Both windows can be visible at the same time (eg. for a multi-monitor
+  Both windows can be visible at the same time (e.g. for a multi-monitor
   setup) using <kbd class="menu">Window &gt; Editor <em>(or Mixer)</em> &gt; Detach</kbd> option in the same submenu.
 </p>
 
   output listed at the bottom.
 </p>
 <p>
-  To learn more about the process of mixing, see <a href="/mixing/">Mixing<a>.
+  To learn more about the process of mixing, see <a href="@@basic-mixing">Mixing</a>.
 </p>