How to create a nice looking HTML page...the easy way!

[SeanPreston]

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

 

[Keral_Patel]

As always great stuff. I really appreciate and I know many more also really appreciate all tutorials being posted here.

Thanks for compiling tutorial and sharing it with us.

 

[SeanPreston]

no, problem. it helped a very boring college lesson fly by.

sean

 

[Shane]

I could not work out how to do this for YEARS. I am glad you posted this for beginners to see.

 

[SeanPreston]

hi, thanks mate.

ye, I get many people asking for this.

sean

 

[SeanPreston]

Thanks all that have rep'd, makes it worthwhile.

If I get chance later this week I will write a few more.

btw...if you have any questions your welcome to post or PM me with them.


seab

 

[Arsonistx]

Hah, helped a boring college class, nice. :P

Very nice tutorial, very helpful to the beginners. This is pretty much how I started out, apart from starting with designing forum signatures, ect., so I have a little more practice designing. Especially 5 years into the business. :D

 

[SeanPreston]

Thanks for your comments, many people don't realize how easy it is.

 

[simplysnoopy]

nice looking html

hello! im studying html right now. I can create a simple site of my own with my cartoon favorite. I am thankful i will learn something from your forum.

 

[MH-Andy]

Good small tutorial

 

[SeanPreston]

No problem, remember to check out CSS coding, its a very good thing to learn if you want to start doing web designs as a job.

 

[bamaboy]

Good Tutorial sean :D
I have been trying my hands on this stuff now a days

 

[DJBee]

Do you have a sample finished website for us to look at? Thanks!

 

[Erdy]

Starting with photoshop or dreamweaver is not the easy way. I design websites for a few years now and here is my opinion:

1. First Stage: Use Microsoft Word
That's very simple really. Start with things you are familiar with. If you have used Microsoft Word before chances are you know how to create a table. Simply create a table and align it to the centre of the page. On first row you can have a few columns. Put navigation into that row. For instance write 'home', 'about us', 'contact' etc to each cell.

In the middle merge cells so that the content area becomes a big cell that is as wide as the table. Put your content here. A picture together with the text would be nice. Probably you know how to add a picture to a MS Word document. Obviously you want to remove any borders of the table most of the time. So the table will serve to organize the layout but it won't be visible.

I can hear you asking "how on earth I'm going to convert a word document to html?" Well, you don't. MS Word can save the file directly as an HTML file. On file menu choose save as. A window will appear where you type a file name and select file type. Simply put "index" as file name and choose "html" as file type. That's it. The file will be saved as index.html

Afterwards, go to the folder where you have that index.html file. Create a few copies of that file. Then rename the copies "about_us.html", "contact.html" etc.

The downside is that MS Word creates very chunky and poor HTML code and your page size will be a few times bigger than it could be. But that's not a huge problem since the page load speed won't be noticeably slower if the page doesn't have lots of content.


2. Second Stage : Microsoft FrontPage
Frontpage was discontinued a few years ago and replaced by another program. But it is still very useful for the beginner since it works very similar to MS Word. If you have MS office xp installed, frontpage could be already installed on your computer. Check your ms office programs to see if you have frontpage there.

If not, then you might install it if you have an office xp cd somewhere. Front page will create hundred times better HTML code. It will work almost the same way as MS word does. You still will have to use a table to create the page layout.

If you have a complicated layout remember that tables tend to get messed up if you try to create the whole layout with one table. If there are some merged columns in the middle moving a top column might cause a lower and unconnected column to move as well. Therefore the standard solution was to create tables inside other tables. So do that if your tables don't behave like expected.

The downside with ms frontpage is that site layouts that are created with tables are old fashioned and they take much more size and it is not easy to restyle the page.

3. Third Stage : Tableless design with CSS using adobe dreamweaver.
CSS is a styling system. To make it easier to understand you can think css as text styles in MS word. For instance there is the "heading 1" style in ms word. If you use this style in a document in many different places, later on you will not have to alter each title individually. You can simply redifine the "heading 1" style and all headings that use that style will change accordingly.

CSS works similar to this but it much more detailed. You can not only style text but you can also create boxes and style/define them as well. These boxes are called 'Div's. A Div without definition is nothing. You give it height, width, background colour, position etc. Instead using tables you create your site layout with CSS. CSS allows you to separate style from content since the css file that has all the style definitions can be an external file. You still have HTML pages (for content) but you also have usually only one css page (for styles).


SeanPreston's advice is good but I think it will be easier to go the ms word > frontpage > dreamweaver route for beginners. Also I don't suggest photoshop for web design. Photoshop is too complicated to learn. If you need any graphics you could create them yourself and add them to a page just like you would add a picture. To create graphics for web sites an easy program would be fireworks. The more advanced program is adobe illustrator.

Photoshop is good if the whole page is covered with huge graphics. That technique is called the slicing method. You don't need photoshop or the slicing method.

 

[buttsb]

Hi to all

Thanks for helping.
I newly joined this forum and i m very glad to become the par of ur community

 

[SeanPreston]

Welcome to the forum buttsb, I'm glad you liked this thread.

Sean

 

[Digital_shubhi]

THanx for this wonderful post.
It really helped me and others.

- Digital -

 

[mhiktrice]

thanks i really love to try this tutorial . Why not try to make css tut next.

 

[vanesaJac]

Wow..
Thanks for this Sean..
Its very useful.
i will save a copy of this so that i could review
and try doing this.
Thanks for sharing this.

 

[SeanPreston]

Thanks all, I might create a little CSS tut actually, I will see how time goes.


Sean

 

[mulligan]

2. Second Stage : Microsoft FrontPage

Yep, if you want your code to be littered with unnecessary MS junk.

 

[SeanPreston]

agreed.

This method with Photoshop also makes it a bit cluttered, but its a good start if your new.

 

[mulligan]

Heres the code for this

in FP:

<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
 for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
 else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
 if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
 for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
 f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
 for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
 return null;
}
// -->
</script>

I'd highly suggest staying well away from this kind of bloatware and do it with a simple CSS and a small graphic.
Then get into some basic php (header.php / footer.php etc etc)
Once you go down that route you'll never look back

 

[SeanPreston]

ummm... Wrong thread?


Sean

Heres the code for this

in FP:

<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
 for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
 else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
 if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
 for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
 f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
 for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
 return null;
}
// -->
</script>

I'd highly suggest staying well away from this kind of bloatware and do it with a simple CSS and a small graphic.
Then get into some basic php (header.php / footer.php etc etc)
Once you go down that route you'll never look back

 

[SeanPreston]

I have had several questions via the contact links on my site, as I am on holiday at the moment I cannot access them. However if you PM me instead I can then reply asap.

Sean