Категория "Дизайн"
Модульные сетки в Веб-Дизайне
Модульная сетка — представляет собой набор невидимых направляющих, вдоль которых располагаются элементы
Модульная система вёрстки — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали.
Модульная система упрощает и убыстряет художественное конструирование и создаёт благоприятные условия для автоматизации вёрстки при использовании компьютерных
Не буду сильно расписывать, что это такое, просто дам пару ссылочек на эту тему:
—
—
А также советую всем воспользоваться интересным , который вывод модульную сетку поверх html страницы.
Ну и напоследок, мой набор из
Создание вертикального меню для сайта
В прошлом посте я уже показывал, как с помощью изменения фона можно создавать красивые кнопки. Изменение фона отлично подходит для простых кнопок, для более сложных лучше измененить фоновое изображение. Особенно, если кнопки будут расположены в меню.
Основная проблема заключается в задержке вывода кнопки, когда браузер загружает изображение кнопки. Из-за этого создается мерцание. Есть несколько способов для того, чтобы избежать этого. Одним из них является метод pixy. Вместо нескольких фоновых изображений в нем используется одно, и это изображение будет выравниваться влево для обычного состояния и вправо, при наведении курсора на кнопку.
Continue Reading
Создание красивых кнопок с помощью css
Наконец-то удалось выбраться в интернет. Давно не писал в блоге, на это были свои причины. Но теперь я вернулся. В этом посте я покажу, как можно сделать красивые кнопки с помощью css. Эти кнопки можно использовать в меню или в формах.
Вот так наши кнопки выглядят до изменения:
Не слишком красиво. Попробуем сейчас это исправить. Для этого зададим стиль для нашей первой css кнопки.
Continue Reading
Верстаем дизайн для блога. Часть 2
В прошлом уроке мы сверстали макет нашей страницы, сделали фон и добавили тени отбрасываемые контент областью. Сегодня мы займемся шапкой нашего шаблона.
Первое чем мы займемся – это разметим шапку под основные элементы:
1) Логотип сайта
2) Поиск
3) Горизонтальное меню.
Для этого в файл index.html в теге:
Верстаем дизайн для блога. Часть 1
В прошлых статьях мы нарисовали дизайн нашего блога. Сегодня мы займемся версткой. Это первая статья из серии. В ней мы сделаем разметку нашей будущей страницы.
В чем верстать выбор лично ваш, я предпочитаю NetBeans.
Для начала создадим 2 файла «index.html» и «style.css», а также папку «images» в ней мы будем хранить картинки для шаблона.
В файл «index.html» добавим следующий код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Дизайн блога</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="title" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> </body> </html>
10 полезных плагинов на jQuery
Это первая статья из серии публикаций, посвященных полезным плагинам на jQuery.
Модальные окна
Создание дизайна сайта от А до Я. Часть 4
Это последняя статья по рисованию дизайна, в следующих мы будем заниматься версткой.
С прошлого урока дизайн немного изменился. Все правки вы найдете в прилагающихся файлах проекта.
На данный момент мой вариант дизайна выглядит следующим образом:
Создание дизайна сайта от А до Я. Часть 3
На данный момент у нас готов фон и шапка будущего шаблона. Дабы не терять время зря сразу приступим к дизайну сайдбара.
Ширина сайдбара примерно 320px при ширине шаблона 1010px. Виджеты разделяются между собой с помощью заголовков:
Codeigniter: быстрый старт
Codeigniter – это PHP фреймворк от компании EllisLab. Благодаря подробной документации и большому сообществу, Codeigniter(CI) является наилучшим решением для тех, кто только начинает изучать фреймворки. На мой взгляд, CI один из самых удобных и простых в освоении фреймворков. Подробнее о плюсах и минусах этого фреймворка можно прочитать здесь.
В своей статье я покажу как установить и настроить CI.
Шаг 1: Загрузка CodeIgniter
Для начала работы, необходимо скачать сам Codeigniter, для этого переходим на официальный сайт: http://codeigniter.com/. Последняя версия на момент написания статьи: 1.7.1.
Создание дизайна сайта от А до Я. Часть 2
В первой статье мы создали макет нашего дизайна и нарисовали фон. Сегодня мы продолжим работу на шаблоном и займемся шапкой сайта, нарисуем лого нашего будущего сайта кнопку для подписки на rss ленту и форму для поиска.
Приступим.
Я не хочу рисовать громоздкую шапку, по этому она будет состоять из логотипа, горизонтального меню, оно же разделитель шапки от контента, иконки rss и формы поиска.
Первым чем мы займемся – это будет горизонтальное меню ака разделитель контента и шапки.
Снизу шапки рисуем горизонтальную полосу шириной примерно 25px. Вот, что доложно получится:
