چکیده:

در این پایان نامه سعی شده است تا به شرح سایت شرکت به سبا بپردازیم.

ودر ابتدا یک سری توضیحات در مورد نرم افزار های مورد استفاده که در طی انجام پروژه با آنها کار کردیم گفته شده است .که از نرم افزار Flash Photoshop,Swish,Frontpage برای طراحی صفحات واز Php وبانک اطلاعاتی my sql برای پویا سازی سایت استفاده شده است.

وبعد به توضیح ساختار سایت وپیاده سازی سایت پرداختیم واینکه در هر صفحه از چه نرم افزارهایی واینکه هر قسمت از صفحه چگونه ساخته شده است.

مقدمه :

مکاتب الهی ودر راس آنها اسلام انسان ساز را موجودی پویا وکمال طلب می دانند.از نظر اسلام انسان در حال تکامل است وجهت گیری او به سوی خدای تبارک وتعالی است.ویکی از راههای تقرب به ذات اقدسش علم است.

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

درچنین شرایطی که همراهی با قافله پر شتاب فن آوری های رایانه ای به امری کلیدی در مسیر توسعه وپیشرفت کشور تبدیل شده لزوم ایجاد تغییر در شیوه های آموزشی و همگام کردن آن با آخرین یافته های علمی ضروری به نظر می رسد.

براین اساس شرکت تعاونی خدمات بهداشتی ودرمانی بهداشت گستر سبحان آرین (به سبا )که یک شرکت خدمات بهداشتی ودرمانی است برآن شد که در جهت به اطلاع رساندن طرح ها وپروژه های تحقیقاتی وبرگزاری دوره های آموزشی خود و ثبت نام از متقاضیان به صورت on line از ما تقاضا کردند که یک سایت پویا برایشان طراحی کنیم.

که بر این اساس متقاضیان بتوانند دراتلاف وقت کمتر وراحتتر در هر کجا که باشند از خدمات جدید وکلاسهای آموزشی جدید بهره مند شوند.

که برای انجام این پروژه از نرم افزار های Frontpage ,Flash ,Swish ,Photoshop برای طراحی سایت واز PHP برای برنامه نویسی و با بانک اطلاعاتی mysql استفاده کردیم.

اهداف واهمیت:

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

هدف دیگر این است که از طریق این سایت می توانند دسترسی به سایت های مفید آموزشی داشته باشند . که اینکار از طریق رفتن به صفحه اخبار می باشد.

وامکان مفید دیگر برای مدیر شرکت ایجاد کردیم وآن این است که مدیر می تواند با وارد کردن user name ,password مورد نظر خود به بانک اطلاعاتی دست یابند واز این طریق لیست تمامی ثبت نام کنندگان وتاریخ ثبت نام واینکه در چه درس های ثبت نام کرده اند را ببیند.

ابزار ها :

در این سیستم از کد نویسی PHP4 برای طراحی وپویا سازی صفحات استفاده شده است. البته در برخی موارد از PHP5 که ورژن جدید این برنامه است استفاده شده است.

و به منظور ذخیره اطلاعات وذخیره بانک ها از بانک اطلاعاتی my sql استفاده شده است.

وطراحی ظاهر صفحات به وسیله نرم افزار Frontpage وکارهای متحرک وساخت بنر متحرک به FLASH , SWISH , Photoshop انجام شده .البته از Photoshop هم برای برش عکس ها وطراحی بنر استفاده شده است.

ساختار کلی سایت :

صفحه اول سایت با نام index.htm تماما با flash طراحی شده است که صفحه اصلی سایت می باشد . واز این صفحه لینک های اصلی شروع می شود .

صفحه اخبار پزشکی ومعرفی شرکت ومعرفی هئیت علمی ومعرفی مدیران صفحات طراحی شده با Frontpage هستند وبرنامه نویسی ندارند.

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

ساختار پایان نامه :

در فصل دوم به توضیح ونحوه کار کرد نرم افزارهای مورد استفاده که در مدت پروژه با آنها کار کردیم پرداخته شده . واینکه هر نرم افزار چه ساختاری دارد و چه کارهای با آن انجام میدهند.

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

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

معرفی نرم افزار Frontpage

ایجاد یک صفحه سایت

در ابتدا باید مشخصات اولیه صفحه را بدانیم اگر بخواهیم یک صفحه با قاب داشته باشیم در این حالت از منوی File زیر منوی New را انتخاب کرده و سپس در سربرگ Frames page مورد نظر را انتخاب می کنیم.

در این صورت با دو پیغام مواجه می شویم:

پیغام اول New page است که در آن یک صفحه جدید در مکان مورد نظر باز می کند و دومی Set initial page در قسمت باز شده آدرس صفحه و یا تصویر مورد نظر را مشخص کرده و در صورتی که بخواهیم بدون قاب باشد در این صورت مثل قبل از منوی File زیر منوی New را انتخاب کرده سپس در سربرگ Genereal مدل Normal page را انتخاب می کنیم.

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

ابتدا کلیک راست کرده گزینه background را انتخاب می کنیم سپس قسمت background را انتخاب کرده رنگ زمینه را انتخاب می کنیم برای تمام صفحات همین کار را می کنیم برای تغییر و انتخاب فونت دلخواه نیز به همین صورت راست کلیک کرده و گزینه فونت را انتخاب می کنیم.

عمل بعدی ساختن کلید می باشد که به چند صورت صورت می گیرد:

یکی با استفاده از hover button که به این صورت است: از منوی بالای صفحه گزینه insert سپس گزینه Componet و بعد از آن گزینه button hover را انتخاب می کنیم و تنظیمات لازم را انجام می دهیم. روش دیگر برای ساخت کلید در فرانت پیج به این صورت است که یک نوشته یا یک شکل داخل یکی از صفحات خود می آوریم و آن را انتخاب می کنیم بعد انتخاب شکل یا نوشته روی آن راست کلیک می کنیم و گزینه Hyperlink را انتخاب می کنیم سپس با دادن آدرس مناسب آن را به صفحه مورد نظر لینک می کنیم.

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

برای اینکه یک عکس را از یک محیط به محیط دیگر بیاوریم لازم است که آن را به سایز دلخواه در آوریم. که این مورد با استفاده از نرم ا فزار Fotoshop صورت می گیرد که توضیحات بیشتر را در این رابطه به فصل بعدی واگذار می کنیم.

روش اول به صورت زیر می باشد ابتدا عکس را که در یک محیط انتخاب می کنیم و یا عمل کپی کردن و آمدن به صفحه وب و انجام عمل paste عکس مورد نظر را انتقال می دهیم.

روش بعدی که می توانیم یک عکس را به محیط فرانت پیج می آوریم این است که از منوی بالای صفحه گزینه insert را انتخاب می کنیم منوی دیگری باز می شود که از میان آنها گزینه picture را انتخاب می کنیم این گزینه دو حالت دارد که ما گزینه ای که From file می باشد را انتخاب می کنیم که در آن آدرس عکس مورد نظر از ما خواسته می شود با انجام این کار عکس مورد نظر در مکانی که انتخاب کرده ایم منتقل می شود.

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

ساختن صفحه وب با استفاده از الگو:‌

الگوهای سایتهای وب پیش ساخته ای است که می توان آنها را تغییر داد.

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

از منوی فایل New را انتخاب می کنیم سپس گزینه Customer support web را انتخاب می کنیم ، فرانت پیج از الگوی وب پشتیبانی مشتریان استفاده می کند و بر مبنای آن یک سایت وب جدید را می سازد.

ایجاد جدول (Table)

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

اگر بخواهیم بعد از ایجاد جدول در آن تغییری بوجود بیاوریم می توانیم با کلیک راست روی جدول و انتخاب گزینه Properties Table رنگ جدول ، رنگ پیش زمینه جدول، سایز خطها را تغییر داد. البته اگر بخواهیم به یک سلول جدول سطر یا ستونی اضافه کنیم می توان انتخاب آن خانه و کلیک راست کردن بر روی آن و انتخاب گزینه Insert Row یا Insert clos و با وارد کردن تعداد مورد نظر در باکس باز شده ایجاد کرد و یا حتی می توان دو سلول جدول را یکی کرد برای اینکار با بلوک کردن خانه های مورد نظر و کلیک راست بر روی آنها و انتخاب گزینه Merge cells می توان اینکار را انجام داد.

با انتخاب زیر فهرست page setup از منوی File می توان در باکس مربوطه برای جدول خود Margine Header - Footer را تعریف کرد و یا حتی می توان با انتخاب گزینه draw table از منوی Table می توان نسبت به ا عمال زیر اقدام کرد:

کشیدن خطوط یا اضافه کردن سطر یا ستون به جدول با استفاده از draw table یا گزینه مداد- پاک کردن خطوط با استفاده از - eraser تقسیم کردن هر سلول جدول به تعداد سطرها و ستونهای دلخواه (split cell)- فشرده کردن سلول های جدول نوع قرار گرفتن متن در جدول – ازدیاد طبقات جدول …….

اگر بخواهیم خط های جدول یا border های آن مشخص نباشد به روش زیر عمل می کنیم.

در این حالت خط های جدول وجود دارند ولی دیده نمی شوند. ابتدا روی جدول کلیک راست کرده و گزینه Properties Table را انتخاب می کنیم و تنظیمات مربوط به جدول را از جمله رنگ زمینه و حاشیه را انجام می دهیم.

سپس در قسمت border گزینه size را صفر می کنیم که در این صورت خطهای جدول حذف می شوند و اگر عدد دیگری وارد کنیم قطر این خطوط را نشان می دهد.

بهبود سایت با استفاده از تصویر

ما برای جلب توجه بینندگان گاهی اوقات مجبور به استفاده از تصاویر هستیم. با استفاده از Frontpage می توان عناصر مختلف گرافیکی نظیر قطعات هنری (clip art) فایلها تصویری و …. را در صفحه جای داد. استفاده از سمبل ها نیز در تحقق این امر به ما کمک می کند.

الف ) زیر فهرست symbol

از منوی insert گزینه symbol را انتخاب و در باکس مربوطه در قسمت مورد نظر سمبل خود را انتخاب و سپس Insert می کنیم.

ب ) زیر فهرست picture

از منوی Insert زیر منوی picture را انتخاب و در باکس مربوطه آدرس عکس را وارد کرده، باکس مربوطه شامل قسمت Form file , clip art می باشد که بسته به نوع انتخاب ما مبنی بر اینکه از عکسهای پیش فرض محیط (استفاده از قاب عملیاتی Insert clip art در استفاده از قطعات هنری معمولی ) استفاده کنیم یا از بانکی دیگر حاوی تصاویر گرافیکی دلخواه در زمینه طراحی سایتهای وب به ترتیب قسمتهای بالا را انتخاب می کنیم.

جهت ویرایش تصاویر می توان از میله ابزار pictures استفاده نمود.

ابتدا با استفاده از دکمه Insert picture format file در باکس picture عکس مورد نظر را انتخاب و سپس روی عکس کلیک می کنیم تا انتخاب شود. در این حالت میله ابزار picture فعال است و می توان ویرایش را شروع کرد. از دکمه Tect برای ایجاد یک جعبه متن در محدوده تصویر استفاده می شود. از دکمه Auto thumbnial برای ایجاد یک نسخه کوچکتر استفاده می شود.

از دکمه هایsend backward و Forward bring , position absolutely برای کنترل موقعیت تصویر در ارتباط با عناصر دیگر صفحه استفاده می شود. از دکمه های Rotate و Rotate right و flip horizontalو flip vertical برای چرخاندن و یا معکوس کردن تصاویر استفاده می شود.

از دکمه های More contrasrt و More brightness و Less brighness برای افزایش و یا کاهش روشنایی و یا تضاد تصویر انتخاب شده استفاده می شود. از دکمه corp برای بریدن تصویر از دکمه Bevel برای برجسته کردن لبه های تصویر از دکمه Resample برای اصلاح موقعیت تصویر استفاده می شود.

جهت ویرایش متن می توان از میله ابزار Word art استفاده نمود. انواع فونتها با رنگهای مختلف در باکس Wordart gallery می تواند ما را در تحقق این امر یاری رساند.

متحرک سازی

برای متحرک سازی نوشته های داخل فرانت پیچ که جلوه جالبی به صفحات می دهد می توان از منوی بالای صفحه گزینه view سپس گزینه Toobars سپس گزینه Dhtml Effects را انتخاب کرده تنظیمات بعدی را به دلخواه انجام می دهیم برای دیدن نوشته متحرک قسمت preview فرانت پیج را فعال می کنیم تا بتوانیم نوشته فعال شده خود را مشاهده کنیم. این قسمت قابلیتهای دیگری نیز دارد که با امتحان گزینه ها آنها را در می یابیم .

فلش در فرانت پیج

برای اینکه زیبای صفحات خود را افزایش دهیم می توان از فلش استفاده کرد برای اینکار فیلمی را که در فلش ساخته ایم را ذخیره کرده و سپس صفحه فرانت پیج را باز می کنیم و از منوی بالا گزینه Insetrt را انتخاب می کنیم منوی دیگری باز می شود که از آن نیز Advanced را انتخاب کرده و جدول زیر را به این صورت پر می کنیم که ابتدا در بالای صفحه آدرس فیلم یا انیمیشن خود را درج می کنیم سپس با انتخاب گزینه plug-in جدولی برایم باز می شود، سپس سایز دلخواه را به آن می دهیم سپس مشاهده می کنیم که فیلم مابه محل مورد نظر انتقال پیدا کرده است.

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

جاری صفحه در حرکت

ما می توانیم با ایجاد علامتهایی به نام Bookmark در مکانهایی خاص از صفحات وب قرار دهیم و از مکانهای دیگر همان صفحه و یا صفحات دیگربه آن علامت link ایجاد کنیم. این علامت بیشتر در صفحات طولانی مورد استفاده قرار می گیرد برای اینکار مثلا می خواهیم از یک صفحه به صفحه ای دیگر ولی بخش انتهایی آن لینک کنیم در ابتدا باید خط چشمک زن را در مکانی که می خواهیم صفحه به آن لینک شود قرار می دهیم سپس از منوی Bookmark lnsert را انتخاب کرده در باکس باز شده اسمی را وارد می کنیم.

