Research Paper. Ben Davis March 16, How do I convert a PSD file to my website? What is slicing in HTML? What is full form of PSD? What is the full form of ESD? What is PSD in finance? What does PSD stand for in engineering? What does PSF mean? The images created using this extension are of a very high resolution and the quality in terms of clarity is extremely good as compared to other commonly used image formats like. It is the standard markup language used in the creation of webpages and was released in at the advent of the internet.
The format defines the structure and layout of a webpage through markup tags such as header tags and image tags from which a browser can interpret multimedia information for on screen presentation.
To view files and webpages saved with the. Because the format is open source, several browsers which are mostly free to use can open such files.
You will write your HTML code in index. You can call it. Then there is a block with a big image and some promo text. Then there is a white area with the main content. I prefer calling it. All the content is centered. The two first blocks and footer are stretched across the whole screen width.
The main content on the white background has the same width as the stretched areas. Since blocks with the content, and not the their visuals the dark background and hero image , have the same width, you can use containers of the same width to center them. Just copy and paste the code to the top of the CSS file. Then add the following CSS code. You can read more about it here. Open Photoshop and measure the width of the main content. Now you know the width of.
In the pop-up, select the images folder. Name the image bg-texture. Then enable the Eyedropper Tool I and click on the footer. Now save the image from the.
Just select the layer with the image and left-click on the eye icon while holding down Alt. Select the missing layer with the image. Select the required image area and save it as bg-hero. The property background-size: cover; tells the browser to stretch the background image to its maximum size by either width or height.
You can learn more about this property here. Save the logo in a PNG24 format and name it logo. I gave the class. Measure the top margin between the logo and the top of the page in Photoshop. The CSS code will look as follows:. The property float: left; is necessary to wrap further elements around the current one. Now style the site navigation. Each element has its own navigation icon. To minimize the time it takes the page to load, create a sprite or a combination of multiple images from the icons , so the browser will load one image instead of three.
To do this, create a new document in Photoshop and drag every icon into it. You need to set the. Since it is a list and its items are arranged vertically by default, you need to wrap them using float: left;.
Each menu item has a gray border to the left, so set border-left: 1px solid 2cd; for each element. As you can see, all the elements are in their places, but the header and background are still missing. This is due to the float on the elements inside the header.
You just need a small fix, also known as a clearfix. Now, style the menu. Set the white color to the links, specify margins I applied display: block to the links to increase their area and remove underlines from the links.
Set the font family for the menu. The font is Open Sans and you can find it in the Google fonts directory. When you find it, click on the following button:. Since it is the main font on the page and the menu according to the design, you can set this font family for the entire document. Also, you can define the main color and the size at 16px of the text in the document. Now add buttons.
0コメント