Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 3 present content: Understanding links, adding a link, adding an email link, linking within a web page, modifying a link, removing a link,...and another content.
Link-Images Understanding Links Absolute Links: – URL is an absolute link—it’s the complete, unique address for a single page Ex: http://www.mwu.edu/course/info.html#majors – use absolute links when you want to link to a page on another Web site Document-Relative Links: to create a link from one Web page to another within the same Web site Adding a Link Browsing for a File: – To create a link from one page to another on your own Web site, use the Property inspector’s “Browse for File” button Adding a Link – In the document window, select the text or image you want to use for the link – In the Property inspector, click the folder icon— that’s the “Browse for File” button, Or, choose Modify ➝ Make Link, or press Ctrl+L – Navigate to and select the file you want the link to open – Make sure the correct type of link—Document or Site Root—is selected from the “Relative to” menu Adding a Link Adding a Link Using the Point-to-File Tool: – You can also create links in Dreamweaver by dragging from the Property inspector to the Files panel Adding a Link Typing the URL or Path – In the document window, select the text or image you want to make into a link – In the Property inspector, type the URL or path to the file into the Link field Using the Hyperlink Object: – The Hyperlink object on the – Common category of the Insert panel lets you insert a link with many optional properties Adding a Link – Choose Insert ➝ Hyperlink or click the chain icon on the Insert bar Adding an Email Link – Under the Insert panel’s Common category, click the Email link icon, which looks like an envelope Linking Within a Web Page Creating a Named Anchor: – In the document window, click where you want to insert the named anchor – Choose Insert ➝ Named Anchor – Type the name of the anchor in the Insert Named Anchor dialog box->OK Controlling Images with CSS Border Widths: You can set the border separately around each side of a styled object – Choose one of the preset widths: thin, medium, thick, or auto Border Colors: You can color each of the four borders Controlling Images with CSS CSS also provides a method of adding an image to the background of any tag You control background images by setting the following properties in the CSS Rule Definition window’s Background category Controlling Images with CSS Background repeat – Repeat – Repeat-x – Repeat-y – use the repeat-x option: to add a graphical background to a banner – no-repeat displays the image only once Controlling Images with CSS Background attachment – By default, the background image on a page scrolls with the rest of the page, so that as you scroll down to read a long Web page, the image “scrolls” along with the text – But using CSS, you can lock the image in place by choosing “fixed” from the Attachment menu Editing Graphics The Built-In Editing Tools Editing Graphics Cropping an image: Crop tool can remove extraneous or distracting parts of an image – Select the graphic you wish to crop, – On the Property inspector->Crop tool Resample tool to resize the actual graphic file – Select an image on a page – On the Property inspector->Resample tool – Dreamweaver resizes the image file Editing Graphics Brightness and contrast: – If an image on a page is too light, dark, or washed out, you can use Dreamweaver’s Brightness/Contrast dialog box to fix it – Select the picture – Click Brightness/Contrast icon to open the Brightness/Contrast dialog box Editing Graphics – Move the Brightness slider to the right to lighten the image or to the left to darken the image – The Contrast control works in the same way: • right to increase contrast • left to decrease contrast Editing Graphics Sharpening images: – Sharpen tool on the Property inspector helps restore clarity and make such images “pop.” – It works like similar tools in graphic-editing programs: – It increases the contrast between an image’s pixels to create the illusion of sharper, more focused graphics Image Maps Image maps – You can add multiple links to a single image – Each link button on image called hotspots – The array hotspots responsible for this magic is called an image map – An image map contains one or more hotspots Image Maps Create an image map – Select the graphic you wish to make into an image map – In the Property inspector’s Map field, type a name for the map – Select one of the image map tools – Draw the hotspot – Add a link to the hotspot – If necessary, set the Target property – Set the hotspot’s Alt property Image Maps Create an image map – Select the graphic you wish to make into an image map – In the Property inspector’s Map field, type a name for the map – Select one of the image map tools – Draw the hotspot – Add a link to the hotspot – If necessary, set the Target property – Set the hotspot’s Alt property Rollover Images Rollover images are common interactive elements on the Web You create a rollover by preparing two different graphics – A “before” version, that appears when the Web page first loads – An “after” version the other appears when your visitor’s mouse moves over the first Rollover Images To insert a rollover image: – Choose Insert ->Image Objects-> Rollover Image – Image name Type a name for the graphic Rollover Images – Original image: choose the graphic you want to use as the “before” button – Rollover image: choose the “after” graphic image – Alternate text a text description for a rollover button – When clicked, go to URL: specify what happens when your visitor actually falls for the animated bait and clicks the rollover button ... a page on another Web site Document-Relative Links: to create a link from one Web page to another within the same Web site Adding a Link Browsing for a File: – To create a link from one page... menu Adding a Link Adding a Link Using the Point-to-File Tool: – You can also create links in Dreamweaver by dragging from the Property inspector to the Files panel Adding a Link Typing the... Styling Links Styling Links Dreamweaver CS4 provides a powerful and easy navigation building tool-> the Spry Menu Bar Each menu button can even support two levels of pop-up submenus Styling Links