-
آموزش گام به گام html به صورت تصویری
با سلام .
آموزش تصويري html . سعي شده تا جايي كه امكان دارد كاربردي باشد . البته مطمئنا داراي نواقصي است .
اين دوره در قالب 18 ويديو ارائه مي شود . كه دروس آخر كار با محيط نرم افزار dream weaver مي باشد .
در ابتدا نرم افزارهای لازم را نصب کنید :
1 ) نرم افزار Macromedia Dream Weaver 8
Hotfile.com: One click file hosting: MyEgy.com.Macromedia_Dreamweaver_8_by_Shbabz.rar
دوستان مي توانند از notepad هم استفاده كنند .
درس شماره یک
http://rapidshare.com/files/401142093/1.rar
دوستانی که تو دیدن فایل های ویدیویی مشکل دارند از لینک زیر نرم افزار camtasia studio را دانلود کنند .
http://download.techsmith.com/camtas.../camtasiaf.exe
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
تمرين شماره یک
http://rapidshare.com/files/401844813/1_-_example.rar
دوستان در اين دوره آموزشي سعي شده براي بعضي از دروس تمرين هم داده شود و تمرين ها نيز ساخته شود .
در تمرين ها نكاتي بيان مي شود كه شايد در همان درس مربوطه به چشم نيايد .
موفق باشيد .
-
درس شماره دو - ليست ها
-
پاسخ : آموزش گام به گام html به صورت تصویری
از فعالیتهای مفید آموزشی شما ممنونم، موضوع مهم شد
-
تمرين شماره دو
تمرين شماره دو
http://rapidshare.com/files/401782651/2_-_example.rar
در اين تمرين نكات جالبي در ارتباط با ليست ها بيان مي شود .
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
درس شماره سه - تصاوير و لينك
http://rapidshare.com/files/403071718/3_-_img_a.rar
در اين درس با نحوه قرار دادن تصوير و لينك كردن آشنا مي شويد .
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
-
درس شماره 4 - Bookmark
درس شماره 4 - Bookmark
http://rapidshare.com/files/401831763/4_-_bookmark.rar
در اين درس شيوه ساختن بوكمارك را ياد مي گيريد در تمرين اين درس نكات جالبي خواهيد ديد .
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
-
پاسخ : آموزش گام به گام html به صورت تصویری
از شما به خاظر مطالب خوبتوندر مورد طراحی وبسایت متشکرم.
امکانش هست در حالت بلوک دیاگرام مراحل طراحی و ابزار های لازم برای ایجاد یک وبسایت پویا را بفرمایید.
-
پاسخ : آموزش گام به گام html به صورت تصویری
درس شماره 5 - marquee
http://rapidshare.com/files/401826844/5_-_marquee.rar
درس بسيار جالبيست و يكي از تگ هاي دوست داشتني html مي باشد . . مطمئنا نكات جالبي در آن وجود دارد .
موفق باشيد .
@nasa_de عزيز در رابطه با پويا سازي تاپيكي ايجاد شده شايد مورد استفاده باشد .
http://www.webhostingtalk.ir/f148/%D...B1%DB%8C-9099/
-
پاسخ : آموزش گام به گام html به صورت تصویری
درس شماره 6 - كار با جدول(1)
http://rapidshare.com/files/401820785/table1.rar
در اين درس كار با تگ table را در html ياد مي گيريد البته اين درس داراي يك بخش ديگر هم مي باشد .
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
درس شماره 7 - كار با جدول(2)
http://rapidshare.com/files/408715604/table2.rar
اين درس در ادامه كار با تگ table را در html مي باشد البته نكته ها در اين تگ پاياني ندارد .
موفق باشيد .
-
درس شماره 8 - كار با input ها قسمت اول
درس شماره 8 - كار با input ها قسمت اول
http://rapidshare.com/files/409061368/input1.rar
اين در مربوط به input ها مي باشد . اين مبحث داراي 2 ويديو ديگر هم مي باشد .
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
ممنون دوست عزیز بابت ارسال های مفیدتان ، کاش هیچکس در این تاپیک سوالی چیزی مطرح نکنه تا برای پیدا کردن یک درس چندین صفحه طی نکنیم .
-
پاسخ : آموزش گام به گام html به صورت تصویری
درس شماره 9 - كار با input ها قسمت دوم
http://rapidshare.com/files/409488692/input2.rar
اين درس مربوط به input ها مي باشد .radio button , checkbox , ...
دوستان نگران شلوغ شدن تاپيك نباشند چون در انتهاي دوره از مديران درخواست مي شود تاپيك را پاكسازي كنند .
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
درس شماره 10 - كار با input ها قسمت سوم
http://rapidshare.com/files/409488693/input3.rar
اين درس مربوط به input ها مي باشد .list , combobox , ...
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
درس شماره 11 - كار با design نرم افزار Dream Weaver قسمت اول
http://rapidshare.com/files/409687160/design1.rar
اين درس مربوط كار با design نرم افزار Dream Weaver مي باشد . مطمئنا با آشنايي با اين قسمت به راحتي مي توانيد بدون كدنويسي html خيلي از كارها را به سرعت انجام دهيد .
3 ويديو ديگر در همين رابطه وجود دارد
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
درس شماره 12 - كار با design نرم افزار Dream Weaver قسمت دوم
http://rapidshare.com/files/410467614/design2.rar
اين درس مربوط ادامه كار با design نرم افزار Dream Weaver مي باشد . مطمئنا آشنايي با اين قسمت ها خيلي در تسريع كارها كمك مي كند .
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
درس شماره 13 - كار با design نرم افزار Dream Weaver قسمت سوم
http://rapidshare.com/files/410467615/design3.rar
اين درس مربوط ادامه كار با design نرم افزار Dream Weaver مي باشد . مطمئنا آشنايي با اين قسمت ها خيلي در تسريع كارها كمك مي كند .
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
درس شماره 14 - كار با design نرم افزار Dream Weaver قسمت چهارم
http://rapidshare.com/files/410467616/design4.rar
اين درس مربوط به ادامه كار با design نرم افزار Dream Weaver مي باشد .
همه دوستان خسته نباشند . اين آخرين درس از اين مجموعه بوده و در آينده در صورتي كه درس هاي جديدي ساخته شود حتما به تاپيك اضافه خواهد شد .
از تمامي دوستاني كه تاپيك را دنبال كردند تشكر مي كنم .
مطمئنا آموزش ها داراي كاستي هايي بوده كه مطمئنا دوستان خواهند بخشيد .
موفق و پيروز باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
درود
واقعا" حرفه ای آموزش دادین که جای تشکر داره
خوشحال میشم که اجازه بدید توی انجمن های ایاک بوک هم بنام شما برای کاربرانمون منتشر کنیم.
-
پاسخ : آموزش گام به گام html به صورت تصویری
نقل قول:
نوشته اصلی توسط
iacbook
درود
واقعا" حرفه ای آموزش دادین که جای تشکر داره
خوشحال میشم که اجازه بدید توی
انجمن های ایاک بوک هم بنام شما برای کاربرانمون منتشر کنیم.
سلام دوست عزيز .
شما لطف داريد . نياز به اجازه نيست دوست عزيز .
موفق باشيد .
-
پاسخ : آموزش گام به گام html به صورت تصویری
-
پاسخ : آموزش گام به گام html به صورت تصویری
با سلام
=D> بسیار سپاس از استاد عزیز ، خدا خیرتون بده.:63:
متاسفانه این لینک ها از کار افتادن که موفق به دانلود نشدم:
درس شماره 7 - كار با جدول(2)
درس شماره 8 - كار با input ها قسمت اول
درس شماره 10 - كار با input ها قسمت سوم
درس شماره 4 - Bookmark
اگه امکانش باشه که این مبحث ها لینک هاش اصلاح بشه بسیار ممنون میشم.
-
پاسخ : آموزش گام به گام html به صورت تصویری
بی نهایت دمت گرم پرشین سافت عزیز
-
پاسخ : آموزش گام به گام html به صورت تصویری
سلام
همه لینک ها خراب شده به جز درس 1
کسی این هارو داره؟
-
پاسخ : آموزش گام به گام html به صورت تصویری
سلام دوست عزیز من با ریپشید مشکل دارم میشه تو جای دیگه آپولود کنی
-
پاسخ : آموزش گام به گام html به صورت تصویری
نقل قول:
نوشته اصلی توسط
amir game
سلام دوست عزیز من با ریپشید مشکل دارم میشه تو جای دیگه آپولود کنی
لینک ها اصلا خراب هستند نمی شه کاریش کرد
-
پاسخ : آموزش گام به گام html به صورت تصویری
داداش اگه خرابه پس درگیریم ولش کن از خیرش بگذر ولی اگه میخوای قالب سایت درست کنی من آموزشش رو دارم اگه خواستی بگو اگر هم نواستی که هیچ به امید ضهور آقا امام زمان(ع)
-
پاسخ : آموزش گام به گام html به صورت تصویری
نقل قول:
نوشته اصلی توسط
amir game
داداش اگه خرابه پس درگیریم ولش کن از خیرش بگذر ولی اگه میخوای قالب سایت درست کنی من آموزشش رو دارم اگه خواستی بگو اگر هم نواستی که هیچ به امید ضهور آقا امام زمان(ع)
بزار متشکر می شویم
-
پاسخ : آموزش گام به گام html به صورت تصویری
امیدوارم مفید باشه آموزش طراحی قالب وب سایت در فتوشاپ
1
Share
قدیمیترها که از ما سوال میکردند میخواهی چکاره شوی؟ میگفتیم پزشک یا خلبان و از این دست؛ امروزه روز اگر از کودکی سوال کنی که میخواهی چکاره شوی، در میان جوابهایش اگر شنیدید که گفت “طراح وب سایت” تعجب نکنید!
برای طراحی یک وب سایت باید در وهله اول دچار کمی خلاقیت و ذوق هنری باشید اما اگر ندارید و در عوض به جایش خیلی علاقه دارید، جای نگرانی نیست چون با کمی ممارست و تمرین و مطالعه، شاخصههای لازم برای درک طراحی وب سایت را کسب میکنید.
در بخش اول میبایست وب سایت شما از جهت شکل و ظاهر بسته به نوع محتوایی آن طراحی گرافیکی شود. ابتدا ساختار اصلی آن را بر روی کاغذ ترسیم کنید تا یک شمای کلی از طرح در دست داشته باشید. این مطلب وب سایت ittutorial با عنوان اصول و پیش نیازهای طراحی وب سایت میتواند پیش مقدمهی ِ خوبی برای خواندن مطلب آموزشی ذیل باشد.
اغلب گرافیستهای وب از برنامه فتوشاپ استفاده میکنند. ما نیز این مطلب آموزشی که آماده سازی یک قالب psd وب بود را با برنامه فتوشاپ طراحی کردیم و در پایین مرحله به مرحله به شما مراحل کار را نشان خواهیم داد.
http://pariyana.com/wp-content/uploa...ariyanaint.jpg
در این مقاله، در مرحله اول، به نحوه طراحی یک قالب وبسایت در فتوشاپ بصورت قدمبهقدم و در مرحله دوم، کدنویسی به زبان html , css برای قالب طراحی شده را بررسی میکنیم. بدیهیست مراحل تکراری پروژه جزء این مقاله نمیباشد و فقط به بیان تکنیکها و روشهای موجود میپردازیم. در پایان فایل پیاسدی قالب در اختیار کاربران قرار میگیرد. درصورت استفاده از همین قالب و ایجاد تغییرات جزئی، ذکر نام طراح قالب الزامیست.
روز اول : طراحی قالب وبسایت در فتوشاپ
http://pariyana.com/wp-content/uploads/2009/12/1.jpg
همانطور که در عکس بالا میبینید، چهار مرحله پیش رو داریم.
مرحله اول: طراحی عکس پسزمینه
مرحله دوم: طراحی نوار کلید ها و کادر جستجو
مرحله سوم: طراحی سرصفحه
مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب
مرحله اول: طراحی عکس پسزمینه
برای طراحی عکس پس زمینه به ۲ طرح (یک براش و یک پترن) احتیاج داریم که ابتدا به طراحی آنها میپردازیم.
طراحی پترن:
فتوشاپ را باز کنید و یک فایل جدید با طول و عرض ۳ پیکسل، بدون پس زمینه ایجاد کنید.
http://pariyana.com/wp-content/uploads/2009/12/2.jpg
ابتدا تا آخر زوم کنید(Ctrl و +). با استفاده از ابزار “Pencil”، با رنگ سفید، روی سه نقطه مطابق شکل کلیک کنید. دقت داشته باشید رنگ انتخابی حتما سفید باشد. در اینجا برای مشخص شدن خط، از رنگ قرمز استفاده شده است.
http://pariyana.com/wp-content/uploads/2009/12/3.jpg
مطابق عکس، از منوی “Edit”، روی گزینه “Define Pattern…” کلیک کنید.
http://pariyana.com/wp-content/uploads/2009/12/4.jpg
در پنجره بازشده نامی را بدلخواه انتخاب کنید و روی “ok” کلیک کنید. با این کار فایل طراحی شده ما بصورت یک پترن ذخیره میشود و میتوانیم از آن در تنظیمات افکت روی لایه ها استفاده کنیم.
طراحی براش:
برای طراحی براش یا همان اشکال قلمو، میتوانید از روش فوق استفاده کنید. به این ترتیب که فایلی با اندازه دلخواه ایجاد کنید، سپس طرح خود را ایجاد کرده و در مرحله آخر در منوی ادیت به جای گزینه “Define Pattern…”، گزینه “Define Brush Preset…” را انتخاب کنید. در اینجا برای راحتی کار از براش های آماده استفاده می کنیم.
بسیار خوب، تا به اینجا ما مقدمات برای طراحی پسزمینه را آماده کردیم. حال فایل جدیدی را باز کنید. این فایل اصلی قالب هست و اندازه آن میتواند متغیر باشد. در اینجا اندازه فایل ما ۱۰۲۴*۸۱۱ هست.
لایه بکگراند را با کد رنگ ” ۱b1b1b” با استفاده از سطل رنگ پر کنید. سپس روی قسمت سمت راست لایه دوبار کلیک راست کرده تا پنجره “Layer Style” باز شود. تنظیمات افکت های این لایه را مطابق عکسهای زیر اعمال کنید.
http://pariyana.com/wp-content/uploads/2009/12/5.jpg
http://pariyana.com/wp-content/uploads/2009/12/6.jpg
http://pariyana.com/wp-content/uploads/2009/12/7.jpg
همانطور که در عکسها میبینید، کد رنگهای استفاده شده مشخص شده و از پترن ساخته شده طبق دستورالعمل بالا، استفاده شده است.
لایه جدیدی ایجاد کنید. از این لایه برای نمایش براش ها استفاده میکنیم. با استفاده از براش های ارائه شده، با سلیقه خودتان و با رنگ دلخواه، اشکالی را مانند شکل زیر ایجاد کنید.
http://pariyana.com/wp-content/uploads/2009/12/8.jpg
لایهی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۳d3d3d” پر کنید و افکتهای زیر را اعمال کنید.
http://pariyana.com/wp-content/uploads/2009/12/11.jpg
http://pariyana.com/wp-content/uploads/2009/12/9.jpg
http://pariyana.com/wp-content/uploads/2009/12/10.jpg
مرحله اول تمام شد. به یاد داشته باشید که کار خود را به طور پیدرپی ذخیره کنید.
مرحله دوم: طراحی نوار کلید ها و کادر جستجو
لایهی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکتهای زیر را اعمال کنید.
http://pariyana.com/wp-content/uploads/2009/12/11-2.jpg
http://pariyana.com/wp-content/uploads/2009/12/12.jpg
http://pariyana.com/wp-content/uploads/2009/12/13.jpg
http://pariyana.com/wp-content/uploads/2009/12/14.jpg
http://pariyana.com/wp-content/uploads/2009/12/15.jpg
در این مرحله میتوانید منوهای مورد نظر را با ابزار “Type Tool” مانند شکل زیر ایجاد کنید. اما این کار ضروری نیست؛ چون تمام متنها، منوها و فرم ها (جعبه جستجو) با استفاده از اچتیامال ایجاد میشوند و نیازی به ایجاد در فتوشاپ نیست!
http://pariyana.com/wp-content/uploads/2009/12/16.jpg
مرحله دوم تمام شد. به یاد داشته باشید که کار خود را به طور پیدرپی ذخیره کنید.
مرحله سوم: طراحی سرصفحه
لایهی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکتهای زیر را اعمال کنید.
http://pariyana.com/wp-content/uploads/2009/12/17.jpg
http://pariyana.com/wp-content/uploads/2009/12/18.jpg
http://pariyana.com/wp-content/uploads/2009/12/19.jpg
http://pariyana.com/wp-content/uploads/2009/12/20.jpg
http://pariyana.com/wp-content/uploads/2009/12/21.jpg
حال از لایه ایجاد شده یک کپی بگیرید. برای اینکار روی لایه راست کلیک کرده و گزینه “Duplicate Layer…” کلیک کنید. لایه جدید را مطابق شکل کوچک کنید. برای تغییر اندازه، از کلیدهای ترکیبی Ctrl + T استفاده کنید.
http://pariyana.com/wp-content/uploads/2009/12/22.jpg
مطابق آنچه در قبل گفته شد، میتوانید عکس و متنها را در فتوشاپ ایجاد کنید، اما این کار لزومی ندارد و دلیل اضافه کردن آن در این مقاله، تشخیص مکانهای اجزای صفحه، برای کد نوشتن به زبان اچتیامال است. لوگوی سایت خود را طراحی کنید و در قسمت مشخص شده در عکس قرار دهید.
http://pariyana.com/wp-content/uploads/2009/12/23.jpg
برای طراحی نوار “عضو شوید”، ابتدا با استفاده از ابزار “Pen Tool” شکلی را مطابق شکل زیر و با رنگ “deff00″ ایجاد کنید و افکت زیر را بر روی لایه اعمال کنید.
http://pariyana.com/wp-content/uploads/2009/12/24.jpg
http://pariyana.com/wp-content/uploads/2009/12/25.jpg
مرحله سوم تمام شد. به یاد داشته باشید که کار خود را به طور پیدرپی ذخیره کنید.
مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب
مرحله چهارم را با استفاده از توضیحات قبلی میتوانید به طور کامل طراحی کنید، اما آنچه که در اینجا مهم است، نحوه چیدمان مطالب و تبلیغات است. برای مثال در عکس زیر همانطور که میبینید در ابتدای صفحه با توجه به قسمت تبلیغات صفحه ۳ ستونه است و در ادامه صفحه به فرم ۲ ستونه تغییر شکل میدهد.
http://pariyana.com/wp-content/uploads/2009/12/26.jpg
لازم به ذکر است که طراحی این جداول در فتوشاپ فقط بمنظور معین کردن جاهای جداول جهت طراحی در زبان اچتیامال هست، لذا طراحی این جدولها در “روز دوم: کد نویسی به زبان اچتیامال برای قالب وبسایت” توضیح داده خواهد شد.
در این مقاله سعی شده تا با استفاده از ساده ترین راهها، برای طراحی یک قالب مطلوب استفاده شود. در ادامه این سری از مقالات با متدهای پیشرفتهتر و جذابتر آشنا خواهید شد که لازمه آن، مسلط بودن بر مباحث این مقاله هست.
مشاهده قالب در ابعاد بزرگ
---------- Post added at 05:37 PM ---------- Previous post was at 05:36 PM ----------
اگه دوست داشتی یه سری هم به سایت من سر بزن آدرسشدانلود با لینک مستقیم
-
پاسخ : آموزش گام به گام html به صورت تصویری
لینک ها خراب هستند لطفا اگه لینک درستی دارید قرار دهید.
خیلی لازمشون دارم.
-
پاسخ : آموزش گام به گام html به صورت تصویری
سلام به دوستان به درخواست کاربران و مخصوصا کاربرamir.abbas من فیلم آموزش رو میزارم که هر کی خواست استفاده کنه در اینجا هم خرید پستی داریم و هم دانلود من اینجا لینک دانلود میرارم ولی اگه کسی برای خرید خواست بهم اطلاع بده اینم لینک
http://mohandesyar.com/wp-content/th...s/download.png دانلود مستقیم : بخش اول | بخش دوم | بخش سوم | بخش چهارم | بخش پنجم | بخش ششم | بخش هفتم | بخش هشتم | بخش نهم
http://mohandesyar.com/wp-content/th...mages/size.png حجم فايل : 518 مگابایت
http://mohandesyar.com/wp-content/th...mages/lock.png پسورد فايل : مهندس یار|دانلود جزوه کتاب مقاله پروژه
دوستان برای حمایت از من و ارتباط با من میتواند به سایتwww.resaneamir.tkبیایند
امید وارم مفید بوده باشه خدا حافظ
---------- Post added at 12:58 PM ---------- Previous post was at 12:56 PM ----------
اگه مشکلی بود بگین
-
پاسخ : آموزش گام به گام html به صورت تصویری
-
پاسخ : آموزش گام به گام html به صورت تصویری
سلام دوست عزیز
هیچکدوم از لینک ها کار نمیکنه
-
پاسخ : آموزش گام به گام html به صورت تصویری
سلام بعضی از لینک ها کار نمیکنه
از مطالب خوبتون ممنمونم
-
پاسخ : آموزش گام به گام html به صورت تصویری
سلام دادا منم میخوام لینکا کار نمیکنن اگه میشه اوکی کنید با تشکر یا کسای که دانلود کردن بدن ما هم استفاده کنیم
-
پاسخ : آموزش گام به گام html به صورت تصویری
دوست عزیز لینک ها کار نمی کنه؟ چی کار کنیم؟
-
پاسخ : آموزش گام به گام html به صورت تصویری
آقا اینا که میگه فایل نیست!
لینک منقضی شده
پس از کجا باید دانلئد کنم؟