Official Raz Veinz Blogsite

Archive for the My Internet Life Category

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.

216 web hexadecimal color codes

Posted in My Art, My Internet Life | No Comments »

For reference purpose.

FFFFFF CCCCCC 999999 666666 333333 000000
FFCC00 FF9900 FF6600 FF3300 99CC00 CC9900
FFCC33 FFCC66 FF9966 FF6633 CC3300 CC0033
CCFF00 CCFF33 333300 666600 999900 CCCC00
FFFF00 CC9933 CC6633 330000 660000 990000
CC0000 FF0000 FF3366 FF0033 99FF00 CCFF66
99CC33 666633 999933 CCCC33 FFFF33 996600
993300 663333 993333 CC3333 FF3333 CC3366
FF6699 FF0066 66FF00 99FF66 66CC33 669900
999966 CCCC66 FFFF66 996633 663300 996666
CC6666 FF6666 990033 CC3399 FF66CC FF0099
33FF00 66FF33 339900 66CC00 99FF33 CCCC99
FFFF99 CC9966 CC6600 CC9999 FF9999 FF3399
CC0066 990066 FF33CC FF00CC 00CC00 33CC00
336600 669933 99CC66 CCFF99 FFFFCC FFCC99
FF9933 FFCCCC FF99CC CC6699 993366 660033
CC0099 330033 33CC33 66CC66 00FF00 33FF33
66FF66 99FF99 CCFFCC CC99CC 996699 993399
990099 663366 660066 006600 336633 009900
339933 669966 99CC99 FFCCFF FF99FF FF66FF
FF33FF FF00FF CC66CC CC33CC 003300 00CC33
006633 339966 66CC99 99FFCC CCFFFF 3399FF
99CCFF CCCCFF CC99FF 9966CC 663399 330066
9900CC CC00CC 00FF33 33FF66 009933 00CC66
33FF99 99FFFF 99CCCC 0066CC 6699CC 9999FF
9999CC 9933FF 6600CC 660099 CC33FF CC00FF
00FF66 66FF99 33CC66 009966 66FFFF 66CCCC
669999 003366 336699 6666FF 6666CC 666699
330099 9933CC CC66FF 9900FF 00FF99 66FFCC
33CC99 33FFFF 33CCCC 339999 336666 006699
003399 3333FF 3333CC 333399 333366 6633CC
9966FF 6600FF 00FFCC 33FFCC 00FFFF 00CCCC
009999 006666 003333 3399CC 3366CC 0000FF
0000CC 000099 000066 000033 6633FF 3300FF
00CC99 0099CC 33CCFF 66CCFF 6699FF 3366FF
0033CC 3300CC 00CCFF 0099FF 0066FF 0033FF

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…