Main Body

Chapter 4 • Web

Building the Fixed-Width Web Page

  1. Open a new Dreamweaver document, display Code View vertically on left and Live View on right, delete pre-written code.
  2. Add opening and closing tags for the document <html>, invisible head <head>, and visible area <body>.
  3. Copy-and-paste the text for the Introduction into the code, add <p> tags.
  4. Enter the title of your page and tag with <h1>.
  5. Insert Photo 1 with <img>, i.e. <img src=”image.jpg” />; this is a self-closing tag. Specify a class name for the image, e.g., <img class=”full-width” src=”image.jpg” />.
  6. Add a paragraph underneath with the caption for Photo 1, set up a class “caption,” i.e., <p class=”caption”>.
  7. Surround the text and image tags with a <div> or grouping tag ID’d as “page”.
HTML page
Figure 4-1. Fixed-width HTML page.

CSS

  1. In the head, write an opening and closing <style> tag.
  2. Add a style statement for the body, set background to “whitesmoke” (light gray).
  3. Style “#page” with width 1024px, height 1324px, background white, and center with “margin: 0 auto;”
  4. Style “p” and set font-face, font-size, line-height, width, and center if desired.
  5. Style “h1” and set as above, center with “text-align: center;”
  6. Style “.full-width,” set width to 1024px or less, height to auto, center if desired; optionally add “border: 1px solid gray;” and “box-shadow: 2px 3px 6px gray;”
  7. If you want text to wrap around a smaller image, set the style to “float: left;” and add “margin: 0px 24px 12px 0;” to push away the text (numbers go clockwise from top).
  8. Style “.caption” to be slightly smaller in size, italic, e.g., “font-size: 12pt; font-style: italic;”

Linking Photo 1 to Its High-Res Version

  1. To link your 1024px-wide image to its high-res version, add a link tag, e.g.:
    <a href=”image.jpg”><img class=”full-width” src=”image.jpg” /></a>

This way, when readers click on the image, they will see the full-res version, which is helpful in seeing all the detail and in aiding the visually impaired.

 

Figure 4-2. Completed fixed-width page with high-res photo linked to low-res photo in page. Note use of the <figure> tag to group the photo (<img>) with the caption (<figcaption>).

Setting the Page to Variable Width

  1. All the tags that you styled as fixed-width, like “width: 1024px;” either (1) set the width in %, or add another tag, “max-width: 100%;”

Setting the Page to be Responsive (Look Good on a Smartphone)

  1. Add an “@media {}” rule in the <style> statement that specifies the maximum width of the smartphone, usually 750px for iPhones, e.g. “@media only screen and (max-width: 750px) {}.
  2. Inside the braces for the @media rule, enter the styles that apply to the iPhone, i.e.:
    1. tags should be “max-width: 100%;” or a smaller percentage
    2. any images with text-wrap (“float”) should be set to “display: block;” so they appear separately and take up the full width of the screen.

License

Photography and the Screen Copyright © by Richard Adams. All Rights Reserved.

Share This Book