متفاوت ترین سایت آموزش فارسی زبان

درس ۵: شکل‌دهی صفحات وب

ساختن ليست

ساختن وشكل دادن به ليست‌ها در فرانت‌پيج بسيار آسان است.دو سری ليست می‌توانيد بسازيد:

ليست‌های علامت‌دار (Bulleted )

ليست شماره‌گذاری شده

ساختن ليست علامت دار

صفحه‌ی‌مورد نظر را برای وارد كردن ليست بازكنيد.

در ميله ابزار بر روی دكمه‌ی كليک كنيد.

عبارت مورد نظر را تايپ كنيد و كليد Enter را فشار دهيد.

فرانت‌پيج اولين عنصر علامت دار ليست را می‌سازد. نقطه‌ی درج را به ابتدای خط بعدی می‌برد و در آنجا يک دايره توپر اضافه‌ می‌كند.

عبارت‌های بعدی را نيز به همين ترتيب وارد كنيد و در انتها بر روی دكمه‌ی برای غير فعال كردن آن كليک كنيد.

ساختن ليست شماره دار

ليست شماره‌دار مانند ليست علامت‌دار می‌باشد با اين تفاوت كه به جای علامت در ابتدای عبارت يک شماره به صورت خودكار وارد می‌كند. برای ساختن يک ليست شماره‌دار بر روی ابزار آن در نوار ابزار كليک كنيد.

استفاده از جدول برای چيدن عناصر صفحه‌ی وب

بيشتر صفحات وب شكل تك ستونی دارند. در اين نوشته‌ها و عناصر تصويری به دنبال يكديگر قرار می‌گيرند و هيچ دو عنصری در كنار همديگر نمايش داده نمي‌شوند. اگر بخواهيد دو عنصر صفحه‌ی وب ( يك عكس ومتن مربوط به آن) در كنار هم نمايش داداه شوند، بايد از جدول (Table) استفاده كنيد.

در صفحات وب، جدول‌ها در كنار كاربرد هميشگی خود برای نمايش سطری و ستونی اطلاعات، امكان نمايش عناصر در كنار يكديگر را فراهم می‌كند.

درج كردن جدول

ابتدا صفحه‌ی مورد نظر را انتخاب كنيد.

در محلی كه می‌خواهيد جدول درج شود كليک كنيد و از منوی‏ Table ابتدا رویInsert و سپس رویTable كليک كنيد.

فرانت‌پيج كادر مكالمه‌ای آن را نمايش می‌دهد. تعداد سطر‌ها و ستون‌ها را در قسمت Rows و Columns وارد كنيد، و بر روی OK كليک كنيد.

در ميله ابزار بر روی دكمه‌یSave كليک كنيد.

در ج كردن متن در خانه جدول و شكل دادن به آن

برای درج متن در خانه‌ی جدول کلیک كنيد و سپس متن مورد نظر را تايپ كنيد.

خانه‌ی محتوای جدول را انتخاب كنيد.

روي بخش انتخاب شده با ماوس رايت كليک كنيد و در منوي ميانبر ، گزينه‌يCell properties را انتخاب كنيد.

در كادر مكالمه‌ای آن می توانيد نوشته را به صورت افقی و يا عمودی تراز كنيد.

شكل دهی جدول

در اين قسمت می‌توانيد جدول را از طريق تغيير دادن عرض ستون‌ها، ارتفاع سطر و شيوه‌ی خط مرزی شكل دهی كنيد.

اشاره گر ماوس را روی خط مرزی افقی و يا عمودی جدول قرار دهيد در اين صورت شكل اشاره‌گر ماوس به صورت يا در می‌آيد.

با استفاده از اشاره‌گر ماوس می‌توانید اندازه‌ی آن را تغيير دهيد.

روی يكی از مرز‌های جدول با دكمه‌ی راست ماوس كليك كنيد و در منوی ميانبر بر روی Table properties كليک كنيد ، در اين صورت كادر مكالمه‌ای خواص جدول ظاهر می‌شود.