به صفحه دیگر می رویم در آنجا گزینه ای که باید Hyperlink شود را انتخاب کرده آنگاه در قسمت Address آدرس صفحه دیگر را انتخاب می کنیم و قسمت Bookmark تمامی می خواهیم صفحه به آن لینک شود قرار می دهیم سپس از منوی Bookmark lnsert را انتخاب کرده در باکس باز شده اسمی را وارد می کنیم.

به صفحه دیگر می رویم در آنجا گزینه ای که باید Hyperlink شود را انتخاب کرده آنگاه در قسمت Address آدرس صفحه دیگر را انتخاب می کنیم و قسمت Bookmark تمامی اسامی که مربوط به بخش های علامت گذاری شده قرار دارد.

مشخص است اسمی را که برای پخش انتهایی وارد کرده بودیم انتخاب وکار تمام است.

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

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

فتوشاپ (photoshop)

شروع کار:

وقتی برای اولین بار برنامه فتوشاپ را اجرا می کنیم جعبه ابزار Tool box را مشاهده خواهیم کرد که در قسمت چپ صفحه نمایش قرار گرفته است درسمت راست نیز چهار پنجره قرار دارد عنوان منوها نیز در قسمت بالای صفحه نمایش قرار گرفته است.

ایجاد صفحه جدید:

گزینه های File\ New اولین گزینه های موجود در منوی photoshap می باشند با انتخاب آن کادر مکالمه New File باز خواهد شد و نامی که مد نظرتان است را در قسمت بالای کادر مکالمه وارد کنید و یا آن را همانطور بدون نام باقی بگذارد.

اندازه تصویر :

در کادر Image size باید اندازه های تصویر یعنی ارتفاع و پهنای آن را تعیین کنید. در کنار نام واحد اندازه گیری پیکان کوچکی قرار دارد که با کلیک کردن روی آن نوعی منوی کرکره ای باز می شود در این منو می توانید واحدهای اندازه گیری مورد نظرتان را بیابید.

تفکیک پذیری :

کادر Resolution مربوط به تعداد نقطه های جوهر براینچ (در مورد چاپ) و یا پیکسل بر اینج (درمورد صفحه نمایش کامپیوترهای خانگی) این پارامتر از اهمیت زیادی برخوردار است زیرا کیفیت تصویر را تعیین می کند. هر چقدر کیفیت پذیری بالاتر باشد کیفیت بهتری را به دست می آورد اما حافظه بیشتری را نیز مورد استفاده قرار می دهد حالت رنگ را نیز بروی RGB Color تنظیم می کنیم.

حالت رنگ RGB همان حالت رنگی است که مانیتور مورد استفاده قرار می دهد.

نکته: اگر در نظر دارید تصویر خود را بر روی وب منتشر کنید تفکیک پذیری بالاتر از 72 نقطه بر اینچ فقط نوعی هدر دادن پیسکل ها می باشد. کامپیوترها نمی توانند تصویرهایی با تفکیک پذیری بالاتر را نشان دهند.

بعد از اجرای آن در کادر مکالمه New File پنجره جدیدی را مشاهده خواهید کرد.

جعبه ابزار:

جعبه ابزار (Tool box) مانند کار یا جعبه رنگ است یعنی ابزارهای مورد نیاز برای ترسیم یا رنگ آمیزی – پاک کردن و سایر عملکردهایی که میتوان بر وی یک تصویر انجام داد. چهار نوع ابزار در جعبه ابزار وجود دارد.

· ابزارهای انتخاب (selection Tools)

· ابزارهای رنگ آمیزی (painting Tools)

· ابزارهای اختصاصی برای کار با متن، رنگ و سایر خصوصیات تصویر.

·ابزارهای مشاهده

نکته: درگوشه پایین و راست آیکون بعضی از ابزارها مثلث کوچکی و سیاه رنگی وجود دارد یعنی منویی که از آن بیرون می آید می توان ابزارهای مشابه دیگری را نیز یافت.

ابزارهای انتخاب :

در قسمت بالای جعبه ابزار گروهی از ابزارها قرار دارند که ابزارهای انتخاب (selection Tools) نامیده می شوند این ابزارها برای انتخاب تمام یا قسمتی از تصویر مورداستفاده قرار می گیرند. سه ابزار در این گروه قرار دارند که عبارتند از :

· ابزار محدوده انتخاب (Marquee Tool)

·ابزار کمند (Lasso Tool)

· ابزار عصای جادویی (Magic wand Tool)

ناحیه انتخاب شده به این صورت مشخص می گردد که کناره های آن بصورت چراغهای متحرک روشن و خاموش می شود. برای انتخاب شی ها باید ابزار محدوده انتخاب (Magic wand Tool) و ابزار کمند (Lasso Tool) را کلیک کنید و سپس آنها را بر روی بخش مورد نظر از تصویر بکشید.

ابزار چهارم دوربین ابزارهای انتخاب در واقع ابزارهای انتقال (Move Tool) می باشد بعد از انتخاب بخش مورد نظر خود برای انتقال آن به محلی دیگر از صفحه باید ابزارهای انتقال Move Tool)) را مورد استفاده قرار دهید.

