Dreamweaver Tutorial #1

Dreamweaver Tutorial #1 My first web page In this tutorial you will learn: how to create a simple web page in Dreamweaver how to store your web page on a server to view your page online what the Internet and the Web are how does the Web work Note: The red boxes with To Do are small activities for you to complete before continuing with the tutorial. Part I: Creating your first page in Dreamweaver Open Dreamweaver Select HTML ; under Create New (See Figure 1). Figure 1. Creating a new Blank Web Page in Dreamweaver When the page opens, first check that icon is selected (this will ensure that you are in the design view edit mode). We will be working in this mode for most of the tutorials. There will be different regions on the page (see Figure 2): o top menu bar o a design view area (where you will create and view your web page) o a property menu at the bottom of the page (it displays the properties of any html feature on your page) o and a side bar menu an Insert Web Elements area that contains all the HTML tags Dreamweaver - Tutorial 1 1

CSS Style area that allows you to create and manipulate CSS style sheets for your web site File area that allows you to select where to save your web pages. Menu Insert Web Elements Area Design Area CSS Area Properties Menu File Area Figure 2. Dreamweaver Window 1. Add a title to your web page (see Figure 3). This title will not be visible on the page when viewed in the browser but will be used by search engine crawlers to identify and classify your web page. It will also be displayed as the title of the tab in your browser. Dreamweaver - Tutorial 1 2

Figure 3. Name your Web Page 2. Save the web page Before saving your web page, you should set up a web site. First set up a folder in your documents called firstwebpage. You can either select from the Menu Site / New or press the icon on the Menu bar (Figure 4a) Figure 4a. Step One to set up a New Site A dialog window will then pop-up (Figure 4b). Select the Advanced tab. Dreamweaver - Tutorial 1 3

Figure 4b. Select the Advanced Tab In the dialog box, make sure that you highlight Local Info under Category and enter the information in (Figure 4c): Site name firstwebpage Select the folder beside Local root folder and create a new folder in My Documents called firstwebpage (Figure 4d) and select the folder beside Default images folder and create a new folder in firstwebpage called images (Figure 4d) Enter in the HTTP address http://bluenose.cs.dal.ca/~username/firstwebpage Disable the Cache and press OK Dreamweaver - Tutorial 1 4

Figure 4c. Step Three to set up a new Site. Create a New Folder firstwebpage Create a New Folder image Figure 4d. Create a new Folder in My Documents and an image folder in firstwebpage Dreamweaver - Tutorial 1 5

Now save your web page in the folder firstwebpage. Select File / Save as on the Menu (Figure 4e) and call your page homepage_1.html Figure 4e. Save your Web Page 3. Add content to the body of the page Type in your name in the Design Area To make your name stand out, you can format it as a Heading that will make it larger. Highlight your name and use any of these methods: i. Using the Menu Bar Select Format / Paragraph Format / Heading 1 (see Figure 5) Dreamweaver - Tutorial 1 6

Figure 5. Format Heading 1 using the Menu ii. Using the Context Menu (right-click menu) Right click the mouse on the highlighted text and select Paragraph / Format / Heading 1 (see Figure 6) Figure 6. Format Heading 1 using the Context Menu Dreamweaver - Tutorial 1 7

iii. Using the Properties Area In the Properties Area at the bottom of the window, select Format and from the drop-down list select Heading 1 (see Figure 7) Figure 7. Format Heading 1 using the Properties Area iv. Control Keys Dreamweaver also recognizes control key combinations. In the menu view (see Figure 5) beside the Format element it gives the Control-key combinations. To make a Heading 1 using the Control keys, highlight the text and then press Control+1. Which ever method you use (you can try all of them) you will end up with the same result (see Figure 8). Dreamweaver - Tutorial 1 8

Suzi-Q as Heading 1 Figure 8. You can see that the initial name Suzi-Q is highlighted in the first window and after applying the Heading 1 format, it is much larger in the second window. Type in some text in the Design Area. For example (see Figure 9): I am a [first] year student at Dalhousie University. I am currently enrolled in the Faculty of Computer Science. Figure 9. Type text in the Design Area. Dreamweaver - Tutorial 1 9

4. Format your name and the text i) Format the text Again, you can use a variety of methods to change the format of the text, for this example we will use the Menu Bar Highlight all the text (name and text) and on the Menu select Format / Align / Center (see Figure 10) Figure 10. Align your name and text on the page ii) Change the background colour and font colour On the Properties Area at the bottom of the window, press the Page Properties button A dialog box will open (see Figure 11) and select the Appearance HTML tag Dreamweaver - Tutorial 1 10

