Designing a website includes
- Designing web layout in photoshop
- Slicing &
- Converting into HTML in dreamweaver
A basic website has
- Header must have the logo and name of the company.
- Buttons contains the name of the pages for navigation with the link
- Body area contains the content for the current page and the design.
- Footer contains the content for copyrights of the company.
Website layout is designed in photoshop and sliced. Slicing in photoshop is a process where the website layout is cut into small images. Tool used for this process is slice tool (shortcut â€˜Kâ€™).
Maximum width to design a website is 1024pixels to avoid horizontal scroll in the browser. We have done a web layout for pets at a size of 800 x 782 pixels. Images and graphics are sliced in photoshop whereas the contents can be recreated in html.
- Open the web layout in photoshop.
- Select slice tool(K) and draw over the area of website which has to be sliced.
- After slicing, a blue line will be created around the sliced area.
- Only the images, different fonts and gradient are sliced whereas contents and solid colors are recreated in html.
- Go to file > save for web & devices
- Select the location and folder where the images to be saved.
- Sliced images can be saved in different forms of gif, png and jpeg based upon our requirement. Animated slices are saved as gif files.
- Name the slices and select the type to be saved.
- HTML & images â€“ sliced are saved as images and HTML document is created with the slices.
- Images only â€“ saved as images only.
- HTML only â€“ saved as html document only.
- Select the settings to be default.
- All slices â€“ save all slices.
- All user slices â€“ save the slices created by the user manually.
- Selected slice â€“ save only the selected slice.
- Save the slices.