آموزش طراحی وب سایت بانرم افزار WYSIWYG web builder9 درباره من:من سینا اکبری متولد 1377 ومدیر 1/26/ وبسایت weandyou.ir میباشم. چون در اینترنت هیچ منبع رایگانی برای آموزش این نرم افزار بسیار عالی و پر کاربرد نیست تصمیم گرفتم که این نرم افزار را آموزش دهم. شما میتوانید این کتاب را در سایت و وبالگ خود قرار دهید شما میتوانید این کتاب را به دوستان خود هدیه دهید شما نمیتوانید در محتویات این کتاب تغییر ایجاد کنید شما نمیتوانید این کتاب را به نام خود انتشار دهید. خیلی از شما ها دوست دارید یک سایت شخصی داشته باشید و برای این کار اقدام کنید وبرای این کار دوراه پیش روی شماست. 1.سفارش طراحی وب سایت به شخصی یا شرکتی 2.خودتان اقدام به طراحی کنید. خوب ما با راه اول کاری نداریم پس میریم سراغ گزینه دوم. مطمئنا گزینه دوم سختی های زیادی دارد که می خواهیم بخشی از آن یعنی طراحی را با هم پشت سر بگذاریم. خوب به امید خدا شروع می کنیم. ابتدا نر م افزارbuilder9 WYSIWYG web را دانلود کنید. سپس نرم افزار را نصب و اجرا کنید. بعد از اجرا با تصویر زیر روبه رو خواهید شد.)ت 1 ( صفحه 1
به تشریح هر بخش می پردازیم: 1.این بخش اصلی ترین بخش کار ما است هر کاری و فعالیت انجام دهید در این بخش نمایش داده می شود ودر این بخش است که می توان عناصر سایت خود را قراردهید و آن های را ویرایش کنید.به عبارت دیگر سایت شما همین است که در اینجا به نمایش در می آید. 2.ابزار های موجود در هر پنجره مانند وارد کردن عکس متن لینک و... 3.جعبه ابزار:تمامی ابزار های شیئ گرا وغیر شیئ گرا یه به عبارت دیگر هر کاری که نرم افزار می تواند انجام دهد در این قسمت قابل دسترسی می باشد که در ادامه به تمام آن ها خوایم پرداخت. 4.سایت منیجر:شما با کمک این بخش می توانید به صفحات موجود در سایت دسترسی داشته ویا در این قسمت صفحه ای ایجاد کنید و به هر صفحه خصوصیات ویژه ای دهید. 5.نام نرم افزار و نام پروژه ای که در حال کار روی آن هستید به نمایش در می آید. 6.پنجره ها:اگر انگلیسی تا حدودی بلد باشید می بینید که پنجره ها کار تقسیم بندی ابزار ها را بر عهده دارد )قسمت 2 که توضیح داده شده می توان از طریق پنجره ها به آن ها دسترسی داشت( 7.این بخش خیلی مهم نیست یا بهتر بگم اصل با آن کار زیادی نداریم وکارش نشان دادن مشخصات هر شیء است. 8.این بخش خییلییییی مهم است.هر عنصری مثل نوشته عکس لینک جدول دکمه و... در صفحه )قسمت 1 ( باشد می توان خصوصیاتی مثل رنگ شکل سایه یا روشن بودن و... در این قسمت اعمال کرد.)در ادامه آنقدر با این بخش کار می کنیم که با آن بیشتر آشنا خواهید شد( خوب حاال شروع می کنیم. ابتدا باید شکل سایت رو درست کرد من در اینجا باید چیزی به شما بگم :شما می توانید هر شکلی که در ذهنتان وجود دارد با این نرم افزار بسازید. و برای این کار می توانید با نرم افزار از قسمت جعبه ابزار )قسمت 3 که در باال توضیح دادیم( هر چیزی دوست دارید وارد کنید وسایت را بسازید اما چون ما وقتی آنچنانی نداریم با هم سایتی ساده طراحی می کنیم. اما با تمام ابزار آشنا می شویم وکار هر کدام را بررسی می کنیم تا شما بتوانید هر چیزی را خودتان با آن طراحی کنید. البته این کار همت خودتان را می خواهد چون شما بایدخودتان هم بعد از توضیحاتم آنقدر با ابزار ها خودتان کار کنید تا خوب یاد بگیرید. new web site from template را بزنید )ت 2 ( اما بریم سراغ کار خودمون ابتدا از پنجره file گزینه صفحه 2
سپس از پنجره باز شده شکل مورد نظر )آن چیزی که شباهت بیشتر به تصوری که در ذهنتان است را انتخاب کنید( )ت 3 ( نکته:نگران نباشید این که ما از وبسایت آماده استفاده می کنیم فقط جهت آسان تر شدن کار است بعد ب ها تغییر خواهیم داد. م به طور کلی شکل را به شکل مورد نظر صفحه 3
سپس okرا بزنید. حال باید فایل را ذخیره کنیم برای این کار ابتدا فولدری در هر جا می خواهید تشکیل دهید و نامی برای آن انتخاب کنید سپس از پنجره فایل گزینه save web site as را بزنید و مسیر فولد را انتخاب کنید.)ت 4 ( صفحه 4
آموزش طراحی وب سایت با نرم افزار WYSIWYNG web builder 9 قسمت دوم ایجاد اولین تغییر در قالب می خواهیم عبارت Welcome to my amazing picture web site را تغییر دهیم ومتن دلخواه خود را بنویسیم)قالبی که من انتخاب کردم این متن است شاید قالبی که شما انتخاب کردید چیز دیگری باشد( برای این کار دو راه وجود رارد : 1.ابتدا روی گزینه یک بار کلیک راست کرده و گزینه delete را بزنید و سپس از قسمت insert گزینه text را انتخاب کرده وسپس در مکان مورد نظر بکشید و سپس دوبار کلیک کرده و متن مورد نظر را بنویسید )ت 5 ( 2.روی همان متن دوبار کلیک کرده و متن مورد نظر را بنویسید)راه اول را گفتم چون اگر خواستید در جایی خودتان متنی اضافه کنید و از قبل در آنجا متنی نباشد این کار را یاد گرفته باشید()ت 5 ( صفحه 5
تغیرات در نوشته ابتدا روی نوشته دوبار کلیک کنید وسپس متن را نتخاب کنید ودر سربرگ formatتغیراتی همچون :رنگ اندازه فونت لینک دار کردن افکت دادن و...را اعمال کنید حال می خواهیم شعار وبسایت را بنویسیم برای این کارمی توان از روش 1 که در باال گفته شد استفاده کرد اما این بار روشی دیگر از جعبه ابزار واقع در سمت چپ از قسمت standard گزینه text را به جایی که می خواهید بکشید و دوبار کلیک کرده و متن را بنویسید)ت 6 ( درج تصاویر در وب صفحه 6
برای این کار می توانید هم از سربرگ insert اقدام کنید وهم از جعبه ابزار. ابتدا در جعبه ابزار از قسمت images گزینه image را انتخاب و به داخل صفحه می کشیم سپس پنجره ای مانند شکل زیر باز می شود)ت 7 ( مسیر عکس را انتخاب کرده و روی open کلیک می کنید. دادن افکت وتنظیمات عکس برای این کار دوراه وجود دارد اولین راه راست کلیک کردن وانتخاب گزینه tools که برای تنظیماتی مثل سایه رنگ ابعاد و... است ویا effects که برای افکت دادن)جلوه ویژه(است. اما راه دوم روی عکس کلیک کرده و در پنجره format عالوه بر toolsو effects می توان تنضیمات دیگری هم انجام داد)ت 8 ( پایان قسمت 2 قسمت 3 افزودن لینک روی متن یا عکس ها لینک چیست شاید برای شما هم بار ها پیش آمده که در سایت های دانلود نوشته برای دانلود کلیک کنید وقتی روی عبارت >دانلود<کلیک می کنید به صفحه یا آدرسی می رود.لینک عبارت است ازدادن آدرس اینترنتی به یک نوشته یا عکس. صفحه 7
برای این منظور پس از انتخاب متن یا عکس رو آن راست کلیک کرده و از منوی باز شده گزینه link را بفشارید یا بعد از انتخاب متن ویا عکس در پنجره home روی عبارت link کلیک کنید تا پنجره edit hyperlink باز شود. سپس در باال چند گزینه وجود دارد که به شرح هر کدام می پردازیم: http:// برای آدرس دهی به یک آدر سی اینترنتی استفاده می شود مثال :external web address.1 pr.2 : page in this برای لینک دادن به صفحات خود پروژه که بعدا به آن می پردازیم address.3 email :برای لینک دادن به یک آدرس ایمیل استفاده می شود. :file.4 برای این که از کامپیوتر خود فایلی را بگذارید که در ایران کاربردی ندارد. برای آن که پس از کلیک بر روی لینک در پنجره ای جدید باز شود باید از پایین صفحه از target گزینه Open in a new browser window را انتخاب کنید. ایجاد صفحات جدید برای وب سایت همانطور که می دانید یک وبسایت از صفحات زیادی تشکیل می شود. صفحه 8
site manager اقدام به این کار کنید. آموزش طراحی وب سایت بانرم افزار WYSIWYG web builder9 برای ایجاد صفحه جدید باید در قسمت برای این کار در قسمت file manager راست کلیک کرده و بر روی open new page کلیک کنید یا اگر می خواهید از صفحات آماده موجود در نرم افزار استفاده کنید در قسمت خالی سایت منیجر راست کلیک کرده و گزینه new page from template را انتخاب کنید. حال صفحه به نام page1 ایجاد می شود برای تغییر نام باید رو آن راست کلیک کرده و گزیته rename page را انتخاب کنید حال هر اسمی می خواهید)انگلیسی( انتخاب کنید من نام آن را red-me انتخاب می کنم)ت 11 ( برای حذف صفحه هم می توانید در قسمت site manager روی صفحه مورد نظر کلیک کرده و بر روی عالمت ضربدر موجود در باال آن را حذف کنید)ت 11 ( پیش نمایش وب برای این کار کلید f5 را از روی کیبورد بفشارید. می بینید نوشته های فارسی ناخوانا هستند حاال ما این مشکل را رفع می کنیم )نکته: با این کاری که در ادامه گفته می شود فقط نوشته های فارسی نوشته می شوند ولی اساندارد نیست ولی بعد به شما استاندارد سازی را نیز می گویم( صفحه 9
برای این کار از سربرگ page گزینه page properties را بزنید و پنجره ای به شکل زیر باز می شود)ت 12 ( در قسمت language در قسمت character گزینه (windows-1226) Arabic را انتخاب کنید ودر قسمت page language گزینه Farsi را انتخاب کنید ودر قسمت Direction گزینه دوم را انتخاب کنید وسپس ok کنید. پایان قسمت 3 آموزش طراحی وب سایت قسمت 4 صفحه 11
طراحی و ویرایش صفحه خوب من شما رو به صورت جزئی باکارکرد نرم افزار آشنا کردم)اگر چیزی متوجه نشدید نگران نباشید( حاال برمی گردیم و کار اصلی یعنی طراحی رو شروع می کنیم. فقط یک خواهش تا آخر و خط به خط بخونید چون دیگه اصل مطلب از اینجا شروع میشه از اآلن به بعد میخواهیم با تمام امکانات این نرم افزار آشنا شویم. خوب اول از بک گراند یا همون صفحه پشتی شروع میکنیم برای تغیراتی مثل رنگ اندازه و...به سربرگ page بروید و گزینه page properties را انخاب کنید در این پنجره گزینه هایی وجود دارد که به تشریح هر کدام می پردازیم. صفحه ی جنرال( general ( 1.نام صفحه 2.اسم منوی سایت 3.طول و عرض صفحه 4.زبان برنامه نویسی سایت 5.نسخه زبان برنامه نویسی 6.فویکون:اگر دیده باشید وقتی وارد سایتی میشود در مرورگر کنار آدرس آن سایت عکسی به نمایش در می آید که میتواند آن را از این قسمت وارد کنید 7.دراین باره قبال گفتم سربرگ استیل )style) صفحه 11
1.مدل بک گراند :میتوان بک گراند را به جای رنگ هر عکسی که می خواهید بگذارید یا متن یا... 2.اگر گزینه sold را انتخاب کنیداز این قسمت می توانید رنگ را انتخاب کنید. 3.کار هایی را که اعمال کردید در اینجا پیش نمایش آن نمایش داده میشود. 4.لینک ها میتوانید رنگ لینک های موجود در سایت را انتخاب کنید )اگر میبینید چند رنگ وجود دارد به این علت است که میتوان رنگ لینک را در حالت های مختلف نمایش داد مثال رنگ اصلی لینک رنگ بعد از دیده شدن لینک رنگ لینک وقتی موس روی آن می رود... 5.متن:میتوانید رنگ متن سایز فونت و...را انتخاب کنید سربرگ های بعدی را بعدا بررسی خواهیم کرد. خوب حاال اگر رنگ یا عکس یا هر تنظیم دیگری که میخواستید در بک گراند درست کنید را انتخاب کنید و ok را بزنید تا به سراغ تغییر دیگر جا ها برویم. خوب حاال میخواهیم هدر سایت )باالی سایت(را تغییر دهیم برای این کار میتوانید خودتان شکلی راوارد کنید که همانطور که گفته شد از ستون سمت چپ آن را به داخل صفحه بکشید و شکل خود را انتخاب کنید ولی اگر شکلی که است را می خواهید تغیر دهید روی آن دوبار کلیک کنید)دابل کلیک( در سربرگ اول میتوانید شکل هندسی رنگ حاشیه و...را انتخاب کنید ودر سربرگ دوم رنگ نوشته هارا ودر سربرگ سوم رنگ و ویژگی های لینک را انتخاب کنید ودر سربرگ چهارم میتوانید به آن افکت دهید همین کار را برای تمام اشکال صفحه ی سایت خود انجام دهید ویا اگر میخواهید آن ها را حذف کنید و هر چه خودتان میخواهید وارد صفحه سایت کنید. صفحه 12
سایت من را ببینید)ت 17 ( مثل من هر چه خواستید را تعییر دهید. مثال ببینید به کمک clip art دور نوشته ام را کادر انداختم.)میدونم اآلن این پروژه ای که ساختم قشنگ نیست اما چون قصد دارم فقط آموزش دهم اینطوری است( ساخت صفحه ویدیو ها حال صفحه ای درست میکنیم و اسم آن را videos میگذاریم)نحوه ایجاد صفحه وتغییر نام را قبال گفتم( حاال آن صفحه را با صفحه اصلی هماهنگ میکنم برای این کار روی صفحه در پنجره site manager راست کلیک می کنم وگزینه import page from another project را انتخاب میکنیم و در صفحه باز شده پروژه خود را انتخاب میکنیم)ت 18 ( سپس open را میزنیم وصفحه ای دیگر باز میشود که باید صفحه index را انتخاب کنید )ت 19 ( و ok را بزنید صفحه 13 یا اگر خواستید کال از اول به هرشکلی که میخواهید خودتان صفحه را طراحی کنید.
اگر دیده باشید بعضی سایت ویدیو های آنالین رادر سایت قرار میدهند وشما برای تماشای آن ها نیازی به دانلود ندارید)البته از حجم اینترنتی شما هم کم میکنند( ما هم میخواهیم همین کار را انجام دهیم برای این کار از منوی ابزار موجود )ستون سمت چپ نرم افزار(از قسمت mediaهر یک از پخش کننده های ویدیو را خواستید انتخاب کنید من real player را انتخاب می کنیم و داخل صفحه میکشم سپس رو آن دابل کلیک کنید پنجره زیر باز میشود روی browse کلیک کنید ومسیر ویدیو را انتخاب کنید سپس از قسمت controls گزینه all را انتخاب کنید. نکته :بیشتر مرورگر ها flash player را پشتیبانی میکنند پس بهتره شما هم از آن استفاده کنید. پایان قسمت 4 قسمت 5 ایجاد گالری عکس slide show زیبایی یک وبسایت به گرافیک آن است و یکی از الزمه های مهم برای گرافیک استفاده از عکس های زیبا است. در سایت ها حتما از عکس ها استفاده میشود بدون هیچ شکی. سایت هایی هستند که برای فروش محصوالت خود در ابتدا انتها و...سایت خود جدید ترین محصوالت یا پر فروش ترین محصوالت و...را به صورت یک گالری قرار میدهند.اما چگونه میتوان این کار را با web builder انجام داد به راحتی برای این کار از قسمت ابزار های موجود در سمت چپ نرم افزار از قسمت images گزینه slide show )شکل 21( را به داخل صفحه بکشید صفحه 14
سپس پنجره ای به شکل زیر باز میشود که باید هر عکسی را از هر جایی که می خواهید را انتخاب کنید )نکته :هم میتوانید یکی یکی عکس وارد کنید و هم باگرفتن دکمه ctrl وانتخاب عکس ها آنها را وارد کنید( سپس ok را بزنید. بعد از انجام اینکار ها عکس های شما وارد صفحه میشوند و میتوانید آن را از گوشه گرفته وسایز آن را تغییر دهید. حال برای افکت دادن وساخت اسالید شودوبار روی آن کلیک کنید تا صفحه زیر باز شود. صفحه 15
به تشریح آنها می پردازیم 1.می توانید با گزینه addعکسی را اضافه کنید edit. عکس را ویرایش کنید. remove عکس را حذف کنید 2. برای ایجاد افکت ها زمان نمایش هر افکت نمایش دادن نام عکس و... اقدام کنید. حال به سراغ سربرگ styleمیرویم. در قسمت اول میتوانید برای اسالید شو یا همان گالری خود قاب بیاندازید رنگ قالب را انتخاب کنید واز قسمت فرم یا frame برای اسالید شو فرم بگذارید. از قسمت دوم هم میتوانید رنگ نوشته های اسالید فونت آن سایز چپ چین راست چین وسط چین را انتخاب کنید و... قسمت سوم هم چون کار هایی زیادی میتوان با آن انجام داد نمیتوانم همه آن را توضیح دهم که وقت یاری نمیدهد ولی قول میدهم شما هم اگر مقداری با آن کار کنید کامل یاد میگیرید. در سربرگ boxهم shadow میتوانید برای اسالید سایه ورنگ سایه را انتخاب کنید. سپس ok را بزنید تا پنجره بسته شود حاال کلید f5 را بزنید تا اسالید خود را در مرورگر خود ببینید. پایان قسمت 5 قسمت 6 طراحی منو سایت حال می خواهیم برای سایت منویی را طراحی کنیم منویی که در باالی سایت زیر هدر واقع باشد برای این کار ابتدا شکل هندسی مورد نظری را که میخواهیم با طرح ورنگ مورد نظر ترسیم می کنیم که این کار قبال گفته شده اما یکبار به طور خالصه میگم از قسمت drawing ابزار shape رابه داخل صفحه بکشید سپس روی آن دوبار کلیک کنید وتنظیمات رنگ سایه و...را انجام دهید.مانند شکل زیر صفحه 16
سپس از قسمت navigation ابزار tab menu را به داخل صفحه وروی شکل مورد نظر بکشید وروی آن دوبار کلیک کنید تا صفحه تنظیمات باز شود وارد سربرگ style شوید و رنگ مورد نظر دکمه ها نوشته ها و حاشیه ها را انتخاب کنید و برروی ok کلیک کنید تا تنظیمات اعمال شو سپس دوباره صفحه تنظیمات را باز کنید واین با به سربرگ generalبروید روی item1 کلیک کنید و editرا بزنید حال در پنجره جدید نام را صفحه اصلی بگذارید و تنظیمات مربوط به لینک را که قبال گفتم رو انجام دهید مانند شکل صفحه 17
صفحه index را انتخاب کنید وok رابزنید همین کار را برای 3 item1,item2,item به صفحات دیگر سایت لینک دهید و تنظیمات را save کنید. و...انجام دهید و نام هر کدام هرچه می خواهید بگذارید و نکته :اگر دیده باشید در بعضی سایت ها در منوی هدر سایت)همان منوی باالی سایت( وقتی روی گزینه ای میروید پنجره ای باز میشود که چند گزینه دیگر وجود دارد برای ساخت چنین پنجره به جای ابزار tab menu از ابزار mega menu استفاده کنید کار با هاش مانند همین است فقط گزینه ای اضافه دارد که مربوط به رنگ وشکل ظاهری زیر پنجره یا همان گزینه های باز شده است است. طراحی منوی فوتر این منو واقع در پایین ترین قسمت سایت می باشد که به آن فوتر میگویند برای این کار باید از ابزار text menu استفاده می کنیم برای این کار مانند قبلی ابتدا شکل هندسی فوتر رانتخاب می کنیم و ابزار را روی آن میکشیم وروی آن دوبار کلیک می کنیم تا صفحه تنظیمات باز شود برا تغیر شکل ورنگ متن لینک ها به صفحه style بروید و از قسمت link style گزینه style1 را انتخاب کنید سپس editرا style بزنید و تغیرات را اعمال کنید حال به سربرگ general باز گردید و مانند منوی قبلی تنظیمات لینک را انجام دهید وok کنید. طراحی منوی دکمه ای کنار سایت برای اینکار از ابزار navigationbarاستفاده کنید و آن را به داخل صفحه بکشید روی ان دوبار کلیک کنید تا صفحه تنظیمات باز شود و مانند. دو منوی قبلی در سربرگ style تنظیمات ظاهری ودر سربرگ general تنظیمات مربوط به لینک را انجام دهید نکته:میتوانید با استفاده از ابزار shape هر شکلی می خواهید درست کنید و سپس با استفاده از ابزار آن ها لینک دهید و اینگونه منو طراحی کنید مثل من: textمتن مورد نظر را روی ان نوشته و به پایان قسمت 6 صفحه 18
قسمت 7 طراحی صفحه ارتباط بامن در هر سایتی میبایست پل ارتباطی بین بازدید کننده با مدیر وبسایت باشد مثال اگر در سایت شما مشکلی پیش آمده باشد بازدید کننده از طریق این فرم می تواند به شما خبر دهد.حال می خواهیم با هم یک فرم ساده ارتباط با من را بسازیم. البته قبل از شروع یک نکته ای رو بگم با این نرم افزار می توان فرم های بسیار متنوع با کاربرد های گوناگون ودکمه های بسیاری ساخت اما به دلیل کم بود وقت چندی از آن هارا می گویم تا کار با بقیه را یاد بگیرید چون کار با این فرم ها بسیار شبیه به هم است. ابتدا یک صفحه می سازیم که در قبل گفتم حال یکبار دیگر به صورت خالصه میگم. ابتدا در قسمت site manager در قسمت خالی آن راست کلیک کرده و گزینه new page را بزنید. یا اگر می خواهید این صفحه مثل شکل های دیگر باشد رو صفحه index راست کلیک کرده سپس گزینه from. import page را انتخاب کنید سپس صفحه مورد نظر را انتخاب کرده و okرا بزنید.اگر متوجه نشدید آموزش های قبلی رو بخونید. form wizard را انتخاب کنید. خوب ابتدا صفحه ای می سازیم با نام دلخواه سپس از قسمت form controls ابزار حال در پنجره ی باز شده گزینه اول را انتخاب کنید وسپس next را انتخاب کنید ودر پنجره جدید در سمت چپ گزینه هایی وجود دارد که می توانید دانه به دانه آن ها را ببینید برای این کار روی گزینه ها یک بار کلیک کنید و در کادر سمت چپ شکل وگزینه های موجود در آن را ببینید. صفحه 19
اما ما برای ساخت فرم گزینه contact2 را انتخاب می کنیم وسپس next را انتخاب می کنیم. سپس در پنجره باز شده اگر می خواهید گزینه هایی را حذف کنید روی گزینه کلیک کرده و remove را انتخاب کنید واگرمی خواهید گزینه ای را اضافه کنید add را انتخاب کنید وسپس گزینه را من در اینجا گزینه های کد تلفن کشور وشهر را حذف می کنم و روی اد کلیک می کنم وگزینه ای جدید به نام text area را انتخاب می کنم این ابزار برای آن است که کاربر متن پیام را در آن بنویسد. حال نام گزینه های دیگر را با استفاده از گزینه edit عوض می کنم و next را میزنم. حال در پنجره ی جدید تنظیمات را مانند عکس انجام دهید. نکته:در عکس زیر در پایین دو گزینه وجود دارد به نام successو url error url گزینه اول برای این است که وقتی کاربر پیام را ارسال می کند پیامی ظاهر می شود مبتنی بر این که پیام با موفقیت ارسال شد و گزینه دوم یعنی ارسال موفقیت آمیز نبود برای این کار باید دو صفحه جدا بسازید و این پیام هار درون آن بنویسید و آدرس آن را در جلوی این دو گزینه قرار دهید. حال فرم ساخته شده و برای تغییر نام گزینه ها روی متن آن دوبار کلیک کنید وسپس نام مورد نظر را بسازید برای تغیر شکل فرم می توانید رو آن دوبار کلیک کنید و تنظیمات را انجام دهید. فرم ساخته شده توسط من صفحه 21
page حال باید کاری اساسی انجام دهید تا فرم بعد از انتقال به اینترنت به درستی کار کند ابتدا به سربرگ properties را انتخاب کنید و سپس تنظیمات را مثل شکل زیر انجام دهید pageبروید و سپس گزینه پایان فصل 7 صفحه 21
قسمت 8 ایجاد فرم با گزینه وامکانات دلخواه در قسمت قبل شما از فرم آماده استفاده می کردید هرچند که میتوانستید گزینه هایی را حذف و گزینه های را اضافه کنید پس این قسمت هم مانند قسمت قبلی میباشد.برای اینکار ابزار form wizard را به داخل صفحه بکشید وهر گزینه ای میخواهید انجام دهید و بقیه ی کار ها را مثل فرم قبلی انجام دهید چوم هیچ تفاوتی ندارند. سازگاری صفحات با استاندارد utf-8 برای نمایش متون به صورت فارسی قبال ترفندی به شما گفتم اما اینبار ترفندی را میگویم که سایت شما به صورت کامل انجام شود البته از شما میخواهم که این کار را آخر سر یعنی زمانی که میخواهید سایت را به اینترنت بفرستید انجام دهید اما از اآلن میگم چون باید بلد باشید. ابتدا از قسمت file گزینه as save web site را برگزینید وسپس گزینه html documents را انتخاب کنید. حال محل زخیره سازی را انتخاب کنید و ok را بزنید و سپس doneرا بفشارید حال به محل ذخیره سازی رفته و روی تک تک فایل ها بجز عکس ها تغیرات زیر را انجام دهید روی فایل مورد نظر راست کلیک کرده وگزینه open with را بزنید ودر برنامه ی note pad آن را اجرا کنید سپس دنبال گزینه ای به نام charset=windows-1256 بگردید و آن را به charset=utf-8 تغیر حال از قسمت file گزینه save as را انتخاب کنید حال گزینه save as type را در حالت all files قرار دهید و encoding را روی UTF-8 قرار دهید و سیو را بزنید مانند شکل صفحه 22
. تنظیمات سایت برای گوگل بینگ ویاهوو... meta tags را انتخاب کنید حال وارد سربرگ page properties وارد قسمت بنویسید. page شوید وگزینه شوید در قسمت اول authorنام خودتان را در قسمت دوم keywords کلمات کلیدی را بنویسید و آن را با, از هم جدا کنید)کلمات کلیدی برای موتور های جستوجو هستند مثال اگر کسی در اینترنت جست و جو کند دانلود گوگل ودیگر موتور ها از کلمات کلیدی سایت استفاده می کنند و آن سایت را می آورند( قسمت سوم description درباره ی سایتتان چند خطی بنویسید صفحه 23
در قسمت چهارم هم آدرس سایتتان را بنویسید و ok کنید. پایان قسمت 8 قسمت 9 ایجاد جدول وبنر حال میخواهیم صفحه ای داشته باشیم که در آن جدولی قرار دهیم برای این کار از قسمت standard ابزار table را به داخل صفحه بکشید و در پنجره بازشده درقسمت 1 تعداد خطوط افقی و در قسمت 2 تعداد خطوط عمودی را مشخص کنید درقسمت 3 ضخامت خط ها ودرقسمت 4 فاصله دوخط از یکدیگر رامشخص کنید وبرای تغیر رنگ وشکل به سربرگstyle بروید. صفحه 24
ایجاد بنر از بنر ها برای موارد زیادی از جمله تبلیغات ومعرفی و..استفاده میشود و تغریبا 51 درصد وبسایت ها بنری را درخود جای داده اند حال ما هم برای این کار از قسمت drawing ابزار banner را به داخل صفحه می کشیم در شکل ایجاد شده دوبار کلیک کرده تا به صفحه تنظیمات برویم دیگر چیزی برای توضیح نیست چون تا اآلن با تمام این سربرگ ها وگزینه ها آشنا شده اید وتوضیحات را به شما داده ام اما یک نکته وآن این است که در سربرگ publish درقسمت formatگزینه دوم یعنی standard publish as را انتخاب کنید همین وتمام. پایان قسمت 9 قسمت 11 تغییر اندازه صفحه وب برای تغییر اندازه صفحه وب )طول وعرض( به قسمت page peroperties بروید و در قسمت widthو hieght اینکار را انجام دهید. صفحه 25
افزودن فایل جاوا به وبسایت. برای این کار از نوار ابزار در قسمت media ابزار java را به داخل صفحه بکشید وبا دابل کلیک بر روی آن فایل جاوای خود را انتخاب کرده و آن را در سایت خود قرار دهید. ایجاد امکان عضویت در سایت برای این کار از پنجره login ابزار signup را به داخل صفحه وب قرار دهید ودر هرکجا میخواهید آن را قرار دهید وروی آن دوبار کلیک کنید تا صفحه تنظیمات باز شود حال می توان رنگ متون وهمچنین رنگ جداول و...را تغییر دهید و متن های انگلیسی را به فارسی تغییر دهید وبر روی okکلیک کنید کادری باز میشود که باید آن را تائید کنید. صفحه 26
حال از قسمت publishگزینه newرا بزنید وتنظیمات را مانند عکس انجام دهید. 1.باید توضیحاتی در باره وب وبدهید صفحه 27
2.آدرس سایت را وارد نمایید 3.بازهم آدرس سایت را مانند باال وارد نمایید. 4.یوزر هاست یا سروری که خریده اید 5.پسورد هاست یا سرور که خریده اید سپس برروی ok کلیک کنید. حال بر روی کادر عضویت دابل کلیک کنید واین بار بر روی create database کلیک کنید حال بر روی فایلی که ساختیم کلیک کرده و next را بفشارید. حال در قسمت مشخص شده در عکس عبارت : public-html/user/usersdb.php را وارد کنید. نکته:باید اول به اینترنت وصل شوید سپس در هاست خود پوشه ای به نام user ایجاد نمایید. حال برروی finish کلیک کنید. افزودن امکان ورود وخروج به حساب کاربری برای این کار ابزار login )ورود( و logout )خروج( را به داخل صفحه بکشید وبا جفت کلیک تنظیمات رگ ونوشته ها را انجام دهید حال بر روی edit database کلیک کرده و دیتابیسی را که باهم ساختیم را انتخاب کرده و ok را بزنید. ایجاد امکان تغییر رمز ویاد آوری رمز برای یاد آوری کلمه عبور کافی است ابزار password recovery را به داخل صفحه کشیده و مانند تنظیمات قبل عمل کنید. برای تغییر کلمه عبور ابزار change password را به داخل صفحه بکشید وبا جفت کلیک صفحه تنظیمات را باز کنید ومانند دو تنظیم قبل با کلیک بر ادیت دیتابیس و انتخاب دیتا بیس ساخته شده وزدن ok کار تمام میشود. ارسال سایت بر روی هاست یا سرور هاست یا سرور چیست هاست وسرور کامپیوتر هایی هستند که به صورت مداوم به شبکه جهانی اینترنت متصل هستند وما فایل ها واطالعات خود را بر روی آن ها قرار میدهمیم تا دیگر با زدن نام دامنه در مرور گر بتوانند به آنها دسترسی داشته باشند دامنه دامنه آدرس اینترنتی است که به هاست متصل است واز طریق آن میتوان به وبسایت دسترسی پیدا کرد. خوب حاال برای ارسال سایت بر روی اینترنت فایل ها وپوشه های عکس را که قبال سیو کرده اید را با وارد شدن بر هاست خود و زدن گزینه file manager وانتخاب گرینه public-html در این قسمت آپلود )upload( کنید. نکته:بهتر است اول فایل ها و عکس هار در یک فایل زپ ایجاد کرده وسپس آن را آپلود کنید. صفحه 28
پایان من برای تهیه این کتاب زحمت زیادی را کشیده ام خواهش میکنم در آن تغییر ایجاد نکرده وآن را به نام خود در نیاورید وبرای حمایت از من این کتاب را به دوستان خود معرفی کنید. سینا اکبری آموزش کامپیوتر واینترنت واخبار آی تی صفحه 29