ابزارهای رنگ آمیزی:

در مجموعه ابزارهای رنگ آمیزی (Tools painting) ابزار رنگ پاش (Aribrush Tool)، ابزار قلم مو (paint Beush Tool) ، ابزار مداد (pencil Tool) ، ابزار مهر لاستیکی (Rubber stamp Tool) قرار دارند تمام این ابزارها به شکلی رنگ را به تصویر اضافه میکنند یعنی درست مانند ابزارهای واقعی می توان اندازه این سه ابزار را تغییر داد.

تصویر را محو یا واضح تر می کنند بعضی تصویرها را طوری تغییر می دهند که شبیه نقاشی رنگ شده با مداد رنگی یا شکلهای فضایی ایجاد شده با لامپ نئون در می آیند.

منوی view :‌

این منو مانند ابزارهای بزرگنمایی (Tool zoom) این امکان را برایتان بالاخره ابزارهایی نیز وجود دارند که تصویر را انتقال می دهند آن را محو یا واضح تر می کنند Sharpen Tool)) ، ابزارهای لکه (Smudge Tool)، ابزار کاهش نوردهی (Dodge Tool) ، ابزار افزایش نوردهی (Tool Burn)، ابزارهای اسفنج (Sponge Tool) را نام برد.

ابزارهای مشاهده :

دو ابزار مشاهده وجود دارند که عبارتند از ابزار دست (Hand Tool) و ابزار بزرگنمایی ابزار (Zoom Tool) بصورت ذره بین های قدیمی می باشد و ابزار Hand Tool نیز شبیه دست می باشد. ابزار بزرگنمایی این مکان را برایتان فراهم میکند که با کلیک کردن آن بر روی بوم نقاشی بخش مورد نظر را برای مشاهده بزرگتر کنید و اگر هنگام کلیک کردن روی ابزار مربوطه کلید Alt را فشار دهید بخش مزبور کوچکتر خواهد شد. معمولا با بزرگ کردن تصویر دیگر نمی توان تمام قسمت های آن را در صفحه نمایش مشاهده کرد در این حالت ابزار دست (Hand) به کمکتان می آید و تصویر را در پنجره فعال حرکت می دهد.

ابزارهای اختصاصی :

این ابزارها کارهای مختلف و مفیدی را انجام می دهند.

حرف T نشان دهنده ابزار تایپ می باشد. با این ابزار می توان کاراکترهای مورد نظر را روی تصویر تایپ کرد. ابزارهای قلم مو مسیرهای ترسیم می کند. این ابزار ها را می توان برای ترسیم خط یا شکل مورد استفاده قرار داد مزیت این ابزار این است که وقتی خط یا شکل را با استفاده از آن ترسیم کنیم می توانیم ابزارهای بزیه (Bezieh) را برای ایجاد تغییر شکل در آنها استفاده قرار داد.

مسیرها را می توان به عنوان ابزارها انتخاب (Selection Tool) یا ابزار ترسیم (Drawing Tool) بکار برد.

ابزار اندازه گیری (Measure Tool) را می توان برای اندازه گیری ابعاد و زاویه های موجود در شکلها به کار برد.

ابزار نوانس (Gradient) امکان سایه زدن پس زمینه را برایمان فراهم می کند به طوری که رنگ آن به تدریج تغییر کند و به رنگ دیگری تبدیل شود و یا حتی نوعی رنگین کمان ایجاد کند.

ابزار سطل رنگ (Paint Bucket) نیز ناحیه انتخاب شده را رنگ می کند.

ابزار قطره چکان (Eyedroper Tool) از رنگی که بر روی آن کلیک کنیم نمونه برداری می کند و آن را به رنگ فعال تبدیل می کند.

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

منوها :

منوی Image :

این منو از چندین منوی دیگر تشکیل شده است که زیر گروه آن می باشد. اولین مورد منوی Mode می باشد با استفاده از این منو می توان یکی از حالتهای رنگ (modes color) می باشد با استفاده از این منو می توان یکی از حالتهای رنگ (Modes color) را برای کار انتخاب کرد. در بیشتر موارد با حالت RGB کار خواهید کرد. زیرا مانیتور این حالت را نشان می دهد.

منوی Image ابزارهایی برای تنظیم رنگ، تنظیم رنگ تنظیم روشنایی و نور تصویرتان را نیز در بر دارد. برای بزرگ و کوچک کردن تصویر و یا چرخاندن آن حول یکی از کناره هایش باید به ترتیب از منوی Image / size و Image / Rotate Canvas استفاده کنید.

منوی Layer :

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

منوی Layer کادرهای مکالمه ای را باز می کند که از طریق آنها می توان لایه های جدیدی را ایجاد کرد علاوه بر این دستورهایی برای ادغام (Merge) و یا کار با آنها را نیز در بر دارد.

