آموزش فرانت پیج (قسمت دوم)

 

ادامه قسمت اول آموزش کار فرانت پیج

گذاشتن تصویر در متن:
به قسمت insertfrom file رفته و عكس مورد نظر را كه در كامپیوتر شما است را با انتخاب در پنجره باز شده در صفحه قرار دهید.همچنین می توانیم از عكسهای clip Art insertهم استفاده کنیم.برای تغییر اندازه عکس روی آن کلیک کرده و بعد از اینکه به حالت انتخاب در آمد گوشه های آن را به وسیله کلیک با ماوس و نگه داشتن آن اندازه آن را تغییر می دهیم.

لینک کردن متن یا عکس و مشاهده آنها:
متن یا عکس مربوطه را در حالت انتخاب قرار می دهیم و سپس روی آن کلیک راست می کنیم و گزینه Hyperlink را انتخاب می کنیم. سپس در پنجره باز شده آدرس صفحه ای که می خواهیم لینک بدهیم را قرار می دهیم.برای مشاهده لینک در خود صفحه front page در قسمت Design برروی لینک مربوطه دکمه ctrl به همراه کلید چپ ماوس نگه دارید تا لینک مربوطه را مشاهده کنید.اما در جایی که صفحه sive شده (در درایوهای computer)چون فایل خود به صورت صفحه اینترنتی است لینک براحتی قابل مشاهده است.

تغییر موقعیت عکس و دادن کادر:
روی عکس کلیک راست کرده و گزینه picture properties را انتخاب نمایید. سپس در زبانه appearance و با تنظیم موارد زیر تغییرات را اعمال کنید.

1)در قسمت wrapping style می توان موقعیت عکس را تعیین کرد.

2)در قسمت layout موارد زیر قابل تنظیم است:

Alignment :
موقعیت عکس را در صفحه تعیین می کند(وسط راست وچپ و….)

Border thickness:
اندازه کادر دور عکس را تعیین می کند.

Horizontal spacing:
فاصله نوشته ها را از سمت راست و چپ عکس تعیین می کند.

Vertical spacing:
فاصله نوشته ها را از سمت بالا و پایین عکس تعیین می کند.

3)در قسمت size موارد زیر وجود دارد.

Width: طول عکس را تعیین می کند.

Height : ارتفاع عکس را تعیین می کند.

تغییرات روی عکس:
برای تغییرات روی عکس و به قسمت viewToolbarpictures بروید.(قبل از انجام کارها عکس را در حالت انتخاب بگذارید برای اینکار یکبار روی عکس کلیک کنید.)این نوار ابزار دارای ابزار شکل زیر است:

معرفی ابزار در نوار ابزار pictures از چپ به راست:

Insert picture from file:
برای قرار دادن یک عکس جدیدبکار میرود.

Text:
برای نوشتن یک متن روی عکس بکار می رود . پس از کلیک روی آن یک کادر برای نوشتن در عکس مورد نظر باز می شود .متن دلخواه را در آن بنویسید و سپس با نگه داشتن ماوس متن را روی عکس جابه جا کرده و به مکان دلخواه ببرید.

Auto thumbnail:
این ابزار برای لینک کردن عکس به اندازه واقعی آن ومکان اصلی آن است.یعنی در این صورت عکس لینک می شود به همان عکس با سایز واقعی.

Position absolutely:
موقعیت عکس را ثابت نگه می دارد.

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

Send backward:
به کمک این ابزار می توانیم یکی عکس را جلوی عکس دیگر قرار دهیم.

: Rotate left 90o
نود درجه 90 درجه عکس را به چپ می چرخاند.

: Rotate right 90o
نود درجه 90 درجه عکس را به راست می چرخاند.

Flip horizontal:
عکس را به طور افقی می چرخاند.(قرینه افقی عکس)

Flip vertical:
عکس را به طور عمودی می چرخاند.(قرینه عمودی عکس)

Contrast more:
اختلاف نور یا شدت فروزندگی را بین قسمتهای مختلف عکس زیاد می کند.

