در این درس قصد داریم به شما نشان دهیم که چگونه می توانید یک صفحه وب بسیار ابتدایی را با عنوان ، عنوان ، عنوان ، لینک و تصویر ایجاد کنید. اما این همه چیز نیست: در این مقاله نحوه ایجاد سایت را به شما از 0 تا 100 آموزش داده ایم.ما می خواهیم دو صفحه را با استفاده از دو برنامه نویسندگی مختلف وب ایجاد کنیم! هدف از این درس این است که شما یک راهنمای گام به گام برای ایجاد یک صفحه وب اصلی را به شما نشان دهیم - یاد بگیرید که در واقع ایجاد صفحات وب اساسی چقدر آسان است و به شما نگاهی بین دو محیط مختلف نویسنده می پردازد ، بنابراین می توانید تصمیم بگیرید کدام یک برای شما بهتر است.
این صفحه (بسیار اساسی) که می خواهیم ایجاد کنیم:
Adobe Dreamweaver
Adobe Dreamweaver (در اصل Macromedia Dreamweaver) ابزار طراحی و توسعه وب برتر در صنعت است. متأسفانه ، در کنار قدرت آن ، پیچیدگی هایی نیز به وجود می آید ، بنابراین می تواند کمی به آن عادت کند.
Adobe یک آزمایش 30 روزه کاملاً کاربردی را ارائه می دهد که می توانید به صورت رایگان از وب سایت آنها بارگیری کنید.
مواردی که ممکن است درباره Dreamweaver دوست دارید:
این امکان را به شما می دهد که بدون نیاز به لمس کردن کد صفحه وب ، کارهای زیادی انجام دهید
این در هر دو Mac و Windows کار می کند
مواردی که ممکن است درباره Dreamweaver نپسندید:
گران است
این می تواند بسیار زیاد باشد ، زیرا بسیار قدرتمند طراحی شده است
ایجاد یک صفحه خالی
برای شروع ، Dreamweaver را باز کرده و "HTML" را از فهرست "ایجاد جدید" انتخاب کنید. این یک صفحه HTML خالی به شما می دهد. با رفتن به منوی "پرونده" و کلیک بر روی "ذخیره" ، این صفحه را در یک مکان مناسب ذخیره کنید.
عنوان و عنوان
قدم بعدی این است که به صفحه شما عنوان و عنوان بدهید. با نوشتن "دستور العمل های خوشمزه پای سیب" شروع کنید. اکنون این متن را انتخاب کنید و به صفحه "Properties" در انتهای پنجره خود بروید و روی جعبه ای که می گوید "قالب:" هیچ "کلیک کنید. "عنوان 1" را از این فهرست انتخاب کنید.
اکنون ، به بالای پنجره طراحی صفحه بروید و در کادر "عنوان" کلیک کنید و به صفحه خود عنوان بدهید. این متنی است که در بالای پنجره های مرورگر بینندگان شما و در رتبه بندی موتورهای جستجو ظاهر می شود (اکنون می بینید که چرا برخی وب سایت ها دارای عنوان "Untitled Document" در عناوین خود هستند - این مرحله را فراموش می کنند!)
اگر قصد راه اندازی سایت بدون کدنویسی را دارید پیشنهاد میکنم مقاله چگونه سایت بسازیم را دیدن کنید.
تصویر
اکنون می خواهیم تصویری را وارد کنیم. از قبل لازم است بدانید که چه تصویری را می خواهید وارد کنید (ما یک پای سیب خوشمزه را از بورس اوراق بهادار انتخاب کرده ایم). برای درج تصویر ، به منوی "درج" رفته و "تصویر" را انتخاب کنید. به مکان تصویر بروید ، آن را انتخاب کنید ، سپس بر روی "Select" کلیک کنید.
سپس گفتگویی راجع به "متن جایگزین" و "توضیحات طولانی" دریافت خواهید کرد. اگرچه این موارد اختیاری است (برای جستجوی آنها فقط می توانید بر روی "OK" کلیک کنید ، ما برای توصیف تصویر توصیه می کنیم کادر جایگزین متن را پر کنید) (در این حالت ، ما تصویر خود را "Apple Pie" توصیف کردیم). این توضیحات برای افرادی که وب را بدون تصاویر در اینترنت مرور می کنند بسیار مفید است - به عنوان مثال. بینندگان دارای اختلال در بینایی یا کسانی که در اتصالات پهنای باند محدود هستند. این توضیحات قرار است تصویر را توصیف کند و بیننده و ایده ای را که ممکن است به دنبالش باشد ، ارائه دهد.
پس از اتمام نوشتن متن متناوب ، بر روی "OK" کلیک کنید و تصویر شما در سند ظاهر می شود! اگر تصویر شما در کنار هدر شما ظاهر می شود ، به جای زیر آن ، فقط بین هدر و تصویر کلیک کنید و "Enter" را بزنید تا تصویر در خط بعدی قرار گیرد.
اگر قصد دارید کسب و کار اینترنتی راه اندازی کنید پیشنهاد میکنم از مقاله کسب درآمد اینترنتی بدون سرمایه دیدن کنید
پیوندها
مرحله بعدی تهیه نوعی ناوبری اساسی برای وب سایت شماست. اگرچه وب سایت شما ممکن است هنوز صفحات دیگری نداشته باشد ، اما هنوز هم از ابتدا می توانید ناوبری را در مکان مناسب قرار دهید. به اسامی بنویسید که فکر می کنید ممکن است برای صفحات وب دیگر در کنار یکدیگر احتیاج داشته باشید. به منظور ارائه برخی از جدایی بین آنها ، در این مثال از نماد "نوار عمودی" استفاده کرده ایم.
از آنجا که شما هنوز صفحاتی برای پیوند دادن لینک های خود ندارید ، ناوبری شما را در یک مکان "آدمک" قرار خواهیم داد برای انجام این کار ، متن را برای اولین بار انتخاب کنید ، به صفحه "Properties" بروید ، سپس در کنار "لینک" نوع "#" - این متن شما را به پیوند تبدیل می کند (به هیچ چیز اشاره نمی کند). برای همه مواردی که می خواهید به لینک تبدیل شوند ، تکرار کنید. برای تغییر پیوند در آینده ، فقط متن را دوباره انتخاب کنید ، به "پیوند" پایین بروید ، و روی نماد پوشه کلیک کنید تا صفحه واقعی مورد نظر خود را انتخاب کنید.
متن بنویسید
مرحله بعدی شروع به نوشتن متن - بدنه اصلی وب سایت شما است. این گوشت و سیب زمینی واقعی است ، و در اینجا می خواهید مقالات یا محتوای اصلی سایت خود را قرار دهید. در حال حاضر ما فقط از یک متن ساختگی از یک متن ساز استفاده کرده ایم ، اما احتمالاً شما می خواهید برخی از مطالب واقعی را در اینجا قرار دهید.
کمی مرتب
آخرین کاری که می خواهیم به این صفحه انجام دهیم تغییر نحوه قرارگیری متن در اطراف تصویر است. برای انجام این کار ، روی تصویر کلیک کنید ، به صفحه "Properties" بروید ، روی کادر "Align: 'Default" "کلیک کنید و" Left "را انتخاب کنید. این باعث می شود که تصویر در سمت چپ صفحه شما بنشیند و متن (و پیوندها) در اطراف آن به سمت راست بپیچد.
با استفاده از اینجا
اکنون امکان درج و تغییر تصاویر ، نوشتن متن ، تنظیم عنوان و ایجاد پیوندها با Dreamweaver را دارید. اکنون می توانید این صفحه را کپی کنید تا صفحات بیشتری برای وب سایت خود ایجاد کنید ، تصاویر بیشتری وارد کنید یا پیوند ها را در متن وب سایت خود وارد کنید!