Advice 1: How to turn the item page

A very simple way of turning the page elements of the site - will be enough to use just a few css styles. Reading this tutorial will allow you to place a detailed card fan, the scattered fallen leaves or stylish photos in the album. In the lesson posted example photo album and posted the solution for all modern browsers.
How to turn the item page
You will need
  • Four pictures width to 450px;
Instruction
1
This example will create a stylish page of the album with rotated photos.

I had prepared images (400px width) with addresses:
http://uanon.ucoz.ru/prosto/povorot/photo_1.jpg
http://uanon.ucoz.ru/prosto/povorot/photo_2.jpg
http://uanon.ucoz.ru/prosto/povorot/photo_3.jpg
http://uanon.ucoz.ru/prosto/povorot/photo_4.jpg

In the future we will give the images IDs (id) in accordance with their names.
2
For a start we will prepare the unit for our photo gallery using div tagand introduce the pictures using the img tag (each image must be enclosed in its own div tag), like so:


photo_1.jpg
photo_2.jpg
photo_3.jpg
photo_4.jpg


Please notethat we assigned the unit ID id="photo_page". ID will be able to turn to block using css.
3
Next, you need to specify the block of css styles. List of styles: "position: relative;" - will set the origin of coordinates from the upper left corner of our block; "margin: 50px auto;" - will set the indent of our block "50px" at the top and bottom from the rest of the page content, and also sets automatic indentation right and left, thus aligning our block center; "width: 900px; height: 650px;" - will set a width of 900px and a height of 650px, respectively.

This list of styles should be placed in such a way:

#photo_page {
position: relative;
margin: 0 auto;
width: 900px;
height: 650px;
text-align: center;
}

Please note the use of "#photo_page" - so we turned to the block ID.
4
Now we set the General styles for each image inside a block photo_page. It has rounded corners, gray frame, white background, padding and shadow.

This will create the effect of photos:

#photo_page img{
border-radius: 7px;
border: 1px solid grey;
background: #ffffff;
padding: 10px;
box-shadow: 2px 2px 10px #697898;
}

Please note the use of "#photo_page img" - so we refer to all images inside the unit photo_page
5
It is also important to finish such a short style:

#photo_page div {
float: left;
}

He draws all the blocks within the block photo_page to the left edge.
6
Now completed the intermediate stage of the lesson. If your work is similar to the image on the screenshot, then you have not made mistakes and can proceed to the next step.
The intermediate stage of the example
7
Now turn-by-turn posted a photo. For this we need the style transform. At the moment in its pure form it is not used, and only with a prefix for each browser at the beginning, like so:

-webkit-transform: rotate(value);
-moz-transform: rotate(value);
-o-transform: rotate(value);

This rotation style for browsers: Google Chrome, Mazilla, Opera (respectively). Instead of the word "value" we will insert the number with the prefix deg at the end, like so:

90deg - turn-90 degrees clockwise.
-5deg is a rotation by 5 degrees counterclockwise.
And so on.
8
Style for photo photo_1:

#photo_1 {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
}

The first image is rotated by 5 degrees.
9
Style for pictures photo_2:

#photo_2 {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}

The second image is rotated -3 degrees.
10
Style for pictures photo_3:

#photo_3 {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
}

The third image is rotated -2 degrees.
11
Style for photo photo_4:

#photo_4 {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
}

The fourth image is rotated by 8 degrees.
12
Consider how you can adjust the position of the images. For example, you want to shift the first image at 20px from the top and 10px from the left edge. In this case, you must use the style margin. Here is the correct version use it for our case:

#photo_1 {
margin: 20px -10px -20px 10px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
}

Please note, the first value of the style - top margin; the second is the indent to the right; thirdly, the bottom margin; the fourth indent to the left.
Important: in our case, the bottom margin to a negative value of the top margin. If on your page there is empty space under the image, please make an indent below it even more negative.
13
The work has been completed, I give a screenshot (subject to change indentation of the first image described in Step 12).

Build upon the style of indentation for any of the images, the position of which you are not satisfied.
Execution result example
Note
You can also get acquainted with demomade for this lesson.

p.s. The indentation of the block above and below (50px) is also taken approximately, this value can be freely changed at their discretion.
Useful advice
This example does not include work with absolute positioning of elements. Absolute positioning is useful if you are going to impose a very tight image, I advise you to read.

Advice 2 : How to deploy a page in word

By default, all newly created pages in a text editor of Microsoft Word have a "portrait" orientation. But not all of documents look best in this format, there is a need to expand the page.
How to deploy a page in word
Instruction
1
If the document consists of one page, or you want to expand all the leaves of the document, then it can be done revealing menu called "page Layout". It is necessary to click "Orientation" and select the option "Portrait" or "Landscape". In earlier versions (Word 2003 this option is under a menu called "File" where you should select "page setup", switch to tab "Fields" and already there to make a choice, "Orientation", "Portrait" or "Landscape".
2
If the document has several pages it is necessary to deploy only some of them, the sequence should be different. First go to the pagethat needs to expand in relation to the previous one.
3
Next, you must open the configuration dialog for the page margins. In Word 2007 to do this on the tab "page Layout" click the drop-down list labeled "Fields" and choose the bottom item "Custom fields". In Word 2003 the same is done by opening the menu "File" and selecting it under "Settings". Opens the preferences window in which the Fields tab under "Orientation" - select the page option. Then look at the bottom of this tab, a drop-down list next to "Apply". There are only two options - "entire document" and "To end of document". Now you need to select a line "end of document".
4
Click "OK" to close the settings window fields. If this is the last page of the document or following it must also have the same orientation, then the procedure ends. But if the following pages should be oriented not only so as that unfolded, then go to next sheet and repeat the procedure with the window installations of custom fields.
5
There is another method, or rather a trick. Place your page text in a table with one cell, then highlight its contents (not the cell but only the text), click the right mouse button and in context menu select "text Direction". This way you will be able to turn the contents of the cell at 45 degrees (or against) a clockwise direction. Then you will need to remove the table frame and adjust its internal and external indentations - the way to turn the page requires more options than the previous one, so less convenient.

Advice 3 : How to deploy a sheet in word

In Microsoft Word there are plenty of pages for reading and for printing. In this program you can change the page orientation from portrait to landscape – in some cases, the change in vertical sheet horizontal can be very handy, for example when you want to print a large horizontal ad, or place on a sheet wide table. To make Word horizontal sheet landscape mode is a snap.
How to deploy a sheet in word
Instruction
1
Click menu "File" in the upper left corner of any Word document and select "page setup". Opens the preferences window where you will see two icons – "Landscape" and "Portrait".
2
Choose landscape orientation and click OK. You will see that the page has changed, and now you can print on the horizontal sheet. Again to change the orientation of the sheet vertical, again open the "page setup" in the menu "File" and select respectively a vertical orientation.
3
In the window page settings you can optionally change the size of the indentation, the width of the document, increase or decrease the frame size, and change other settings related to the appearance of your page. When the page printing orientation will be maintained.
4
In addition, you can not only change the position of the sheet, but to change the direction of the text on the sheet in any orientation, if you want you can write both horizontal and vertical text. To do this, use the toolbar "Label" the option "text Direction".
5
To change text direction within a table, click "text Direction" option in the "Tables and borders".
Is the advice useful?
Search