| |
Discussion
|
|
Graphics make web pages look good.
However, the larger the graphics, the slower the page will download.
One way to create large graphics that download fast is to make
use of tiling.
Tiling is essentially a graphic repeated over and over. Since
the graphic only needs to be downloaded once, the page will load
fast. This lesson will demonstrate two popular techniques of tiling.
|
| |
Procedure
|
|
Overview: Create background tiles in
Photoshop. Import art into Dreamweaver as background images attached.
Test, publish to server.
Creating the art in Photoshop
- launch Photoshop
- file > new: 760x420, RGB; save as "dots.psd" (in
"prep/lesson9")
- practice navigation shortcuts (space; space+cmd; space+cmd+option;
cmd+1, cmd+2, cmd+3)
- fill background layer with a solid color
- new layer "dot"
- ellipse marquee tool: draw circle (+shift)
- fill circle with a different color
- position circle in upper left corner
- square marquee tool: draw square (+shift)
- edit > define pattern "dot1", deselect (ctrl+D)
- new layer "pattern"
- edit > fill: use=pattern "dot1"
- draw guides for slicing, slice
- file > save for web "dots-tile.gif" (images only, in "upload/lesson9")
- new layer "stripe" (opacity=50%)
- square marquee tool: draw rectangle
- fill selection with a dark color
- file > new: 2x2, RGB, bg=transparent; save as "square.psd"
(in
"prep/lesson9")
- view 1600%
- pencil tool: make 2 single pixels of foreground color (brush
size="[" or "]")
- file > save for web "square-tile.gif" (in "upload/lesson9")
Importing art into Dreamweaver
- launch Dreamweaver
- define a new site (site > manage sites > new site):
name=lesson9,
local root folder=jsmith/csc121/upload/lesson9
- new file "tile.htm" (ctrl-click root folder)
- new CSS style (this document only): redefine HTML tag <body>
(bg="dots-tile.gif";
box: margin: top=0, left=0, right=0, bottom=0)
- draw new layer: L=20%, T=40%, W=60%, H=20%, bg="square-tile.gif"
- draw new layer: L=50%, T=50%, W=400px, H=40px, add type
- new CSS style (this document only): redefine HTML tag <p>: font=verdana, size=11, line
height=18, color=white; block: text=center
- new CSS class (this document only): ".middle":
box: margins: T=-20px, L=-200px
- apply style to "layer 2"
- save, file > preview in browser (F12)
- troubleshoot, publish (see instructions from lesson 4)
|
