Blog Post New Entry

Thank You for Visit Me

JQuery UI autocomplete textbox with database in asp.net

Posted by imomins on October 7, 2012 at 4:20 AM

Introduction:

In this article I will explain how to implement Asp.net autocomplete textbox with database using JQuery.

Description:

In previous articles I explained Ajax autocomplete extender example and JQuery autocomplete textbox with images in asp.net. Now I will explain another article relating to autocomplete textbox with JQuery UI in asp.net.

To implement this concept first we need to design table in database to save user details in database.

Column Name	Data Type	Allow Nulls
UserId	int(set identity property=true)	No
UserName	varchar(50)	Yes
Location	nvarchar(max)	Yes

After completion table design enter some of user details in database to work for our sample.

Write the following code in your aspx page

<title>AutoComplete Box with jQuery</title>

$(document).ready(function() {

SearchText();

});

function SearchText() {

$(".autosuggest").autocomplete({

source: function(request, response) {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default.aspx/GetAutoCompleteData",

data: "{'username':'" + document.getElementById('txtSearch').value + "'}",

dataType: "json",

success: function(data) {

response(data.d);

error: function(result) {

alert("Error");

}

});

}

});

}

</script>

</head>

<body>

<label for="tbAuto">Enter UserName: </label>

</div>

</form>

</body>

</html>

If you observe above code in header section I added some of script and css files by using those files we have a chance to display auto complete text with css style. To get those files just add those urls in in your application.

Another thing here we need to know is script function in header section

$(".autosuggest").autocomplete({

source: function(request, response) {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default.aspx/GetAutoCompleteData",

data: "{'username':'" + document.getElementById('txtSearch').value + "'}",

dataType: "json",

success: function(data) {

response(data.d);

error: function(result) {

alert("Error");

}

});

}

});

This is the function declaration of JSON format we are using this JSON function to call web methods using JQuery $.ajax() whenever we need to make Ajax call with JQuery then we will use JSON functions like as we mentioned in above format. Here type, ContentType and dataType are same for all functions only url, data and success functions will vary based on our requirement.

url: This is the path of our Webmethods

data: we will pass parameters using this parameter if no parameters then we need to use data: "{}"

success: Once our web method execution completed then success function will execute and return username matching’s

(Note: JSON is a case sensitive please be careful before write JSON format of data)

Now open code behind file and add following namespaces

using System;

using System.Collections.Generic;

using System.Data.SqlClient;

using System.Web.Services;

After that write the following code

C#.NET Code

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static List<string> GetAutoCompleteData(string username)

{

List<string> result = new List<string>();

using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))

{

using (SqlCommand cmd = new SqlCommand("select DISTINCT UserName from UserInformation where UserName LIKE '%'[email protected]+'%'", con))

{

con.Open();

cmd.Parameters.AddWithValue("@SearchText", username);

SqlDataReader dr = cmd.ExecuteReader();

while (dr.Read())

{

result.Add(dr["UserName"].ToString());

}

return result;

}

VB.NET Code:

Imports System.Collections.Generic

Imports System.Data.SqlClient

Imports System.Web.Services

Partial Class Default

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

End Sub

<WebMethod()> _

Public Shared Function GetAutoCompleteData(ByVal username As String) As List(Of String)

Dim result As New List(Of String)()

Using con As New SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")

Using cmd As New SqlCommand("select DISTINCT UserName from UserInformation where UserName LIKE '%'[email protected]+'%'", con)

con.Open()

cmd.Parameters.AddWithValue("@SearchText", username)

Dim dr As SqlDataReader = cmd.ExecuteReader()

While dr.Read()

result.Add(dr("UserName").ToString())

End While

Return result

End Using

End Function

End Class

Now run your application and check the output that would be like this

Download sample code attached

Jquery autocomplete textbox with multiple words separated by comma or semicolon in asp.net

Posted by imomins on October 7, 2012 at 4:15 AM

comments (0)

Introduction:

In this article I will explain how to implement JQuery UI autocomplete textbox with multiple words or values with comma separated or semi colon separated in asp.net.

Description:

In previous articles I explained JQuery autocomplete textbox with asp.net and JQuery autocomplete textbox with images in asp.net and many articles relating to JQuery. Now I will explain how to implement autocomplete textbox with multiple word selection in asp.net.

To implement this concept first we need to design table in database to save user details in database.

Column Name	Data Type	Allow Nulls
UserId	int(set identity property=true)	No
UserName	varchar(50)	Yes
Location	nvarchar(max)	Yes

After completion table design enter some of user details in database to work for our sample.

Write the following code in your aspx page

<title>AutoComplete Box with jQuery</title>

$(document).ready(function() {

SearchText();

});

function SearchText() {

$("#txtSearch").autocomplete({

source: function(request, response) {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default.aspx/GetAutoCompleteData",

data: "{'username':'" + extractLast(request.term) + "'}",

dataType: "json",

success: function(data) {

response(data.d);

error: function(result) {

alert("Error");

}

});

focus: function() {

// prevent value inserted on focus

return false;

select: function(event, ui) {

var terms = split(this.value);

// remove the current input

terms.pop();

// add the selected item

terms.push(ui.item.value);

// add placeholder to get the comma-and-space at the end

terms.push("");

this.value = terms.join(", ");

return false;

}

});

$("#txtSearch").bind("keydown", function(event) {

if (event.keyCode === $.ui.keyCode.TAB &&

$(this).data("autocomplete").menu.active) {

event.preventDefault();

}

})

function split(val) {

return val.split(/,\s*/);

}

function extractLast(term) {

return split(term).pop();

}

</script>

</head>

<body>

<label for="tbAuto">Enter UserName: </label>

<asp:TextBox ID="txtSearch" runat="server" Width="300px"></asp:TextBox>

</div>

</form>

</body>

</html>

If you observe above code in header section I added some of script and css files by using those files we have a chance to implement autocomplete textbox with multiple values selection in asp.net. To get those files download attached folder and add the urls mentioned in header section to your application

Another thing here we need to know is script functions in header section

$("#txtSearch").autocomplete({

source: function(request, response) {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default.aspx/GetAutoCompleteData",

data: "{'username':'" + extractLast(request.term) + "'}",

dataType: "json",

success: function(data) {

response(data.d);

error: function(result) {

alert("Error");

}

});

This is the function declaration of JSON format we are using this JSON function to call web methods using JQuery $.ajax() whenever we need to make Ajax call with JQuery then we will use JSON functions like as we mentioned in above format. If you want to know more about it check these posts call pagemethods with JSON and autocomplete textbox with Jquery.

Now open code behind file and add following namespaces

using System;

using System.Collections.Generic;

using System.Data.SqlClient;

using System.Web.Services;

After that write the following code

C#.NET Code

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static List<string> GetAutoCompleteData(string username)

{

List<string> result = new List<string>();

using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))

{

using (SqlCommand cmd = new SqlCommand("select DISTINCT UserName from UserInformation where UserName LIKE '%'[email protected]+'%'", con))

{

con.Open();

cmd.Parameters.AddWithValue("@SearchText", username);

SqlDataReader dr = cmd.ExecuteReader();

while (dr.Read())

{

result.Add(dr["UserName"].ToString());

}

return result;

}

VB.NET Code:

Imports System.Collections.Generic

Imports System.Data.SqlClient

Imports System.Web.Services

Partial Class Default

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

End Sub

<WebMethod()> _

Public Shared Function GetAutoCompleteData(ByVal username As String) As List(Of String)

Dim result As New List(Of String)()

Using con As New SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")

Using cmd As New SqlCommand("select DISTINCT UserName from UserInformation where UserName LIKE '%'[email protected]+'%'", con)

con.Open()

cmd.Parameters.AddWithValue("@SearchText", username)

Dim dr As SqlDataReader = cmd.ExecuteReader()

While dr.Read()

result.Add(dr("UserName").ToString())

End While

Return result

End Using

End Function

End Class

Now run your application and check the output that would be like this

Download sample code attached

How to send or pass multiple parameters in jquery ajax in asp.net

Posted by imomins on October 7, 2012 at 4:10 AM

comments (0)

Introduction:

Here I will explain how to send or pass multiple parameters using JQuery or JSON in asp.net.

Description:

In previous posts I explained articles relating JSON in that I explained how to call page methods using JSON or JQuery in asp.net or Auto complete textbox with JQuery/JSON in asp.net. Now I will explain how to pass or send multiple parameters using JQuery or JSON in asp.net.

If we want to send or pass multiple parameters using JSON or JQuery in asp.net we need to declare it like as shown below

$.ajax({

type: "POST",

contentType: "application/json;charset=utf-8",

url: "SaveAudiVideo.aspx/SaveData",

data: JSON.stringify({title: 'value1' ,songPath: 'value2' }),

dataType: "json",

success: function(data) {

$('lbltxt').text(data.d);

error: function(result) {

alert("error");

}

});

Here JSON.stringify is used to encode the parameters in JSON format and our webmethod will be like as shown below

C# Code

[WebMethod]

public static string SaveData(string title,string songPath)

{

string str = string.Empty;

return str;

}

VB.NET Code

<WebMethod()> _

Public Shared Function SaveData(ByVal title As String, ByVal songPath As String) As String

Dim str As String = String.Empty

Return str

End Function

how to bind dropdownlist in asp.net using jquery or JSON

Posted by imomins on October 7, 2012 at 4:10 AM

comments (0)

Introduction:

Here I will explain how to bind dropdownlist using JQuery ajax or JSON in asp.net.

Description:

In previous articles I explained Bind gridview using JQuery in asp.net and AutoComplete textbox with JQuery using asp.net. Now I will explain how to bind dropdownlist using JQuery or JSON in asp.net.

To implement this concept first design table in database and give name as Country as shown below

Column Name	Data Type	Allow Nulls
CountryId	int(set identity property=true)	No
CountryName	varchar(50)	Yes

After completion table design enter some of Country details in database to work for our sample and write the following code in your aspx page

<title>Bind Dropdownlist with JQuery in asp.net</title>

$(document).ready(function() {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default.aspx/BindDatatoDropdown",

data: "{}",

dataType: "json",

success: function(data) {

$.each(data.d, function(key, value) {

$("#ddlCountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));

});

error: function(result) {

alert("Error");

}

});

</script>

</head>

<body>

<div>

<asp:DropDownList ID="ddlCountry" runat="server" />

</div>

</form>

</body>

</html>

If you observe above code in header section I added script file link by using that file we have a chance to interact with JQuery. If you want to know about script function mentioned in header section check these posts JQuery AutoComplete textbox with database in asp.net and call asp.net page methods in JQuery.

Now open code behind file and add following namespaces

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Web.Services;

After that write the following code

C#.NET Code

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static CountryDetails[] BindDatatoDropdown()

{

DataTable dt = new DataTable();

List<CountryDetails> details = new List<CountryDetails>();

using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true"))

{

using (SqlCommand cmd = new SqlCommand("SELECT CountryID,CountryName FROM Country", con))

{

con.Open();

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(dt);

foreach (DataRow dtrow in dt.Rows)

{

CountryDetails country = new CountryDetails();

country.CountryId = Convert.ToInt32(dtrow["CountryId"].ToString());

country.CountryName = dtrow["CountryName"].ToString();

details.Add(country);

}

return details.ToArray();

}

public class CountryDetails

{

public int CountryId { get; set; }

public string CountryName { get; set; }

}

VB.NET Code:

Imports System.Collections.Generic

Imports System.Data

Imports System.Data.SqlClient

Imports System.Web.Services

Partial Class _Default

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

End Sub

<WebMethod()> _

Public Shared Function BindDatatoDropdown() As CountryDetails()

Dim dt As New DataTable()

Dim details As New List(Of CountryDetails)()

Using con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")

Using cmd As New SqlCommand("SELECT CountryID,CountryName FROM Country", con)

con.Open()

Dim da As New SqlDataAdapter(cmd)

da.Fill(dt)

For Each dtrow As DataRow In dt.Rows

Dim country As New CountryDetails()

country.CountryId = Convert.ToInt32(dtrow("CountryId").ToString())

country.CountryName = dtrow("CountryName").ToString()

details.Add(country)

End Using

Return details.ToArray()

End Function

Public Class CountryDetails

Public Property CountryId() As Integer

Get

Return m_CountryId

End Get

Set(ByVal value As Integer)

m_CountryId = Value

End Set

End Property

Private m_CountryId As Integer

Public Property CountryName() As String

Get

Return m_CountryName

End Get

Set(ByVal value As String)

m_CountryName = Value

End Set

End Property

Private m_CountryName As String

End Class

Now run your application and check the output that would be like this

Download sample code attached

how to get-find ip address of client machine in asp.net using jquery

Posted by imomins on October 7, 2012 at 3:15 AM

comments (0)

Introduction:

In this article I will explain how to get or find IP address of client machine in asp.net using JQuery.

Description:

In previous posts I explained many articles relating to JQuery. Now I will explain how to get client machine IP address of client machine in asp.net using jquery. To implement this one write the code as shown below

<head>

<title>Get Find IP Address of Client machine using JQuery in asp.net</title>

$(function() {

$("#btnSubmit").click(function() {

$.getJSON("http://jsonip.appspot.com?callback=?",

function(data) {

alert("Your IP Address: " + data.ip);

})

.error(function() { alert("error"); })

});

</script>

</head>

<body>

<asp:button ID="btnSubmit" runat="server" Text="Get IP Address" />

</form>

</body>

</html>

If you observe script in header section here we are calling webservice using JSON calls this service is called as JSONP because we included parameter string “callback=?” in URL.

Demo

Your IP Address:

180.151.55.134

A Quick & Easy Way To Publish Your Blog To Google Plus

Posted by imomins on October 6, 2012 at 4:10 AM

comments (0)

A Quick & Easy Way
To Publish Your Blog To Google Plus

I’m very picky about my social share automation.

However, since the +1 button on the post will not publish to my Page, I often find that I neglect getting blog posts shared over there.

Fortunately, now that Hootsuite can publish to Google+ Pages, it’s easy to set up a little automation to take care of this for now.

It’s simple enough to take advantage of the RSS Feeds tool that is built right into Hootsuite!

Steps To Use Hootsuite To Publish Your Blog’s RSS To Your Google+ Page

1. Open & log in to Hootsuite.com

2. Hover over the left panel and in the pop-out, under Settings, you will find “RSS/Atom” (click it).

3. Near the top of the RSS/Atom settings in Hootsuite, you will see a [+] button. (click it)

4. This opens the “Add RSS/Atom Feed” panel.

5. Fill in the form:

Feed URL: Your site’s feed URL, by default on WordPress that is http:// yourdomain.com/feed

a. Profile To Send To: Select Your Google+ Page. (Here’s how to connect hootsuite to google+)

b. Check Interval: Select the longest one that is appropriate for your site. I occasionally publish several times per day and at odd hours so I have selected hourly for this blog/account. However, many sites are perfect at 24hrs.

c. Send Up To: one post at a time

d. Include Text From Post: Uncheck

e. Prepend Text: (optional) I entered ”New Blog Post: ” (pay attention to use a space at the end if you use this feature)

f. URL Shortener: ow.ly

g. Click “Save Feed” (and you’re done)

It’s as simple as that to get your website’s feed being auto-published to your Google+ Business page!

As noted in the post on connecting Google+ to Hootsuite, Google+ Profile integration does not yet exist.

I hope it doesn’t need to be stated that repeated sharing of blog posts is actually an easy way to identify you as “not present” on a social site and thus as a spammer. Even though the posts lack an app tag, lack of truly engaging commentary mixed in will make you look bad.

As always, caveat emptor….

Are you regularly sharing your blog contents to your Google+ Page and Profile?

Be sure to join us for the livestream Hangout in a few weeks when we get together for a roundtable to discuss Twitter tips!

PSD to XHTML/CSS Conversion

Posted by www.mominbd.somee.com on October 3, 2012 at 6:25 AM

comments (0)

PSD to XHTML/CSS Conversion

Posted on October 3, 2012 by admin

Minimal and Modern Layout: PSD to XHTML/CSS Conversion

In this web design tutorial, you’ll see a process for converting a Photoshop mockup to working HTML/CSS template. This is Part 2 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.

Minimal and Modern Portfolio Layout Tutorial Series

Demo

Click on the image preview below to launch the demo of what we’ll be creating today.

Before you begin

If you haven’t already, you’re highly encouraged to do the Part 1: Design a Minimal and Modern Portfolio Layout in Photoshop of this tutorial series before you go any further. This is because the following will require the Photoshop mockup file from the first part. If you’ve done the first part, get your PSD mockup ready as we’ll be using it here.

If you want to skip the creation of the Photoshop mockup, you should go back to Part 1 and download the source files, as we’ll need it in this tutorial.

Creating the file structure and preparing the files

1 Create a new empty folder on your desktop called portfolio.

2 Inside the empty portfolio folder, create another folder called images that will contain our CSS background images and other image assets.

3 Next, create an empty CSS document called styles.css and an empty HTML file called index.html.

Creating the file structure and preparing the files

4 Open up your index.html file in your favorite source code editor; I’ll be using Adobe Dreamweaver in this tutorial.

5 At the top of your document inside the <head> tags, link to your style sheet (styles.css) so that it’s ready to go. You can use the code below.

Code block 1

<link href="styles.css" rel="stylesheet" type="text/css" />

Creating the file structure and preparing the files

Coding the layout sections

Below, you can see the basic structure of our web template. We’ll start our conversion by creating the basic sections of our minimal and modern web page template.

Coding the layout sections

6 We are going to start with a main container (also commonly referred to as a wrapper), which will hold our document in place, centered on the web browser. Inside the container were going to have five div’s which will make up the sections of our website: the sections are #top, #welcome, #sidebar, #content and #footer.

The HTML code looks like this.

Code block 2

<!--CONTAINER STARTS-->
<div id="container">
  <!--HEADER/NAVIGATION STARTS-->
  <div id="top">

  </div>
  <!--HEADER/NAVIGATION ENDS-->
  <!--WELCOME AREA STARTS-->
  <div id="welcome">

  </div>
  <!--WELCOME AREA ENDS-->
  <!--SIDEBAR STARTS-->
  <div id="sidebar">

  </div>
  <!--SIDEBAR ENDS-->
  <!--CONTENT STARTS-->
  <div id="content">

  </div>
  <!--CONTENT ENDS-->
  <!--FOOTER STARTS-->
  <div id="footer">

  </div>
  <!--FOOTER ENDS-->
</div>
<!--CONTAINER ENDS-->

Slicing the template’s body background

7 Before we start diving into coding each section, let us first add our web page’s background. Open up your PSD file in Photoshop, select the Rectangular Marquee Tool (M) and then make a small selection covering the header/navigation and a bit of the background; the selection can be as little as 1px wide (because we’ll repeat it horizontally using CSS).

Slicing the template's body background

8 At the bottom of the selection, take note of the hexadecimal color code by using Eye Dropper Tool (I).

9 Once you’ve made the selection, go to Edit > Copy Merged, create a new Photoshop document (Ctrl + N), and then paste the selection to a new document. Usually, Photoshop will automatically fill in the width and height dimensions with the item on your clipboard, but in case it doesn’t, make sure that the dimensions of the new Photoshop document matches that of your rectangular marquee selection.

10 Once you’ve copied the selection into the new Photoshop document, go to File Save for Web & Devices (Alt + Shift + Ctrl + S), choose PNG-8 as the file format, and then save it as background.png inside the images folder.

Coding the template’s body background

11 Now that we have our background image sliced out of the Photoshop document, we can begin to code it nto our template. Open up your CSS file (styles.css) in your source code editor, and then use the following code.

Code block 3

* {
 margin: 0px; padding: 0px; border: none;
}
body {
  background-image: url(images/background.png);
  background-repeat: repeat-x;
  background-color: #001b32;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #c8c8c8;
}
#container {
  margin: auto;
  width: 850px;
}

Explanation of Code block 3

Let’s go over the styles in more detail.

First, we reset all of our elements’ margins, paddings, and borders to 0 to avoid cross-browser inconsistencies. We do this with the * selector.

Next, we style the body element; we set background.png as it’s background property and we repeat it horizontally (repeat-x). We also set our background color to a dark blue (#001b32).

Finally, we style the #container margins to auto to center the layout, and set a fixed width of 850px.

Slicing the logo/site name

12 We’ll move on to our web template’s logo/site title. Using the Rectangular Marquee Tool (M), make a selection around the website’s title and slogan (look at the following figure for guidance).

Slicing the template's body background

13 Just like with the background.png, copy the marquee selection into a new document, and save it for the web as a transparent PNG called title.png inside the images folder.

Coding the logo/site name

14 With our logo/site name all ready to go, switch back to your HTML document. Inside the #top div, create a new div with an ID of title.

15 Then, inside the newly created #title div, add an <h1> element with the name of your website; we’ll also create a hyperlink element (<a>) that will link back to the home page of our website. For the template, we’ve simply assigned the href property of the a element a value of #, but if you’ll use this on a live website, you can use a backslash (/) instead to link them back to your home page.

The HTML code looks like this:

Code block 4

<!--HEADER/NAVIGATION STARTS-->
<div id="top">
  <!--WEBSITE TITLE STARTS-->
  <div id="title">
    <h1><a href="#" mce_href="#" mce_href="#" title="Your Website Name">Your Website Name</a></h1>
  </div>
  <!--WEBSITE TITLE ENDS-->
</div>
<!--HEADER/NAVIGATION ENDS-->

16 Now, let’s move over to the stylesheet. To style our #top section elements. Here is the CSS code.

Code block 5

#top {
  float: left;
  width: 850px;
  height: 119px;
}
#title {
  float: left;
  width: 278px;
  height: 74px;
  padding-top: 45px;
}
#title h1 {
  display: block;
  float: left;
  width: 278px;
  height: 74px;
  text-indent: -9999px;
}
#title h1 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(images/title.png);
  background-repeat: no-repeat;
  background-}

Explanation of Code block 5

Let’s look at the above code in more detail.

Firstly we need to float the #top div to the left and give it a fixed width and height.
The width should be 850px, identical to the #container and the height is the same as the light gray area on the web layout mockup.

Coding the logo/site name

Next, we use a technique called CSS background image replacement using the text-indent method. We indent the text inside #title h1 by -9999px to the left, which essentially pushes it out of the browser view port. This is a good technique for screen reader accessibility and search engine optimization.

Coding the Navigation

17 Still inside the #top, create another div with an ID of navigation right after the #title div. Inside the #navigation div, add a simple unordered list containing your navigation links and give it a class of nav-links. Here’s the code block for the #navigation div.

Code block 6

  <!--NAVIGATION STARTS-->
  <div id="navigation">
    <ul>
      <li><a href="#" mce_href="#" mce_href="#" title="home">home</a></li>
      <li><a href="#" mce_href="#" mce_href="#" title="about">about</a></li>
      <li><a href="#" mce_href="#" mce_href="#" title="portfolio">portfolio</a></li>
      <li><a href="#" mce_href="#" mce_href="#" title="contact">contact</a></li>
    </ul>
  </div>
  <!--NAVIGATION ENDS-->

Explanation of Code block 6

Giving the unordered list a class of nav-links allows us to target it with CSS and not have other unordered lists in the web page affected. Note that the last list item has a class of borderx2, which basically means “border times two”; this is because our PSD web layout mockup had separators in between each navigation link and when we add our CSS styles later on, we’ll give the last item a 1px border on the left and the right (hence border x 2).

Slicing the hover indicator

18 Before we add the CSS styles for our navigation, we must first slice our little hover triangle. Head over to your PSD file and make a selection around the triangle using the Rectangular Marquee Tool (M). Copy and paste the little triangle to a new document with a transparent background then save it as nav_hover.png in the images folder.

Slicing the hover indicator

Styling the navigation

19 Now, it’s time to add the CSS code for the navigation of the web template. Head on over to your stylesheet and use the following CSS:

Code block 7

.nav-links li a {
  float: left;
  width: 120px;
  height: 68px;
  text-decoration: none;
  text-transform: capitalize;
  color: #666666;
  font-size: 12px;
  text-align: center;
  padding-top: 51px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #cecece;
}
.nav-links li a:hover {
  color: #00284a;
  background-image: url(images/nav_hover.png);
  background-repeat: no-repeat;
  background-}
li.borderx2 {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #cecece;
}

Explanation of Code block 7

First, to display the list items side by side, we float them to the left. We give them a fixed width and height so that they’re evenly spaced. Then we remove the default underline on hyperlinks by giving it a text-decoration attribute of none (browser default is underline). We give each list item a 1px gray border on its left.

We then style hover states with the :hover psuedo-selector. When hovered on, we give the list item the CSS background of nav_hover.png.

Finally, to deal with the situation that the last list item doesn’t have a 1px gray border on the right, we declare border attributes for the .borderx2 class.

Creating the Welcome Area

The welcome area will be split into two parts, the left side (#welcome-text) and the right side (#welcome-image).

Creating the Welcome Area

20 To start, go back to your HTML document (index.html). Inside the #welcome div we created earlier, create two new divs: give the first one an ID of welcome-text and the second one an ID of welcome-image. We’ll continue to filling in these two new divs after we slice out the things we need for the welcome are.

Slicing the Welcome Images

21 Head over to the PSD file, inside the layers window hide all your layers (click on the eye icons beside each layer to turn off the visibility) apart from the dark blue background which has the radial gradient applied to it.

22 Select the Rectangular Marquee Tool(M) and make a selection around it. The width should be no wider than 850 pixels, so use the Photoshop guides that we set up in the first part – Design a Minimal and Modern Portfolio Layout in Photoshop – of the this tutorial series.

Slicing the Welcome Images

23 Copy and paste the dark blue background to a new document and save it as content_background.png inside the images folder. Using the same method explained above, turn the visibility of the respective layers back on and then slice the welcome image and bullet point (see the figures below for reference).

Slicing the Welcome Images

The HTML for the new sections look like this.

Code block 8

<!--WELCOME AREA STARTS-->
<div id="welcome">
  <!--WELCOME TEXT STARTS-->
  <div id="welcome-text">

  </div>
  <!--WELCOME TEXT ENDS-->
  <!--WELCOME IMAGE STARTS-->
  <div id="welcome-image">
    <img src="images/welcome_image.png" mce_src="images/welcome_image.png" mce_src="images/welcome_image.png" alt="Welcome..." />
  </div>
  <!--WELCOME IMAGE ENDS-->
</div>
<!--WELCOME AREA ENDS-->

24 Inside the #welcome-text div, we add some welcome text like that shown in our Photoshop mockup. Use an <h2> element for the heading of the welcome text, and then add a simple unordered list underneath.

25 Inside the #welcome-image div, add your welcome image (in this case, the Six Revisions screen shot).

All together, the the HTML code should now look like this.

Code block 9

<!--WELCOME AREA STARTS-->
  <div id="welcome">
  <!--WELCOME TEXT STARTS-->
  <div id="welcome-text">
    <h2>welcome to <span>yourwebsite!</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur[...]</p>
    <p>Proin fringilla nunc lorem, in sollicitudin orci. Sed ut eros ligula.</p>
    <ul>
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
    </ul>
  </div>
  <!--WELCOME TEXT ENDS-->
  <!--WELCOME IMAGE STARTS-->
  <div id="welcome-image">
    <img src="images/welcome_image.png" mce_src="images/welcome_image.png" mce_src="images/welcome_image.png" alt="Welcome..." />
  </div>
  <!--WELCOME IMAGE ENDS-->
</div>
<!--WELCOME AREA ENDS-->

Styling the Welcome Area with CSS

26 We can now start to style our elements within the welcome area. Copy and paste the following code into your style sheet and read the explanation of the code block that follows.

Code block 10

#welcome {
  float: left;
  width: 850px;
  background-image: url(images/content_background.png);
  background-repeat: no-repeat;
  height: 326px;
  padding-top: 40px;
}
h2 {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 15px;
}
.heading-color2 { color: #9a9a9a; }
#welcome-text {
  width: 406px;
  line-height: 18px;
  padding-top: 50px;
  float: left;
  text-align: justify;
}
#welcome-text { margin-bottom:10px; }
.list li {
  text-decoration: none;
  background-image: url(images/bullet.png);
  background-repeat: no-repeat;
  list-style-type: none;
  float: left;
  width: 180px;
  padding-left: 20px;
  margin-top: 10px;
  background-}
#welcome-image {
  float: right;
  height: 326px;
  width: 427px;
}

Explanation of Code block 10

Let’s look at the important CSS declarations in more detail. Firstly, we give the #welcome div the radial gradient as a background attribute (content_background.png). The image is added as a background that doesn’t repeat (repeat: no-repeat). We’ve then given the div a set a fixed width and height; the width should span the width of our web template (850px) and the height is as high as the welcome image (236px).

We then have our <h2> elements. We make it all caps by using the text-transform property. We wrap the second ‘yourwebsite’ text inside a span with a class of heading-color2 to give it a different color.

For our unordered list that has a class of list, we give its list items a background image property set to bullet.png and remove the default rounded bullets of list items by declaring a list-style-type property of none.

Finally, so that our #welcome-image div displays on the left of #welcome-text, we float it to the right and give it a fixed width (which is good practice when floating elements). We also give it a width and height equal to welcome_image.png that we sliced out of our PSD file.

Slicing the 3D Separator

27 For the 3D separator, I’ve decided to use an empty div element with a class of separator so that it can be used numerous times very easily. To start creating the 3D separator, head over to your PSD file and make a selection around the 3D separator using the Rectangular Marquee Tool (M); the selection should be no bigger than 850 pixels wide and no higher than the separator itself, but make sure you get it all in.

Slicing the 3D Separator

28 Copy and paste the separator to new document with a transparent background and save the file for the web as separator.png inside the images folder.

Coding the 3D Separator

29 The HTML and CSS for the separator is quite easy. In your HTML document, pleace the following code right after where the {#welcome} div ends. We use a non-breaking space ( ), to put something inside our .separator div.

Code block 11

<!--WELCOME AREA ENDS-->
  <!--SEPARATOR STARTS-->
  <div>&nbsp;</div>
  <!--SEPARATOR ENDS-->

30 Head on over to your CSS file and use the following code.

Code block 12

.separator {
  background-image: url(images/separator.png);
  background-repeat: no-repeat;
  float: left;
  height: 17px;
  width: 850px;
  margin-top: 20px;
  margin-bottom: 20px;
}

Explanation of Code block 12

We give .separator a background-image property equal to the separator.png we obtained from the PSD mockup. We give it a fixed width of 850px, equal to the width of our layout and float it to the left. The height property is set equal to separator.png. We give it some top and bottom margin so that there’s always a 20px gutter on top and at the bottom of the elements that it separates.

Slicing the Sidebar

31 For the sidebar, all we will need is the sidebar box. The sidebar box will have fixed dimensions for this tutorial, but it can be easily expandable later on if you desire (we’ll leave that part up to you). In your PSD file chose the Rectangular Marquee Tool (M) from the Tools Panel and make a selection around the box; my selection is 259 x 259px.

Slicing the Sidebar

32 Copy and paste the sidebar box to new Photoshop document with a transparent background and save the image for the web as contentbox.png inside the images folder.

33 Once you’ve saved your image, head back to the PSD file and make a 1px wide by 2px high rectangular marquee selection around the small separators in between each dummy list text (see the following figure).

Slicing the Sidebar

34 As per usual, copy it into a new Photoshop document and save it for the web with the filename of divider.png inside the images folder. The selection only has to be small for the separators as it will be repeated horizontally using CSS.

Marking up the Sidebar box in HTML

35 Lets look at our HTML for our sidebar box. Head on over to your HTML document and use the following HTML markup right after the .separator div. Notice that we have a third level heading (<h3>) for the sidebar’s heading. Also note that we assign the unordered list a class of sidebar-list so that we can target it easily with CSS and give it its own styles.

Code block 13

<!--SEPARATOR ENDS-->
  <!--SIDEBAR STARTS-->
  <div id="sidebar">
    <h3>lorem ipsum dolor</h3>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
    </ul>
</div>
<!--SIDEBAR ENDS-->

Styling the Sidebar box with CSS

36 Go to your stylesheet and use the following styles (read the code explanation that follows to understand what’s going on).

Code block 14

#sidebar {
  float: left;
  height: 209px;
  width: 219px;
  background-image: url(images/contentbox.png);
  background-repeat: no-repeat;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 20px;
}
h3 {
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 12px;
}
.sidebar-list li {
  list-style-type: none;
  margin-top: 10px;
  padding-bottom: 10px;
  background-image: url(images/divider.png);
  background-repeat: repeat-x;
  background-}

Explanation of Code block 14

We give the #sidebar div a fixed width and height equal to the width and height of contentbox.png. We float it to the left so that it will display to the left of the content section (which we’ll tackle next). Also, we set the background-image property to the contentbox.png.

We transform the text of our h3 elements of our web page to all uppercase letters with the text-transform property and center it using the text-align property.

Finally, remove the default bullets from the .sidebar-list list items by setting the list-style-type property to none, as well as set their background-image to divider.png and repeat it horizontally (repeat-x). We then give them some margins and paddings to give them some space in between each other.

Coding the Content Area

37 The content area is really simple as it only contains a couple of paragraphs and headings. Inside our #content div, just add a second-level heading element (<h2>) and wrap the second part of the text with span.heading-color2 to give it a different color. To fill out the content area, just insert some paragraph elements with lorem ipsum text. The HTML looks like this.

Code block 15

<!--CONTENT STARTS-->
<div id="content">
  <h2>welcome to <span>yourwebsite!</span></h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
</div>
<!--CONTENT ENDS-->

Styling the Content Area with CSS

38 Head on over to your stylesheet and use the following style declaration for the #content div elements.

Code block 16

#content {
  float: right;
  width: 550px;
  text-align: justify;
}
#content p { margin-bottom: 10px; }

Explanation of Code block 16

The #content div is floated to the right and with a fixed width so that it displays on the right of the sidebar box. We don’t give it a fixed height because we want the text inside it to control the height. We give the paragraph (<p>) elements a margin at the bottom to give them some space in between one another (since we’ve reset our margins and paddings earlier on, this needs to be done).

Slicing the Footer

39 We’re coming close to the end, so let’s keep going and finish this bad boy up! Switch to your Photoshop file and make a rectangular marquee selection with dimensions of 850px x 60px around your footer background image (see the following figure as a reference).

Slicing the Footer

Coding the Footer

40 Once again, the footer is really simple to code: we just use the {#footer} div that we already created earlier on in the tutorial. Inside the #footer div, we add our copyright text embedded using a <p> element. The HTML looks like this:

Code block 17

<!--FOOTER STARTS-->
<div id="footer">
  <p>Copyright &copy; Six Revisions - Design By Richard Carpenter</p>
</div>
<!--FOOTER ENDS-->

Styling the Footer with CSS

41 We then style our footer using the following styles (go to your stylesheet and place this code block in there).

Code block 18

#footer {
  float: left;
  width: 850px;
  background-image: url(images/footer.png);
  background-repeat: no-repeat;
  height: 60px;
  margin-top: 40px;
  padding-top: 25px;
  text-align: center;
}

Explanation of Code block 18

We use footer.png as the background-image property value of the #footer div; floated to the left and making sure that the CSS background image doesn’t repeat with the no-repeat property value. The #footer div has a fixed width and height equal to the dimensions of the footer background in our Photoshop file. We give it a top margin to give it a bit of space from the div’s on top of it.

Finito!

We are done! Thank you for reading this tutorial and following along, I look forward to your comments and questions! If everything went well, you should have ended up with something like this:

(click on the image to launch the working demo)

Download

The source files for this tutorial is released under the Creative Commons license; you can use it for commercial and personal use, as long as you leave the copyright information in the source file.

minimal-modern-portfolio-demo.zip (ZIP, 0.29MB)

From PSD to HTML: Building a Set of Website Designs Step by Step

Posted by www.mominbd.somee.com on October 3, 2012 at 6:20 AM

comments (0)

From PSD to HTML: Building a Set of Website Designs Step by Step

Posted on October 3, 2012 by admin

From PSD to HTML: Building a Set of Website Designs Step by Step

Download Source Files

Demos

If you’re like me, you like to see the end before beginning. You can see the final four HTML files by following these links:

Download the Files

Additionally you can download the full HTML/CSS/Image source files here.

What We’re Building

As you may or may not know, I’ve (very slowly) writing a book on WordPress theming. What we’re building is actually the HTML that I’m using in the book to build the main example themes. The final set of themes is called Creatif. You can see the 4 mockups shown in screenshots below (click to get the larger versions).

You can get the full layered PSD files *and* a tutorial on designing them up from our PSDTUTS Plus membership – but it will cost you $19 a month to access. If you don’t wish to join though, don’t worry because you can follow today’s tutorial completely just using the JPG screenshots below.

Part 1 – Building the Framework and First Page

Unlike previous Site Builds this tutorial is covering a decent sized template. So we’re going to take this in stages. First we’ll do the framework, then the first page, then alternate pages, then finally an alternate colour scheme.

Step 1 – Getting Ready

So first of all we boot up our code editor of choice. I actually use Dreamweaver most of the time (and Textmate sometimes). I find it has some pretty decent code tools and a few features that I’m really used to (in particular a powerful Find+Replace and a quick <img> hook up). If you do use Dreamweaver, I recommend setting up a “Site”.

In any case the first things to do are create a directory structure and get ready to build. I usually have an /images/ directory and a /scripts/ directory, and then plonk all my CSS and HTML in the root.

Step 2 – Quick Early Layout

The first thing we’ll do is a quick overall layout in HTML with some barebones CSS just to make sure we’ve got a solid foundation. We can also check it in the major browsers (IE7, IE6, Firefox, Safari) just to make sure we’re on a solid footing. There is nothing worse than coming back all the way to the beginning to fix browser compatibility issues. It’s much better to do it as you go.

So we’re building the first mockup, we can see a few things:

The design is centred. That immediately tells us we have to wrap it in a container and then centre that container.
Essentially the design is a series of horizontal blocks. Sometimes the blocks have two columns, sometimes one. So we can do it as a series of <div>’s. This is good because we can then mix and match elements into different pages as you’ll see later.
We have a footer which is a different colour. This means the background needs to be that colour, in case the users browser stretches. So the footer will need to sit in a different container to the main stuff.

So here’s a HTML layout:

view plain copy to clipboard print ?

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Creatif</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”main”>
<div class=”container”>
<div id=”header”>
Logo / Menu
</div>
<div id=”block_feature”>
Featured Content
</div>
<div id=”block_content”>
Content
</div>
</div>
</div>
<div id=”footer”>
<div class=”container”>
Footer Stuff Goes in Here
</div>
</div>
</body>
</html>

As you can see there are two segments: the #main area and the #footer area. Inside each we have a <div> element which will be fixed width and centred. Then inside the main container we just have a sequence of <div>’s. Now let’s add a little CSS as follows:

view plain copy to clipboard print ?

body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background-color:#c4c0be;
}
#footer {
color:white;
}
.container {
width:950px;
margin:0 auto;
border:1px solid red;
}

So we’re setting the body’s background colour to the dark brown of the footer. Then the #main area has the lighter background. Finally you can see the .container elements have a width of 950px and are centred using margin: auto. I’ve also added a red border just so you can see where the elements are on the page.

You can see the layout here, or view the screenshot below.

Step 3 – Add Some Background Images

So our layout is looking ship shape. With the main elements positioned, it’s just a matter of going through and styling it all up, couldn’t be easier

The first thing we need are some images. You can make these yourself if you have the layered PSD’s, or just grab the download ZIP and you’ll find some I made earlier!

Here’s a screenshot of me saving the first image – a large background JPG. I’m using this large background image to get that radial gradient highlight, then I’ll use a thin 1px slice to fill out the left and right sides so it extends off.

Similarly we’ll create a background image for the footer to tile along as a border between it and the main area (you can find that image in the ZIP file, it’s called background_footer.jpg). Now we’ll update the CSS file to remove that red border and add our new background images, as follows:

view plain copy to clipboard print ?

@charset ”UTF-8″;
/* Background-Styles */
body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
}
#main .container {
background-image:url(images/background_light.jpg);
background-repeat:no-repeat;
min-height:400px;
}
#footer {
background-image:url(images/background_footer.jpg);
background-repeat:repeat-x;
color:white;
padding:40px;
}
.container {
width:950px;
margin:0 auto;
}

Two things to note:

There are multiple ways to set a background. In #main I’ve used a single selector which sets three properties – colour, image, image repeat. But you can also set each property individually as I’ve done in #main .container and #footer.
Notice that because I want to apply the “background_light.jpg” image to the <div class=’container’> which inside #main, but not to the one that is inside #footer, I’ve written #main .container. In other words, apply it only to elements with the class=’container’ that are inside elements with id=’main’.

Step 4 – Testing in Browsers

So far so good. Don’t forget to test in different browsers. Here you can see in IE7 it’s looking fine and dandy!

Step 5 – Making a Transparent Logo

Next I’ve created the logo element. Because later on we’ll be running an alternate colour scheme I’m going to use a transparent background PNG file. You can make these by switching off the background in Photoshop and then going to File > Save for Web and Devices and selecting PNG-24. You should be aware that PNG-24 produces pretty high file sizes. It’s OK for a small image like this, but for larger ones it can be big.

(If anyone knows how to make compressed PNG files, leave a comment, because I’m pretty sure there is a way to do it, I just don’t know how!)

Anyhow you can grab the transparent logo PNG here.

Now we’ll add our logo and also a menu with this HTML:

view plain copy to clipboard print ?

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Creatif</title>
<link href=”step_2.css” rel=”stylesheet” type=”text/css” />
<link rel=”shortcut icon” href=”images/favicon.ico” />
</head>
<body>
<div id=”main”>
<div class=”container”>
<div id=”header”>
<ul id=”menu”>
<li><a href=”">Portfolio</a></li>
<li><a href=”">Services</a></li>
<li><a href=”">About</a></li>
<li><a href=”">Testimonials</a></li>
<li><a href=”">Request a Quote</a></li>
</ul>
<div id=”logo”>
<h1>Creatif</h1>
<small>A Family of Rockstar WordPress Themes</small>
</div>
</div>
<div id=”block_feature”>
Featured Content
</div>
<div id=”block_content”>
Content
</div>
</div>
</div>
<div id=”footer”>
<div class=”container”>
Footer Stuff Goes in Here
</div>
</div>
</body>
</html>

and this extra CSS:

view plain copy to clipboard print ?

#header {
padding-top:20px;
}
#logo h1, #logo small {
margin:0px;
display:block;
text-indent:-9999px;
}
#logo {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:194px;
height:83px;
}
ul#menu {
margin:0px; padding:0px;
rightright:0px;
}
ul#menu li {
display:inline;
}

Some things to note:

Rather than just placing the logo image in the HTML, we’ve created a <div id=”logo”> and inside that placed a <h1> with the title. Then using CSS we’ve made the text vanish and swapped it for the logo image. This has some SEO benefits.
I used to just set the text to display:hidden, but a kind commenter on a previous tutorial pointed out that this is a bad practice and it’s better to use text-indent. So as you can see I *do* read my comments
I’ve placed a very quick, unstyled menu using an unordered list. By setting the display property to inline for the <li> elements, the list changes to a horizontal set of elements … yay!
Finally because our <div> element has Fixing Transparency in IE6
Now the one problem with transparent PNGs is that our friend Internet Explorer 6 doesn’t support them! Fortunately that’s relatively easily fixed thanks to this article I found – The Easiest Way to Fix PNG for IE6. We just download a script and add this line in our CSS:
view plain copy to clipboard print ?
1. /* Fix up IE6 PNG Support */
2. img, #logo { behavior: url(scripts/iepngfix.htc); }
Unfortunately for me though my testing copy of IE6 which because I’m on a Mac is through Darwine – doesn’t recognize the fix … So I have no idea if my hack is working

So anyhow at this point I stopped paying attention to IE6 I’m going to have to get me yet another way to view IE6, maybe through parallels.

In any case, here’s a screenshot of what we get in IE6 when transparency is *not* working…

Step 7 – Fixing up the Menu

Now our menu is still looking pretty ugly, so let’s add a few styles to finish it off, as follows:
view plain copy to clipboard print ?
1. ul#menu {
2. margin:0px; padding:0px;
4. rightright:0px;
5. }
6. ul#menu li {
7. display:inline;
8. margin-left:12px;
9. }
10. ul#menu li a {
11. text-decoration:none;
12. color:#716d6a;
13. font-family:Verdana, Arial, Helvetica, sans-serif;
14. font-size:10px;
15. font-weight:bold;
16. text-transform:uppercase;
17. }
18. ul#menu li a.active, ul#menu li a:hover {
19. color:#211e1e;
20. }
Nothing very exciting here except that we’ve defined an “active” style which is the same as the :hover style (namely it’s a darker shade). That means we can write <a href=”"> and the link will darken. Later in WordPress we’ll make it so that you can tell what page you are on at any given time.

Step 8 – Adding the Featured Portfolio Item Content

Now we have the base of our page laid out, it’s time to start adding the content blocks. As I mentioned earlier we are going to make this site as a series of interchangeable content blocks. The first one is the “Featured Project” block. So let’s add some HTML:
view plain copy to clipboard print ?
1. <div id=”block_featured” class=”block”>
2. <span class=”block_inside”>
3. <div class=”image_block”>
4. <img src=”images/sample_feature.jpg” />
5. </div>
6. <div class=”text_block”>
7. <h2>Eden Website Design</h2>
8. <small>in <a href=”">web design</a> tagged <a href=”">corporate</a>, <a href=”">web2</a></small>
9. <p>And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
10. <br />
11. <a href=”" class=”button”>View Project</a>
12. </div>
13. </span>
14. </div>
So that code goes below the <div id=”header”></div> code from the previous steps. And unstyled it looks like this:

There are two important things to note here:
1. You will see that we have a <div> followed immediately by a <span>. This is because the boxes we are drawing have a double border, first there is a 1px dark grey border, then inside that a 1px white border. So having two elements means we can have a border on each. I don’t know why I used a <span> on the inside, and as you’ll see later on we wind up changing it
2. Where we have the View Project button, instead of using an image, we’re going to create a ‘button’ class and then apply it to regular text links. This makes for a very simple, reusable button look and feel.
Step 9 – Adding some Basic Styles

Now we apply some basic styling like this:
view plain copy to clipboard print ?
1. /*
2. Block-Styles
3. */
4. .block {
5. border:1px solid #a3a09e;
6. background-color:#ffffff;
7. margin-bottom:20px;
8. }
9. .block_inside {
10. display:block;
11. border:1px solid #ffffff;
12. background: #ffffff url(images/background_block_slice.jpg) repeat-x;
13. padding:30px;
14. overflow:auto;
15. }
16. .image_block {
17. border:1px solid #b5b5b5;
18. background-color:#d2d2d2;
19. padding:5px;
20. float:left;
21. }
22. .image_block img {
23. border:1px solid #b5b5b5;
24. }
25. .text_block {
26. float:left;
27. width:430px;
28. margin-left:30px;
29. }
So as I mentioned above we have the .block class which just sets a border and bottom margin. Then immediately inside we have the .block_inside element which has a white border, thin slice background (to give it that faint gradient), some padding and finally an overflow value.

We have overflow:auto because we are going to have two floated elements inside. I used to use a clearing <div> but someone in my previous comments pointed out that this works just as well and is a lot cleaner!

Then inside we have an .image_block class which gives our image a double border (one on the <div> and one on the <img> itself) and which is floated left with our main .text_block also floated left to form a mini columned layout.

So our layout now looks like this:

Step 10 – Adding Text Styles

Now the text styling is all over the place at the moment. It sort of looked OK in the previous screenshot because Firefox which I was using has defaulted to a Sans-Serif font. But if I’d screenshotted IE you would have seen a Serif’d typeface instead. So we should get the text sorted out now. We’ll add these bits of CSS to our stylesheet:
view plain copy to clipboard print ?
1. body {
2. margin:0px; padding:0px;
3. background-color:#131211;
4. font-family:Arial, Helvetica, sans-serif;
5. color:#7f7d78;
6. font-size:13px;
7. line-height:19px;
8. }
9. /*
10. Text-Styles
11. */
12. h2 {
13. margin:0px 0px 10px 0px;
14. font-size:36px;
15. font-family:Helvetica, Arial, Sans-serif;
16. color:#000000;
17. }
18. small {
19. color:#595856;
20. font-weight:bold;
21. font-size:11px;
22. display:block;
23. margin-bottom:15px;
24. }
25. a {
26. color:#007de2;
27. text-decoration:none;
28. }
29. a:hover { text-decoration:underline; }
30. p { margin: 0px 0px 15px 0px; }
31. a.button {
32. background:#32312f url(images/button_bg.jpg) repeat-x;
33. padding:5px 10px 5px 10px;
34. color: #ffffff;
35. text-decoration: none;
36. border:1px solid #32312f;
37. text-transform:uppercase;
38. font-size:9px;
39. line-height:25px;
40. }
41. a.button:hover {
42. background:#007de2 url(images/button_bg_o.jpg) repeat-x;
43. border-color:#007de2;
44. }
So:
1. First I’ve updated the body tag to have a default font, colour, size and line-height.
2. Then we’ve created a <h2> style which fixes the margins and sets the font to Helvetica
3. We’ve also created a <small> style for subheadings (like what category a post is in etc)
4. We’ve created a link style and link:hover style
5. We’ve reset the <p> styling so that the margins are fixed from the stupid defaults
6. Finally we’ve created that button class. Note that I’ve defined it as “a.button”, or in other words all <a> tags with the class = “button”. Why didn’t I just make it “.button” ? Well later on there is a good chance that I will make a second button class for <input>’s and it will be slightly different. So this way they won’t accidentally interact.
7. In the button class you will see we’ve set some padding, a border, a background image, a hover style and a line-height attribute … wait a line-height attribute? Yes unfortunately this is a fix for IE which otherwise cuts off the button.
Withour extra styling, the page is starting to take shape!

Step 11 – Adding the Ribbon

One of the neat things about this design is the little blue ribbon strips in the right corner. Thanks to a mix of CSS, transparent PNG files and absolute positioning, these are really easy to add. So first we need to make the image. Once again we create an image with a transparent background and save it as PNG-24, here’s the image:

Next we need to place the image in our HTML, we can do it like this:
view plain copy to clipboard print ?
1. <div class=”block”>
2. <img src=”images/ribbon_featured.png” class=”ribbon”/>
3. <span class=”block_inside”>
4. <div class=”image_block”>
5. <img src=”images/sample_feature.jpg” />
6. </div>
7. <div class=”text_block”>
8. <h2>Eden Website Design</h2>
9. <small>in <a href=”">web design</a> tagged <a href=”">corporate</a>, <a href=”">web2</a></small>
10. <p>And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
11. <br />
12. <a href=”" class=”button”>View Project</a>
13. </div>
14. </span>
15. </div>
So you can see the <img> tag there on the second line. Note I’ve given it a class=”ribbon” and put it inside the .block element, but outside the .block_inside element. That’s because if we do it inside .block_inside it messes up the overflow:auto property we set earlier. Anyhow right now this will just mess up our layout, so let’s add some styling:
view plain copy to clipboard print ?
1. .block {
2. border:1px solid #a3a09e;
3. background-color:#ffffff;
4. margin-bottom:20px;
6. }
7. .ribbon {
9. top:-3px;
10. rightright:-3px;
11. }
You can see that we’ve:
1. Added a ve set the image to appear 3px past the right edge and 3px past the top edge.
Easy! Back in the day, we would have had to use some super complicated <table> layout to achieve that same effect. Here’s how it’s looking now:

Step 12 – Creating the Second Block

With the ribbon added, our first block element is complete! Now it’s time to start on the next <div> block. This one will have that text about the theme and the recent projects list. So first we add some HTML:
view plain copy to clipboard print ?
1. <div id=”block_portfolio”>
2. <div id=”portfolio_items”>
3. <div class=”mini_portfolio_item”>
4. <div class=”block_inside”>
5. <img src=”images/sample_mini_portfolio.jpg” class=”thumbnail” alt=”PSDTUTS” />
6. <h3>PSDTUTS Theme Design</h3>
7. <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>
8. <a href=”#” class=”button”>View Project</a>
9. </div>
10. </div>
11. <div class=”mini_portfolio_item”>
12. <div class=”block_inside”>
13. <img src=”images/sample_mini_portfolio.jpg” class=”thumbnail” alt=”PSDTUTS” />
14. <h3>PSDTUTS Theme Design</h3>
15. <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>
16. <a href=”#” class=”button”>View Project</a>
17. </div>
18. </div>
19. <div class=”mini_portfolio_item”>
20. <div class=”block_inside”>
21. <img src=”images/sample_mini_portfolio.jpg” class=”thumbnail” alt=”PSDTUTS” />
22. <h3>PSDTUTS Theme Design</h3>
23. <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>
24. <a href=”#” class=”button”>View Project</a>
25. </div>
26. </div>
27. </div>
28. <div id=”text_column”>
29. <h2 id=”text_title”>Creatif is a WordPress portfolio theme for designers and creatives</h2>
30. <p>You can use it to quickly turn WordPress into a portfolio website. Not familiar with WordPress? Fear not, the theme accompanies a book called <a href=”#”>How to Be a Rockstar WordPress Designer</a> by Rockstar Resources due for release in 2008.</p>
31. <p>The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.</p>
32. <p>And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at <a href=”http://psdtuts.com”>PSDTUTS</a> and <a href=”http://nettuts.com”>NETTUTS</a>.</p>
33. </div>
34. </div>
So that looks like lots of code, but it’s not really. Let’s go through it:
1. First we’ve created a container <div id=”block_portfolio”> to wrap up the code segment
2. Next we’ve got a <div id=”portfolio_items”> which contains three identical <div>’s. We’ll talk about these in a second.
3. Next we have a <div id=”text_column”> which is filled with some text and a <h2> heading.
4. What we are going to do is float the text column and portfolio items side by side to form two columns of content.
5. We’re going to replace that <h2> with a background image.
6. And we’ll style up those mini_portfolio_item divs to look nice using a similar double border effect as we did earlier.
Here’s the CSS:
view plain copy to clipboard print ?
1. /*
2. Portfolio-Home-Styles
3. */
4. #block_portfolio {
5. overflow:auto;
6. margin-bottom:20px;
7. }
8. #portfolio_items {
9. width:615px;
10. margin-right:25px;
11. float:left;
12. }
13. #text_column {
14. float:rightright;
15. width:310px;
16. }
17. #text_column h2#text_title {
18. text-indent:-9999px;
19. background-image:url(images/creatif.jpg);
20. background-repeat:no-repeat;
21. width:310px;
22. height:129px;
23. }
24. .mini_portfolio_item {
25. border:1px solid #a3a09e;
26. margin-bottom:10px;
27. }
28. .mini_portfolio_item .block_inside {
29. background:none; background-color:#e2dddc;
30. padding:25px 30px 15px 30px;
31. }
32. .mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }
OK again, looks like a lot, but it’s not too bad. Let’s go through it step by step:
1. First we’ve again used overflow:auto on the main #block_portfolio element. That’s because we again have two floated columns and if we don’t do this, they’ll run over the footer.
2. Next we’ve set #portfolio_items to float to the left, have a margin to separate it from the text column and a width of 615px.
3. The #text_column is set to float to the right with a width of 310px.
4. Inside the text column we’ve again done that trickery with our <h2> tag where we use a massive text-indent to make the text disappear and then instead use a background image.
Next we have three style definitions for the mini_portfolio_item elements as follows:
1. First we set a 1px dark border and a margin between them
2. Next we redefine the .block_inside styles to suit these elements. Remember .block_inside was defined earlier when we did the Featured Project area. So here we are overriding the background image, changing the background colour and changing the padding.
3. Finally we make the thumbnail images float left and have a border.
So all in all it’s looking like this:

Step 13 – Adding a Ribbon.

Now we want to add a “Recent Projects” ribbon to the top most item. To do this we simply slot it in, in the same position in the HTML as previously, like this:
view plain copy to clipboard print ?
1. <div class=”mini_portfolio_item”>
2. <img src=”images/ribbon_recent.png” class=”ribbon” alt=”Recent Projects”/>
3. <div class=”block_inside”>
4. <img src=”images/sample_mini_portfolio3.jpg” class=”thumbnail” alt=”AudioJungle” />
5. <h3>AudioJungle Site Design</h3>
6. <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>
7. <a href=”#” class=”button”>View Project</a>
8. </div>
9. </div>
Then we add a "http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/#">view plaincopy to clipboard print ?

.mini_portfolio_item {
border:1px solid #a3a09e;
margin-bottom:10px;
}

But something weird happens… While the right hand side looks correct, the top is getting cut off, as you can see in the screenshot:

The reason is that the element that our mini_portfolio_item is sitting inside is cutting it off. So we check up and see that the mini_portfolio_item’s are all inside a <div id=”portfolio_items”>. So the solution is pretty easy, we add 3px of padding to the top which is just enough space for our ribbon to show through. Here’s the adjusted CSS:

#portfolio_items {
width:615px;
margin-right:25px;
float:left;
padding-top:3px;
}

Step 14 – Finishing off the Portfolio Items

Finally I’ve swapped in a few images and titles so we can see how the page looks with 3 different items instead of the same one repeated. Then I also decided to get rid of the View Project button and just have a text link. This looked a bit cleaner and less busy. So here’s the final portfolio items section (shown in Safari, don’t forget to keep testing in different browsers!):

Step 15 – Adding Footer Content

Now there is just one more section to our page: the footer! Let’s add some text content to it:

view plain copy to clipboard print ?

<div id=”footer”>
<div class=”container”>
<div class=”footer_column long”>
<h3>Designed by Collis Ta’eed, do with this as you please</h3>
<p>You can read a photoshop tutorial for creating the design at <a href=”http://psdtuts.com”>PSDTUTS</a>, You can read a PS->HTML tutorial for creating the site at <a href=”http://nettuts.com”>NETTUTS</a> and you can learn how to turn the HTML into a WordPress theme in the upcoming book <a href=”http://freelanceswitch.com/book”>How to be a Rockstar WordPress Designer</a></p>
</div>
<div class=”footer_column”>
<h3>More Links</h3>
<ul>
<li><a href=”http://vectortuts.com”>VECTORTUTS</a></li>
<li><a href=”http://activeden.net”>FlashDen</a></li>
<li><a href=”http://audiojungle.net”>AudioJungle</a></li>
<li><a href=”http:/

Total Vedio Converter

Posted by imomins on September 30, 2012 at 3:30 AM

comments (0)

Convert all kinds of videos to mobile videos or audios (mp4, 3gp, xvid, divx mpeg4, avi, amr audio) which are used by cellphone, PDA, PSP, iPod.

High compatibility and high efficiency for Importing RMVB or RM video/audio.

Convert various videos to MPEG videos compatible with standard DVD/SVCD/VCD.

Rip DVD to popular videos of all sorts.

Convert various videos to SWF, FLV Macromedia video.

Extract audio from various of videos and convert which to all kinds of audios (mp3,ac3, ogg, wav, aac).

RIP CD to audios of all sorts directly.

Output Video Format:

MPEG4(.mp4)
3gp(.3gp, 3g2)
Game Psp(.psp)
MPEG1(.mpg, mpeg)
NTSC, PAL DVD mpeg
NTSC, PAL SVCD mp
NTSC, PAL VCD mpeg
Ms Mpeg4 AVI(.avi)
Divx AVI(.avi)
Xvid AVI(.avi)
H264 AVI(.avi)
Mjpeg AVI(.avi)
HuffYUV AVI(.avi)
Swf Video(.swf)
Flv Video (.flv)
Gif Animation(.gif)
Mpeg4 Mov(.mov)
Apple Quicktime(.mov
FLIC format(.fli, .flc)
Gif Animation(.gif)
DV (.dv)

Output audio format:

MPEG audio (.mp3 & .mp2)
Ms WAV(.wav)
Ms WMA(.wma)
OGG(.ogg)
Amr audio(.amr)
Amr audio(.awb)
Mpeg4 audio(.m4a)

Note:
This is not supported file some Flash Video file (.flv) and Matroska Video File (.mkv) Formats.
Serial Key Of Total Video Converter 3.10:

0ab52023-ba00347e-9fa86acd-fdc330a9-68578b7e-264b81e1-30bdfeef-cea403fa-20457e4a-39c03409-f69a9aba-388e8a94-677044c7-643fe9ac-66523c91-18a61801

Download Link: http://www.mediafire.com/?d6xxpw9rdp3bjv0

Some More Software with Serial Key

Visit 'LiveWorld24.tk' for Live world..............

www.LiveWorld24.tk

Blog Post New Entry

Steps To Use Hootsuite To Publish Your Blog’s RSS To Your Google+ Page

PSD to XHTML/CSS Conversion

Minimal and Modern Portfolio Layout Tutorial Series

Demo

Before you begin

Creating the file structure and preparing the files

Code block 1

Coding the layout sections

Code block 2

Slicing the template’s body background

Coding the template’s body background

Code block 3

Explanation of Code block 3

Slicing the logo/site name

Coding the logo/site name

Code block 4

Code block 5

Explanation of Code block 5

Coding the Navigation

Code block 6

Explanation of Code block 6

Slicing the hover indicator

Styling the navigation

Code block 7

Explanation of Code block 7

Creating the Welcome Area

Slicing the Welcome Images

Code block 8

Code block 9

Styling the Welcome Area with CSS

Code block 10

Explanation of Code block 10

Slicing the 3D Separator

Coding the 3D Separator

Code block 11

Code block 12

Explanation of Code block 12

Slicing the Sidebar

Marking up the Sidebar box in HTML

Code block 13

Styling the Sidebar box with CSS

Code block 14

Explanation of Code block 14

Coding the Content Area

Code block 15

Styling the Content Area with CSS

Code block 16

Explanation of Code block 16

Slicing the Footer

Coding the Footer

Code block 17

Styling the Footer with CSS

Code block 18

Explanation of Code block 18

Finito!

Download

From PSD to HTML: Building a Set of Website Designs Step by Step

From PSD to HTML: Building a Set of Website Designs Step by Step

Demos

Download the Files

What We’re Building

Part 1 – Building the Framework and First Page

Step 1 – Getting Ready

Step 2 – Quick Early Layout

Step 3 – Add Some Background Images

Step 4 – Testing in Browsers

Step 5 – Making a Transparent Logo

Step 7 – Fixing up the Menu

Step 8 – Adding the Featured Portfolio Item Content

Step 9 – Adding some Basic Styles

Step 10 – Adding Text Styles

Step 11 – Adding the Ribbon

Step 12 – Creating the Second Block

Step 13 – Adding a Ribbon.

Step 14 – Finishing off the Portfolio Items

Step 15 – Adding Footer Content

Categories