Dreamweaver 8. Creating Web Pages with a Template. Information Technology Services

Transcription

1 Dreamweaver 8 Creating Web Pages with a Template Information Technology Services

2 Copyright 2006 Information Technology Services Kennesaw State University This document may be downloaded, printed or copied for educational use without further permission of the Information Technology Services Department (ITS), provided the content is not modified and this statement is not removed. Any use not stated above requires the written consent of the ITS Department. The distribution of a copy of this document via the Internet or other electronic medium without the written permission of the ITS Department is expressly prohibited. 2

3 Dreamweaver 8 Creating a Web Pages with a Template Table of Contents Introduction... 5 Terms and Definitions... 6 Create a Local Folder... 7 Web Servers... 7 The Dreamweaver Environment... 8 Define a Site... 9 Design Your Site Creating a Template Creating a New Web Page from a Template Adding Hyperlinks (Links) to a Web Page or Template Adding Images to a Web Page or Template To insert an image: Publishing Your Web Site Local View vs. Remote View Viewing Your Website Reconnecting From another Location

4 4

5 Introduction The purpose of this booklet is to help students, faculty, and staff understand the process involved with creating and publishing web pages using Dreamweaver 8 and templates. Note to Students: Every student has access to web space on the students server if the student has an active NetID. The NetID is the same as your WebCTID. You must have an active NetID before you can publish a web page to the students server. If you don t have an active NetID, or have forgotten the password, you can go to for assistance. Note to Faculty/Staff: If you are faculty or staff, you will need an account on the ksuweb server. If you do not have an account on the ksuweb server, you can apply for an account at click on Services for Faculty/Staff, and then click on Account Request Form. Caution: In this workshop you will be creating a website in your account on either the students server or the ksuweb server. If you have an existing web site on this account, it will be overwritten. If you do not want to overwrite the existing site, once you have defined your site, you can create a subfolder in your account and put your website files there. Creating: When creating and editing a web page using Dreamweaver, you are editing files that are on the computer in front of you. This computer is referred to as the local computer. You should create a folder on this local computer and keep all of the files related to your web site (pages, images, etc.) in this local folder. In Dreamweaver, you look at the files in your local folder with the local view. Publishing: When you are finished editing the files that make up your website, you will need to send these files to your account on the web server. This computer is referred to as the remote computer. The action of sending these files is called publishing to the server, FTPing the files, or uploading the files to the server. Dreamweaver calls this action Put, putting files to the remote server. In Dreamweaver, you look at the files on the web server with the remote view. Viewing: After publishing (putting) your web page files to your account on the web server, you will want to check and see if they are working properly. To view your web site, open a web browser and enter your web address in the address bar. Your web address on the students server is Your web address on the Faculty/Staff server is 5

6 Terms and Definitions Web page a web page is a document file just like a text file. It can be edited with Notepad, WordPad, or any text editor, if need be. The main difference between a web page and a regular text file is that a web page is formatted with HTML tags. This HTML formatting is what you see when you switch your web page from the Design view to the Code view. Web site a web site is a collection of web pages that are usually linked together with hyperlinks. Hyperlink or Link a section of text or image that appears colored and/or underlined on a web page that, when clicked, will take you to another web page. HTML a text markup language consisting of tags. HTML tells the web browser how to display the content of your web page. Web server a computer or host for your web site. If you are a student at KSU and have activated your NetID you have web space on the students server If you are faculty/staff, you can apply for web space on the server. Web browser an application or program that is installed on your computer that allows you to view web pages on the Internet. Index page the main page of your web site. This is the first page that people will see when they visit your site. When you create the index page you must save it as index.html. Note: index.html must be spelled with all lower case letters. Put, Publish, or FTP- when used as verbs these two words mean the same thing: to send or upload your web page or pages to your account on the web server. Web address a URL (Uniform Resource Locator) is the text you type into the address bar of your web browser to access a web page. For example: Your web address on the students server is The yournetid in this address refers to your username for the student system, WebCT, etc. Do not put www in this address. If you are faculty/staff, your address will be The ~ means home account. Template Dreamweaver allows you to save a webpage as a template. You can add editable regions to the template. Then you create web pages from the template. When you edit the template and save the changes, Dreamweaver updates all of the pages that are created from the template. Anything that you add to the template appears on every web page that is created from that template. 6

