- Impact
- 70
ok, I spend most of my time on the internet doing web design, I have been designing sites since I was 12 and have built up a large portfolio.
In my early years this was the method I used to get myself on the train to success within the industry.
You will need Photoshop and Dreamweaver.
1) Design it!
You need to start in Photoshop with a 900x900 or 900x800 cavas, you then need to design the page on this canvas, this is very simple to do.
-Create a box at the top with the rectangle tool.
-create a box below it with the shape tool for the navigation.
-Then create a large content box.
-and finally the footer.
(NOTE: this tutorial is not for the design concept, so do a google search for a good deasign tutorial)
2) Export
For this step tap the "k" key and it should take you to the Slice tool, if not simply select it from the tools window.
You know need to click and slice every image, the following should have its own image (of course depending on your design you may have different, but this is the basic structure)...
-Logo
-Navigation (Thw whole navigation needs to be one single slice)
-Main content area (Where the text would be, not the entire content area)
-footer
-and any other areas where you want to add text!
REMEMBER: Remove all text from the design (except logos etc) else they will be an image and will cause problems later.
Once you have sliced the design, goto File -> Save For Web -> Select "HTML webpage and images" -> Save.
3) Dreamweaver
Find the file we saved before (.html) and open it with dreamweaver.
As you can see your design has been created, if you have for example a content box (where you want to write text) and do the following...
-Click the image
-Copy the source of the image from the properties "source" field.
-Click the image again
-Click the "Del" key
-In the cell properties window, in the background image field paste the source url
-whola, if you click back on the cell you should eb able to write on top of the image.
REMEMBER depending on your design you may also need to enter the sizes of the image so that the cell is the correct size for the background image.
4) Enjoy
That's it!
This tutorial is VERY simple, however I recieve many people asking me how to create a nice looking HTML page, well this is the best solution.
Thanks.
Sean
P.S. I don't want any "big-headed" users replying with "you should code in css" or anything alike, this tutorial is made as a starting point for new designers, this is where I started and it worked for me
In my early years this was the method I used to get myself on the train to success within the industry.
You will need Photoshop and Dreamweaver.
1) Design it!
You need to start in Photoshop with a 900x900 or 900x800 cavas, you then need to design the page on this canvas, this is very simple to do.
-Create a box at the top with the rectangle tool.
-create a box below it with the shape tool for the navigation.
-Then create a large content box.
-and finally the footer.
(NOTE: this tutorial is not for the design concept, so do a google search for a good deasign tutorial)
2) Export
For this step tap the "k" key and it should take you to the Slice tool, if not simply select it from the tools window.
You know need to click and slice every image, the following should have its own image (of course depending on your design you may have different, but this is the basic structure)...
-Logo
-Navigation (Thw whole navigation needs to be one single slice)
-Main content area (Where the text would be, not the entire content area)
-footer
-and any other areas where you want to add text!
REMEMBER: Remove all text from the design (except logos etc) else they will be an image and will cause problems later.
Once you have sliced the design, goto File -> Save For Web -> Select "HTML webpage and images" -> Save.
3) Dreamweaver
Find the file we saved before (.html) and open it with dreamweaver.
As you can see your design has been created, if you have for example a content box (where you want to write text) and do the following...
-Click the image
-Copy the source of the image from the properties "source" field.
-Click the image again
-Click the "Del" key
-In the cell properties window, in the background image field paste the source url
-whola, if you click back on the cell you should eb able to write on top of the image.
REMEMBER depending on your design you may also need to enter the sizes of the image so that the cell is the correct size for the background image.
4) Enjoy
That's it!
This tutorial is VERY simple, however I recieve many people asking me how to create a nice looking HTML page, well this is the best solution.
Thanks.
Sean
P.S. I don't want any "big-headed" users replying with "you should code in css" or anything alike, this tutorial is made as a starting point for new designers, this is where I started and it worked for me
Last edited:
