برنامه نویسی Web GIS؛ آموزش HTML
برنامه نویسی Web GIS؛ آموزش HTML

برنامه نویسی Web GIS را با ایجاد یک وب سایت زیبا، شروع کنید.

آموزش CSS برای برنامه نویس Web GIS

در نوشته پیشین، اهمیت استفاده از HTML برای طراحی Web GIS را به شما آموزش دادیم و توضیح دادیم که اولین گام در برنامه نویسی وب جی آی اس، طراحی و تولید یک Web Site می باشد. گفتیم برای تولید یک وب سایت، می بایست از تکنولوژی های HTML, CSS و JavaScript، استفاده کنیم. در جلسه پیشین، ما شما را با HTML، آشنا کردیم و فیلم آموزش HTML را نیز در اختیار شما قرار دادیم. این فیلم، جلسه دوم از دوره آموزش برنامه نویسی Web GIS می باشد که توسط سایت GISPlus، اجرا شده است. اگر هنوز این فیلم رایگان را دانلود نکرده اید، به شما پیشنهاد می کنیم آنرا دانلود کرده و مشاهده نمایید.

می خواهم فیلم رایگان آموزش HTML را دانلود کنم

همچنین اگر با مبانی و مفاهیم Web GIS، آشنا نیستید، پیشنهاد می کنیم که فیلم مبانی و مفاهیم Web GIS را به رایگان دانلود کرده و مشاهده نمایید.

در این نوشته، شما را با CSS آشنا می­کنیم و به شما یاد می دهیم که چگونه صفحه HTMLی را که طراحی کرده اید، سیما و ظاهر زیبا و جذاب برای آن، بسازید. ما در انتهای این آموزش، به شما آموزش می دهیم تا یک Web Site، همانند آنچه در تصاویر زیر مشاهده می کنید، برای سامانه Web GIS ایجاد نمایید.

در طراحی Web GIS، داشتن یک وب سایت زیبا و کاربرپسند، همواره از مزایای Web GIS می باشد. لذا فراگیری آموزش های HTML، CSS و JavaScript می تواند به شما کمک بسیاری در طراحی یک سایت Web GIS زیبا بنمایند.

CSS چیست؟

واژه CSS، مخفف واژگان  Cascading Style Sheet به معنی الگوهای آبشاری، است. CSS، یک زبان نشانه گذاری است که نحوه نمایش یک صفحه HTML را توضیح می دهد. علت اختصاص صفت  Cascading به معنی آبشاری، این است که قوانین این زبان به صورت آبشاری و از بالا به پایین اعمال می شوند. CSS، در کنارHTML ، هسته فناوری ساخت صفحه‌های وب می باشد.

CSS، روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها)، برای صفحه‌های وب است. الگوهای آبشاری، از جنس زبان‌های نشانه‌گذاری، با ساختار متن ساده هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود.

در آموزش HTML برای برنامه نویسی وب جی آی اس، گفتیم به زبان ساده، یک Web Site را می توان به یک ساختمان تشبیه کرد. برای ایجاد یک ساختمان، ابتدا می بایست اسکلت فلزی یا بتنی آن را ایجاد نمایید. HTML، اسکلت یک Web Site را ایجاد می نماید. پس از اینکه مراحل سفت کاری یک ساختمان به اتمام رسید، می بایست برای آن یک نما و ظاهر زیبا ایجاد کرد. پس به زبان ساده می توان گفت، CSS، نمای زبان HTML می باشد و می توان با استفاده از آن، ظاهری زیبا برای صفحات وب، طراحی نمود.

مزایای CSS

