پروژه طراحی سایت شرکت به سبا

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

فهرست

چکیده:   ۱
مقدمه :   ۳
ساختار کلی سایت :   ۵
ساختار پایان نامه :   ۵
معرفی نرم افزار Frontpage   ۷
ایجاد یک صفحه سایت   ۷
ایجاد جدول (Table)   ۹
بهبود سایت با استفاده از تصویر   ۱۱
فلش در فرانت پیج   ۱۳
جاری صفحه در حرکت   ۱۳
فتوشاپ (photoshop)   ۱۴
اندازه تصویر :   ۱۵
تفکیک پذیری :   ۱۵
جعبه ابزار:   ۱۶
ابزارهای انتخاب :   ۱۶
ابزارهای رنگ آمیزی:   ۱۷
منوی view :‌   ۱۸
ابزارهای مشاهده :   ۱۸
ابزارهای اختصاصی :   ۱۸
منوها :   ۱۹
منوی Image  :   ۱۹
منوی Layer :   ۲۰
منوی Selection:   ۲۰
منوی Filter :   ۲۰
معرفی نرم افزار Flash   ۲۱
منوی File:   ۲۱
منوی text :   ۲۳
جعبه ا بزار (tool box):   ۲۴
تنظیم مشخصات اجسام تو پر :‌   ۲۵
ایجاد نمودن symbols  :   ۲۵
ایجاد کردن symbol  به دو روش :   ۲۶
ایجاد یک سمبل کلید :   ۲۷
کتابخانه ( library) :   ۲۹
لایه ها  (layer):   ۲۹
حذف نمودن یک لایه :   ۲۹
انواع لایه ها :   ۳۰
برای ایجاد یک ماسک :   ۳۰
استفاده از پانل Action:   ۳۵
دستیابی به پانل Action:   ۳۵
مقدمه  swish:   ۳۶
طراحی وپیاده سازی سایت   ۴۴
Login.php   ۴۴
Sabtenam.php   ۴۴
p-1 ) صفحه اصلی   ۴۵
توضیحاتی راجع به سایر صفحات :   ۴۶
MYSQL    :   ۴۷
روابط بین جداول :   ۴۹
دستورات  data management  :   ۵۲
سایر دستورات  data managment  :   ۵۴
توابع عددی رایج در  sql عبارتند از :   ۵۵
الحاق جدولها :   ۵۵
تعریف آرایه دو بعدی :   ۵۸
پاک شدن کل فایل :   ۶۰
کدهای صفحات مهم :   ۶۱
تصاویر صفحات مهم وکدهای مربوط به ان   ۶۵
کدصفحه آموزش :   ۶۶
منابع ومراجع   :   ۷۷

منابع ومراجع   :

۱٫ cadenHead  Rogers , Frontpage 2000 ومترجم: محمد نوروزی ,انتشارات ناقوس

۲٫مهندس حبیب فروزنده ومهندس سید سعید حسینی وFrontpage 2003  , انتشارات عابد

۳٫Katherine Ulrich  , Flash 5 , مترجمین :دکتر بابک ماضی ودکتر پیمان نیلفروش

۴٫ رنگین کمان حمید رضا, راهنمای سریع ویژوال swish 2/0 , انتشارات ناقوس, ۱۳۸۲ , چاپ اول

۵٫ اکبری بهزاد , برنامه نویسی کاربردی روی سرویس دهنده وب,  انتشارات ناقوس

۶٫ مسعود شباهنگ , Photoshop 7 ME   , انتشارات روزنه

چکیده:

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

ودر ابتدا یک سری توضیحات در مورد نرم افزار های مورد استفاده که در طی انجام پروژه با آنها کار کردیم گفته شده است .که از نرم افزار 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  می تواند ما را در تحقق این امر یاری رساند.