7. Click Save For Web option ( short key Ctrl + Shift + Alt + S )
Save the file as jpeg with 55 colors and relevant name.
We have named as inside-pagebg.jpg.
8. Choose Modify > Page Properties > Background Image, browse inside-pagebg.jpg image and click ok.
9. Click inside the second column of the body table and choose alignment as Vert 'Top' in the Properties Panel, so that the content starts from the top.
Type dummy text of around 4 to 5 lines to check the table settings. Specially the left panel with menus should not slide down when the text is incorporated.
10. To specify navigation links in the inside page.
Choose the image inside_07.jpg which has the home icon.
11. Click on Map in the Properties panel.
Click and drag to create a Rectangular Hotspot over the home icon.
12. After creating the hotspot enter index.html in Link or browse the page by clicking the folder icon.
Enter respective link name in Alt to specify Alt tags.
13. Similarly create hotspots for all the other links ( i.e Products, Clients, Contact Us, Advice Online, Feedback ).
Specify link and Alt tags as per their respective names as it was done for the homepage.
14. The html page editing of the inside page is complete and it is 1024 X 768 pixels resolution compatible.
15. To create the other inside pages as per their links for eg. to create profile.html page.
Choose File > Save As, Save the file as profile.html.
The inside page gets saved as the profile.html, similarily create the other inside pages.
16. To check the linking open index.html file in Internet Explorer or any other browser and click on the links to check the file.
Steps for html conversion and 1024 compatibility of insidepage.psd with linking is complete.
These 4 articles of professional steps in web designing covered the practical techniques in designing a web site. The articles covered the step by step process with images explained:
| ||Understanding the client requirements |
| ||Designing a layout in Adobe Photoshop*, |
| ||Optimizing, slicing and HTML Conversion of the layout in Adobe ImageReady* |
| ||Developing HTML Pages, making the website compatible in 800 X 600 pixels, 1024 X 768 pixels resolution compatible through Macromedia Dreamweaver*. |
Developer of layout galaxy web site design templates for Photoshop and Flash.
All accompanying logos, brands and product names are trademarks of their respective companies.