با این که در سال‌های نخست پیدایش طراحی Web، طراح‌ها از جدول‌ها و ترفند پنهان سازی آنها برای چیدمان صفحه، کمک می‌گرفتند، روش مدرن طراحی وب، این روند را منسوخ کرده است. چیدمان صفحه Web، اکنون تنها با تگDIV، که برتری‌های فراوانی نسبت به جدول‌ها دارد، انجام می‌شود. هر div، یک موزاییک مجازی برای بخش بندی صفحه Web ‌است که کار چیدمان را آسان‌تر انجام می‌دهد. جدول‌ها به جایگاه نمایش داده‌های ستونی خود بازگشتند و دیگر از آنها برای طراحی چیدمان عناصر صفحه‌های وب، استفاده نمی‌شود. CSSها، علاوه بر سبک تر کردن هر صفحه وب، روش طراحی وب را به میزان فراوانی آسان تر و دسترسی و کارایی وب را بهتر کرده‌اند.
برای مثال، می توانیم یك بار نوع قلم مورد استفاده در یك صفحه را تعیین كنیم و دیگر مجبور نباشیم كد مربوط به تغییر قلم را در صفحه به كار ببریم .به طور کلی می شود گفت: CSS، این امکان را ایجاد می کند تا طراح بتواند چندین مشخصه در طراحی صفحه را یک بار تعیین کند و به دفعات از آن استفاده نماید. همچنین می شود گفت: برای کنترل دقیق مشخصات صفحه Web و استاندارد کردن تگ های HTML و طراحی ساختار کلی صفحه وب (یا همان Layout)، می توانیم CSSرا به کار ببریم.

روش های استفاده ازCSS

یکی از مهم ترین نکته ها برای طراحی سایت، استفاده بهینه از CSS می باشد. در این بخش از آموزشCSS،  به شرح ویژگی های اساسی و مهم در طراحی وب سایت می پردازیم و روش های اضافه کردن CSS به صفحه Web، را مورد بررسی قرار می دهیم.

سه روش برای اضافه کردن  CSSبه صفحه Web، وجود دارد:

روش های استفاده از CSS

۱- سبک درون خطی یا inline

در یک Tag، با استفاده از ویژگیstyle، می توانید از این روش نوشتن CSS، استفاده کنید. به مثال زیر، دقت کنید.

خروجی به صورت زیر خواهد بود:

همانطور که در مثال فوق، مشاهده می کنید، برای برچسب <p>، خصوصیت style، تنظیم شده است. در این خصوصیت، مشخص شده است که رنگ پس زمینه می بایست آبی باشد و رنگ نوشته، سفید تعیین شده است.

این روش، دارای بالاترین اولویت اجرا نسبت به دو روش دیگر است. استفاده از این روش، تمامی Styleهای موجود در دو روش دیگر را نادیده می گیرد. در واقع این روش، هدف واقعی  استفاده از CSS که جلوگیری از تکرار کدها و بهینه سازی و کاهش حجم صفحات وب است را، چندان برآورده نمی کند.

برای اینکه طراحی سایت بهینه تری داشته باشید، پیشنهاد می شود که از این روش فقط در مواقع ضروری استفاده کنید.

۲- سبک داخلی یا internal

یکی از روش های تعریف CSS، استفاده از روش Internal Style Sheet می باشد. برای استفاده از این روش، بایستی کد های CSS را در فایل HTML ، درون تگ  <head> قرار دهید.

از این روش فقط در طراحی سایت هایی که تعداد صفحات کمتری دارند استفاده می شود. به مثال زیر، توجه کنید.

همانطور که در مثال فوق، مشاهده می کنید، درون برچسب style، مشخص شده است که تمامی برچسب های hr که در این صفحه HTML قرار دارند می بایست با رنگ نقره ای نمایش داده شوند. میزان حاشیه از سمت چپ، برای تمامی برچسب های p، برابر با ۲۰ پیکسل تعیین شده و پس زمینه صفحه Web، با کد رنگ #۴۱c8f3 مشخص شده است.

همانطور که در مثال فوق، مشاهده می کنید، برای برچسب <p>، خصوصیت style، تنظیم شده است. در این خصوصیت، مشخص شده است که رنگ پس زمینه می بایست آبی باشد و رنگ نوشته، سفید تعیین شده است.

این روش، دارای بالاترین اولویت اجرا نسبت به دو روش دیگر است. استفاده از این روش، تمامی Styleهای موجود در دو روش دیگر را نادیده می گیرد. در واقع این روش، هدف واقعی  استفاده از CSS که جلوگیری از تکرار کدها و بهینه سازی و کاهش حجم صفحات وب است را، چندان برآورده نمی کند.

برای اینکه طراحی سایت بهینه تری داشته باشید، پیشنهاد می شود که از این روش فقط در مواقع ضروری استفاده کنید.

