آموزش طراحی وب Frontpage

آموزش طراحی وب Frontpage

آموزش طراحی وب Frontpage

آموزش طراحی وب Frontpage

قرار دادن فلش و صوت

Advanced controls/plug-in

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

برای استفاده از این پنجره به منوی insert رفته وگزینه web component را انتخاب کنید وپنجره ای باز خواهد شد از سمت چپ گزینه آخر یعنی advanced controls را انتخاب کنید سپس از سمت کادر سمت راست گزینه plug-in رو انتخاب کنید و دکمه finish را بزنید پنجره ای به شکل زیر باز میشود.

جای عکس بوده

پنجره plug-in properties

1-در کادر data source آدرس فایلتون رو وارد کنید البته اینو هم فراموش نکنید که حتما باید فرمت فایل روهم درج کنید  یا از طریق گزینه brows فایل مورد نظر رو انتخاب کنید مثلا:

برای فایلهای فلش swf و فایلهای صوتی mp3 یا wav یاram و غیره.

 2- size برای تغییر اندازه plug-in در صفحه است وhide plug-in برای مخفی کردن plug-in شماست.

 3-کادر layout گزینه alignment برای تعیین مکان قرار گرفتن plug in  در صفحه است .

گزینه border thickness درحالت normal کادری سیاه رنگ به دور plug-in ایجاد میکنه.

گزینه horizontal spacing برای ایجاد فضای خالی بصورت افقی و گزینه vertical spacing برای ایجاد فضای خالی بصورت عمودیه.

 

نوشته های متحرک

Dynamic effects/marquee

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

 در قسمت بالا (text) نوشته خودرا تایپ کنید.

 درکادر direction شما باید مشخص کنید که نوشته شما از کدام طرف وارد شود اگر نوشته به زبان

انگلیسی باشد بهتر است گزینه left واگر نوشته فارسی باشد بهتر است گزینه right را انتخاب کنید.

 

در کادرspeed میتوانید سرعت حرکت نوشته را انتخاب کنید وکم وزیاد کنید. گزینه delay برای مکس

نوشته در هنگام حرکت است البته زیاد محسوس نیست وگزینه amount سرعت ورود را تغییر میدهد.     

 

کادر behavior میتوانید حالت های مختلفی به نوشته خود بدهید. در گزینه scroll نوشته شما بعد از ورود دوباره خارج میشود واین عمل همینطور ادامه پیدا میکند. در گزینه side نوشته بعد از ورود در جای خود متوقف میشود. در گزینه alternate نوشته شما در خط خود حالتی رفت وبرگشتی به خود میگیرد. نمونه زیر حالت side است.

 

کادر size برای تغییر اندازه محیط نوشته است.که این عمل با کلیک بر روی نوشته و تغییر اندازه گوشه

های ایجاد شده نیز صورت میگیرد.

 

کادرrepeat میتوانید زمانی مشخص برای انجام حرکت تعیین کنید.

کادر bakground color برای تغییر زمینه است. وشما میتوانید با رفتن به بخش style رنگ نوشته را نیز عوض کنید.البته این اعمال ازطریق امکانات داخل محیط فرونت پیج امکان پذیراست.

افکت گذاری

این گزینه برای اثر گذاری بر روی نوشته ها عکس ها و... است. مثلا نوشته رو انتخاب میکنید و طوری اون رو تنظیم میکنید تا وقتی موس روی اون قرار میگیره رنگ زمینه اون تغییر کنه.

برای نمونه انتخاب موضوع سمت چپ صفحه.

برای این کار به منوی format برید وگزینه dynamic html effects رو انتخاب کنید. یک پنجره بدین صورت باز میشه.

 

پنجره dynamic html effects

   1-on از چهار مورد تشکیل شده:

 click به معنی اینکه با یک بار کلیک کردن بر روی شی یا نوشته انتخاب شده تغییرات ایجاد شود.

double click به معنی اینکه با دوبار کلیک کردن بر روی شی یا نوشته انتخاب شده تغییرات ایجاد شود.

