Webmaster Domain Open Source » CSS http://www.webceraton.com Webmaster Hosting Domain For Open Source, Joomla, Wordpress, Silverstripe, Drupal, and for Internet Marketing, Internet Marketing Forum Fri, 23 Jul 2010 14:01:13 +0000 en hourly 1 http://wordpress.org/?v=3.0 Free Tutorial Website Design And Drawing Tutorial http://www.webceraton.com/2010/07/free-tutorial-website-design-and-drawing-tutorial/ http://www.webceraton.com/2010/07/free-tutorial-website-design-and-drawing-tutorial/#comments Fri, 23 Jul 2010 14:01:13 +0000 Subagio Eko http://www.webceraton.com/?p=264 For the novice or new to the web design, should be wondering, how to create a website, how to create great website, from where ? should the web create from notepad ? or from graphic ? All you need answer for all of your questions regarding website design could be answered to this article:

Designing A Highly-Professional Website, From the Sketch to the Code

I have design the website from many years, but it is worth to read from other people how they think about designing to the web, and it will give you more light bulb to design more and more.

Another worth graphic design to create sophisticated graphic using sketch or pecil would be to this article, it is more than one, yes it is 50 Awesome Graphic Tutorial, here is the title and the link:

50 Awesome Drawing Tutorials

Have a great look and learn, keep on fighting for your greatest goal.

]]> http://www.webceraton.com/2010/07/free-tutorial-website-design-and-drawing-tutorial/feed/ 0 Adobe Dreamweaver: Drag And Drop CSS Layering The Web http://www.webceraton.com/2009/12/adobe-dreamweaver-drag-and-drop-css-layering-the-ne/ http://www.webceraton.com/2009/12/adobe-dreamweaver-drag-and-drop-css-layering-the-ne/#comments Sat, 19 Dec 2009 02:30:15 +0000 Subagio Eko http://www.webceraton.com/?p=255 We came to the frontier where old style code programming to display page from html ground has evolve and changes. Who not know about html table, it’s spread all over the web in the past, to display text, image, everything using table tag. But now, the table became fade away, when CSS introduce div tag and the special thing about div tag is there are layering way for div tag.

The Layer of Div Tag
When it came to display more than one element inside of the page, let say you want to add dynamic text inside of image, you need to add more and more element at the top of it. Well, CSS provide layering div tag that support multiple elament to put at the top of another div tag. Here is the capture image of how div tag layer work,there are three div tag.

Div Tag Layer illustration

Div Tag Layer illustration

The div tag with title div container Layer 1, the position at the bottom and will act as dv tag cointainer for each div tag inside of the div tag container. The bottom div tag should set as layer 1, the next div tag at the top of div tag container is div tag with layer 2, and the final div tag at the top of div tag layer 2 is the div tag layer 3. Each time you click the bottom of div tag in Adobe Dreamweaver, all div tag at the top of it would be selected too. Because i set it as nested div tag, i put the inner most of div tag inside of the outer most of div tag. Here is the snapshot of code, the layer in CSS represented in code as z-index so you should be aware of z-index number when designing css layer.

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–

#apDiv1 {
position:absolute;
left:34px;
top:19px;
width:285px;
height:235px;
z-index:1;
}
#apDiv2 {
position:absolute;
width:250px;
height:184px;
z-index:2;
left: 18px;
top: 27px;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 19px;
top: 31px;
}
–>
</style>
</head>

<body>
<div id=”apDiv1″>Div Container

<div id=”apDiv2″>Div tag layer 2
<div id=”apDiv3″>Div tag layer 3
</div>
</div>
Layer 1</div>
</body>
</html>

The Drag And Drop of CSS
How to do this in Adobe Dreamweaver, it is the easy way to produce div tag layering element. While in design mode from Adobe Dreamweaver Toolbar, click layout toolbar. And click Draw Ap Div, then place it on the design space area and put text on it as Div Container Layer 1. Layer 1 in div tag could be set as z-index = 1. Now click the the div layer on the design space area, while still in selected element, now click the icon Draw AP Div at Layout toolbar, and drag it inside of the div container that we created before. Set the the text inside of ApDiv layer 2 with Div tag layer 2, now click apdiv tag layer 2, then click and drag another apdiv inside of div tag layer 2, and set the text inside of div tag layer 3 with div tag layer 3. That’s all, you see how to drag and drop CSS div tag and layering with z-index. This is usefull when you want to translate the beautifull web design into html with css.

]]> http://www.webceraton.com/2009/12/adobe-dreamweaver-drag-and-drop-css-layering-the-ne/feed/ 0