|
Before you begin transforming your sliced design into a template for your pages you will want to have a basic understanding of the elements that make up a web page. You also need to know what tags are and how they work.
Web pages consist of 4 major components which combine to make the final out put
Images and Graphics: This includes all background graphics, foreground graphics and images.
Content: content Represents any not graphic items on a web-page. Basically the text on the site.
Links: Hyper links are clickable areas that a Webpage viewer can use to navigate to a different page. Hyperlinks or “links” will define the navigational routing options that a user has has when viewing a website.
Structure: The structure of the site is how all the above elements are assembled to make the final output for the user to view. The structure of a website is defined in an HTML document.
The images and graphics are separate files that the user needs to individually download. However, the Content, Links and Structure are all contained within the HTML webpage.
Click here for an explanation on tags
To start, open the Your_Template.html file by double clicking it in the files menu.
- Select everything (APPLE + A) and center it using the properties window at the base of the page. Now Click on the blank area to deselect everything.
- at the base of the page in the properties window select Page Properties. From this area you can set global styles for your page to follow. These can include Background colors, Text and Link Colors, and Margins. Spend some time playing around in this options area to get yourself comfortable with the options you have and how they affect the page.
- Starting from the original split document created by Photoshop or Fireworks
- replace the main content box area which will hold all of the content of your website with an table and background image or color
- Select the image that is holding the place of you content box
- Mark down the width of this image and its name
- Delete the image
- set the background of the cell to the image you deleted out
- insert a table into this now empty cell making the width of the table the number you marked down from the image width
- Vertically align the cell to the top
- you can now ad text content to the cell without changing the design
- Fix cells that will need to stretch to accommodate larger amounts of content
- fill the main content cell of your layout with enough text to make the design start to stretch and make the design look off alignment any cells that are not aligning correctly will need to be fixed.
- For cells that have vertical lines in them or a graphics that should be repeated vertically to accommodate larger amounts of content follow these steps
- select the image that is currently in the cell and mark down its name.
- press the up arrow key to deselect the image (this is important as the up arrow will keep the cursor in the correct cell while deselecting the image.)
- set the background image of the cell to the same image name that you marked down.
- this cell should now look correct as the content gets longer and shorter
- Repeat this for any cells that need a repeating background
- Fix the vertically stacked navigation cells that are created via a series of images. This will need to be done for any designs that use graphic buttons as links that are stacked on top of one another.
- select all the table cells that make up the vertical stack of navigation.
- merge the cells together
- align the new large cell to the appropriate location for your design. i.e. Vert = top, bottom or middle
- delete any images from this cell that don't contain a graphic. basically any images that are just a block of color
- set the background color of this cell to the appropriate color to match your design
- For text based navigation areas follow these steps.
- select the image that is holding the place for this navigation text
- mark the image width and name and then delete it
- set the background image of the cell to the image you deleted
- insert a table into this empty cell and set its width to the number you marked down
- if you want your text to be off from the edge of the cell adjust the cell spacing
- align the table to the appropriate location to match our design
- Your site is now ready to start creating styles for your different text pieces. see the CSS portion of this site.
|