Figure 11. Select the Appearance (HTML) category On the Background box select the small arrow. A dialog box will open with a number of colours. Select a colour (try a darker shade, for example purple or blue) for your web page (see Figure 12). Figure 12. Select a Background Colour for your Web Page If you chose a darker colour, like the purple in Figure 12 you should also change your font colour to a lighter colour for better contrast. On the Text box select the small arrow. Another dialog box will appear where you can Dreamweaver - Tutorial 1 11

Figure 13. Select a Font Colour Press Apply on the Page Properties dialog box and close the box Your page will now look similar to the Figure 14 Figure 14. The Web Page after the Background and Font Colour have Changed Dreamweaver - Tutorial 1 12

You can also at anytime preview your web page in a browser. Select the small globe beside the title of your web page. Select a browser from the drop-down list (see Figure 15) and the page will open in that browser. Notice that the name of the web page is the Title that you entered earlier. If you have multiple tabs open, this name will also appear in the tab. Figure 15. Preview your Web Page in a Browser 5. Add URLs (links) in the text Often on a web page, if the content mentions an institution or organization, a link is usually available. In this web page, we reference both Dalhousie University and the Faculty of Computer Science. You can add a link for both of these sites. We ll use two different ways to add links in your page. Highlight Dalhousie University in your Design Area In the Properties Area in Link type http://www.dal.ca and press the little button beside the link address (see Figure 16) Figure 16. Enter a URL address in Link in the Properties Area Dreamweaver - Tutorial 1 13

The text will change in the Design Area to reflect there is a link to Dalhousie University Highlight Faculty of Computer Science in your Design Area On the Menu select Insert / Hyperlink (see Figure 17) Figure 17. Enter a URL address in using the Menu In the dialog box, enter the address of the Computer Science http://www.cs.dal.ca in Link and hit OK. (see Figure 18) Preview your web page again and try the links Figure 18. Enter the URL of Computer Science in the Dialog Box Dreamweaver - Tutorial 1 14

To make hyperlinks you can also use the Insert Web Elements on the side menu. After highlighting the text, if you select Hyperlink (the top element) the same dialog box will appear as in Figure 18. To help explain URLs and links on the Web, below is a brief introduction to the Internet and the Web and how the Web Works: The Internet What is the Internet? The Internet is a huge collection of computers and other devices (e.g., printers) that are connected by a communication network. It is actually a network of networks; rather than connect every computer to each other, individual computers in a given organization are connected together in a local network and one node connects physically to the Internet (see Figure A). Local Networks: Group of Computers connected together Connectors linking Local Networks Figure A. The Internet a network of networks Brief History of the Internet In 1960 s Department of Defense (DoD) wanted to create a large scale computer network to communicate, and share programs and computer access anywhere for defense researchers. DoD s Advanced Research Projects Agency (ARPA) funded a network between a dozen ARPA funded laboratories and universities In 1969 the first network node was established at UCLA (University of California, Los Angeles) In the 1970 s other networks were starting up (e.g., BITNET (Because it s Time NETwork) at the City University of NY) but for different reasons, these other networks never became a dominate network In 1982 TCP/IP become the standard communication protocol on the Internet In 1986 the National Network NSFnet (funded by the National Science Fund in US) connected 5 universities and became available for other universities In the 1990 s - NSFnet replaced ARPAnet for non-military uses and US Vice President Al Gore popularized the term information superhighway that referred to the now Internet By 1992 over a million computers were connected to the network around the world In 1995 NSFnet returned to be a research network, and the rest became as what we know as the Internet Dreamweaver - Tutorial 1 15

The World Wide Web What is the Web? The Web is a collection of electronic documents that are linked together similar to a spider web, known as hypertext (Figure B). The links that connect the documents are bi-directional. The Web is a protocol that that uses the Internet as a communication structure. The main authority on the Web is W3 Consortium (www.w3.org). Web Pages (the nodes) Figure B. A representation of the Web as a set of nodes (web pages) and bi-directional links Source: https://www.cia.gov/library/center-for-the-study-of-intelligence/csi-publications/csistudies/studies/vol49no3/html_files/intelligence_networking_6.htm At minimum, the Web consists of computers, web browsers, and a connection to the Internet using an Internet Service Provider (ISP), such as Aliant or Eastlink (see Figure C). Figure C. How the Web Works (Source: http://mcwebs.com.au/uploads/pics/isp.png) Dreamweaver - Tutorial 1 16

History of the Web Tim Berners-Lee considered the inventor of the Web In the 1980 s Tim Berners-Lee while consulting for CERN (Conseil Européen pour la Recherche Nucléair) writes a notebook program that allows links to be made between arbitrary nodes (hypertext) with the aim to share information between researchers. Each node had a title, a type, and list of bi-directional typed links 1980 s collection of different protocols that run on top of TCP/IP developed (e.g., Telnet, FTP) 1990 s hypertext GUI (Graphical User Interface) browser and editor and makes up the World Wide Web (first web page as we know it) 1992 Mosiac Browser from University of Illinois is the first browser with graphical user interface (see Figure D) This is significant because previous browsers were text based used mainly by researchers but now anyone can easily access the Web Browser tools today have not changed much either from this first browser (see Figure E) Figure D. Mosiac Browser and its Tools List of Browser Tools -History list -Hotlist -Hotlist manager -Home page -Forward/back buttons -Find/search on page -Save page -Print page -Tool tips -Copy and paste -Annotations Dreamweaver - Tutorial 1 17