Contrast less:
اختلاف نور یا شدت فروزندگی را بین قسمتهای مختلف عکس کم می کند.

More brightness:
نور عکس زیاد می کند.

Less brightness:
نور عکس زیاد می کند.

Crop:
برای بریدن قسمتی از عکس بکار می رود برای اینکار بعد از انتخاب عکس و کلیک روی ابزار یک کادر در عکس به وجود می آید حال قسمتی از عکس را که نمی خواهیم حذف شود را با فشار روی کلید چپ ماوس با کشیدن آن دور قسمت مورد نظر و زدن دوباره crop آن تکه روی صفحه مانده و بقیه عکس حذف می شود.

Set transparent color:
رنگ پشت عکس را با رنگ یا عکس زمینه همرنگ می کند.(البته در مورد همه عکسها به خوبی انجام نمی شود.)بعد از دن این نوار ابزار ok را زده و سپس روی قسمتی که می خواهید تغییر رنگ دهید ابزار را برده و با ماوس کلیک کنید.

Color:
از این قسمت می توان برای سیاه سفید کردن و wash out(شستن رنگ عکس) استفاده کرد.

Bevel:
از کناره های عکس برای عکس قاب می سازد هر چه روی این ابزار کلیک کنید وضوح کناره عکس که در کادر کمتر می شود.

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

Select:
برای انتخاب عکس و hotspots ها بکار می رود.

Hotspots:
چهار ابزار بعدی hotspots ها هستند که برای انتخاب قسمتی از عکس و لینک کردن آن به صفحه ای خاص به کار می روند.به کمک این ابزار می توان قسمتهای مختلف یک عکس را به صفحات متفاوت لینک کرد.

Restore:
تغیرات عکس را به حالت قبل بر می گرداند.

کشیدن جدول:
برای کشیدن جدول چند راه وجود دارد:

راه اول:
به قسمت Table Tableinsert بروید و در پنجره باز شده :

: Size
در rows تعداد سطر ودر قسمت columns تعداد ستون را وارد کنید.

: Layout
در قسمت table Direction مشخص کنید که خانه های جدول راست نویس باشد یا چپ نویس.

بخش borders :

Size:
در این قسمت می توانیم عرض قاب دور جدول را تغییر دهید.

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

Light border و dark border:
این قسمت برای کادرهایی با دوخط که می خواهیم هر کدام از خطها رنگ به خصوصی داشته باشد استفاده می کنیم و هر کدام از رنگها را در یک کدام قرار می دهیم.(رنگ کمرنگ را در اولی و پررنگ را در دومی قرار دهید تا حالت سایه روشن بگیرد.)

Collapse table border:
این بخش اگر تیک زده باشد کادر جدول دارای یک خط و در غیر این صورت با دو خط خواهد بود.

Background:

Color:
در اینجا می توان background رنگ برای جدول را تعیین کرد.

Use background picture:
اگر تیک زده باشد می توان با کلیک در قسمت browse و دادن آدرس یک عکس background عکس به تصویر داد.

بعد برای تغییرات بعدی با کلیک بر روی style و بعد کلیک روی format و می توانید کارهای زیر را انجام دهید:

Font:
نوع خط سایز و مدل نوشتن آن و رنگ خط راتغییر داد.در این بخش در قسمت effect می توان با انتخاب هریک از موارد تغییری در نوشتن متن داد مثلا متن را زیر خط دار بالا خط دار وسط خط دار کرد یا همه حروف را حروف بزرگ یا همه را با کوچک نوشت.

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

Border:
می توان روی کادر جدول تغییرا داد مانند چیزهایی که در مورد کادر صفحه گفته شد.

Position:
موقعیت جدول در صفحه را مشخص می کند.

راه دوم:
به قسمت Tabledraw table بروید و در پنجره باز شده با کلیک روی draw table (شکل آن یک مداد روی جدول است.)یک مداد در اختیار شما داده می شود به کمک آن می توان جدول را به هر صورتی که می خواهیم بکشیم.در این قسمت علامت پاک کن برای پاک کردن هر کدام از خطهای جدول است.

