Official Raz Veinz Blogsite

Posts Tagged Coding

I Build 8 – Creating Webpage/Website Main Body

Posted in My Internet Life | No Comments »

This is where all the main contents goes, either text, animation, images, sound or video, it’s simple to create the main body layout, but a little bit tricky, it should editable, flexible and attractive.

I assume you read my previous  entry

The coding and structure is similar to Header Section  just with a little bit modification, here the CCS code, under the  new title,

/******************************/
/*  MAIN BODY SECTION  */
/******************************/

.Main-body {
    width:664px;
    text-align: left;
    margin: auto;
}

.Contents {
    width:600px;
    top: 230px;
    text-align: justify;
    background-image: url(../Image/Paper.png);
    background-attachment: scroll;
    background-repeat: repeat;    
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 12px;
    line-height: 20px;
    padding: 30px 30px 30px 50px;
    margin: 0 auto auto -15px;
    z-index: 1;
}

Note :

At the margin, I put a -15px for margin-left to adjust the background image position.

background-attachment: – The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

background-repeat: – refer to my last CSS entry for more details

padding: – The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values. Example,

End Note :

And this is the HTML code,

<!– (Main Body) –>

<div class=”Main-body”>
<div style=”position:absolute;”>
<!– TemplateBeginEditable name=”Contents” –>
  <p>In progress, coming soon..</p>
  <!– TemplateEndEditable –></div>
</div>

<!– (Main Body End) –>

To text in, I used MS Office or etc., and paste in the Contents (do not paste at the coding) it’s better.

I think, that’s all for the basic main body, see you in the next entry.

I Build 7 – Creating Webpage/Website Header and Title

Posted in My Internet Life | No Comments »

Header is graphical/media content or only text that runs across the top of the web page design on your screen, header is very important and most valuable space on the screen, it will make someone fall in love at the first sight with your webpage or love to click the close tab button immediately. The primary purpose is to promote your company’s brand and make it instantly recognizable to your audience.

It will be anything! Depend on your purpose and creativity, I choose to use Flash or rectangular image.

I assume you read my basic CSS  entry

To create the layout of the webpage using CSS, we need to set the division or a section in an HTML document using <div> Tag. The <div> tag defines a division or a section in an HTML document and used to group block-elements to format them with CSS. We need to define the parameters between the tag. For example, imagine <div> Tag as the plain paper, and CSS as you want to coloring, put some sticker and cut it out and put it on your wall (webpage). Confuse?  Lets try some code…

Put this CSS code on your CSS sheet…

/******************************/
/*  HEADER SECTION  */
/******************************/

.Header {
    width:664px;
    margin: auto;
    left: auto;
}

.HeaderBG {
    background-image: url(../Image/Header_BG.png);
    height: 194px;
    width: 664px;
    z-index: 1;
    top: 0px;
}

I hope this picture will describe more than text

Example of left and top margin,

.HeaderBG and .Header is just the name, you can put any name that you want, DO NOT start a class name with a number! This is only supported in Internet Explorer. Just don’t forget to put the “.” at the first letter to defined the HTML class attribute (will explain later). This name is used to create a direct relationship with the HTML tag that you want to edit.

To make sure the layout always at the center of the webpage, leave the the margin and left is auto for .header –> margin: auto;   &  left: auto;

To make sure the image for .HeaderBG always at the center of the web-browsers at any screen resolution, leave the the left value is auto –> left: auto;

 Now, this the time to manipulate that CSS code, put this code at the HTML Document (Webpage) under the <body> tag

<!– (Header) –> Note : this is the comment tag ( <!–…–>) Comments are not displayed in the browsers.

<div class=”Header”>

<div class=”HeaderBG”  style=”position:absolute;”></div>

</div>

<!– (Header End) –>

class – It is used to create different classes of a element, where each class can have its own properties. The class attribute is mostly used to point to a class in a style sheet and let you apply style properties to any element or elements on the page.

style – The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser. Each HTML document can contain multiple <style> tags.

position – Sets or returns the type of positioning method used for an element (static, relative, absolute or fixed)

absolute – The element is positioned relative to its first positioned (not static) ancestor element

That image is only for the background for the main image, if you want to put only plain image, the procedure is similar, just need a little bit modification, the name for html code and the name, the image link, background-repeat: no-repeat;,  margin, top, height, width and z-index (make sure the value is more than background image z-index value) for the CSS code .

For CSS (Under HEADER SECTION)—>

.Headermedia {
background-image: url(../Image/raz-veinz-header-2.jpg);
background-repeat: no-repeat;
margin: 0 0 0 30px;
height: 136px;
width: 600px;
z-index: 2;
top: 20px;
}

For HTML (Inside the <div class=”Header”></div> tag) —>

<div class=”Headermedia” style=”position:absolute;”></div>

If you want to put the Flash, used this Flash Satay Method, the valid W3C’s standards, this is the original code, of course, you need to create the Flash media first!

<object type=”application/x-shockwave-flash
data=”c.swf?path=movie.swf”
width=”400″ height=”300″>
<param name=”movie”
value=”c.swf?path=movie.swf” />
<img src=”noflash.gif”
width=”200″ height=”100″ alt=”” />
</object>

 Flash media have advantages and also disadvantages, read more here.

To put the text,

For CSS (Under HEADER SECTION)—>

.Headertext {
text-align: left;
font-family: “Times New Roman”, Times, serif;
color: #24201D;
height: 136px;
width: 664px;
z-index: 3;
top: 50px;
}
.Headertext h1{
font-size: 34px;
margin: 0 0 0 300px;
}

For HTML (Inside the <div class=”Header”></div> tag) —>

<div class=”Headertext” style=”position:absolute;”><h1>Raz-Veinz.com</h1></div>

The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading.

I’m  using .Headertext to create a new html division for text, and .Headertext h1 for <h1> tag that relate with .Headertext, I know this is a little bit complicated, maybe they could be more simplified, but I like to use the code in separate divisions, for more flexibility and future planning.

For the webpage title, the procedure is the same, here the code,

For the title and title background image CSS (Under HEADER SECTION)—>,

.Main-title-BG {
    background-image: url(../Image/Header_Wood.png);
    top: 203px;
    height: 79px;
    width: 765px;
    margin: -20px 0 0 -50px;
    z-index: 2;
}
    
.Main-title {
    top: 202px;
    height: 21px;
    width: 300px;
    z-index: 3;
    color: #CFC6C0;
    
}

.Main-title h2{
    font-style: oblique;
    font-size: 24px;
    margin: 0 0 0 30px;
}

For HTML (Inside the <div class=”Header”></div> tag) —>

<div class=”Main-title-BG” style=”position:absolute;”></div>
<div class=”Main-title” style=”position:absolute;”>
<!– TemplateBeginEditable name=”Main-Title” –>
<h2>Home</h2>
<!– TemplateEndEditable –>
</div>

The result, view with internet browser (shortkey ; F12)

To make it clearly, this is where the coding goes…

I think, that’s all for the basic header, see you in the next entry.

I Build 6 – Creating CSS (Cascading Style Sheets) Using Dreamweaver

Posted in My Internet Life | No Comments »

Fact : Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. Source : http://en.wikipedia.org/wiki/Css#Use

Why You Should Use CSS?

Back in early days of the world wide web, it was enough to construct a web page using only HTML coding. But today with influx of all new kinds of devices surfing the net, it has become increasingly important to have web page coding separated into two distinct components: content and styles. In this manner, you can take the same basic content and style it according to the device that is accessing the web page. For example, making a web page printer-friendly can be easily accomplished using CSS. The same goes for mobile devices.

They are a way to control the look and feel of your HTML documents in an organized and efficient manner. With CSS you will be able to:

  • Add new looks to your old HTML
  • Completely restyle a web site with only a few changes to your CSS code
  • Use the “style” you create on any webpage you wish!

Wow, now I really don’t know how to start with, maybe from the very basic thing, such how to create font, color, background color, border style, etc using CSS….I want to write about my experience playing with CSS using Dreamweaver, to create professional web page, you should definitely learn CSS, maybe you will fall in love with it, who know? More coding to learn? Don’t you worry, step by step, world now-day make us know-nothing-but-want-to-learn easier even you come from definitely from other field, just like me. in an organized and efficient manner

The concept is simple, for example, imagine, like we as webpage and our wardrobe as CSS, so, every style and fashion cloth that you that need for stylish is there, if not, you need to sewing, buy or even steal! Could you imagine yourself without your stylish cloth? That is the basic, but CSS is more than just wardrobe if you explore more deeper.

Now, if you read about my last ‘I Build’ topic, I just create a blank webpage template, the naked man! Let’s try put some stylish on him.

1. Folder

You can write the CSS coding on the template itself, but I highly recommend you to make it separate page,  to be more organized, neat and easy to operate, Click File (Alt+f) –> New (n) –> Blank Page –> Page Type : CSS (Cascading Style Sheets)  template –> Click Create (Enter) Save at your website root (Ctrl+s)

–> create new folder for CSS (for example, CSS or Any name that you prefer)  –> File name: (Any name that you prefer) –> Click Save(Enter) It should be like below picture,

The file is saved in the Templates folder with a .css extension.

2. Connecting

To make it work with your template, you need to tell ‘him’ that you have a new wardrobe for him, Put this coding

<link href=”../CSS/Raz-Veinz-CSS.css” rel=”stylesheet” type=”text/css” />

inside the template HEAD section

3. HTML Style Example

For me, I would like to divide my CSS for specific sections, for example, BACKGROUND SECTION, to put the title without touching the code, type;

/******************************/

/*  TITLE  */

/******************************/

Let’s try, to know either it functioning or not with simple coding, background color,

body { background-color: #8AA7C2; }

body is the name for CSS Style (or Any name that you prefer) and #8AA7C2 is my background color coding, you can use either DECIMAL RGB or HEXADECIMAL HTML color codes, click here for example of HEXADECIMAL HTML, just copy and paste the color code, the result should be like this;

You also can put some image for the background picture or as additional background image, create a new folder for image, right click at the root folder link at the right side bar menu, click New Folder,

Rename the folder, for example, Image or Any name that you prefer, you can drag any image into this folder for your website purpose, for example here, I put two image, Illusion_Window.jpg and Header-Pattern.png,

below is Illusion_Window.jpg,

Then, recall them! put this coding in the same CSS Style (body)

background-image: url(../Image/Illusion_Window.jpg);

/Image/ = Location of  image/picture folder 

It will multiply like this,

you also could make it multiply for only X or Y axis only, put an additional code below, also in the same CSS Style (body)

background-repeat:repeat-x; for X axis

The result,

or background-repeat:repeat-y; for Y axis

If you want to make it just single,  replace the coding with,

background-repeat:no-repeat

Then I choose to use another background image for my website, use your creativity!

body { background-color: #8AA7C2; background-image: url(../Image/Header-Pattern.png); background-repeat:repeat-x; }

Here the result,

If you want to fast edit or add new property, look at the very right side bar, click CSS menu –> All, everything in your CSS is there.

So, that’s the very basic thing about CSS, the introduction,  if you want to learn more, there are thousand tutorial out-there, just ask Uncle Google, I recommend CSS Tutorial , I will use this for my next entry.

I Build 5 – Creating Webpage Template Using Dreamweaver

Posted in My Internet Life | No Comments »

A web template is a tool used to separate content from presentation in web design, and for mass-production of web documents. It is a basic component of a web template system. Web templates can be used to set up any type of website. In its simplest sense, a web template operates similarly to a form letter for use in setting up a website. Source : http://en.wikipedia.org/wiki/Web_template

Example below showed how I build my simple webpage template (raz-veinz.com) © Mohd Razif Omar

1. Folder

Open Dreamweaver, first we need to create root folder (website’s project folder),

Click Site (Alt+s) –> New site…(n) –> Advanced –> Local info –> Site name : (Any name that you prefer) –> Local root folder : (Any location that you prefer) –> Default images folder : (optional)

–> Click OK (Enter)

2. Blank Template

So now, we are ready to make the template,

Click File (Alt+f) –> New (n) –> Blank template –> Template Type : HTML (HyperText Markup Language)  template –> Layout : <none> –> Click Create (Enter)

Basically, The web page is then further subdivided into two main sections which are the ‘head’ and the ‘body’. The head section begins with the <head> start tag and terminates with the </head> end tag. Immediately following this comes the <body> start tag and just before the html end tag comes the </body> end tag.

The head section or document head has little content and mostly contains HTML coded instructions on how to title, categorize and ‘run’ the web page. The body section or document body on the other hand contains almost all of the content that you will put on your web page and this content —usually text but can also be pictures and sounds— is formatted using more HTML code. All text that you place outside of any angle brackets will become ‘visible text’ and will be displayed by your web browser on your web page. By placing that text in between the start and end tags of certain HTML elements, you can instruct a web browser where and how to display that text.

At the ‘body’ section, insert “Editable Region”,

Click Insert (Alt+i) –> Template Objects –> Editable Region ( Ctrl+Alt+v) –> Name: (Any name that you prefer) –> Click OK (Enter)

Editable portions of the template can be changed from page to page, allowing you to use the template for different pages on your website. Editable regions will appear wherever the text cursor is pointing, so move the cursor to the area you want to make editable.

Save (Ctrl+s) –> Save as: (Any name that you prefer) –> Click Save (Enter)

The file is saved in the Templates folder with a .dwt extension.

3. Title

Adding a title element to Webpage, This title is created using the <title>...</title> tags which are themselves always nested within the <head>...</head> tags. All text appearing after the <title> start tag and before the </title> end tag will be displayed as your web page title.

4. Meta Element

Used for a couple of different functions inside the HEAD section. For example, to make search engines like Google and Yahoo! or web browsers to know about important keywords inside the document such a page description, keywords, author of the document, last modified, and other metadata.

Some search engines will use the name and content attributes of the meta element to index your pages.

The following meta element defines a description of a page:

<meta name=”description” content=”Raz Veinz Art” />

The following meta element defines keywords for a page:

<meta name=”keywords” content=”freelance,illustrator,drawing,art,raz,veinz,Mohd Razif Omar,graphic design,illustration,web design,” />

The intention of the name and content attributes is to describe the content of a page.

To be continue…