 |
|
|
Небольшое вступление
Обычно красивые или декоративные странички - это домашние странички, странички небольших предприятий, где главной целью является заявить о себе или о своей "конторе" - вкратце рассказать о себе или своих услугах и так, чтобы ощущения остались наилучшими. И конечно очень важно внешнее оформление таких сайтов. Посмотрите на mail.ru, rambler.ru - у них дизайна как такового нет (на мой взгляд). А им и не нужно: их "любят" не за красивость, а за услуги, которые они предлогают в online. Так что "крутой дизайн" сделает им только хуже: популярнее они не станут от этого, а даже наоборот - из-за долгой загрузки их пользователей станет только меньше. С домашними страничками и страничками представительств мелких фирм - дело обстоит совсем иначе (мне так кажется). И вот самое главное, что я хотел сказать в "вступлении": разных вариантов построения страничек подобных сайтов стоко же сколько и людей на свете. Просто мне кажется, что тот вариант, о котором я расскажу в этой "статье", наиболее похдодит в качестве декоративного. Для примера см. сайт, на котором находитесь, а также: digirl.narod.ru, ixbt.com, maste.ru Усекли почему я данный тип дизайна называю декоративным? Потому что при просмотре их поситителем, они будут точно в таком же виде, как выглядели при разработке - независимо от разрешения. Ну разве не правда, что такой вариант как нельзя лучше подходит в качестве декоративного? (если оформить соотвественно)
Тело...
Photoshop
Для начала нужно нарисовать внешний вид странички где-небудь. Предлогаю для этого воспользоваться Фотошопом:
1. Какие размеры: ширину лучше брать 770px или что-то в этом роде, высота зависит от того, сколько пунктов будет в меню и сколько места они будут занимать. Если вы этого сами не знаете - ставьте 1000px, проще будет.
2. Что рисовать: рисовать сайт - вернее то, как он будет выглядеть. Если вы не понимаете фразу "то, как он будет выглядеть", в качестве примера можете посмотреть то, что я рисовал, когда делал дизайн для этого сайта: здесь(70kb, jpg) Если вы пользуетесь 6ым Exploreroм и рисунок не влезает в окно броузера, рисунок будет сжат до определённых размеров, чтобы увидеть его в "полный рост" - расширьте его до обычных размеров. На вид этот рисунок - тоже самое, что и внешний вид сайта, только без текста и всяких мелочей. Рисуйте так, чтобы рисунок был разным только сверху и снизу(за исключением пунктов меню), а основная часть нужно чтобы была одинаковой, потому как она будет в конечном итоге в виде рисунка высотой в 1 пиксель, то есть в виде фона, который броузер услужливо размножит на весь документ.
3. Как рисовать: Если у вас трудности с использованием Photoshop, используйте более простой или удобный для вас графический редактор (Paint например:)), шутка - paint не пойдёт, хотя...можно сделать так - нарисовать в Паинте, а потом это в Фотошопе нарезать, но это извращение какое-то получается:) Короче, рисуйте на своё усмотрение, только не забудьте, что основная часть должна быть одинаковой.
4. Нарезка: Здесь всё зависит от того, что вы нарисовали. Если всё просто: то есть состоит примерно из этого: логотип, потом сразу идёт меню и место под текст, и потом низ - то есть конец странички, то с нарезкой всё очень просто.Если вы делаете это в Photoshop, то склейте все слои, возьмите обычное прямоугольное выделение и режьте - то есть выделяйте нужную вам облать, копируйте её (Ctrl+C), вставляйте на новом изображении и сохраняйте в формате gif, ужимая до терпимого качетва. Значит, если у вас всё просто - логотип сделайте из одной картинки (если изображение большое, то бывает лучше сохранить его в формате jpg, а не в gif), после чего вырежьте рисунок высотой в 1 пиксель и в ширину на все 770, сделав выделение где-небудь по центру изображения. Потом вырежьте нижнюю часть рисунка и сохраните точно так же, осталось только пункты меню, с которыми поступите аналогично, только...сделайте одно выделение, которое подошло бы на все пункты меню и пульзуйтесь им при нарезке всех пунктов. Если вам немного непонятны последние несколько строк - рекомендую посмотреть пример, где инвертированы те места, которые нужно вырезать.
Составление странички из нарезаных кусков
Здесь я могу вообще ничего не говорить, а просто привести html-код. Я так и сделаю. Значит просто измените имена на свои, если у вас "всё просто", а если нет - в нужном месте добавляйте строку или столбец.
(<tr></tr>
<td></td>), или и то и другое и туда вставляйте свой "рисунок", за пример беря то, что здесь уже есть.
<HTML><HEAD><link rel=stylesheet
TYPE="TEXT/CSS" HREF="base.css">
<META http-equiv=Content-Type
content="text/html;
charset=windows-1251">
</HEAD>
<BODY>
<TABLE
cellSpacing=0 cellPadding=0 width=770 align=center border=0>
<TBODY>
<TR>
<TD vAlign=top><IMG src="images/logo.gif"
align=bottom></TD>
</TR>
<TR>
<TD vAlign=top
background="images/gb.gif">
<TABLE
cellSpacing=0 cellPadding=0 width=700 align=left
border=0>
<TBODY>
<TR>
<TD vAlign=top width=150><A
href="1.htm"><IMG hspace=5
src="1.gif"
border=0></A><BR><A href="2.htm"><IMG
hspace=5
src="2.gif"
border=0></A><BR><A href="3.htm"><IMG
hspace=5
src="3.gif"
border=0></A><A
href="4.htm"><IMG
hspace=5
src="4.gif"
border=0></A><BR><A
href="5.htm"><IMG
hspace=5
src="5.gif"
border=0></A><A
href="6.htm"><IMG
hspace=5
src="6.gif"
border=0></A></TD>
<TD width=28>
<BR><BR><BR><BR><BR><BR><BR><BR><br><br><br><BR></TD>
<TD
vAlign=top align=left width=580><!-- Начало основного текста
-->
<table border=0 align=left width=486 cellspacing=0
cellpadding=2>
<tr><td bgcolor=#3366CC
align=center>
<font color=#ffffff
size=+1><b>Главная</b></font>
</td></tr>
</table><br
clear=left>
<img src="images/bggl.gif" height=1 width=489
vspace=5>
<br><font
size=2>
<center><h3>Привет!<br>
Я рад, что вы зашли
на мой сайт!!! <br>
Надеюсь вам тут понравится и
вы станете его
постоянными
посетителями!!!</center>
<br>
<!-- Конец
основного текста
--></P></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD vAlign=center width=688
background="images/niz.gif"
height=105><FONT color=#ffffff
size=1><B><BR></B></FONT></TD>
</TR></TBODY></TABLE>
</body></html>
Удачи!
| |
|
|
