Page
Introduction
This page describes and shows the layout of topic pages. It helps you create new pages. Reference it for page layout and "Copy cannibalize" it to start new pages.
Centered and fixed width for 1024 and larger pixel wide displays
Pages are centered and fixed width on browser widths of 1024 pixels and wider. This give consistent displays at higher width displays. The styles.css sets this.
Centered and variable width for smaller than 1024 pixel wide displays
Pages are centered and sized to fit in the browser window on browser (display) widths less than 1025 pixels. This lets you see all the text on a lower width display without having to scroll left and right. The styles_narrow.css sets this.
Page width
For 1024 pixel and higher display widths the page width is 960 pixels to fit on 1024 x 768 displays with spare room for the web browser's vertical scroll bar. The styles.css sets this. At less than 1024 pixel display width the page width is allowed to adjust to fit.
Single column
A single column of text keeps the layout simple.
"Copy cannibalize" Page
Copy the whole ...\topics\page folder and rename the folder for your new page. In your new page's topics folder edit topics.html. Replace its content with your content. Change its title, header line and update its footer for your new page.
Links
Links mimic Wikipedia. On-site links are inline. Off-site links are in footnotes. These footnotes are the "below the horizontal line" References and Attributions sections.
Pictures is an example of an inline link. The Max Design CSS layouts[1] is an example of an external reference footnote.
Pictures
To see the whole image there are various size limites for pictures depending on page placement and the desired width to height ratio, for example, 1: 1, 4 : 3 or "wide screen" 16 : 9.
Picture descriptions are below the picture.
The maximum picture's dimensions seen completely in a browser on a 1024 x 768 display are about 880 wide by 600 high. If 1024 x 768 is the lowest resolution the page layout is for then the following are practical picture dimension limits:
1024 x 768 display
Maximum picture dimensions
- 600 x 600, 1: 1
- 800 x 600, 4 : 3
- 880 x 495, 16 : 9
Picture dimensions with room for text
- 500 x 500, 1 : 1
- 640 x 480, 4 : 3
- 880 x 495, 16 : 9
Picture dimensions with room for top of page header and text
- 400 x 400, 1 : 1
- 520 x 390, 4 : 3
- 640 x 360, 16 : 9
Pictures can also be specified as a percent width of the container's width. This has the advantage of resizing the image so that it always fits horizontally on displays less than 1024 pixels wide. It has the disadvantage of not being directly supported by Insert Image in Amaya. It also is probably the first example of where you will want to edit the source of the HTML which can be done in Amaya by selecting Views, Show source.
References
- ^ http://maxdesign.com.au/css-layouts/ Retrieved on 2015 10 25.