mouse over به معنی اینکه با قرار گرفتن فلش موس روی شی یا نوشته ولمس آن تغییرات ایجاد شود.

page loud به معنی اینکه هنگامی که صفحه وب توسط کاربر باز میشه تغییرات انجام شود.

2-بعد از انتخاب یکی از گزینه های بالا در کادر apply گزینه هایی قرار میگیرد که میتوانید هر کدام  رو به دلخواه انتخاب کنید. و بعد از انتخاب در کادر جلوی آن گزینه های دیگری قرار خواهد گرفت که دوباره شما یکی از اونها رو انتخاب میکنید تا تغییرات صورت بگیره.

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

برای پاک کردن افکت ایجاد شده میتونید گزینه remove effect رو انتخاب کنید.

 برای مثال به نمونه زیر توجه کنید:

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

 بعد نوشته رو انتخاب میکنم واز منوی format پنجره dynamic html effects رو باز میکنم

وبعد از کادرon گزینه mouse over  رو انتخاب میکنم.

از کادر apply گزینه formatting رو انتخاب میکنم.

بعد گزینه choose border رو انتخاب مکینم پنجره ای به شکل زیر باز میشه.

 style رو در حالت double وcolor رو سبز ;width رو در حالت 4قرار میدم و ok میکنم وحالا این نوشته دارای افکته شما میتونید با انتخاب گزینه choose font فونت اون رو نیز تغییر بدید ویا رنگشو عوض کنیدو خیلی کارای دیگه.

قراردادن عکس در صفحه وب

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

 در بالای پنجره کادر look in برای دادن آدرس عکس از هارد شماست.

اما اگر بخواید آدرس اینترنتی بدید باید در کادر file name آدرس اینترنتی خود رو وارد کنید و دکمه insert رو بزنید.

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

بعد از قرار دادن عکس درصفحه با دوبار کلیک بر روی عکس و یا کلیک سمت راست وانتخاب گزینه picture properties میتونید تنظیمات خودتون رو انجام بدید

لینک دادن

نوشته یا عکسی رو که میخواید لینک بدید انتخاب کنید چند راه برای لینک دادن وجود دارد.

اول اینکه روی نوشته یا عکس انتخاب شده سمت راست کلیک کنید وگزینهhyperlink رو انتخاب کنید.

 دوم اینکه از منوی insert رفته وگزینه hyperlink رو انتخاب کنید.

 و راه سوم اینکه از منوی استاندارد گزینه hyperlink رو انتخاب کنید که در این صورت پنجره ای  به شکل زیر باز میشود.

  آدرس دادن و حالت اجرای آن

  در پایین پنجره آدرس سایت ویا صفحه ای رو که میخواید وارد کنید اگه میخواید با کلیک بر روی نوشته سایت روی همین صفحه باز بشه از سمت راست گزینه target frame رو انتخاب کنید پنجره ای باز میشه اگه روی page default کلیک کنید وok بزنید این اتفاق میفته و اگه روی  new window کلیک کنید وok کنید صفحه ای جدید باز خواهد کرد.

و در پایین همون صفحه اگه گزینه set رو تیک بزنید دیگه هر لینکی بدید به همون صورت عمل میکنه.

توضیحات در مورد لینک

اگه در بالای پنجره insert hyperlink گزینه screen tip رو انتخاب کنید پنجره ای باز میشه که میتونید در اونجا در مورد لینکی که دادید توضیح بدید با اینکار وقتی که با موس روی نوشته ای که به اون لینک دادید وایسید نوضیحاتی روکه تایپ کردید براتون نمایش میده.

لینک دادن به ایمیل

برای این کار در سمت چپ پنجره insert hyperlink گزینه E-mail address رو انتخاب کنید

تا صفحه زیر باز شود.

 در کادر E-mail address ایمیلی رو که میخواید لینک بدید وارد کنید.

در کادر subject میتونید موضوع ایمیل رو وارد کنید اما احتیاجی به اینکار نیست.

در کادر recently used e-mail addresses میتونید متن ایمل رو بنویسید اما باز احتیاج به اینکار  هم نیست.

حالتهای فرونت پیج

