درس سم اچ تی ام ال

( درس 3 )نشانه گذاری 6 درجه

اهداف این درس :
1- شناسایی درجات مختلفی از نشانه گذاری در HTML و تگهای مربوط به آن
2- گذاشتن درجات مختلف نشانه گذاری در سند مشاهده تغییرات در مرورگر
شروع درس
نشانه گذاری عنوانگذاری HTML
< hn / > متن شما به این سایز ظاهر می شود < hn >
n عددی است از 1 تا 6
مثال
در اینجا این نوشته 60 درجه مختلف دارد . درجات این نشانه گذاری مابین درجات 1 تا 6 می باشد و در خارج از این رده تناقض دارید ،
جایگذاری عنوان ها در سند HTML
تذکر : اگر محیط کاری ندارد طبق آدرس قبل ایجاد کنید .
1- محیط کاری باز کنید ( اگر هنوز باز نشده است )
2- به پنجره ویرایشگر متنی بروید .
3- پنجره HTML که در درس 2 ایجاد کردید را باز کنید .
4- این تگها را برای بزرگترنمایش دادن titlebar استفاده می کنیم .
< h1 > lesson1 < / h1 >
5- مطالب زیر را وارد کنید
درس 3 :
< h2 > lesson3 < / h2 >
< h2 > آموزش< / h1 >

< h1 > در اینجا با فنون اچ تی ام ال آشنا شوید < / h1 >




6- تغییرات خود را ذخیره کنید .
7- به پنجره مرور گر باز گردید و سند را باز و Refresh کنید .




آزمایش
سند خود را با سند نمونه مقایسه کنید اگر بعضی ازنشانه گذاری ها اعمال نشده بود دوباره تگهای مربوط را اصلاح کنید . از اشتباهات معمولی که در هنگام کار عملی در این درس پیش می آید عدم استفاده از در نشانه گذاریها است .
< h1 > lesson1 < h1 > علامت اسلش فراموش شده است اگر / در تگ فراموش شود . مرور گر آن متن را با این درجه نشان نمی دهد و برای اصلاح دوباره باید به سند باز گردید .
مروری بر مطالب
1- درجه های مختلف نشانه گذاری حروف چه هستند ؟
2- تگهای مرتبط با این درجات نشانه گذاری چه هستند ؟
3- چه مراحلی را بایدبرای ایجاد متون با سایزهای مختلف دنبال کنید .
4- اگر / را فراموش کردید چه باید کنید ؟
تمرین :
در سند HTML خود از 3 درجه نشانه گذاری استفاده کنید.

--------------------------------------------------------------------------------

درس ششم فتوشاپ

کار با فایلها و پسوندهای مورد استفاده

کار با فایل ها :
فتوشاپ می تواند تصویرها را با قالب بندیهای مختلف باز کرده و یا ذخیره کند . قالب بندی در واقع روش ذخیره سازی اطلاعات موجود در فایل می باشد . به این ترتیب می توان فایل های مزبور را در برنامه های دیگر مورد استفاده قرار داد ، آنها را چاپ کرد ، و یا به عنوان صفحة وب در اینترنت به کار برد .
در دنیای ویندوز ، نوع فایل با سه حرفی که به عنوان پسوند در انتهای نام فایل قرار می گیرند مشخص می شود . در این میان می توان پسوندهای .doc برای سندهای مربوط به برنامه های واژه پرداز و یا .bmp برای تصویرهای گرافیکی مبتنی بر نقشه بیتی را نام برد .
متداولترین قالب بندی فایل در فتوشاپ .psd میباشد .

Photoshop Document - psd
متداولترین قالب بندی در فتوشاپ میباشد ، میتوان گفت که قالب بندی اختصاصی این محیط است . اشکال این قالب بندی این است که سایر برنامه ها ممکن است در باز کردن آن با مشکل مواجه شوند . زیرا قالب بندی مزبور برای فتوشاپ اختصاصی به شمار می آید . برای انتقال فایل ها بین برنامه های مختلف ، چاپ و یا انتشار آن در World Wide Web ، باید آن را با قالب بندیهای سازگار با مقصد ذخیره کنید .
Bitmap
این قالب بندی استاندارد ویندوز به شمار می آید .
Graphical Interchange format (gif ) GIF
این قالب بندی یکی از 3 قالب رایجی است که میتوان برای نشر وب استفاده نمود . از آن جایی که فایلهای ذخیره شده با این قالب حجم کمتری دارند برای ارسال آن از طریق مودم ، زمان کمتری صرف میشود .
Joint photographic Experts Group(jpg ) JPEG
به معنای انجمن گروه متخصصان عکاسی میباشد و jpg نیز یکی دیگر از سه قالب بندی مطلوب برای نشر وب میباشد .
Portable Document Format(pdf) PDF
این قالب بندی ، قالب سند قابل حمل برنامة آکروبات ادوب میباشد . این سیستم برای ایجاد سندهایی است که توسط برنامة Acrobat خوانده میشود .
Portable Network Graphic (png) PNG
به معنای نگاره سازی شبکة قابل حمل است . این قالب برای نگاره سازی وب جدیدتر و بهتر است زیرا تراکم مطلوب gif ها را با لوحة رنگ نامحدود jpg ترکیب میکند . به هر حال مرورگرهای قدیمی آن را پشتیبانی نمی کنند .
tif - TIFF Tagged– Image File Format
قالب پروندة تصویری برچسب دار میباشد . این پرونده ها را میتوان هم در ماشین های ویندوز هم در ماشین های مکینتاش ذخیره نمود .
Encapsulated postscript(eps) EPS
قالبی است که برای استفاده در نشر رو میزی میباشد . این قالب از زبان توصیفی صفحة postscript استفاده میکند .
RAW :
این قالب بندی اطلاعات فایل را به صورتی ذخیره میکند که قالب بندی آن برای انتقال بین برنامه ها و کامپیوترهای مختلف بیشترین انعطاف پذیری را داشته باشد .





