نحوه ویرایش template ها

[سینا اکبری]

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

[masoud_pnu]

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

[mohamad_torabi]

این استاندارد فارسی سازی قالب هست
http://monstertemplate.ir/%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D8%AF%D8%A7%D8%B1%D 8%AF-%D9%81%D8%A7%D8%B1%D8%B3%DB%8C-%D8%B3%D8%A7%D8%B2%DB%8C-%D9%82%D8%A7%D9%84%D8%A8/

[سینا اکبری]

نه وردپزس نیست سایت استاتیک است
ممنون میشم یکی کمکم کنه خیلی نیاز دارم

[masoud_pnu]

پس کاری نداره.کاش میشد یه اسکرین شات از قالب بذارین.از همون تغییر دایرکشن شروع میشه.تنها جایی که بنظرم به مشکل بربخورین،قسمت منو و اسلایدر هستش که کمی بدقلقه.الباقی زیاد مشکل نیست.سایت full width هست؟

[سینا اکبری]

این همون template است حجمش 4 مگابایت است ببینید چجوریاست؟ممنون
http://www.uplooder.net/cgi-bin/dl.cgi?key=afde9f627731a74f4014304a84063fbe

[سینا اکبری]

بعد منظورتون از دایرکشن چیه؟

[masoud_pnu]

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

[سینا اکبری]

آها همون dir:rtl منظورتون است

[سینا اکبری]

آخه اینطوری که میکنم عکس ها جابه جا میشن
تو css برای تعیین مکان عکس از margin استفاده کنم؟
چون خیلی وقت است با css کار نکردم یکم یادم رفته

[masoud_pnu]

طراحی این سایت با بوت استرپ انجام شده.با HTML5.علاقه خودم همینه.نخواب تا یه بخشیشو واست فارسی کنم!:لبخند:

[masoud_pnu]

آخه اینطوری که میکنم عکس ها جابه جا میشن
تو css برای تعیین مکان عکس از margin استفاده کنم؟
چون خیلی وقت است با css کار نکردم یکم یادم رفته
خب این بدقلقی که میگم همینه دیگه.

[سینا اکبری]

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

[masoud_pnu]

عزیزی.ببین اصولا بوت استرپ واسه طراحی ریسپانسیوه.واسه اینکه از CSS خودتم استفاده کنی معلومه که میشه.یا inlineتعریف کن(داخل خود تگ،با استفاده از کلمه کلیدی style)یا اینکه تو headبذارشون.منتها المان مربوطه رو با id بهش استایل بده.

[سینا اکبری]

یعنی بوت استرپ تگ داره که باید اون ها رو به css خود متصل کنم؟(اگه میشه یک توضیح کامل)

[masoud_pnu]

نه ببین،یک سری CSSاز پیش تعریف وجود داره تو بوت استرپ که شما به وسیله کلمه کلیدی class اونا رو فراخوانی می کنی.حالا به هر دلیلی خوشت میاد از استایل خودت استفاده کنی،از کلمه styleاستفاده میکنی.متاسفانه ادیتور سایت راست چین و چپ چین رو رعایت نمیکنه.وگرنه با مثال برات مینوشتم.

[سینا اکبری]

اگر شد هر وقت که توانستید با نوت پد بنویسید و عکس بگیرید(ببخشید دستوری گفتم ،اگه شد )

[masoud_pnu]

سینا جان خدمتت.همین فایل index.html رو کپی کن تو پوشه ای که داری.
http://uppit.com/na13j5fsj6hd/index.rar

[masoud_pnu]

اینم استایل دهی در بوت استرپ :
121592

و اینم سایتی که روش دارم کار میکنم.با بوت استرپ:
121594

[سینا اکبری]

ممنون ولی استایل های پیشفرض بوت استرپ رو از کجا بیارم و از کجا بفهمم برای کجاست؟

[masoud_pnu]

خواهش میکنم.خب شما باید بوت استرپ رو دانلود کنی و به پروژه ات attach کنی.تو چه محیطی کدنویسی میکنی؟بگو تا راهنماییت کنم.

