SITE MANAGEMENT, CHECKING AND PUBLISHING IN DREAMWEAVER MX 2004

Transcription

1 SITE MANAGEMENT, CHECKING AND PUBLISHING IN DREAMWEAVER MX 2004 Introduction The exercises in this document assume you have completed at least exercises 1 and 4 from document 9.75 and exercises 1.1 and 2 from document 9.76, such that you have created a folder called yournamesite on your n: drive, defined a web site within Dreamweaver and created new templates. This document assumes that you are familiar with the use of a computer keyboard and mouse, have a working knowledge of Microsoft Windows and are familiar with using the World Wide Web. The files required to complete the exercises in these notes are available from Blackboard ( the college s online learning environment. You may enrol yourself onto the required course, IT Fitness, with the Birkbeck Self Enrolled courses link. To purchase the software, see the CHEST Macromedia Educational Purchase Plan details, by searching on dreamweaver at Contents 1 The Files Panel 4 2 The Site Map 7 3 Link Checking 11 4 Validation 14 5 Accessibility Checking 17 6 Publishing (Reference Only) 21 7 Check In and Check Out (Reference Only) 25 About this Document Words in bold Small capitals e.g. ALT Press KEY1 + KEY2 Press KEY1, KEY2 Bulleted lists Choose Insert - Picture Will need to be typed or chosen from a menu or window Indicate keys that you press Press both keys together Press each key consecutively Are guidelines on how to perform a task Show menu commands in this case, choose the option Picture from the Insert menu at the top of the screen

2 ii Birkbeck College Central Computing Services

3 Aims & Objectives The aim of this document is to investigate web site management, checking of pages and publishing using Dreamweaver MX. When you have completed these exercises you should be able to: Use the Site panel for managing your site Create a Site Map Check the links on your site Validate your site Check your site for accessibility Publish your site to a remote server and use the check in and check out facility Pre-requisites This document assumes that you are familiar with the use of a computer keyboard and mouse, and Microsoft Windows-based products. You should be familiar with the basic HTML structure of a web page. You will need to have created a Dreamweaver web site, such as that produced in the accompanying module "Creating Web Pages with Dreamweaver MX 2004". Copyright Netskills, University of Newcastle Copyright in the whole and every part of this Courseware whether in the form of a written manual, document, software program, service or otherwise belongs to the University of Newcastle upon Tyne ("the Owner") and may not be used, sold, licensed, transferred, copied or reproduced in whole or in part in any manner or form or in or on any media to any person other than in accordance with the terms of the Owner's Licence Agreement or otherwise without the prior written consent of the Owner. All use of this material is governed by the Owner's Standard Licence Agreement together with the appropriate Schedule. The following are available: A Standard Licence Schedule to cover all use including all for-profit use by any type of organisation and all use by non-educational establishments An Educational Licence Schedule for not-for-profit internal use only by a recognised educational establishment The Netskills logo and this copyright notice must be included in any copy or adaptation. Netskills is a trademark of Netskills, University of Newcastle Contact Information Central Computing Services, Birkbeck, Malet Street WC1E 7HX ITS-helpdesk@bbk.ac.uk Phone: UK Birkbeck Central Computing Services 3

4 1. The Files Panel Objectives To manage the files in your web site. Method You will explore the management features of the Files panel. Comments The Files panel has similar functionality to Windows Explorer. Because it operates within Dreamweaver, it has the added benefit of updating the cache so that file movement is tracked and linked files are updated. 1.1 Download files In your web browser go to the following address: Login to Blackboard using your ITS username and password If you are not already enrolled on the IT fitness module, follow the link to Birkbeck self-enrolled courses (below your list of modules) and follow the links to sign up to the course Within IT fitness, follow the link to Materials for workshops Click on Dreamweaver Download the four files listed by right-clicking each link in turn and from the menu that appears selecting Save Target As (or Save Link As) Save each file to the folder you just created on your N: drive diagonalley.htm unimaster.htm (you will already have this file if you have completed doc. 9.76) 1.2 From the Files panel group, locate the Files panel: Local View 4

5 Note Figure 1-1 The Site panel Ensure that the Files panel is open at Local View When open at Local View, the Files panel displays a list of all the files in your local site. 1.3 In the File panel, right click the root folder and from the menu that appears select New Folder: Figure 1-2 Creating a new folder A new folder will be added at the bottom of the File panel. Name your folder Images Click the Refresh button on the File panel toolbar and the folder will move to the top of the list From the list of files, drag hat.gif into the Images folder You will be prompted to update files that use this image: Figure 1-3 Request to update files Click Update (you should notice an activity bar at the bottom of the Update Files window as your Site cache is updated) Now move all your images into the Images folder and update any links (more than one file can be selected using the <CTRL> key and blocks of files can be selected by holding the <SHIFT> key) Birkbeck Central Computing Services 5

6 1.4 In the Files panel, click on the Templates folder to open it Click on the template uni.dwt and delete it using the <DEL> key You will be prompted as follows: Figure 1-4 Confirmation to delete Click Yes to delete your template since you no longer need it Refresh Check that the listing of templates in the Assets panel has updated. Sometimes Dreamweaver does not immediately update. For such cases, all panels have a Refresh button. Click to Refresh 6

7 2. The Site Map Objectives To learn how to create a visual representation, a Site Map, of your site. Method You will nominate a home page for you site and then create a Map. Comments Inclusion of a Site Map in your site is good for accessibility. 2.1 Preview unimaster.htm in your browser and follow the link to quidditch.htm. You should find that this page does not exist. [This is intentional]. 2.2 Create a new HTML page (with no content at present) and save it as sitemap.htm 2.3 In the Files panel, select unimaster.htm (click just once) and right-click to open the context menu Select Set as Home Page: Note Figure 2-1 The context menu from the Site panel A site map has to start somewhere. By nominating a page as the home page, you are declaring the start position for the site map. 2.4 In the Files panel, use the drop-down menu to select the Map View: Map View Expand / Collapse Figure 2-2 Site panel in Map View Birkbeck Central Computing Services 7

8 Click the Expand/Collapse button to give more space to view your site: Figure 2-3 Expanded Site Map You can click on the + beside the file names to expand the map of your site: Note Figure 2-4 Expanding the map In the Site Map, external links from your pages are shown in blue and broken links in red. 2.5 Map and Files If your screen does not appear as that in figure 2-3, select Map and Files from the icon, as shown below Figure 2-5 Map and Files 2.6 In the Site Map, select unimaster.htm and notice the Point to File button appears. Figure 2-6 Selecting a page Drag the Point to File button to sitemap.htm, listed under Local Files in the Files panel. Figure 2-7 Linking files using the Site Map You have created a new link and should see it portrayed in the Site Map: 8

9 Figure 2-8 New Site Map The new link will also appear at the bottom of the page unimaster.htm: New link Figure 2-9 unimaster.htm Note that the link text in the page is the name of the file, which may not always be a good description of the link destination. 2.7 With the site map in expanded view, click on File in the main menu and select Save Site Map In the pop-up window and in the Save as Type: box, choose PNG file Name the file sitemap.png Note Click Save The two options for image file format are bitmap (.bmp) or PNG files (.png). BMP files are a native, non-compressed format, suitable for editing in an imageediting package, such as Paint Shop Pro or Photoshop. PNG files are an open source, compressed image file format, suitable for web delivery. The W3C recommend PNG as a replacement to the GIF format, and Macromedia promote the use of PNG. 2.8 Click the Expand/Collapse button: to collapse the view and then return the Files panel to Local View Open sitemap.htm in the Document window Add the following text to your page: Here is the site map: On a new line, link to the image sitemap.png Save sitemap.htm Preview your site in the browser, starting from unimaster.htm and follow the link to the site map Birkbeck Central Computing Services 9

10 Access Incorporating a site map is a very good navigation aid for users. However, remember that this method shows the site map as an image. You would also need a text description of the site map, possibly in a separate file, linked from the londesc attribute or a D link. 10

11 3. Link Checking Objectives To check links in your web site. Method You will use the Link Checker panel. Comments Dreamweaver checks broken links, lists external links and checks for any orphaned files (files with no incoming links). 3.1 Open unimaster.htm in the Document window From the main menu, select File Check Page Check Links A report is produced and this is displayed in the Link Checker panel in the Results panel group. Note that the Results panel group only appears after a report is requested. 3.2 Link Checker Panel From the Results panel group, locate the Link Checker panel: Broken Links Figure The Link Checker panel showing Broken Links Note Link checking produces three reports: Broken Links, External links and Orphaned Files. By default, the Link Checker panel opens at the Broken Links report. The Broken Links report shows that the page unimaster.htm has a broken link to quidditch.htm, because there is no such page. In the Link Checker panel, click on the Broken Link quidditch.htm You should notice a browse button appear to the right of the file: Browse button Figure Changing a Broken Link Birkbeck Central Computing Services 11

12 Note You need to click in the Broken Links column, not the Files column, as shown above. Click on the browse button Browse to the page diagonalley.htm and click OK. The link in unimaster.htm will be updated when you click away from the new link However, other files in your site are attempting to link to quidditch.htm and you will be prompted to update these as well: Figure Prompt window Click Yes. All files will now be updated 3.4 External Links Change the Link Checker panel to Show: the External Links report: External Links Figure The Link Checker panel showing External Links All external links are listed in the Link Checker panel. The page unimaster.htm has only one external link. Note You are not responsible for the content of external web sites. However, you are responsible for ensuring that all links from your web site to external sites are live and appropriate. Checking external links should be a routine part of your web site management, and a list of sites will help the task. Orphaned files Change the Link Checker panel to Show: the Orphaned Files report You will be prompted that this is not possible on a single page. Click OK 3.5 Check entire site Click the green arrow: and from the drop down menu, select Check Links for Entire Site: 12

13 Figure Using the Check Links button Examine the three reports for your site. Don t attempt any further changes. 3.6 Orphaned files Orphaned files are files to which no other files link. In your site, you will have some orphaned files because the files are not properly linked together. In developing a real web site, this function may reveal files which are no longer necessary for the site and should be archived, or files which have been mistakenly bypassed and require linking. Birkbeck Central Computing Services 13

14 4. Validation Objectives To validate the HTML in your pages. Method You will use the Validation panel. Comments Dreamweaver MX 2004 still validates against an internal XHTML Transitional DTD and only claims to "meet many of the XHTML requirements automatically". Some hand editing may be necessary. 4.1 With unimaster.htm open, select Edit Preferences In the Preferences window choose the Category Validator and for Validate Against, select XHTML 1.0 Transitional and untick any other boxes Click OK Figure Preferences DTD Validating in Dreamweaver The common way to validate a document is by way of the Document Type Definition or DTD. The DTD is the set of rules for the chosen language, currently XHTML version 1.0 strict. The DTD is housed at a URL and referred to in the document. The DTD reference is immediately before the <html> tag: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> When a document contains a DTD, a validator may be used to check whether the document adheres to the set of rules defined in the DTD. If it does then the document is correct or valid. Dreamweaver does not use the standard DTD to validate against. Instead it uses internal profiles of the various versions of HTML. This means that there may be some differences between Dreamweaver code and the actual DTD. Dreamweaver MX 2004 still validates against an internal version of the XHTML transitional DTD. It is possible under the Preferences settings (as described in Task 4.1) to select an option to validate against XHTML 1.0 Strict. Because this version of the DTD is not included in Dreamweaver MX 2004, in order to ensure that your pages conform to the standard DTD, use the W3C validator at: 14

15 Accessibility There are many sites live on the web containing badly written HTML and this is a major hindrance to accessibility. Validating your site and thereby ensuring that your HTML is correct is a major step towards accessibility. 4.2 Validation In the Results panel select the Validation tab. (This can also be accessed from the main menu by selecting File Check Page Validate Markup). Click the green arrow: and from the drop down menu, select Validate Entire Site: Validation Figure Validating. The validation results will appear in the panel. For many of your documents, you should see the following Description: No errors or warnings found Create a new basic page and in the Document window in Code View, add the following code, shown in bold, to your new page: <body> <img src="castle.gif"> </body> Save your page as testvalidate.htm. In the Validation panel, click the green arrow: and from the drop down menu, select Validate Current Document You may receive an error message indicating that your page is invalid. Design View/ Code View The tools and prompts that form the editing process when working in the Design View will generally ensure that you create valid XHTML. However, the freedom of working in the Code View makes it more possible to stray from valid XHTML. Check your code. Birkbeck Central Computing Services 15

16 Explore the use of the buttons below the green arrow: Figure Validation options XHTML strict Correct your code to make it valid if necessary. XHTML strict is better again for accessibility than XHTML transitional (which is better than earlier versions of HTML). Dreamweaver MX 2004 does not write XHTML strict automatically and if you wish to use this version of the language, you will have to rely on validation and hand correcting your code. 16

17 5. Accessibility Checking Objectives To automatically check some accessibility features of your web pages. Method You will use the Site Reports panel. Comments It is not possible entirely to automate accessibility testing. You need to know what makes a page accessible and design accordingly. Accessibility testing will only help. 5.1 In the Results panel select the Site Reports tab: Site Reports tab 5.2 Site Reports Figure Accessibility checking In the Site Reports panel, click the green arrow: The reports window will appear this may take a few seconds. In the Reports window, from the Report On drop down list select: Entire Current Local Site In the Select reports window, under HTML Reports, select all the options except Accessibility. Leave the other options unchanged: Click Run Figure Reports window Note that the options selected in the Reports window are very specific and you should not have very many responses. The Site Reports panel lists any problems: Birkbeck Central Computing Services 17

18 Figure Site Reports panel A number of pages in your site will only have the default page title: Untitled Document. 5.3 Fixing errors In the Site Reports panel, double click one of the pages which has the following Description: Document uses default title "Untitled Document" You will be redirected to the relevant code in the appropriate page, which will have automatically opened in the Document window. Enter a title for the page 5.4 Check a document s accessibility Display unimaster.htm in the Document window In the Site Reports panel, click the green arrow: In the Reports window, select to Report On: the Current Document and under HTML Reports, select Accessibility: Click Run Figure Reports window In the Site Reports panel, many more issues will be highlighted: Severity of problem Figure Testing the accessibility of unimaster.htm Note the? next to the file name indicates that there is a questionable accessibility issue. Different icons represent more severe problems. 18

19 A questionable issue would need considering but may not need any action. Note Testing pages for accessibility can never be entirely automated. Many of the issues highlighted are subjective. Automatic testing will however highlight potential problems. 5.5 More information In the Site Reports panel, select one of the accessibility issues and then click the More Info button on the left:. From the Code panel group, display the Reference panel: Figure More information in the Reference panel You should see more information about the selected accessibility issue. 5.6 Passed tests In the Site Reports panel, click the green arrow: In the Reports window, select to Report On: the Current Document and under HTML Reports, select Accessibility. Click the Report Settings button - the Accessibility window will open In the Accessibility window, use the + button to open the different categories and examine the different tests that are performed Select the check box: Show "PASSED" tests. Click OK In the Reports window click Run. Figure Accessibility window The Site Reports panel will now show all the tests that have been performed, indicating those passed and failed: Birkbeck Central Computing Services 19

20 Figure Accessibility report for unimaster.htm 20

21 6. Publishing (Reference Only) Objectives Method To demonstrate publishing your site to a remote server. No server access is provided as part of this course. This task is included for reference. Comments For Birkbeck staff, the web team will be able to inform you of your site s FTP details. Web pages should be checked for broken links, validated and checked for accessibility before publishing. 6.1 Define a site From the Files panel menu, select Manage Sites Click Edit Figure The Site Definition window will open. Ensure it is open on the Advanced tab and select Category: Remote Info: Advanced tab Figure Site Definition window Note that by default the Access is None. 6.2 Access options Click on the Access: drop down arrow to reveal the different options: Birkbeck Central Computing Services 21

22 Figure Access options 6.3 Local/Network drive If you have a networked drive and wish to publish to it then use the following instructions. (If you have a remote server account, move on to Task 6.4). In the Site Definition panel, Remote Info category, select Access: Local/Network. Figure Publishing to a Local/Network area Click on the browse button: beside the Remote Folder box Browse to your networked folder and click Select In the Site Definition window click OK In the Edit files window click Done 6.4 FTP File transfer protocol If you have a server account that you can access using FTP (File Transfer Protocol) then use the following instructions. In the Site Definition panel, Remote Info category, select Access: FTP: Figure Publishing via FTP Fill in the various fields in the Site Definition window 22

23 Click OK In the Edit files window click Done. Note Other options in the Remote Info: Access list are: RDS: File transfer mechanism for use on ColdFusion servers SourceSafe Database: A Microsoft technology for file transfer with databases. Only operates with the Windows operating system. WebDAV: A set of extensions to the HTTP protocol allowing collaborative editing and management of files on a remote server. More secure than FTP. Open source. 6.5 Publish site If you have connected to a remote site, then in the Site panel click the Expand/Collapse button:. Note that your Remote Site is now listed in the left pane and the Local Site in the right pane: Site panel toolbar Figure Remote Site and Local Site In the Local Site listing, select the root folder: Figure Select the root folder From the Site panel toolbar, click the Put File(s) button:. You will be prompted: Click OK in the prompt box Figure Prompt You have published your entire site and will see it listed in the Site panel under Remote Site: Birkbeck Central Computing Services 23

24 Figure Listing of the published site Note If you want to publish specific files then select them in the Local Files listing and click the Put File(s) button:. 24

25 7. Check In and Check Out (Reference Only) Objectives To learn how to Check In and Check Out files to prevent more than one person editing a file at the same time. Method You will use the Site Definition window and Files panel. This task assumes that you have already connected to a remote server as demonstrated in Task 6. Comments Checking files in and out is only important if you work in a networked environment, where more than one person may be editing the same files. 7.1 Switch on check in/out From the Files panel menu, select Manage Sites Figure Click Edit In the Site Definition window open at Advanced, select Category: Remote Info and select Check In/Out. Further options will appear In the newly revealed boxes, type your name and address, as shown below: Figure Details for checking in and out Click OK In the Edit Sites window, click Done 7.2 Check out a file Click the Expand/Collapse button on the File panel toolbar From the Files panel Remote Site listing, select the file diagonalley.htm: Figure Remote Site Panel Birkbeck Central Computing Services 25

26 From the Site panel toolbar, click the Check Out File(s) button. You will be prompted to download dependent files: Figure Prompt to include dependent files Click Yes The file diagonalley.htm will have been downloaded to your local site and a green tick will indicate that you have checked it out, preventing anyone else from editing it. A red tick will indicate that it is checked out be someone else. The contact name will also be indicated and this will link to the address of whoever has the file checked out: Figure Check Out 7.3 After making any edits locally, the checked out file will be ready to publish and check in. In the Local Files listing, select diagonalley.htm and from the toolbar, click the Check In File(s) button. You will again be prompted for dependent files Click Yes The Remote Files listing will list diagonalley.htm like the other files; the Local Files listing will show diagonally.htm with a locked icon to indicate that the file is read only: Figure Check In Document 9.77 Version 3 May