OUTLOOK Like ASP.Net TreeView Implementation

by Unknown 07:49 0 comments
ASP.Net gives a lot of control for different purpose. In Toolbox there is a Navigation category which contains controls for navigation in your web. Microsoft provides Outlook to manage your email in simple and efficient way. So now we are also trying to make page little bit same look as Outlook.

Step 1: Open Visual Studio Go to File ->New->Website->ASP.Net Website
Step 2: Open default.aspx go to markup view by right clicking and view markup and put style to page to look good. Here is code for Style.
<style>
#header {
    background-color:orangered;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:ActiveCaption;
    height:300px;
    width:150px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:50px;
}
#block {
    background-color:black;
    color:white;
    margin:10px;
    padding:20px;
}
#footer {
    background-color:orangered;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>

Step 3: write other markup of page in given order:


Step 4: Here is markup for ASP.Net TreeView Control Drag a TreeView control from toolbar and drop it to <div id=”nav”> </div>. Here in Markup I’ll use Literal Control for View MailBox Header details. Like Inbox, Draft, sent etc.

Step 5: Go to page designer and click on smart tag of treeview control and Edit Nodes.. and add node to treeview.




Step 6: Apply formatting to treeview Using AutoFormat option available when clicking the smart tag. I am applying Arrow format.

Step 7: When user click on TreeView Nodes then it shows it corresponding values in Literal Control. So here is a Treeview control event named SelectedNodeChanged is used. This event occur when user select node of TreeView Control. Go to code window by right click ->view code or you can press F7 for code window.


Now everything is done press F5 or Run program. View page in browser…


Here no node is selected that why it does n’t show anything when you clicking on any of node of child node it shows it name of Black Block. Like this window.


It is just for simple learn purpose you can add more style operations as per your choice.



0 comments:

CSS FOR BEGINNERS

by Unknown 08:27 0 comments
CSS FOR BEGINNERS

CSS (Cascading Style Sheet) is basically used to provide look and feel to your web page. With the use of CSS you can provide customized fonts, font-sizes, colour, images, border and shading any many more features which you can provide to web page through the use of CSS.


Take a look a page with and without CSS Style.

How to use CSS

You can use CSS directly into your web page or you can create a CSS style file (.css) and link to your multiple web pages. You can prefer any of them as per your need. 
  • Write style directly into web page
  • Create a separate  CSS Style sheet file 


Let’s take a look how to use these two ways to implement CSS into web pages.

Now we are using first approach to use CSS. You can directly define you styles using <style> tag. Write your CSS classes into style tag and apply CSS to different component which you use into your web page. Write style tag into head section this is preferred way to write style into your web page
<head>
<style>
                Write css classes here....
</style>

</head>

How to write CSS Classes

.css-class-name 
{
      Here we define style for particular css class...
}

like we write :

.body-style
{
                Here we define style for particular css class...
}

Here i am showing some text related style like font, size, style text and background colours  for body section

.body-style
{
   background: orange;  
   text-align: center;   
   font-family: Arial;   
   font-style: Italic;
   color: blue;   
   font-size: 25px;
}

For using CSS within Page 

<html>
<head>
<title> First CSS Pagee </title>
<style>
.body-style
{
background: orange;   
text-align: center;    
font-family: Arial;    
font-style: Italic;
color: blue;    
font-size: 25px;
}
</style>
<body class="body-style">
Hey.... It's my first CSS Page
<br>
I'm Going to Design my web with my style ...
</body>
</html>

For using CSS with .CSS file 

HTML Page Code : 
<html>
<head>
<title> First CSS Pagee </title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body class="body-style">
Hey.... It's my first CSS Page
<br>
I'm Going to Design my web with my style ...
</body>
</html>

CSS File Code : 
.body-style
{    
background: orange;   
text-align: center;    
font-family: Arial;    
font-style: Italic;
color: blue;    
font-size: 25px;
}

For Create .CSS file just go to notepad and write code and save file as with .CSS extension
like we use style.css


0 comments:

SHAPE YOUR TEXT WITH IMAGE

by Unknown 08:23 0 comments
SHAPE YOUR TEXT WITH IMAGE

When you are reading newspapers, magazine or some reading stuff you’ve noticed that page is designed is pretty cool text wrapping style with combination of image and text which is style related to article.

Take a look you need to do like that…

HTML Page with Image & Text Wrap
It’s look pretty cool…
I’m not cropping this image or not edit image it’s a work of CSS Styles.
The original image is look like that 
If you want to make html page look like this you've need to follow simple steps...
Firstly create a .CSS file or you can directly put style using html <style> tag.

Write this code in your .css file

.shape{
  -webkit-clip-path: circle(50%);
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;  
}

or if you want to put style directly into html page write like this.

<style>
.shape{
  -webkit-clip-path: circle(50%);
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;  
}
</style>

Now write html page code:

<!DOCTYPE html5>
<html>
<head>
<title> css implementation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img class="shape2" src="a.png"/>
<P>because the ones who are crazy enough to think that they
can change the world, are the one who do - Steve Jobs
</P>
<P>
THE ONLY WAY TO BE TRULY SATISFIED IS TO DO WHAT YOU
BELIEVE IS GREAT WORK - Steve Jobs
</P>
<P>
I can understand wanting to have a million dollars...
but once you get beyond that. I have to tell you.
it's the same hamburger - Bill Gates
</P>
<P>
I failed in some subjects in exam,
but my friend passed in all. Now he
is an engineer in Microsoft and I am
the owner of Microsoft
</P>
</body>
</html>

here i'll include a css file using <link> tag if you are using <style> tag you can remove link tag. Here i'll specify image using image tage and use css class into image tag. which will show your image with circle shape and text is wrapped with image shape. If you are write few lines in paragraph tag you can view your page by re-size you browser window. Take a look of result in browser  




0 comments:

Subscribe to: Posts (Atom)

Be our Fan