Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 3: Link - Images

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