! " # $%& Html.htm Note: Files under html.htm are created in the previous lab exercises. (Just link it up)

Transcription

1 ! " # $%& # &'()*+ At the end of this lab exercise, students should be able to: Invoke the main components in Macromedia Dreamweaver MX 2004 Edit and format text using Macromedia Dreamweaver MX 2004 Create relative and absolute hyperlinks Organise a web site effectively Important All lab exercises will be assessed/marked during Project 1 Assessment, last lesson/session. Please backup your lab work to your own zip disks / floppy disks. Personalization of your web pages is essential. (change Richard to your name) No mark will be awarded if you did not use your name for Project 1 Assessment. In this lab you will use Macromedia Dreamweaver MX 2004 to build the following basic Web site structure. (Note: This will form the main structure for Project 1) Index.htm Html.htm Note: Files under html.htm are created in the previous lab exercises. (Just link it up) Dream.htm Mmele.htm 1

2 Exercise 1 Introduction to Dreamweaver MX 2004 features Lecturers Corner Lecturers are to explain the basic features/windows of Dreamweaver (under Windows file menu). The Dreamweaver MX 2004 Interface 9. Menu Bar 3. Insert ToolBar 5. Tag Selector 4. Document Toolbar 1. Document Window 6. Window Size Pop-up Menu 8. Panels and Panel Groups 2. Property Inspector 7. File Size and Download Time 1. Document window displays the current document approximately as it will appear in Web browser. It is your main working area, where you create and edit files. 2

3 2. Property Inspector displays properties for selected objects. The inspector changes to reflect the object selected, such as image properties when an image is selected. 3. Insert ToolBar contains buttons for creating various types of objects, such as images, tables, and layers. Each tab contains different buttons to insert different topic-oriented objects. 4. Document Toolbar has buttons let you controls the way you view your document, preview your pages in browsers, and access reference information 5. Tag Selector allows you to select any tag in the document. 6. Window Size Pop-up Menu allows you to see how the layout works at different screen sizes an important part of Web design. 7. File Size and Download Time shows the size of the file (including images and other media) and estimated download time at different connection speeds. 8 Panels and Panel Groups (a panel group is a collection of panels grouped together under one title bar) can be hidden, expanded, and moved to suit your requirements. 3

4 9. Menu Bar gives you access to standard menu commands. Tips: To view or hide any window, palette, or inspector, select its name from the Window menu. To hide all palettes for an uncluttered view of your workspace, press F4. Press F4 again to bring it all back. Dreamweaver has an extensive online Help system, featuring tutorials as well as searchable Help files. In addition, most of the palettes feature Screen Tips that describe icon functions when you hold the cursor over them. The Dreamweaver Web site, available at is also a great reference. 4

5 Exercise 2: Creating your Homepage 1) Start by typing the following text: Add -by Richard at the end of the 3 subheadings. 2) Save your file in C:/Temp/yourname/index.htm 3) It is good practice to give each web page a title. To do that: Select <Modify / Page Properties > Give your webpage a sensible title (Richard s Homepage) in the Title field. Alternative method: You can type your page title (Richard s Homepage) in the Page Title text box 4) Once you have completed steps 2 and 3, you should take note of the changes in the title bar: Note that the asterisk (*) in the title bar indicates that the document has not been saved. 5

6 5) To format the headline with a Heading 1 tag <H1> and center it on the page: Highlight the words (Your name) s Personal Multimedia Web Site In the Property Inspector, choose the Heading 1 option from the Format pulldown menu. The headline automatically changes to a larger size and turns bold. Click on the Align Center icon in the Property Inspector. You may like to view the HTML Source to see the tags that have been applied. You can switch to the HTML Code View by clicking on the Show Code View button from the toolbar. You can use the Reference panel to find out information of HTML tags, JavaScript objects, and CSS styles and their attributes. Select the tag, object, or style in the Code or Design view that you want information about, click the Reference button in the toolbar. You can switch on or off the toolbar by using View - Toolbars - Document option. 6) To change fonts and type size: Select the sentence: (Your name) s Personal Multimedia Web Site once more, choose either Arial, Helvetia, Sans-Serif option from the pull down menu. Feel free to use different fonts and type sizes for the text in your web pages. 6

7 7) Individual Activity: Create 3 other pages and save them in C:/Temp/yourname/ html.htm dream.htm mmele.htm 7