فرونت پیج از سه حالت normal ; html ; preview تشکیل شده که در پایین سمت چپ حالتها قابل تغییر است.

normal : نشان دهنده edit صفحه در حال ساخت است و میتونید درا ین حالت تغییرات خودتون رو روی صفحه وب ایجاد کنید.

 html  : نشان دهنده کدهای صفحه ساخته شده است که به کد html معروفه. مثلا برای اینکه قالب خودتون رو در پرشین بلاگ عوض کنیدباید کد html رو کپی کرده ودر صفحه ویرایش قالب به جای کدهای قبل قرار دهید.

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

حالتهای فرونت پیج

فرونت پیج از سه حالت normal ; html ; preview تشکیل شده که در پایین سمت چپ حالتها قابل تغییر است.

normal : نشان دهنده edit صفحه در حال ساخت است و میتونید درا ین حالت تغییرات خودتون رو روی صفحه وب ایجاد کنید.

 html  : نشان دهنده کدهای صفحه ساخته شده است که به کد html معروفه. مثلا برای اینکه قالب خودتون رو در پرشین بلاگ عوض کنیدباید کد html رو کپی کرده ودر صفحه ویرایش قالب به جای کدهای قبل قرار دهید.

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

منوی insert

عملیاتی که در منوی insert   میتونیم انجام بدیم رو به ترتیب طبق عکس از یک تا ده توضیح میدیم.

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

 1- break برای شکست وانفصال وشکاف ووقفه در متن.

 2-  horizontal lineبرای ایجاد خط افقی در مکان مورد نظر.

 3-  inline fromبرای قرار دادن یک صفحه وب دیگر در صفحه در حال ساخت که بطور مستقل عمل کند.برای اینکار بعد از انتخاب این گزینه set initial page رو فشار دهید وبعد آدرس صفحه وب مورد نظرو بدید. 

4-  date and timeبرای قرار دادن ساعت وتاریخ همان لحظه که درحال کارید. 

5-  symbolبا استفاده از این گزینه میتونید نشان علامت و... از هر فونتی که بخواید انتخاب کنید.

 6- web component در جلسات بعد در این مورد توضیح خواهیم داد چون بحثش مفصله.

 7- form  برای ایجاد فرم مانند صفحه ریجستر برای ثبت نام در سایتها! اینم قضیش مفصله!!!پس در جلسات بعد بهش خواهیم پرداخت. 

8- picture خودش زیر منویی داره که دراون میتونید عکسی رو از روی هارد یا با آدرس اینترنتی ویا با گرفتن از وب کم در صفحه قرار بدید اما اگه بخواید اون صفحه رو روی شبکه اینترنت بگذارید باید آدرس اینترنتی بدید.

 9- fileبرای آوردن فایل با فرمت هایی که فرونت پیج توان اجرای اونها رو داره.

 10- hyperlinkبرای لینک دادن به نوشته یا عکس تا با کلیک بر روی اون نوشته یا عکس به آدرس اینترنتی مورد نظر بره.

منوی فرمت

عملیاتی که در منوی table   میتونیم انجام بدیم رو به ترتیب طبق عکس از یک تا سیزده توضیح میدیم.

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

 1- draw table  برای رسم جدول و یا تقسیم جداول به چند قسمت.

 2- insert  از این طریق میتوانید با تنظیمات تعداد جداول مورد نیاز وهمینطور اندازه آنها را تایپ کنید و بعد با  ok کردن جداول مورد نیاز شما ایجاد میشود. حال میتواند درون جدولی رسم شود که از قبل ایجاد کرده اید و یا برای تقسیم جدول از قبل رسم شده.

 3- delet cells برای حذف جدول ایجاد شده

4- select برای انتخاب جدول استفاده میشود مثلا اگر گزینه table رو انتخاب کنید کل جدول را با تمام قسیماتش انتخاب میکند.

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

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

