Insert webpart zone in tabs in webpart page using sharepoint designer 2010

Question

Hi All,
I am facing a problem , its looks very easy but i couldn't found any clue about this.
i have created a webpart page, after this i have enable to view quick launch in this webpart page. then i have create a some tabs with reference to this site
https://jqueryui.com/tabs/. but the problem is when i go to view my page in browser it take same height which is same as quick launch height. and in my diff scenario i have created tab using content editor web part then its working fine. but
i need to create web part zone in these tabs that why i m not able to do this using content editor. so i am using designer only.
i guess i am writing content in wrong content place holder or etc. please help me ...i have already lost my 2 days for this.
FYI, please find the code which i used in webpart page using share point desinger.
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
<SharePoint:ListItemProperty Property="BaseName" maxlength="40" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
<WebPartPages:WebPartZone runat="server" title="loc:TitleBar" id="TitleBar" AllowLayoutChange="false" AllowPersonalization="false"><ZoneTemplate>
<WebPartPages:TitleBarWebPart runat="server" AllowEdit="True" AllowConnect="True" ConnectionID="00000000-0000-0000-0000-000000000000" Title="Web Part Page Title Bar" IsIncluded="True" Dir="Default"
IsVisible="True" AllowMinimize="False" ExportControlledProperties="True" ZoneID="TitleBar" ID="g_14e08bcc_e32c_4759_80dc_34e124e6212f" HeaderTitle="abc1" AllowClose="False" FrameState="Normal"
ExportMode="All" AllowRemove="False" AllowHide="True" SuppressWebPartChrome="False" DetailLink="" ChromeType="None" HelpLink="" MissingAssembly="Cannot import this Web Part." PartImageSmall=""
HelpMode="Modeless" FrameType="None" AllowZoneChange="True" PartOrder="2" Description="" PartImageLarge="" IsIncludedFilter="" __MarkupType="vsattributemarkup" __WebPartId="{14E08BCC-E32C-4759-80DC-34E124E6212F}"
WebPart="true" Height="" Width=""></WebPartPages:TitleBarWebPart>
</ZoneTemplate></WebPartPages:WebPartZone>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
<style type="text/css">
Div.ms-titleareaframe {
height: 100%;
.ms-pagetitleareaframe table {
background: none;
  </style>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<meta name="GENERATOR" content="Microsoft SharePoint" />
<meta name="ProgId" content="SharePoint.WebPartPage.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="CollaborationServer" content="SharePoint Team Web Site" />
<script type="text/javascript">
// <![CDATA[
var navBarHelpOverrideKey = "WSSEndUser";
// ]]>
</script>
<%--<SharePoint:UIVersionedContent ID="WebPartPageHideQLStyles" UIVersion="4" runat="server">
<ContentTemplate>
<style type="text/css">
body #s4-leftpanel {
display:none;
.s4-ca {
margin-
</style>
</ContentTemplate>
</SharePoint:UIVersionedContent>--%></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderSearchArea" runat="server">
<SharePoint:DelegateControl runat="server"
ControlId="SmallSearchInputBox"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftActions" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">
<SharePoint:ProjectProperty Property="Description" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderBodyRightMargin" runat="server">
<div height="100%" class="ms-pagemargin"><img src="/_layouts/images/blank.gif" width="10" height="1" alt="" /></div>
</asp:Content>
<%--<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server"></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderNavSpacer" runat="server"></asp:Content>--%>
<%--<asp:Content ContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"></asp:Content>--%>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<html lang="en">
<head>
<meta name="WebPartPageExpansion" content="full" />
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css"><script>
  $(function() {
    $( "#tabs" ).tabs();
  </script></head><body><div id="tabs">
  <ul>
    <li><a href="#tabs-1">Bangalore 1</a></li>
    <li><a href="#tabs-2">Bangalore 2</a></li>
    <li><a href="#tabs-3">Bangalore</a></li>
    <li><a href="#tabs-4">Chennai 4</a></li>
      </ul>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td><div id="tabs-1"> <%--id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" width="100%"> --%><WebPartPages:WebPartZone id="g_6958510ECBD74ABD8AA9F8E26B747B27"
runat="server" title="Zone 13"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone><WebPartPages:WebPartZone id="g_FA3DDD09582A4C589559877B7169340D" runat="server" title="Zone 14"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone></div></td>
</tr>
<tr><td><div id="tabs-2">
<WebPartPages:WebPartZone id="g_73928F4B9F484EE392EBCBA7D5ACF9FE" runat="server" title="Zone 1"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
<WebPartPages:WebPartZone id="g_77B2328C81874FFB8034559174B450BF" runat="server" title="Zone 12"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div></td></tr>
Please help..if u need any other detail i ll provide you.. plz check the image after doing this the tabs take full range as quick launch.
Thanks
Vivek Singh Tomar

Answer 1

You do not need to work on visual studio, you can create page layout form web and sharepoint designer. Page layouts are only available on publishing sites, you can modify page layout using sharepoint designer, add your required html and web part zones.
Check below few links for reference:
http://msdn.microsoft.com/en-us/library/gg430141(v=office.14).aspx#bk_custompagelayout
http://www.mssharepointtips.com/tip.asp?id=1125
http://blogs.technet.com/b/tothesharepoint/archive/2013/04/10/stage-7-upload-page-layouts-and-create-new-pages-in-a-publishing-site.aspx
http://msdn.microsoft.com/en-us/library/gg430141(v=office.14).aspx#bk_custompagelayout
Page layouts creation and editing is almost same in MOSS 2007, SharePoint 2010 and SharePoint 2013. If you are creating page layout using web then you can easily modify it using SharePoint designer.
Adnan Amin MCT, SharePoint Architect | If you find this post useful kindly please mark it as an answer :)