Web Design with Dreamweaver Lesson 4 Handout

Transcription

1 Web Design with Dreamweaver Lesson 4 Handout What we learned Create hyperlinks to external websites Links can be made to open in a new browser window links can be inserted onto webpages. When the user clicks, an window opens up so they can send an to an address you specify Using Named Anchors, links can point to other places within the same webpage The basic concept behind HTML code is a simple system of opening and closing format tags External links When you insert a link to an external website you need to make sure that you type the exact url including the http in the Link box in the Properties Palette. For example a link to Delia Smiths website would be: It makes sense to set the link to open in a new window which means your webpage is left open in the background and so the user may come back to it later (a way of directing traffic back to your site if they get distracted by the link off your website). Open links in a new window To make links open in a new browser window when the user clicks, create a link in the normal way, select it, and look in the Properties palette for the Target box. In the Target drop down menu choose _blank. With a link selected, I ve opened the Target box in the Properties palette and selected _blank. This will make the link open in a new browser window when the user clicks it. 1

2 You have four options in the Target box, though only _blank will be of any use to you unless you happen to be building a website using frames (unlikely): _blank. This option will make your link open in a new browser window _parent: Opens the linked page in the parent frameset of the frame the link appears in. _self. Opens the linked page in the same frame as the frame the link appeared in _top Opens the linked page in the current browser window, but replacing all frames NOTE: This course will not cover frames because they are an outdated technology. Very few websites use them any more mainly because they are incompatible with search engines. If your site uses frames, you will almost certainly be excluded from search engine results pages. links Another type of hyperlink is the Link. When clicked, the user s PC will open an window with an address automatically inserted in the To: field. Typically links are used to allow the user to contact the owner of the website, for feedback purposes perhaps. To create Link text, start either by selecting the text you want the user to click, or alternatively, start with no text selected. In the Insert menu, choose Link. The Link window will appear. In Text, insert the text you want the user to click (it will already be there if you selected the text earlier). In the box, enter an address. Click OK to create the link. If you want to add a subject to the , add?subject= and your title at the end of the address in the Properties Palette. 2

3 Named anchors A named anchor functions as a marker point in a page (useful if there is a lot of content on a particular page), which can be linked to from elsewhere in the page, for example, back to top. To insert an anchor, first position your cursor where you want the link to go to, then go to the Insert menu and choose Named Anchor. Give your anchors names which are meaningful to you remember that often you ll have several anchor points in the same page. Click ok and you ll see that a yellow, shield-shaped object appears in the layout view this represents your Named Anchor. To link to this Named anchor, highlight the text where you want to link from and create a normal link by going into the Insert menu and choosing Hyperlink. Instead of browsing to a file, pull down the Link box and choose #youranchor. Alternatively you can type #youranchor into the Link box in the Properties Palette. Now, when this link is clicked by the user, they will be taken to the point in the page where you placed your Named Anchor. If you want to link to an Anchor in a different page, create a link to the new page in the usual way, then add the Named Anchor to the end of the html file name in the link box in the Properties Palette. E.g. index.html#youranchor. Left: Inserting a Named anchor (Insert menu > Named Anchor) Right: Linking to your Named anchor (Insert Menu > Hyperlink) 3

4 Introduction to HTML HTML stands for HyperText Markup Language. It is a relatively simple language that provides information your browser can understand concerning how to format the content (text, images etc.) on your pages. HTML uses a system of opening and closing tags positioned around pieces of your content to format them. To view the HTML code in Dreamweaver, click on either the Code or the Split button at the top of your document window. HTML tags look like this: Opening tags <strong> <em> Closing tags </strong> </em> this tag indicates that you wish to begin a section of bold text this tag indicates that you wish to begin a section of italic text this tag indicates that you wish to end the section of bold text this tag indicates that you wish to end the section of italic text So, when we put it all together, correct HTML code would look like this: Correct HTML code <strong> this text will be displayed in bold</strong> <em> this text will be displayed in italic</em> So, simply position the opening and closing tags around your content to format it in some way. Some commonly used tags are as follows (there are many more than those you see here!): Commonly used HTML tags for formatting text <strong> </strong> These tags make any text positioned between them bold <em> </em> These tags make any text positioned between them italic <li> </li> Make any text positioned between them into a bullet list item <br /> Used on its own without a closing tag, this starts whatever follows on a new line <hr /> Used on its own without a closing tag, draws a horizontal line across the screen <p> </p> These tags make any text positioned between them into a paragraph (i.e., it puts a blank line above and below the text) 4

5 The tags that follow don t actually format the content on the page, but hold admin information for the browser to read and display your page. <html> </html <head> </head> Tells the browser to start and end the web page The admin area of the page, contains data about the page such as styles and meta data <title> </title> Used by search engines, for accessibility, text that is used when bookmarking pages, appears in browser title <body> </body> This is what appears in the browser to your user 5