وگزینه cell هم فقط خود بخش کلیک شده را انتخاب می کند.

 5-  merge cells برای یک دست کردن جدول وازبین بردن بخش های اضافه جدول است.

 6- split cells از این طریق میتونید جداولی به صورت افقی وستونی با مشخص کردن تعداد ایجاد کنید.

 7- split table برای فاصله انداختن بین جدول و حاشیه بالای صفحه برای تایپ نوشته.

 8- table auto format استفاده از مدل های پیش فرض برای جدول رسم شده.

 9-distribute rows evenly  بخش های انتخاب شده ستونی رو که بهم ریخته است مرتب میکنه و همه بخش ها رو به یک اندازه قرار میده.

 10- distribute columns evenly اینم مثل همون شماره 9 اما برای بخش های انتخاب شده افقی.

 11-autofit to contents کم کردن فاصله بین دو خط جدول تا کمترین حد ممکن.

 12-fill  برای قرار دادن نوشته ای که در یک بخش از جدول نوشته شده ومیخواهید در بخش های دیگر  جدول نیز قرار گیرد وبرای اینکار باید چند قسمت از جدول را انتخاب کرده باشید. اگر down  را انتخاب کنید نوشته را دربخش های زیر آن قرار میدهد و اگر right را انتخاب کنید نوشته در بخش های سمت راست آن قرار میگیرد.

 13-table properties  با استفاده از یان گزینه میتونید قسمت مربوط به تنظیمات جدول و یا بخشی از جدول را انجام دهید. مثلا بی رنگ کردن خط دور جدول ویا تغییر رنگ پشت زمینه جدول.

toolbar table

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

شناخت منوها

 (پرونده):  درسترسی به پرونده ها

New (صفحه جدید): جهت ایجاد یا باز کردن صفحه جدید

Open (باز کردن): جهت باز کردن صفحات مورد نیاز قبلى

Close: بستن

Open Web : باز کردن صفحه وب جدید

Close Web : بستم صفحه وب مورد نظر

Save (ذخیره): جهت ذخیره نمودن کارهاى انجام شده

Save As : ذخیره کردن در مسیر و محل مورد نظر با نام دلخواه

Save All : کلیه مطالب را در مسیر داده شده سیو میکند

Search (جستجو): جهت جستجو و یافتن فایلها و مدارک مورد نیاز در کامپیوتر یا شبکه

Publish Web (صدور وب): جهت انتشار یا قرار دادن سایت ساخته شده در سرور و سایت اصلى ( انتقال یا انتشار پوشه یا صفحه ساخته شده به اینترنت واقعی که در اینحالت پنجره ای باز شده و با دادن آدرس می توانیم این عمل را انجام دهیم. البته در هنگام انتقال username و password را هم می خواهد.)

Preview in Browser (مشاهده در جستجوگر وب): جهت مشاهد صفحه ساخته شده در جستجو گر وب مثلا" Internet Explorer یا برنامه Netescape و نسبت به Preview Tab پایین صفحه واقعی تر و قابل اعتماد تر است.

Page Setup :  دسترسی به  تنظیمات صفحه مورد نظر

Print Preview : نمایش صفحه ای که در حال چاپ است

Print (چاپ): جهت چاپ نمودن صفحات مورد نظر

Send : ارسال فایل و یا اطلاعات مورد نظر در مسیر مشخص

Exit  : خروج

Edit(ویرایش): ویرایش کردن مطالب مورد نظر

Undo : برگشت به حالت قبلی

Redo : رفتن به حالت بعدی که قبلا انجام شده

Cut (برش): جهت بریدن و برداشتن بخشى از متن ، عکس و یا قسمت انتخاب شده جهت درج در بخشى دیگر

Copy (کپی): جهت برداشتن نسخه یا کپى بخشى از متن ، عکس و یا قسمت انتخاب شده جهت درج در بخشى دیگر ( Ctrl + C )

Office Clipboard

Paste(الصاق): جهت الصاق یا چسباندن قسمت کپى یا بریده شده موجود در حافظه ( clipboard ) در بخش مورد نظر ( Ctrl + X )

Delete : پاک کردن مطلبی که انتخاب شده

Select All : مارک دار کردن همه مطالب موجود در صفحه مورد نظر

Find : جستجو

