Как да изградите свой собствен уебсайт: 16 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:55

Напълно обхванато ръководство за преминаване от хартия в мрежата безплатно, ако искате, особено ако някой приятелски уеб администратор ви дължи няколко услуги, но дори и с малко опит и познания можете да създадете сайт и да го включите в мрежата така: …

Стъпка 1: Инструменти, материали и основни умения

За да направите вашия сайт, ще ви трябват: Инструменти - Компютър, за предпочитане на по -малко от пет години - Копие на dreamweaver (по избор), но това е, което знам и ще ви го покажа - Копие от Photoshop, несъществено, но определено задължително за всеки, който иска добре изглеждащ сайт - Връзка с интернет на вашия компютър, за предпочитане бърз (защото това прави нещата по -бързи) Материали - Идея - Няколко дисково пространство, в зависимост от това за какво служи вашият сайт - Време, да, това е материал, който е ценен при това - Работен имейл адрес, ако имате нужда от него, те са свободни от Gmail и hotmail Основни умения - Основни познания за това как да използвате компютъра си, интернет - Това е без кодове, неразрушимо, предназначено е за хора които искат да направят сайт, но нямат представа как - Някои дизайнерски умения биха били полезни - Да знаете как да използвате Photoshop би било хубаво, боядисайте. NET или GIMP

Стъпка 2: Нека започнем

След като разберете какъв сайт искате да направите, вземете своето дизайнерско решение.

Помислете за базовите охладители за сайта, стила му и как искате хората да се ориентират в него. Ако го правите за бизнес или клуб, вероятно е най -добре сайтът да отразява охладителите на компанията/клуба и да има функции, които имитират или се основават на неща за компанията, като бутони от менюто, напомнящи за нещо, което продават, ако е бизнес. Навигацията на вашите сайтове може да бъде няколко неща, като обикновено трите основни типа използване са менютата на лявата и дясната странична лента и менютата на горната лента (те минават под заглавката като тази на този сайт) Ако правите сайта за себе си, изберете цветове и характеристики на дизайна харесвате и продължавате оттам Дума на предупреждение. не използвайте наистина противоречиви цветове и момичетата се опитват да не се възползват от флуоресцентно розово (да не са сексистки, което просто се случва много) Можете дори да управлявате бизнес чрез вашия сайт, ако искате, имам малко опит в това, но може би по -лесно да използвате нещо като магазините на yahoo, които този сайт използва.

Стъпка 3: Стартиране на сайта

Точно от тук започваме, влизаме в Моите документи и си правим папка, наречена „Моят уебсайт или използвайте името на сайта, Вътре в тази папка направете папка„ изображения “, едната се нарича„ страници “, а другата се нарича„ файлове “(нареченият файл е за всички други файлове, които може да използвате в процеса на създаване на вашия сайт.) Сега стартирайте dreamweaver и заедно с файла малко ще видите елемент от менюто, наречен site, така че щракнете върху него и изберете нов сайт, използвайте разширения раздел (тъй като е по -лесно да преминете през него), сега поставете името на вашия уебсайт в полето за име на сайта. Ще видите поле с надпис „локална основна папка“, това е папката, която сте направили под името на вашия сайт. Следващото поле е означено като „Папка с изображения по подразбиране“, изберете папката с имена images във вашата основна папка.

Стъпка 4: Нека тогава да се забием

След като сте взели всичките си основни решения на сайта, е време да направите шаблон за всичките си страници, точно така звучи, шаблон за създаване на страници, уебсайтът трябва да изглежда сходен, за да се избегне объркването на зрители и това спестява много време и загубени усилия.