مزایای استفاده از این روش

  • بر خلاف سبک درون خطی، این روش می تواند از خاصیت ارث بری کلاس ها استفاده کند. برای مثال می توانید از یک Style در چندین جای همان صفحه اسفاده کنید.

  • این سبک ممکن است اولویت بالاتری از CSS خارجی ها داشته باشند.

معایب استفاده از این روش

  • افزایش زمان بارگذاری صفحه به خاطر این که حجم صفحه وب، زیاد شده و در هر بار اجرا، باید دوباره بارگذاری گردد.

  • این سبک ممکن است اولویت بالاتری از CSS خارجی ها داشته باشند.

۲- سبک خارجی یا external

یکی از روش های تعریف CSS، استفاده از روش External Style Sheet می باشد. بهترین روش برای داشتن طراحی سایت حرفه ای، استفاده از روش  CSS خارجی می باشد.

از CSS خارجی، زمانی استفاده می شود که آن style، در بیشتر صفحات، استفاده شده باشد. با استفاده از CSS خارجی، شما با تغییر دادن تنها یک فایل، می توانید ظاهر سایت خود را تغییر دهید. هر صفحه بایستی به CSS Style  مورد نظر خود، پیوند داده شود. بهترین روش برای گذاشتن CSS Style در صفحات وب، استفاده از روش CSS خارجی می باشد. با استفاده از تگ در داخل بخش head، می توانید یک  CSSخارجی تعریف کنید.

قوانین نام گذاری فایل های CSS

  • از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از: حروفa-z ، اعداد ۰-۹، خط زیر (_)، خط فاصله (-)

  • از کاراکتر فضای خالی استفاده نکنید ( ) مثلا: style Master.CSS، این نام گذاری می تواند در سرویس دهنده وب، مشکل ایجاد کند.

  • نام فایل بایستی با یک حرف شروع شود.
  • برای نام گذاری فایل، از حروف کوچک استفاده کنید.
  • نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
  • فراموش نکنید که حتما فایل را با پسوند CSS ذخیره کنید.

طراحی صفحه اصلی سامانه Web GIS

با توجه به مطالبی که در بخش آموزش HTML آموختیم و نکاتی که تا اینجا در مورد CSS فراگرفتیم قصد داریم که در این بخش اقدام به طراحی و پیاده سازی چارچوب یا واسط گرافیکی صفحه اصلی سامانه Web GIS نماییم. برای این کار باید قابلیت های Web GIS را شناسایی کرده و بر اساس آن ها، واسط گرافیکی مناسب را طراحی نماییم. اگرچه ما در آموزش های بعدی، این قابلیت ها را به تفصیل بررسی می کنیم، اما در اینجا برای آن که بدانیم چارچوب کلی سایت ما باید به چه صورت باشد، مروری اجمالی بر این قابلیت ها خواهیم داشت. اگر می خواهید که آموزش های بعدی ما به دست شما برسد می توانید در کلاس Web GIS که رایگان می باشد، ثبت نام نمایید.

در یک Web GIS ساده قابلیت های زیر وجود دارند:

  • header سایت Web GIS

  • منوی اصلی

  • قابلیت های پایه شامل:

    نمایش نقشه های عمومی همانند Google و OSM و…

    نمایش لایه ها از سرویس دهنده های نقشه با استفاده از سرویس WMS

    نمایش چند لایه به صورت هم زمان

    روشن و خاموش کردن لایه ها

    تعیین محدوده نمایش پیش فرض نقشه

    قابلیت های پایه شامل: بزرگنمایی، کوچک نمایی و جابجایی روی نقشه، نمایش مختصات ماوس، نمایش شمال جغرافیایی، نمایش مقیاس به صورت خطی و عددی و…

    تغییر مقیاس نمایش نقشه با استفاده از دستورات

    تغییر سطح بزرگنمایی با استفاده از دستورات

    مشاهده و بزرگنمایی با استفاده از مختصات تعیین شده

    مشاهده نقشه در وضعیت قبلی و بعدی

    بدست آوردن و نمایش مختصات مکان کلیک شده روی نقشه

    اندازه گیری طول و محیط و مساحت

    انواع ترسیمات شامل خط، نقطه، چندضلعی، مربع، دایره و…

    نوشتن برچسب روی نقشه

    ایجاد مارکر روی نقشه با کلیک ماوس

    ایجاد مارکر با استفاده از مختصات تعیین شده

    ایجاد Popup بر روی نقشه

    ایجاد و نمایش Overview Map

    Identify

    انتخاب عوارض نقشه

    جستجو در لایه ها