روی جعبه‌ی متن اندازه‌ی مرزها ( Borders Size ) كليک كنيد مقدار پيش فرض را پاک كنيد و به جای آن مقدار صفر را تايپ كنيد و بر رویOK كليک كنيد. در اين صورت مرز‌های جدول ديگر ديده نمی‌شوند.

در ميله ابزار بر روی دكمه‌ Save كليک كنيد.

خواص صفحه

در پنجره‌ی خواص صفحه ( Page properties ) می‌توانيد شكل ظاهری صفحه‌ی وب را تغيير دهيد. مثلا می‌توانيد تصاوير ورنگهای زمينه‌ی صفحه، طول و عرض حاشيه‌های صفحه و رنگ ابر لينک ها را تغيير دهيد.

تغيير دادن خواص صفحه

روی يكی از بخش‌های خالی صفحه‌‌ی‌ وب بادکمه‌ی سمت راست ماوس كليک كنيد و در منوی ميانبر روی Page properties كليک كنيد.

در كادر مكالمه‌ای آن بر روی برگه‌یBackground كليک كنيد.

در پنجره‌ی آن جعبه‌ی چک تصوير زمينهBackground Picture را اتنخاب كرده سپس بر روی Browse كليک كنيد.

در ليست فايل‌ها بر روی فايل مورد نظر برای تصوير زمينه كليک كنيد و دكمه‌ی OK را انتخاب كنيد.

بر روی برگه‌یMargins (حاشيه‌ها) كليک كنيد.

روی جعبه‌ی متن Specify left Margin كليک كنيد عدد ۴۰ را به عنوان حاشيه‌ی چپ صفحه وارد كنيد بر روی OK كليک كنيد.

فرانت‌پيج ، تصوير زمينه را به صفحه‌ی وب اضافه می‌كند و صفحه به اندازه‌ی 40 پيكسل به سمت راست جابجا می‌شود.

بخش اول: طراحی و ساخت سایت وب

درس ۳: مرتبط کردن صفحات وب

ساخت ابر لینک‌های متنی

ابر لینک (hyper link ) یک دستور HTML است که در صفحه‌ی وب قرار می‌گیرد. این دستور باعث می‌شود که هرگاه کاربر بر روی متن یا تصویر متناظر با این دستور کلیک کند تماشاگر وب فایل یا صفحه‌ی وب دیگری را نشان دهد. وقتی بازدید کننده وب ماوس را بر روی ابرلینک حرکت می‌دهد، شکل کرسر ماوس از شکل پیکان تغییر می‌کند و به صورت یک دست اشاره کننده در می‌آید.

مرتبط کردن صفحه‌ی وب با صفحه‌ای در وب جاری

1. بر روی نامی که می‌خواهید بر روی آن لینک درست کلیک کرده و آن را انتخاب کنید.

2. در منوی Insert روی ...Hyperlink کلیک کنید، تا پنجره آن نمایش یابد.

3. در لیست فایل‌ها بر روی نام فایل مقصد کلیک کنید و سپس بر روی OK کلیک کنید.

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

مرتبط کردن صفحه‌ی وب با صفحه‌ی وبی در اینترنت

1. کلمه‌ی مورد نظر( Microsoft ) را تایپ کنید و آن را انتخاب کنید.

2. در منوی Insert روی ...Hyperlink کلیک کنید.

3. در قسمت Address آدرس سایت مورد نظر ( www.microsoft.com/frontpage ) را تایپ کنید و کلید ‌Enter را بزنید.

برای آزمایش کردن ابر لینک‌ها در میله ابزار روی دکمه‌ی Preview  کلیک کنید.

ساختن لینکی به یک آدرس پست الکترونیکی

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

1. کلمه‌ی مورد نظر( Send E-Mail Webmaster) را تایپ کنید و آن را انتخاب کنید.

2. در منوی Insert روی ...Hyperlink کلیک کنید.

3. در پنجره‌‌ی آن بر روی دکمه  E-Mail Address کلیک کنید.

4. در جعبه‌‌ی E-Mail Address ایمیل خود را وارد کنید وسپس بر روی OK کلیک کنید.

ویرایش و حذف ابرلینک‌ها

1. بر روی ابرلینک دکمه‌ی سمت راست ماوس را کلیک کنید.

