جلسه دوم – اصول طراحی و برنامه نویسی انواع صفحات وب

صفحات وب می توانند به دو صورت ایجاد شوند:

ایستا   (Static)

 پویا   (Dynamic)

در طراحی صفحات وب ايستا فقط از زبان HTML استفاده شده وهیچگونه کد برنامه نویسی در آنها وجود ندارد.پسوند این صفحات htm یا html است. از آنجا که تگ های Html امكاناتی بمنظور ايجاد صفحات وب سفارشی و بر اساس شرايط خاص در اختيار قرار نمی دهد در نتیجه، صفحات وب ايستا همواره بصورت مشابه و يکسان برای تمامی کاربران نمايش داده خواهند شد. اطلاعات ثابتی در این نوع صفحات وب قرار می گيرند، این اطلاعات قبل از نمایش و یا در حین نمایش ثابت و بدون تغییر هستند. و طراح صفحه وب، قبل از اينكه هر نوع درخواستي برای آن وجود داشته باشد ، بطور كامل محتوی صفحه را مشخص كرده است . محتويات اين نوع از صفحات ( متن ،‌تصوير ، لينك ها و … ) و شكل ظاهری آنها همواره يكسان خواهد بود ، صرفنظر از اينكه چه كسی ، درچه زمانی و يا چگونه صفحه را مشاهده خواهد كرد. بنابراين می توان گفت ، محتويات اين قبيل از صفحات قبل از اينكه درخواستی ايجاد گردد ، توسط مديريت سايت ايجاد و مشخص شده اند.

در ساخت این صفحات بجز تگ های HTML ، دستوراتی به زبان های برنامه نویسی مبتنی بر وب هم قرار داده شده است. این دستورات می توانند توسط سرویس دهنده اجرا شده و خروجی آنها در داخل صفحه درج شود ، یا دستوراتی می توانند توسط مرورگر در شرایط معین یا وقوع رویدادهای معین اجرا شده و محتوا یا شکل ظاهری صفحه را دچار تغییر کنند. محتوای این گونه صفحات می تواند بر حسب شرایط و درخواست کاربر تغییر کند و می توانند به کاربران مختلف ، محتوای مختلفی را ارائه نمایند.

در این مدل،کدهای برنامه نویسی به همراه صفحه وب از سرویس دهنده به سرویس گیرنده منتقل شده و در صورت نیاز توسط مرورگر تفسیر و اجرا می شوند. اجرای این کدها می تواند ظاهر صفحه یا محتوای آنرا در صورت وقوع رویدادهای ماوس و صفحه کلید دچار تغییر کند. به عنوان مثال با قرار گرفتن نشانگر ماوس روی یک گزینه، کدهایی اجرا شده و منوی آنرا باز کند. یا با حرکت نشانگر ماوس روی سطرهای یک جدول پس زمینه سطر جاری تغییر کند. در این تکنولوژی، مرورگرها دستورات برنامه نویسی را جهت توليد كدهای Html و در زمان درخواست يك صفحه توسط كاربر ، استفاده خواهند كرد. بنابراين محتويات يك صفحه بر اساس درخواست كاربران و بصورت پويا ايجاد خواهد شد.

تاكنون تكنولوژيهای متعددی بر اساس رويكرد فوق مطرح و در اختيار طراحان و مولفان صفحات وب پويا قرار گرفته شده است . جاوا اسكريپت ، Vbscript ، كنترل های ActiveX و اپلت های جاوا نمونه هائیاز اين نوع تكنولوژی ها بوده كه برای شناخت خوانندگان در اين بخش بصورت خيلی مختصر در رابطه با هر يك توضيحاتی ارائه خواهد شد.

جاوااسكريپت (JavaScript) ،‌اولين زبان اسكريپت در رابطه با مرورگرها است و بگونه ای طراحی شده است كه قادر به خلق برنامه های كوچك و در عين حال موثر جهت انجام عمليات متعددی نظير برخورد با رويدادهای بوجود آمده در سطح كاربر نظير : كليك نمودن بر روی يك آيتم ، بستن يك پنجره ، فعال شدن يك صفحه ، خارج شدن از يك صفحه ، حركت موس روي يك آيتم و… است .

در اين مدل،اسکریپت های برنامه نویسی قرارگرفته در صفحه وب توسط سرویس دهنده اجرا شده و خروجی آنها در صفحه وب درج شده و به سرویس گیرنده فرستاده می شود. این کدها می توانند به فایلها و بانک های اطلاعاتی قرار گرفته روی سرویس دهنده دسترسی داشته و بر اساس درخواست کاربر اطلاعاتی را از آنها استخراج کرده و داخل صفحه قرار دهند.
در این مدل، اجراي تمامی پردازش ها بر روی سرويس دهنده، قبل از ارسال صفحه براي مرورگر است . يكي از مزايای عمدهمدل فوق نسبت به مدل Client-Side ، اين مورد است كه : در يك صفحه وب صرفاً شاهد كدهای Html خواهيم بود. و دستورات برنامه نویسی صفحات وب در نزد سرويس دهنده وب مخفی نگهداری خواهد شد و در نتیجه اكثر مرورگرها قادر به نمايش نتايج خواهند بود.يكي ديگر از نكات مهم در رابطه با مدل فوق، اين است كه يك صفحه تا زمانيكهدرخواستیبرای آن دريافت نشده باشد ، محتويات آن بوجود نخواهد آمد.