بر اساس قابلیت های فوق، صفحه اصلی Web GIS مورد نظر باید دارای بخش های زیر باشد:

  • محدوده ای برای نمایش نقشه
  • محدوده ای برای نمایش لیست لایه های نقشه

  • محدوده ای برای نمایش Banner یا Header سامانه Web GIS برای معرفی سازمان یا شرکت
  • منوی اصلی
  • بخشی برای نمایش ابزارهای مورد نیاز

بر اساس موارد مذکور، واسط کاربری به شکل زیر را در نظر می گیریم و در آموزش های آتی به مرور تکمیل می کنیم.

پس از طراحی قالب سایت به شکل زیر خواهد بود:

آموزش و معرفی انتخابگرها CSS Selectors

انتخاب گرها برای دادن الگوهای مورد نظر ما به عناصر، به کار برده می شوند. تمامی این انتخاب گرها را با ذکر مثال توضیح می دهیم.

انتخابگر  class.

.intro
{
background-color:yellow;
}

این مثال تمامی عناصری که class=”intro” هستند را انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر id#

#name
{
background-color:yellow;
}

این مثال تمامی عناصری که “id=”name هستند را انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر *

*
{
background-color:yellow;
}

این مثال تمامی عناصر را انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر element

p
{
background-color:yellow;
}

این مثال تمامی تگ های p را انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر element,element

p,h1
{
background-color:yellow;
}

این مثال تمامی تگ های p و h1 را انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر element element

div p
{
background-color:yellow;
}

این مثال تمامی تگ های p که در داخل تگ div هستند را انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر element>element

div>p
{
background-color:yellow;
}

این مثال تمامی تگ های p که والد آن ها تگ div می باشد را انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر element+element

div+p
{
background-color:yellow;
}

این مثال تمامی تگ های p که بلافاصله پس از تگ div می باشند را انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر [attribute]

a[target]
{
background-color:yellow;
}

تمام تگ های a که ویژگی target دارند را انتخاب و style مورد نظر را به آن ها اعمال می کند.

انتخابگر [attribute|=value]

[lang|=fa]
{
background-color:yellow;
}

تمامی عناصری که ویژگی “lang” آنها با “fa” آغاز می شود، انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر link:

a:link
{
background-color:yellow;
}

تمام تگ های a که روی آن ها کلیک نشده است را، انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر visited:

a:visited
{
background-color:yellow;
}

تمام تگ های a که روی آن ها کلیک شده است را، انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر hover:

a:hover
{
background-color:yellow;
}

تمام تگ های a برای زمانی که اشاره گر ماوس روی آن ها می رود را، انتخاب و style مورد نظر را به آنها اعمال می کند.

انتخابگر focus:

input:focus
{
background-color:yellow;
}

تمام تگ های input برای زمانی که مکان نما وارد آن ها می شود را، انتخاب و style مورد نظر را به آنها اعمال می کند.

تنظیم پس زمینه (Backgroud)

ویژگی Background برای تعریف افکت های پس زمینه برای یک عنصر، به کار می رود. این ویژگی در طراحی وب سایت، به شکیل تر شدن سایت شما کمک می کند. انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها می پردازیم:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

ویژگی background-color:

این خاصیت، رنگ پس زمینه یک عنصر را مشخص می کند. برای مثال، برای تنظیم رنگ پس زمینه بدنه سایت، از کد زیر استفاده می کنیم:

body
{
background-color:#b0c4de;
}

ویژگی background-image:

با استفاده از این ویژگی، تصویر پس زمینه یک عنصر را مشخص می کنیم. برای مثال، برای تنظیم تصویر پس زمینه بدنه سایت، از کد زیر استفاده می کنیم:

body
{
background-image:url(‘paper.gif’);
}

ویژگی background-repeat:

با استفاده از این ویژگی، می توانیم مشخص کنیم که تصویر چگونه تکرار شود.

body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}

زمانی که بخواهیم تصویر فقط یک بار و بدون تکرار نمایش داده شود، از دستور زیر استفاده می کنیم:

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}

ویژگی background-attachment:

برای اینکه بتوانیم تصویر پس زمینه را ثابت انتخاب کنیم، از این ویژگی استفاده می کنیم. مقدار پیش فرض آن scroll می باشد.

body
{
background-image:url(‘smiley.gif’);
background-repeat:no-repeat;
background-attachment:fixed;
}

ویژگی background-position:

این خاصیت موقعیت یک عنصر را مشخص می کند، برای مثال، برای تنظیم موقعیت تصویر به گوشه سمت راست بالا، از کد زیر استفاده می کنیم:

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:top right;
}

این سه خط را می توان به صورت خلاصه تر نوشت:

body{background:#ffffff url(‘img_tree.png’) no-repeat right top;}

ادامه آموزش CSS

آنچه خواندید، گزیده ای از آموزش CSS، بود. از آنجایی که آموزش ها گسترده می باشند، لذا از آوردن آن ها در ادامه این نوشته، خودداری می کنیم. ما برای شما یک فیلم آموزش CSS، تهیه کرده ایم. در این فیلم که مدت آن ۴۰ دقیقه می باشد، ما به آموزش کامل CSS پرداخته ایم و شما می توانید بصورت عملی، خروجی مثال ها را ببینید. پیشنهاد می کنیم این فیلم آموزشی را به رایگان، دانلود کرده و مراحل آموزش CSS را فرابگیرید.

دانلود رایگان فیلم آموزش CSS برای طراحی سامانه Web GIS

می خواهم فیلم رایگان آموزش HTML را دانلود کنم

سخن پایانی

این نوشته، سومین نوشته از کلاس رایگان برنامه نویسی Web GIS بود. ما تلاش کردیم شما را با CSS، به منظور طراحی ظاهر و واسط کاربری سامانه Web GIS، آشنا کنیم. ما در نوشته­ بعدی، شما را با JavaScript، آشنا می­کنیم و به شما یاد می­دهیم که چگونه وب سایتی را ایجاد کنید که با کاربر در تعامل است و از حالت ایستا خارج شده و به یک وب سایت پویا تبدیل می­ شود.

اگر هنوز دو جلسه گذشته را مشاهده نکرده اید، به شما پیشنهاد می کنیم به ترتیب این دو آموزش را بخوانید و فیلم های مربوط به آنها را دانلود کرده و مشاهده نمایید.

آموزش مبانی و مفاهیم Web GIS به همراه فیلم رایگان به مدت ۱ ساعت

آموزش HTML برای طراحی Web GIS به همراه فیلم رایگان به مدت ۴۰ دقیقه

کلاس رایگان آموزش برنامه نویسی Web GIS

این سومین جلسه از کلاس رایگان آموزش برنامه نویسی Web GIS، بود. اگر هنوز در کلاس رایگان آموزش برنامه نویسی Web GIS، ثبت نام نکرده اید و مایل هستید که نوشته های بعدی را در ایمیل خود دریافت نمایید، می توانید هم اینک از طریق فرم زیر، در این کلاس رایگان، ثبت نام نمایید.

  • این فیلد برای اعتبار سنجی است و باید بدون تغییر باقی بماند .

همچنین اگر در کانال تلگرام GISPlus باشید و یا صفحه اینستاگرام GISPlus را پیگیری نمایید، از آخرین نوشته ها، آگاه خواهید شد.

کانال تلگرام GISPlus
صفحه اینستاگرام GISPlus
بسته آموزش برنامه نویسی Web GIS

پیشنهاد ما برای خواندن

  • برنامه نویسی Web GIS؛ آموزش HTML
  • مبانی و مفاهیم Web GIS
مدیرسایت
زهرا ابراهیمی کارشناس فناوری اطلاعات از دانشگاه اصفهان است. او در زمینه های طراحی و توسعه وب و برنامه نویسی اندروید فعالیت دارد.