rianology

Finish messing around with layout using photoshop, we shall continue with the scripting languages for the web layout. Start it with creating couples text document, save the first document as a index.html file and the other one as style.css file  then we can starts the editorial process each file using text editor in this matter we used notepad++. See how it’s done

at the other hand, this is how it looks for css file 

 and see how these two scripting languages goes with layout we designed earlier

 we can see how it goes by opening index.html file using browser such as mozilla firefox or internet explorer. Also there is few notes that we need to pay attention;

• at the head section we need to create link from html to style.css to describe presentation of html
• make sure all images are in the images folder
• every div border is set : only for guide lines and it’s just temporary
• margin-right and margin-left set to be auto for central layout positions
• background: url (’image/header.jpg’) no-repeat is for applying heade images from images folder and make sure there is no repetition of the image

Assuming from the image before we could understand that html is markup languages for web-pages which describe the structure of text-based information in a document and css used to describe presentation of a document that written in markup language. without further ado we shall continue to the scripting language

 there are few additional that we put on the header section, we named the web-page and give the description of the web, and arranged style css for the presentation

 done with the header, we shall begin the body section, at this section we will find content and sidebar menu. but first lets take a look at main body

 as we know before, that in this main body section we will find content and sidebar menu. For the content it self it’s an optional, we can put as many content that we want on the page, but for now, one could give good example

 not to different with the content, in the sidebar menu we could also create as many menu that we want, depends on what we need, but here we just use few options

 from the style.css we could find out that we need to set every list from index.html for demanding good presentation of the sidebar list

 and for the last but not least, here it is the footer

 Now that we already complete every sections from the design, we may remove all of the temporary guide lines by replacing border: 1px solid; with border: 0px solid; , or we might cut them all. see how it goes

~ by riano annas on October 16, 2008.