Hi All, After some years I finally know how I can design my own website layouts. I started this so I could save myself a lot of money, and now I even love doing it! But now i'm trying to save myself even more money by starting with coding. I know some basics of what I needed to know to keep my websites up, but not more then that. What should I do? Where do I learn how to slice and code my designs? Kind Regards, Klaas Koopman
I recomend you ASP as it is very easy and understandable by coding newbies. You could use server side server includes to build your pages. for example this is the source code from www.duploclique.com <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Simple Hosting - by duploclique.com</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="style.css" TYPE="text/css"> </head> <body leftMargin=0 topMargin=0 marginheight="0" marginwidth="0"> <table width="780" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td> <!--#include file="inc_header.asp"--> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="585" bgcolor="#F7F5F6" valign="top"><!--#include file="content_index.asp"--> </td> <td bgcolor="#F7F5F6" valign="top"><!--#include file="inc_right_index.asp"--></td> </tr> </table> </td> </tr> <!--#include file="inc_footer.asp"--> </table></td> </tr> </table> </body> </html> PHP: That way you only need to code the footer, header and side blocks once. When you want to create another page just duplicate that one and create a new content_whatever.asp page that will contain the center body of the website. This is only a way to slice your contents and help future upgrades. I used this too on www.aranea.pt and www.lojakoala.com Hope it helps
hmm can't that also be done with php include??? or is that different? but I need to know like if I got a design, how do I slice it, and then how do I code it so it can be used?
yes of course. I've showed ASP but you can use PHP as well. You can start to build a unique HTML page containing your slices and then rip apart some blocks, and put them in separate files. That requires some html table training and understanding so you can create hidden tables to organize the things.
Klaas Koopman my suggestion to you is to learn html and css, it is very easy to learn and understand... Then use a software like dreamweaver to create your page and then look at the source code generated to understand better how things are working and try to modify them... Finally, try to code your page from blank without the help of dreamweaver or any other software except notepad When you are a master in html (which I think you can be in a few days), then you can start learning scripting languages such as asp and php
What kind of moron suggests someone to learn table-based design in this day and time. CHRIST. I havn't even had my breakfast yet. How do you do your designs? I suggest you use Photoshop, so I'm going to assume you do that because of its layered design functions. Learn how how to separate a page, everything thats a image or round needs to be exported as images, atleast if you have say a box, you need to export top, bottom and a 1px middle line. After you have done this you code a design based on DIV's with XHTML or HTML 4.01 - this means that you create a <div> for every large segment of your page, there's plenty of resources for learning on how todo this. Now you need to position and align every piece of your design into this div-based structure, that is preferably done with as FEW absolute positionings as possible, ie try to use floats, relative positioning as long as possible and use absolute in the end. This should give you a basic template to use in your project, now you can separate parts of this page into files or functions (i use functions for some reason) a function in php is quite easy to create: <? function myHeader() { ?> <ul> <li>menuitem</li> <li>menuitem</li> .... </ul> <? } ?> Then you just call it with <?myHeader();?>. You also need to include or require the file containing these functions. I suggest you start reading the PHP manual from top to bottom, just skim it and return to the parts you are confused by when you need to learn it by heart. PHP manual Another excellent resource for CSS, javascript and much else is at Devguru.com
I agree with Maro, HTML and CSS are very easy to learn. While you are learning HTML and techniques for laying out your content I would avoid using tables for layout and concentrate on using CSS instead. This is a very good & easy to follow website to get you started on CSS http://www.wpdfd.com/editorial/basics/index.html although you may want to run through a small HTML tutorial first (http://www.w3schools.com/html/html_intro.asp), don't worry if you pages look bland in the HTML tutorial, CSS will spice things up for you http://www.hotdesign.com/seybold/ pretty much explains the benefits of not using tables for layout
thanks all for your support, really appreciate it! Is there any tutorial that shows me step by step on how to slice then code a design...? Cause everything I hear here is very new to me. I make my designs in photoshop... if that's important to know.
I'm quite the opposite. I don't know anything about php (I heard the scripts are usually ready made, like JavaScript?). But I'm fairly good with HTML from about 8 yrs experience doing websites here and there.
Well you slice the design in ImageReady or Photoshop (Whatever you use), and use the search function on that site to find out what you need to know... http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/works.html That's the CSS tutorial.
Well, slicing is... Just, well slicing... What is there not to understand? http://www.google.co.uk/search?q=slicing+an+image That was my first search - not exactly difficult to find