Figure E. Other Common Browsers with similar tools as Mosiac Conclusions The Internet and Web are not the same! Internet: collections of computers and other devices connected by equipment that allows them to communicate with each other Web: collection of software and protocols that have been installed on computers that are connected to the Internet A vast collection of documents often connected by links 6. Add a list of courses 1. You can add other structures to your page as well. For example, you could add a list of the current courses that you are enrolled in. You can create an unordered list that will display your text in a bulleted form or you can create an ordered list that will number your items. In your Design Area, enter your [five] courses that you are registered in for the fall term (e.g., CS1100, CS1106, etc) Highlight all the courses In the Properties Area select the unordered list button (see Figure 19) (note that if you want your list numbered, it is the button beside the bullet button). Dreamweaver - Tutorial 1 18

Unordered Bulleted List Ordered Numbered List Figure 19. Select the Unordered List button in the Properties Area Your courses will now be in a list format (see Figure 20) Right or Left Indent your list or text on the page Figure 20. Bulleted List You can move your list over using the indent buttons in the Properties Area as well (see Figure 20) You can also make a list using the Menu (see Figure 21) Dreamweaver - Tutorial 1 19

Figure 21. Create a List using the Menu Add a title for your list List of Current Courses above the list (e.g., Using the Menu, select Format / Paragraph Format / Heading 2). (see Figure 22) Figure 22. List of Current Courses indented and with a Title (Heading 2) 7. Change the list of courses to a table of courses Change the title List of Current Courses to Current Courses Delete the list off the page To insert a table there are two ways: On the Menu select Insert / Table On the Insert Web Element on the side of the Window select Table In both cases, a dialog box will appear (see Figure 23) that will allow you to build your table Dreamweaver - Tutorial 1 20

Figure 23. Build a Table Dialog Box For the courses, you will need a table with one column and 5 rows. You can also change the cell padding to make the cells larger; try 2, for example (see Figure 24) Figure 24. Change the default values of the Table Press OK and the table will appear on your page You can edit your table in the Properties Area at the bottom of the window (Figure 25) Align your table so that it is centered on the page Change the width of the table to 75 pixels Change the Cell Pad (which increases the size of the cell) and the Cell Space which changes the space between the cells Dreamweaver - Tutorial 1 21

Inserted Table Change the Properties of the Table Figure 25. Edit the Table using the Properties Area After you edit your table, enter your courses in the table To see the result of your table, click anywhere on the page off the table (see Figure 26) To edit the table further, click on the table and the table properties will be displayed in the Properties Area again Figure 26. Results of the Added Table To Do: Change the table of courses to a timetable that displays all your courses by day and time Change the colour of the background to a light colour and all the text on the page to a dark colour (your choice) Add links to any courses with a course web site Preview your changes in the browser Dreamweaver - Tutorial 1 22

Resources/Tutorials on Dreamweaver http://help.adobe.com/en_us/dreamweaver/10.0_using/index.html http://help.adobe.com/en_us/dreamweaver/10.0_using/wscbb6b82af5544594822510a94ae8d6 5-7da3a.html http://help.adobe.com/en_us/dreamweaver/10.0_using/wsc78c5058ca073340dcda9110b1f693 f21-7ceda.html http://www.adobe.com/devnet/dreamweaver/ http://www.cbtcafe.com/dreamweaver/index.htm Dreamweaver - Tutorial 1 23

Part II: Saving your Web Page to a Remote Server While you have been working on your web page you have been saving it to your computer (local). In order to view your page online, you need to save your page to a server. In Computer Science, all students have accounts with space on the bluenose server. As well, your files that are stored under the directory public_html are assessable online. To save your web page to the server (bluenose), you need to set up the ftp (file transfer protocol) client in Dreamweaver. You can manage the current local site (firstwebpage) to also use a remote server. There are three ways to start the set up for the remote server for the site: In the File area in the Side Menu, select the link Manage Sites, or the icon on the Menu bar or using the Menu Site / Manage Sites (Figure 27) Figure 27. Access Manage Sites on the File Section Highlight (Figure 28) firstwebpage and select Edit (see Figure 28) Figure 28. Edit the current Local Site to include a Remote Site Dreamweaver - Tutorial 1 24