2. بر روی Hyperlink properties کلیک نمایید.

3. در جعبه‌ی Address می‌توانید مقصد ابر لینک را تعغییر دهید. و برای حذف آن می‌توانید از دکمه‌ی Remove link استفاده کنید.

ساختن Bookmark بر روی صفحه‌ی وب

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

1. متن مورد نظر را تایپ کنید.

2. در منوی Insert روی Bookmark کلیک کنید، پنجره‌ی آن نمایش داده می‌شود.

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

فرانت‌پیج زیر متن یک خط چین کشیده است و نشاندهنده‌ی یک بوک‌مارک است.

لینک کردن به بوک‌مارکی در همان صفحه

در این تمرین از نقطه‌ای در یک صفحه وب، به بوک‌مارکی در همان صفحه یک لینک برقرار خواهید کرد.

1. در صفحه‌ی وب بر روی متنی که می‌خواهید به بوک‌مارکی در همان صفحه یک لینک بر قرار کنید کلیک کرده و آن را انتخاب کنید.

2. در منوی Insert روی ...Hyperlink کلیک کنید. سپس در لیست فایل‌های پنجره بر روی نام فایل (صفحه‌ی وب جاری) کلیک کنید.

3. بر روی Bookmark کلیک کنید. سپس نام Bookmark را انتخاب کنید و بر روی OK کلیک کنید.

حذف کردن بوک‌مارک

1. با دکمه‌ی سمت راست ماوس روی متن بوک‌مارک کلیک کنید.

2. در منوی میان‌بر روی Bookmark Properties کلیک کنید.

3. در جعبه‌ی متن Other Bookmark بر روی بوک‌مارک مورد نظر کلیک کرده و سپس روی دکمه‌ی Clear کلیک کنید.

ساختن ابر لینک‌های نقشه‌ی تصویری

1. در منوی  Insert ابتدا روی Picture و سپس روی From File کلیک کنید تا پنجره‌ی محاوره‌ای تصویر نمایش یابد.

2. در لیست فایل‌ها تصویر مورد نظر را انتخاب کنید.سپس روی OK کلیک کنید.

ساختن یک نقشه‌ی تصویر

1. روی تصویر کلیک کنید تا انتخاب شود. فرانت‌پیج میله‌ی ابزار تصویر را در پایین پنجره نمایش می‌دهد.

2. در میله‌ی ابزار تصویر بر روی یکی از دکمه‌های   کلیک کنید.

3. دکمه‌ی ماوس را پایین نگهدارید و ماوس ‌را حرکت دهید تا شکل رسم شود.سپس دکمه‌ی ماوس را رها کنید. فرانت‌پیج پنجره‌ی ایجاد ابر لینک را نمایش می‌دهد.

4. در لیست فایل‌ها بر روی فایل مورد نظر کلیک کنید. سپس روی  OK کلیک کنید. در این صورت ابر لینک مربوط به بخش انتخاب شده‌ی تصویر را درج می‌کند.

بخش اول: طراحی و ساخت سایت وب

درس ۲: ساختن یک سایت وب

برای ساختن یک سایت وب در فرانت‌پیج سه راه وجود دارد:

1. استفاده از جادوگر.

2. استفاده از الگو.

3. ساختن یک سایت وب به صورت دستی.

بسته به نوع سایت مورد نیاز و اهداف آن، می‌توانید هر کدام از این سه روش را به کار بگیرید.

ساختن یک سایت وب با به کارگیری جادوگر (wizard)

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

• جادوگر وب مباحثه (Discussion Web Wizard )

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

• جادوگر انتقال وب (Import Web Wizard )  

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

ساختن صفحات وب با استفاده از الگو (Template)

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

• Customer Support         سایت پشتیبانی مشتریان

• Project Web                   وب مدیریت پروژه

• Personal Web                وب شخصی

• One Page Web              سایت وب دارای یک صفحه‌ی مبدا

• ‌Empty Web                   یک وب خالی ایجاد می‌کند.

ساختن یک وب خالی

