Dreamweaver CS6. Table of Contents. Setting up a site in Dreamweaver! 2. Templates! 3. Using a Template! 3. Save the template! 4. Views!

Transcription

1 Dreamweaver CS6 Table of Contents Setting up a site in Dreamweaver! 2 Templates! 3 Using a Template! 3 Save the template! 4 Views! 5 Properties! 5 Editable Regions! 6 Creating an Editable Region! 6 Modifying the Template Using CSS! 7 Using Templates! 8 Adding Images! 8 Adding Links! 8 Using Your Site in Western Online! 8 Zip your Files! 8 Importing into Western Online! 9 Extract the Zip File! 9 Add the Site to a Learning Module! 9! Center for Innovation in Teaching and Research! 1

2 Setting up a site in Dreamweaver Before you set up your site in Dreamweaver you need to do two things. (1) Create a folder on your computer where all your site files will be located. In this folder create two more folders. Name one styles and the other images. (2) Determine where your site will be hosted. Everyone at WIU has web space available to them on Westerns servers. To be sure that your web space is enabled, go to After you login, click the Web link and follow the instructions. Once your folder is created you are ready to open Dreamweaver and set up your site. Click Site in the main menu and choose New Site to get the Site Setup window. Click Site on the left. Should be selected by default. Enter in the following information: - Site Name (Can be anything you want) - Local Root Folder (Click the folder icon on the right and choose the folder you created on your computer earlier) Click Servers. Click the Plus (+) icon at the bottom to set up your remote server where the site will be hosted. Enter in the following information: - Server Name - Can be whatever you want - Connect Using - Choose SFTP if using your WIU server space - SFTP Address - sftp.wiu.edu - Username - Your ECOM ID (i.e. ced101)! Center for Innovation in Teaching and Research! 2

3 - Password - ECOM password (If you want Dreamweaver to remember your password click the Save checkbox) - Root Directory - http/ Click Test to test that the info is correct and you can connect If connection is successful click OK Click Save Templates Dreamweaver allows you to create a template from your designs or use one of their predefined templates to help you get started. Using a Template Click File in the main menu and choose New. Click on Blank Template. Under the Template Type section choose HTML template. In the next column choose the layout you would like to begin with. (There will be a thumbnail preview to the right with a short description underneath). You can leave the DocType at it s default setting. Choose Create New File for Layout CSS (Or choose Link to Existing File if you already have a CSS file to use. Use the Attach Style Sheet button to browse to and select the file) Click Create. Change the name of the css file to something like styles.css or stylesheet.css. Make sure you save to the local folder that you created at the beginning. Put the file in the folder called styles. Click Save. (NOTE: This saves your.css file but you still have not actually saved the template yet.)! Center for Innovation in Teaching and Research! 3

4 Save the template Click File in the main menu and choose Save As Template You will get the following window: Choose your remote site folder from the Site drop down menu. Type in a name for the template in the Save as text box. Click Save. Your template is saved to a new folder titled Templates.! Center for Innovation in Teaching and Research! 4

5 Views There are three ways to view your web page as you are working on it: Code - Shows only the HTML code. Split - Show a side-by-side view of both Code and Design. Design - Shows the actual website as it will look. I recommend working in split view so you can see what is going on in the code as you are working on your site. Properties The properties window (Window > Properties) appears at the bottom of the screen and will show you the properties of anything that you have selected. You can make changes to the item here.! Center for Innovation in Teaching and Research! 5

6 Editable Regions Editable regions are areas in a page (created by the template) that are editable by the user. Any area in the page that is not made into an editable region locks out any editing of any kind. This is useful when you have areas such as a header or footer that you want to remain the same and do not want to accidentally make changes to it when updating content. Creating an Editable Region First select the area you want to make editable. Click Insert in the main menu, hover over Template Objects and choose Editable Region. In the New Editable Region dialog window, give the region a name such as Main Content Area. Click OK. The area now shows up in a colored box with the name you gave it in a tab at the top. The following has an editable region named Main Content Area.! Center for Innovation in Teaching and Research! 6

7 Be sure to save the changes to your template by clicking File in the main menu and choosing Save or using Ctrl + S for Windows or Command + S for mac. Modifying the Template Using CSS To view the CSS Styles window go click Window in the main menu and choose CSS Styles. In the CSS Styles list you should see the stylesheet file that was created when you created your template. To modify the stylesheet: Click the + (plus sign or arrow) to the left of the stylesheet to expand the styles in the file. Click the style you want to edit to select it. Click the Edit Style icon (pencil) located at the bottom of the CSS Styles window. Use the options in the window that appears to modify the template.! Center for Innovation in Teaching and Research! 7

8 Using Templates Now let s use the template to begin building a website. Go ahead and close the template and css files if they are still open. To create your first page in the site: Click File in the menu and choose New. Click on Page from Template located on the very left of the New Document window. Make sure your site folder is selected in the Site section. The template you created earlier will appear in the Template for Site... section. Select it and click Create. Your new page appears on the screen. Notice that the areas NOT defined as editable regions do not allow you to click on them or edit them in any way. However, the area defined as an editable region is outlined with the name located at the top. You can enter and edit your content in this area. After you have entered your content, save the page by clicking File in the main menu and choosing Save. Save your first page as index.html. This lets the users browser know that this is the first page to go to when the URL is typed in. For example, when you type in the first page you see has the file name index.html. Make sure you are saving it to your site folder that you created at the beginning. Adding Images A quick note about images: All your images should be in a folder in the same directory as your site files. Name the folder images. To add an image to your page: Click in the page where you want the image to appear. Click Insert in the main menu and choose Image. Navigate to your images folder for your site and choose the image you want to insert. Click Choose. Adding Links Type the text you want to make a link. Click and drag to highlight the text. In the Properties window, click and hold the Point to File icon. Drag your mouse to the Files window and hover over the file you want the text to link to and let go of the mouse Using Your Site in Western Online Once you have completed your web pages you can import them for use in Western Online. Before you can import your site files you must compress or zip your files. Zip your Files To Compress your files on a PC:! Center for Innovation in Teaching and Research! 8

9 Right click your site folder that you created. Go to Send To > Compressed (zipped) folder. To Compress your files on a Mac: Right click (Control Click) your site folder that you created. Choose Compress. Importing into Western Online Click Edit Course in the main menu. Click Manage Files under the Site Resources section. Click the Upload link. Click Upload. Navigate to and choose the.zip file you created. Click Save. Extract the Zip File Click Edit Course in the main menu. Click Manage Files. Hover over the.zip and click on the arrow that appears to the right and choose Extract. Add the Site to a Learning Module Click Resources in the nav bar and choose Content. Click to select the module you want to add the site to under the Table of Contents on the left. Click New and choose Add from Manage Files. Choose your sites index.html file. Click Add.! Center for Innovation in Teaching and Research! 9

10 Resources Use your mobile device to scan the following QR codes for some extra resources. Dreamweaver CS6 Help and Tutorials Creating a Page Layout with Adobe Dreamweaver CS6! Center for Innovation in Teaching and Research! 10