Реклама
Содержание
§1. Введение
§2 - Начало работы с xHTML
§3 – Дизайн с использованием CSS
§4 – Дополнительная информация
1. Введение: что такое xHTML?
Добро пожаловать в мир XHTML - Расширяемый язык гипертекстовой разметки - язык разметки (похожий на программирование), который позволяет любому создавать веб-страницы с множеством различных функций. Во многих отношениях это основной язык Интернета.
Итак, почему мы заботимся?
Ну, разве вы никогда не хотели иметь свой собственный сайт? Или сделать свою собственную игру? Роль этого руководства - дать вам почувствовать вкус этого могущественного мира. Если у вас есть опыт программирования, то вам, конечно, будет легче, чем если вы только начинаете свое приключение. В любом случае, я надеюсь объяснить это, чтобы даже новичок мог понять.
Мы заботимся о xHTML, потому что он является хорошей отправной точкой для изучения основных строительных блоков Интернета. Сайты социальных сетей, такие как Facebook, MySpace и Twitter, используют другой (серверный) язык программирования. называется PHP, но это хорошая идея, чтобы понять основы, прежде чем погрузиться головой в программирование Мир. Это руководство об основах.
Если вы хотите узнать больше о том, как работает Интернет или, возможно, как компьютерные сети работают со всем этим технические вещи или даже просто, как компьютеры могут быть построены, тогда попробуйте эти замечательные руководства от ваших друзей в MakeUseOf:
//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: полное руководствоЕсли вы боитесь перейти с 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 в данном случае) и начали ... Прочитайте больше
Если вы не хотите загружать какие-либо специальные инструменты, вы все равно можете использовать текстовый редактор, например Блокнот или же Word Pad. Тем не менее, вышеперечисленные программы являются гораздо лучшими инструментами для тестирования и проектирования, а также помогают вам с Ваш код, как он вам подсказывает, если вы допустили ошибку или пытаетесь вспомнить правильное слово использовать. Просто лучше, верно? Я лично использую Notepad ++ и Microsoft Visual Studio, хотя я слышал много замечательных вещей о Expression Studio 4. Вам нужно решить, что вам больше нравится, но все они работают просто отлично.
НОТА: Для тестирования веб-сайта, созданного с помощью Блокнота или Wordpad:
Открыв файл, нажмите Файл >> Сохранить как
В конце имени файла введите.HTML и нажмите Сохранить
Откройте только что сохраненный файл (он откроется в вашем браузере по умолчанию)
2.1 Знакомство с «миром»
Хорошо, вот начало пути. Давайте начнем с размещения чего-либо на экране на этой веб-странице. Во-первых, вам нужно знать, что являются. Код XHTML использует начальный и конечный теги для сортировки того, что происходит с каждым элементом страницы.
Вот пример начального тега:
Вот пример конечного тега:
Увидеть разницу? У одного имя элемента заключено в заостренные скобки, а у другого - то же, но перед именем элемента стоит косая черта.
ВАЖНЫЙ: Вы должны закрыть тег после того, как откроете его в какой-то момент кода. Также теги должны быть вложенными, то есть, вы не можете делать следующее:; так должно быть. Видите, как метки вписываются друг в друга? Думайте о них как о коробках: вы не можете положить что-то твердое в полторы коробки.
Лучший способ узнать, как программировать, - это на самом деле делать это, поэтому достаточно теории. Просто для справки, я собираюсь обозначить каждую строку кода номером, чтобы построчно объяснять, что происходит.
В строке 1 я указал HTML-код, а в строке 5 я закончил его. Внутри тег является
). Если вы откроете это в веб-браузере, то увидите на экране следующее:
Если вы хотите изменить заголовок страницы с точки зрения браузера (например, firstpage.html), то вы можете легко добавить следующую строку кода:
Это сделает вашу веб-страницу более профессиональной.
2.2 Начиная с и работает вниз
В большинстве случаев внутри тег есть
и .обычно используется для сценариев в 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. Легко ли?
Вам не нужно добавлять ничего, кроме создать изображение с альт свойство, но вы можете добавить свойства, чтобы внести в него некоторые изменения.
Также известный как альтернативный текст, это значение свойства отображается при наведении курсора мыши на изображение.
Вы можете заметить, что в строке 10 я начал тег с и закончил это />. Это еще один способ открытия и закрытия тегов. Это обычный способ создания изображений, поскольку вы можете выбрать различные свойства изображения, такие как ширина и высота, как показано в примере выше.
В строках 11 и 12 вставлено другое изображение, но для открытия и закрытия тегов используется другой метод. Линия 10 создает изображение намного аккуратнее; используйте это, а не метод в строках 11 и 12.
2.4 Гиперссылки, куда они могут перейти?
2.4.1 Перемещение по «миру»
Хотите показать своим друзьям несколько интересных сайтов на вашем сайте, но не знаете как? Вы попали в нужное место, читайте дальше ...
Посмотрите на код ниже и посмотрите, сможете ли вы угадать, что я делаю, прежде чем я объясню это.
Это верно, я создаю гиперссылки на некоторые замечательные и полезные сайты. В основном, чтобы создать гиперссылку на определенную веб-страницу с веб-адресом, вы просто используете следующий синтаксис:
[что вы хотите, чтобы гиперссылка]
Не кажется ли это очень сложным, не так ли? Вы можете легко вставить туда текст, как в примере выше. Однако нет никаких причин, по которым вы не могли бы использовать что-то другое, например изображение. Просто для дополнительной информации: URL - это унифицированный указатель ресурса, в основном веб-адрес.
2.4.2 Фотографии напоминают вам о том, где вы были, и снова доставляют вас туда
Вот пример использования изображения в качестве гиперссылки:
Я уверен, что если вы прочитали предыдущие части этого раздела, которые вы выпускаете, то это просто смешивание создания изображений и гиперссылок. Синтаксис настроен так, чтобы гиперссылка была на внешней стороне, а изображение - на внутренней стороне, в результате чего размещалась гиперссылка на вставленное изображение.
2.4.3 Вы получили почту - гиперссылка на адрес электронной почты
Это просто повторение последней части, но если вы не обращали так много внимания, просто взгляните на код ниже:
Вместо использования URL (например, http://www.something.com) здесь я использую адрес электронной почты, который включает следующий синтаксис после знака равенства:
«Электронная почта: [youremailaddress]»
Строка 10 является основным примером этой концепции. Так кому ты собираешься написать? Ghostbusters!
2.4.4 Путешествие по миру - внутренняя гиперссылка
Теперь вы можете видеть, как вы обойдете свой собственный сайт. Это делается просто с использованием вашего имени файла в качестве URL. Поэтому вы можете настроить сайты, как показано на диаграмме ниже. Синтаксис, который вы используете, будет выглядеть примерно так:
2.5 Ты особенный? Эти персонажи ...
Когда вы вводите информацию, которая будет отображаться на веб-сайте, например контент, вам может понадобиться вставить что-то вроде символа, такого как символ авторского права: © или, возможно, меньше или больше, чем символ. Но так как нормальные символы используются синтаксисом кодирования, то должен был быть другой способ обойти это маленькое препятствие, и решение было использовать амперсанд (&), а затем короткий код, чтобы сообщить компьютеру, какой символ Путин. Ниже приведена таблица с несколькими примерами специальных символов из кода:
Например, вы можете сказать:
В приведенной выше таблице 2 строки
В приведенной выше таблице <6 строк, но> 2 строки
2.6 Списки, списки и другие списки
Хорошо, теперь нам нужно организовать несколько вещей, например, список покупок. Есть два типа списков. Они:
• Упорядоченный список (цифры, алфавиты, римские цифры)
• Ненумерованный список (маркеры)
Для упорядоченного списка вы бы использовали следующие теги =
Для неупорядоченного списка вы должны использовать следующие теги =
Например:
В приведенном выше примере я включил неупорядоченный и упорядоченный типы списков. Но ты заметил, что еще я сделал? Я также включил технику под названием Вложенные списки. Эти вложенные списки могут использоваться для представления иерархических отношений, например, список ингредиентов в Получить ингредиенты шаг рецепт выше.
Вы можете видеть, что я начал весь список как упорядоченный список в строке 10 и закончил его в строке 23. В промежутке вы увидите и теги, которые я использовал. Эти обозначают Элементы списка. Элементами списка являются слова, которые отображаются, например, в строке 21:
Если вы хотите перейти на следующий иерархический уровень точек или чисел, вложите их в себя следующим образом:
2.7 Таблицы... нет, не математика
Это так же сложно, как ваши таблицы умножения? Конечно, нет, если вы поступите правильно. Если вы только начинаете с этой концепции, и я предполагаю, что это так, то обычно лучше нарисовать стол, который вы хотите сделать, на листе бумаги, как у меня ниже:
Теперь посмотрите на это в коде ниже:
Теперь смешайте их вместе, и показанный ниже экран должен помочь вам понять, как устроена таблица:
и
выделите жирным шрифтом первую и последнюю строку соответственно, чтобы привлечь больше внимания к этим частям таблицы. Большинство людей сначала посмотрят на сумму в нижнем колонтитуле таблицы, верно?2.8 Цифровые формы (без ручек)
При серфинге в сети вам нужно будет взаимодействовать с веб-страницами, с которыми вы сталкиваетесь. Например, на www.makeuseof.com вам нужно будет ввести свой адрес электронной почты, как обведено ниже, чтобы подписаться на рассылку и ежедневные обновления от MakeUseOf. После ввода адреса электронной почты вы будет нажимать Присоединиться и это отправит информацию (ваш адрес электронной почты) в текстовом поле рядом с кнопкой либо в базу данных, либо, возможно, на другой адрес электронной почты. формы используются для этого, чему вы научитесь в этой главе.
Ниже приведена форма, которая используется для ввода только вашего имени и нажмите либо представить или же ясно:
Вот код из-за кулис, который я объясню более подробно в ближайшее время:
Во-первых, самая важная вещь в приведенном выше скрипте - это строка 10. Это начало формы. Метод обычно либо Почта или же получить. Само собой разумеется, но Почта отправляет информацию куда-то, чтобы сделать запись, такую как адрес электронной почты или база данных. Например: размещение вопроса на MakeUseOf Ответы. Получитьс другой стороны, отправляет предоставленную вами информацию и возвращает информацию обратной связи, такую как поисковая система, отправляя ключевые слова поиска и возвращаясь с результатами.
Приведенный выше блок кодирования является примером почтовой формы, в которой вы вводите свой адрес электронной почты, и он будет отправлен в скрытое свойство с адресом электронной почты после нажатия кнопки «Отправить».
Строки 22 - 25 располагают кнопки «Отправить», «Сбросить / очистить» на странице под текстовым полем. Сброс настроек Кнопка просто удаляет любой текст, введенный в текстовое поле или поля в этой форме. представить Кнопка следует инструкциям из скрытых частей формы, созданных в строках 14 - 18. Скрытый тип обычно предполагает что-то автоматическое или часть чего-то другого, используемого в текущей форме. В этом случае именно последний дает ПочтаРедактировать информацию о месте назначения, в данном случае, [email protected], с указанием темы, в этом случай «Подписаться на электронную почту», а затем перенаправляет вас на другую страницу, в этом случае на главную страницу или «Index.html».
2.9 мета что? Зачем?
Вы когда-нибудь задумывались, как поисковые системы находят сайты? Ну, в основном это то, что они используют: метаэлементы. Поисковые системы обычно каталогизируют сайты, следуя ссылкам на страницы на сайтах, которые они находят. Эти метаэлементы содержат информацию о странице. Взгляните на следующую выдержку из некоторого кода для примера:
Как вы можете видеть выше, мета-информация идет в
3. Дизайн с CSS
Большинству людей, которые смотрят на такие руководства, просто нравится играть в видеоигры. Однако CSS не является Counter Strike Source и не является шутером от первого лица (FPS). CSS это технология, которая работает с xHTML и выступает за Сascading Sмозоль Sheets. xHTML довольно скучен сам по себе, но если вы добавите честную порцию CSS, форматирование и презентация вашего творения будут гораздо интереснее. Авторы могут вносить изменения в элементы веб-страницы, такие как шрифты, интервалы, цвета; это делается отдельно от структуры документа (заголовок, тело и т. д.; это будет объяснено в следующих главах). xHTML на самом деле был разработан для определения содержания и структуры документа. Не похоже, что xHTML не может вносить изменения в форматирование содержимого. Тем не менее, эта установка гораздо более выгодна, поскольку при необходимости ее можно контролировать из одного места. Например, если формат веб-сайта полностью определяется прилагаемой таблицей стилей, веб-дизайнер может просто создать другую таблицу стилей, чтобы значительно изменить представление веб-сайта.
3.1 Встроенные стили танцев
Как упоминалось выше, этот раздел посвящен форматированию и стилям. Поскольку есть много способов изменить стиль вашего контента и страницы, я подумал, что было бы хорошо начать с самой простой техники, которая Встроенные стили. Это выполняется путем размещения кода в разделе свойств вкладки, охватывающей содержимое. Как это:
Звучит слишком сложно? Позвольте мне привести Вам пример:
Примечание: цвет пишется цвет при использовании этого кода, поскольку он был создан где-то не так круто, как Австралия или Канада; Надеюсь, это вас не сильно беспокоит.
Информация, выделенная жирным шрифтом в приведенном выше примере, является форматированием, которое обрабатывается в контенте, включенном в
тег. Для получения списка шестнадцатеричных кодов для разных цветов просто найдите Google или используйте этот сайт: http://html-color- codes.com/
3.2 Встроенные таблицы стилей (Шпаргалки выигрывают)
Использование встроенных стилей в предыдущем разделе может быть проблематичным, если у вас очень большой сайт. Но если вы хотите использовать одни и те же стили снова и снова, то почему бы не использовать Встроенная таблица стилей? Эта альтернатива позволяет вам создавать свои собственные стили в
тег кода, а затем вы ссылаетесь на них в коде при вставке некоторого контента на вашу страницу. Слишком сложно? Вот пример:
Посмотрите, как текст меняет цвет, размер или формат в зависимости от таблицы стилей вверху? Это не очень сложно понять, верно?
В строке 7, где мы представляем начало
Строка 16 использует .xtra класс, который был сделан ранее. То, как это работает, заключается в том, что это добавляет Xtra класс в любом стиле, в котором он открыт, тем самым перезаписывая любые свойства, которые Xtra класс использует. Например: если стиль имеет размер шрифта 20pt и имеет зеленый цвет, и на него накладывается класс, который имеет другой размер шрифта, тогда новый размер шрифта заменит старый, но старый зеленый цвет продолжится как есть.
3.3 Стили на войне (противоречивые стили)
Есть три уровня стилей, и они:
• Пользователь (просмотр сайта)
• Автор (сайта)
• Пользовательский агент (браузер)
Стили объединяются таким образом, чтобы создать наилучшую возможную настройку с позиции пользователя. Следующая диаграмма показывает иерархию трех уровней:
3.4 Таблицы стилей из-за пределов (внешние)
Не думаете ли вы, что было бы досадно постоянно писать одну и ту же таблицу стилей в каждом новом файле кодирования? Есть решение: Внешние таблицы стилей. Вы можете создать другой файл с целью использования его для форматирования; это ".css" файл. Чтобы использовать его в другом файле, просто введите следующий фрагмент:
замещать имя файла с именем вашего CSS-файла и там мы идем, они связаны. Убедитесь, что ваш CSS-файл находится в той же папке, что и ваши связанные файлы.
Пример файла CSS:
Прежде чем мы продолжим, я не упомянул, что они делают. Выше вы увидите в последней строке, что я поставил «ul ul {font-size: .8em; } », И это означает, что размер шрифта будет изменен на 0,8 или 80% от нормального размера, который пользователь хочет, чтобы он использовал свою собственную таблицу стилей, загруженную в браузер. Большинство людей не используют пользовательскую таблицу стилей, поэтому давайте не будем об этом беспокоиться.
3.5 Позиционирование элементов (куда дальше?)
Когда вы помещаете изображение на веб-страницу, вы не хотите, чтобы оно просто куда-то уходило. Разве вы не хотите иметь право голоса в этом? Ну, вот как вы это делаете, ну, на самом деле это пример, и я вскоре объясню это:
В строках с 9 по 13 вы заметите, что это класс с идентификатором как fgpic и имеет несколько свойств, используемых в нем. позиция свойство установлено в абсолютный Это означает, что независимо от того, как пользователь его изменит, картинка останется там, где ваш (автор) разместит ее вместе со своим кодом. Вверх и оставили Свойства обозначают точку, в которой элемент (например, изображение / текст) будет размещен. Z-индекс Свойство является очень мощным инструментом, поскольку оно устанавливает уровень стека, как показано на скриншоте ниже:
Посмотрите, как фоновое изображение находится сзади со значением z-index, равным 1, и текст находится спереди со значением z-index, равным 3, в то время как изображение на переднем плане находится посередине со значением z-index, равным 2. На самом деле, если вы правильно играете в карты, это выглядит довольно неплохо
3.6 Следите за своим окружением (фон)
Веб-сайты выглядят хорошо с фонами, не так ли? Разве не было бы скучно, если бы у всех сайтов был белый или черный фон? Почему бы не поставить туда картинку и немного изменить цвет? Есть несколько свойств, которые вы можете использовать, чтобы сделать фон вашей страницы немного более заметным и придать странице некоторую яркость. Взгляните на следующий код и посмотрите, сможете ли вы выяснить, что делают выделенные свойства:
Вы выяснили, что он делает? В основном фоновое изображение - это то, что мы собираемся использовать в фоновом режиме, путь к изображению идет в скобках / скобках, как это> url (ВОТ). Вы можете подумать, что это имеет значение z-index 0, поскольку оно всегда находится в самом конце страницы. Положение фона изображения было установлено внизу слева, довольно понятно, верно? Затем фоновое изображение было повторено по оси X страницы (repeat-x), и не только это, но и закреплено в нижней части окна (background-attachment). Наконец, цвет был случайно выбран в основном красным. Посмотрите ниже на результат:
3.7 Как вы думаете, насколько большой? (размеры элементов / ограничения текста)
Если вы думаете, что это все, что CSS может предложить, вы сильно ошибаетесь. Правила CSS могут указывать фактические размеры каждого элемента страницы. Давайте возьмем пример текстового поля. Вы хотите ввести какой-нибудь текст, который не проходит весь экран, или, возможно, создать текстовое поле, которое можно прокручивать, не перемещая страницу? Это где вы должны быть тогда. Смотрите скриншот ниже для того, что я только что описал:
Теперь давайте посмотрим на код за кулисами:
Небольшое примечание: строка 6 добавляет маргинальную рамку внизу каждого из текстовых полей. Довольно круто, правда? Но подробнее о границах в следующем разделе.
3.8. Что посеешь, то и пожнешь (границы)
Я не думаю, что это нуждается в объяснении, но я все равно дам его. По сути, вы можете установить границы вокруг чего угодно, поэтому давайте посмотрим, как это сделать. Итак, вот код:
Вот что делает код, в основном ассортимент границ, окружающих названия / типы используемых границ. Имейте в виду, что противоположная сторона канавки является ребристой, а противоположная вставка смещена.
3.9 Плавающие и плавные элементы
Обычно бывает довольно скучно видеть заголовок, затем текст, затем заголовок и текст. Хотя не сделать это выглядит немного лучше? Есть метод, который можно использовать, который называется плавающийи теперь я собираюсь показать вам, как это сделать. Плавающее позволяет вам переместить элемент на одну сторону экрана, в то время как другое содержимое документа затем обтекает перемещаемый элемент. Плавающий элемент может быть изображением, заголовком или даже другим блоком текста. Теперь давайте посмотрим, как это выглядит:
Довольно хорошо для довольно многих ситуаций, теперь это код, который создает этот дизайн:
Разве не удивительно, что вы можете сделать, если просто найдете правильный метод?
3.10 Не выпадайте из меню - пример
Если вы думаете о создании веб-сайта, вам, скорее всего, понадобится меню, верно? Ну, это может быть правильным местом для вас, если вы хотите что-то, что не просто сидит там. Динамические элементы делают веб-страницы лучше и дают общее представление о сайте в целом.
Один из моих любимых типов меню должен быть выпадающее меню так что теперь давайте посмотрим, как сделать это с помощью CSS. Проверьте код ниже:
Я знаю, поначалу это кажется немного утомительным, но если вы наберетесь терпения и просто продолжите читать, вы скоро поймете.
Строка 15 говорит: когда у меня есть <ДИВ> тег с классом = «менюИ мышь зависатьразмышляя над этим дисплей блоквнутри.
Строки 16-21 говорят: когда у меня есть <ДИВ> тег с классом = «менюИ> Отметьте затем установите эти форматы. Имейте в виду, что эти строки выбирают формат для скрытых кнопок меню. Строки 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. Это взорвали ... Прочитайте больше
- Код для Интернета с помощью этих инструментов прямо в вашем браузере Build It: 11 расширений Brilliant Chrome для веб-разработчиковChrome отлично подходит для веб-разработчиков из-за его пула расширений. Если вы когда-нибудь планируете проектировать или кодировать веб-сайт, вот несколько важных инструментов, которые вы должны установить прямо сейчас. Прочитайте больше
Путеводитель Опубликовано: июнь 2011