از منوی File گزینه‌ی New و سپس روی Web کلیک کنید.سپس در پنجره‌ی New روی آیکون  Empty Web کلیک کنید.سپس در سمت راست پنجره نام و مسیروب را تایپ کنید و بر روی دکمه‌ی OK کلیک کنید.

ساختن یک صفحه‌ی مبدا و افزودن متن به آن

پس از آنکه یک وب ساخته شد،باید صفحات وب را به آن افزود. به صورت پیش فرض اولین صفحه‌ای که به یک وب اضافه شود به عنوان صفحه‌ی مبدا در نظر گرفته خواهد شد.معمولا اسم صفحه‌ی مبدا index.htm  یا default.htm است.

برای افزودن متن به صفحه بر روی آن کلیک کنید و متن مورد نظر را تایپ کنید. سپس می‌توانید نع قلم، اندازه و محل قرار گرفتن متن را با استفاده از نوار ابزار Formatting تغییر دهید.

افزودن، شکل‌دهی و مشاهده متن متحرک (Marquee)

با استفاده از مارکی (Marquee) می‌توانید متن متحرکی را برای جلب توجه بیننده ایجاد کنید.                                                                            ابتدا عنوان مورد نظر را تایپ کرده و مکان نما را به خط بعد انتقال دهید. در منوی Insert ابتدا روی Component سپس روی Marquee کلیک کنید.در این صورت پنجره مربوط به آن ظاهر خواهد شد.در قسمت Text متن مورد نظر را تایپ کنید.

 برای مشخص کردن عرض وزمینه‌ی مارکی ابتدا در بخش Size روی چک باکس Width کلیک کرده و عدد ۴۰۰ را وارد کنید و گزینه‌ی in pixel و سپس در قسمت Background color رنگی را انتخاب نمایید و سپس روی ‌OK کلیک کنید.

 برای تغییر نوع قلم و اندازه‌ی آن بر روی مارکی رایت کلیک کرده و Marquee Propertie کلیک کرده و در پایین پنجره style را انتخاب کرده و سپس در پنجره باز شده از منوی Format گزینه‌ی font را انتخاب کنید، در پنجره ‌آن تغییرات را اعمال کنید وسپس روی OK کلیک کنید. برای تغییر در پنجره مارکی  می‌توانید از پنجره Marquee Propertie استفاده کنید.

مشاهده‌ی صفحه‌ی وب

برای مشاهده صفحه‌ی وب بر روی زبانه‌ی Preview کلیک نمایید.

بخش اول: طراحی و ساخت سایت وب

درس ١: طراحی سایت وب

شبکه جهانی وب یا وب،استفاده از اینترنت را آسان کرده است. اینترنت یک شبکه‌ی کامپیوتری جهانی است که د ر اواخر دهه‌‌‌‌‌‌‌ی ۱۹۵۰ بوجود آمده است. در ابتدا برای استفاده کردن از اینترنت و دسترسی به اطلاعات موجود در کامپیوتر‌های متصل به آن، دانستن تعداد زیادی دستورات دشوار،الزامی بود. ممثلا اگر می‌خواستید اطلاعاتی را از کامپیوتریکه سیستم عامل آن Unix است، به دست آورید، باید دستورات سیستم عامل Unix را می‌‌دانستید. در سال ۱۹۹۲پژوهشگری به نام  تیم برنرزلی (Tim berners lee) همراه با همکاران خود وب را ابداع کرد. وب به کاربران امکان می‌دهد که اینترنت را تماشا کنند. بدون آنکه نیازی به داشتن دستورات دشوار داشته باشند.

به مرور زمان تماشاگر‌های وب مانند Internet Explorer مایکروسافت استفاده از اینترنت را آسانتر کرده‌اند. وب بر مبنای Hyper Text ساخته شده است. ابرمتن روشی برای متصل کردن قطعات ( صفحات ) اطلاعات است. که ابتدا در دهه‌ی ۱۹۹۰ برنرزلی و همکارانش مفهوم ابر متن را در اینترنت به کار گرفتند و چیزی به نام « پروتکل انتقال ابرمتن » یا HTTP را ابداع نمودند. با خلق شدن HTTP شبکه‌ی جهانی وب پا به عرصه‌ی وجود نهاد.

