| Finding the dimensions of an online image or graphic is | | | | the page menu option and select page source. This will |
| easy enough. Just right click and check properties. But | | | | open the html code in Notepad. Search (ctrl + f) for |
| finding the dimensions of website layouts - like tables, | | | | table width and td width. If a web page uses tables for |
| panels, and menu bars is not quite as easy. Here are | | | | its basic layout, these dimensions will be easy to find. |
| few tricks I use to get an inside look at website | | | | CSS file |
| layouts using an online ruler, the page source, and CSS | | | | Websites that use cascading style sheets (css) in |
| files. | | | | place of tables will not show layout dimensions in the |
| Online Ruler | | | | html source code. Those specific numbers are in the |
| This is a small program that you download to your | | | | .css file for that page. To see the CSS file for a |
| computer. Once installed, the software launches a | | | | particular website, open the page source html code |
| transparent window over your computer screen with | | | | (see above) and search for .css in the text (this is |
| pixel rulers along the top and left side. If you mouse | | | | usually at the top of the page). The code should look |
| over the bottom right corner, you'll see that you can | | | | something like this: /css/mystyle.css |
| shrink or expand the box, with a constant readout of | | | | Next go to your browser window and add this code |
| the exact dimensions of the box. Drag the box around | | | | to the root directory of the URL address. Nine out ten |
| to different sections of the page to get exact | | | | times this will open the CSS file, usually in whatever |
| dimensions in pixels. | | | | html editor you have installed on your computer or in |
| Page Source | | | | notepad. Now look through the CSS file for the word |
| Looking at the html code of a website can often give | | | | "width" to see the exact dimensions of all tables and |
| you the exact dimensions of its layout. Most web | | | | columns. This method might take more time than an |
| browsers include a menu option for viewing the html | | | | online ruler, but it gives you more accurate results. |
| code of a web page. With Internet Explorer, look for | | | | |