و با پوزش از تاخیر در ارائه مقاله , امیدوارم بتوانیم منظم خیس از قبلی این خصوصی آموزشی را ادامه دهیم .
با نصیب ششم یادگرفتن پباده سازی وبسایت از مبنا در سرویس شما هستیم . در‌این نصیب خواهید آموخت که چه گونه چندین ورقه را در کنار نیز در اختیار بگذاریم و بین آنها تکان کنیم .
آیا ساختن یک کاغذ کافی است؟در بخش های پیشین ساخت یک ورقه از تارنما را آموختیم و اکنون میخواهیم یکسری برگه را در کنار نیز داشته باشیم و بین آنان با پیوند دهی جنبش کنیم . در واقع این یک workshop برای گردآوری اندوخته های شماست .
در بالا کاغذ ای با اسم index . html میسازیم :
“ - //W3C//DTD XHTML 1 . 0 Strict//EN ”
“ http : //www . w3 . org/TR/xhtml1/DTD/xhtml1 - strict . dtd ” >
” http : //www . w3 . org/1999/xhtml ” >
” Content - Type ”
content= ” text/html; charset=utf - 8″/>
” header ” >
” sitebranding ” >
BubbleUnder . com
” tagline ” >
Diving club for the south - west UK – let ’ s make a
splash!
” bodycontent ” >
Welcome to our super - dooper Scuba site
” divers - circle . jpg ”
alt= ” A circle of divers practice their skills ”
width= ” 200″ height= ” 162″/>
Glad you could drop in and share some air with us! You ’ ve
passed your underwater navigation skills and
successfully found your way to the start point – or in
this case , our home page .
طرز ساخت و تگهای مصرف شده در نمونه فوق پیش از این توضیح داده شده‌است . ( سورس تگ img را با چهره‌ای در کامپیتر خویش مالامال نمایید )
درحال حاضر در فلدری که ورقه شما موجود هست از پوشه index . html بایستی 2 توشه نسخه برداری بگیرید . براین اساس :
پس از گزینش فولدر
edit > copy
و آن گاه 2 توشه
Edit > paste
را می زنید درحال حاضر 3 پوشه شبیه دارید که بایستی 2 تای نسخه برداری شده را تغییر تحول اسم دهیم برای همین روی آنان کلیک راست موشواره را فشار می‌دهیم و مورد یrename را میزنیم تا بتوانیم اسم مناسب را به آنها بدهیم . یکی را contact . html و دیگری را about . html اسم گذاری می‌کنیم .
محتوای 3 کاغذ فوق یکسان است و بایستی محتوای صفحه های را بازنویسی فرمائید تا با نیز یکی نباشد برای این عمل صفحه های دوم وسوم را با ابزار هایی که توضیح داده شده‌است نظیر NotePad گشوده نمایید و تایتل و محتوای هر برگه را نسبت به اسم آن تغییر‌و تحول دهید . به صورت نمونه عبارت contact us را برای تگ تایتل در کاغذ contact . html انتخب کنید .
پس از تغییرات در 2 برگه جانور آنها را save نمائید . ( روش save کردن در جلسات قبل توضیح داده شده‌است )
لینک و پیوند کردن صفحه های به نیز :
برگه اولیه یا این که به عبارتی index را گشوده فرمایید و همت فرمایید از آن به کاغذ contact بروید!
آری این قابلیت فعلا نیست و برای جنبش بین صفحه ها متفاوت شما بایستی از link و یا این که anchor استفاده کنید .
” filename . html ” >Link text here
href : یک attribute است و گویا آدرسی است که قرار است به آنجا لینک و پیوند شود
filename . html : اسم کاغذ ایست که قرار است به آنجا لینک و پیوند شود
Link text here : چیزی که در ورقه html به چشم می‌خورد و اسم پیوند متبوع است
این نکته را هیچوقت فراموش نکنید که از لغت ها با مضمون برای پیوند دهی استفاده فرمائید و از کلماتی مثل “ اینجا را کلیک کنید ” خودداری کنید .
درحال حاضر بایستی برای پیوند دهی بین صفحه های یک منو و یا این که navigation تارنما را بسازیم . توجه نمائید شیوه ساخت navigation تارنما مضاعف با اهمیت است و ساختاری که درپی توضیح داده می گردد ساختاری دلخواه و استاندارد برای منوی تارنما هست و خوب تر است حال حاضر نگران ظواهر آن نباشید در پی مقاله‌ها ظواهر آن را خوشگل می کنیم!
ساخت یک منویnavigation
” navigation ” >
” index . html ” >Home
” about . html ” >About Us
” contact . html ” >Contact Us
اکنون کد زیر را برفراز همگی صفحه های پس از تگ div با آی دی header بیشتر فرمایید . به صورت نمونه برای برگه index
“ - //W3C//DTD XHTML 1 . 0 Strict//EN ”
“ http : //www . w3 . org/TR/xhtml1/DTD/xhtml1 - strict . dtd ” >
” http : //www . w3 . org/1999/xhtml ” >
” Content - Type ” content= ” text/html;
charset=utf - 8″/>
” header ” >
” sitebranding ” >
BubbleUnder . com
” tagline ” >
Diving club for the south - west UK – let ’ s make a
splash!
” navigation ” >
” index . html ” >Home
” about . html ” >About Us
” contact . html ” >Contact Us
” bodycontent ” >
Welcome to our super - dooper Scuba site
” divers - circle . jpg ” width= ” 200″ height= ” 162″
alt= ” A circle of divers practice their skills ” />
Glad you could drop in and share some air with us!
You ’ ve passed your underwater navigation skills and
successfully found your way to the start point – or in
this case , our home page .
اکنون به راحتی میتوانید بین 3 کاغذ جنبش کنید .
نکته تالیف کننده : شایسته ترین مکان برای قرارگیری منوی تارنما نیز از حیث ظواهر و نیز در ساختار html بالاترین نقطه ورقه است . مطمئن باشید این به نفع شماست!
و در پایان 3 ورقه خواهید داشت که به راحتی قابلیت و امکان تکان بین یکدیگر را دارا‌هستند .
design - web - 48 . gif
در گردهمایی سپس در باره تگ های blockquote strong , em , توضیحات بیشتری ارائه خواهم بخشید و بعد نوبت افزودن استایل ( ظواهر ) به کاغذ است .
برای تمرین این گرد هم آیی شما یکسری منو را در تارنما های متفاوت مرور نمائید به صورت نمونه برای روز جاری به پباده سازی تارنما اینترنت اسکالا رجوع‌نمایید و نحوه لینک و پیوند دهی در‌این وبسایت را ملاحظه کنید . آن گاه توضیح دهید که چرا صفحاتی که لینک و پیوند شده‌است پسوند ندارند؟
یه آزمایش بی آلایش بکنید – در رابطه یه چیزی که می‌خواهید داده ها بدست بیارید روی گوگل سرچ نمائید و روی یه لینکی که به نظرتون پاسخ خیر و خوبی براتون داره کلیک فرمایید . چقدر ارتفاع میکشه تا روی اون وبسایت داده ها مورد نیازتونو پیدا کنید؟ آیا سرعت بالا و راحت پیدا کردید یا این که به سختی؟ آیا واضحه که کجا می بایست برید و چطور از گزیده به بخش دیگه منتقل بشید؟
اگه بتونید پرسرعت و راحت چیزی رو که دنبالشید پیدا فرمایید یعنی وبسایت عالی پباده سازی شده و طراح سعی تارنما رو مورد‌علاقه داشته . عملکرد حاصل عده خصوصیاتیه که نهایتا سبب ساز به راحتی مسیریابی برای یوزرها میشه که بعدا در موردش بیشتر حرف می‌کنیم .
پباده سازی تارنما از اون جهت اهمیت داره که میتونه روی سرعتی که استفاده کننده داده ها مورد نیازشو پیدا میکنه اثر بذاره . اگه دشوار و خسته کننده باشه , استفاده کننده نیز وبسایت رو ترک میکنه و یه وب سایت دیگه رو آزمون میکنه و این یعنی تلف کردن مجال . یه پباده سازی عالی بایستی براحتی شعور و مسیریابی بشه , به مشتریهای احتمالی یاری کنه تا چیزی رو که میخوان بیابند و شما رو یک پلکان به فروش و دردسترس بودن نزدیک خیس کنه .
اگه احساس می کنید طراحیتون اون چیزی که بایستی باشه نیست , ملاحظه کنید این مساله رو چطور میتونید روی سایتتون بهبود ببخشید :
زیبایی
یه چیزی روشنه : سایت بایستی ظواهر خیر و خوبی داشته باشه . ولی در عین حالا فوق العاده مهمه که همت رو مورد‌علاقه داشته باشیم و اون رو فدای ظواهر تارنما نکنیم . پباده سازی بایستی دیده رو از مهم ترین مورد روی ورقه در جهت مورد ها ثانویه سوق دهی کنه . میتونید این عمل رو با یاری فضاهای خالی و تایپوگرافی انجام بدید . برای درخواستهایی که از استفاده کننده برای مبادرت دارید از تصاویر و رنگها استفاده فرمائید . یه ظواهر ماهر و مدرن میتونه فورا اعتماد به وجود بیاره . بینهایت عمل میشه انجام بخشید البته یه پباده سازی عالی بایستی اعتماد به‌وجود بیاره و استفاده کننده رو در سوی مبادرت متبوع ساماندهی کنه .
سازماندهی
مانند خونه تون می بایست روی تارنما نیز هرچیزی یه جای منطقی داشته باشه که به کاربرها یاری بشه تا چیزی رو که میخوان سریعتر پیدا نمایند . مسیریابی ( فهرست ) وبسایت می بایست منطقی باشه و روی تمامی صفحه های در یک جای واحد قرار داشته باشه . می بایست با مقدار و شرایط قرارگیری محتوای کلیدی و محتوای فرعی معین بشن . هر چیزی که روی ورقه است می بایست هدفی داشته باشه . ما تنها یکسری ثانیه مجال داریم تا روی مخاطب تأثیر بذاریم و اگه سازماندهی تارنما با عقل نوع درنیاد , استفاده کننده برگه رو ترک میکنه .
جرقه نمایشی
می بایست روی سایتتون یه جرقه ای داشته باشید که برای استفاده کننده دیدنی و خواستنی باشه , یه چیزی که دیده ها رو در جهت خودش بکشه . وب یه محیط بصری و نمایشیه به این ترتیب می بایست از تصاویر و فیلم سود ببرید البته توجه فرمایید که متعددی نشه . امکاناتی نظیر اسلایدشو ها , آلبوم تصاویر و فیلمهای یوتیوب ( که روی نتایج سرچ تحت عنوان جزو youtube . com فی مابین ) مورد ها نیکی برای این فعالیت میباشند .
عده بندی
پباده سازی تارنما انتخاب میکنه که استفاده کننده بخواد روی وب سایت بمونه و اقدامی انجام بده یا این که تارنما رو ترک کنه – به همین آسانی . پباده سازی می بایست طوری باشه که اعتمادسازی کنه , منطقی باشه تا مردمان راحت و سرعت بالا بتونن اونچه رو که میخوان پیدا نمایند و در عین حالا اونها رو به سمتی سوق بده تا کاری رو که شما می خواهید انجام تن .
اما درسته که تارنما چیزهای خیلی بیشتری داره و تمامی اش ظواهر نیست – برای مثال استانداردهای کدنویسی و سازش های بین پلتفرمها – ولی اون چیزها رو کاربرها نمیبینند و بسط دهنده هایی مانند اینجانب بایستی مواظبش باشن .
راجع بدین نکاتی که پهنا کردم تصور کنید و سایتتونو در حیث بیارید , ملاحظه کنید پباده سازی سایتتون داره همین امور رو انجام میده یا این که خیر .<iframe
قبلی از راه‌اندازی اینترنت سایتتان این نکات را بررسی فرمائید
سئو : تیتر , توصیفات متا و آلت تگ
تیتر : تیتر کاغذ اینترنت بایستی بتونه محتوا اون برگه رو به صورت ظریف تعریف کنه . این داستان نیز از حیث تجربه کاربری ( احساس استفاده کننده در هنگام فعالیت با ورقه ) اهمیت داره و نیز از حیث باصرفه سازی موتور کاوش ( سئو ) .
توصیفات متا : با اینکه نوشتن تگ های توصیفات متا تحمیلی نیست , البته اگه می‌خواهید از کاغذ نتایج گوگل کلیک بگیرید بایستی حتما بنویسیدشون .
آلت تگ : آلت تگها برای برچسب زدن به عکسهای کاغذ استفاده میشن تا اگه عکس بارگذاری نشد , استفاده کننده بدونه این عکس راجع‌به چیه , ابزارهای تلاوت برگه نمایشگر نیز آلت تگ تصاویر رو میخونن و در سود کاربرهای نابینایی که از این ابزار امداد می‌گیرند میتونن به محتوای تصویر پی ببرند . علاوه بر این در جستجوی تصاویر , موتور کاوش با اعتنا به‌این برچسب ها تصاویر رو ارائه میکنه .
خوانایی محتوای وب سایت
محتوای سایتتونو با توجه بخونید تا غلط تایپی و خطا املایی نداشته باشه .
ریدایرکت 301
ریدایرکت 301 بدین معنیه که محتوای اون برگه بطور مستمر حذف شده و زمانی استفاده کننده نشانی اون برگه رو وارد کنه , برگه به صورت خودکار به برگه دیگه ای منتقل میشه . ریدایرکت 301 به موتورهای کاوش میگه که دیگه این ورقه وجود نداره و مدام به یک کاغذ دیگه منتقل میشه .
بررسی کارایی
بایستی تمامی سایتتونو بررسی نمائید و اطمینان حاصل نمائید که تمامی جوانب وبسایت حیث سعی قابل قبولی داشته باشند .
بررسی واکنشگرا بودن تارنما و روش نمایش اون در مرورگرهای گوناگون
سایتتون بایستی خوب پیکسل بندی شده باشه . حتما بررسی نمائید که وبسایت با همگی مرورگرها و کلیه دستگاه ها سازگار باشه .
برگه 404
اگه بازدیدکننده های سایت به انتها URL چیزی بیشتر نمایند یا این که نشانی رو نادرست وارد نمایند , با کاغذ 404 مواجه میشن . برای این که مسیریابی تارنما راحتتر بشه می بایست یه ورقه 404 صحیح نمایید که استفاده کننده بازه طولانی تری روی وب سایت بمونه و با دیدن این ورقه از تارنما بیرون نشه .
فاویکن
اگه فاویکن داشته باشید , زمانی استفاده کننده یکسری تا تب روی مرورگرش گشوده کرده باشه , میتونه فورا با دیدن فاویکن , وب سایت شما رو بشناسه و بازش کنه . علاوه براین به وبسایتتون ظواهر ماهر میده و به صفحه های متعدد وبسایتتون همبستگی میبخشه .
بعنوان گرافیک یا این که طراح می بایست مدام در جریان رنگهای مد باشید . اهمیت رنگ مد کمتر از خرقه مد یا این که پباده سازی داخلی مد نیست . رنگ مد هر سال رو Pantone گزینش میکنه و برای این سال ( 1396 ) رنگ سبز 15 - 0343 رو معرفی کردند , جدید و جذااب با سایه های سبز - رنگ زرد که یادآوره روزهای بهاریه .
سبز از رنگهای طبیعیه که تو محیط اطرافمون تمامی جا می‌بینیم , مخصوصا تو وقت ها مشقت بار برامون ادب بخشه . میشه از طیف های متفاوت سبز برای تولیدات استفاده کرد .
بقیه رنگهای سال 96
بدون شک رنگ سال فقط بکار نمیره و کنارش رنگهای دیگه نیز میباشند , به این ترتیب طیفهای قابل قبولی از رنگهای دیگه نیز برای این سال دوست داستنی شدند .
با نگاه به طبیعت میتونیم رنگ قهوه ای مایل به بنفش و طوسی رو در کنار رنگ سبز ببینیم , ولی Pantone طیفهای روشن‌تر رو نیز تو فهرست 10 تایی رنگ سالش بکار برده . دیگه این بستگی به شما داره که چطوری این رنگها رو با نیز ادغام فرمائید که حاصل فعالیت اثر گذار بشه .
کاربرد رنگهای مد در پباده سازی
با اینکه ناچار نیستید تنها از رنگ سال تو کارهاتون استفاده نمایید , ولی ما تمدن مدگرایی داریم و به لحاظ میاد مردمان بیشتر به استفاده از رنگ سال گرایش دارا هستند . لوگو و آیکون‌هاتونو که نمیتونید با مد تغییر تحول بدید , زیرا نام‌و‌نشان برندتون خدشه دار میشه , ولی میتونید از این رنگها برای جذب مشتری و نگه داشتنش روی تارنما سود ببرید .
سبز 15 - 0343 طیفیه که با این که قویه میتونه بعنوان دور‌نما عکس وبسایت نیز بکار بره . سبز روی تارنما همون فعالیت علف و برگها رو در طبیعت انجام میده و میتونه سوای اینکه ناهماهنگی به وجود بیاره چه بسا تحت عنوان تکمیل کننده رنگهای دیگه , از روشن تا خنثی , بکار بره . سبز نظیر یه عنصر هماهنگ بین رنگهایی که احتمالا بهم نیان پل میزنه و اون آسانی سیاه و سپید رو نیز نداره .
صورتی بومادران و آبی‌رنگ لاجوردی نیز روشن و جذابند و در پباده سازی گرافیکی , چه صرفا بکار برن و چه در کنار رنگهای دیگه , عالی میشن . البته اگه فراوان و یک پارچه بکار برن متعددی میشه , بهتره به طور رنگ لبه ای یا این که بعنوان رنگ فونت ازشون استفاده بشه .
عدم استفاده از رنگهای دیرین
زمانی از رنگهای مد استفاده میکنید , خودتونو مهیا فرمائید که زمانی زمانش رسید عوضش نمایید . ولی برخی از رنگها نیز اختصاصی به زمان خاصی نیستند . صرفا اعتنا فرمایید که از رنگهای سال پیش یا این که سال های پیش استفاده نکنید! اگه رنگ مد رو تعیین میکنید بایستی مدام پیدایش باشید و هر وقت رنگ سال عوض شد , رنگ سایتتونو تغییر تحول بدید و پوسترهای نو استفاده فرمایید . مد مدام در درحال حاضر تحوله!