Visual style guide for Office of the Chancellor Web templates
Working with images
The style sheet allows users to control the placement of photos inserted into the content areas of each HTML page. Below is a visual catalog of the photo placement styles available in the Office of the Chancellor templates. The HTML code necessary to access each style is indicated. All styles are also accessible in Dreamweaver's "Properties" window.
Photo alignment with text wrap and padding
Photos can be inserted in several different block types including paragraphs, tables, lists, and divisions. The following are inserted into paragraphs. Cutline fonts are automatically centered and sized.
class="photoleft_notopmargin"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tempus adipiscing sem. Mauris dictum sem eu est. Sed felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Etiam nec magna. Aliquam sit amet sapien a elit tempor mollis. Aenean ut arcu at nisi iaculis vehicula. Cras sem. Suspendisse potenti. Ut egestas nunc id risus. Maecenas sodales nunc at elit.
Proin purus. Maecenas elit justo, mollis non, accumsan ut, gravida sit amet, massa. Proin facilisis, libero porttitor cursus molestie, nisl nisl ultricies neque, quis tempus arcu libero eget velit. Aliquam id urna ac arcu consequat consectetuer. Donec volutpat eros sed felis. Praesent libero odio, adipiscing sollicitudin, imperdiet ut, vestibulum eget, nisl. Donec ut elit at purus imperdiet convallis. Sed tempor elementum lorem. Sed placerat eleifend orci. Nunc vestibulum. Nulla porttitor. Mauris tempor nunc nec dui. Donec sit amet tellus. Phasellus vel dui. Praesent pretium vehicula tellus.
class="photoleft" (top margin is 15px)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tempus adipiscing sem. Mauris dictum sem eu est. Sed felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Etiam nec magna. Aliquam sit amet sapien a elit tempor mollis. Aenean ut arcu at nisi iaculis vehicula. Cras sem. Suspendisse potenti. Ut egestas nunc id risus. Maecenas sodales nunc at elit.
Proin purus. Maecenas elit justo, mollis non, accumsan ut, gravida sit amet, massa. Proin facilisis, libero porttitor cursus molestie, nisl nisl ultricies neque, quis tempus arcu libero eget velit. Aliquam id urna ac arcu consequat consectetuer. Donec volutpat eros sed felis. Praesent libero odio, adipiscing sollicitudin, imperdiet ut, vestibulum eget, nisl. Donec ut elit at purus imperdiet convallis. Sed tempor elementum lorem. Sed placerat eleifend orci. Nunc vestibulum. Nulla porttitor. Mauris tempor nunc nec dui. Donec sit amet tellus. Phasellus vel dui. Praesent pretium vehicula tellus.
class="photoright_notopmargin"
Proin purus. Maecenas elit justo, mollis non, accumsan ut, gravida sit amet, massa. Proin facilisis, libero porttitor cursus molestie, nisl nisl ultricies neque, quis tempus arcu libero eget velit. Aliquam id urna ac arcu consequat consectetuer. Donec volutpat eros sed felis. Praesent libero odio, adipiscing sollicitudin, imperdiet ut, vestibulum eget, nisl. Donec ut elit at purus imperdiet convallis. Sed tempor elementum lorem. Sed placerat eleifend orci. Nunc vestibulum. Nulla porttitor. Mauris tempor nunc nec dui. Donec sit amet tellus. Phasellus vel dui. Praesent pretium vehicula tellus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tempus adipiscing sem. Mauris dictum sem eu est. Sed felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Etiam nec magna. Aliquam sit amet sapien a elit tempor mollis. Aenean ut arcu at nisi iaculis vehicula. Cras sem. Suspendisse potenti. Ut egestas nunc id risus. Maecenas sodales nunc at elit.
class="photoright" (top margin is 15px)
Proin purus. Maecenas elit justo, mollis non, accumsan ut, gravida sit amet, massa. Proin facilisis, libero porttitor cursus molestie, nisl nisl ultricies neque, quis tempus arcu libero eget velit. Aliquam id urna ac arcu consequat consectetuer. Donec volutpat eros sed felis. Praesent libero odio, adipiscing sollicitudin, imperdiet ut, vestibulum eget, nisl. Donec ut elit at purus imperdiet convallis. Sed tempor elementum lorem. Sed placerat eleifend orci. Nunc vestibulum. Nulla porttitor. Mauris tempor nunc nec dui. Donec sit amet tellus. Phasellus vel dui. Praesent pretium vehicula tellus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tempus adipiscing sem. Mauris dictum sem eu est. Sed felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Etiam nec magna. Aliquam sit amet sapien a elit tempor mollis. Aenean ut arcu at nisi iaculis vehicula. Cras sem. Suspendisse potenti. Ut egestas nunc id risus. Maecenas sodales nunc at elit.
class="photocenter" (no text wrap)
Proin purus. Maecenas elit justo, mollis non, accumsan ut, gravida sit amet, massa. Proin facilisis, libero porttitor cursus molestie, nisl nisl ultricies neque, quis tempus arcu libero eget velit. Aliquam id urna ac arcu consequat consectetuer. Donec volutpat eros sed felis. Praesent libero odio, adipiscing sollicitudin, imperdiet ut, vestibulum eget, nisl. Donec ut elit at purus imperdiet convallis. Sed tempor elementum lorem. Sed placerat eleifend orci. Nunc vestibulum. Nulla porttitor. Mauris tempor nunc nec dui. Donec sit amet tellus. Phasellus vel dui. Praesent pretium vehicula tellus.