Style (سبک):جهت قالب بندى سبک و ساختار نوشتارى معین مختلف موجود در این بخش در متن در حال درج یا انتخاب شده.

Font (نوع خط): جهت انتخاب نوع خط براى نوشتن یا بخش انتخاب شده

Font size (اندازه خط): جهت انتخاب اندازه خط براى نوشتن یا بخش انتخاب شده

Bold (تو پر): جهت توپر نوشتن متن یا متن انتخاب شده جهت دادن جلوه ویژه و مشخص نمودن

Italic (خط شکسته): جهت دادن حالت شکسته به متن یا متن انتخاب شده جهت دادن جلوه ویژه و مشخص نمودن

Underline (زیر خط دار): جهت زیر خط دار نمودن متن یا متن انتخاب شده جهت دادن جلوه ویژه و مشخص نمودن

Align Left (تراز چپ): جهت چپ چین نمودن متن نوشتارى، عکس و یا بخش انتخاب شده

Center (وسط چین): جهت وسط چین نمودن متن،عکس و یا بخش انتخاب شده

Align Right (تراز راست): جهت راست چین نمودن متن نوشتارى، عکس و یا بخش انتخاب شده

Justify (تراز عادى): متن یا بخش انتخابى شما را از سمت چپ و راست یکسان مىچیند.

Numbering(شماره گذارى): جهت ایجاد ردیف و شماره گذارى و لیست نمودن

Bullets (قرار دادن دکمه): جهت ایجاد ردیف، لیست نمودن و مرتب کردن

Decrease Indent(کاهش حاشیه): جهت کم کردن حاشیه و فاصله بخش انتخابى از کناره صفحه

Increase Indent (افزایش حاشیه): جهت افزودن فاصله و یا حاشیه از کناره صفحه به متن یا بخش انتخاب شده

Outside Borders

High light color (ایجاد برجستگى به کمک رنگها در پشت زمینه): جهت دادن جلوه ویژه و برجسته جلوه دادن بخش انتخاب شده به کمک انواع رنگها در قسمت پشت زمینه

Font color (رنگ خط): جهت انتخاب انواع رنگها براى متن نوشتارى یا انتخاب شده

Toolbar Options (دکمه هاى اضافى): جهت انتخاب و افزودن (یا برداشتن) ابزار هاى اضافى مورد لزوم به این قسمت.

تذکر: در پایین هر صفحه سه Tab وجود دارد:

1.Normal Tab

حالت عادی می باشد که می توانیم آن را Edit کنیم.

2. HTML Tab

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

3. Preview Tab

پیش نمایش صفحه ساخته شده می باشد. به ما نشان می دهد که این صفحه چگونه در اینترنت دیده خواهد شد ولی در این حالت دیگر نمی توان چیزی را در داخل متن(صفحه) تغییر داد. فرق آن با (preview استاندارد) این است که آن پیش نمایش صفحه را ذخیره کرده و در browser اینترنت عملاً نشان می دهد.
 

Spelling (کنترل دیکته): جهت چک و کنترل دیکته کلمات تایپ شده از نظر قواعد دیکته نویسى و قواعد مربوطه.

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

Ignore: چشم پوشی کردن از غلط موجود (وقتی که ما از قصد آنرا غلط نوشته ایم، کلمه یا اسم خاصی است که در دیکشنر دستگاه نیست.)

:Ignore All از همه موارد چشم پوشی کردن

Change: عوض کردن (با کلمه پیشنهادی پنجره که در درون کادر انتخاب می کنیم عوض نماید.)

Change All: عوض کردن کلی (با کلمه پیشنهادی پنجره که در درون کادر انتخاب می کنیم ین کلمه را در صورت وجود در هر کجای این صفحه عوض نماید.)

Add: به دیکشنری اضافه کند و دیگر در سندهای بعدی از ما نپرسد و ایراد نگیرد. ( هرگاه کلمه خاصی که زیاد به آن نیاز داریم و دیکته آنرا درست نوشته ام به دیکشنری اضافه می نماید)

Suggest: دستگاه نظر یا پیشنهاد خودش را ارائه دهد که می تواند جهت رفع اشکال انتخاب شود.