[سینا اکبری]

من تو note pad ++ و دریم ویور کد نویسی میکنم(بیشتر note pad ++)

[masoud_pnu]

خب،من همون دریم ویور رو استفاده میکنم.خیلی کاملتره و راحتتر.به این آدرس برو:http://getbootstrap.com/getting-started/#download
روی دکمه download bootstrapکلیک کن تا فایل زیپ دانلود شه.حجمش خیلی کمه.وقتی آنزیپش کردی،یه پوشه اس.محتوای پوشه رو که سه تا فولدر(Css,Js,fonts)هست رو بیار تو پوشه سایتت کپی کن.(همون پوشه سایتی که موقع ایجاد پروژه ساختی).بعد بیا تو محیط دریم ویور.از پنجره filesکه معمولا سمت راست پایینه،روی اسم سایت کلیک راست کن و گزینه آخر،یعنی refresh local filesرو بزن.اگه پنجره files رو نمیبینی،یه F8بزن میاد.میبینی که 3تا پوشه به سایتت اضافه میشن.
حالا میایم تو محیط کدنویسی.منوی فایل رو انتخاب کن.اولین گزینه یعنی newرو بزن.حالا از لیست باز شده،در قسمت چپ blank page،نوع صفهحه که سمت راستشه،اولین گزینه یعنی HTML،نوع layoutرو noneو در آخر که مهمترینه از combobox سمت راست پنجره که doctypeهست،گزینه HTML5رو انتخاب کن و create رو بزن.
حالا میایم تو محیط کدنویسی.الان بصورت عکس برات قرار میدم مراحل رو که گویاتره.

[masoud_pnu]

121608

حالا دقیقا چهارخط کد بالا رو تو جاهاشون بنویس.linkها در میان تگ head،و اسکریپت ها در داخل خود تگ body.منتها توجه کن مسیر فایل ها(hrefدر link و srcدر اسکریپت ها )رو درست بدی.سوالی داشتی بپرس.

[سینا اکبری]

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

[masoud_pnu]

آها!من الان متوجه شدم منظورتو.شما منظورت اینه که سایت فعلی رو تو دریم ویور بازکنی،بعد فایلهای بوت استرپ رو بهش attachکنی،اتوماتیک ریسپانسیو بشه سایتت؟؟؟درست متوجه شدم؟

[سینا اکبری]

بله میخوام با css خودم ریسپانسیو کنم (توسط بوت استرپ)

[masoud_pnu]

نه نمیشه.شما باید از نو و مجددا اقدام به طراحی سایت با استایل ریسپانسیو بکنید.ببین سایت فعلی رو بذار ببینم چجوریه.ولی اینکه انتظار یه برنامه از بوت استرپ داشته باشی درست نیست.چون بوت استرپ یه فریم ورکه.نه برنامه.شما میتونی از توابع و استایل های اون جهت طراحی استفاده کنی.نه اینکه سایت بهش بدی خودش برات ریسپانسیو کنه.اصلا چرا از بوت استرپ یا کندو یا...استفاده میکنیم؟مگه نمیشه خودمونم همین کارا رو با cssانجام بدیم؟بله میشه.ولی انقد مشکل و وقتگیره که اصلا نمیصرفه شما وقتتو پاش هدر بدی.وقتی تمام کاری که شما بعد 3ماه(حداقل)بهش میرسی،الان تو این فریم ورک هست،دیگه چه نیازیه به اختراع مجدد چرخ؟؟

[سینا اکبری]

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

[masoud_pnu]

