 | | |||||
Welcome, Guest! Ready to make a name for yourself in the domain business? We welcome both the hobbyist and professional domainer to join the discussion as part of the NamePros community.
Click here to create your profile to start earning reputation for posting, and trader ratings for buying & selling in our free e-marketplace. Build your trader rating with each successful sale. Our system has tracked over 100,000 sales and counting!
Click here to create your profile to start earning reputation for posting, and trader ratings for buying & selling in our free e-marketplace. Build your trader rating with each successful sale. Our system has tracked over 100,000 sales and counting!
| ||||||||
| Webmaster Tutorials Instructional webmaster-related how-to's and tutorials. |
 |
 |
| | LinkBack | Thread Tools |
03-30-2009, 02:29 AM
| THREAD STARTER #1 (permalink) |
| Senior Member  Join Date: Nov 2005 Location: UK
Posts: 1,278
        | How to create a nice looking HTML page...the easy way! 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. ????: NamePros.com http://www.namepros.com/webmaster-tutorials/571075-how-create-nice-looking-html-page.html 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 by SeanPreston; 03-30-2009 at 03:07 AM.
|
|
|
04-21-2009, 11:37 AM
| #7 (permalink) |
| New Member Join Date: Apr 2009 Location: Wisconsin, USA
Posts: 21
 | Hah, helped a boring college class, nice.  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.  |
|
|
|
04-25-2009, 03:55 AM
| #9 (permalink) |
| New Member Join Date: Apr 2009
Posts: 3
| 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.
__________________ Pretty Europe |
|
|
|
05-30-2009, 05:57 AM
| #14 (permalink) |
| Senior Member Join Date: Sep 2006 Location: London, UK
Posts: 1,922
| Starting with photoshop or dreamweaver is not the easy way. I design websites for a few years now and here is my opinion: ????: NamePros.com http://www.namepros.com/showthread.php?t=571075 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. ????: NamePros.com http://www.namepros.com/showthread.php?t=571075 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.
Last edited by Erdy; 05-30-2009 at 06:03 AM.
|
|
|
|
06-24-2009, 04:35 AM
| #23 (permalink) |
| NamePros Regular Join Date: Jun 2006
Posts: 507
| Heres the code for this  in FP:Code: <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> ????: NamePros.com http://www.namepros.com/showthread.php?t=571075 Then get into some basic php (header.php / footer.php etc etc) Once you go down that route you'll never look back
__________________ TLD.tv | Gravure.tv |
|
|
|
06-24-2009, 04:40 AM
| THREAD STARTER #24 (permalink) | ||||
| Senior Member Join Date: Nov 2005 Location: UK
Posts: 1,278
| ummm... Wrong thread? Sean
| ||||
|
|
|
« Blog Commenting - How to Get Free Traffic and Build Backlinks
|
A webmaster tutorial for posting in webmaster tutorials section »
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| |
 |
All times are GMT -7. The time now is 11:23 AM.