صفحات وب و HTML

اگر HTTP را سنگ بنای شبکه‌ی جهانی .ب بدانیم، سنگ بنای صفحات وب نیز HTML ( زبان علامتگذاری ابر متن یا Hyper Text Markup Language ) است. HTML با استفاده از علامت‌های خاصی که Tag نامیده می‌شوند متن و شکل صفحه‌ی وب را مشخص می‌کند.تماشاگر‌های وب این علامت‌ها را ترجمه می‌کنند و متن و تصاویر را به شکل خواسته شده نمایش می‌دهند. تگ‌های HTML غیر از آنکه نحوه‌ی نمایش متن و تصاویر صغحه‌ی وب را مشخص می‌کنند، وظایف دیگری را نیز بر عهده دارند. مثلا ابر لینک‌ها ( hyper links ) محل سایر ثفحات وب مرتبط موجود در اینترنت را به تماشاگر وب می‌گویند تا بتواند آن‌ها را برصفحه نمایش کاربر نمایش دهد.

بسیاری از صفحات وب امروزی از اسکریپت ( Script ) استفاده می‌کنند. اسکریپت برنامه‌ی کوچکی است که با یک زبان خاص مانند VB Script یا  Java Script نوشته می‌شود. و در درون صفحات وب قرار داده می شود. این برنامه کوچکمانند سایر زبان‌های برنامه نویسی وظایفس چون شکل دهی تصاویر و نمایش اطلاعات چند رسانه‌ای را بر عهده دارند.روشی جدیدتر و پیشرفته تر برای انجام وشایف اسکریپت‌ها، استفاده از HTML پویا ( DHTML ) است. با استفاده از  DHTML می‌توان تصاویر متحرک ساده و سایر جلوه‌های خاص را خلق نمود.

صفحات وب وسایت‌های وب

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

 در هر سایت وب ، صفحه‌ی خاصی به عنوان صفحه‌ی مبدا (Home Page ) مشخص می شود. این اولین صفحه‌ای است که بازدید کنندگان از سایت وب آن را مشاهده خواهند کرد. کاربران می‌توانند با کلیک کردن بر روی لینک‌های صفحه‌ی مبدا، از سایر صفحات وب سایت و یا از صفحات سایر سایت‌ها بازدید کنند. این ابرلینک‌ها می‌توانند سایت‌های وبی بر روی همان کامپیوتر و یا سایت‌ها وبی بر روی کامپیوتری در آن سوی جهان باشند. 

آشنایی با نماهای فرانت پیج

وقتی یک صفحه جدید باز می‌کنید در پایین پنجره چهار گزینه وجود دارد. 

• زبانه‌ی Design وب را در نمای صفحه نمایش می‌دهد. 

• زبانه‌ی Code دستورات HTML مربوط به صفحه‌ی جاری را نمایش می‌دهد.

• زبانه‌ی Split شامل دو زبانه بالا همزمان می‌شود.

• زبانه‌ی Preview فرانت پیج صفحه‌یشما را به شکلی که در تماشاگر وب ظاهر خواهد شد، نمایش خواهد داد.

در هنگام نصب فرانت پیج، صفحه‌ای به نام My Webs ساخته می‌شود که فرانتپیج از آن به عنوان پوشه‌ی پیش فرض برای ذخیره‌سازی وب‌های ساخته شده استفاده می‌کند.

 درهنکام ساختن هر وب، فرانت پیج لااقل سه پوشه خواهد شاخت که فایل‌ها وصفحات وب در این پوشه‌ها ذخیره می‌شوند. 

• اصلی : پوشه‌ی پیش فرض است که صفحات وب، تصاویر و فایل‌های کلاس جاوا را در آن قرار می‌گیرند.

•  Private: فایل‌هایی که سازمان‌دهی و مدیریت وب به کار می‌روند، توسط فرانت‌پیج در این پوشه قرار داده می‌شوند. هیچگاه به این پوشه دست نزنید.

• Images: در صورت تمایل می‌توانید فایل‌های تصاویر را به این پوشه منتقل کنید.