campaign-edianeh-98

آموزش طراحی قالب (فصل چهارم- جلسه دوم) : تکمیل محتوای HTML



visibility  
mode_comment   ۶۶

در این جلسه از آموزش طراحی قالب، محتوای HTML را تکمیل خواهیم کرد.

پس از بخش Header شروع میکنیم.

header

اگر طرح فتوشاپ را در نظر بگیرید، هدر ما به دو بخش راست و چپ  تقسیم می شود.

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

info نکته :

دقت کنید که در قالب های rtl، (راست به چپ) قسمت راست بر قسمت چپ مقدم تر است، اما در قالب های ltr (چپ به راست) این قضیه برعکس است،

به عنوان مثال اگر قالبمان انگلیسی بود کد ما به شکل زیر تغییر می کرد :

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

حال باید هر قسمت را با تگ معیّنی در قسمت مورد نظر وارد کنیم که به ترتیب زیر است :

Logo : لوگوی سایت ، که در اینجا ما نام سایت را قرار داده ایم را با استفاده از تگ h1 می نویسیم

Title : توضیح سایت را به دلیل اینکه اهمیت کمتری نسبت به نام سایت دارد را با استفاده از تگ h2 می نویسیم.

Social Network icons : آیکون ها را با استفاده از تگ img وارد می کنیم.

Search : برای قسمت جستجو نیز از تگ form استفاده میکنیم.

با توجه به توضیحات بالا کد ما به شکل زیر تغییر خواهد کرد.

اگر همه کارها را به درستی انجام داده اید هنگام اجرای کد در مرورگر شاهد چنین نتیجه ای خواهید بود :

info نکته :

دلیل اینکه value دکمه جستجو را خالی گذاشتیم این است که بعدا می خواهیم بجای دکمه از آیکون استفاده کنیم.

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

البته چونکه فعلا لینک ما معلوم نیست، آدرس را # قرار می دهیم.

خب اگر به طرح psdمان برگردیم، قسمت منو را هم داشتیم که در پایین هدر قرار دارد پس برای اضافه کردن آن کد زیر را بعد تگ (.left) قرار می دهیم.

Sidebar

ستون های کناری ما دارای اجزاء کوچکتری به نام بلوک یا همان باکس ها هستند که عناوین مختلفی از جمله موضوعات، لینک ها، امکانات، اخرین مطالب، تبلیغات و.. می گیرند.

طبق طرحمان، ما فقط دو بلوک موضوعات و تبلیغات را داریم که موضوعات در ستون راست و تبلیغات در ستون چپ قرار می گیرد، اما بعضی از دوستان گفته بودند که چگونه سایر بلوک ها را هم اضافه کنیم؟ اگر به کدها دقت کنید متوجه خواهید شد چگونه اینکار را انجام دهید :

کد فعلی ما این است :

برای ایجاد بلوک یه div با کلاس block ایجاد می کنیم

سپس قسمت عنوان بلوک و محتوای آن را نیز درست می کنیم  و آن را در ستون راست قرار می دهیم :

می توان از تگ ul نیز برای ایجاد موضوع های سایت استفاده کرد :

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

ستون تبلیغات را نیز به همین شکل ایجاد می کنیم و بجای تگ ul از img برای وارد کردن تصاویر تبلیغات استفاده می کنیم.و یک بلوک دیگر با عنوان پیوندها نیز بعد از تبلیغات ایجاد می کنیم :

بسیار خب اگر این کد را در مرورگر اجرا کنید باید چنین نتیجه ای رسیده باشید :

اگر مشکلی توی آموزش این جلسه واستون پیش اومده در قسمت نظرات مطرح کنید

comment دیدگاه کاربران
koshmalang