نه برادر عزیزم.بنده اینجام که در حدخودم به شما دوستان علاقه مند اگه چیزی رو بلدم یاد بدم و یاد بگیرم.وظیفه اس.
ببین همین استایل های بوت استرپ که با کلمه classشما ازش استفاده میکنی انقد زیاده که بنده ناچیز که اصلا هیچ،شاید فقط تیم توسعه دهنده کل این استایل هارو بشناسن.شماهم قرار نیست همه رو بلد باشی.روال کار به این صورته:
1-یه سایت تعریف میکنی و یه اسکچ(طرح اولیه)رو کاغذ میکشی.
2-عملکرد تمام قسمت هارو برای خودت می نویسی.
3-پیش خودت فکر میکنی اگه مثلا این دکمه چجور باشه قشنگ تره؟مثل میگی اگه موس روش رفت،یه کم برجسته بشه و وقتی موس رفت کنار،به حالت قبل برگرده.خب،این افکت رو اصطلاحا میگیم (hoverهاور کردن).میری تو گوگل به انگلیسی تایپ می کنی :mouse hover effect in javascriptیا mouse hover effect in Css.از نتایجی که میاد تقریبا میشه فهمید که چجور باید این افکت رو اجرا کرد.البته کمی شناختن جاوااسکریپت و Cssبرای درک کد لازمه.معمولا سایت stackoverflowخیلی نتایج کاربردی میاره برات.یه کم این اصطلاحات رو یاد بگیری کارت راه میفته.چرا اول گفتم برو سراغ زبان انگلیسی؟اینه.
مراحل بعد خودش در حین طراحی خودشونو نشون میدن که اگه زیاد مهم نباشه همون تو طراحی رفع میشه.
روی marginها و paddingها خیلی مطالعه کن.بینهایت کاربردیه.floatدر طراحی فارسی یعنی همه چیز.و...
اون صفحه ای که دیشب ویرایش کردم رو دوباره ببین کدش رو.متوجه میشی چی میگم.

اینا روال کار بود.حالا شما مثلا میخوای از بوت استرپ استفاده کنی.خب.اولین کار اینه که یه مثال(example) از سایتی که تحت بوت استرپ طراحی شده پیدا کنی(که تو همون سایتی که بالا لینک دادم هست).تو صفحه کلیک راست کن و view page sourceرو بزن.از اسم المان هم مشخصه چی مال کجاس؟مثلا navو navbar مربوط به منوی مشکی یا سفید بالاست.حالا میگردی دنبال divای که این استایل توش بکار رفته.(divوالد که بیرونی ترین divهستش.).مثلا میخوای لوگوی قالب رو که در قسمت چپ هست رو ببری سمت راست.کافیه توی تگ div اون بنویسی style="float:right;"به این صورت.حالا من بعنوان مثال اینارو گفتم.بنظر من فعلا بشین کامل cssرو یکبار با منابع انگلیسی بخون.بعد بیا سراغ فریم ورکها.اینجوری میدونی داری چیکار میکنی.
طراحی یک سایت درست حسابی حتی استاتیک،واقعا کار وقتگیریه.چون هنر شماست،نه رفع تکلیف.سایتی که تو یه روز!یا یه هفته تحویل داده بشه نشان از تخصص و قدرت برنامه نویس نیست.بدترین کار اینه بیای بشینی پای کامپیوتر و همینجوری کد بزنی.

[سینا اکبری]

بینهایت ممنون.
فقط یک منبع برای css سراغ دارید ؟چون کلی کتاب خریدم خوندم .یه چیزایی یاد گرفتم اما یک سایت شیک نمیتونم طراحی کنم

[masoud_pnu]

ببین کتاب رو ولش!:لبخندساده:.کتاب چی میخواد بگه؟کتاب یعنی رفع تکلیف(البته نظر شخصی بنده اس.شاید درست نباشه).شما تا زمانی که تو پروژه نبینی هر المان چیکار میکنه یا هر استایل cssچه تغییری میده،تمام خصوصیته های cssهم حفظ کنی ارزش نداره.شما برو سراغ زبان انگلیسی.نمیگم مثل پینک فلوید بخون!!نه.هی درحد درک مطلب.گوگل ترنسلیت علیه سلام!رو خدا ازما نگیره.یه سر بزن سایت http://www.w3schools.com/
اونجا کامل مرجع تمام زبان های تحت وب هست.اونجا خودش یه ادیتور داره که میتونی تغییرات رو درآن واحد ببینی.وگرنه بیا تا 10تا کتاب معرفی کنم بهت.ولی اگه سطح برنامه نویسی ایران با این کتاب ها به یک صدم خارجی ها هم رسیده،من اسممو عوض میکنم!

[سینا اکبری]

ممنون از کمک شما .بسیار کمک کردید.:بوس::تشویق:

[masoud_pnu]

یه مثال از این سایت برات میزنم.این صفحه رو باز کن:http://www.w3schools.com/css/tryit.asp?filename=trycss_default
حالا فتوشاپم باز کن و پالت رنگ رو بیار.اون دوتا مربعه هست رو همن،سمت چپ انتهای ستون ابزار باریکه.رو یکی از مربع ها کلیک کن.از پنجره بازشده رنگ مورد علاقه تو انتخاب کن.پایین پنجره کد رنگ رو میبینی که با هر رنگ تغییر میکنه.یه عبارت این شکلیه :#A0e4fe.همونو کپی کن(ctrl+c)بعد بیار تو این صفحه مقابل عبارت background-color: پیستش کن.بعد اون بالا submitرو بزن.اینکارو واسه جند رنگ تکرار کن.همینجوری جلو برو.بعد یه ماه ببین به کجا رسیدی؟

این صفحه پارالاکس رو ببین:http://www.bootply.com/nWKuTkyUAw.
تو گوگل فقط نوشتم parallax scrolling bootstrap.دومین نتیجه سرچم بودکه از سایت بوت پلای بهم معرفی کرد.کدش و همه چیزشم بهم داد.همچین سایتی رو اگه تو ایران حتی تونستن تحلیل کنن اونوقت بیا بگو بده!

[سینا اکبری]

css بلد هستم .حرفه ای نیستم این رنگ ها رو بلدم .
من باکس شدو رو میخوام تو این سایت باید چجوری پیدا کنم؟

[سینا اکبری]

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

[masoud_pnu]

بسیار عالی.ببین box shadow رو من با جاوا اسکریپت میگیرم.چون shadowیکی از پراپرتی های CSS3هستش و ممکنه بعضی مرورگرها با Css3مشکل داشته باشن.دقیقا مشکلت چیه باهاش؟چون چیز چندان سختی نیست.
این کد جاوا اسکریپته که موقع هاور کردن موس روی div اونو کمی بزرگترمیکنه و سایه میده،بعد به حالت اول برمیگردونه وقتی موس کنار میره.

<script type="text/javascript">
$(window).load(function(){
$('#rectangle1 , #rectangle2 , #rectangle3 , #rectangle4').hover(function() {
$(this).animate({
width: 205,
height:285,


top: -80,
left: -45
}, 'fast');
$(this).animate().css('box-shadow', '0 0 10px 7px #bcbcbc');
$(this).css({
zIndex: 100
});
}, function() {
$(this).animate().css('box-shadow', 'none')
$(this).animate({
width: 200,
height:280,

top: 0,
left: 0
}, 'fast');
$(this).css({
zIndex: 1
});
});
});
</script>

[سینا اکبری]

اینا رو شما از اینترنت پیدا میکنید؟

[masoud_pnu]

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

[سینا اکبری]

مثلا همین کد رو چی سرچ کردین؟

[masoud_pnu]

how to resize element javascript mousehover.این عبارت رو سرچ کردم.حاصل دوم سرچ یه لینک از stackoverflowبود که لینکی از jsfiddleبود.یعنی این :http://jsfiddle.net/d9feW/.
خودم یه کوچولو جاوااسکریپت بلد بودم،تغییر توش دادم و نتیجه اش شد اینی که میبینی.

ببین این استک اورفلوو خیییلی خفنه.همش این هندیای خوره برنامه نویسین!یه چیزایی توش میبینی مخت سوت میکشه!!اونم همش free!!!:متعجب: