Наиболее правильным решением является использование функции getimagesize, которая принимает в качестве параметра имя файла (а не ресурс с изображением, как многие другие) и возвращает массив из 7 элементов. Во втором элементе этого массива указывается тип изображения (его следует сравнивать с константами IMG_GIF, IMG_JPG, IMG_PNG, IMG_WBMP, IMG_XPM).

Полезной особенностью данной функции является то, что она работает даже при отсутствии расширения gd.

Делается это следующим образом: создается элемент link и добавляется как дочерний элемент к тегу head с помощью функций работы с DOM-моделью. Код для такого действия имеет примерно такой вид:
var tag_css = document.createElement('link');
tag_css.rel = 'stylesheet';
tag_css.href = 'http://test.ru/styles.css'; // здесь указывается URL стилевого файла
tag_css.type = 'text/css';
var tag_head = document.getElementsByTagName('head');
tag_head[0].appendChild(tag_css);

Если используется библиотека jQuery, то можно добавить тег несколько иначе:

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel:  "stylesheet",
type: "text/css",
href: "http://test.ru/styles.css" //здесь указывается URL стилевого файла
});


Однако есть и другое решение: сайт UPPOD.RU. Это сайт-конструктор, на котором можно за несколько минут сделать плеер для видео, MP3 или фотографий с размерами и цветовой гаммой, подходящей под дизайн сайта. Кроме того, для плеера можно настроить список воспроизводимых файлов (причем он хранится в обычном текстовом формате, так что можно генерировать его автоматически “на лету” скриптами), задать наличие тех или иных кнопок управления и некоторых других возможностей плеера.

Приятной особенностью является и то, что плеер не требует обязательного показа своего логотипа или ссылки.

<div>
<h1 style="border: #ccc 1px solid">Заголовок</h1>
<div style="border: #888 1px solid; border-top: 0">Текст</div>
</div>

Однако имеется более элегантное решение, позволяющее уменьшить число DOM-элементов:

<div style="border: #888 1px solid">
<h1 style="border: #ccc 1px solid; margin: -1px">Заголовок</h1>
Текст
</div>

Кроме того, такое решение удобно и тем, что не требует дублировать общие свойства CSS (например, выравнивание) для двух различных селекторов (внутреннего div и h1 в первом примере), их можно задавать только для внешнего divа.

В такой ситуации можно использовать универсальную таблиц для всех настроек, которая будет иметь следющую структуру:

type : enum(’user’,'page’,’site’) (признак, кому принадлежит данная настройка: сайту, пользователю или странице, вместо типа enum можно использовать tinyint, чтобы не изменять структуру таблицы, если появятся новые типы объектов),
id : int (идентификатор пользователя или страницы)
name: varchar(24) (название опции)
value: varchar(255) (значение опции).

Выборка всех свойств какого-либо объекта из такой таблицы осуществляется  запросом вида SELECT name, value FROM options WHERE id=”идентификатор_объекта” AND type=”тип_объекта”. Если число свойств у каждого конкретного объекта не очень велико (не более четырех-пяти десятков), имеет смысл выбирать все свойства данного объекта, и запоминать их на стороне скрипта. Это не сильно увеличит нагрузку на БД при первом запросе, зато потом позволит избежать повторных запросов при чтении других свойств объекта.

Пример такой процедуры на PHP:

function get_opt($name,$id=0,$type='site') {
   $result=false;
   static $cache; // статическая переменная, в которой кешируются свойства
   if (!isset($cache[$type.$id])) {
     $sql='SELECT name, value FROM options WHERE type="'.$type.'" AND id='.intval($id);
     $res=mysql_query($sql);
     while ($data=mysql_fetch_row($res)) $cache[$type.$id][$data[0]]=$data[1];
   }
   return $cache[$type.$id][$name];
}

При этом для эффективной работы такой таблицы нужно учесть одну тонкость: PRIMARY KEY должен иметь вид (id,type,name), а не (type,id,name), как может показаться на первый взгляд. Для тех типов объектов, для которых id не предусмотрен (например, настройки сайта в целом) следует писать в этот столбец какое-то фиксированное значение, например, ноль, и указывать его в явном виде в условии при выборке свойств (т.е. WHERE id=”0″ AND type=”site”). В этом случае PRIMARY KEY будет задействован при любой выборке. В других же ситуациях (например, без условия id=”0″ PRIMARY KEY вида (id,type,name) при выборке объектов с type=”site” задействоваться не будет вообще, а PRIMARY KEY вида (type,id,name) может быть отброшен как неэффективный в том случае, если объектов какого-то типа будет более 30%, что вполне вероятно).

Если требуется обновить или добавить несколько свойств какого-либо объекта в такой таблице (и не известно, были ли такие свойства заданы ранее), имеет смысл производить это следующим образом:
DELETE FROM options WHERE type=”тип” AND id=”ид_объекта” AND name IN (”свойство1″,”свойство2″,…)
INSERT INTO (type,id,name,value) VALUES (”тип”,”ид”,”свойство1″,”значение1″),(”тип”,”ид”,”свойство2″,”значение2″),….
Таким образом, всего двумя запросами можно обновить или добавить любое количество свойств объекта.

В этом случае при верстке имеет смысл принудительно ограничить ширину картинки с помощью CSS:

.content img { max-width: 700px }

где .content — это класс слоя, в котором отображается основное содержимое страницы.

Конечно, качество картинки при этом пострадает, но все же неудобств пользователю будет меньше, чем при растянутом сайте.

Однако есть универсальное решение этой проблемы, которое может применяться в решениях любой сложности. Выглядит оно следующим образом: над блоком с контентом, которому нужны углы, добавляем два блока, высота которых равна радиусу скругления, с горизонтальными полями (margin), также равными отступу. Фон этого блока по цвету совпадает с фоном блока контента. Внутри этого блока помещаем еще два блока, у первого из которых отрицательным является левое поле, у второго — правое (величина отступа опять же равна радиусу скругленного угла). Для этих углов задаем фоновые картинки и отменяем фоновый цвет.

Далее идет блок с контентом, после которого вставляется еще один блок, полностью аналогичный верхнему, но углы скруглены вниз.

В виде HTML-кода это выглядит примерно следующим образом:

<div class="topline"><div><div></div></div></div>
<div class="content">Здесь идет контент</div>
<div class="bottomline"><div><div>
Здесь тоже может быть текст, который должен показываться в самом низу блока, например, copyright-сообщение
</div></div></div>

CSS будет иметь такой вид:

.topline, .content, .bottomline {width: ...} /* Задаем единую ширину для всех блоков, желающие могут поместить их в общий контейнер и задавать ширину для него. */
.topline, .bottomline { margin: 0px 19px } /* В данном примере радиус угла скругления -- 19px */
.topline div, .bottomline div { margin-left: -19px  }
.topline div div, .bottomline div div { margin-right: -19px; height: 19px }

.topline { background: url('mback2.jpg'); background-repeat: repeat-x } /* В данном примере для вложенного блока используется градиентный фон. Файл mback2.jpg содержит самую верхнюю часть градиента */
.topline div { background-image: url('corn_tl.gif'); background-repeat: no-repeat; } /* Верхний левый уголок */
.topline div div { height: 19px; background-image: url('corn_tr.gif'); background-position: right; background-repeat: no-repeat; } /* Верхний правый уголок. Здесь же задаем высоту, равную радиусу скругления. Если радиус маленький, не забываем про font-size: 0 для MSIE */

.content { padding: ...; margin: ...; background-image: url('mback.jpg') }  /* Основная часть градиента */

.bottomline { background: #000; } /* В нижней части блока наш градиент плавно перешел в черный цвет, чтобы блок можно было растягивать по высоте настолько, насколько потребуется */
.bottomline div { background: url('corn_bl.gif'); background-repeat: no-repeat } /* Нижний левый уголок */
.bottomline div div { background: url('corn_br.gif'); height: 19px;background-position: right; background-repeat: no-repeat } /* Нижний правый уголок */

Возможности, которые дает такое решение:
1) если у уголков прозрачной является внешняя часть, а не внутренняя, то фон страницы (или родительского блока) может быть неоднородным;
2) фон самого блока может быть градиентным, уголки при этом также остаются градиентными;
3) не накладывается каких-либо ограничений на отступы (margin и padding) и высоту блока с контентом, ими можно управлять свободно;
4) верхняя и нижняя области рядом с уголками не являются “мертвой зоной”, как это обычно бывает во многих других решениях, там можно поместить какой-либо текст (например, заголовок вверху и copyright-сообщение внизу), либо организовать “наползание” блока с контентом на уголки, поставив ему отрицательные вертикальные поля (margins);
5) несмотря на то, что вместо одного тега становится 7, объем кода увеличивается несущественно: только для трех из них требуется указывать классы. Кроме того, решение легко воспринимается из-за своей полной симметричности, так что почти не страдает читаемость кода.

К недостаткам подхода можно отнести необходимость использовать большое количество фоновых изображений (4 уголка обязательно + 2 или 3 фоновых рисунка, если используется градиент или сложный фон). Однако эта проблема легко решается за счет использования технологии Data In URIs, описанной ранее.

# добавление сжатия файлов
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/x-javascript

# обработка "кривых" броузеров
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch Konqueror no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

# разрешение кеширования файлов на стороне клиента
<FilesMatch .*\.(css|js|php|phtml|shtml|html|xml)$>
    Header append Cache-Control private
</FilesMatch>

# включение заголовка Expires для всех файлов сроком на месяц
ExpiresActive On
ExpiresDefault "access plus 1 month"

# выключение Expires для HTML-файлов и PHP-скриптов
<FilesMatch .*\.(shtml|html|phtml|php)$>
    ExpiresActive Off
</FilesMatch>

# Выдача заголовка ETag
FileETag MTime Size

Для Apache 1.3 с модулем mod_gzip:

Header append Vary User-Agent

# разрешение кеширования файлов на стороне клиента
<FilesMatch .*\.(css|js|php|phtml|shtml|html|xml)$>
    Header append Cache-Control private
</FilesMatch>

# включение заголовка Expires для всех файлов сроком на месяц
ExpiresActive On
ExpiresDefault "access plus 1 month"

# выключение Expires для HTML-файлов и PHP-скриптов
<FilesMatch .*\.(shtml|html|phtml|php)$>
    ExpiresActive Off
</FilesMatch>

# Выдача заголовка ETag
FileETag MTime Size

# Включение модуля mod_gzip
<IfModule mod_gzip.c>
    mod_gzip_on                   Yes
    mod_gzip_can_negotiate        Yes
    mod_gzip_static_suffix        .gz
    AddEncoding              gzip .gz
    mod_gzip_update_static        No

    mod_gzip_command_version      '/mod_gzip_status'
    mod_gzip_temp_dir             /tmp

    mod_gzip_keep_workfiles       No
    mod_gzip_minimum_file_size    500
    mod_gzip_maximum_file_size    5000000
    mod_gzip_maximum_inmem_size   60000

    mod_gzip_min_http             1000
    mod_gzip_handle_methods       GET POST
    mod_gzip_item_exclude         reqheader  "User-agent: Mozilla/4.0[678]"

    mod_gzip_item_include         file       \.html$
    mod_gzip_item_include         file       \.js$
    mod_gzip_item_include         file       \.css$

# mod_gzip_item_include         file       \.pl$
# mod_gzip_item_include         handler    ^cgi-script$

    mod_gzip_item_include         mime       ^text/html$
    mod_gzip_item_include         mime       ^text/plain$
    mod_gzip_item_include         mime       ^httpd/unix-directory$
    mod_gzip_item_exclude         mime       ^image/
    mod_gzip_dechunk              Yes

    mod_gzip_add_header_count     Yes
</IfModule>

При написании статьи использовались материалы сайта Webo.In

// замена тегов
$pre_count=preg_match_all('|(
.*?)|is',$text,$pre_matches);
for ($i=0; $i<$pre_count; $i++) $text=str_replace($pre_matches[0][$i],'',$text);
$code_count=preg_match_all('|(.*?)|is',$text,$code_matches);
for ($i=0; $i<$code_count; $i++) $text=str_replace($code_matches[0][$i],'',$text);

// здесь будет производиться обработка текста в переменной $text регулярными выражениями

	// восстановление тегов
for ($i=0; $i<$pre_count; $i++) $text=str_replace('',$pre_matches[0][$i],$text);
for ($i=0; $i<$code_count; $i++) $text=str_replace('',$pre_matches[0][$i],$text);

В данном примере содержимое тега pre заменяется на последовательность вида <PRE|номер|случайная_строка>, где номер — порядковый номер тега pre (так как в тексте он может встретиться несколько раз), случайная строка — MD-хеш случайного числа (содержит только 16-ичные цифры, что минимизирует вероятность их некорректной обработки).
Важно: номер последовательности не должен стоять в конце (или за ним должен быть какой-то ограничивающий символ), так как в противном случае последовательности с номерами больше 9 начнут обрабатываться некорректно (при обратной замене вместо них будет вставляться первая или нулевая последовательность). Кроме того, предолженный код не будет работать с вложенными тегами.
Если в обработчике предполагается анализ и проверка правильности HTML-тегов, то целесобразно привести заменяющую строку к виду, напоминающему корректный HTML-тег, например: <pre num=”номер” code=”случ_строка”></pre>.