I made a design for my first web page, and I tried to do the codes but sadly I can't. Can someone tell me where to code the codes needed, if it will be on html or css. Because I can't arrange the images I wanted them to be.
I had read some tutorials about html and css.
Jump to PostOK basically it's pretty hard to do that. There are a few ways to do that, however. You could use that image for the background, and use an image map to specify the buttons. You could make an image with the diagonal button and a bit of the surroundings, so …
Jump to PostWell, best is to post your "codes" here, then we can see what you have done, and help you from there. I don't think anyone here are just going to give you the script.
Use the tutorials you read to compile your own script, then post it here, and …
Jump to PostI would actually start with an image map since you probably won't want to learn Flash now or buy Adobe's program. I would make the image your background image, but map it first. You can map it here. Check out
OK basically it's pretty hard to do that. There are a few ways to do that, however. You could use that image for the background, and use an image map to specify the buttons. You could make an image with the diagonal button and a bit of the surroundings, so that the final image is square, and then just position them in line (as done with this image and this image and this image which help make up this site). Finally, you could do that with Flash. Flash would actually be the easiest in this case.
Cheers!
Well, best is to post your "codes" here, then we can see what you have done, and help you from there. I don't think anyone here are just going to give you the script.
Use the tutorials you read to compile your own script, then post it here, and we will gladly help.
I reccomend you start here: http://www.w3schools.com/
I would actually start with an image map since you probably won't want to learn Flash now or buy Adobe's program. I would make the image your background image, but map it first. You can map it here. Check out this Wikipedia page for an explanation of image mapping. This w3schools page gives you a tutorial.
Cheers!
If you drop the angled bars with home, about, etc, you can simply set the rest of the image as the background to a wrapper div, and then set content and header divs inside that which correspond to the positions of the areas you will use for your content.
Then you might, with a bit more practise, set a nav bag below your header area and another as a side bar on the left and make individual images for the two types of angled bar. Don't use some fancy font as you have in your design - if it is not on my computer, it will substitute some other font and look very different.
Just remember, building web sites is not really about making a pretty picture in photoshop or similar packages.
Sir, I'm really new to this html and css. Where do I start? I had read the tutorials from w3schools.
Should I go first for the background of the web page? but where should I code it? in html or in css?
@drjohn - If it will be a picture button? I think it will be just ok.
You should start with creating your css stylesheet, defining the layout of your body, header area, menu area, side bar area, content area, and footer area.
Once you have the layout in place, you can specify for example different images for the backgrounds in the different sections of the layout.
When all that is in place, you can start with the html section where you will link your style sheet, and actually start to put content onto your page. You can here put content and or images inside the different sections of your page.
OK, this is clearly getting far too complicated for a beginner. I would (although I am clearly biased) start out with the simple suggestion I made in my earlier post. Here is how you would do it:
body {
background: url("http://yoursite.com/images/image_name.gif") 100% 100% no-repeat;
}That should work. Cheers!
You need to start by "slicing" your design into many images. The old fashioned (and easier) method is to then make a complicated table to control the placement of each of these images. Photoshop and fireworks can both be an invaluable aid in the above.
Fireworks is more focused on web design and has some common must have features that Photoshop is lacking but Photoshop does more in the long run as you becaome more expierenced, your choice.
After you've drawn the guidleines for where your slices are, you simply "export" (in Fireworks) the whole thing as a web page or "save page for web and devices" as a web page (in Photoshop. I would avoid trying to use a css layout if I were you as browser compaitbility issues will cause you many headaches as a beginner.
Now that you have it a web page... you need to turn some of your images into links and place text where the text goes. Your tutorials should help with the links. Fior the text remember this beginners trick. In the area where you want text, if you've used the above method, there will be an image right? well you can't have an image and text there can you? Of course you can. That area is actually a table "cell" make the image a background image for that table cell then put the image on top of it!
All of this sounds great; but without any knowledge or experience with HTML or CSS you're simply wasting your time; and we can't do it for you.
What did you use to make the design? Is it just an image of what you would like your web page to look like?
Regards, Arkinder
Note: Never ever use tables for layout. This was a method used for presentation before other options existed, in 1996. David Siegel, the guy who had the fantastic idea, regretted it a year later. We now have Cascading Style Sheets (CSS), use it instead.
Looking at what you want to accomplish - it seems rather ambitious for your very first web page design, especially if you are coding it yourself.
My first suggestion would be to simplify the background - not only will it be easier to code, but help the page download faster. Looking at your design the additional papers below your main menu do not add enough interest to keep them right now.
Keep the light brown background, and the white and blue sheets of paper for now.
Instead of a HUGE background image, make a small square that can be repeated (tiled) and look seamless. Again, easier to download and it makes sure the background is uniform no matter what size their browser is open to.
Once you create a small square that can be repeated (left to right and top to bottom) - your CSS code could read like this:
body {
background-image:url(.../CSS Practice/background.gif)
}Now you have your first "layer" of your web page created.
I found looking at each part of the design as a layer helps me determine how I want to create my divs and in what order I feel would make more sense. Each "layer" I complete, I test the code to make sure I am on the right track - by doing it this way I have a better idea of where the errors are, since I am adding to code I tested as working.
As Arkinder stated, DON'T use tables - they are not efficient and if you want to change your design later - it is very difficult.
One download (for the PC) a co-worker introduced me to is Notepad++, and it has proven helpful since it will color-code different parts of the code. You can save a file as .html or .css and it will recognize the different syntax parts. It won't code it for you - but it can help as you are learning.
Your next step would be to build a basic html file, just to begin testing out your CSS and help you view your page as you build it, remember to check it on all the major browsers (for example IE and Firefox) since they will display the information differently.
Hopefully this can help you start, where you get a bit of direction -
W3 Schools is one of your best resources to start with http://www.w3schools.com/
HTML information and tutorials: http://www.w3schools.com/html/default.asp
CSS information and tutorials: http://www.w3schools.com/css/default.asp
I highly recommend you work through their "Try it" tutorials - it helps you understand what is affected by the code.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.