Web Page Design Technique For Combining Text And Images Using Aptana Studio 3
Aptana Studio 3 is an open source development tool for the web sites. One of the advantages of customized web site design with HTML code is the accurate control of the appearance and position of pictures using CSS.
The tool can be downloaded from the http://www.aptana.com website.
Pictures are an important part of modern media and web sites are no exception. However, throwing in images anywhere on a page is not really the answer as the pictures should complement and expand the words.
The subject and the placement of the picture must be relevant to the rest of the text, making the ability to control the picture’s position an essential element in web site design.
Image In The Text
Placing images in the associated text reinforces the relevance of the image to the text. The text flowing around the image heightens the association for the reader. Cascading Style Sheet (CSS) techniques offer an easy and efficient way for web designers to position images in web page text.
This technique is an application of the basic CSS container technique for web site design. Tables are a popular graphic design tool with web designers for controlling web page layout. Pictures and text are placed in the cells of a table structure that was originally intended to as structure for displaying numerical data rather than text and pictures.
Graphic designers using CSS for web site design rely on containers to control the position of items on web page. Web designers nest the picture container inside the main text container.
Creating a Container
The basis for the container technique is the div tag, used to define a division or a section in an HTML document. This allows the defined section of the web page its own properties. The default characteristics are inherited from the main style while the unique style elements are commonly defined in a separate CSS file and have an 'id' or "class" selector to identify unique styles in to the web page.
The picture container is nested inside a parent container so that the parent containers text wraps around the picture. This is of course providing the picture is sufficiently small enough to allow room for the text and picture. All the detailed specification of the container properties are in the CSS file, the sample code from the abouttas.com site is for a picture on the right of the parent container so the text flows around to the left side of the main page.
CSS file definition
This is the code in the CSS file for a picture container on the right of the page.
.picright {
float: right;
margin:5px;
width: auto;
padding:0px;
}
Class Name
First thing is the name, or class, where the full stop or period . symbol indicates this is the start of the class name. The name is up to the web designer; however, it is a good idea to give each CSS class a meaningful name. This one gives an indication of its purpose, a picture to the right of a page.
The main purpose of CSS is to reuse style specifications through related pages on a web site so graphic designers can use the same class for more than one picture. Ideally, all pictures with text wrapping to the left use the same id for a consistent style across the web site.
Detailed Design
Looking inside the curly braces, we find the detailed style specifications for the picture container:
Float: this s set to right. This positions or justifies the section to the right of the web page, the other values are left or none.
Margin: this sets the spacing between the outside of the picture container and the wrapping text and in this case uses pixels as the measurement.
Width: The auto value means the picture container will set its own width according to the widest content item. This is so the picture container is a general all-purpose box and can be used for different size pictures without any change in specification.
Padding: this is a form of internal margin giving a space between the content and inside edge of the container, one again this is set using the pixel measurement.
Positioning the Picture
Position the picture by editing the section of the HTML code that includes the associated text. Insert the class="picright" opening of the div container at the point in the text for the top of the picture. Then close the container with the /div inside <> brackets. The sample code is in the picture gallery below for a CSS container in a web page.
The text after the container flows around the left side of the picture and then goes across the full width of the text container below the picture.
Posted on Utopian.io - Rewarding Open Source Contributors