Post by Glom on Oct 20, 2006 15:03:26 GMT -4
It's alive! It's alive!
I took a copy of the Lens Flare page and rewrote the markup to make it XHTML 1.1 and CSS 2.0 compliant. It's looks almost the same as the real page. Here's the changes that needed to be made.
And the CSS
I took a copy of the Lens Flare page and rewrote the markup to make it XHTML 1.1 and CSS 2.0 compliant. It's looks almost the same as the real page. Here's the changes that needed to be made.
- The morass of tables was replaced by CSS layout utilising a titlebar container, a sidebar container and a content container.
- I combined the logo and the titlebar image into one and pasted the "Clavius" title into the image itself. This now forms one complete image to fill the background of the 700 by 150 title container. The only text is a H1 element with the titles.
- The sidebar is similar to before, though I removed the line breaks, because it works better in case the stylesheet is not read. A simple bit of margin work in the CSS makes the change seemless.
- To extend the sidebar all the way to bottom of the content container, I mainly set the height since I don't know of a way to make a container automatically take on the height of a sibling one. (this is the one place the old fashioned table layout works better)
- The little triangles that mark the arguments have been made a non-repeating background in the H4 element and padding ensures the identation of the text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Clavius: Photography - lens flare</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta content="MSHTML 6.00.2900.2180" name="GENERATOR2" />
<link href="moonstyles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="insulation">
<div id="titlebar">
<h1>PHOTOGRAPHY<br />
lens flare</h1>
</div>
<div id="sidebar" style="height:1365px;">
<a href="index.html" title="Home page"><img id="hombtn" alt="Home page" src="btn-home.jpg" /></a>
<a href="site.html" title="Conspiracy"><img id="cspbtn" alt="Conspiracy" src="btn-consp.jpg" /></a>
<a href="photoidx.html" title="Photography"><img id="phobtn" alt="Photography" src="btn-photo.jpg" /></a>
<a href="envidx.html" title="Environment"><img id="envbtn" alt="Environment" src="btn-env.jpg" /></a>
<a href="techidx.html" title="Technology"><img id="tchbtn" alt="Technology" src="btn-tech.jpg" /></a>
<a href="vehidx.html" title="Space Vehicles"><img id="vehbtn" alt="Vehicles" src="btn-vehicle.jpg" /></a>
<a href="bibidx.html" title="Bibliography"><img id="bibbtn" alt="Bibliography" src="btn-bib.jpg" /></a>
</div>
<div id="content">
<p>All but the very simplest cameras have compound lenses composed
of several small lens elements. Zoom lenses and high-end
professional lenses may have many components. </p>
<p>When light strikes a glass surface, most of the light passes
through the glass (refracts) but a little bit of it reflects off of
it. In compound lenses, light can bounce between the lens components
and create spots of light on the final photograph. </p>
<p>If the light source is behind or to the side, not much light from
it falls directly on the lens. This is what you want. You want your
light to bounce off your subject and into your lens. But if you
point your lens so that the light source shines into it a little,
you'll get a lens flare. </p>
<h4>But the lenses used on the Apollo missions were the finest
available, custom made by <a href="http://www.zeiss.de/">Zeiss</a>.
They shouldn't have shown any lens flare.</h4>
<p>Manufacturers of high-quality lenses (including Zeiss) have
developed chemical coatings which reduce the reflectiveness of their
lenses. Under most conditions this would have reduced or eliminated
lens flare. Even with low-end lenses, it requires a very bright
light source and a certain small cone of camera-and-light angles to
produce a lens flare. </p>
<p>The primary responsibility for eliminating lens flare lies with
the photographer, not the lens maker. The person behind the camera
should be aware of lighting angles and adjust the scene accordingly.
This is what all professional (and even most amateur) photographers
do, and so you rarely see lens flare in other types of photographs.
But the astronauts were not concerned with aesthetics. Their
overriding goal was to document the mission, and that called for
them to take pictures at whatever angle was appropriate. And they
didn't have the benefit of a viewfinder either. </p>
<div class="fig" style="width:250px; float:left;">
<img src="biogon-sect.jpg" alt="Biogon cross-section" />
<address><b>Fig. 1 -</b> Cross section of the lens elements in the
modern Zeiss Biogon T 4.5/38, a descendent of the lens developed
for the Apollo missions. The horizontal line represents the
optical axis. (Courtesy Zeiss, used by permission) </address>
</div>
<p>Fig. 2 was taken on the lunar surface with a Zeiss Biogon lens,
the best available wide-angle lens. Fig. 1 shows a cross-section of
a modern Biogon lens for a Hasselblad SWC camera. </p>
<p>The dotted horizontal line represents the optical axis. The
curved white shapes are the lens elements. Each is a precisely
ground disc of glass with the cross-section shown, coated with
transparent anti-reflective coatings. The vertical lines represent
the f-stop aperture. </p>
<p>Some of the lens elements are fixed in position in the lens
barrel. Others are mounted in a moveable frame attached to the focus
ring. They can move backward and forward along the optical axis to
change the focus.</p>
<p>Ironically the Biogon lens was chosen because it was the
wide-angle lens least susceptible to focal and chromatic distortion.
Correcting for that can only be accomplished by having the many lens
elements shown in the diagram. The number of elements increases the
chance that a lens flare will occur. </p>
<div class="fig" style="width:231px; float:right;">
<img src="flare-ex.jpg" alt="Example of lens flares" />
<address><b>Fig. 2 -</b> A typical Hasselblad photograph showing
several lens artifacts.</I> (NASA: AS11-40-5873) </address>
</div>
<p>Fig. 2 displays several lens artifacts. The two very bright white
spots at upper left are images of the sun reflected between the
lenses. They are distorted by the curved surface, otherwise they'd
appear circular. If you look carefully you can see a diagonal line of
weaker reflections that includes the two bright ones. </p>
<p>The large irregularly shaped area of increased brightness is a
reflection of the aperture, the mechanical device adjusted by the
f-stop control (see <a
href="http://www.clavius.org/photoexp.html">Exposure</a>). </p>
<p>The streak at the upper right is probably the reflection of
another internal component. </p>
<p>The soft-edged patch of brightness taking up the top part of the
sky is the image of light striking some substance on the lens. It
could be the anti-reflective coating, or more likely fine lunar dust
on the lens. The astronauts had to constantly brush the camera
lenses to keep dust from accumulating on them. </p>
<a href="photoqual.html" title="Photo quality"><img id="prevbtn" alt="Prev" src="prev-btn.jpg" /></a>
<a href="photoret.html" title="Crosshairs"><img id="nextbtn" alt="Next" src="next-btn.jpg" /></a>
</div>
</div>
</body>
</html>
And the CSS
body {
color:#BBBBBB;
background:#000000;
}
h1 {
font:normal normal normal 150% helvetica,arial;
margin:90px 0px 0px 0px;
}
h4 {
color:#606080;
background:url('tri.gif') no-repeat 2px;
padding-left:15px;
}
address {
padding:10px;
font-size:80%;
background:#181820;
color:inherit;
}
a:link {
color:#FFFFFF;
background:inherit;
}
a:visited {
color:#888888;
background:inherit;
}
img {
border:0;
}
.fig {
padding:10px;
}
#insulation {
width:700px;
}
#titlebar {
width:700px;
height:150px;
background:#000000 url('logo-b.jpg') no-repeat;
padding-left:120px;
}
#sidebar {
width:100px;
background:#000000 url('menu-bg.jpg');
float:left;
line-height:0;
}
#content {
width:580px;
float:right;
padding:10px;
}
#cspbtn, #phobtn, #envbtn, #tchbtn, #vehbtn, #bibbtn {
margin-top:-4px;
}