7 Create a Local Folder It is a good practice to create a local folder before you get started with Dreamweaver. You don t have to do it now, but it is easier this way. A local folder is just a folder on the computer that you are using. To create a local folder: 1. Right-click on your Desktop and click on New >> Folder 2. Give your new folder a name; something like My Website Web Servers There are four items that you will need to know before you can publish web pages to a web server, even if it is your personal space on your home ISP account, such as Bellsouth, or Comcast. The four items that you need to know to publish to a web server: 1. Hostname: We will be using the students server or the ksuweb server, so this will be students.kennesaw.edu or ksuweb.kennesaw.edu. 2. Username: This will be your NetID for the students server, or your username on the ksuweb server. 3. Password: This will be the password for your NetID or the password for your ksuweb account 4. Web directory: In both of the students server and the ksuweb server, this will be html/. In some web servers this may be public_html, or just public. 7

8 The Dreamweaver Environment Dreamweaver is an application that helps you to create, edit, and manage web pages and web sites. Dreamweaver provides you with a WYSIWYG (what you see is what you get) editing environment. In other words, while editing your page, it looks like it will when viewed by a web browser. It also lets you easily switch over to see and edit the HTML code of your web page if you so desire. Dreamweaver also provides a publishing tool that helps you easily manage your files both locally and on your web server. Panels - When you open the Dreamweaver application, one of the things that you will notice are the panels. The panels are sections of Dreamweaver that give you different options of things that you can do to your web pages. The two panels that we will use the most are the Properties panel and the Files panel. The Properties panel will show you all of the properties that can be set for the item(s) that are selected. The Files panel will allow you to easily open your local files for editing, and then Put or Get your files to or from the server. To turn off the panels: Click on the Window menu or the View menu and then choose Hide Panels To turn on the panels: Click on the Window menu or the View menu and then choose Show Panels 8

9 Define a Site One of the first things that you will want to do in Dreamweaver is to define a Site. A Site in Dreamweaver is a collection of files and folders (web pages, images, etc) on your personal computer, and a link to your web space on the Internet. As you create and edit your web pages, you will be working on files on this local Site. When your pages are finished and ready to be viewed on the Internet, Dreamweaver gives you the ability to Put these files from your local Site onto your web space (the remote Site). Note: You should create a local folder for your web pages and have access to an account on a web server before you can define a Site. To define a Site: 1. Go to the Site menu and then Manage Sites. This opens the Manage Sites window which lists any sites that have already been defined. 2. Click on New >> Site. This will start the Site Definition wizard. 3. Click on the Basic tab at the top of the Site Definition window. 4. Type in a name for your Site. 5. Type in the HTTP Address. Students: Faculty/Staff 6. Click Next. 7. Select the No, I do not want to use server technology radio button, and then click Next. 9

10 8. Select the Edit local copies on my machine radio button. 9. In the section that asks Where on your computer do you want to store your files? click on the yellow folder icon, and choose the folder on your computer where your local files will be saved. 10. Click the Next button. 11. In the section that asks How do you connect to your remote server? drop-down window, choose FTP. 12. In the hostname or FTP address text box, enter: students.kennesaw.edu Faculty and staff should enter ksuweb.kennesaw.edu for the FTP address, and use their ksuweb username and ksuweb password in the FTP login area. 13. In the What folder on the server text box, enter html/. It is important that this be exactly as shown in the picture, or else it may not work properly. 14. In the FTP login text box, enter your NETID (faculty/staff enter username for ksuweb account). 15. In the FTP password text box, enter your NETID Password (faculty/staff enter the password for your ksuweb account). 16. If you are a student using a computer in one of the campus labs, be sure to uncheck the Save check box so that other students using the computer you are sitting at will not have access to your web space. If you are faculty/staff, and are using the computer in your office, you may want to leave this box checked. If you un-check this box, Dreamweaver will ask you for your password every time you try to access your site. 17. Check the box next to: Use Secure FTP (SFTP). This is necessary; at some point standard FTP traffic on port 21 will be disabled on all campus servers. SFTP uses port 22 and is encrypted. 18. You can test the connection by clicking on the Test Connection button. 19. If you get a message saying that Dreamweaver connected successfully, click the Next button. 20. Select the Do not enable check in and check out radio button click the Next button. 10

11 21. In the Summary Screen Make sure all of your information is correct, and then click the Done button. 22. When you return to the Manage Sites window, you should see your new site listed in the Manage Site window; click the Done button. To see your site and all of the files that it contains, open the Files panel from the right side of the main Dreamweaver screen. You should be able to see all of your Sites in the left drop-down menu. The right drop-down menu allows you to toggle the local and remote views, as well as offering a few more advanced views. Note: If you are working at a computer that does not have the local folder with your website files in it, you can create a local folder, define the site on this computer, and then Get the files from your account on the server. 11

