IT tutorials
 
Graphics
 

Adobe Dreamweaver CS5 : Styles and Their Attributes (part 2) - Block options, Box options, Border options

5/2/2013 9:30:18 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

3. Block options

One of the most common formatting effects in traditional publishing, long absent from Web publishing, is justified text — text that appears as a solid block. Justified text is possible with the Text Align attribute, one of the seven options available in the CSS Block category, as shown in Figure 4. Indented paragraphs are also a possibility.

Dreamweaver includes an option for setting the Display attribute. As the name implies, the Display attribute determines how an element should be presented. Display accepts a wide range of values — 18 in all — but only a few are currently supported by even the latest browsers. That said, the supported values — block, inline and, curiously enough, none — are very important indeed. Setting a Display attribute to None effectively hides the element to which the CSS attribute is applied; setting the same attribute to Block or Inline reveals the element. Many collapsible/expandable lists depend on the Display attribute to achieve their effects.

Table 3 lists the CSS Block options.

Figure 4. The Block options give the Web designer enhanced text control.

Table 3. CSS Block Attributes
Block SettingDescription
Word SpacingDefines the spacing between words. You can increase or decrease the spacing with positive and negative values, set in ems by default. (In CSS, 1 em is equal to the height of a given font.) If you have a 12 pt. font, to increase the spacing between words to 24 pts., set the Word Spacing value to 2 ems.
Letter SpacingDefines the spacing between the letters of a word. You can increase or decrease the spacing with positive and negative values, set in ems by default.
Vertical AlignmentSets the vertical alignment of the style. Choose from baseline, sub, super, top, text-top, middle, bottom, or text-bottom, or add your own value.
Text AlignSets text alignment (left, right, center, and justified).
Text IndentIndents the first line of text on a style by the amount specified.
WhitespaceControls display of spaces and tabs. The normal option causes all whitespace to collapse. The Pre option behaves similarly to the <pre> tag; all whitespace is preserved. The Nowrap option enables text to wrap if a <br> tag is detected.
DisplayDetermines how a tag is represented. Possible values include none, inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption.

4. Box options

The Box attribute defines the placement and settings for elements (primarily images) on a page. Many of the controls (shown in Figure 5) emulate spacing behavior similar to that found in <table> attributes. If you are already comfortable using HTML tables with cell padding, border colors, and width/height controls, you'll quickly learn how to use these Box features, which are described in Table 4.

To have the same padding or margins all around a box area, check the Same For All option. This option allows you to set one value — Top — to use for all four sides.


Figure 5. The CSS Box attributes define the placement of HTML elements on the Web page.

Table 4. CSS Box Attributes
Box SettingDescription
WidthSets the width of the element.
HeightDefines the height of the element.
FloatPlaces the element at the left or right page margin. Any text that encounters the element wraps around it.
ClearSets the side on which AP elements cannot be displayed next to the element. If an AP element is encountered, the element with the Clear attribute places itself beneath the AP element.
MarginDefines the amount of space between the borders of the element and other elements in the page.
PaddingSets the amount of space between the element and the border or margin, if no border is specified. You can control the padding for the left, right, top, and bottom independently.

5. Border options

With Cascading Style Sheets, you can specify many parameters for borders surrounding text, images, and other elements such as Java applets. In addition to specifying separate colors for any of the four box sides, you can also choose the width of each side's border, as shown in the CSS Border category (see Figure 6). You can use eight different types of border lines, including solid, dashed, inset, and ridge. As with the Padding and Margin attributes in the Box category, Dreamweaver includes a Same For All option under the Style, Width, and Color attributes to save you the work of having to enter the same value for all four sides. Table 5 lists the Border options.

Table 5. CSS Border Attributes
Border SettingDescription
StyleSets the style of the border. You can use any of the following border styles: dotted, dashed, solid, double, groove, ridge, inset, and outset.
WidthDetermines the width of the border on each side. Choose thin, medium, or thick, or enter a number to set a width.
ColorSets the color of the border on each side.

Figure 6. Borders are useful to highlight a section of text or a graphic.

CSS Border attributes are especially useful for highlighting paragraphs of text with a surrounding box. Use the Box category's Padding attributes to inset the text from the border.

 
Others
 
- Adobe Dreamweaver CS5 : Styles and Their Attributes (part 1) - Type options, Background options
- Adobe Photoshop CS5 : Working with Automate Commands - Using the Fit Image Command
- Adobe Photoshop CS5 : Working with Automate Commands - Processing Multiple Image Files
- Adobe Flash Catalyst CS5 : Optimizing artwork
- Adobe Flash Catalyst CS5 : Importing artwork
- Adobe Flash Catalyst CS5 : Preparing a design document
- Adobe After Effects CS5 : Animating Text - Animating imported Photoshop text
- Adobe After Effects CS5 : Animating Text - Animating using parenting
- Adobe After Effects CS5 : Animating Text - Animating with scale keyframes
- Adobe Fireworks CS5 : Working with Vector Graphics - Scaling vector objects, Adding text to your design
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS