اکثر قریب به اتفاق وب سایتها دارای یک قالب مشخص می باشند. بطوریکه اگر در آن وب سایت به گشت و گذار بپردازیم و صفحات مختلف آن را مرور کنیم متوجه می شویم که همه صفحات از یک قالب خاص پیروی می کنند. بعنوان مثال لوگوی مربوط به معرفی وب سایت در همه صفحات وجود دارد. یا اینکه قسمتهای سمت راست یا سمت چپ که معمولا” منویی از لینکها می باشند در تمام صفحات شکل ظاهری خود را حفظ می کنند. برنامه نویسان ASP.NET می دانند که با معرفی User Control ها چه کمک شایانی به آنها جهت ایجاد قالب های ثابت و یا قابل تغییر برای یک وب سایت شد (البته کاربرد User Control ها تنها در ایجاد قالبها نیست). به کمک User Control ها می توانیم تا با یکبار ایجاد یک قالب و برنامه نویسی های مربوطه، آن را در هرصفحه aspx که خواسته باشیم استفاده کنیم.
اکنون با عرضه ASP.NET 2 (نسخه بتا) و معرفی Master Page تهیه قالب برای یک وب سایت از آنچه که فکرش را هم می کردیم ساده تر شده است. در این مقاله قصد داریم تا شما را با نحوه ایجاد و استفاده از Master Page تحت ASP.NET 2 و در محیط Web Developer 2005 Express Edition آشنا کنیم. برای همقدم شدن در ایجاد و اجرای مثالی که در این مقاله ایجاد می شود به موارد زیر نیاز است.
- Web Developer 2005 Express Edition
- The .NET Framework 2 beta
- چند تصویر برای استفاده در لوگو و قسمتهای دیگر
ایجاد یک وب سایت:
برای ایجاد یک وب سایت با استفاده از Web Developer و بر پایه ASP.NET 2 مراحل زیر را دنبال کنید.
١- در Web Dev از منوی فایل گزینه New Web Site را انتخاب کنید که با اینکار صفحه New Web Site ظاهر می شود.
٢- در زیر گزینه Project Types زبان برنامه نویسی مورد نظرتان را انتخاب کنید ( در این مثال زبان#C انتخاب می شود). زبانی که در اینجا انتخاب می شود بعنوان زبان پیش فرض در کل پروژه در نظر گرفته می شود ولی این امکان برای شما مهیاست که برای هر صفحه از این پروژه یک زبان جداگانه را انتخاب کنید.
٣- در زیر عنوان Visual Studio installed templates گزینه ASP.NET Web Site را انتخاب کنید.
۴- در قسمت Location نام مسیری را که می خواهید صفحات را در آنجا نگه دارید وارد کنید. مثلا” C:\WebSite\WebSite1
اکنون Web Dev یک صفحه پیش فرض بنام Default.aspx برای شما ایجاد می کند. این صفحه را ببندید و به سراغ ایجاد یک Master Page بروید.
ایجاد یک Master Page
Master Page یک قالب برای صفحات شماست که در واقع قالب بندی و ظاهر صفحات شما را مشخص می کند. در این قسمت شما ابتدا یک Master Page ایجاد می کنید. سپس با استفاده از یک table، آن را طوری تقسیم بندی می کنیم که بتوان در قسمت بالایی آن لوگوی سایت، در قسمت چپ منو و در پایین صفحه footer را قرار داد. شما همچنین با کنترل Content Placeholder آشنا خواهید شد که به کمک آن می توانید محتوای صفحات مختلف را در Master Page داشته باشید.
برای ایجاد یک Master Page :
١- در Solution Explorer بر روی نام وب سایتی که ایجاد کرده اید راست کلیک کرده و گزینه Add New Item را انتخاب کنید.
٢- در زیر قسمت Visual Studio Installed Templates گزینه Master Page را انتخاب کنید و نام آن را Master1 بگذارید.
٣- گزینه Place code in separate file را انتخاب کنید چرا که می خواهیم کد نویسی در Code behind انجام شود.
۴- زبان مورد نظر خود را در قسمت Language انتخاب کنید.
حال Master Page جدید در قسمت Source View ظاهر می شود. همانطور که مشاهده می کنید در قسمت بالای صفحه تعریف بجای وجود دارد. همچنین در قسمت body، کنترل asp.contentplaceholder وجود دارد که محلی در Master Page می باشد که در runtime محتویات صفحات مختلف در آن جایگزین می شود. در مورد این کنترل در ادامه همین مقاله بیشتر می خوانید.
شکل دادن به Master Page
Master Page مشخص می کند که صفحات aspx چگونه در وب سایت شما به نظر آیند. Master Page می تواند شامل هر ترکیبی از متن های استاتیک و وب کنترلها باشد. همچنین Master Page ها می توانند شامل چندین کنترل ContentPlaceholder باشند. که مشخص کننده محل قرارگرفتن داده های دینامیک در هنگام نمایش صفحه می باشد.
در این مقاله شما از یک table برای نسبت دادن مکانهایی خاص به المانهای موجود در Master Page استفاده خواهید کرد. سپس کنترل ContentPlaceHolder را که از قبل در Master Page موجود بوده است را در خانه ای از table جای گذاری خواهیم کرد.
برای اضافه کردن table و تغییرات مربوطه در Master Page بصورت زیر عمل کنید.
١- به قسمت Design View در صفحه Master Page بروید.
٢- با استفاده از پنجره مشخصات، رنگ پس زمینه Master Page یعنی گزینه BgColor را به دلخواه تغییر دهید.
٣- از منوی Layout گزینه Insert Table را انتخاب کنید.
۴- در صفحه Insert Table بر روی Tamplate کلیک کنید. از لیست موجود گزینه Header, footer and side را انتخاب کنید.
۵- پس از اضافه شدن table ، مطابق زیر اندازه خانه های آن را تغییر دهید. عرض ستون سمت چپ برابر ۸۰، ارتفاع ردیف بالایی برابر ۸۰، و ارتفاع ردیف پایینی برابر ۸۰
۶- رنگ پس زمینه هر سلول از table را به دلخواه تغییر دهید و VAlign مربوط به هر سلول را در حالت top قرار دهید.
برای اضافه کردن محتویات استاتیک به Master Page مطابق زیر عمل کنید.
١- سلول سمت راست پایین را انتخاب کرده و عبارتی نظیر “Copyright … “ را در آن بنویسید.
٢- از گروه Navigation موجود در toolbox یک کنترل Menu به سلول بالایی table اضافه کنید (مشاهده می کنید که در ASP.NET 2 برای ایجاد منو دیگر نیاز به کد نویسی ندارید. کنترل Menu تقریبا” همه امکانات منوهایی که مد نظر دارید را در اختیار شما می گذارد). حال مشخصه Orientation از کنترل Menu را Horizontal انتخاب کنید. از منوی Common Menu Task که در کنار کنترل Menu ظاهر می شود، گزینه Edit Menu Items را انتخاب کنید.
٣- در زیر عنوان Items، آیکون مربوط به اضافه کردن آیتم به منو را دوبار کلیک کنید تا دو آیتم به منو اضافه شوند. اولین آیتم را انتخاب کرده و Text آن را Home و NavigationUrl آن را به Home.aspx انتخاب کنید. برای آیتم دوم Text را About و NavigationUrl را About.aspx انتخاب کنید.
۴- یک تصویر را بعنوان لوگو در سلول بالایی table قرار دهید.
برای اضافه کردن ContentPlaceHolder طریقه زیر را بکار گیرید:
١- کنترل ContentPlaceHolder موجود رابه سلول سمت راست از ردیف وسط table انتقال دهید.
٢- حاصل کار تا اینجا را ذخیره کنید.
ایجاد محتوا برای یک Maste Page
شما با ایجاد یک صفحه ASP.NET که ضمیمه Master Page می شود. می توانید محتوای یک Master Page را تعیین کنید. در این مقاله شما دو صفحه aspx که هر دو بعنوان محتوای Master Page تعیین می شوند را به پروژه اضافه خواهید کرد. این دو صفحه با توجه به آیتم هایی که به منو اضافه کرده ایم قطعا” دو صفحه home و about خواهند بود.
برای اضافه کردن صفحه home.aspx چنین عمل کنید:
١- بر روی نام وب سایت در قسمت Solution Explorer راست کلیک کرده و Add New Item را انتخاب کنید.
٢- در زیر عنوان Visual Studio Installed Templates بر روی Web Form کلیک کنید.
٣- عنوان صفحه را به Home تغییر دهید.
۴- زبان مورد نظر خود را در قسمت Language انتخاب کنید.
۵- Select Master Page را انتخاب کرده و بر روی Add کلیک کنید تا صفحه Select a Master Page ظاهر شود.
۶- حال Master1.master را انتخاب کرده و بر روی ok کلیک کنید.
صفحه home همانند شکل زیر به پروژه اضافه خواهد شد.
همانطور که مشاهد می کنید قسمتهای استاتیک که در Master Page آن را طراحی کردیم، در اینجا بصورت مات دیده می شود. این بدین معناست که شما در این صفحه نمی توانید آنها را تغییر دهید.
حال به دلخواه خود المانها و کنترلهای مختلفی را به صفحه home.aspx اضافه کنید. برای این منظور بر روی نوار عنوان کنترل ContentPlaceHolder راست کلیک کرده و گزینه CreateCustomContent را انتخاب کنید. حال در کنترل ContentPlaceHolder یک جمله مانند “Welcome to my website” تایپ کرده و حاصل کار را ذخیره کنید.
صفحه about.aspx را نیز بمانند صفحه home به وب سایت اضافه کنید.
حال می توانیدحاصل کار خود را با فشار دادن دکمه های Ctrl+F5 مشاهده کنید.
ASP.NET محتوای صفحات home و about را با Master Page ترکیب کرده و به نمایش در می آورد. همان طور که مشاهده می کنید در ASP.NET 2 پروژه ها بر روی شماره پورتهای تصادفی در Localhost اجرا می شوند.
مرجع: MSDN
دیدگاه خود را بیان کنید.
باید وارد سایت شده باشید برای دیدگاه دادن