Ensure that you select Remote Info in Category. Then in the dialog box, enter in the following information (see Figure 29): Access: FTP FTP Host: bluenose.cs.dal.ca Host directory: public_html/ Login: your username Password: your password Check the box beside Use Secure FTP (SFTP) and Maintain synchronization information Before pressing OK test your connection. If Dreamweaver successfully connects to the server you will get a success message. If it doesn t connect, check your inputted data, especially your username and password. Figure 29. Set up the Server for the remote Site Before you can save your work to the server you need to create a folder with the name firstwebpage on bluenose. Go to the File Area on the side Menu and select firstwebpage, Remote in the drop down boxes (Figure 30). Dreamweaver - Tutorial 1 25

Figure 30. Select firstwebpage in Remote View Follow the directions given in the Remote Site view and click on the icon in the toolbar of the File Area. This will bring up all your files stored on your public_html folder (Figure 31). Figure 31. Files on public_html To create a new folder (firstwebpage like on your computer), first click on the icon (to expand local and remote sites) on the toolbar. This will bring up a directory (Figure 32) which will show all the folders and files in your public_html folder. Select on the menu File / New Folder and call the new folder firstwebpage. Close this window (the small x in the upper left hand corner). Dreamweaver - Tutorial 1 26

Figure 32. Expanded Remote view of public_html folder To create a new folder (firstwebpage like on your computer), first click on the icon (to expand local and remote sites) on the toolbar. This will bring up a directory (Figure 32) which will show all the folders and files on your public_html folder. Select on the menu File / New Folder and call the new folder firstwebpage. Close this window (the small x in the upper left hand corner). Now that you have created a folder for you web page, you need to update your site using the site manager: go to the File area in the Side Menu, select the link Manage Sites or the icon on the Menu bar or using the Menu Site / Manage Sites (see Figure 27). In the Manage Site dialog (see Figure 28), select firstwebpage and press Edit. This will bring up the Site Definition for firstwebpage dialog. Ensure that you select Remote Info in Category and in the dialog box, update in the following information (Figure 33): Host Directory: public_html/firstwebpage/ Test your connection. Dreamweaver - Tutorial 1 27

Figure 33. Update the Host directory to include the new Folder firstwebpage Now that you have set up the connection to the server, you can save your work to the server. Go to the main menu and select File / Save to Remote Server (Figure 34). Dreamweaver - Tutorial 1 28

Figure 34. Save Web Sites to the Remote Server (bluenose) A dialog box will open with all the folders on bluenose s directory public_html (Figure 35). Select the folder firstwebpage. Press Save and your web page homepage_1.html will be saved to the folder on the server. Figure 35. Save the file to the server Dreamweaver - Tutorial 1 29

When you save your file, it may ask you if you want to save the dependent files as well, select Yes (when you get this message). This will also save any other information in your local folder to the remote one. (Figure 36). Figure 36. Select Yes. In your File area on the side menu, you can view your files on the server (or local if you wish) (Figure 37). Figure 37. The remote site and files are now available in your File Area To view your web page online go to the following address: www.cs.dal.ca/~username/firstwebpage/homepage_1.html You need to use enter your own Compute Science Username (don t forget the ~ sign before). You will need use exact spelling and case for the file folder and page name or else you would get an error (Figure 38). Dreamweaver - Tutorial 1 30

Figure 38. The Web Page viewed online The Client-Server Model The client-server model helps explain how information is transferred over the Internet, in particular using the Web (see Figure A). The Client: has software that allows users to make requests for information. The software sends the request over the Internet to get the appropriate information. The Server: has software that listens for client requests for information. The server software then finds the appropriate information resource from its stored files and returns it back to the asking client. There are different kinds of servers, such as web servers and mail servers. Dreamweaver - Tutorial 1 31

Files Client a Internet Server x Files Client b Figure A. Client-Server Model Server y For example, a browser is a software program on the client side. When a user makes a request in the browser (e.g., follow a link to a new web page or download a music file), the browser makes the request for the document (e.g., web page or music file) over the Internet. The server has software to listen for client requests. Once a request is made, the server retrieves the appropriate document from its file storage (usually a database) and returns the requested information to the client. The browser on the client side then displays the information to the user. Recommended Videos to Demonstrate the Internet and the Web http://www.youtube.com/watch?v=5j9wfposl0u&feature=related http://www.youtube.com/watch?v=wzombbzqxyc http://torch.cs.dal.ca/~abrodsky/other/warriors-700-vbr.mpg References www.w3.org http://www.w3.org/consortium/history http://www.w3.org/history.html http://www.useit.com/alertbox/history.html http://infomotions.com/musings/waves/clientservercomputing.html Deitel, H.M., Deitel, P.J., Neito, T.R. (2001). Internet and the World Wide Web: How to program, 2 nd Edition: Prentice-Hall Canada, Toronto. Dreamweaver - Tutorial 1 32