12 Design Your Site It is always a good idea to take a little time to think about, and design your web site, before you start to create the first page. Design work will save time, especially if you anticipate a large site with many pages. Saving time is what Dreamweaver is all about; it is a productivity tool. A good design practice is to have each page of the site have some common elements such as images, colors, borders, and navigation tools. This design philosophy results in the existence of two types of elements, elements that are on every page of a web site (common elements), and elements that are on only one web page of a web site (unique elements). This design philosophy is exactly the reason for using a template. When designing a web site with a template, you put elements that will appear on every page of a web site on the template, and you put elements that appear only on one page of a web site on a web page created from the template. Any web pages created from a template will inherit common elements from the template. Another consideration is layout; in other words, where will the common elements be placed on the pages, and where will the unique elements be placed. The common elements should be on the template, and the unique elements should be on each individual page. In this case, we will use a table with three rows, and three columns, similar to the one below: Common Elements Common Elements Unique Elements Common Elements 12

13 Creating a Template A template is a web page that has been saved as a template. It starts as a normal web page, and when it is ready, you save it as a template. Once a template has been created, you can create new web pages based on that template. All of the pages created from a template will have everything that is on the template plus whatever you want on that particular page. Note: Remember, the elements that we want to be common to all web pages in our website should be on the template. Note: You can have many templates in your website. If you imagine a large website, for a school for example, each department or section of the school may need its own template. To create a template according to our plan: 1. Go to the File menu, and choose New 2. On the General tab, select Basic Page, then HTML, and click Create 3. Insert a table by clicking on Insert >> Table. 4. Build the table according to our plan. a) Use 3 rows by 3 columns. b) Set the table width to 100 percent. c) Set the Border thickness, Cell padding, and Cell spacing all to zero. d) Click on OK 13

14 5. Expand the table to fill the page with a header, footer, a right margin, and a left margin, according to our design. You can select the table by clicking in one of the cells of the table and then go to Modify >> Table >> Select Table. Once you select the table, the Properties panel changes to show the properties of the table. You may want to set the height of the table to about 700 pixels. 6. Insert text into the header of your page by clicking in the top center cell of your table. The properties panel should change to properties for text. Remember, this will appear at the top of every page created from this template. Center the text, and increase the font size. 7. Insert text as a footer at the bottom of the page. This footer will appear at the bottom of every page that is created from this template. Center the text. 14

15 8. Type in a Title for your template. This Title will be inherited by each page that is created from this template. 9. Insert text that will later become navigation links in the center left cell of the table. When you click in the center left cell, change the vertical alignment to top. We will eventually create about 3 web pages from this template. We will want a three links that will point to 3 different files (Home (index), Biography, and Resume). Center the text, and increase the font size. 10. Change the Background color of the cells around the border of the table to a light shade of a color by clicking in each cell of the table and using the Bg color palette on the properties panel. 15

16 11. Click on File >> Save as a Template; you can name it Main Template, if you want. If you know that you will have many templates, you should give it a name that will indicate for what the template is used. 12. Click in the center cell of the table, change the vertical alignment to Top, and insert an Editable Region in the cell by clicking on Insert >>Template Objects >> Editable Region. You can name your editable region whatever you want. I usually use Edit Here. 13. Save the page again. 14. Leave the template open; we will work on it more as we go. After we create web pages from this template, we will come back and create links from the template to each page. 16

17 Creating a New Web Page from a Template Once you have created a template, you can create one or more web pages from that template. For our example, we will create three web pages from the template that we created earlier. Note: Remember, any elements that are unique to one web page should be added to the web page that is created from the desired template. 1) Click File >> New 2) Select the Templates tab 3) Select the Site on which you are working. 4) Select the Template from which you wish to create a page. 5) Click the Create button. This should open a new blank HTML document. 17

18 6) In the Editable Region on the page you can enter text or insert images. Anything that you add to this page will only be on this one page. 7) Save the page by clicking on File >> Save. Note: The first web page that a visitor will see when they come to your site should be saved with the filename index.html (should be a lower case i). Note: The filename is different from the title. The title is just some text that appears in the status bar of a visitor s web browser. The filename is the name of the file on the computer. Repeat the previous steps for each web page that you wish to create (Biography page, and Resume page). You can leave all the pages and the template open and add content (text and images). 18

