کلوپ آموزش آموزش از جنس اینترنت،آموزش رایگان آشپزی،بازاریابی و …
نوشته های مشابه
مقدمه
اساس آموزش طراحی سایت ارائه شده در این بخش براساس زبان HTML و اسکریپ نویسی با CSS و Jscript است. توجه کنید استفاده از زبانهای PHP و ASP تا حدود زیادی توسط HTML قابل پیاده سازی هستند اما از آنجا که همیشه افرادی هستند که باید تخصص های پیچیده پیچیده داشته باشند تا خبرگی خود را نشان دهند از زبانهای پیچیده تری غیر از HTML سود می برند. به زعم نویسنده ساده زیباست.
نیازمندیها
۱- نرم افزار و محیط طراحی سایت: پیاده سازی و اجرای وب سایت با برنامه ساده notepad قابل انجام است. برخی نرم افزارهای دیگر مانند مایکروسافت FrontPage نیز وجود دارند که اصلاً توصیه نمی شود. من به شما برنامه ماکرومدیا DreamWeaver را پیشنهاد می کنم که می توانید آنرا از این لینک دانلود کنید. البته اکنون شرکت ماکرومدیا توسط شرکت Adobe خریداری شده و ممکن است لینک مربوط تغییر کرده باشد.
۲- آشنائی کار با گرافیک: درک صحیح از فایلهای صوتی، تصویری و عکس در طراحی بنرها و انواع افزونه های تصویری یا صوتی بسیار الزامی است. برنامه Adobe Photoshop و Xara 3d پیشنهاد من هستند. در ضمن حتما” در بخش آشنائی با فرمت فایلهای صوتی، تصویری و عکس را مطالعه کنید.
۳- مرورگر یا Browser : نرم افزاری است که توسط آن صفحات وب به اجرا در می آیند. Internet Explorer و mozilla firefox از مهمترین مرورگرها هستند. در سیستم عامل های Apple mackintosh از مرورگر Netscape استفاده می شود که در ایران کاربردی ندارد. همچنین Google croom, Safari و Opera نیز از دیگر مرورگرهای موجود هستند.
استفاده از نرم افزارهای طراحی سایت توانمندی مانند DreamWeaver کار طراحی را بسیار ساده می کند و شاید تصور کنید بدون یادگیری کدنویسی هم می توانید وب سایت طراحی کنید. اما نرم افزار همیشه آنچه را که می تواند تولید می کند نه آنچه که می خواهید. بنابراین به جای آنکه در طراحی در خدمت نرم افزار باشید با یادگیری کدنویسی نرم افزار را به خدمت بگیرید.
تهیه مقدمات
صفحات وب را با فرمت htm, mht, php, aspx, … می توان ذخیره کرد. وقتی از اینترنت یک صفحه اینترنتی را ذخیره می کنید با فرمت htm ذخیره شده و معمولا یک پوشه با نام همان صفحه اینترنتی در کنار صفحه شما مانند زیر مشاهده خواهد شد. اسکریپت ها، تصاویر و سایر افزونه ها درون این پوشه هستند. همه چیز را توضیح خواهم داد، عجله نکنید.
این پوشه که با حذف آن صفحه اینترنتی نیز حذف خواهد شد ما را به مفهوم url مطلق و نسبی می رساند. ما به عنوان یک کاربر به هنگام بازدید از یک سایت به url آن سایت رجوع می کنیم. url یعنی Uniform Resource Locator که یک آدرس منحصر به فرد است. برای نمونه شما وقتی به وب سایت من سر می زنید به url من یعنی http://www.parsmodir.com رجوع می کنید اما من به آدرس فایلهای خودم با استفاده از پرتکل ftp به جای http می کنم. پس شما هنگامیکه یک طراح سایت هستید با آدرس فایلها سر و کار دارید نه آدرس های اینترنتی.
HTTP: hypertext transfer protocol
FTP:file transfer protocol
مفهوم url مطلق یعنی ارجاع به آدرس های اینترنتی و url نسبی یعنی ارجاع به فایلها. بنابراین زمانیکه شما سایت خود را طراحی می کنید همیشه از url نسبی استفاده می کنید مگر آنکه بخواهید به یک سایت دیگر آدرس بدهید. در بحث ایجاد hyperlink یعنی بخش سوم بیشتر توضیح خواهم داد. فقط سردرگم نشوید و ادامه بدهید.
برای شروع یک پوشه درست کنید. این پوشه فضای اینترنت است و با بیرون آن هیچ کاری ندارید. صفحه اصلی یا home Page سایت خود را با نامی مانند index.htm در این پوشه ایجاد خواهید کرد. در این پوشه سایر پوشه های اصلی سایت خود را ایجاد کنید. برای مثال یک پوشه برای عکس، یک پوشه برای فایلهای css و یک پوشه برای صفحات فرعی سایت. به نمونه زیر توجه کنید:
برای نمونه تصاویری که می خواهید در سایت خود استفاده کنید را در پوشه img ذخیره کنید. حال فرض کنید یک عکس با نام Rose.gif در پوشه img ذخیره کرده ام. شما این فایل را با آدرس www.parsmodir.com/img/rose.gif خواهید دید ولی من آنرا به صورت “img/rose.gif” می شناسم. طراح سایت از آدرس مختصر نسبی استفاده می کند. بنابراین حالا فایلها و پوشه های لازم را ایجاد کنید و سپس با یکدیگر نحوه طراحی صفحه index.htm را آغاز خواهیم کرد.
شروع طراحی
آشنائی با برچسب ها
۱٫ برچسب html : زبان HTML زبان برچسب ها یا Tag ها است. همیشه یک سایت با برچسب html به صورت زیر شروع و تمام می شود.
۲٫ برچسب head : این برچسب بعد از < html > می آید. کدهای این قسمت توسط مرورگر مشاهده شده اما از دید کاربر پنهان هستند. بیشتر موتورهای جستجو مانند گوگل ابتدا این کدها را بررسی می کنند.
۳٫ بر چسب body : این برچسب پس از پایان کدهای head قرار گرفته و بدنه سایت را می سازد. کدهای قابل رویت در این بخش قرار می گیرند.
تمرین اول: در برنامه notepad کدهای زیر را بنویسید:
صفحه را با نام index.htm ذخیره کنید. دقت کنید در برنامه notepad حتما در قسمت save as type گزینه all files را انتخاب کنید تا پسوند txt خوبخود به انتهای نام فایل شما اضافه نشود. حال برنامه ذخیره شده را که آیکونی مانند زیر دارد را باز کنید. این اولین تجربه شما در طراحی سایت را تبریک می گویم. اگر از اینترنت اکسپلورر استفاده کنید یا از فایرفکس با یکی از دو آیکون زیر مواجه خواهید شد.
۴٫ برچسب title : این برچسب در بخش head قرار می گیرد و عنوان صفحه روی مروگر یا نوار ابزار را مشخص می سازد.
با قرار دادن کدهای زیر در بین برچسب های head و نمایش صفحه با مرورگر در نوار ابزار ویندوز و نوار عنوان خود صفحه نام Parsmodir را خواهید دید.
صفحه را ذخیره کنید و با اگر همزمان توسط مرورگر نیز باز است دکمه F5 را فشار دهید تا بروزرسانی شود. یا اگر مروگر را بسته اید دوباره صفحه را باز کنید. فشار داده دکمه دکمه F5 در مرورگر برای refresh کردن است و اگر درحال طراحی یک صفحه هستید به جای آنکه مدام صفحه را ببندید و باز کنید آنرا باز نگه دارید و با زدن دکمه F5 آنرا بروزرسانی کنید تا تغییرات را مشاده کنید.
ویژگیها و ارزش ها
هر برچسب یک سری ویژگی یا attribute دارد که براساس مقداری که به آن داده می شود قابل دستکاری است. برای نمونه کد زیر باعث می شود پس زمینه به رنگ آبی تغییر کند:
ارزش ها همیشه درون یک زوج گیومه قرار می گیرند.
فارسی کردن صفحه
اگر صفحه فارسی می سازید حتما باید به مرورگر اعلام کنید. این دستور باید به مرورگر اعلام شود نه کابر بنابراین در بخش head کدهای زیر را وارد کنید:
اگر برای کدنویسی از notepad استفاده می کنید به هنگام ذخیره یک صفحه فارسی در منوی encoding یکی از گزینه های UTF-8 یا Unicode را انتخاب کنید. مشاهده تصویر
در برنامه Dreamweaver نیز از منوی modify گزینه page properties را انتخاب کنید. در کادر ظاهر شده از قسمت encoding یکی از گزینه های UTF-8 یا Unicode را انتخاب کنید. مشاهده تصویر
در یک صفحه فارسی اگر از عبارتهای لاتین نیز استفاده کنید همه چیز بهم خواهد ریخت. برای رفع این مشکل از ویژگی dir به صورت زیر استفاده کنید:
آنچه تاکنون آموختید ایجاد یک صفحه فارسی مقدماتی بوده است.
—————————–
