How to Do HTML Graphics Codes of My Own Design
People without an HTML background often have great visual ideas for Web sites but have no idea how to properly code the site so that their design comes alive onscreen. However, if a person uses the right kind of software, much of the HTML graphics codes of their own design can be done for them as long as they follow the right process.
Other People Are Reading
Instructions
-
-
1
Create an image of what you want your Web page to look like. This page can be designed in a program like Photoshop or InDesign or any other program that will allow you to save the final result as a PDF or a JPG file. Lay out this page (or pages) exactly as you would want your Web page to look.
-
2
Open Dreamweaver. Create a new blank document by selecting "Create New HTML Document" on the start-up screen. A new blank document will appear.
-
-
3
From the "Insert" menu on the tool bar, select "Image." Navigate to the image you created and saved on your computer in step 1.
-
4
Add links to this page. You can add several links to one image by clicking on the image and then choosing the "Image Map" tool on the bottom left of the page. Use the selection rectangle to drag around the area that you want to link to. After the area is outlined, type the full Web address for the link into the box that has a "#" at the beginning of it. Delete the "#" before typing. Repeat this process for each link that needs to be created in the image.
-
5
Notice the two tabs on the top of the design screen. You currently are on the "Design" tab. Select the "Code" tab. When this tab is selected, you will see that the HTML Graphics Codes have been created for you.
-
6
Select this HTML code by typing Ctrl+A and copy it with Ctrl+C. Paste the code into a text editor and save it. This code can be pasted into your Web server along with the image you created. It will upload a page of live links and images. You have now done HTML graphics codes of your own design.
-
1
Tips & Warnings
The polygon selection tool can be used to trace around sections of an image that will be linked to.
Do not overlap links. Doing so causes the HTML code to get confused, and only one of the links will work.
