Using Macromedia Dreamweaver MX 2004 to Create a Website with Templates
OBJECTIVES: 1. Create new page from a Template 2. Use Tables to define a Layout 3. Insert Graphics into a website 4. Insert Hyperlinks into a website 5. Editing Template 6. Assigning Editable Regions SUMMARY: The following tutorial will assist you in creating a homepage from a template and editing an existing template. A template allows for the Blinn web site to have a consistent look and allows you to easily make changes to your web pages. Although each page of the site will have the same appearance, content of each page can be manipulated. The following tutorial will also walk you through the process of inserting hyperlinks and graphics to enhance the aesthetics and functionality of your site.
TABLE OF CONTENTS: Home Pages…………………………………..2 Tables………………………………………....8 Graphics……………………………………..11 Hyperlinks…………………………………...12 Editing a Template…………………………..14 Editable Regions…………………………….15
OBJECTIVE 1: CREATE A NEW PAGE FROM A TEMPLATE
An important part of web design is staying organized so that you know where things are stored. By establishing specific folders and storing your files in these folders you can better manage your website. This objective will help you establish folders for organization as well as the creation of a new page from a template. 1. Create a folder on your computer in which you will save your work Go to the Start Menu (in the bottom left-hand corner) Once the Menu is up select My Computer Click on C:/ Drive In the C:/ drive, Right Click Click New > Folder
Type in a name for the folder (example: website)
Click Enter 2. Create a subfolder (images) inside your website folder Double Click this new Website folder Click Make a New Folder button
2/15
Type in the folder name images
Click Enter 3. Create another new subfolder Click Make a new folder on the left-hand side
Type in the folder name templates
Click Enter
3/15
3. Move the template into your Templates folder Double-click on your templates folder Move the C:/ drive window so that you can see the template on the desktop. Click and drag the template, drop it in your Templates folder
4. Create a new page. Open the program Dreamweaver
* On most computers: Click Start > All Programs > Macromedia > Macromedia Dreamweaver
Click Site > Manage Sites
4/15
Click New > Site
*the sites listed may appear different on each computer 5. Set your local folder (where your files will be saved) (1) Under “Site Name”, title your website (example: website) (2) Under “Local Root Folder:” click the browse folder button
*note: a dialog box should appear (3) Under “Select”, click the blue drop down arrow (4) Click C Drive (5) Double click your website folder (example: website) *note: this is the folder you created and named in step 1
Click Select
6. Click OK to define these changes
5/15
7. Click Done 8. Create a page from your template Click File > New (1) Choose Templates Tab (2) Find your site. (ex. Website) (3) Choose the template. (ex. Faculty – a preview will appear on the right) (4) Click Create
6/15
Make sure you are in Design view; Click the Design tab
9. Save your webpage File > Save Type a name for the page (ex. photo_gallery) *note: when naming use lower case and no spaces
7/15
OBJECTIVE 2: USE TABLES TO DEFINE A LAYOUT
Think of tables in a website as the bones in your body. Without a skeleton of bones, humans would be a lump of skin on the ground. This is true for tables in a website. By creating invisible tables, we can design the specific structure of our websites. Without tables our graphics and text would run together into one chaotic blob. 1. Identify table structures used in finished websites: This website is created in a single table that is subdivided into cells and rows Red Lines represent the borders of rows and cells in the tables.
*note: This is a representation of tables and does not necessarily depict the true layout of the Blinn website.
Blinn Website Viewable Online
Blinn Website Possible Table Layout
2. Insert a Table Layout to form the Website Structure *note: table will insert where your cursor is blinking Click Insert > Table
3. Fill in the Table property box according to your website layout plan. Use the table below as your guide:
8/15
Title Rows: Columns: Table Width:
Definition Rows run Horizontally across the page. Columns run Vertically across the page How far across the page do you want your table to stretch. If you select your table width in percents, you can specify how much of the web browser will be filled with a table. For example, 100 percent would mean your table reaches from the left side of the web browser to the right side of the web browser. As a user adjusts the size of the browser window, the size of your table will adjust to accommodate. If you select your table width in pixels, you will define the size of the table. The average screen size is 1024 X 786 pixels. This means large tables can extend beyond the viewable area which will cause a user to have to scroll left to right to see the entire page. The size of the lines that define the edge of the table. This table has a border size of 1. To create an invisible table, set your border size to 0. The white space set between the border of a cell and the content within the cell. The white space set between bordering cells.
Example 2 2
100 percent
Border Thickness: Cell Padding: Cell Spacing:
0 0 0
Click OK 4. Use the Merge command to combine cells Left Click and Drag (at the same time) your mouse across cells to be combined 9/15
*note: the cells should be highlighted Click Modify > Table > Merge Cells
10/15
OBJECTIVE 3: INSERTING GRAPHICS
Inserting images is a process similar to any word processing program. However, be advised that any images you place in your website MUST be saved in a folder within your website in order to work properly on the web. It is for this reason we have created an „images‟ folder within your „website‟ folder on the desktop. All your images should be saved to this location. 1. Place your cursor at the spot you would like for your graphic to be inserted. 2. Click Insert > Image
3. Click the blue Browse arrow next to the “Look in:” box. 4. Select Website (see Objective 1 Step 1) 5. Double Click the images folder
6. Double Click the graphic you would like to insert.
*note: If a dialog box appears click OK
11/15
OBJECTIVE 4: INSERTING HYPERLINKS
There are two types of hyperlinks in web design. A relative hyperlink refers to a link to another location within the same website. For example, my home page could have a button that is linked to my Page 2. An absolute hyperlink is a link that directs you to an external website. For example, if you link your personal website to the Blinn homepage, you have created an absolute hyperlink.
Relative Hyperlinks: 1. Type and highlight the text that you would like to represent your relative hyperlink OR click on the graphic you would like to represent your relative hyperlink. 2. Go down to your Properties menu at the bottom of the screen and find the box labeled Link. 3. Click the Browse folder icon to the right of the Link box 4. A new window will appear. 5. Your website should automatically appear, if it does not browse for your website folder. 6. Select the page you wish to link to (ex. welcome) 7. Click OK 8. Now the name of the page should appear in the Link box in the Properties menu. (ex. welcome.htm)
*note: repeat these steps for relative hyperlinks as needed
12/15
Absolute Hyperlinks: 1. Type and highlight the text that you would like to represent your absolute hyperlink OR click on the graphic you would like to represent your absolute hyperlink. 2. Go down to your Properties menu at the bottom of the screen and find the box labeled Link. 3. Open up an Internet Browser Window (ex.- Internet Explorer, Netscape) 4. Search the internet for the web page that you wish to link to. 5. Once you are on the web page copy the internet address. (To copy you highlight the web address then right click and chose copy OR highlight the web address and press Ctrl + C on the keyboard.) 6. Go back to Dreamweaver and locate the Link box once again. 7. Click once in the box, then on your keyboard press Ctrl + V. This will paste the address. 8. Now the web address should appear in the Link box in the Properties menu. (ex. http://www.blinn.edu)
*note: repeat these steps for absolute hyperlinks as needed
13/15
OBJECTIVE 5: EDITING A TEMPLATE 1. To find your template, go to the right hand side and there will be a folder called templates. 2. Double-click this folder and it will show what templates you can edit. 3. Double-click the name of the template that you would like to edit. 4. Now you can make changes to this page just like you would edit any page. 5. When you are done making changes go to File>Save 6. Now you will see a couple of boxes that you do not normally see. These boxes are letting you know that all of the pages created from this template are getting updated as well. 7. Click OK on both of these boxes.
14/15
OBJECTIVE 6: ASSIGNING EDITABLE REGIONS
Using a template is a fast and easy way to change specific parts of a webpage without changing the common design or layout of the page. By assigning editable regions in a template you can decide what regions users will be able to manipulate and what areas of the website can not be changed. Any area that is not an “editable region” is considered “locked” when you create a new page using your template. 1. Place your cursor in a section of your table that you wish to be able to change on later pages. 2. Click Insert > Template Objects > Editable Regions
3. Type in an appropriate name for the region (example: Body) 4. Click OK
*note: a small icon (
) will appear to represent the editable region
After you have inserted all of the regions that will be editable, 5. Click File > Save As Template 6. Select the same template as objective 5 step 4
*note: a dialog box will appear saying ‘the file you selected already exists would you like to replace the existing file’
7. Click Yes
15/15