ترکیب کردن لایه ها Merge :
برای ترکیب کردن دو یا چند لایه با هم از روش زیر استفاده میکنیم :
از منوی Layer گزینه های مربوط به ترکیب لایه ها را انتخاب می کنیم که عبارتند از :
Merge Down : با انتخاب این گزینه لایة فعال با لایة زیری ترکیب میشود .
Merge Visible : با انتخاب این گزینه تمامی لایه هایی که آیکون چشم آنها فعال باشد را با هم ترکیب می کند . در صورتیکه نخواهیم دو یا چند لایه در ترکیب باشند ابتدا چشم مربوط به آنها را غیرفعال میکنیم ، سپس از این گزینه استفاده میکنیم ، بدین ترتیب فقط لایه های قابل رویت را با هم ترکیب میکند .
Flatten Image : با انتخاب این گزینه تمامی لایه ها را با هم ترکیب میکنیم . در این حالت همة لایه با هم ترکیب شده و در پنجرة لایه ها ، فقط Background داریم .
Merge Linked :
در صورتی این گزینه فعال است که پیوند(Link) کنار آیکون چشم لایه ای قرار داشته باشد، ابتدا لایه هایی را که میخواهیم با هم ترکیب شوند را توسط Link مشخص می کنیم سپس این گزینه را انتخاب می کنیم.
ذخیره سازی فایل :
مطلب بسیار مهم در فتوشاپ این است که باید در اکثر مواقع کار خود را ذخیره کنید . معمولاً بهتر است که گهگاه این کار را انجام دهید . معمولاً در رایانه ها ، بروز خطا وقفه های غیرمنتظره در حین کار ، امری معمول به شمار می آید .
ذخیره سازی فقط چند ثانیه طول میکشد و در صورت خاموش شدن رایانه ، تفاوت زیادی بین انجام دوبارة همة کارها و صرفاً بازگشایی آن وجود دارد .برای ذخیره سازی فایلی گزینة Save را از منوی فایل انتخاب میکنیم در این حالت کادری ظاهر میشود که در آن آدرس و نام فایل و همچنین فرمت فایل را مشخص میکنیم . (Ctrl + s )


چنانچه بخواهیم فایل را با پسوند و نام جدید و حتی در آدرس جدیدی ذخیره کنیم از گزینة Save As استفاده می کنیم .
علاوه بر فرمان Save و Save As که با آنها آشنا هستید ، فتوشاپ دارای فرمانهای ذخیره سازی دیگری (نظیر Save a copy ) نیز میباشد . این گزینه در جعبه محاوره ای Save وجود دارد . با استفاده از گزینة Save a copy همانند فرمان Save As ، میتوانید پروندة خود را با یک نام و در محلی جدید ذخیره کنید.
اگر از save a copy استفاده کنید، (در حالی که کار شما روی پرونده اصلی انجام می شود نه روی رونوشت) رونوشتی از پرونده در شرایط کنونی ذخیره خواهد شد. استفاده از این گزینه برای ایجاد یک رونوشت پشتیبان قبل از یک تغییر اساسی مفید خواهد بود.
آخرین گزینة save، گزینة save for web است. با کلیک کردن روی این فرمان، جعبه محاوره ای مربوطه همانند جعبه محاوره ای save for web که در برنامة Adobe Image Ready می باشد، ظاهر می شود. این کادر شامل تنظیماتی است که برای بهینه کردن تصویر به منظور استفاده در وب ضروری می باشند، امکان مشاهده و انتخاب مقدار تراکم JPEG اعمال شده را نیز به شما می دهند. بنابراین شما می توانید به کوچکترین پروندة تصویری با کیفیت بالا دست یابید.
کاهش اندازة فایل:
فایل های فتوشاپ ممکن است بسیار بزرگ باشند. با روشهای مختلفی می توان حجم فایلها را کاهش داد:
کاهش تفکیک پذیری (وضوح و Resulotion تصویر)
کاهش تعداد رنگها
استفاده از قالب بندی های فشرده سازی
ادغام لایه ها در فایلهای PSD - merge کردن لایه ها
و ....
در صورتیکه می خواهید تصویر را چاپ کنید ، کاهش تفکیک پذیری ( Resulation ) فکر خوبی برای کاهش حجم فایل به شمار نمی آید . اما اگر قرار باشد که تصویر فقط بر روی صفحة نمایش کامپیوتر ، و یا وب ظاهر شود . تفکیک پذیری را تا 72 نقطه بر اینچ کاهش دهید .
کاهش تعداد رنگها به معنی کاهش عمق بیت می باشد . بدین ترتیب ظاهر رنگهای خود را می توانید در چاپ یا روی صفحه به شکل لکه لکه در آورید .
استفاده از قالب بندیهای فشرده ، به این معنی است که از قالب بندیهایی مانند Tiff با فشرده سازی LZW استفاده شود . به این ترتیب حجم فایل تا آنجا که امکان داشته باشد کاهش می یابد و سپس ذخیره می گردد . برنامة مزبور این کار را با روشی انجام می دهد که Loss Less ( بدون کاهش داده ها ) نامیده میشود . به طوری که هیچگونه تغییر شکل یا کاهش رنگی ایجاد نشود .
همچنین قالب بندی هایی مانند JPEG نیز وجود دارند که از روش فشرده سازی Lossy استفاده میکنند.
همان طور که احتمالاً از نام این روش حدس می زنید بعضی از داده ها در جریان فشرده سازی از دست می روند .

درس دوم HTML

( درس 2 )ویرایش یک سند HTML

شما اولید سند HTML خود را ایجاد کردید . شما در این درس خواهید آموخت که چگونه با سرعت تغییراتی در سند خود ایجاد کنید و تغییرات را در مرورگر خود ببینید. بعد از آموزش این درس توانائیهای زیر را خواهید داشت :
1- ایجاد یک محیط کاری
2- تغییرات در سند HTML
3- اجرای سند مرورگر برای دیدن تغییرات
ایجاد دوباره محیط کاری
برای تکمیل این درس شما نیاز به ایجاد یک پنجره مرورگر دوم و پنجره Editor متنی که در درس 1 استفاده کردید دارید.
1- یک پنجره جدید از مرورگر به وسیله انتخاب گزینه New Window از منوی File استفاده کنید .
2- از گزینه Open برای باز کردن سند HTML که در قبل ایجاد کردید استفاده کنید.
3- Editor متنی خود را دوباره باز کنید .
انجام تغییرات در سند HTML
1- وارد شدن در پنجره Edit ویرایشگر متنی
2- متن زیر را در درس قبل وارد کنید .
"در اینجا شما با یک سایت آموزشی – آموزش از را دور روبرو هستید
امیدواریم از این سایت لذت ببرید "
نکته :
این متن بالای تگ < body / > و < html / > باشد.
بین < body > و < body / > نوشته می شود .
3- از منوی فایل با انتخاب گزینه Save تغییرات خود را ذخیره کنید .
باز کردن سند در مرورگر
به محیط کاری مرورگر خود بازگردید . جایی که فایل قبلی شما نمایش داده شده است توجه داشته باشید که متون جدیدی که شما وارد کردید هنوز قابل رویت در پنجره شما نیست . برای دیدن این تغییرات از کلید Refresh استفاده کنید . در این صورت هر تغییری که ایجاد کرده اید را مشاهده می کنید . ذکر این نکته ضروری است که مرورگر وب از کلیه فاصله ها و کاراکترهای خالی که در سند وارد کردید چشم پوشی می کند .
البته مشخص است که زمانی می رسد که شما نیاز دارید که جاهای خالی در سند خود را مابین پاراگرافها استفاده کنید که در درس 4 این مطلب را می آموزید . شما می توانید فایل خود را در Desktop ذخیره کنید و از همانجا به اجرا در آورید .
آزمایش
سند ایجادی خود را با سند نمونه مقایسه کنید اگر صفحه شما با نمونه متفاوت بود دوباره مروری بر مطالبی که در ویرایشگر متنی وارد کردید داشته باشید.
مروری بر مطالب
1- چگونه محیط کاری را باز کردید.
2- چه مراحلی را برای ایجاد تغییر دنبال کردید.
3- چگونه تغییرات را در سند خود مشاهده کردید.
تمرین :
با توجه به مطالبی که در آموزش دیدید سندی که در درس قبل ایجاد کردید تغییر داده و سپس تغییرات خود را مشاهده کنید .