نکته:بعداز کشیدن جدول هم می توان با رفتن به قسمت با کلیک راست برروی جدول و رفتن به قسمت table properties می توان موارد بالا را مجددا تغییر داد.

تغییرات در جدول :

راه اول:
برروی جدول مربوطه کلیک راست کنید با گزینه insert rows یک سطر و با کلیک برروی insert columns یک سلول به جدول اضافه کنید. برای اضافه کردن یک خانه به جدول گزینه split cells خانه را به دو قسمت تقسیم کنید.

راه دوم:
از قسمت Tableinsert و قسمتor columns rows تعداد سطر یا ستون را افزایش داد برای اینکار در پنجره باز شده اگر می خواهیم ستون اضافه شود دکمه columns را بزنید و اگر می خواهید ستون در سمت چپ ستون مورد نظر درست شود گزینهleft of selection و و اگر می خواهید ستون در سمت راست ستون مورد نظر درست شود گزینه right of selection می زنیم و اگر می خواهیم سطر اضافه شود دکمه rows را بزنید و above selection یک سطر مانند سطری که در آن هستیم در بالا ی ستون مورد نظر می سازد و below selection یک سطر مانند سطری که در آن هستیم در پایین ستون مورد نظر می سازد.همچنین در cell Tableinsert و یک خانه به سطری که در آن هستیم اضافه می کند.

طراحی صفحه:

به قسمت layout tables and cells… را در بخش table انتخاب می کنیم و بعد از انتخاب در قسمت راست صفحه یک پنجره باز می شود که در آن در قسمت پایین قالبهایی برای صفحات وجود دارد.یکی از آنها را انتخاب کنید حال برای تغییر هر کدام از نظر اندازه یا حذف یک سل از آن روی cell ای که می خواهیم تغییر دهیم کلیک کنید تا در حالت انتخاب در آید. بعد برای حذف سل از روی صفحه کلید backspace را فشار دهید سل انتخاب شده حذف می شود و برای تغییر اندازه سل هم بعد از انتخاب سل مورد نظر ماوس را روی آن می گذاریم مکان نمای ماوس که به صورت دو جهته در آمد می توانیم اندازه سل مورد نظر را با فشار دکمه ماوس تغییر دهیم.

تغییرات در داخل سلها:سلی را که می خواهیم تغییر دهیم را در حالت انتخاب قرار می دهیم سپس روی آن کلیک راست کرده و cell formatting را انتخاب می کنیم حال قسمت مربوط به cellformatting در قسمت راست صفحه باز می شود .

این بخش دارای 4 قسمت زیر است:

layout tables and cells(۱ :که قبلا توضیح داده شد.

Cell properties and border(۲:که دارای بخش های زیر است.

الف) بخش cells properties layout

: width
عرض سل انتخاب شده را مشخص می کند.

Height:
ارتفاع سل رامشخص می کند.

Padding:
فاصله محتویات داخل سل را از کناره های سل تعیین می کند.

: valign
مشخص می کند متن در کجای صفحه نوشته شود بالا یا پایین و یا در وسط سل.

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

Bgcolor:
می توان با آن رنگ background سل انتخاب شده را تعیین کرد.

ب) بخش borders

این بخش برای به وجودآوردن حاشیه در دور سل مورد نظر است.

: width
عرض حاشیه را در سل انتخاب شده مشخص می کند.

Color:
رنگ حاشیه را تعیین می کند.

Apply:
تعیین می کند کدام یک از چهار طرف دارای حاشیه باشد.

ج) بخش margins

Left:
فاصله محتویات داخل سل از چپ را تعیین می کند.

top:
فاصله محتویات داخل سل از بالا را تعیین می کند.

right:
فاصله محتویات داخل سل از راست را تعیین می کند.

bottom:
فاصله محتویات داخل سل از پایین را تعیین می کند.

3)cell header and footer:
در این قسمت با زدن تیک در کنار header show سل مورد نظر دارای سر صفحه و با تیک در کنار show footer دارای پاصفحه خواهد شد.هریک از این قسمتها دارای بخش های زیر است.

