The desktop representation

Try it first

So that you have even more fun with the pictures of my clothes and dolls, you will find a little introduction to the desktop display here.

The entire website (is that the correct German expression?) Consists of many individual pages (picture stories) and directories. This page explains how you uncover all the secrets of the desktop display (simple display) of a picture story. It is designed similarly to the desktop display of a picture story. A picture story can also be presented differently. The pin board display, for example, is intended for large screens and a fast Internet connection. Move the mouse pointer over the display and see how the display changes! If you got lost, the browser will take you back here with the "Reload" function.

I have tried to do justice to both button presses and mouse pushers.

At the top you can see the title bar with the , the title and the menu field, on the left the section list, on the right the preview images, in between the main content area (text or an image). If the window is large enough, you will also see the header and the footer.

The title of this section ("Try it first") is highlighted in color in the section list. (You're using a color screen? No sooner were you happy that monochrome monitors disappeared in the history of technology, because web browsers appear on e-book readers with razor-sharp grayscale.) You have probably already tried what happens when you move the mouse pointer over the section titles. To read the next section, move the mouse pointer to the second entry ("The menu field")!

The menu field

You can click on the fields in the menu field: [1]

The list of sections

If you move the mouse pointer over the title of a section in the list, the corresponding section will be displayed in the main part of the browser window (if you have not changed the default setting). [13] [14] [15] [16] [17]

If you are not sitting in front of a huge screen and have not set a microscopic standard font, then you only see the top of the list. Under the visible section you will find the "" button. While the mouse pointer is pointing at this button, the titles of the sections move upwards and further titles become visible. If you move the mouse pointer over the “” button above the visible section, the titles move down and the first titles become visible again. A mouse click on one of the “▲” or “▼” buttons stops the list from running and starts it again. A double click on “▲” shows the beginning of the list, a double click on “▼” the end of the list. [18] [19] [20] [21] [22] [23] [24] [25] [26] [27] [28] [29] [30] [31] [32] [33] [34] [35] [36] [37] [38]

If the browser window is large enough for the list of sections to be displayed in full, the “▲” and “▼” buttons are not visible. [39] [40] [41]

Now move your mouse over the title of the fourth section! [42] [43]

References to sections

Some words in the text are highlighted in color. These words refer to another section. If you click on a word highlighted in this way, the other section will be displayed. [44] [45] [46] [47] [48]

The thumbnails

On the right side you can see thumbnails arranged one below the other. [49] [50]

If the displayed section contains more images than can be displayed on the right side of the browser window, buttons "" and "" appear above and below the bar of the preview images. As long as the mouse is pointing at the "▼" button and that If the last preview image of the section is not yet visible, the next preview image appears below every 0.6 seconds. The preview images displayed so far move upwards or disappear from the display. A click on "▼" ends the run of the preview pictures and starts it again. A double click shows the last preview picture. [51] [52] [53] [54] [55] [56] [57] [58] [59] [60] [61] [62] [63] [64] [65] [66]

The function of the "▲" button corresponds to the "▼" button, only with the reverse direction of the preview images. [67] [68] [69]

When the mouse points to a preview image, the preview image is highlighted and the "correct" image is shown in the middle instead of the text. If you click with the mouse on the picture in the middle, the text of the section is displayed again. [70] [71] [72] [73] [74] [75]

The text

Some words in the text are highlighted by a different font. These words refer to an image. If you move the mouse pointer over an image reference, the image reference with the associated preview image will be highlighted more. [76] [77] [78] [79] [80]

The mouse pointer changes its shape. It indicates that something happens when you click the mouse: the image is displayed instead of the text. [81] [82] [83]

If you click on the picture, the text will be displayed again. [84] [85]

Give it a try! [86] [87]

Thumbnails at the end of the text

In many sections, up to five preview images are displayed below the text. These images behave like image references in the text: If you move the mouse pointer over a preview image below the text, it changes its shape and the preview image is highlighted. A mouse click on a preview picture shows the picture at the position of the text. [88] [89] [90] [91] [92] [93] [94] [95] [96] [97] [98] [99] [100] [101] [102] [103]

The picture

Why the picture? Each individual page contains many sections with many images, but at most one image is displayed in the middle of the browser window at any time. This is the picture here. [104] [105] [106] [107] [108]

The website can be viewed on a tablet computer or on a large screen for graphic design. A single image size cannot do justice to all possible screens. Therefore, you can select different sizes of the images that the web server delivers ("Image size"). [109] [110] [111] [112] [113]

The image size (in pixels) is usually not the size that is actually displayed (image display). The display is adapted to the size of the window. If the display is enlarged, the quality suffers. If the display is reduced, the quality suffers less. However, it does not make sense to transfer a large image file over a network if the image is only displayed in small format. The transfer costs time and money. Therefore, the size of the transferred image should correspond approximately to the display. If you continue to read patiently, you will learn how to choose the size. [114] [115] [116] [117] [118] [119] [120] [121] [122] [123] [124] [125] [126]

The available commands

Clicking the More button or the "H" button opens the "Commands" window. It shows an overview of the available commands. You can execute any command with the specified key or by clicking on the text of the command. [127] [128] [129] [130] [131] [132] [133] [134] [135] [136] [137]

The window shown here is only for viewing. The "real" window appears when you click the More button or press the "H" key. It disappears when the mouse runs out of the window, when you press the "H" or "C" key or click on the text "Commands" or the text "Close window". [138] [139] [140] [141] [142] [143] [144] [145] [146]

The image size

If you click on the text "Settings ..." in the "Commands" window or press the "E" key, a window like this will appear. The "demonstration window" has no effect, but you can try the "real" window. [147] [148] [149] [150] [151]

Each image is available in different pixel sizes (image size (source)), here in the sizes "normal" and "small". If the image appears "pixelated", you can choose a larger image size. [152] [153] [154] [155] [156]

The real settings window disappears when you press the "C" key or when the mouse runs out of the settings window. The next image is loaded in the selected size. [157] [158] [159] [160]

The adjustment of the presentation

The pixel size of the image file need not match the pixel size of the display. How large the image is displayed depends on the "Image display" setting. The following sections explain the available settings. The image is always centered horizontally. If the adjusted original image is taller than the frame, the top of the image is at the top of the frame. Otherwise, the image is centered vertically in the frame. [161] [162] [163] [164] [165] [166] [167] [168] [169] [170]

The width and height of the image are always stretched or compressed in the same ratio. The image is not distorted (at least not more distorted than it already is). [171] [172]

Adjustment of the picture height

The following options adjust the image to the height of the available field (frame) or show the image in its original size: [173] [174] [175] [176]

The image is displayed in its original size. [177]
reduced in height
If the height of the image is greater than the height of the available field ("frame"), the image is reduced so that the height of the image matches the height of the frame. [178] [179] [180]
enlarged to height
If the frame is taller than the picture, the picture is enlarged so that the height of the picture matches the height of the frame. [181] [182] [183] [184]
adjusted to height
The picture is reduced or enlarged so that the height of the picture matches the height of the frame. [185] [186]

Adjustment of the picture width

The following options adjust the width of the image to the width of the frame: [187] [188] [189]

reduced in width
If the image is wider than the frame, the image is reduced until it is as wide as the frame. [190] [191] [192]
enlarged to width
If the image is narrower than the frame, the image is enlarged until it is as wide as the frame. [193] [194] [195]
adjusted to width
Reduces or enlarges the image so that it is as wide as the frame. [196]

Adaptation to the frame

The following options take into account the width and height of the image and the frame to determine whether and how the image will fit the size of the frame. [197] [198] [199] [200] [201] [202] [203] [204] [205]

reduced to frame
If the image is taller or wider than the frame, it will be reduced to fit the frame and the image will be as wide or as tall as the frame. [206] [207] [208] [209] [210] [211] [212]
enlarged on frame
If the height and width of the image are less than the height and width of the frame, the image will be enlarged to the same width or height as the frame and still fit in the frame. [213] [214] [215] [216] [217] [218]
adapted to the frame
The picture is enlarged or reduced to such an extent that it is as wide or as high as the frame and still fits into the frame. [219] [220] [221] [222] [223]

Picture frame

You can choose different colors for the background on which the image is displayed. [224] [225] [226]

The selection field "Picture frame" offers "transparent" (default), "gray" and "black" to choose from. [227]

Try out different frame colors if you only show the main content area with the "B" key! [228] [229] [230]


You can automatically display changing pictures. [231] [232]

Opens the "Settings ..." window, click on "", and the picture show begins. You can set how long each picture is displayed (display time). The entered value is the duration in milliseconds. [233] [234] [235] [236]

The scrolling ends when you select a section in the section list or a preview image. A click in the image field ends the scrolling and displays the current text section. [237] [238] [239] [240] [241]

The easiest way to start and stop scrolling is with the "S" key. You can also reopen the "Settings ..." window. Clicking “” (renamed) ends the scrolling. [242] [243] [244] [245] [246]

The sequence of images

So that the picture show is not too boring, you can vary the picture sequence. [247] [248] [249]

"Random" is preset in the "Scroll" selection field. The following section explains the available options for the order of the images. [250] [251] [252]

In the box "All pictures" you can set whether only the pictures of the current section or all pictures are displayed. [253] [254]

When an image is displayed, the associated section title and the preview image are highlighted. [255] [256] [257]

Order options

You can choose from the following options for the order of the images: [258] [259]

The pictures are displayed in the order in which they appear in the picture story. If an image is currently displayed, then the scrolling begins with the displayed image, otherwise with the first image of the section or the entire image history. [260] [261] [262] [263] [264] [265]
The pictures are displayed in the reverse order as they appear in the picture story. If an image is currently displayed, then the scrolling starts with the displayed image, otherwise with the last image of the section or of the entire document. [266] [267] [268] [269] [270] [271] [272]
Each picture is reselected pseudo-randomly. How to roll a six three times in a row can also display the same picture several times in a row. [273] [274] [275] [276]
The images are mixed before scrolling starts. You can think of the pictures as a stack of playing cards that are shuffled once and then revealed card by card. The images are reshuffled before the next run. [277] [278] [279] [280] [281] [282] [283] [284]

The image files

The images are in high resolution. But with a file size of several megabytes per image, your patience would be quickly exhausted. The files must be smaller for a quick presentation. I reduced the pixel sizes and compressed the JPEG image files at the expense of quality. [285] [286] [287] [288] [289] [290] [291] [292] [293]

Most pictures have an aspect ratio of 3: 2, older pictures have an aspect ratio of 4: 3. The pixel sizes of newer image files are chosen so that the number of pixels on the larger page can be divided by three and four. [294] [295] [296] [297] [298] [299] [300]

normalPortrait format648px height
Landscape format804px width
smallPortrait format492px height
Landscape format648px width

The essentials

If you press the "B" key, you hide the title bar, the section list, the thumbnails, the header and the footer. The main content area (text or an image) then fills the entire browser window. [301] [302] [303] [304] [305]

If you press the "B" key again, all "decorative" fields will be displayed again. [306] [307] [308] [309]

Mouse reassurance

By default, the section displayed changes when the mouse points to an entry in the section list. If you select “Click” in the Section selection field, the displayed section only changes when you click the mouse. You could also choose “double click”. [310] [311] [312] [313] [314] [315] [316]

In the field image selection you can set how you select an image in the bar of the preview images. [317] [318] [319]

If you like to double-click, you can set in the "Reference" field that the image or the other section is only displayed when you double-click on an image reference or section reference in the text. [320] [321] [322] [323]

Save history

If you select sections and images, the browser does not load a new document, but only changes the display. Therefore, the browser does not create a new entry in the history. [324] [325] [326] [327] [328] [329] [330] [331] [332] [333] [334] [335]

However, you can save an URI for the current section and displayed image by pressing the "M" key. The browser then creates a new entry in the history, which is expanded to include the name of the current display. You can see the extended URI in the address field of the browser. You can then use the browser buttons "Forward" and "Back" to move through the history with the saved ads, for example. You may have to update the display (browser button "Reload" or often the key "F5") so that the browser shows the saved "position". [336] [337] [338] [339] [340] [341] [342] [343] [344] [345] [346] [347] [348] [349] [350] [351] [352] [353] [354] [355] [356] [357] [358]

To the ears

If your browser can play Ogg Vorbis sound files, you will see a button with a note symbol above the thumbnail bar, followed by a "▶" or "■" character. Clicking this button starts the sound, the next click stops it. [359] [360] [361] [362] [363] [364] [365] [366]

You can also press the "P" key to start and stop the sound. [367] [368] [369]

The sound playback button is not displayed if the picture story is embedded in the start page. [370] [371] [372] [373] [374]

For push buttons

eThe "E" key opens or closes the "Settings ..." window. [375] [376]
hOpens or closes the "Commands" window. [377]
iOpens or closes the info window. [378]
cCloses all displayed "pop-up" windows. [379]
sCloses the "Settings ..." window and starts or stops scrolling. [380] [381]
nOnly works when scrolling is active. Closes the "Settings ..." window and applies the settings. Scrolling continues immediately with the next image. [382] [383] [384] [385]
zOnly works when scrolling is active. Closes the "Settings ..." window, applies the settings and switches back to the previous image of the current scroll. If the images are chosen pseudorandomly or if the displayed image is the first of a mixed sequence of images, the currently displayed image is displayed again. [386] [387] [388] [389] [390] [391] [392] [393] [394]
mSaves the current display in the history. [395]
pStarts and ends sound playback. [396]
wStart your email program for a tip to your friend (tell a friend). [397] [398]
bShows and hides the "decorative" fields: switches between the complete display and the display of only the main content area. [399] [400] [401]
gSwitches to the “Gallery” view in the current window. [402]
dSwitches to the slide show for mobile devices in the current window. [403] [404]
aOpens or closes the "Views" window. [405]

Select a section with the keyboard

Scrn ↑The "Scrn ↑" key displays the previous section if the current section is not already the first. [406] [407] [408]
Scrn ↓The “Scrn ↓” key shows the next section if the current section is not the last. [409] [410] [411]
Pos 1The "Pos 1" key shows the text of the first section. [412] [413]
EndThe "End" key shows the last image of the last section. [414] [415]

Select an image with the keyboard

The “↑” key shows the previous picture if a picture other than the first one is selected in the bar of the preview pictures. If the first picture of the section is selected, the text of the previous section is displayed, if no picture is selected, the last picture of the section is displayed. [416] [417] [418] [419] [420] [421] [422] [423] [424] [425] [426] [427]
The "↓" key shows the next image of the current section. If the last picture of the section is selected, the text of the following section is displayed; if no picture is selected, the first picture of the section is displayed. So you can scroll through all text sections and pictures with "↓". The "↑" key does not exactly correspond to the reverse order because the text sections are arranged differently. Both arrow keys never switch directly to an image in another section, but always only to the text of the new section. [428] [429] [430] [431] [432] [433] [434] [435] [436] [437] [438] [439] [440] [441] [442]
The "←" key shows the text of the current section. [443] [444]
The “→” button shows the selected image. If no picture is selected, the first picture of the current section is displayed. [445] [446] [447] [448]

Traces of this website

This website saves the settings in the "Settings ..." window on your computer if you allow saving ("localStorage" or "sessionStorage"). [449] [450] [451] [452]

It is questionable to allow a website “from the depths of the Internet” to store data locally (and to read locally stored data!). All browsers I know can prohibit this. You should also do this on systems with certain security requirements. Don't say you are not warned! [453] [454] [455] [456] [457] [458] [459] [460] [461]

The settings that this website stores or attempts to save are probably not security-critical. Saving the settings does not add an additional security risk to the risk associated with allowing saving. That is why I did not provide the "do not save" option. [462] [463] [464] [465] [466] [467] [468]

Saving and loading the saved settings is "transparent". If you want the default again, you must (probably) delete the locally stored data in your web browser. [469] [470] [471] [472] [473]

URL of the image files

A reference to an image file looks like [474] [475]

 <jpg src="1234abcd" fmt="h" alt="Bild">Bild</jpg> 

The "src" attribute refers to the image. Each image is available in two pixel sizes and as a preview image. In this example, the image files are below the relative URLs [476] [477] [478] [479] [480]

  • images/1234abcd.jpg
  • smallimg/1234abcd.jpg
  • thumbs/1234abcd.jpg

The attribute "fmt" shows portrait (values "h" or "k") or landscape (values "q" or "p"). [481] [482] [483]

All of the images in the third section are compiled for montage / s3.jpg. The representative selection of images that is displayed in the sitemap is compiled in the montage / index.jpg image montage. [484] [485] [486] [487] [488] [489]

Why more sections?

I no longer want to steal your time. You can leave this page now, because I have already said everything there is to say about using this website. [490] [491] [492] [493] [494] [495] [496]

But I want to show what the list of sections looks like if it doesn't fit on the screen as a whole. That's why I'm writing a few more sections. And you can see a few more pictures here. [497] [498] [499] [500] [501] [502] [503] [504] [505]

wish and reality

Every web author hopes that his site will attract many web surfers. But most websites are hardly interested in anyone other than the writer. [506] [507] [508] [509] [510] [511]

The web author thinks that the surfer reads each page carefully and then follows the link that interests him the most. In fact, most surfers follow the first link that interests them halfway. It doesn't matter whether there are much more interesting references further down the page. [512] [513] [514] [515] [516] [517] [518] [519] [520] [521]


The author expects the surfer to find her way around on his website intuitively and recognize all references immediately. [522] [523] [524] [525]

The surfer expects that references are blue and underlined and that she will find a menu at the top of each sub-page, including the menu items "Home", "Contact". [526] [527] [528] [529] [530] [531] [532]

There can be a huge gap between the different expectations and devour all the cool elements of the website. [533] [534] [535] [536] [537]

A surfer takes an average of eight seconds to grasp the operation of a page. If he has not yet recorded the operation, he visits another page. These instructions for use could help to overcome the eight-second limit. What do you all mean? [538] [539] [540] [541] [542] [543] [544] [545] [546] [547]

Confusing or stimulating?

The help page is designed similarly to a page to which it offers help. As in the "real" pages, references to images are interspersed in the text. Unlike on the "real" pages, the pictures are not related to the text in terms of content. [548] [549] [550] [551] [552] [553] [554] [555] [556]

I hope that the many references in the text do not irritate you. Maybe the pictures make you curious? [557] [558] [559] [560] [561]

Write me your opinion! You can see my email address when you press the "I" key. [562] [563] [564]

The practice

Will the website be visited? The most experienced web developers cannot assess success better than Monika Musterfrau. The intensive preoccupation with the website rather prevents the website from being viewed unencumbered. Therefore your opinion is asked: what is good, what is not good, what can be improved? [565] [566] [567] [568] [569] [570] [571] [572] [573] [574] [575] [576] [577] [578]

Thank you!

Dear web surfer, [579]

Thank you for reading this instruction manual bravely until the end! I hope you enjoy the pictures. Recommend my website! [580] [581] [582] [583] [584] [585] [586] [587] [588]

The dear Herbär [589]

Now move on quickly! [590] [continue]