PHP كه در ابتدا Personal Home Page ناميده مي شد و اخيراً PHP: Hypertext Preprocessor (پیش پردازشگر ابرمتن )ناميده می شود ، يكی از تكنولوژيهای رايج برای ايجاد صفحات وب پويای سمت سرور است .

برنامه هائی با قابليت اجراء بر روی وب را داشته باشند ، Web-basedگفته می شوند . به هر يک از برنامه های فوق، می‌توان از طريق يک مرورگر دستيابی پيدا کرد. طراحی برنامه هایمبتنی بر وب ، بگونه ای است که قابليت اجراء بر روی اينترنت و وب را داشته و تماماً از طریق مرورگر اجرا می شوند.

برنامه های Web-Based ، دارای امکانات و قابليت های متعددی بوده که بمنظور استفاده در وب طراحی و پياده سازی شده اند. برنامه های موجود بر روی برخی از سايت ها نظير : خريد کالا ، کتاب ، رزو بليط هواپيما ، ارسال و دريافت نامه الکترونيکی، نمونه هائی از برنامه های مبتنی بر وب می باشند.

. يک فايل HTML فايلی متنی است که از تگ های HTML تشکیل شده است، تگ ها برای تعیین ساختار اطلاعات موجود در صفحه وب، بیان چگونگی نمایش آن و معرفی فایل های مورد نیاز آن استفاده شده و مرورگرهای وب قادر به درک تگ ها و نمایش صحیح آن می باشند. فایل های اچتمل دارای پسوندhtm يا htmlمی‌باشند.

ابزارهای طراحی صفحات وب

برای طراحی صفحات وب می توان از ویرایشگرهای متنی ساده مثل Notepad  و یا از نرم افزارهای اختصاصی طراحی وب مثل DreamWeaver محصول شرکت Adobe استفاده کرد. مسلماً نرم افزارهای اختصاصی، امکانات بیشتری از جمله طراحی صفحات بصورت WYSIWYG، ابزارهای آماده برای اضافه کردن به صفحه، ویزاردهایی برای انجام عملیات مختفل و کادرهایی برای انجام تنظیمات اجزای صفحه و … را در اختیار طراح قرار می دهند. در آینده با امکانات اصلی نرم افزار دریم ویور آشنا خواهید شد. علیرغم وجود ابزارهای تولید خودکار صفحات وب، اکیداً توصيه مي‌شود ابتدا از ویرایشگرهای متنی معمولی برای تهيه صفحات خود استفاده کرده، عملکرد تگها را شناخته و هيچگاه بدون اينکه بدانيد کاربرد يک تگ چيست آنرا بکار نبريد.

عناصر HTML

يک فايل HTML، متنی است که از عناصر (elements)  تشکيل مي‌شود و برای ايجاد عناصر از تگ ها(tags) استفاده ميشود.

زبان HTML حدود 80 عنصر تعريف شده است. تگ های اچتمل بوسيله دو کاراگتر> و < ساخته مي‌شوند. این تگ های معمولا بصورت زوج ظاهر ميشوند، مانند <b>test</b>که تگ اول در يک زوج تگ مثلا <b> تگ شروع و تگ دوم مثلا <b/> تگ پايانی نام دارد. متن بين تگ اول و تگ دوم در يک زوج تگ محتوای عنصر ناميده ميشود، مثلا “test” . اگر عنصری محتوایی نداشته باشد نیازی به تگ پایان هم نخواهد داشت. مثل عنصر hr که برای نمایش خط افقی استفاده می شود.

زبان HTMLحساس به حالت حروف نیست و تگ ها را ميتوانيد بوسيله حروف لاتين کوچک يا بزرگ نوشت. برای مثال دو تگ <b> و <B> معادل هم هستند ولی اکیداً توصيه مي‌شود به خاطر سازگاری با XHTML از حروف کوچک استفاده شود.

 

خصوصیات تگ ها

برای تگ ها مي‌توان خصوصیات (شناسه ها) آنها را تنظیم کرد که کیفیت نمایش آنها را تعیین می کند. مثلا در مورد تگ <body> شناسه ای به نام bgcolor وجود دارد که رنگ پس‌زمينه صفحه را تعيين مي‌کند، برای نمونه اگر مي‌خواهيد که رنگ زمينه صفحه وب سبز باشد کافی است این که به شکل زير عمل کنيد :

<body bgcolor=”black”>

در مثال زير تگ <table> دارای چهار شناسه مختلف با نامهای width، height ، align و border و مقادير center، 60، 100 و 0 ميباشد.

<table border=”0″ width=”100″ height=”60″ align=”center” >
……
</table>

شناسه ها به صورت کلی “مقدار”=نام نوشته ميشوند و هميشه به تگ شروع يک عنصر اضافه ميشوند و اگر در يک عنصر، شناسه ها مقداردهی نشوند از مقادير پیش‌فرض آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد برای پس زمينه صفحه استفاده خواهد شد. مقدار يک شناسه را بهتر است داخل علامت ” ” نوشته شود.

در جلسه بعدی به معرفی تگ های HTML می پردازیم …