تبلیغات
banner
banner
banner
تبلیغات
banner

فیلم های آموزشی : 36 +

تعداد کاربران : 44 +

تعداد کل مطالب : 338 +

تعداد نظرات : 33 +

حضرت علی (ع): هر چیزی زکات دارد ، و زکات علم نشر آن است!

قسمت دوم طراحی سایت خبری با ASP


امروز با قسمت دوم از سری آموزشهای طراحی سایت خبری با asp در خدمت شما هستیم!

بریم شروع کنیم

ایجاد صفحه اول سایت:
برای ایجاد صفحه اول سایت همانند قبل عمل کرده با این تفاوت که در پنجره باز شده ی item new add گزینه webform
page master using را انتخاب می کنیم تا از قالب page master ما پیروی کند و نام آن را برابر Default قرار میدهیم صفحه اول
سایت را معموال یا Default و یا Index نام گذاری می کنند.بعد از ok کردن در پنجره باز شده مسترپیج ایجاد شده را انتخاب می کنیم و
OK می کنیم

 

ایجاد stylesheet.css 
برای ایجاد stylesheet برای Masterpage همانند قبل عمل کرده با این تفاوت که در پنجره باز شده ی item new add
گزینه atylesheet را انتخاب می کنیم و نام آن را برابر css.style قرار میدهیم.

برای ارتباط استایلمون به مستر باید بر روی master.site در پنجره Explorer solution دابل کلیک کرده تا در حالت کد نویسی
باز شود. برای برقراری ار تباط باید کد زیر در head استفاده کنیم.

 

 

href آدرس و نام فایل استایل را مشخص میکند و چون فایل استایلمون در همان پوشه مسترپیج است نیاز به نوشتن آدرس نیست.
Rel نوع فایلی است که به مستر لینک دادیم است.
Type : نوع فایل استایل است که در اینجا css/text است.

اضافه کردن فایل عکس های طراحی قالب سایت به پروژه:
برای این کار بر روی نام سایت در پنجره Explorer Solution کلیک راست کرده و بعدیک folder بنام Image در مسیر سایت
ایجاد میکنیم و بعد عکسهایی را که برای سایت با نرم افزار photoshop ایجاد کردم به این پوشه ها کپی می کنم.
کد نویسی بخش page Master و css.Style :
برای استایل دادن به بخش body مسترپیج باید در بخش کد نویسی کد css.style کدهای زیر را نوشت.

 

 

حال نوبت به کد نویسی بخش header سایت می شود که برای این کار کد بخش سر صفحه را در بخش کد نویسی مسترپیج بعد از تگ form و در داخل Div آن به گونه زیر نوشته شده است.

 

 

حال نوبت میرسه به استایل دادن بخش سر صفحه مسترپیج است که کد آن در بخش کدنویسی css.styleبه گونه زیر نوشته شده
است.

 

حال به کدنویسی بخش منو سایت میرسیم.که منو را در زیر header قرار می دهیم.

 

 

برای این منظور از یک تگ لیست استفاده می کنیم ul تگ مربوط به ایجاد لیست است و li برای ایجاد عناصر لیست است و از تگ
a برا برقراری ارتباط با صفحات مورد نظر استفاده شده است
حال نوبت به نوشتن استایل آن میرسد.

استایلهای مربوط به container : عملکرد دستوراتش همانند استایل های قبلی است با این تفاوت که مقادیر آن ها متفاوت است.

 

 

در پایان container سایت دارای یک بخش به نام footer می باشد که معرف حقوق کپی رایت و طراحی سایت برای
شخص طراح سایت می باشد

استایل بخش footer به شرح زیر است:عملکرد کدها همانند قبل است فقط مقدار آنها متفاوت می باشد.

 

با قسمت بعدی با ما همراه باشید.


درباره نویسنده
سجاد اسدی
   سجاد اسدی

سجاد اسدی هستم دانشجوی رشته نرم افزار و علاقه مند به تدریس و یادگیری دروس مرتبط با تکنولوژی نرم افزار و اینترنت اشیاء جهت ارتباط با بنده مراجعه شود به آیدی سروش و تلگرام : @ordervira و پیج بنده در اینستاگرام instagram.com/sajjadred11 ""اللهم صل علی محمد و آل محمد"" برای شروع هیچ وقت دیر نیست. "الهم عجل لولیک الفرج"

دیدگاه بگذارید

avatar
  اشتراک  
اطلاع رسانی

aparat کانال آپارات

soroush کانال سروش

کانال آی گپ