منوی Selection:

منوی Selection با ابزارهایی کار می کند که امکان اایجاد تغییراتی اصلاحی درمنطقه انتخاب شده را برایمان فراهم می کند.

منوی Filter :

فیلترها ابزارهایی هستند که برنامه فتوشاپ را جالب تر می کنند بعضی از آنها فراهم می کند که تصویر را بزرگ و کوچک کنید. در این منو دستورهای خط کش Ruler و شبکه Grid نیز وجود دارد که با کمک آنهامی توان شی ها را به صورت دقیق اندازه گیری کرد و درمحل صحیح قرار داد.

معرفی نرم افزار Flash

نرم افزار فلش یکی از تواناترین و پیشرفته ترین نرم افزارهای موجود در زمینه طراحی ساخت و ویرایش تصاویر و متحرک سازی کامپیوتری می باشد. این نرم افزار همچنین می تواند در زمینه تولید و طراحی پیشرفته وب مورد استفاده قرار می گیرد.

منوهای فلش :

منوی File:

name: یک صفحه جدید باز می شود.

open: پنجره انتخاب شده مورد نظر را باز می کند .

close: بالاترین صفحه ای که باز است را می بندد.

save: صفحه را ذخیره می کند.

save as: با سئوال نام و مکان ذخیره صفحه را ذخیره می کند.

import: می توان یک عکس را وارد صفحه ذخیره کرد.

pulishsetting: صفحه را به صورت ذخیره می کند.

exit : برای خروج از فلش استفاده می شود.

منوی Edit:

undo : با هر بار زدن این گزینه یک عمل به عقب بر می گردد.

Cut: شکل یا قسمت انتخاب شده را پاک کرده تا جای دیگری ظاهر شود.

چکیده:

در این پایان نامه سعی شده است تا به شرح سایت شرکت به سبا بپردازیم.

ودر ابتدا یک سری توضیحات در مورد نرم افزار های مورد استفاده که در طی انجام پروژه با آنها کار کردیم گفته شده است .که از نرم افزار Flash Photoshop,Swish,Frontpage برای طراحی صفحات واز Php وبانک اطلاعاتی my sql برای پویا سازی سایت استفاده شده است.

وبعد به توضیح ساختار سایت وپیاده سازی سایت پرداختیم واینکه در هر صفحه از چه نرم افزارهایی واینکه هر قسمت از صفحه چگونه ساخته شده است.

مقدمه :

مکاتب الهی ودر راس آنها اسلام انسان ساز را موجودی پویا وکمال طلب می دانند.از نظر اسلام انسان در حال تکامل است وجهت گیری او به سوی خدای تبارک وتعالی است.ویکی از راههای تقرب به ذات اقدسش علم است.

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

درچنین شرایطی که همراهی با قافله پر شتاب فن آوری های رایانه ای به امری کلیدی در مسیر توسعه وپیشرفت کشور تبدیل شده لزوم ایجاد تغییر در شیوه های آموزشی و همگام کردن آن با آخرین یافته های علمی ضروری به نظر می رسد.

براین اساس شرکت تعاونی خدمات بهداشتی ودرمانی بهداشت گستر سبحان آرین (به سبا )که یک شرکت خدمات بهداشتی ودرمانی است برآن شد که در جهت به اطلاع رساندن طرح ها وپروژه های تحقیقاتی وبرگزاری دوره های آموزشی خود و ثبت نام از متقاضیان به صورت on line از ما تقاضا کردند که یک سایت پویا برایشان طراحی کنیم.

که بر این اساس متقاضیان بتوانند دراتلاف وقت کمتر وراحتتر در هر کجا که باشند از خدمات جدید وکلاسهای آموزشی جدید بهره مند شوند.

که برای انجام این پروژه از نرم افزار های Frontpage ,Flash ,Swish ,Photoshop برای طراحی سایت واز PHP برای برنامه نویسی و با بانک اطلاعاتی mysql استفاده کردیم.

اهداف واهمیت:

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

هدف دیگر این است که از طریق این سایت می توانند دسترسی به سایت های مفید آموزشی داشته باشند . که اینکار از طریق رفتن به صفحه اخبار می باشد.

وامکان مفید دیگر برای مدیر شرکت ایجاد کردیم وآن این است که مدیر می تواند با وارد کردن user name ,password مورد نظر خود به بانک اطلاعاتی دست یابند واز این طریق لیست تمامی ثبت نام کنندگان وتاریخ ثبت نام واینکه در چه درس های ثبت نام کرده اند را ببیند.

ابزار ها :

در این سیستم از کد نویسی PHP4 برای طراحی وپویا سازی صفحات استفاده شده است. البته در برخی موارد از PHP5 که ورژن جدید این برنامه است استفاده شده است.

و به منظور ذخیره اطلاعات وذخیره بانک ها از بانک اطلاعاتی my sql استفاده شده است.