Във вашия шаблон ще трябва да направите заглавка, това е основният банер, който се простира в горната част на страницата, той обикновено има заглавието на името на сайта/компанията, слоган и или снимка или лого, отразяващи темата на сайта. Най-добрите размери, които мога да дам, са 760 x 100-200, височината е предпочитана и също зависи от това къде ще се намира лентата с менюта. Ширината е 760, така че се вписва в прозорците на браузъра, дори когато се изпълняват 800x600 res на дисплеи (няма смисъл, ако не виждате половината от сайта) Бутонът на менюто ви (ако решите да ги направите не трябва да са твърде високи, препоръчвам около 30 пиксела на височина и ширина зависи от много неща, но моите обикновено са между 100 - 1500 пиксела. Тогава отново може да използвате бутони за светкавица, които изискват нулево усилие от ваша страна. (За Dreamweaver това е)

Стъпка 5: Създаване на шаблон …

Така че сега избираме цветовете на нашия сайт и какво ли още не, като щракнете с десния бутон върху празната ни страница и отидете на свойствата на страницата. При мен фонът ще бъде черен, текстът бял и поставете заглавието като шаблон сега. На снимката ще забележите, че всички цветове на връзките ми са зададени като сини, предлагам да се използва и синьо, защото синьото е традиционният цвят на връзката, а използването на нечетен цвят на връзката беше високо в списъка с неща, които дразнят хората относно уебсайтовете и какво ги прави непрофесионално.

Стъпка 6: Продължаване на шаблона. оформлението

Сега започваме нашето оформление на шаблона.

Кликнете върху бутона за вмъкване на таблица или бутона за рисуване. Сега просто плъзнете, за да направите таблица, като изберете 3x3 е удобно място за начало. Първото нещо, което трябва да направите, е да направите таблица с широчина 800 пиксела, можете да видите ширината в лентата със свойства в долната част, сега маркирайте горния ред клетки и щракнете с десния бутон, отидете на таблицата в менюто с десен бутон и изберете обединяване на клетки, направете новообразуваната клетка височината на заглавната ви снимка. На тази пинта отидете в свойствата на вашата таблица и поставете стойността на нула за стойностите „cellpad“и „border“. Това означава, че таблицата не съществува за крайния потребител, но държи всичко на място. Сега го залепваме в заглавното изображение, което трябва да бъде запазено в папката с изображения на сайта, но ако не е dreamweaver ще ви попита дали искате да копирате файла там. За да вмъкнете изглед на изображение по лентата с бутони (разделът над тях трябва да е общ) намерете бутона с изображение на дърво в поле (повечето програми използват подобен символ) щракнете върху него и ще се появи диалогов прозорец, просто потърсете вашия файл и щракнете двукратно върху него. Ако вашето изображение се появи на грешното място, курсорът е в грешната клетка. Сега, когато се справяте с масата, разделете си клетка от страната, от която искате лентата си с менюто, не забравяйте, че редовете са от другата страна на колоните надолу. Направете полето за таблицата с бутоните на менюто толкова широко, колкото мислите, че изглежда добре, след това направете бутоните с правилната ширина (игнорирайте това, ако искате бутони за флаш) Сега направете таблица във вашата клетка с 1 ред и толкова колони, колкото има бутони (трябва да знаете това от плана на сайта си, изобщо не мога да ви помогна, това е ваш избор) или за хоризонтално меню 1 колона и толкова редове, колкото бутони.

Стъпка 7: Добавяне на бутоните на менюто

Има няколко начина да направите това. Ако искате прости бутони за картина (снимка, върху която може да се кликне, която прилича на бутон) След това вмъквате изображението като нормално и засега това е всичко. по -късно ще добавим връзки към тях.

Ако искате бутони за преобръщане (изображението се променя, когато курсорът е върху снимката на бутона, тогава трябва да направите изображения за всеки бутон, да речем, че имате някои хубави тъмносиви бутони, които искате да светнат, когато потребителят постави мишката върху тях след това правите втори набор от бутони, които светят. След това отивате до бутона за добавяне на изображение при преобръщане в лентата с инструменти (до или близо до бутона за изображение) и избирате тъмния за едно изображение и светлия за изображение 2, отново оставете връзката засега, защото все още не сте направили нито една страница. Ако искате бутони с флаш, трябва да кликнете върху раздела медия в горната част на лентата с инструменти на бутоните и да кликнете върху символа за вмъкване на флаш флаш (логото на флаш с малка лента в долния ъгъл.), Той ще ви помоли да запазите документа, преди да продължите, така че го запазете като „основен шаблон“или нещо, което знаете, че означава основният шаблон за вашия сайт.

Стъпка 8: Създаване на шаблон за използване

Точно така, ние почти приключихме с нашия шаблон и можем да започнем много скоро на нашите страници, сега се нуждае от редактируеми региони (Места за съдържание на страницата, където да отидем) Добавяме ги с десен бутон и отиваме в падащото меню на шаблона с десния бутон меню, изберете нов редактируем регион и ще се появи съобщение, че документът ще бъде преобразуван в шаблон. Това е добре. Направете това с курсора в клетките на таблицата, където ще се движи съдържанието (тези под и до лентата с менюта в моята)

Сега запишете документа, затворете го и отидете на нов файл и кликнете върху разделите шаблони в горната част, вашият шаблон трябва да е там, уверете се, че страницата за актуализация, когато е отметнато полето за промени на шаблона (спестява много работа по -късно.)

Стъпка 9: Добавете малко съдържание

Накарайте вашите страници да добавят вашето съдържание и не забравяйте да ги запишете в папките, които сте направили за страници, и поставете вашите изображения в папката с изображения, която сте направили. Просто повторете последния бит от стъпка 8 за направата на страницата от шаблон всеки път, когато правите Забележете фалшивото съдържание, което използвах, то се нарича Lorem Ispsum и това е история за доброто и злото на латински, уеб и графичните дизайнери го използват, за да дадат представа как ще изглежда продуктът с истински текст. може да се намери на Lipsum.com Тези сини кутии са регионите за редактиране, които също имате, надявам се.

Стъпка 10: Сега създаваме нашите връзки

Отворете вашия шаблон, който сте използвали (запомнете тази отметка, сега той започва да играе) В минутата бутоните на менюто ви са само снимки (ако са флаш, тогава погледнете по -долу) Сега, когато имате страници, те могат да бъдат истински бутони, независимо дали са преобръщане или нормални снимки, щракнете с десния бутон върху началния бутон и отидете, за да промените връзката или да направите връзка (в зависимост от версията), ще се появи диалогов прозорец, просто потърсете файла на началната си страница и щракнете двукратно върху него. сега е свързан със страницата, повторете за останалите бутони и запишете документа, ако dreamweaver попита дали искате да промените всички страници въз основа на документа, кажете „да“.

За бутона за флаш ще запомните, че игнорирахме лентата с връзки, така че всичко, което правим, е да щракнете с десния бутон върху бутона и да натиснете редактиране, ще ви се покаже екранът от преди, просто натиснете бутона за преглед до лентата с връзки и намерете файла си. Сега трябва да имате доста работещ сайт, следващата стъпка е изпълнена с няколко трика и неща за страници със снимки и т.н., за да улесните нещата и да работите по -добре.

Стъпка 11: Няколко съвета и полезни идеи

Ако работите върху XP (възможно е и включена перспектива), има XP powertoy, наречена resizer на изображение, която ще ви позволи да персонализирате размера на снимките си с десен бутон и можете да правите партиди и да добавяте палец в края на всяко име. За фотогалерия използвайте миниатюрите, които сте направили като снимки на главната страница и ги свържете като бутони към по -големия файл с картини, това позволява по -бързо зареждане и по -малко страници на галерията.

За страници с много съдържание, може да си струва да ги разделите на страници и връзки към предишни страници, това е лесно да се направи и всичко, което правите, е да ги свържете помежду си и да поставите началната като връзка към шаблон или от която и да е страница тя е свързана от. Ще се върна и ще добавя още, когато мисля за тях или както хората им предлагат, това е само началото.

Стъпка 12: Създайте индекс страница

В момента повечето уеб хостове изискват индекс страница, която може да бъде или реплика на началната страница, наречена „index.htm“(това е, което ще трябва да я наречете), или да направите фънки страница с въведете сайт на нея (ако добре сте с флаш, можете да имате анимация, за да оживите нещата. Трябва да усетите, че се приближава до този специален момент. Отидете тук …

Стъпка 13: Нека ни вземе домакин

Сега ще се озовете на сайта, на който ви изпратих, избрах го, защото що се отнася до безплатните хостове, той е страхотен и позволява ужасно много неща, както и 8 гигабайта за съхранение и нещо като 300 GB честотна лента/месец.

Затова следвайте стъпките за регистрация и активирайте акаунта си, дори не гледайте този файлов мениджър, от който няма да имаме нужда. Отдясно отидете на вашия акаунт и свалете името на вашия FTP акаунт, потребителското име и паролата (същото като вашата парола за хостинг акаунта) Отидете на сайтове, редактирайте сайтове и изберете вашия, отидете на раздела за разширени и отидете на сървъра за тестване (Знам, че моят е на отдалечена информация, но сървърът за тестване е най -лесният начин да качите сайта), въведете информацията си, както е показано на снимката.

Стъпка 14: Можете ли да го почувствате?

Време е да качите сайта … На път сте да имате уебсайт.

Отидете до лентата с файлове/активи на вашия сайт, без съмнение изглежда много различна в момента, щракнете върху малкото падащо меню с изгледи и изберете сървър за тестване. Сега dreamweaver вече е запазил вашата FTP парола. Кликнете върху бутона за свързване към отдалечен хост (този с три забавни фигури). след като каже, че сте свързани, щракнете върху бутона за поставяне на файлове., това е бутонът, насочен нагоре. (За по -късна употреба можете да влезете в акаунта и да използвате файлове за получаване на файлове, които може да сте загубили на компютъра си.) Когато натиснете това, той ще ви попита дали искате да поставите целия сайт нагоре, по дяволите, правите с всичко това работи, за малки актуализации можете вместо това да изпращате заместващи файлове. Когато стигне до „index.htm“, той ще попита дали трябва да го замени, кажете „да“, в противен случай вашият сайт ще падне след 15 дни, затова направихме нашия сайт първи.

Стъпка 15: Сега искате име?

Така че идеята да бъдеш подсайт се отразява на егото ти, имаш възможности, купи си име на домейн (не е скъпо без хостинг и можеш да направиш.com.org.co.uk и.net да избереш това, което най -добре пасва на твоето име. Или за човека, който иска всичко безплатно, просто отидете на dot tk сайта. Те просто отразяват вашите страници, така че когато направите това, направете вашата начална страница или вашата индекс страница страницата с линк. и изберете да кажете killerjackalope.tk разбра ли?

Стъпка 16: Повече за още?

Сега това е отговор на горещ въпрос и се включва в конкурса за лазерна фреза (в последната минута), но ако имате някакви въпроси или искате допълнителни обяснения, просто попитайте, ако е малък, ще ви отговоря и ако е добър, тогава ще добавя стъпка, така че всеки да има отговора на вашия въпрос.

Също така знам, че е от предишния урок, но съм сигурен, че това се случва, когато се опитате да направите сайт на първа страница, това е ужасно и бих предпочел да ви кажа да откраднете dreamweaver, след което да купите първа страница. Следващата инструкция, как да направите смешни снимки на хълк.