When creating a website on the Internet, one of the most important points that a developer must take into account is its functionality, versatility and performance. In order for the site to be fully and correctly displayed in any browser on computers with a wide variety of screen resolutions, you can create a convenient "rubber" header, consisting of several graphic elements.
Instructions
Step 1
In the first step of creating such a header for a website, open in Photoshop the image that you have already prepared for posting on the web, and then cut it into pieces using the Slice Tool in the toolbar. Cut the header so that the center part is empty, so that you end up with three graphic elements. This will allow the header to stretch for any screen resolution.
Step 2
After you cut the header, save it, optimizing the files when saving for the web format (Save for web). Set the desired file format for saving - for example, gif, jpeg, or png. To change each fragment of the image, click on the Slice Select Tool option in the menu and resize the pictures so that their size is as small as possible with the least loss in the quality of the visual display of the picture on the screen. Save your edited images as html and images.
Step 3
After the pictures are saved, edit the HTML code by opening the saved html document with Notepad. In notepad, erase all unnecessary lines of code. Leave only the necessary lines - data about the table in which your pictures are embedded:
Step 4
In these lines, instead of yourimage.gif, the path to your images with the appropriate width and height should be specified.
Step 5
In order for the middle part of the image to stretch, spreading the extreme images to the sides, write the corresponding code attributes in the lines. Specify your own width and height parameters in the code.
Step 6
Upload the generated header images to the root directory of your site, and then edit the HTML code with new paths to the header images on the server. Paste the header code between the tags.
Recommended:
How To Make A Rubber Background
When you create your own website, naturally you want it to display as attractively as possible regardless of the user's browser version. In particular, so that the background image is stretched and adjusted to the resolution of the computer monitor
How To Make A Rubber Banner
Rubber flash banner is also called simply "rubber". Its main feature for the site is that regardless of the size of the browser, the banner will remain the same as it was intended - beautiful, clear and bright. The need for rubber banners arose due to the fact that one has to take into account the different sizes of computers of Internet users, because someone has a square monitor, someone has a widescreen monitor, some have 14 inches, others have 21 inches
How To Make A Beautiful Header For Your Website
The individual style of the site works to create a brand, which is especially important for personal sites and blogs. Making a beautiful header for a site means laying the foundation for the popularity of a web resource, its recognition among hundreds of similar sites
How To Make A Rubber Picture
"Rubbery" is a picture that has the ability to scale. You can create such a picture using computer programs. Its convenience lies in the fact that it "stretches" in the desired direction. Such web creation successfully displays in any browser
How To Make A Rubber Cap
The upper part of the site, which is also called the header, usually reflects the subject of the resource and may contain a navigation bar. If the site header has a certain width, then on the screens of users with different resolutions, this part of the site will look different