وطراحی ظاهر صفحات به وسیله نرم افزار Frontpage وکارهای متحرک وساخت بنر متحرک به FLASH , SWISH , Photoshop انجام شده .البته از Photoshop هم برای برش عکس ها وطراحی بنر استفاده شده است.

ساختار کلی سایت :

صفحه اول سایت با نام index.htm تماما با flash طراحی شده است که صفحه اصلی سایت می باشد . واز این صفحه لینک های اصلی شروع می شود .

صفحه اخبار پزشکی ومعرفی شرکت ومعرفی هئیت علمی ومعرفی مدیران صفحات طراحی شده با Frontpage هستند وبرنامه نویسی ندارند.

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

ساختار پایان نامه :

در فصل دوم به توضیح ونحوه کار کرد نرم افزارهای مورد استفاده که در مدت پروژه با آنها کار کردیم پرداخته شده . واینکه هر نرم افزار چه ساختاری دارد و چه کارهای با آن انجام میدهند.

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

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

معرفی نرم افزار Frontpage

ایجاد یک صفحه سایت

در ابتدا باید مشخصات اولیه صفحه را بدانیم اگر بخواهیم یک صفحه با قاب داشته باشیم در این حالت از منوی File زیر منوی New را انتخاب کرده و سپس در سربرگ Frames page مورد نظر را انتخاب می کنیم.

در این صورت با دو پیغام مواجه می شویم:

پیغام اول New page است که در آن یک صفحه جدید در مکان مورد نظر باز می کند و دومی Set initial page در قسمت باز شده آدرس صفحه و یا تصویر مورد نظر را مشخص کرده و در صورتی که بخواهیم بدون قاب باشد در این صورت مثل قبل از منوی File زیر منوی New را انتخاب کرده سپس در سربرگ Genereal مدل Normal page را انتخاب می کنیم.

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

ابتدا کلیک راست کرده گزینه background را انتخاب می کنیم سپس قسمت background را انتخاب کرده رنگ زمینه را انتخاب می کنیم برای تمام صفحات همین کار را می کنیم برای تغییر و انتخاب فونت دلخواه نیز به همین صورت راست کلیک کرده و گزینه فونت را انتخاب می کنیم.

عمل بعدی ساختن کلید می باشد که به چند صورت صورت می گیرد:

یکی با استفاده از hover button که به این صورت است: از منوی بالای صفحه گزینه insert سپس گزینه Componet و بعد از آن گزینه button hover را انتخاب می کنیم و تنظیمات لازم را انجام می دهیم. روش دیگر برای ساخت کلید در فرانت پیج به این صورت است که یک نوشته یا یک شکل داخل یکی از صفحات خود می آوریم و آن را انتخاب می کنیم بعد انتخاب شکل یا نوشته روی آن راست کلیک می کنیم و گزینه Hyperlink را انتخاب می کنیم سپس با دادن آدرس مناسب آن را به صفحه مورد نظر لینک می کنیم.

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

برای اینکه یک عکس را از یک محیط به محیط دیگر بیاوریم لازم است که آن را به سایز دلخواه در آوریم. که این مورد با استفاده از نرم ا فزار Fotoshop صورت می گیرد که توضیحات بیشتر را در این رابطه به فصل بعدی واگذار می کنیم.

روش اول به صورت زیر می باشد ابتدا عکس را که در یک محیط انتخاب می کنیم و یا عمل کپی کردن و آمدن به صفحه وب و انجام عمل paste عکس مورد نظر را انتقال می دهیم.

روش بعدی که می توانیم یک عکس را به محیط فرانت پیج می آوریم این است که از منوی بالای صفحه گزینه insert را انتخاب می کنیم منوی دیگری باز می شود که از میان آنها گزینه picture را انتخاب می کنیم این گزینه دو حالت دارد که ما گزینه ای که From file می باشد را انتخاب می کنیم که در آن آدرس عکس مورد نظر از ما خواسته می شود با انجام این کار عکس مورد نظر در مکانی که انتخاب کرده ایم منتقل می شود.

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

ساختن صفحه وب با استفاده از الگو:‌

الگوهای سایتهای وب پیش ساخته ای است که می توان آنها را تغییر داد.

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

از منوی فایل New را انتخاب می کنیم سپس گزینه Customer support web را انتخاب می کنیم ، فرانت پیج از الگوی وب پشتیبانی مشتریان استفاده می کند و بر مبنای آن یک سایت وب جدید را می سازد.

ایجاد جدول (Table)

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

اگر بخواهیم بعد از ایجاد جدول در آن تغییری بوجود بیاوریم می توانیم با کلیک راست روی جدول و انتخاب گزینه Properties Table رنگ جدول ، رنگ پیش زمینه جدول، سایز خطها را تغییر داد. البته اگر بخواهیم به یک سلول جدول سطر یا ستونی اضافه کنیم می توان انتخاب آن خانه و کلیک راست کردن بر روی آن و انتخاب گزینه Insert Row یا Insert clos و با وارد کردن تعداد مورد نظر در باکس باز شده ایجاد کرد و یا حتی می توان دو سلول جدول را یکی کرد برای اینکار با بلوک کردن خانه های مورد نظر و کلیک راست بر روی آنها و انتخاب گزینه Merge cells می توان اینکار را انجام داد.

