پروژه کارآموزی طراحی سایت

مقدمه:

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

     برنامه Front Page به عنوان یکی از نرم افزارهای موجود در بسته نرم افزاری Microsoft Office اولین با در سال 1997 به همراه این مجموعه با بازار عرضه شد و در طول این سالها شاهد تغییرات فراوانی در جهت افزایش قابلیت های آن بوده ایم . به طوری که امروزه به عنوان متداولترین ابزار برای تولید و ویرایش فایل های HTML و صفحات وب شناخته می شود و بسیاری از طراحان ترجیح می دهند برای بالا بردن کیفیت و کارایی صفحات وب خود از توانایی گسترده این نرم افزار بهره ببرند.

نکاتی در مورد Front Page :

وسیله ای جهت ایجاد صفحات وب

2- ابزاری برای مدیریت وب سایت

3- وسیله ای جهت نشر وب سایت

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

HTML      که سرنام Hypertext Markup language می باشد یک زبان نشانه گذاری از زیر مجموعه های SGML است که جهت ایجاد مستندات فوق متنی و فوق رسانه در شبکه جهانی وب مورد استفاده قرار می گیرد. این مستندات متنی ، تصاویر ، صدا ، ویدئو و فوق پیوندها را شامل می شوند .
 پیوندها ارتباطات فوق متنی هستند که در یک صفحه وب گنجانده شده اند و این امکان را برایتان فراهم می سازند که از یک صفحه وب به یک فایل یا صفحه وب دیگر منتقل شوید .

فصل اول:

       مقدمات ایجاد یک وب سایت
       نحوه ی طراحی کردن یک Page

 

مقدمات ایجاد یک وب سایت :

     می خواهیم یک وب سایت طراحی کنیم . هنگام ورود به محیط Front Page صفحه ای باز می شود که در قسمت راست صفحه منویی با عنوان New Page مشاهده می شود . چنانچه این منو باز نبود به روش زیر عمل می کنیم :
     ابتدا منوی File را باز کرده بر روی گزینه ی New کلیک کنید ، از منویی که باز می شود گزینه ی One Page Web Site را انتخاب نمایید .
     پنجره ای با عنوان Web Site Templates باز می شود که شامل سه منوی General ، Package و Share Point Services می باشد . هدف ما آنست که صفحه ای از پیش طراحی نشده ایجاد نماییم . یعنی تمام اجزای صفحه را بصورت دستی و بر حسب سلیقه ی شخصی طراحی کنیم . پس از منوی General گزینه ی Empty Web Site را انتخاب می نماییم .

     بعد از انتخاب این گزینه لازم است یک وب فولدر ساخته شود تا تمامی فایلها و تصاویر در آنجا بصورتی منظم ذخیره گردد . پس در مکان مورد نظر یک فولدر با نامی با مسمی ایجاد کنید . سپس بعد از آنکه گزینه ی Empty Web Site را انتخاب نمودید در قسمت چپ پنجره بر روی گزینه ی Brows رفته ، مسیر را مشخص کنید ( این مسیر، مسیر همان فولدری است که می خواهید اطلاعات شما در آن قرار گیرد ) حال بر روی کلید Ok کلیک کنید . اگر به محل ساخت فولدر بازگردید مشاهده می کنید که شکل آیکن فولدر تغییر کرده و از بقیه ی فولدر ها مجزا شده است 
تا اینجا یک وب فولدر ساخته ایم .

به منظور سامان دهی اطلاعات در یک فولدر و راحت تر بودن کار با وب فولدر خود و همچنین وب سایت ، تمامی عکسها و تصاویر خود را در فولدر Images ذخیره کنید .

: Page نحوه ی طراحی کردن یک

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

صفحه ی نخست که از آن به عنوان مهمترین صفحه در وب سایت یاد نمودیم را با نام index و یا Default با پسوند html ذخیره نمایید .

فصل دوم :

       کار با جدولها
       توضیحات کار با جدولها

 

کار با جدولها:

     یکی از مهمترین ابزارهای Front Page کار با جدول ها می باشد . برای اینکار از منوی Table گزینه ی Insert و سپس Table را انتخاب کنید.

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

در ذیل به شرح گزینه های مختلف این پنجره می پردازیم :

 قسمت Size :
که شامل دو قسمت Rows و Columns می باشد . این گزینه تعیین کننده ی تعداد سطر و ستونهای جدول می باشد . گزینه ی Rows نشان دهنده ی تعداد سطر و گزینه ی Columns نشان دهنده ی تعداد ستون جدول می باشد .

 قسمت Layout :
این قسمت شامل پنج گزینه می باشد که به شرح تک تک آنها می پردازیم :

a) گزینه ی Alignment :
برای تعیین نوع تراز جدول از این قسمت استفاده می شود . این گزینه شامل چهار عبارت زیر است :
1- Default: جدول را در حالت پیش فرض صفحه قرار می دهد . به عنوان مثال اگر پیش فرض تمام گزینه های صفحه ی شما چپ چین باشد جدول را نیز در سمت چپ قرار می دهد .
2- Left: جدول را در سمت چپ صفحه تراز می کند .
3- Right: جدول را در سمت راست صفحه تراز می کند .
4- Center: جدول را در قسمت وسط صفحه قرار می دهد .

b) گزینه ی Float:
موقعیت متنی که بعد از جدول قرار می گیرد در این قسمت تعیین می شود. معنای لغوی کلمه ی Float شناور بودن است . با این توضیح که Float دارای اولویت نسبت به Alignment می باشد . پس بسته به نوع سلیقه متن بعد از جدول را راست ، چپ و یا وسط چین کنید .

c) گزینه ی Specify width:
تعیین طول و عرض جدول بصورت دستی در این قسمت امکانپذیر می باشد. in pixel تعیین کننده ی معیار اندازه با Pixel و in percent تعیین کننده ی معیار اندازه با درصد می باشد .

d) گزینه ی Cell padding:
معین کننده ی فاصله ی محتوا با کناره های سلول می باشد.

e) گزینه ی Cell Spacing:
برای تعیین فاصله ی بین سلولها با یکدیگر از این گزینه استفاده می شود .

f) گزینه ی Table Direction:
متن درون جدول از چپ به راست قرار بگیرد یا از راست به چپ.

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

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

Cell Properties:
به هر یک از خانه های جدول ترسیمی یک سلول می گویند. اگر در روی سلول مورد نظر راست کلیک کرده و گزینه ی Cell Properties‌را انتخاب کنید ، پنجره ی مخصوص تنظیمات سلول باز می شود.

 قسمت Layout :

 Horizontal alignment:
این گزینه مربوط به طریقه ی تراز کردن افقی محتوای داخل سایت می باشد . که می توان بر حسب دلخواه یکی از گزینه های پیشنهادی را انتخاب کرد .

 Vertical alignment:
برای تراز کردن عمودی محتوای سایت از این گزینه استفاده می شود.

 Rows spanned:
این گزینه برای برابر قرار دادن یک سطر با تعدادی سطر دیگر می باشد. یعنی می توان طول یک سل ( سلول ) را با سل دیگر برابر کرد .

 Column spanned:
برای برابر قرار دادن یک ستون با تعدادی ستون دیگر از این گزینه استفاده می شود.

 Specify Width & height:
برای دادن اندازه به صورت درصد و یا پیکسل می باشند.

 Header cell:
برای Bold‌کردن متن این گزینه را فعال کنید.

 No wrap:
این گزینه برای شکستن متن در سل می باشد. اگر این قسمت فعال نباشد با طولانی شدن متن ، طول سل هم افزایش می یابد .

 قسمت Borders :
color :
برای رنگی کردن خطوط اطراف سل می توان از جعبه ی رنگ ، رنگ دلخواه را انتخاب کرد .

Background:
در صورتیکه بخواهیم رنگ Background یک سل را تغییر دهیم از قسمت جعبه ی رنگ ، رنگ دلخواه را انتخاب می نماییم. اما اگر برای Background سلول مورد نظر بخواهیم از یک عکس خاص استفاده نماییم ابتدا قسمت Use background picture را فعال و سپس بر روی دکمه ی Brows کلیک می کنیم . از مسیر مورد نظر عکس را انتخاب و بر روی دکمه ی ok‌کلیک می نماییم .

فصل سوم :

Frame       توضیحات    
Frame Properties      
 طریقه ی لینک دادن فریمها به یکدیگر       

 

: Frame

Frame      ها یکی از مهمترین مباحث برای طراحی صفحات وب در Front Page می باشد.
برای ایجاد Frame از منوی file گزینه ی New را فعال کرده از منویی که در قسمت راست صفحه باز می شود گزینه ی More Page Template را انتخاب می کنیم زیرا می خواهیم صفحه ای با Frame ها ایجاد کنیم .
پنجره ای باز می شود که با فعال کردن سربرگ Frames Page نوع صفحه بندی را انتخاب می کنیم . فرض کنید که صفحه ای با حالت زیر انتخاب نمودیم :
پس از انتخاب نوع صفحه بندی بر روی دکمه ی Ok کلیک کنید . صفحه ای دقیقا مشابه با همان حالت انتخابی برای شما ایجاد می گردد .
      اگر بخواهید صفحه ای از پیش طراحی شده را باز کنید بر روی گزینه ی Set Initial Page کلیک کنید ، اما چون هدف ایجاد صفحه ای جدید می باشد پس بر روی گزینه ی New Page در هر سه فریم کلیک کنید . صفحه ای با سه قسمت باز می شود . حال باید هر یک از قسمتها را با اسامی با مسمی Save کنیم . چهار قسمت برای ذخیره کردن وجود دارد . یکی قسمت header ( قسمت بالایی ) ، یکی Contents ( قسمت سمت چپ ) ، main ( قسمت اصلی صفحه ) و در نهایت index که هر سه قسمت فوق را در بر می گیرد .

: Frame Properties

اگر در هر یک از فریمهای ایجاد شده کلید سمت راست ماوس را فشار دهید گزینه ای با عنوان frame properties در منوی باز شده مشاهده می شود که مربوط به تنظیمات فریم ها می باشد .
در ذیل به شرح گزینه های این پنجره می پردازیم :
• name : نام فریم
• Initial page :صفحه ی پیش فرض ( مسیر خواندن صفحه از کجا باشد )
• Title : عنوان صفحه
• Frame size : تنظیمات طول و عرض فریم
• Margins : تنظیمات حاشیه ها
• Options : دیگر تنظیمات

 Resizable in browser :
این گزینه مربوط به تغییر اندازه در Browser می باشد بدین صورت که کاربران می توانند اندازه ی فریمها را تغییر دهند . اگر فعال باشد اندازه ی فریمها قابل تغییر و اگر فعال نباشد غیر قابل تغییر می باشد.

 Show Scrollbars:
این گزینه برای انتخاب حالات نمایش Scrollbar می باشد . بدین صورت که اگر متنی طولانی در هر یک از فریمها داشته باشیم می توانیم تعیین کنیم که صفحه Scrollbar داشته باشد یا نه . با انتخاب هر کدام از این گزینه ها عملکرد Scrollbar را تعیین می کنیم :

If needed : اگر نیاز بود Scrollbar نمایش داده شود
Never : هرگز Scrollbar فعال نشود
Always : Scrollbar همیشه فعال باشد

 Frames page :
در صورتیکه بخواهیم خطوط ما بین فریمها را پهن یا نازک کنیم در قسمت Frame Spacing‌عدد دلخواه را وارد می نماییم .

طرقه لینک دادن فریم ها به یکدیگر:

     می خواهیم فرضا دو فریم Contents و main را به یکدیگر لینک بدهیم . در فریم Contents نام یک مبحث را وارد می کنیم ( به عنوان مثال درس 1 ) . متن مورد نظر را ابتدا در یک محیط ویراستار که معمول ترین آن Word‌می باشد تایپ می کنیم و سپس آن متن را در فریم main در Front-page کپی می کنیم . فایلهای Word با Front-page‌همخوانی ندارد . پس لازم است تغییراتی در کد فایل انتقالی از Word ایجاد کنیم .
برای اینکار به روش زیر عمل کنید :

     ابتدا یک صفحه ی جدید در Front-page ایجاد کنید . سپس فایل Word‌را در آن صفحه ‌کپی کنید و در قسمت Code ( قسمت پایین و سمت چپ صفحه سه قسمت با نامهای Normal ، HTML و Preview وجود دارد بر روی قسمت HTML کلیک کنید ) کلید سمت راست ماوس را فشرده گزینه ی Optimize html را انتخاب کنید پنجره ای باز می شود که ضرورت دارد تمامی گزینه های آن مخصوصا گزینه ی Word html‌فعال باشد ، پس از فعال کردن تمام گزینه ها بر روی کلید Ok‌کلیک کنید . مجددا راست کلیک کرده اینبار گزینه ی Reformat html را انتخاب کنید . اینکار باعث می شود که کدهای اضافی که توسط Word ایجاد می شود حذف گردد .