реклама
Съдържание
§1. Въведение
§2 - Първи стъпки с xHTML
§3 - Дизайн с CSS
§4 – Повече информация
1. Въведение: Какво е xHTML?
Добре дошли в света на XHTML - Разширяем език за маркиране на хипертекст - език за маркиране (подобен на програмирането), който позволява на всеки да конструира уеб страници с много различни функции. В много отношения това е основният език на Интернет.
И така, защо ни интересува?
Е, не сте ли искали да имате свой собствен уебсайт? Или да направите своя собствена игра? Ролята на това ръководство е да ви даде вкус на този мощен свят. Ако имате предишен опит в програмирането, тогава ще намерите това по-лесно, разбира се, отколкото ако само започвате своето приключение за програмиране. Така или иначе се надявам да обясня това, за да може дори новак да разбере.
Ние се грижим за xHTML, защото това е силна отправна точка за изучаването на основните градивни елементи на мрежата. Сайтове за социални мрежи като Facebook, MySpace и Twitter използват друг (от страна на сървъра) език за програмиране наречен PHP, но е добра идея да разберете основите, преди да се потопите с главата напред в програмирането свят. Това ръководство е за основните положения.
Ако искате да знаете повече за това как работи Интернет или може би как компютърните мрежи работят с всичко това технически неща или дори как компютрите могат да бъдат изградени, след това опитайте тези страхотни ръководства от вашите приятели на Да се възползват от:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Как да изградите свой собствен компютърМного е приятно да създадете свой собствен компютър; както и сплашване. Но самият процес всъщност е доста прост. Ще ви преведем през всичко, което трябва да знаете. Прочетете още
//www.makeuseof.com/tag/everything-need-know-home-networking/ Всичко, което трябва да знаете за домашната мрежаНастройването на домашна мрежа не е толкова трудно, колкото си мислите. Прочетете още
//www.makeuseof.com/tag/guide-file-sharing-networks/ Ръководството на MakeUseOf за мрежи за споделяне на файловеЗамисляли ли сте се кои са най-големите мрежи за споделяне на файлове там? Какви са разликите между BitTorrent, Gnutella, eDonkey, Usenet и т.н.? Прочетете още
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Windows 7: Ultimate GuideАко се страхувате да надстроите от Vista или XP, защото смятате, че е напълно различно от това, с което сте свикнали, трябва да прочетете това ново ръководство. Прочетете още
//www.makeuseof.com/tag/download-how-the-internet-works/ Как работи ИнтернетВече можем да имаме достъп до Интернет от нашите домашни компютри, офис, лаптопи и нашите телефони. Но много хора все още не са напълно сигурни какво представлява Интернет и как наистина работи. Прочетете още
2. Първи стъпки с xHTML
В тази глава ще научите как да създавате и персонализирате уебсайтове по много различни начини, включително да научите как да:
• Добавяне на изображения към уеб страници.
• Създайте и използвайте хипервръзки за навигиране в уеб страници.
• Настройте списъци с информация, използвайки точки и други.
• Създайте таблици с редове и колони от произволни данни и ще можете да контролирате форматирането на тези таблици.
• Създайте и използвайте формуляри, с които всъщност можете да имате някакво взаимодействие.
• Направете уеб страници достъпни за търсачките.
Всичко това ще стане с xHTML програмиране. Не вярвате ли? Прочетете нататък. Ще се изненадате колко можете да научите от толкова кратко ръководство.
Преди всъщност да влезем в „кодирането“ част от това ръководство, ще ви е необходим някакъв софтуер, който да използвате, за да можете да редактирате, тествате и основно всичко да развивате вашите програми. Отидете на www.dreamspark.com и вземете една от следните програми БЕЗПЛАТНО, ако приемете, че сте студент:
• Microsoft Visual Studio 2010
• Expression Studio 4
Ако не сте студент, можете да използвате Notepad ++, от които можете лесно да получите www.notepad-plus-plus.org
След като получите една от програмите и я инсталирате, тогава можете да започнете своя xHTML опит.
Може би използвате Mac или Linux вместо Windows; ще трябва да намерите текстов редактор което работи за вас в този случай. Опитайте се да намерите такава, която ви показва броя на линиите и цветовия код за вас.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad - Ултра лек текстов редактор [Linux] Прочетете още
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - Страхотен лек редактор на кодове за LinuxИзненадващо, Linux не предлага толкова много добри IDE (интегрирани среди за развитие). Вярвам, че това е така, защото в онзи ден повечето Linux програмисти извадиха добър стар Notepad (или gedit в случая) и започнаха ... Прочетете още
Ако предпочитате да не изтегляте специални инструменти, все още можете да използвате текстов редактор като Notepad или Wordpad. Горните програми обаче са далеч по-добри инструменти за тестване и проектиране, както и да ви помогнат вашето кодиране, тъй като ви подканва, ако направите грешка или ако се опитвате да запомните правилната дума използвате. Просто е по-добре, нали? Аз лично използвам Notepad ++ и Microsoft Visual Studio, въпреки че чух много страхотни неща за Expression Studio 4. Ще трябва да решите какво най-много ви харесва, но всички те работят отлично.
ЗАБЕЛЕЖКА: За да тествате уебсайт, създаден от Notepad или Wordpad:
С отворен файл щракнете Файл >> Запазване като
В края на името на файла въведете.HTML и щракнете Запази
Отворете току що запазения файл (ще се отвори в браузъра по подразбиране)
2.1 Запознаване със света
Добре, ето началото на пътуването Нека започнем с просто поставянето на нещо на екрана на тази уеб страница. Първо ще трябва да знаете какво те. XHTML код използва начални и крайни тагове, за да определи какво се случва с всеки елемент на страницата.
Ето пример за стартов маркер:
Ето пример за краен маркер:
Вижте разликата? Единият има име на елемент, затворено в скосените скоби, а другият е същото, но има наклонена черта преди името на елемента.
ВАЖНО: Трябва да затворите маркер, след като го отворите в даден момент от кода. Също така етикетите трябва да бъдат вложени, което означава, че не можете да направите следното:; трябва да бъде. Вижте как маркерите се вписват един в друг? Мислете за тях като за кутии: не можете да сложите нещо твърдо в кутия и половина.
Най-добрият начин да опознаете как да програмирате е като го направите всъщност, толкова достатъчно теория. Само за ориентир, аз ще маркирам всеки ред код с номер, така че да мога да обясня по ред какво се случва.
В ред 1 съм заявил html кода и в ред 5 съм го завършил. Вътре в тагът е
). Ако отворите това в уеб браузър, на екрана ще видите следното:
Ако искате да промените заглавието на страницата от гледна точка на браузъра (напр. firstpage.html) след това можете лесно да добавите в следния ред код:
Това ще направи вашата уеб страница да изглежда по-професионална.
2.2 Започвайки от и работи надолу
В повечето случаи вътре в таг има
и a .Най- обикновено се използва за скриптове в CSS (раздел 3) и JavaScript (обяснено в предстоящо ръководство), докато обикновено е съдържанието на страницата.
Някои съдържание могат да бъдат променени с помощта на скриптове в
, но на обикновено е съдържанието, което не може да се променя на страницата. Пример за това може да бъде кратък преглед на уебсайта, който посещавате.Можете да направите промени във форматирането на съдържанието с помощта на CSS (раздел 3) в
. Можете обаче да направите промени във форматирането в .Често използван набор от тагове, които се използват в тялото, са заглавните шрифтове. Тези заглавни шрифтове варират по размер и сила / дързост. Просто вижте по-долу:
2.3 Вашата снимка струва ли хиляда думи? - изображения
Досега говорихме само за текст и какво може да прави на уебсайт, но има още. Искате ли да направите уебсайта си да изглежда още по-примамлив от просто фантастични шрифтове? Опитайте да се сдобиете с няколко добри изображения, за да направите сайта наистина да даде на публиката нещо, което да гледа. Внимавайте обаче със законите за авторското право; най-добре да направите свои собствени снимки, ако възнамерявате да поставите уебсайта си в Интернет.
Може да се наложи да използвате Photoshop или някои умения за цифрово изображение, за да създадете страхотна картина или може би да подобрите собственото си изображение и да го направите още по-страхотно. Изпробвайте тези ръководства за няколко страхотни съвета и поглед:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Научете редактирането на снимки във Photoshop: Намалете основите за 1 часPhotoshop е плашеща програма, но само с един час можете да научите всички основи. Вземете снимка, която искате да редактирате, и нека започнем! Прочетете още
• //www.makeuseof.com/tag/guide-to-digital-photography/ Ръководство за начинаещи за цифровата фотографияДигиталната фотография е чудесно хоби, но може да бъде и плашеща. Това ръководство за начинаещи ще ви каже всичко, което трябва да знаете, за да започнете! Прочетете още
Най-популярните формати на изображения са следните:
• GIF = Формат за обмен на графика
• JPEG = Съвместна група за фотографски експерти
• PNG = Преносима мрежова графика
Погледнете кода по-долу и ще обясня по-нататък какво означава; тоест как да добавяте изображения към вашата уеб страница.
Както беше научено в предишните раздели, ние винаги започваме с и съвместни маркери. След това
След отваряне на абзаца в ред 9, тук изображенията се вмъкват в уебсайта. За да добавите снимка / изображение, което трябва да използвате Да започнем с. След това трябва да подскажете къде е файлът. Обикновено бихте се опитали да имате този файл в същата папка като файловете на уебсайта, ще трябва да въведете пътя на папката, в който съществува. В горния случай съм използвал
. Това означава, че източникът (SRC) на снимката пребивава в същата папка и името на този файл с изображения е Picture.jpg. Лесно нали?
Не е нужно да добавяте нищо повече от за да създадете изображение с н свойство, но можете да добавите свойства към него, за да направите някои промени в него.
Също известен като alt текст, тази стойност на свойството се показва, когато задържите курсора на мишката върху снимката.
Може да забележите, че в ред 10 стартирах маркера и го завърши с />. Това е друг начин за отваряне и затваряне на маркери. Това е обичайният начин за създаване на изображения, защото можете да изберете различните свойства на изображението, като ширина и височина, както е показано в примера по-горе.
В редове 11 и 12 се вмъква друго изображение, но това се използва другия метод за отваряне и затваряне на маркери. Ред 10 създава образа по много по-чист начин; използвайте това, а не метода в редове 11 и 12.
2.4 Хипервръзки къде могат да отидат?
2.4.1 Движение по света
Искате ли да покажете на приятелите си няколко готини сайта на вашия уебсайт, но не знаете как? Вие сте дошли на правилното място, четете на ...
Погледнете кода по-долу и вижте дали можете да познаете какво правя, преди да го обясня.
Точно така, създавам хипервръзки към някои страхотни и полезни сайтове. По принцип, за да използвате хипервръзка към определена уеб страница, която има уеб адрес, просто използвате синтаксиса по-долу:
[какво искате да хипервръзка]
Не изглежда ли много трудно? Бихте могли лесно просто да поставите текст там, като примерния код по-горе. Въпреки това, няма причина, поради която не бихте могли да използвате нещо друго като изображение. Само за малко допълнителна информация: URL адресът е Uniform Resource Locator, основно уеб адресът.
2.4.2 Снимките ви напомнят къде сте били и отново ви отвеждат там
Ето пример за използване на изображение като хипервръзка:
Сигурен съм, че ако прочетете предишните части на този раздел, които освобождавате, че това е просто смесване на създаване на изображения и хипервръзки. Синтаксисът е зададен да има хипервръзка от външната страна и изображението от вътрешната страна, чрез което се поставя хипервръзка на вмъкнатото изображение.
2.4.3 Получавате поща - Хипервръзка към имейл адрес
Това е просто повторение на последната част, но ако не сте обърнали толкова внимание, тогава просто разгледайте кода по-долу:
Вместо да използвате URL адрес (напр. http://www.something.com) тук използвам имейл адрес, който включва поставянето на следния синтаксис след знака за равенство:
"За mailto: [youremailaddress]"
Ред 10 е основният пример за тази концепция. И така, на кого ще изпратите имейл? Ловци на духове!
2.4.4 Обикаляне на вашия свят - Вътрешна хипервръзка
Сега можете да видите как бихте обиколили собствения си уебсайт. Това става просто като се използва името на файла ви като URL. Следователно можете да имате създаден уебсайт като е показано на диаграмата по-долу. Синтаксисът, който бихте използвали, ще има нещо подобно:
2.5 Специални ли сте? Тези знаци са ...
Когато въвеждате информация, която ще се показва на уебсайта като съдържание, тогава може да се наложи поставете нещо като символ като символа за авторското право: © или може би по-малко или по-голямо от символ. Но тъй като нормалните символи се използват от кодиращия синтаксис, тогава трябваше да има друг начин да се преодолее това малко пречка и решението е използвало амперсанд (&) и след това кратък код след това, за да каже на компютъра какъв символ да вмъквам. По-долу е дадена таблица с няколко примера на специални символи от кодирането:
Например можете да кажете:
В горната таблица има 2 реда
В горната таблица има <6 реда, но> 2 реда
2.6 Списъци, списъци и повече списъци
Добре, че сега ще трябва да организираме няколко неща, като списък за пазаруване. Има два типа списъци. Те са:
• Подредени списъци (числа, азбуки, римски цифри)
• Непореден списък (точки от куршуми)
За подреден списък ще използвате следните тагове =
За неупореден списък ще използвате следните тагове =
Например:
В горния пример включих както неподредени, така и подредени типове списъци. Но забелязахте ли какво още направих? Включих и техника, наречена Вложени списъци. Тези вложени списъци могат да бъдат използвани за представяне на йерархични връзки, като списъка на съставките в Вземете стъпка от съставките на рецептата по-горе.
Може да видите, че стартирах целия списък като подреден списък в ред 10 и го завърших в ред 23. Между тях ще видите и тагове, които съм използвал. Те означават Списък с елементи. Елементите в списъка са думите, които се показват като в ред 21:
Ако искате да преминете към следващото йерархично ниво на точкови точки или числа, тогава гнездете в себе си така:
2.7 Таблици... не, не математика
Това толкова трудно ли е колкото таблиците ви за умножение? Разбира се, че не, ако тръгнете по правилния начин. Ако току-що започвате с тази концепция и предполагам, че сте, тогава обикновено е най-добре да нарисувате таблицата, която искате да направите на лист хартия, както имам по-долу:
Сега го погледнете в код по-долу:
Сега ги смесете заедно и дисплеят по-долу трябва да ви помогне да разберете как е структурирана таблицата:
А
и
удебелете съответно първия и последния ред, за да привлечете повече внимание към тези части на таблицата. Повечето хора биха погледнали първо общата сума в долния колонтитул на таблицата?2.8 Цифрови форми (писалки)
Когато сърфирате в мрежата ще трябва да взаимодействате с уеб страниците, които срещате. Например на www.makeuseof.com ще трябва да въведете своя имейл адрес, както е кръгъл по-долу до абонирайте се за бюлетина и ежедневните актуализации от MakeUseOf. След като въведете имейл адреса си ще натисне Присъединяване и това ще изпрати информацията (имейла ви) в текстовото поле до бутона до база данни или може би друг имейл адрес. Форми са използвани за това, което ще научите в тази глава.
По-долу е формуляр, който се използва за поставяне само на вашето име и щракнете върху едно от тях Изпращане или ясно:
Ето кода от зад кулисите, който ще обясня по-подробно накратко:
Първо най-важното в горния скрипт е ред 10. Това е началото на формата. Методът обикновено е един или друг пост или GET. Съвсем самостоятелно обяснение, но пост изпраща информацията някъде, за да направи запис, като имейл адрес или база данни. Например: публикуване на въпрос в MakeUseOf отговори. получавам, от друга страна, изпраща предоставената от вас информация и се връща с информация за обратна връзка, като например търсачка, изпращане на ключовите думи за търсене и връщане с резултатите.
Горният кодиращ блок е пример за формуляр за публикуване, при който трябва да въведете своя имейл адрес и той ще бъде изпратен до скритата собственост с имейл адрес, след като щракнете върху бутона Изпращане. Най-
Линии 22 - 25 поставете бутоните за изпращане и нулиране / изчистване на страницата под текстовото поле. Най- Нулиране бутонът просто изтрива всеки текст, въведен в текстовото поле или полетата в тази форма. Най- Изпращане бутонът следва инструкции от скритите части на формуляра, които са създадени в редове 14 - 18. Скритият тип обикновено предполага, че нещо автоматично или част от нещо друго се използва в текущата форма. В този случай последният дава постинформация за местоназначение, в този случай се абонирайте@makeuseof.com с набора от теми в това случай „Абонирайте се по имейл“ и след това ви пренасочва към друга страница, в случая главната страница или "Index.html".
2.9 мета какво? Защо?
Някога се питах как търсачките намират уебсайтове? Ами основно това е, което използват: мета елементи. Търсачките обикновено катализират сайтове, като следват връзки към страници на сайтове, които намерят. Тези мета елементи имат информация за страницата върху тях. Вижте например следния извлечение от някакъв код:
Както можете да видите по-горе, мета информацията отива в
3. Дизайн с CSS
През повечето време хората, които гледат водачи като тези, просто харесват да играят видео игри. CSS обаче не е Counter Strike Source, нито изобщо е Shooter от първо лице (FPS). CSS е технология, която работи с xHTML и означава ° Сascading СTyle Сheets. xHTML е доста скучен сам по себе си, но ако добавите честно обслужване на CSS, форматирането и представянето на вашето създаване е далеч по-интересно. Авторите могат да правят промени в елементи на уеб страница като шрифтове, интервал, цветове; това се прави отделно от структурата на документа (глава, тяло и др.; това ще бъде обяснено в следващите глави). xHTML всъщност е създаден да уточнява съдържанието и структурата на документ. Не е като xHTML не може да прави промени във форматирането на съдържанието. Тази настройка обаче е много по-изгодна, тъй като при необходимост може да се контролира от едно място. Например, ако форматът на уебсайта се определя изцяло от приложен лист със стилове, уеб дизайнерът може просто да постави друг стилов лист, за да промени силно представянето на уебсайта.
3.1 Стилове на вградени танци
Както споменахме по-горе, този раздел е свързан с форматирането и стиловете. Тъй като има много начини да промените стила на съдържанието и страницата си, реших, че би било добре да започнете с най-правилната техника, която е Вградени стилове. Това се извършва чрез поставяне на кода в секцията със свойствата на раздел, който обхваща съдържанието. Като този:
Звучи твърде трудно? Нека ви дам пример:
Забележка: Цветът е изписан цвят когато използвате този код, тъй като той е създаден някъде не толкова готино като Австралия или Канада; Надявам се, че не ви притеснява твърде много.
Удебелената информация в горния пример е форматирането, което се обработва в съдържанието, включено в
маркер. За списък на шестнадесетични кодове за различни цветове просто потърсете в Google или използвайте този сайт: http://html-color- codes.com/
3.2 Вградени табла за стил (Cheat Sheets is win)
Използването на стилове вграждане в предишния раздел може да бъде болка, ако имате много голям сайт. Но ако искате да използвате едни и същи стилове отново и отново, тогава защо да не използвате Вграден стилен лист? Тази алтернатива ви позволява да създавате свои собствени стилове в
маркер на кода и след това ги препращате в кода, когато вмъквате някакво съдържание на вашата страница. Твърде сложно? Ето пример:
Вижте как текстът променя цвят, размер или формат в зависимост от стиловия лист в горната част? Това не е много трудно да се разбере нали?
В ред 7, където въвеждаме началото на
Ред 16 използва .xtra клас, който е направен по-рано. Начинът, по който работи е, че добавя към Xtra клас към какъвто и стил да се отвори, при което да се презапишат всички свойства, които Xtra клас използва. Например: ако даден стил има шрифт с размер 20pt и е цветът зелен, и върху него се поставя клас, който има a различен размер на шрифта, тогава новият размер на шрифта ще замени стария, но старият цвят зелен ще продължи както е.
3.3 Стилове на война (конфликтни стилове)
Има три нива на стилове и те са:
• Потребител (разглежда уебсайта)
• Автор (на уебсайта)
• Потребителски агент (браузър)
Стиловете се сливат заедно по такъв начин, че създава възможно най-добрата настройка от позицията на потребителя. Следващата диаграма показва йерархията на трите нива:
3.4 Листове за стил отвън (външно)
Не мислите ли, че би било досадно винаги да пишете една и съща таблица със стилове във всеки нов кодиращ файл? Има решение: Външни стилове. Можете да създадете друг файл с цел да го използвате за форматиране; това е ".css“Файл. За да го използвате в друг файл, просто въведете следния екстракт:
Заменете име на файл с името на вашия CSS файл и там отиваме, те са свързани. Уверете се, че вашият CSS файл е в същата папка като свързания файл (и).
Примерен CSS файл:
Преди да продължим, аз пренебрегнах да спомена какво прави. По-горе ще видите в последния ред, че съм поставил „ul ul {font-size: .8em; } “, А това означава, че размерът на шрифта ще бъде променен на относителния. Повечето хора не използват дефиниран от потребителя стилов лист, така че нека не се притесняваме за това.
3.5 Елементи за позициониране (къде следва?)
Когато поставите изображение на уеб страница, всъщност не искате то да отиде никъде. Не бихте ли искали да говорите в него? Ето как го правите, всъщност това е пример и скоро ще го обясня:
В редове от 9 до 13 ще забележите, че това е клас с идентификатор като fgpic и има няколко свойства, използвани в него. Най- позиция свойството е настроено на абсолютен което означава, че без значение как потребителят го промени, картината ще остане там, където вашият (авторът) я постави с техния код. Най- връх и наляво свойствата обозначават точка, в която елементът (напр. снимка / текст) ще бъде поставен. Най- Z-индекс свойството е много мощен инструмент, защото той определя нивото на подреждане, както е показано на екрана по-долу:
Вижте как фоновото изображение е отзад със z-индекс стойност 1, а текстът е отпред със z-индекс стойност 3, докато предното изображение е в средата със z-индекс стойност 2. Това прави да изглежда доста добре всъщност, ако играете правилно картите си
3.6 Имайте предвид вашето обкръжение (фон)
Уебсайтовете изглеждат добре с фонове, нали? Не би ли било наистина скучно, ако всички уебсайтове са имали бял или черен фон? Защо да не сложите снимка там и да промените малко цвета? Има няколко свойства, които можете да използвате, за да накарате фонът на страницата ви да се открои малко повече и да придаде на страницата известен отблясък. Погледнете следния код и вижте дали можете да разберете какво правят маркираните свойства:
Разбрахте ли какво прави? По същество фоновото изображение е това, което ще използваме на заден план, пътят на изображението минава в скоби / скоби като този> url (ТУК). Може да мислите за това, че има стойност на z-индекс 0, тъй като той е винаги в самия край на страницата. Позицията на фона на изображението е зададена в долната лява част, доста обясняваща нали? На следващо място, фоновото изображение е повторено по оста x на страницата (повторение-х) и не само това, но е фиксирано в долната част на прозореца (прикачен фон). Най-накрая цветът е зададен на случаен принцип, главно червен. Погледнете по-долу за резултата:
3.7 Колко голям мислиш? (размери на елементи / ограничения за текст)
Ако смятате, че това е всичко, което CSS може да предложи, вие грешите грешно. CSS правилата могат да определят действителните размери на всеки елемент на страницата. Да вземем пример с текстово поле. Искате ли да напишете някакъв текст, който не минава през целия екран, или може би да направите текстово поле, което може да се превърта без да премествате страницата? Това е мястото, където трябва да бъдете тогава. Вижте екрана по-долу за това, което току-що описах:
Сега нека да разгледаме кода зад кулисите:
Само малка забележка: ред 6 добавя пределна граница в долната част на всяко от текстовите полета. Доста готин, нали? Но повече за границите в следващия раздел.
3.8 Какво става наоколо (граници)
Не мисля, че това има нужда от обяснение, но все пак ще го дам. По принцип можете да поставите граници около почти всичко, така че нека да разгледаме как да го направите. Ето го кодът:
Ето какво прави кодът, основно асортимент от граници, заобикалящи името / ите на вида използвана граница. Имайте предвид, че противоположната част на канала е гребен и обратното на вмъкване е изстреляно.
3.9 Плаващи и течащи елементи
Обикновено е доста скучно просто да видите заглавие, след това текст, след това заглавие и текст. Макар да не го направите да изглежда малко по-хубаво? Има метод, който може да се използва наречен плаващи сега ще ви покажа как да направите точно това. Плаващото ви позволява да преместите елемент от едната страна на екрана, докато друго съдържание в документа след това се движи около плаващия елемент. Плаващият елемент може да бъде картина или заглавие или дори друг блок текст. Сега нека да разгледаме как изглежда:
Доста добър за доста ситуации, сега това е кодът, който създава този дизайн:
Не е ли невероятно какво можете да направите, ако просто намерите правилния метод?
3.10 Не изпускайте менюто - пример
Ако мислите да създадете уебсайт, най-вероятно ще ви трябва меню, нали? Е, това може да е правилното място за вас, ако искате нещо, което не е просто седнало там. Динамичните елементи правят уеб страниците да изглеждат по-добре и дават по-добро усещане на цялостния сайт.
Един от любимите ми видове менюта трябва да е a падащо меню така че сега нека да разгледаме как да го направите с помощта на CSS. Вижте кода по-долу:
Знам, че това в началото изглежда малко обезсърчително, но ако сте търпеливи и просто четете, ще разберете достатъчно скоро.
Ред 15 казва: когато имам <Разделение> таг с клас = „меню”И мишката е мътянад него показ на блоке вътре в него.
Редове 16-21 казват: когато имам <Разделение> таг с клас = „меню"И <а> tag след това задайте тези формати. Имайте предвид, че тези редове избират формата за скритите бутони от менюто. Редове 9-14 задават форматите на бутона на менюто, за да превъртете, за да покажете останалата част от менюто.
Ред 22 казва: когато имам <Разделение> таг с клас = „меню"И <а> таг и аз мътя над един от тези елементи след това задайте Цвят на фона до различно зелено.
Погледнете по-долу за крайния продукт:
3.11 Листове за потребителски стил (вие сте центърът на Вселената)
Потребителите могат да определят собствените си листове за потребителски стил да направят страниците да изглеждат така, както те искат. Само за да разграничавате Листове за потребителски стил и Авторски таблици за стилове. Потребителските стилове са външни таблици със стилове, които потребителите могат да създават сами, които просто се правят като CSS файлове без по-голямата част от кодирането. Тук ще ви покажа едно:
Не беше ли толкова просто?
Ако искате да знаете как да настроите това в собствения си браузър, просто ще отидете на Инструменти >> Интернет опции >> Общи >> Достъпност >> След това определете свой собствен файл Листът за стил на автора е определен в кода между тях .
4. Повече информация
4.1 Защо да използвате xHTML и co. над дизайн и други приложения?
Преди да разгледате това като факт или нещо подобно на това, трябва да знаете, че това е просто гледна точка в зависимост от това къде се намирате и доколко сте технически настроени. Обичам да използвам програмни езици, за да завърша проектите си, тъй като това означава, че можете да разберете какво стои зад дизайните, докато използвате дизайнерски приложения като Adobe Dreamweaver и Microsoft FrontPage ви позволяват да създадете своя уебсайт, като използвате само инструментите, налични в менютата. Следователно приложенията за дизайн са ограничени до опцията за менюто, предоставена ви. В заключение е напълно очевидно, че използването на езици за програмиране ще създаде уебсайта или завършения продукт нещо много по-привлекателно, тъй като неговата функционалност е ограничена само от уменията на програмиста с определения език (Напр. JavaScript, CSS, xHTML). Знам, че вероятно мислите, че съм предубеден, но ще трябва да изпробвате и двете и да решите как много усилия искате да вложите в работата си, след това изберете вашите подходящи инструменти, за да стигнете до вашия дестинация. Можете дори да изберете да използвате и двете, тъй като и Dreamweaver и FrontPage имат "изглед на кодиране" и "изглед на дизайна".
Има и други начини, по които можете да създадете уебсайтове, като използвате Joomla и WordPress.
4.2 Joomla
Joomla е страхотна система за управление на съдържанието (CMS) с много гъвкавост и с лесен за използване потребител интерфейс, за който много хора се плашат, когато осъзнаят колко опции и конфигурации са на разположение. Joomla е платформа, базирана на PHP и MySQL. Този софтуер е с отворен код, от който можете да получите http://www.joomla.org/download.html
Ако искате задълбочено ръководство за Joomla, опитайте това ръководство от MakeUseOf: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Ръководство за начинаещи към JoomlaТова ръководство ще ви преведе през всичко, от това защо да изберете Joomla и как да го инсталирате на вашия уеб сървър до как да проектирате и персонализирате вашия сайт по ваш вкус. Прочетете още
4.3 WordPress
WordPress е система за управление на съдържанието (CMS), която позволява на потребителите да създават и поддържат уебсайт чрез администратор интерфейс, включително автоматично генерирана навигационна структура, без да е необходимо да знаете HTML или да научите друг инструмент. WordPress е парче софтуер с отворен код, създаден от хиляди програмисти по целия свят и пуснат в публичното пространство, така че не е нужно да плащате, за да го използвате. WordPress е уеб-базирано приложение, написано на PHP и MySQL, предназначено да работи на сървъри на Linux: PHP е език за програмиране за уеб приложения, MySQL е релационна база данни (като MS Access), а Linux е операционна система за уеб сървъри - всички те също са отворени източник. WordPress е най-популярната CMS с над 200 милиона сайта по целия свят към края на 2009 г.
Допълнително четене
- Топ 11 HTML тагове, които всеки блогър и собственик на уебсайт трябва да знае Топ 11 HTML тагове, които всеки блогър и собственик на уебсайт трябва да знаеСветовната мрежа знае много езици и е кодирана в няколко различни. Езикът обаче, който може да се намери навсякъде и да съществува от изобретяването на уеб страници, е ... Прочетете още
- 5 забавни неща, които да правите онлайн с HTML5 5 забавни неща, които да правите онлайн с HTML5HTML5 продължава да върви от сила към сила, като все повече уебсайтове преминават към новия стандарт, който носи мултимедийно съдържание в мрежата, без да са необходими плъгини като Adobe Flash. Това ли е взривено ... Прочетете още
- Код за мрежата с тези инструменти точно във вашия браузър Създайте го: 11 брилянтни разширения на Chrome за уеб разработчициChrome е чудесен за уеб разработчиците заради своя набор от разширения. Ако някога планирате да проектирате или кодирате уебсайт, ето някои основни инструменти, които трябва да инсталирате веднага. Прочетете още
Ръководство публикувано: юни 2011 г.