19 Adding Hyperlinks (Links) to a Web Page or Template A hyperlink is underlined text that when clicked will request that another web page be loaded and displayed. A hyperlink starts as simple text and is converted to a link using the properties panel. There are two basic types of hyperlinks: Internal External An internal hyperlink is a link that points to a web page that is in the same web site. An external hyperlink is a link that points to a page located at another web site. Following our original design, we want to make the text (Home, Biography, and Resume), point to the other pages in our web site. You should still have all four of the pages (template, index, biography, and resume) that we have built open. To create navigation links (internal) for our project: 1. Click on the tab for the template file 2. Select the text Home with your mouse cursor. 3. In the properties panel, click on the yellow folder You should see a view into your local site folder. 4. Select the index.html file. 5. Click Ok 6. Repeat the above steps for the Biography and Resume links. To create an external hyperlink link: 1. Enter some text to the navigation area of the template such as My Favorite News Site 19

20 2. Select the text 3. Enter the full web address into the link box on the properties panel. 4. Save the changes to the template by clicking on File >> Save. Note: If you want the link to open the web page in a new browser window, you can choose _blank from the target box. Note: We are editing a template. When we save it, Dreamweaver will update all of the files that were created from this template with the changes. Now all of those files need to be saved. You can tell if a file needs to be saved by looking at the file tabs. If you see an asterisk after the filename, changes have been made to that file that has not been saved. 5. Save all of the other files by clicking on File >> Save All 20

21 Adding Images to a Web Page or Template To obtain an image, you can save one from the Internet, scan a photo with a scanner, or download an image file from a digital camera. Before you can add an image to a web page or template, you will need to have the image file on your local computer, preferably in your local web folder. To insert an image: 1. Copy the image file into your local folder. 2. Open the web page in which you wish to insert an image. 3. Click on the spot where you want to insert an image. The image will appear at your insertion point. 4. Click Insert >> Image The Select Image Source window should open and should be pointed to your local folder. 5. Select the image file and click OK. Note: When you click on an image that is on your web page, all of the properties for that image are displayed in the properties panel. You can change the size of the image here. You can also make the image into a link. When someone clicks on the image, they will be taken to another web site. 21

22 Publishing Your Web Site When your website is at a point that you want to put it on the Internet, it is time to publish your website. Since all of your files are already grouped together in your Site in the Files section of the toolbar to the right, all you have to do is: 1. Select the topmost folder of your Site. 2. Click the Put button on the Files panel. If you have any unsaved work, Dreamweaver will prompt you to save. Choose Yes to save your work. 3. If asked whether to Include dependent files? choose Yes. This insures that any files that you linked to are included when you send your files to your website. After these steps are completed, your site will have been uploaded to your web space. NOTE: You must define your Site as detailed on page 9 before you can publish. 22

23 Local View vs. Remote View Because of the way that web publishing is done, you end up with copies of your web page in two locations: on your local machine, and on the web server which hosts your page. In order to toggle between these two views, click on the drop-down box on the Files panel which at first reads Local view. The different options we have here are: Local view: Shows the copies of the files for your website which are located on your local machine. Remote view: Shows the copies of the files for your website which are stored on the Internet server that is providing access to your site to users. Testing server: An advanced feature which would show the files which are being stored on a test server (We don t use this feature, but you can set it up when you define the site). Map view: Shows a visual representation of the interaction between the files that make up your website. Many times, it is useful to see the files which are stored on both the local and the remote views, to compare and contrast. To toggle this view on or off, click the Expand/Collapse button on the Files panel. On the expanded view, you see the remote view on the left side of the screen, and the local view on the right side. 23

24 Note: If there is any difference between the two sites, it could be because you have made changes to your site but haven t used the Put command to upload them yet, or because you have worked on a different website before, and that is what you see on the remote site. Viewing Your Website Anyone anywhere can now view your web site if they have an Internet connection, a web browser, and know your web address. Your web address will be one of the following: For Students: For Faculty/Staff: Note: yournetid is your username for the student system, WebCT, etc. Note: Do not put any sensitive information on your web site; even if there are no links to it from a web page. 24

25 Reconnecting From another Location When you want to make changes to your website from another location which does not have your local folder, you first have to connect Dreamweaver to your existing site and download the files so you can edit them. Create a folder on the local computer, and follow the instructions starting on page 9 for Defining a Site to create a Site which is connected to your existing website. Then, on the Files pane click the Get File(s) button to make a copy of your web site on your local computer. Once you have done this, you are prepared to make any changes/additions to your web site. 25