От homepage к порталу!
Графика для Web-страниц _ _
Методом изменения размеров очень удобно создавать графические разделительные линии.
Достаточно нарисовать ее сечение в виде квадрата со стороной в один пиксел, а в
HTML-документе указать нужную ширину линии или высоту, если линия вертикальная.
Фрагментарная оптимизация. Фрагментарная оптимизация применяется в случае, если
у вас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству
цветов области. В этом случае изображение можно разрезать на фрагменты и поместить
их в таблицу, тогда в браузере оно будет выглядеть как единое целое. Теперь
каждый фрагмент исходного рисунка оптимизируется отдельно. Для фрагментов, содержащих
мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами
фрагментов можно использовать полную палитру в 256 цветов или сохранять их
в формате JPEG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом,
примерно раза в 2-3, в зависимости от конкретного изображения. Кроме того,
изображение будет появляться на экране более равномерно, так как все фрагменты будут
загружаться параллельно. Однако, если количество фрагментов превысит 10, то возможного
выигрыша не получится, так как каждый фрагмент должен будет хранить свою копию
палитры и служебной информации.
Оптимизация «прозрачных» изображений. Формат GIF позволяет сохранять так называемые
«прозрачные» изображения. На самом деле, GIF не поддерживает прозрачность в
изображениях - альфа-канал - он лишь позволяет назначить одному любому цвету в палитре
атрибут прозрачности. Если браузер рисует на экране такое изображение, то,
встречая «прозрачный» пиксел, он просто игнорирует его и не показывает на экране.
Само по себе это хорошо, но в случае использования метода сглаживания краев изображения
(anti-aliasing) и последующего сохранения в формате GIF, возникает проблема
появления ореола вокруг прозрачного изображения в случае, если GIF показывается на
фоне, отличном of того, на котором происходило сглаживание и который стал прозрачным.
Единственным способом уменьшения проявления этого эффекта является назначение
прозрачности цвету, близкому к цвету фона, на котором будет использоваться GIF, и
проведение сглаживания на этом же фоне.
Использование чересстрочной развертки. Версия GIF89a позволяет сохранять файлы
с использованием чересстрочной развертки. При использовании этого способа строчки,
составляющие изображение, перемежаются, и при загрузке браузер вначале показывает
каждую 8 строчку, потом каждую 4, каждую 2, и, наконец, загружается полное изображение.
При этом посетитель вашей Web-страницы сможет понять, что же нарисовано на
данной картинке, не дожидаясь ее полной загрузки. Это очень удобно.
J\@1. Вставляем графику в HTML-кол
Создавая в первой главе книги наш сайт, мы уже познакомились со способом включения
изображений в Web-документ, вставив на начальную страницу сайта рисунок, сохраненный
в файле CLOUD.GIF. Рассмотрим теперь более подробно приемы работы с графикой.
Напомним, что, вставляя рисунок в код HTML, мы использовали его относительный адрес,
т.е. адрес, который определяется относительно текущей папки данного компьютера.
Но в ссылке на рисунок можно указать также и абсолютный адрес, т.е. адрес файла с
изображением, который находится на любом Web-узле в Интернете. Посмотрим, как
вставить в HTML-код файла geoton.html абсолютную ссылку на рисунок CLOUD.GIF,
хранящийся не в папке Web вашего компьютера, а в каталоге вашего сайта в WWW.
[...]
Главная
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] [27] [28] [29] [30] [31] [32] [33] [34] [35] [36] [37] [38] [39] [40] [41] [42] [43] [44] [45] [46] [47] [48] [49] [50] [51] [52] [53] [54] [55] [56] [57] [58] [59] [60] [61] [62] [63] [64] [65] [66] [67] [68] [69] [70] [71] [72] [73] [74] [75] [76] [77] [78] [79] [80] [81] [82] [83] [84] [85] [86] [87] [88] [89] [90] [91] [92] [93] [94] [95] [96] [97] [98] [99] [100] [101] [102] [103] [104] [105] [106] [107] [108] [109] [110] [111] [112] [113] [114] [115] [116] [117] [118] [119] [120] [121] [122] [123] [124] [125] [126] [127] [128] [129] [130] [131] [132] [133] [134] [135] [136] [137] [138] [139] [140] [141] [142] [143] [144] [145] [146] [147] [148] [149] [150] [151] [152] [153] [154] [155] [156] [157] [158] [159] [160] [161] [162] [163] [164] [165] [166] [167] [168] [169] [170] [171] [172] [173] [174] [175] [176] [177] [178] [179] [180] [181] [182] [183] [184] [185] [186] [187] [188] [189] [190] [191] [192] [193] [194] [195] [196] [197] [198] [199] [200] [201] [202] [203] [204] [205] [206] [207] [208] [209] [210] [211] [212] [213] [214] [215] [216] [217] [218] [219] [220] [221] [222] [223] [224] [225] [226] [227] [228] [229] [230] [231] [232] [233] [234] [235] [236] [237] [238] [239] [240] [241] [242] [243] [244] [245] [246] [247] [248] [249] [250] [251] [252] [253] [254] [255] [256] [257] [258] [259] [260] [261] [262] [263] [264] [265] [266] [267] [268] [269] [270] [271] [272] [273] [274] [275] [276] [277] [278] [279] [280] [281] [282] [283] [284] [285] [286] [287] [288] [289] [290] [291] [292] [293] [294] [295] [296] [297] [298] [299] [300] [301] [302] [303] [304] [305] [306] [307] [308] [309] [310] [311] [312] [313] [314] [315] [316] [317] [318] [319] [320] [321] [322] [323] [324] [325] [326] [327] [328] [329] [330] [331] [332] [333] [334] [335] [336] [337] [338] [339] [340] [341] [342] [343] [344] [345] [346] [347] [348] [349] [350] [351] [352] [353] [354] [355] [356] [357] [358] [359] [360] [361] [362] [363] [364] [365] [366] [367] [368] [369] [370] [371] [372] [373] [374] [375] [376] [377] [378] [379] [380] [381] [382] [383] [384] [385] [386] [387] [388] [389] [390] [391] [392] [393] [394] [395] [396] [397] [398] [399] [400] [401] [402] [403] [404] [405] [406] [407] [408] [409] [410] [411] [412] [413] [414] [415] [416] [417] [418] [419] [420] [421] [422] [423] [424] [425] [426] [427] [428] [429] [430] [431] [432] [433] [434] [435] [436] [437] [438] [439] [440] [441] [442] [443] [444] [445] [446] [447] [448] [449] [450] [451]