pdf مشکل داره(error 404(

سجاد دریس

برطرف شد

alinaghavi

سلام.سپاس
آموزشهاتون عالیه.حرف نداره به خدا
ممنون

سجاد دریس

سلام.
ممنونم.

Fable HcR

سلام میشه بگید برای گذاشتن ار اس اس و نقشه سایت در وبلاگ کدهارو کجا باید بذارم تو نت جستجو کردم پیدا نشد

وحید صالحی

از چه سیستم وبلاگ دهی استفاده می کنید؟

Fable HcR

وبلاگدهی ایران

وحید صالحی

متاسفانه توابع این رو ندارم…

حسن

سلام وخسته نباشی خدمت آقا سجاد گل!
سجاد جان چنان خوب توضیح دادی ک جای هیچ بحثی باقی نمونده!
ممنون!
منتظر آموزش بعدی هستیم!

سجاد دریس

سلام.
ممنون حسن جان.
راستی ادت کردم. تایید کن.
saman0652

samira2010

سلام
بینهایت عالی…
کلا همه چی راحت و کامل توضیح میدین…
ممنونم

pouria

درود . موقع دانلود error404 میده. به چه صورته؟ 😥

لقمان آوند

با تشکر
برطرف شد

محمد

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

soheil1985

دمت گرم سجاد جان.
فکر کنم به امید خدا از جلیه بعد بالاخره وارد css می شیم. 😆
مرسی بابت آموزش شیوات

سجاد دریس

سلام.
هنوز مطلب و فوتر مونده

soheil1985

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

نکته اول: شاید سوال پیش بیاد که شما تو فوتوشاپ logo و tagline رو بصورت عکس ذخیره کردی، چرا حالا بصورت متنی تو طراحی اومد؟
تا اونجا که من می دونم جواب اینه که موتورهای جستجو عبارات داخل تگ های h رو خیلی اهمیت می دن و معمولا تو طراحی سایت لوگو و توضیحات مهم رو تو این تگ قرار می دن که تو مراحل بعدی آقا سجاد اونها رو با margin از دید یوزر مخفی می کنه و عکس ها نمایش داده می شه ولی از دید موتورهای جستجو مخفی نمی شه. (نحوه اینکار قطعا تو بخش css توضیح داده می شه)

نکته دوم استفاده از id و class تو تگ div
تا جایی که من می دونم از id زمانی استفاده می شه که تگ منحصر بفرد باشه ، مثلا ما در سایتمون یک div – header با مثلا footer بیشتر نداریم ولی همونطور که دیدید تگ block مثلا تو این مثال چهار بار استفاده شده و برای همون از class استفاده شد.

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

باز هم سپاس از آموزشت
موفق باشی

سجاد دریس

سلام.
آفرین، به نکات خوبی اشاره کردی.
کاملا هم درست بود.

الهام

ممنون آقا سهیل دقیقا به سوالای من جواب دادین

از جناب دریس ام خیلی ممنوم بخاطر آموزشهای ساده و روانشون

shatel

سلام
عالیه سجاد جان
چرا تو این جلسه بیشتر id و class مینوشتیم؟
راستی اسکریپت نوشتن برای وبلاگ سخته؟
فرق بین class و id چیه؟

سجاد دریس

سلام.
1. با استفاده از id و class ب divها رو نامگذاری کردیم. که هنگام نوشتن style از اونها استفاده خواهیم کرد.
2. اطلاعات دقیقی ندارم.
3. از id برای عناصر منحصر به فرد، و از class برای عناصری که تکرار میشن استفاده میشه. که در اینجا فقط یک header و footer داریم و باید از id استفاد کنیم، اما چند block داریم که باید از class استفاده کنیم.

sama

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

سجاد دریس

سلام.
همین فایل کدهاتون رو با notepad باز کنید و از منوی file گزینه save as رو انتخاب کنید
سپس در پنجره ای که باز میشه، نام فایل رو index.html و unicode فایل رو utf-8 قرار بدین،
سپس فایل index.html رو در مرورگر باز کنید تا نتیجه رو مشاهده کنید

sama

دقیقا من همین کارو انجام دادم ولی نتیجه معلوم نیست فقط کدها رو توی صفحه ی مرورگر نشون میده؟؟؟؟؟؟

سجاد دریس

مطمئنید پسوند فایل html هست؟!!

سید مهدی

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

hajian1

سلام
ضمن تشکرازسری آموزش های طراحی قالبhtmlکه مثل دیگرآموزش هایتان باارزش ودرسطح بی نقص هست.
سئوالی دارم آیا این قالب رانیزمثل قالب جوملامیشوددرسروررایگان گیگفاراه اندازی کرد؟
باتشکرفراوان موفق وپیروزباشید

سجاد دریس

سلام.
بله میشه.

hajian1

سلام
سجاد دریس عزیزمراحل ثبت نام درگیگفارادرآموزش سری آموزش های جوملاورودبه سی پنل راآموزش دادید
برای این قالب هم بایدفایل قالب رازیپ کنیم ؟
اگرمراحل نصب قالب جوملاکهphpاست بااین قالب که ازنوعhtmlاست متفاوت است لطفاً تفاوت ورودبه سی پنل گیگفا درموردقالب htmlلطفاًراهنمایی نمایید
باتشکر

سجاد دریس

سلام.
منظور من این بود که بعد از تبدیل قالب html به جوملا، میتونید اون روی توی گیگفا آپلود کنید.
قالب html رو که نمیشه استفاده کرد.

علی امینی

با سلام خدمت آقا سجاد عزیز
واقعا عالی آموزش میدی(منظورم اصولیه)
من با اینکه خودم چند تا قالب درست کردم ولی این رو نمیدونستم که قالب های راست چین قسمت راستشون مقدم بر قسمت چپشونه.
در پناه حق باشی یا علی.

masoud

سامانه فروش شارژ + پرداخت قبض
www.timeup.ir
حامی کودکان مبتلا به سرطان محک

مطالب
خیلی عالی بود

ehsan

سلام سجاد جان
بابت اموزشها یک دنیا تشکر
یه سوال
امکان داره اون نرم افزار فتوشاپی که استفاده کردی رو یه لینک دانلودشو بذاری اینجا چون من هر کدومشو دانلود میکنم اکثرا مشکل فارسی دارن یعنی فارسی نمیشه نوشت باشون بعدشم اومدم نسخه me دان کردم بازم نشد لطفا اونی که خودت اسفاده میکنی یه لینک دانلود هم به ما بده
با سپاس

سجاد دریس

من نرم افزاری که دارم رو خریدم. دانلود نکردم.
توی سایت p30download.com بگرد، حتما پیدا میکن ی که با فارسی سازگار باشه.

وحید صالحی

دوست عزیز اگر نسخه me رو دانلود کردین اگه مشکل داشته باشه باید حروف فارسی رو جدا از هم قرار بده نه چسبیده حالا اگه مشکل شما هم همینه از نوار ابزار بالای نرم افزار روی window کلیک کنید سپس از لیست باز شده گزینه paragraph را انتخاب کنید به محض انتخاب و فعال شدن تیک آن پالتی (جعبه ای) با همین نام برای شما ظاهر میشود حال روی آیکن گوشه بالا سمت راست که به شکل 4 خط افقی و یک مثلث در کنار آن است کلیک کنید و از منوی باز شده به ترتیب گزینه های middle eastern single-line composer و right to left را فعال کنید(تیک بزنید) 💡 اما اگه کلا فارسی درش تایپ نمیشه نسخه شما me نیست …
موفق باشی

dream

سلام
ممنون از آموزشهای مفیدتون
من توی طرح وبلاگ ،فقط یه block تو سمت چپ گذاشتم،محیطش رو تقسیم بندی نکردم(منظورم با خط راهنماست)
حالا تو قسمت کد “sidebar” ،باید از left-sidebar و content استفاده کنم،درسته؟

سجاد دریس

سلام.
آره، اگه فقط ستون سمت چپ و محتوا رو دارین فقط از left-sidebar و content استفاده کنید.

laleh

سلام
چرا فصل چهارم جلسه اولش نیست؟ ❗

وحید صالحی

سلام
هست دوست عزیز اینم لینکش

babakh

عالی

محمد

سلام از من متنش فارسی نیست
به جای سایت من و ..
همش علامت سوال گذاشته

محمد

سلام کدوم تگ left منظورتون هست ؟ که منو رو زیرش بزاریم؟؟؟؟؟

سجاد دریس

سلام.
منظورم تگ div با کلاس left بود.

هومن

سلام,یه سئوال این کد هارو باید توی یه بخش جداگانه بزاریم یا تو همون ادامه کد های جلسه پیش

سجاد دریس

سلام.
ادامه کدهای جلسه پیش

....

من تو دریم ویور یه مشکلی دارم،اینکه وقتی فارسی مینویسم برعکس مینویسه(مثلا:”صفحه من” رو مینویسه “من صفحه”)encoding هم رو utf-8 هست
ضمنا میخوام دریم ویور هم مثل notepad++ کدا رو خوب مرتب و رنگی نشون بده(هر چی تگ مینویسم و فقط آبی نشون میده،نوشته ها رو هم سیاه)ممنون میشم جوابمو بدین

کیوان علی محمدی

سلام از چه نسخه ای استفاده می کنید؟نسخه CS6 این مشکلو نداره و فراسی رو درست تایپ میکنه،درباره کد های رنگی هم باید بگم که به صورت پیشفرض همچین حالتی داره،خودتون باید توی تنظیمات برای زبان مورد نظر رنگ های ذلخواه رو انتخاب کنید.

......

از cs4 استفاده میکنم.
اگه میشه بگین تنظیمات موردنظر کدوم قسمته

کیوان علی محمدی

برای درست نوشتن فارسی بهتره آپدیت کنید،برای تنظیمات رنگ ها هم از منوی Edit گزینه Preferences رو انتخاب کنید و بعدش گزینه Code coloring رو انتخاب کنید،توی اون بخش شما زبان های مختلف (Document type) رو میبینید که با انتخاب زبان مورد نظر و انتخاب گزینه Edit Coloring Scheme می تونید رنگ بندی دلخواه رو برای کد مورد نظر اعمال کنید.

meyti pugo

سجاد جان کاش که با html 5 طراحی میکردی.. طراحی با html5 رحت تر شده…

سجاد دریس

سلام.
از5 html استفاده کردم

فرزاد حیات بخش

سلام
خیلی عالی بود فقط یه نکته:در اون قسمت که گفتید “حال باید هر قسمت را با تگ معیّنی در قسمت مورد نظر وارد کنیم که به ترتیب زیر است :” در کد بعدی این نوشته یه اشتباه کوچیک کردید:نوشتید “titمe =”وبسایت من در فیسبوک” / > ”
امیدوارم فهمیده باشید
با تشکر

سجاد دریس

سلام.
آفرین به این دقت.! 😉

jafar_2002

سلام آقا تشکر بسیار قشنگ و واضح بود آموزش.

mm021

سلام خسته نباشید من اون کد های با لا رو نوشتم بد تو بخش هدر اون چهار تا عکس فیسبوک/توییتر/ گوگل پلاس/rss عکس هاش نمیاد چرا کد ها رو هم درست نوشتم مثل شما 😕

سجاد دریس

سلام.
مطمئنید که آدرس تصاویر صحیحه؟

mm021

اره درسته

mm021

درستش کردم

زمان الله

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

سجاد دریس

سلام.
بعد از تگ بسته div با کلاس left قرار می گیره

Abbas412

سجاد جان ممنون بابت آموزشت
همه چی عالی بود
فقط یه سوال
تصاویر شبکه های اچتماعی رو که توی تگ a گذاشتم، بینشون یه خط تیره اومده؛ اونا رو چطوری حذف کنم؟؟
تصویرو ببین، زوم کردم تا بهتر متوجه بشی
http://upload7.ir/imgs/2014-03/88789048699784220841.jpg

سجاد دریس

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

n0n0sh

سایتتون حرف ندارههههه

mohammad nikkhah

سلام
ایا میشه فایل pdf اموزش طراحی قالب رو به صورت کامل بر روی سایت قرار دهید ممنون

سجاد دریس

سلام.
وجود داره.
توی صفحه کاربران vip

محمد

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.