javyboy Posted July 21, 2008 Share Posted July 21, 2008 since im here new and all, I was trying t practice doing my first webpage.ok now, i had an idea to do like an image ( wich i can do, i know photoshop )and u hit the image like a image hyperlink thing and therre u acsses my page.so any1 know what i need to do i do once i make the image/banner type of thing if i want it on the center of the page. any1 know the coding i need to type?heres the image im thinking of usinghttp://i34.tinypic.com/2ryrsl2.jpgand second i was wondering what is the best way to start a layout, with tables or frames?if theres another way let me know.....-TY Link to comment Share on other sites More sharing options...
Ingolme Posted July 21, 2008 Share Posted July 21, 2008 No tables, no frames. Those are really old-fashioned and unefficient.Study the HTML tutorial and the CSS tutorial.And after you've learnt it, here's a little pointer on how layouts can be using CSS: <html> <head> <title>HTML document</title> <style type="text/css"> html,body { margin: 0; padding: 0; } div { border: 1px solid red; } h1,h2,h3,h4,h5,h6,p,form { margin: 0; } #left { float: left; width: 180px; } #main { margin-left: 180px; } #footer { clear: both; } </style> </head> <body> <div id="header"><h1>Document title</h1></div> <div id="left"> <ul> <li>Menu item</li> <li>Menu item</li> <li>Menu item</li> </ul> </div> <div id="main"> <h2>Section</h2> <p>Some content</p> </div> <div id="footer"></div> <div id="footer">Document footer</div> </body></html> Link to comment Share on other sites More sharing options...
Lonig Posted July 21, 2008 Share Posted July 21, 2008 I'll answer in reverse...1) Best way to design a layout?- Since you said you know photoshop, I'd recommend designing it in photoshop and using ImageReady to work with the slices. Or, if you cannot figure out slices, still design it in photoshop and then use CSS/HTML to make the layout.2) Code for image... (this might be messy...) <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>My Picture link</title><style type="text/css">body{width:100%;}img{margin-left:50%;margin-right:50%;}</style></head><body><img src="images/logo.png" alt="logo"></body></html> Or at least that's how i'd do it... (which isnt going to display it "correctly", but will give you an idea of CSS and HTML).follow Ingolme's recomendation and start with the HTML tutorial here at w3cshools. Link to comment Share on other sites More sharing options...
javyboy Posted July 21, 2008 Author Share Posted July 21, 2008 ok ive been reading it for more than a week now, and theres somethings i still dont get like on html idk if its me, but i didnt quite capture is theres a way todo a layout ( even a simple 1 ). and on css i only read u coyuld do it by frames or tables, dont remeber wich________________________Longinthe way u suggest i belive could be good, but i havent tried slicing in PS, and the image ready part maybe a little hard since i only have the PS CS3 and it didnt come with image ready. now forget i know PS, between frames, tables or any other way, can u guys specify a little better, on how to do a simple, or even the simplest web page layout. maybe a solid color on BG, a tabble with some buttons so u can acces other pages following the web page.....PS.Prolly im a little confused just for the fact that when i first thought of web desing, i only thought about doing the desing by PS and just uploaded and maybe do a lil more things to it and u done, but now that i see this page W3schools, i see a whole diferent conceptbe a little gentle at explaining, Link to comment Share on other sites More sharing options...
Ingolme Posted July 21, 2008 Share Posted July 21, 2008 Frames and tables are bad examples of laying out pages. A lot of bad web developers never get a grasp on CSS and build their sites with tables. This is a <div>. By default it's as wide as whatever contains it, it's invisible, and everything outside of it will go under or over it, never beside it: <div></div> It's just an invisible box that contains content. CSS can do anything with it. For example, give it a width and height: <div style="width: 200px; height: 100px;"></div> You can put text inside a <div>, or images with the <img> tag. And if you want to see the <div> (it's invisible) you can give it a background color or border: <div style="width: 200px; height: 100px; background-color: #0099FF; border-width: 1px; border-style: solid; border-color: black">This is some text</div> To make a "column" on the left, you can use the float property so that it will allow content next to it. This only works if it's not taking the full width of the page, so we give it a width too: <div style="width: 160px; float: left;">Some content</div> If you have floated a <div> and want something below it, use the clear property: <div style="width: 160px; float: left;">Some content</div><div>This goes beside the column</div><div style="clear: both">This goes below the column</div> Link to comment Share on other sites More sharing options...
javyboy Posted July 21, 2008 Author Share Posted July 21, 2008 ok so if now i get it here, why i didnt understand most of that in the actual page? thanks for that, let me see if it helps Link to comment Share on other sites More sharing options...
Lonig Posted July 21, 2008 Share Posted July 21, 2008 Well... You don't really want to do frames OR tables...We are recommending you use CSS... and CSS you can do almost whatever you want.But if you are only giving me the choice between frames or tables... sadly, I'll say tables since once you DO learn CSS it should be easier to convert the table to CSS than a frame setup.also, you can always find "free" templates at websites to "tear apart" and find out how stuff is done(if you learn better that way)... try something like http://www.freewebsitetemplates.com/ or I'm sure others have better.. that just what google popped up for me. Link to comment Share on other sites More sharing options...
Lonig Posted July 21, 2008 Share Posted July 21, 2008 has a pretty good video to help you with CS3 slicing. Apparently it's builtin and doesnt reuire Image Ready anymore. i'm a little behind on graphic arts Link to comment Share on other sites More sharing options...
javyboy Posted July 21, 2008 Author Share Posted July 21, 2008 thanks for the link, imma read AGAIN lol, CSS and see wut i missedbtw I was using the search to find if my question was before asked, and thts why im like only focusing on tables or frames..my bad there :)and with the templates, imma try that aswell and see how it goes Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.