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 logo, 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")!
You can click on the fields in the menu field: [1]
/h/ln/l.xhtml when it is opened for the first time. [4] [5] [6] [7] [8]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]
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]
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]
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]
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]
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]
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]
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 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]
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 following options adjust the width of the image to the width of the frame: [187] [188] [189]
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]
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]
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]
You can choose from the following options for the order of the images: [258] [259]
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]
| normal | Portrait format | 648px height |
| Landscape format | 804px width | |
| small | Portrait format | 492px height |
| Landscape format | 648px width |
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]
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]
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]
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]
| e | The "E" key opens or closes the "Settings ..." window. [375] [376] |
| h | Opens or closes the "Commands" window. [377] |
| i | Opens or closes the info window. [378] |
| c | Closes all displayed "pop-up" windows. [379] |
| s | Closes the "Settings ..." window and starts or stops scrolling. [380] [381] |
| n | Only works when scrolling is active. Closes the "Settings ..." window and applies the settings. Scrolling continues immediately with the next image. [382] [383] [384] [385] |
| z | Only 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] |
| m | Saves the current display in the history. [395] |
| p | Starts and ends sound playback. [396] |
| w | Start your email program for a tip to your friend (tell a friend). [397] [398] |
| b | Shows and hides the "decorative" fields: switches between the complete display and the display of only the main content area. [399] [400] [401] |
| g | Switches to the “Gallery” view in the current window. [402] |
| d | Switches to the slide show for mobile devices in the current window. [403] [404] |
| a | Opens or closes the "Views" window. [405] |
| 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 1 | The "Pos 1" key shows the text of the first section. [412] [413] |
| End | The "End" key shows the last image of the last section. [414] [415] |
| ↑ | 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] |
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]
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]
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]
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]
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]
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]
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]
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]