Web Development Workshop Series
From sosmedia
Contents |
[edit] Workshop Handouts
[edit] Working with web site templates from OSWD.org
[edit] Download a template
- Go to OSWD.org and choose a design. Remember that color schemes and graphics are more easily changed than overall page layout.
- Click the download link and choose open.
- Extract the archived files into your site root.
[edit] Folder structure and file management
When moving site files around it's best to do this work within the Dreamweaver file management window so that links between pages will be maintained. If you move files around in the Mac OS Finder you may break links to pages, css files or images.
- Pay attention if a subfolder is created. Ultimately you are going to want your site files living at the top level of your site - not nested away into a subfolder.
- create an images folder if one doesn't already exist. Move any images in your site into the images folder.
[edit] How does the template work?
Before being able to customize a template you will need to have some idea about how it is put together. Learning how the html and css work together will make it much easier to make changes.
[edit] Using Dreamweaver to quickly locate the html
- In split view highlight the section of the page from the design view window that you'd like to learn about
- In the code pane the corresponding html text will selected
[edit] Use the Web Developer toolbar add on in Firefox
This toolbar can quickly help you learn how any site is structured. Once you are familiar with the ID and class naming conventions, you can more quickly locate what you want to edit in the css file.
Once installed, to turn on the toolbar:
- go View > Toolbars > Web Developer Toolbar
Some helpful tools to help figure out the structure of a site include:
- Outline > Block Level Elements
- Information > Display ID & Class Details
- Information > Display Element Information
[edit] Images
Often, a template's stylistic uniqueness comes from the images used - either as subtle background gradients or drop shadows or with distinctive photography used in key locations. To get an overview of all of the images used in a template including images in the CSS and HTML use Firefox's Web Developer Toolbar again.
- From the Web Developer toolbar go Images > View image information