با انتخاب زیر فهرست page setup از منوی File می توان در باکس مربوطه برای جدول خود Margine Header - Footer را تعریف کرد و یا حتی می توان با انتخاب گزینه draw table از منوی Table می توان نسبت به ا عمال زیر اقدام کرد:

کشیدن خطوط یا اضافه کردن سطر یا ستون به جدول با استفاده از draw table یا گزینه مداد- پاک کردن خطوط با استفاده از - eraser تقسیم کردن هر سلول جدول به تعداد سطرها و ستونهای دلخواه (split cell)- فشرده کردن سلول های جدول نوع قرار گرفتن متن در جدول – ازدیاد طبقات جدول …….

اگر بخواهیم خط های جدول یا border های آن مشخص نباشد به روش زیر عمل می کنیم.

در این حالت خط های جدول وجود دارند ولی دیده نمی شوند. ابتدا روی جدول کلیک راست کرده و گزینه Properties Table را انتخاب می کنیم و تنظیمات مربوط به جدول را از جمله رنگ زمینه و حاشیه را انجام می دهیم.

سپس در قسمت border گزینه size را صفر می کنیم که در این صورت خطهای جدول حذف می شوند و اگر عدد دیگری وارد کنیم قطر این خطوط را نشان می دهد.

بهبود سایت با استفاده از تصویر

ما برای جلب توجه بینندگان گاهی اوقات مجبور به استفاده از تصاویر هستیم. با استفاده از Frontpage می توان عناصر مختلف گرافیکی نظیر قطعات هنری (clip art) فایلها تصویری و …. را در صفحه جای داد. استفاده از سمبل ها نیز در تحقق این امر به ما کمک می کند.

الف ) زیر فهرست symbol

از منوی insert گزینه symbol را انتخاب و در باکس مربوطه در قسمت مورد نظر سمبل خود را انتخاب و سپس Insert می کنیم.

ب ) زیر فهرست picture

از منوی Insert زیر منوی picture را انتخاب و در باکس مربوطه آدرس عکس را وارد کرده، باکس مربوطه شامل قسمت Form file , clip art می باشد که بسته به نوع انتخاب ما مبنی بر اینکه از عکسهای پیش فرض محیط (استفاده از قاب عملیاتی Insert clip art در استفاده از قطعات هنری معمولی ) استفاده کنیم یا از بانکی دیگر حاوی تصاویر گرافیکی دلخواه در زمینه طراحی سایتهای وب به ترتیب قسمتهای بالا را انتخاب می کنیم.

جهت ویرایش تصاویر می توان از میله ابزار pictures استفاده نمود.

ابتدا با استفاده از دکمه Insert picture format file در باکس picture عکس مورد نظر را انتخاب و سپس روی عکس کلیک می کنیم تا انتخاب شود. در این حالت میله ابزار picture فعال است و می توان ویرایش را شروع کرد. از دکمه Tect برای ایجاد یک جعبه متن در محدوده تصویر استفاده می شود. از دکمه Auto thumbnial برای ایجاد یک نسخه کوچکتر استفاده می شود.

از دکمه هایsend backward و Forward bring , position absolutely برای کنترل موقعیت تصویر در ارتباط با عناصر دیگر صفحه استفاده می شود. از دکمه های Rotate و Rotate right و flip horizontalو flip vertical برای چرخاندن و یا معکوس کردن تصاویر استفاده می شود.

از دکمه های More contrasrt و More brightness و Less brighness برای افزایش و یا کاهش روشنایی و یا تضاد تصویر انتخاب شده استفاده می شود. از دکمه corp برای بریدن تصویر از دکمه Bevel برای برجسته کردن لبه های تصویر از دکمه Resample برای اصلاح موقعیت تصویر استفاده می شود.

جهت ویرایش متن می توان از میله ابزار Word art استفاده نمود. انواع فونتها با رنگهای مختلف در باکس Wordart gallery می تواند ما را در تحقق این امر یاری رساند.

متحرک سازی

برای متحرک سازی نوشته های داخل فرانت پیچ که جلوه جالبی به صفحات می دهد می توان از منوی بالای صفحه گزینه view سپس گزینه Toobars سپس گزینه Dhtml Effects را انتخاب کرده تنظیمات بعدی را به دلخواه انجام می دهیم برای دیدن نوشته متحرک قسمت preview فرانت پیج را فعال می کنیم تا بتوانیم نوشته فعال شده خود را مشاهده کنیم. این قسمت قابلیتهای دیگری نیز دارد که با امتحان گزینه ها آنها را در می یابیم .