Saving Your Template All graphics are sized to proper proportions to fit the templates, do not adjust the sizes. You will be creating a department specific template from which you will create all new pages in your website. The information in your template will show on all pages of Adding a banner graphic to your your site. template Select the "banner graphic" to replace with your You can return to the template at anytime and make department specific banner. changes, however these changes will affect all pages created from the template. Select "Insert" - "image" from the menu. Locate the "web- images" folder and open. Select the web page that will allow you to download the template and open the "departments" template. In the folder you will find another folder named "banners". Open this folder and select the banner graphic of your Reference the illustration above for saving a new template choice and press "OK" for your department. In the Alt window of the "Properties" menubar type in Select "File" - "Save As Template" and type in the name of alternative text for your image, such as Human Resources your template. Make this name unique for your banner. department. i.e. - humanresources. Do not use spaces or other punctuation. If the "Properties" menubar is not showing, select "Window" from the menu items and make sure Properties You have now created a new template for your department is checked. that you will be using to create new web pages. All graphics are sized to proper proportions to fit the Modifying Your Template templates, do not adjust the sizes. You will now begin the process of modifying your template with information that will be used on all pages in your website. Changing contact information on Select "Modify" - "Page Properties" from the menu. your template Highlight the campus name as shown in the illustration. In the title area, type in the title of your template. This enables search engines to find your pages. Use titles such Type in your campus name and continue line by line with as Blinn College Human Resources your information. Select "OK" and return to your page. The sample shown has a "shift-return (enter)" between lines to keep them closer together. Adding a header graphic to your After the fax number is a "return". template Select the "header graphic" to replace with your This information is based on a "CSS Style" as shown in the department specific head. right graphic as locations. Please use this style for this information. Select "Insert" - "image" from the menu. Locate the "web- images" folder and open. Adding additional links to your In the folder you will find another folder named template "dept_titles". Open this folder and select the header Downloading and completing the worksheet graphic for your department and press "OK" http://www.blinn.edu/web_format/worksheet.doc will help you understand the next procedure. In the Alt window of the "Properties" menubar type in alternative text for your image, such as Human Resources These links will go to other html pages. i.e. Highlight the header. first "link" and type in "Personnel". You will then create a link to the "personnel.htm" page in your website. If the "Properties" menubar is not showing, select "Window" from the menu items and make sure Properties These links are formatted with the "houselinks" CSS is checked. stylesheet. If you do not need as many links as shown, simply Highlight the bodyinfo text and begin typing in your text. highlight and press delete. You can format headlines and subheads later. To add additional, place your cursor before or after a link The text has been preformatted with CSS Styles and press "return or enter" and type in the new link name. "paragraph style." After all new html pages have been created and named, Setting styles for type return to your template and make the links to those pages. In the link window of the "Properties" menu, create your The illustration above show the different styles link by clicking on the folder icon and finding the proper preformatted in your template. page. i.e. personnel.htm. To change a style, highlight the text and select the style in Select and hit "OK" the "Format" window of the "Properties" menu. You will not be able to change any formatting of CSS Adding photos to your template styles. You can also add photos from the "web_images" folder. Formatting your text Select the current photo in the template and go to "Insert"- The illustration above shows how the different styles Image" from the menu. interact with each other. Find the "photos" folder with the web_images folder and By using Heading 1, Heading 2, etc., and the paragragh open the 150x220 folder and choose a Blinn photo to style, you can create a page which is easy to read and insert. Press "OK" manage. Select "File" from the menu and press "Save" - "Close". Save your work and create another page if needed. You have now completed making a department specific Select "File" - "Preview in browser" to see how your page template with which you will create all new pages in your will look. website. The information in your template will show on all pages of your site. You can return to the template at anytime and make changes, however these changes will affect all pages created from the template. Creating a new page from your template You will now create your first page from the template you have created in the previous sections. In Dreamweaver, select "File"-"New". A window will open similar to the illustration above. Press the "Templates tab" in the window and scroll down and select the name of the template you created earlier. Press "Create". Inserting text in our document Once your new document opens, choose "File" - Save As from the menu and name your document. i.e. "Personnel" You will notice the new page has the information you inserted in the template. All type and CSS style characteristics also carry over in the template.