نحوه ایجاد وب سایت شخصی: 16 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:58

در صورت تمایل ، یک راهنمای کاملاً پوشش داده شده برای انتقال از کاغذ به وب ، به ویژه اگر وبمسترهای دوستانه چند لطف به شما بدهکارند ، اما حتی با تجربه و دانش اندک می توانید یک سایت بسازید و آن را به این شکل به وب برسانید: …

مرحله 1: ابزارها ، مواد و مهارتهای اساسی

برای ساختن سایت خود به آن نیاز دارید: ابزارها - رایانه ، ترجیحاً کمتر از پنج سال - کپی از dreamweaver (اختیاری) اما این چیزی است که من می دانم و در آن به شما نشان خواهم داد - یک کپی از فتوشاپ ، غیر ضروری اما قطعاً باید برای هر کسی که می خواهد یک سایت زیبا داشته باشد - اتصال به اینترنت در رایانه شما ، ترجیحاً سریع (زیرا کار را سریعتر می کند) مواد - ایده - کمی فضای دیسک ، بسته به این که سایت شما برای چیست - زمان یک مطالب ارزشمند در آن - آدرس ایمیل فعال در صورت نیاز به یکی از آنها رایگان از Gmail و hotmail مهارتهای اساسی - دانش اساسی در مورد نحوه استفاده از رایانه خود ، اینترنت - این یک دستورالعمل بدون کد است ، برای مردم است که می خواهند سایتی بسازند اما هیچ ایده ای در مورد نحوه انجام آن ندارند - برخی از مهارت های طراحی مفید خواهد بود - دانستن نحوه استفاده از فتوشاپ خوب است ، paint. NET یا GIMP

مرحله 2: بیایید شروع کنیم

هنگامی که می دانید چه نوع سایتی را می خواهید انتخاب کنید ، تصمیم طراحی خود را بگیرید.

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

مرحله 3: راه اندازی سایت

درست اینجاست که ما کار را شروع می کنیم ، وارد My Documents شوید و برای خود پوشه ای ایجاد کنید به نام "وب سایت من یا از نام سایت استفاده کنید. در داخل آن پوشه یک پوشه" images "ایجاد کنید که یکی" صفحات "و دیگری" فایل "نامیده می شود. (فایل نامیده شده برای همه فایلهای دیگری است که ممکن است در مراحل ساخت سایت خود از آنها استفاده کنید.) حالا dreamweaver را روشن کنید و کمی از فایل یک آیتم منو به نام site را مشاهده کنید ، بنابراین روی آن کلیک کرده و سایت جدیدی را انتخاب کنید ، از برگه پیشرفته استفاده کنید (زیرا مرور آن آسان تر است) ، اکنون نام وب سایت خود را در کادر نام سایت قرار دهید. شما یک کادر با برچسب 'پوشه ریشه محلی' خواهید دید ، این پوشه ای است که تحت نام سایت خود ایجاد کرده اید. کادر بعدی با برچسب "پوشه پیش فرض تصاویر" پوشه ای با نام تصاویر در پوشه اصلی خود را انتخاب کنید. دو کادر انتخاب را به حال خود رها کنید ، هر دو باید همانطور که باید باشند.

مرحله 4: اجازه دهید در آن گیر کنید

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

در الگوی خود باید یک سرصفحه ایجاد کنید ، این بنر اصلی است که در بالای صفحه قرار دارد ، معمولاً عنوان سایت/نام شرکت ، شعار و همچنین تصویر یا لوگو منعکس کننده موضوع سایت است. به بهترین اندازه گیری هایی که می توانم انجام دهم 760 در 100-200 ارتفاع ترجیح داده می شود و همچنین بستگی به این دارد که نوار منو به کجا می رود. عرض 760 است بنابراین حتی در هنگام نمایش رزولوشن 800x600 در نمایشگرها در پنجره های مرورگر قرار می گیرد (اگر نیمی از سایت را مشاهده نمی کنید فایده ای ندارد) دکمه منوی شما (اگر می خواهید آنها را بلند کنید نباید خیلی بلند باشند توصیه می کنم 30 پیکسل در ارتفاع و عرض به چیزهای زیادی بستگی دارد ، اما اندازه من معمولاً بین 100 تا 1500 پیکسل است. سپس ممکن است دوباره از دکمه های فلش استفاده کنید که به هیچ وجه به تلاش شما نیاز ندارد. (برای dreamweaver یعنی)

مرحله 5: ساخت قالب…

بنابراین در حال حاضر ما رنگ سایت خود را انتخاب می کنیم و نه با کلیک راست روی صفحه خالی و رفتن به ویژگی های صفحه. برای من پس زمینه سیاه و سفید خواهد بود ، متن سفید و عنوان را اکنون به عنوان الگو قرار دهید. در تصویر توجه خواهید کرد که همه رنگهای پیوند من به عنوان آبی تنظیم شده اند ، من پیشنهاد می کنم از آبی نیز استفاده کنید زیرا آبی رنگ پیوند سنتی است و استفاده از رنگ پیوند فرد در لیست مواردی که مردم را در مورد وب سایت ها آزار می دهد و چه چیزی آنها را ایجاد می کند ، بالا بوده است. غیر حرفه ای.

مرحله 6: ساخت قالب ادامه دارد. طرح

اکنون طرح خود را از قالب شروع می کنیم.

روی دکمه درج جدول یا دکمه رسم جدول کلیک کنید. اکنون فقط کافی است یک جدول بسازید ، انتخاب 3x3 یک مکان مناسب برای شروع است. اولین کاری که باید انجام دهید این است که جدول خود را با عرض 800 پیکسل تنظیم کنید ، می توانید عرض را در نوار ویژگی ها در پایین مشاهده کنید ، اکنون سطر بالای سلول ها را مشخص کرده و راست کلیک کنید ، به جدول موجود در منوی کلیک راست رفته و ادغام سلول ها را انتخاب کنید ، سلول تازه تشکیل شده را به ارتفاع تصویر هدر خود تبدیل کنید. در این مرحله به ویژگی های جدول خود بروید و مقدار صفر را در مقادیر 'cellpad' و 'border' قرار دهید. این بدان معناست که جدول برای کاربر نهایی وجود ندارد اما همه چیز را در جای خود نگه می دارد. حالا ما آن را در تصویر سرصفحه قرار می دهیم که باید در پوشه تصاویر سایت ذخیره شود اما اگر dreamweaver نباشد از شما می پرسد که آیا می خواهید فایل را به آنجا کپی کنید. برای قرار دادن یک تصویر در امتداد نوار دکمه های خود (زبانه بالای آنها باید روی قسمت رایج باشد) دکمه ای را که حاوی یک تصویر درخت در یک کادر است پیدا کنید (اکثر برنامه ها از نماد مشابه استفاده می کنند) روی آن کلیک کنید و یک کادر محاوره ای ظاهر می شود ، فقط فایل خود را جستجو کرده و روی آن دوبار کلیک کنید. اگر تصویر شما در مکان اشتباه ظاهر شد مکان نما در سلول اشتباه بود. در حال حاضر که میز را ترک کرده اید ، یک سلول را در کنار نوار منوی خود تقسیم کنید ، به یاد داشته باشید که ردیف ها در سراسر ستون های پایین راه قرار دارند. کادر جدول دکمه های منو را به اندازه ای که فکر می کنید خوب است بسازید و سپس دکمه های خود را با عرض مناسب قرار دهید (اگر می خواهید دکمه های فلش را نادیده بگیرید) این کار را انجام دهید. حالا یک جدول در داخل سلول خود با 1 ردیف و تعداد ستون های موجود ایجاد کنید. دکمه ها (شما باید این را از برنامه سایت خود بدانید ، من اصلاً نمی توانم به شما کمک کنم) ، یا برای یک منوی افقی 1 ستون و تعداد سطرها به تعداد دکمه ها وجود دارد.

مرحله 7: افزودن دکمه های منو

چند راه برای انجام این کار وجود دارد. اگر دکمه های تصویر ساده می خواهید (یک تصویر قابل کلیک که شبیه یک دکمه است) سپس تصویر را معمولی وارد کنید و در حال حاضر این همه است. بعداً پیوندهایی را به آنها اضافه می کنیم.

اگر می خواهید دکمه های رولور (تصویر هنگامی تغییر می کند که مکان نما روی تصویر دکمه قرار دارد ، باید برای هر دکمه تصاویر را ایجاد کنید ، بگویید دکمه های خاکستری تیره خوبی دارید که می خواهید وقتی کاربر موس را روی آنها قرار می دهد روشن شود. سپس مجموعه دوم دکمه ها را روشن می کنید. سپس به دکمه افزودن تصویر رولور در نوار ابزار (کنار یا نزدیک به دکمه تصویر) بروید و تیره را برای تصویر یک و روشن را برای تصویر 2 انتخاب کنید ، مجدداً پیوند را در حال حاضر ترک کنید زیرا هنوز یک صفحه ایجاد نکرده اید. اگر می خواهید دکمه های فلش را بخواهید باید روی برگه رسانه در بالای نوار ابزار دکمه کلیک کرده و روی نماد دکمه فلش درج (لوگوی فلش با نوار کوچک در گوشه پایین.) ، از شما می خواهد که سند را قبل از ادامه کار ذخیره کنید ، بنابراین آن را به عنوان "الگوی اصلی" یا چیزی که می دانید به معنی الگوی اصلی سایت شما است ذخیره کنید.

مرحله 8: ایجاد الگو برای استفاده

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

اکنون سند را ذخیره کنید ، آن را ببندید و به فایل جدید بروید و روی زبانه های قالب در بالا کلیک کنید ، الگوی شما باید آنجا باشد ، مطمئن شوید که صفحه به روزرسانی هنگام علامت زدن کادر تغییرات قالب علامت زده است (بعداً کار زیادی را ذخیره می کند.)

مرحله 9: مقداری محتوا اضافه کنید

صفحات خود را وادار کنید مطالب خود را اضافه کنند و به خاطر داشته باشید که آنها را در پوشه هایی که برای صفحات ساخته اید ذخیره کنید و تصاویر خود را در پوشه تصاویری که خود ساخته اید قرار دهید. فقط آخرین مرحله مرحله 8 را در مورد ساخت صفحه از قالب ، هر بار که یک صفحه ایجاد می کنید ، تکرار کنید. صفحه توجه داشته باشید محتوای جعلی که من استفاده کردم ، Lorem Ispsum نامیده می شود و داستانی در مورد خوب و بد به زبان لاتین است ، طراحان وب و گرافیک از این ایده استفاده می کنند تا تصور کنند که محصول با متن واقعی چگونه خواهد بود. امیدوارم این جعبه های آبی مناطق قابل ویرایش هستند و شما نیز آن را دارید.

مرحله 10: اکنون پیوندهای خود را ایجاد می کنیم

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

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

مرحله 11: چند نکته و ایده مفید

اگر بر روی XP کار می کنید (احتمالاً شامل ویستا نیز می شود) یک دستگاه قدرتمند XP به نام تغییر دهنده تصویر وجود دارد که به شما امکان می دهد با کلیک راست راست اندازه تصاویر خود را تغییر دهید و می توانید دسته ها را انجام دهید و انگشت شست را به انتهای هر نام اضافه کنید. برای یک گالری عکس از تصویرهای کوچکی که در صفحه اصلی ایجاد کرده اید استفاده کنید و آنها را مانند دکمه ها به فایل تصویر بزرگتر پیوند دهید ، این باعث می شود تا سرعت بارگذاری سریعتر و صفحات گالری کمتر انجام شود.

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

مرحله 12: یک صفحه فهرست ایجاد کنید

در حال حاضر اکثر میزبان های وب نیاز به یک صفحه فهرست دارند که این می تواند یک کپی از صفحه اصلی به نام 'index.htm' باشد (شما باید آن را نامگذاری کنید) یا یک صفحه فانک با وارد کردن سایت در آن ایجاد کنید (اگر شما در فلش خوب هستید ، می توانید یک انیمیشن برای زنده کردن چیزها داشته باشید. باید احساس کنید که به آن لحظه خاص نزدیک می شود. به اینجا بروید…

مرحله 13: بیایید برای ما میزبان بگیریم

اکنون خود را در سایتی که شما را به آن فرستاده ام پیدا می کنید ، من آن را انتخاب کردم زیرا تا آنجا که میزبان رایگان از آن استفاده می کند بسیار عالی است و چیزهای بسیار وحشتناکی را امکان پذیر می کند ، همچنین ذخیره سازی 8 گیگابایتی و چیزی در حدود 300 گیگابایت پهنای باند در ماه.

بنابراین مراحل ثبت نام را دنبال کرده و حساب خود را فعال کنید ، حتی به آن مدیر فایل نیز نگاه نکنید ، ما به آن نیاز نخواهیم داشت. راست به حساب خود بروید و نام حساب FTP ، نام کاربری و گذرواژه (همان رمز عبور حساب میزبان) را وارد کنید ، به سایت ها بروید ، سایت ها را ویرایش کنید و نام خود را انتخاب کنید به برگه پیشرفته بروید و به سرور تست بروید (من می دانم اطلاعات من از راه دور است اما آزمایش سرور ساده ترین راه برای بارگذاری سایت است) ، اطلاعات خود را همانطور که در تصویر نشان داده شده وارد کنید.

مرحله 14: آیا می توانید آن را احساس کنید؟

زمان بارگذاری سایت فرا رسیده است … شما در حال ایجاد یک وب سایت هستید.

به نوار پرونده ها/دارایی های سایت خود بروید ، بدون شک در حال حاضر بسیار متفاوت به نظر می رسد ، روی منوی کشویی کوچک نماها کلیک کرده و سرور تست را انتخاب کنید. اکنون dreamweaver رمز FTP شما را ذخیره کرده است. روی دکمه اتصال به میزبان راه دور (یکی با سه شکل خنده دار) کلیک کنید. هنگامی که می گوید اتصال شما روی دکمه قرار دادن فایل ها کلیک کنید ، این دکمه یک پیکان اشاره به سمت بالا است. (برای استفاده های بعدی می توانید به حساب کاربری خود وارد شوید و از دریافت فایل ها برای دریافت فایل هایی که ممکن است در رایانه خود از دست داده اید استفاده کنید.) وقتی این مورد را فشار دادید از شما می پرسد که آیا می خواهید کل سایت را بالا ببرید ، درست است. همه اینها کار می کند ، برای به روزرسانی های جزئی می توانید به جای آن فایل های جایگزین ارسال کنید. هنگامی که به "index.htm" می رسد ، می پرسد که اگر آن را جایگزین کند ، بله بگویید در غیر این صورت سایت شما بعد از 15 روز خراب می شود ، به همین دلیل ما ابتدا سایت خود را ایجاد کردیم.

مرحله 15: حالا شما نامی می خواهید؟

بنابراین ایده زیر بودن بر نفس شما تأثیر می گذارد ، شما گزینه هایی دارید ، نام دامنه بخرید (بدون میزبانی گران نیست و می توانید.com.org.co.uk و.net نامی را انتخاب کنید که مناسب نام شما باشد. یا برای مردی که می خواهد همه چیز رایگان باشد فقط به سایت dot tk بروید. آنها به سادگی صفحات شما را منعکس می کنند ، بنابراین وقتی این کار را می کنید صفحه اصلی یا صفحه فهرست خود را به پیوند سایت تبدیل می کنید.

مرحله 16: دیگر برای هر چیز دیگر؟

در حال حاضر این در پاسخ به یک سوال سوزاننده است و در مسابقه برش لیزری (دقیقه آخر) شرکت می کند ، اما اگر س questionالی دارید یا توضیحات بیشتری می خواهید از آن بپرسید ، اگر کوچک است به شما پاسخ می دهم و اگر خوب است ، من یک مرحله اضافه می کنم تا همه به س yourال شما پاسخ دهند.

همچنین می دانم که از آموزش قبلی است ، اما مطمئنم وقتی در تلاش برای ایجاد سایتی در صفحه اول هستید ، این اتفاق می افتد ، این وحشتناک است و ترجیح می دهم به شما بگویم dreamweaver را سرقت کنید و سپس از صفحه اول خرید کنید. آموزش بعدی ، نحوه ساختن تصاویر خنده دار هالک.