Перейти к содержимому


Партнерская программа Kredov

Как округлить углы таблички

#1 artyxa

artyxa
  • Пользователь
  • 74 сообщений
  • Репутация: 18
-1

Отправлено 16 Октябрь 2012 - 19:28

Давайте поговорим о том как скруглить углы таблицы. Этот эффект достигается несколькими путями 1: Это скругление с помощью изображений, он самый простой и результат получается самым качественным. 2: И методом CSS + JAVASCRIPTS. Конечно, и у первого варианта и у второго есть свои плюсы и минусы. Но в данной статье хочу рассказать, как скруглить углы таблицы с использованием изображений.
И та нам понадобится две программы для создание таблицы это Adobe Photoshop и Macromedia Dreamweaver. Переходим в Dreamweaver и создаем таблицу с тремя рядами и две колонки, вторую строку сразу объединяем в одну целую, в ней будет находится контент. Объединить ее можно следующим путем, удерживая кнопку CTRL выделить левой кнопкой мыши две строки и нажать кнопку использовать промежутки.

Изображение

Теперь нам понадобятся углы, открываем Adobe Photoshop создаем новый документ. Выбираем кнопку рисование фигур и выбираем прямоугольник со скругленными углами.

Изображение

Выставляем радиус скругление например 20-pix и рисуем прямоугольник со скругленными углами, подбираем цвет и соединяем слои в один. Теперь берем инструмент выделение и настраиваем, ставим стиль: заданный размер, ширину и высоту в верхней панели тоже 20-pix. Подставляем фиксированный квадрат на угол так чтобы линии совпадали. Копируем этот участок изображения и переносим его в новый документ, при создания нового документа параметры изображения тоже должны быть 20*20-pix. Сохраняем наш уголок так, фаил > сохранить для Web…, Далее поворачиваем уголок в другую сторону и сохраняем таким же образом, чтоб у нас получилось четыре уголка для каждого угла.

Изображение

Возвращаемся в Dreamweaver и проставляем в нашу таблицу уголки, которые только что создали. Позиционируем уголки и заливаем таблицу таким же цветом как и углы.

 

 

  • 0


Оформление форума – IPBSkins.ru