8 Exercise 3. Setting up hyperlinks A link can move a viewer to another place within a page, from one page to another on the same web site or to another site entirely. Absolute vs. Relative Link Absolute paths are complete paths that are used to point to a location on the Internet outside the site where the current page is located. is an example of an absolute path. You have to use an absolute path when you link to a page on another Web site. Document-relative paths are relative to the directory containing the current document. For example, home.htm specifies a document in the current directory. Document-relative paths are often the simplest paths to use for links to files that will always be in the same directory as the current document. Because this type of link is dependent on the location of the file, you must save a new file on your hard drive before Dreamweaver will create a document-relative path. 1) To create a text link from one page to another in the same site (relative link): Open your index.htm page and highlight the words My First Shot at HTML by Richard. In the Property Inspector, click on the Folder icon to the right of link text area. In the Select File dialog box, browse the file to which you want to link (html.htm) In the Relative To menu at the bottom of the dialog box, click Document. Note that text links are indicated by underlining and a change in colour of the text. 8

9 2) Individual Activity: Create the rest of the hyperlinks as shown: dream.htm mmele.htm 3) Individual Activity: Open html.htm and create 4 hyperlinks to the 4 html files as shown below: my1st.htm my2nd.htm table1.htm table2.htm 3) Previewing in Browser.: Open index.htm and select <File / Preview in Browser> from the menu. Check that all your links work correctly. Lecturers Corner Lecturers are to advise The differences between viewing htm files using <File / Preview in Browser> and directly viewing the file from c:/temp/myname/. Why is it better to directly view the file from c:/temp/myname/ (and refreshing the browser)? 9

10 Exercise 4. Managing your web site effectively 1) Setting up a local site for your homepage Select <Site / Manage Sites / New / Site > from the menu. The Site Definition Dialog box will be opened, name your site ( your name Website) and specify local root folder (location of the files that you have created previously) Site Name Choose a Server Technology (No) 10

11 Choose How You Work Specify Local Root Folder / Directory Choose None for your connection type 11

12 The Summary of Site Definition 2) Activate your site map to view the layout of your web site. When you close the Site Definition dialog box, you return to the Dreamweaver interface, click on Done. A site is defined under the Files panel. Click the Expand/Collapse button to see the site files in full screen view. 12

13 You can see all your local files in the list view, or click the Site / Map and Files button to see the structure of your site. Site / Map and Files You can double click on any file to open the file. You can click the + or - to expand / collapse the view. example of local sitemap 13

14 Exercise 5. More Links and Page Formatting 1) Individual Activity: Create another page and save the file as links.htm. Take note of the following: o The alphabet images can be downloaded from the subject website o There are 2 horizontal rules in the page o There is a hyperlink to Temasek Polytechnic s website ( o There is an link to your personal address o There is an image link back to your home page (i.e. index.htm) o Feel free to use different fonts and colours for your text. o Change the content to suit yourself.," 2) Setting the background of your web page: Select <Modify/ Page Properties > from the menu. You may either: o Choose a background colour for your web page, or o Use an image to act as a background to your web page. There are 5 background images you may download from the subject website. 14

15 Exercise 6. Image Maps Image maps are images in Web pages that include hot regions (i.e., hotspots). Client-side image maps store the hyperlink information in the HTML document, not in a separate map file as do server-side image maps. 1) Creating an image map: Download the image of the Singapore map (singmap.jpg) from the subject website into your personal folder and extend your links.htm as shown below. 15

16 Select the image of the map and extend the Property Inspector. Type the name (RichardMap) for the map in the Map box. Select the rectangle tool and drag over the Singapore Zoological Gardens label on the map to create a hotspot. Type the URL for the hotspot ( in the Link box. Select the polygon tool and trace a triangle round the island of Sentosa. Type the URL for the hotspot ( in the Link box. Save your file and preview it in the browser. 16

17 Exercise 7. Links within the same document This Lab exercise (exercise 7) is optional. It will NOT be assessed/marked during Project 1 Assessment. For a long document, you might like to consider creating links within the document so that the user can navigate around the document easily. 1) Creating a link within the same document: Let s first create a fairly long document (e.g. namelist.htm, which can be downloaded from the subject website). Change the page title to Richard s Name List. Insert an anchor i.e. the place where you want the link to jump to. Let s scroll down the document and select the alphabet E Select <Insert/Named Anchor> from the menu and give the anchor a name (E). 17

18 Return to the top of the document to create a link. Select the letter E as a text link. In the Properties inspector, type the pound sign (#) followed by the name of the anchor in the Link text box (#E). Richard's Name List (A to E) Save your file and preview the file in the browser. In summary, to create a link within a document, you have to: Insert an anchor Create a link to the anchor 2) Extra Activity: It is possible to create an anchor in one document and create a link in another document. Explore how you may do this. 18