Height:
ارتفاع سر صفحه یا پا صفحه رامشخص می کند.

Padding:
فاصله نوشته ها را از کناره های سر صفحه یا پا صفحه تعیین می کند.

: valign
مشخص می کند متن در کجای صفحه نوشته شود بالا یا پایین و یا در وسط سل.

Bgcolor:
می توان با آن رنگ background سر صفحه یا پا صفحه را تعیین کرد.

Border width:
عرض حاشیه را در سر صفحه یا پا صفحه مشخص می کند.

4) cell corners and shadows:

الف)بخش corners:در این بخش می توان به سل مورد نظر کناره داد.

Use default image:
اگر این دکمه علامت زده باشد فقط کناره های که در apply علامت خورده دارای گوشه های منحنی می شود.و در این صورت بخشهای colorو border color فعالند که به کمک آنهابه ترتیب می توان رنگ کادر و رنگ زمینه corner را مشخص کرد.

Use custom image:
اگر این دکمه علامت زده باشد فقط کناره های که در apply علامت خورده دارای گوشه های با عکس انتخابی در قسمت browse می شود.

: width
عرض منحنی یا عکس را مشخص می کند.

Height:
طول منحنی یا عکس را مشخص می کند.

ب)بخش shadows:این بخش هم مشابه corner است.

گذاشتن فلش:

insertpicturemove in flash formaبه قسمت t رفته سپس در پنجره باز شده فلش مورد نظر را از داخل کامپیوتر پیدا کرده و روی آن کلیک کنید حال به قسمت preview رفته نتیجه را مشاهده کنید.

گذاشتن فیلم:

به قسمت insertpicturevideo رفته سپس در پنجره باز شده فیلم مورد نظر را انتخاب کنید معمولا اولین صحنه فیلم روی صفحه ظاهر می شود برای دیدن فیلم باید به قسمت file preview in browse رفته وبا انتخاب یکی از گزینه ها فیلم در آن صفحه ای به آن ابعاد نشان داده می شود.

نکته:این فیلم باید دارای یکی از پسوندهای aviو asf و ram و ra و mpeg و mov و یا qt باشد.

گذاشتن متن متحرک:

به آدرس insertweb component بروید.سپس در پنجره باز شده گزینه dynamic effect را انتخاب کنید در سمت راست صفحه گزینه Marquee را انتخاب کنید.سپس در پنجره مورد نظردر قسمت text متن مورد نظر را تایپ کنید.این پنجره دارای موارد زیر است.

Direction:نشان دهنده این است که متن از راست به چپ حرکت کند(left )یا از چپ به راست(right)

نکته :برای گذاشتن متن متحرکی که از بالا به پایین یا از پایین به بالا حرکت می کند ابتدا Marquee رابه روش گفته شده درست کنید و آن را در حالت انتخاب قرار دهید سپس به قسمت کد در صفحه فرانت پیج بروید "direction="down را در تگ Marquee اضافه کنید با این کار متن از بالا به پایین و با مساوی قرار دادن مقدار فوق با "up" از پایین به بالا حرکت می کند.

Seed:
مشخص کردن سرعت و زمان تاخیر

Behavior:
نشان دهنده رفتار Marquee است.

1) Scroll:
متن متحرک مرتب به صفحه وارد و از آن خارج شود.

2)slide:
متن متحرک از وارد شود و بعد از حرکت در انتهای یا ابتدای (بسته به انتخاب Direction ) خط متوقف شود.

3)alternate:
متن در خط مورد نظر از چپ به راست و از راست به چپ مرتب حرکت کند و نه داخل ونه خارج شود.

Size:
متن مورد نظر در چه سایزی ازصفحه (از نظر عرض و ارتفاع ) حرکت کند. این اندازه ها می تواند به صورت درصدی از صفحه (in percent) یا پیکسل (in pixels) مشخص شوند.

Repeat:
تعداد دفعات تکرار حرکت را نشان می دهد اگر می خواهیم متن همواره به طور متحرک بالای صفحه حرکت کند گزینه continuously را علامت بزنید در غیر این صورت تعداد دفعات تکرار را در قسمت time مشخص کنید

Background color:
رنگ پشت زمینه متن متحرک را مشخص می کند.

Style:
برای دادن تغییرات دیکر مثل رنگ و فونت خط و … روی آن کلیک کرده سپس در پنجره باز شده روی format کلیک کرده و گزینه های مورد نظر را تغییر دهید.

متوقف شدن حرکت متن متحرک با رفتن ماوس روی آن:

در تگ Marquee مورد نظر موارد روبرو را اضافه کنید "onmouseout="start();"onmouseover="stop; را اضافه کنید و نتیجه را در preview مشاهده کنید.

کنتور:

به آدرس insertweb component بروید.سپس در پنجره باز شده گزینه Hit counter را انتخاب کنید .از قسمت choose a counter style شکل کنتور دلخواه خود را انتخاب کنید.

سرچ کننده:

به آدرس insertweb component بروید.سپس در پنجره باز شده گزینه web searchرا انتخاب کنید .از قسمت choose a type of search گزینه current web را انتخاب کنید. و بعد finish را بزنید .پنجره search from properties باز می شود در زبانه search from properties می توانید نام برچسب سرچ کننده و حداکثر تعداد کاراکترهایی که فرد می تواند وارد کند و نام دکمه سرچ و reset را تعیین کنید.

گذاشتن یک دکمه برای لینک :

به آدرس insertweb component بروید. سپس در پنجره باز شده گزینه dynamic effect را انتخاب کنید در سمت راست پنجره گزینه button interactiveرا انتخاب کنید. حال در پنجره باز شده در زبانه button می توانید شکل دکمه مورد نظر متن داخل دکمه و لینک آن را تعیین کنید.در زبانه font هم می توانید نوع و سایز رنگ متن و دکمه در حالت معمولی و یا در حالتی ماوس روی آن قرار می گیرد یا دکمه فشار داده شده و مکان متن از نظر راست و چپ بودن و بالا و پایین یا وسط بودن و جهت متن روی دکمه را تعیین کنید.در زبانه image هم می توانید ارتفاع طول و عرض دکمه و… را تعیین کنید.

گالری عکس:

به آدرس insertpicturenew photo gallery بروید.پنجره ای باز می شود که شامل موارد دو زبانه است.زبانه picture و layout .در زبانه layout می توانید نحوه چیده شدن عکسها در گالری را از قسمت choose a layout انتخاب کنید.و در بعضی از حالات چیدن می توانید تعداد عکسها را در هر سطر در قسمت number of pictures per rows انتخاب کنید.

زبانه picture شامل موارد زیر است.

Add:
با کلیک روی این دکمه می توانید یک عکس را از داخل فایلها در درایوهای مختلف (picture from file) یا از روی اسکنر و یا webcam(picture scanner or cameras ) بخواند.

Edit:
با کلیک روی آن پنجره edit picture باز می شود.در قسمت picture size می توانید طول وعرض عکس راتغییر دهید در قسمت rotate picture عکس را می توانید از جهتهای مختلف چرخاند یا قرینه کرد.درcrop picture هم می توانید قسمت دلخواه از عکس مورد نظر را انتخاب کنید و بقیه را حذف کنید که با کلیک روی دکمه crop بقیه قسمتها حذف می شود.عکس قبلی وبعدی را هم میتوان با کلیک روی next و previous آورده و آنها را نیز ویرایش کرد. کلید rest هم عکس را به حالت اول برمی گرداند.با کلیک روی ok تغییرات اعمال می شود.

Remove:
عکس مورد نظر را می توانید حذف کنید.

Move upو move down:
عکسهی بالا و پایین را دید.

Use font formatting from page:
توضیحات و اسم عکس را هم اندازه و هم نوع و هم رنگ با فونت صفحه انتخا می کند.

Override and use custom font formatting:
می توان توضیحات و اسم عکس را با رنگ وسایز و نوع دلخواه انتخاب کرد.

Caption:
اگر می خواهید عکس عنوان داشته باشد عنوان عکس را می نویسد.

Descirption:
اگر می خواهید عکس توضیحات داشته باشد توضیحات یا شرح عکس را می نویسید.

ایجاد فرم:

به آدرس insert form بروید .

[تصویر: 5.jpg]

توضیح شماره های بالا:

1- به شما یک فرم دو دکمه ای submit و reset می دهد.

2- یک جعبهtext box با دو دکمه submit و reset بوجود می آورد.

3- یک جعبه با دو دکمه بالا و پایین بوجود می آورد و submit و reset می دهد.

4- یک قسمت برای آپلود فایل یا عکس از روی کامپیوتر در اختیار شما قرار می دهد . submitفایل را به اینترنت منتقل می کند و reset آن را پاک می کند.browse هم برای انتخاب فایل از کامپیوتر است.

5- یک check box در اختیار شما قرار می دهد که می توانید آن را تیک زده یا نزنید.

6- یک دکمه رادیویی همراه با دو دکمه submit و reset در اختیار شما قرار می دهد.

7- یک مکان برای نوشتن متن و همراه با دکمه هایsubmit و reset در اختیار شما قرار می دهد.

8- یک ساختار کشویی در اختیار شما قرار می دهد که بیشتر برای سوالهایی که از کاربر می شود و باید از بین آنها یکی را انتخاب کند بکار می رود.برای نوشتن گزینه ها می توانید رو مکان نوشته ها کلیک راست کرده و گزینه from field propertiesرا انتخاب کنید در پنجره باز شده و کلیک روی add و دادن متن دلخواه در choose می توانید گزینه مورد نظر را را تایپ کنید. همچنین در این قسمت ارزش و حالت انتخاب آن را تعیین کنید.

9- یک button و submit و reset می سازد.

10- یک دکمه اضافه به همراه submitو reset در اختیار شما قرار می دهد که می توانید یک متن دلخواه را روی آن تایپ کنید.

11- بعد از انتخاب این گزینه یک پنجره باز می شود که می توانید عکس موردنظر را از داخل کامپیوترتان انتخاب کنید . سپس آن عکس به همراه دکمه های submit و reset در صفحه قرار می گیرد.

12- ایجاد برچسب می کند.

گذاشتن یک فریم در یک خط:

به insertinline frame بروید یک فریم باز می شود اگر در آن new page را انتخاب کنید یک فضای خالی برای نوشتن در فریم درست می شود که می توانید متن دلخواه را بنویسید. و با انتخاب set lnitial page نیز پنجره ای باز می شود که می توانید صفحه یا فیلم یا عکس و … دلخواهی را در آن باز کنید.

کشیدن یک خط برای جدا کردن افقی:

به insert horizontal line بروید در مکانی که مکان نما قرار دارد یک خط خاکستری می کشد.

گذاشتن لینک بار:

به آدرس insertweb component بروید.سپس در پنجره باز شده گزینه link bar را انتخاب کنید و از سمت راست گزینه bar with custom links را انتخاب کنید.و next را بزنید وبعد در قسمت بعد شکل لینک بارتان را انتخاب کنید و مجددا next را بزنید و در بعدی می توانید مکان یا موقعیت لینک بارتان را تعیین کنید و در آخر finish را بزنید.حال پنجره ای باز می شود که می توانید فایلها و صفحات و… را add کنید و به لینک با اضافه کنید.با ok کردن یک لینک بار در صفحه بوجود می آید.

نکته :در هر مرحله می توانید با کلیک روی finish کار را تمام کنید.

Theme ها:

پوسته هایی هستند که در فرانت پیج قرار دارند.اگر آنها را انتخاب کنید برای صفحه شما یک پشت زمینه قرلر می دهد در واقع یک طرح انتخابی برای صفحه است و نام صفحه و لینک بار ها را داخل کادرهایی قرار می دهد .برای اینکار به frame theme بروید.که با انتخاب آن گزینه background و page properties غیر فعال می شود.

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