We're going to see the rest of the lesson and the second part of the programme Dreamweaver basics right now.
History Panel:
The history panel shows recent changes that you’ve made to your document. This panel allows you to undo or redo commands you’ve completed. To activate the history panel, simply go to Windows -‐> History.
Dreamweaver CSS Classes:
Dreamweaver has a window to manage the different CSS styles. These CSS styles, as explained earlier, allow users to customize the appearance of the HTML website. When you create a new website, you have the option to attach the CSS style to the head of the HTML page, or to create a separate CSS page that is linked to the HTML page.
Often, it’s useful to create a new CSS style. If you decide to create another HTML page but you want to use a previously created CSS page, it’s as easy as clicking the link button under the ‘Attach CSS file’ query (as shown above), finding the CSS page, and accepting it. Also, if you change any aspects of the CSS page, it changes all of the previously linked HTML pages, making it easier to keep everything in unison.
On the right side of the screen, there should be a CSS Styles window. If not, go to Window -‐> CSS Styles.
Each of these properties has a slew of customizations that each user can apply to it.
To access these customizations, double-‐click on any of these properties.
There is quite a lot of different ways to customize these CSS style pages, and most of it you’ll pick up while making changes to your pages. Dreamweaver lets you change the following fields: Type, Background, Block, Box, Border, List, Positioning, and Extensions.
Type lets you change the font of the text. This includes the size, the weight, the color, and decorations.
Background lets you change the background of a field. You can change it into a color or into an image. There are fields that allow you to position it according to its x and y-‐axis alongwith how it repeats itself.
Block lets the users change the alignment of text and how it’s placed. The display section can be used to change unordered lists into creative navigations.
Box lets you change attributes of boxes. This includes its width and height, along with padding and margin. Border adds a border to a certain section. You can change the type of style, width, and color for all four sides (top, right, bottom, and left) of a box. List lets you change aspects of lists, such as the type of bullet used for unordered lists, images, and positions. Positioning lets you move the position of an attribute, such as its placement, position, visibility, along with its z-‐index and overflow. Extensions allow you to change aspects of page breaks and visual effects, such as different cursor types and filters.
Links (websites, documents, PDF files, emails):
To include a hyperlink, highlight the text that you want to link. Below in the Properties bar, enter in the desired URL under the ‘Link’ query and then hit enter.
Another method to create a hyperlink is to highlight a text and then right-‐click. In the contextual menu, select ‘Make Link’. In the window, at the bottom there is a section to include a URL. Simply enter in the URL. If you want to link to another document (i.e. an HTML page, a PDF, etc.), find the document and hit OK.
Emails are treated similarly. Highlight the text, enter in the email address in the ‘Link’ query below (Hisoka.Tech@gmail.com for example), then hit enter. It’s recommended to use an email obfuscator to avoid spambots from using available email addresses online.
Dreamweaver also allows you to use the HTML code to enter in a hyperlink. The code is as follows:
<a href="http://www.sjfc.edu">This is the text.</a>
The “http://www.sjfc.edu” is where the URL goes, where ‘This is the text.” is the text that appears for the link. So you’d be left with a field that looks like this:
This is the text.
Make sure to enter this code online in the code section of Dreamweaver. If you enter it in the Design view, then it will not work.
Anchors:
A technique that websites use is allowing users to be linked to a specific part of a website. This is often used with news stories, where a user is taken to a perhaps the third or fourth paragraph rather than at the beginning. To create this, you should use IDs. There are two steps, the first is labeling the area to link to with an ID and the second is linking to this ID.
1. To create an anchor, highlight a word where you want the anchor to be. In the Property Window, type in a name for the ID.
2. To link to the ID, select the text that will be the link in the Design view. Under the Link box in the Property window, type # and then the name of the ID created in step 1. If you chose the ID name to be “fisher”, type in #fisher in the Link box.
3. It’s also possible to link to an ID in a different HTML page. Rather than typing in “#fisher” into the Link box, put the filename ahead of it. So if the ID is on a page titled “about.html”, you would type in “about.html#fisher”.
Multiple Text Link Styles:
Dreamweaver lets you change the different styles of hyperlinks depending on what the user does. There are three main styles for links:
1. Link color – How the link is viewed regularly on a website without the cruiser hovering over it. (a:link)
2. Visited links – After a link is clicked, the link is changed to a different color. This lets the user know that they had already visited the hyperlink. (a:visited)
3. Rollover links – When the user rolls over the link with the mouse without clicking it, the link turns into a different color. When the mouse is rolled off the link, it reverts to its original link color. (a:hover)
You can define different rules for different areas of a page by placing the name of the ID or class before the “pseudo-‐tags” described above:
.content a:link
OR
.sidebar1 a:link
Inserting Images:
To insert an image, place the insertion marker in the Design view of Dreamweaver. Next, go to Insert -‐> Image. You can then either choose to insert an image saved locally on your computer (or hosted on the server), or you can insert the URL of the image if taken online. To use the image as a link, first click on the image. In the Properties box below, go to the ‘Link’ box. Then either insert the URL and press enter, or click on the folder button and find a document to link the image to.
Background Images:
To insert a background image, you’ll need to go through the CSS Styles panel. Double-‐click on an existing rule to open the properties for it. (Typically, the templates use ‘body’ as the background for the whole page, but depending on how the page is set up, it may be something different.)
In the CSS Rule Definition dialogue box, select Background. The second field has ‘Background-‐ image’, which lets you choose whichever image you’d like to be the background of that property. This can either be a URL or a saved image.
Image Maps:
Images can be divided into regions called hotspots, creating image maps. When someone clicks on the hotspot, an action happens, such as following a URL or opening a file. After an image is put onto your page, click on it. Below in the Properties field there will be a section titled ‘Map’. Fill in a name for the hotspot to keep track of the image map. After entering in a name, click on either the circle tool, the rectangle tool, or the polygon tool. You can use either of these tools to create a hotspot shaped to fit whatever you need.
After clicking on the tool, go to the image and click and drag to create the desired shape. If you have the polygon tool, you can click on the image wherever you want a point, and to close it simply click on the first point created.
You’ll be asked to fill out an Alternative title so people that are either unable to view the picture or whose computers can’t access it will be able to know what the image is of. After creating the hotspot, click on the hotspot. Below in the Properties field, insert the URL in the ‘Link’ box, or click on the folder and search for a document on the computer.
in the Insert panel, or by selecting Insert > Named Anchor from the menu bar.
(Don’t delete the icon!)
in the Insert panel or select Insert > E-mail Link from
