Insert Panel

Now locate the Insert panel . Make sure that you’re in the HTML tab in the upper left. Refer to Figure 31-7.

The Insert panel is very much like the Tools panel in other Adobe programs in that houses many of the HTML tags and widgets that you require for designing your website. You can quickly insert short code for images or tables into your pages. Because there are so many, they have been organized in various tabs so that they are easier to locate. In this panel, you can create your own custom favorites to make the search easier. You can also find them in the main menu in the Insert area, should you prefer that workflow method instead. Many of the commonly used ones are at the top of the list. Refer to Figure 31-8.

You choose how to access your images for insertion.

Back at the Insert panel, with your cursor still blinking on the page within the tag, click the Image icon. Refer to Figure 31-9.

This automatically brings up the Select Image Source dialog box, where you can locate and insert files. Refer to Figure 31-10.

The following files can be inserted:

• JPEG (.jpg, jpeg)

• PNG (.png)

• GIF (static and animated) (.gif)

• SVG (scalable vector graphic) (.svg) can be created and edited within Dreamweaver (File ➤ New SVG document).

• PSD (Photoshop Document) (.psd) is used for extraction purposes. When you use this method of inserting, it automatically chooses the import option of JPEG, GIF, or PNG 8, 24, 32; any preset in the preset list; or any format from the format drop-down menu. Refer to Figure 31-11 and Figure 31-12.

This is a wonderful way to quickly import a graphic without reverting to Photoshop; however, in most cases, it is better to work in your native program. To get the ideal setting and decrease load time for your image assets, use your export settings, like Save For Web in Photoshop, Illustrator, Animate, or Media Encoder. Many of these settings are referenced in Chapters 4, 12, 22, and 28.

Once you click OK to a PSD file, you can locate the images folder and save in that location. Refer to Figure 31-13.

This image is added as a Sync image. If changes are made, Dreamweaver detects them.

Once you have selected an image from your image folder, click OK to insert it onto the page. Refer to Figure 31-14.

If you review the file in Split view, you see that the image tag <img/> is added to the page. Refer to Figure 31-15.

If you don’t want to add any text, leave this attribute empty. However, do not delete or remove the alt attribute from your image tag or else you get a warning when you validate your page, as you see later. A good practice is to always have alt attributes for your images. Missing alts can affect your site’s rank and make it difficult for search engines to locate keywords that would bring more viewers. You can do the same with a PNG or JPEG.

Working with SVG Images

When you insert SVG files, you do not see a width or height attribute because scalable vector graphics are meant to size to whatever area they are placed into without losing quality. If you have used the setting of responsive within the SVG, then your image is able to scale up or down to fill an area on your page. You cannot simply insert an <svg> tag on a page and expect it to display.

Refer to Figure 31-16.

The object tag allows you to keep the interactivity of the SVG. You can apply CSS to adjust scaling. Adding width and height constrains how much the object can scale.

Properties Panel

For the moment, let’s focus on GIF, JPEG, and PNG image formats while working with the Properties panel.

You can alter or add settings to your image tag in the Properties panel. Refer to Figure 31-17.

The Properties panel shows a preview of the image and its file size. (SVG and bitmap do not show a preview image here).

• ID attribute: Useful for formatting with CSS and JavaScript, which you’ll look at in Chapter 34.

• src: Browse for a new source file to replace the old one using the Folder icon or point to it by dragging the target to a file located in the Folder panel. If you are not careful, you could point to the wrong file. I personally like to browse via folder to save time.

• Link: Adds a URL to the current file; it can be internal, external, or even an email.

• Class: Allows you to format the image further with CSS classes, as you look at in Chapter 32.

• Edit: Allows you to edit the image in the program of your choice or do some basic edits using one of six tools. Be aware that not all tools are available to all images. You are editing the actual file and not a copy of it, so any changes made are permanent to that file. It is better to make changes to a copy or go back to the original RAW image (PSD, AI, EPS), and then save a new copy in the same format. That way, if you want to revert, you have not destroyed the original image. Refer to Figure 31-18.

Some quick area tools include going back to the native program to work on the file. When you do this, make sure to keep your files in the correct folder; the editing program will show a warning if it can’t locate the original file because the link was altered.

If Dreamweaver does not know which program to edit the file in, it shows a Pencil icon. If you want to set a program that Dreamweaver automatically opens, click the Pencil icon; this shows an alert that you can click OK to and then enter Edit ➤ Preferences ➤ File Types and Editors. Refer to Figure 31-19 and Figure 31-20.

You can add extensions that are not listed in this area (using the plus icon) and set your editor for the file format by setting one in the list to Make Primary (editor) or adding a new editor using the plus symbol once done click Apply and then close. With GIFs or JPEGs, Photoshop is your primary editor. However, if you have an older version of Fireworks on your computer, a PNG file might show up instead. You can resolve this in Preferences by making Photoshop the primary editor. If there is no editor for an SVG file, you could add one.

You also have access to some Quick Edit options (rather than entering the original program). Refer to Figure 31-21.

Remember that Quick Edits alter your images permanently; make sure you have a backup of these images in another folder, should you need to revert to an original state.

Image Optimization

Here you can alter the image optimization settings to the current (.gif) image or change it to another format. Doing so may degrade the quality of the image. Refer to Figure 31-22.

Update From Original

When the image on the Dreamweaver page is out of sync with the original Photoshop file, Dreamweaver detects that the original file has been updated. The application displays one of the Smart Object icon’s arrows in red. When you select the web image in Design view and click the Update from Original button in the Property Inspector, the image updates automatically. The updated image reflects the changes that you made to the original Photoshop file. Note that if your image was not synced with Photoshop, then this option is not available. You need to update the file manually by going back to the original image in Photoshop and relinking the updated image to the source. Refer to Figure 31-23.

Crop

Crop edits images by reducing the area of the image. You can use crop or remove unwanted aspects surrounding the center of interest. This can make the image stand out better, but it alters the dimensions of the image permanently, which you may not want. Refer to Figure 31-24.

This draws a crop area around the image. In Design view, you can move the crop box around and then hit the Crop Mark icon in the Properties panel to confirm. If you realize you made a mistake, choose Edit ➤ Undo right way to undo your crop and restore and revert the image. Refer to Figure 31-25.

Resample

This setting adds or subtracts pixels from resized JPEG and GIF image files to match the appearance of the original image as closely as possible. Resampling an image reduces its file size and improves download performance, but not quality.

When you resize an image in Dreamweaver, you can resample it to accommodate its new dimensions. When a raster object is resampled, pixels are added to or removed from the image to make it larger or smaller. Resampling an image to a higher resolution typically causes a little loss of quality. Resampling to a lower resolution, however, always causes data loss and usually a drop in quality. When you select an image in Design view and move its handle to a smaller or larger size, it alters the width and height and makes the Resample icon available. Refer to Figure 31-26.

Clicking the Resample icon confirms the resample and sets the new setting. As with cropping, if you realize you made a mistake after you click OK, choose Edit ➤ Undo to restore and revert the image. Be aware that if you scale an image smaller, and then change your mind and make it larger again, the file is degraded, and you likely need to start a new copy of the original.

Brightness/Contrast

Modifies the contrast or brightness of pixels in an image. Brightness and contrast affect the highlights, shadows, and midtones of an image. You typically use the Brightness/Contrast option when correcting images that are too dark or too light. If you realize you made a mistake after you click OK, choose Edit ➤ Undo to restore and revert the image. Refer to Figure 31-27.

Sharpen

Adjusts the focus of an image by increasing the contrast of edges found within the image. When you scan an image or take a digital photo, the default action of most image capturing software is to soften the edges of the objects in the image. If softened too much, the image appears blurry. Ideally, the scanning prevents extremely minute details from becoming lost in the pixels from which digital images are composed.

To bring out the details in digital image files, it is often necessary to sharpen the image. The Sharpen option increases the edge contrast, making the image appear sharper. that too much sharpening can make your image appear overly pixilated which may not be what you want. For ideal images, always start your project with high-quality photos from the client.

If you realize you made a mistake after you click OK, choose Edit ➤ Undo to restore and revert the image. Refer to Figure 31-28.

Width and Height

This displays the current width and height of the image in pixels by default, but you can switch to percentage (%), which may be better for working with a mobile site via the drop-down menus. You can type in a new width and height which be scaled proportionately if the lock symbol remains in the lock state. If you do not click the check box to confirm this change, it does not affect the original image. You can revert by clicking the Reset To Original Size icon to restore the original width and height settings. Refer to Figure 31-29.

In Part 6, you see how to use CSS to scale an image proportionally to various sizes and make it responsive for different devices in the browser without loss of quality.

Alternate Text

You can add alt image text and a title with this option. Alt (alternate text) adds context if your images for screen readers or if the images link is broken and does not appear. The title attribute acts in the same way. Some browsers prefer the title attribute over the alt attribute, so it is best practice add both. However, unlike the alt tag, the title may not appear if the image does not display. Figure 31-30.

The last area in the Properties panel deals with image maps, which you look at in a moment. This is like a URL link that is added over the top of an area in a photograph. This area in the Properties panel only displays when in Design view and the image that you plan to add the map to is selected. You looked at image maps briefly in Chapter 13. Refer to Figure 31-31.

Before you look at that tag in detail, you need to continue exploring other tags that you can add your images to.

A Bit of HTML History

In the 1990s, when websites were first built, designers used <table> tags to create areas where content and images would go. You could put tables within tables or the other table’s cells, which made the design more complex. At that time, most designers were creating sites for desktop computers only. You would use spacers or transparent GIF images to create space within the table. Most computer monitors were roughly the same size or ratio, and so flexibility was not crucial. When designers thought of mobile, it was a cellphone that was often large and bulky and had a small low-resolution screen that showed who was calling or paging you, and perhaps with some very basic text and ultralow resolution graphics. At that point, most work was done on desktop computers.

The problem with tables is they aren’t flexible when it comes to varying monitor widths. To keep the basic content and structure looking the same, you have to create different webpages to conform to each monitor size.

Fast-forward to the 2000s, where the first modern tablets and smartphones arrived on the market. Instead or carrying a large laptop around, users wanted to see websites and information on smaller devices and be able to go to meetings and show their company’s products on these devices. Tables increasingly became a problem, because websites were too small and barley readable, and their layouts did not format or sit like they should on the page. A solution had to be found. More flexible tags had to be created.

There are now various layout tags that you can add your images to and place the image <img/> tag within.

<div> Tags

The first element or tag that was used to replace the <table> for web layout was known as the <div> tag . div stand for division, an element that divides a section of a website. Like tables, you can place divs inside of divs to create more sections. And you can look that them in Live view. Refer to Figure 31-33.

It is more flexible than tables. Divs can be more accurately scaled, moved and removed using CSS and its responsive media queries which you look at when get to Bootstrap in Chapter 35. Divs are used with CSS and are called upon using the tag’s name, a unique ID, or classes to layout a webpage, which you’ll look at in Chapter 32. They perform certain tasks when incorporated with JavaScript. Using the Insert panel, you can insert a <div> tag on an HTML page and then insert an image within. Refer to Figure 31-34.

When you insert a div, you are asked to choose a point to insert the it in the dialog box. The default is an insertion point, which is where you place the cursor; however, you can choose either after or before the start of the tag. Then you can give it a class, ID, or both. Refer to Figure 31-35.

Then click OK to confirm the <div> tag in the code. A whole website could be built just using <div> tags. However, the most common <div> tag that goes around a website structure is given the unique ID of wrapper. Refer to Figure 31-36.

Dreamweaver places filler text between the <div> tags (dotted lines in Design view) that you can highlight and delete, leaving just the cursor blinking. And, you can add an image from the Insert panel. Refer to Figure 31-37.

In the Properties panel, the tag appears with an icon, the div type and ID, and the option to add a class or create a class for the <div> tag (you look at this in Chapter 32). Refer to Figure 31-38.

You can locate the image in the images folder and click OK to insert. Refer to Figure 31-39.

Sematic Elements

When HTML4 began, most designers inserted one div inside another to create a structure for the website. And in combination with CSS, giving each div a unique ID or class, a site that was for desktop and mobile devices could be built. This structure and the viewport continued into HTML5. Refer to Figure 31-40.

If there are a lot of divs on a page, it becomes confusing as to where one starts or stops, especially if they are nested many times, because the closing tags are all the same.

Also, web designers are not always consistent with the names they give their IDs in the structure; some might be id=foot or id=footer, or id=base, and so on. This makes it difficult for people with visual impairments to navigate a site with their screen readers. The web is for everyone, and this is what accessibility is all about. There has to be some sort of consistency. So, HTML5 tags called semantic elements were created.

Semantic elements are scaled and create structure for a site. Unlike divs, their order has meaning to a screen reader. The <div> or <span> is non-semantic and has no meaning to the average viewer. But words like <table>, <form>, or <article> do have meaning to a user and are therefore semantic. Also, their placement is very important when a site is validated, so you cannot use them in any combination you want. You can find these elements in the Insert panel if you scroll within the HTML tab. Refer to Figure 31-41.

Any of these can have an <img> tag placed inside of it. I briefly describe them next.

Figure and Figure Caption

The <figure> and <figcaption> tags are inserted at the same time. An image <img> can be placed within the figure. The nested figcaption is used to describe the figure. It is like the descriptive figure captions that are found below each of the images in this book.

<figure><img src="images/dome_1.gif" width="195" height="138" alt="A glass dome paperweight"/>

<figcaption>Figure 1-2. A glass dome paperweight.</figcaption></figure>

The images could be illustrations, diagrams, photos, or code listings. The figure and its figcaption could be found nested within a <div> tag or some other semantic element. Refer to Figure 31-42.

The <figcaption> can only be inside of a figure. Its text does not have to have any heading or paragraph tag within it, but like heading text, it is styled using CSS, which you look at later. The Properties panel does allow you to add an ID, CSS, and several types of formatting to the tags as required. Refer to Figure 31-43.

Header

The <header> tag is used for introductory content, or it contains navigation links. It could also be used as the banner area containing company logo on a webpage. It can also replace the <hgroup> tag or be a header of a <section> or <article> tag or used for authorship information. You can have more than one <header> tag within a section. <header> is not the same as the <head> tag and is found outside the body while the <header> is found inside the <body>, usually within the wrapper. You can give it an ID or class, but it’s not a requirement. Refer to Figure 31-44.

<header id="banner">Content for  id "banner" Goes Here</header>

Then you can insert your banner image <img> for the webpage. When selected, the Properties panel allows you to add CSS formatting. Refer to Figure 31-45.

Note

A <header> cannot be placed within <footer>, <address>, or another <header> tag.

Navigation

The <nav> tag is useful for an area with navigation hyperlinks modified by CSS or a few images (rollovers). Not all links in a document should be used inside of a <nav> element. A <nav> should only be used for major blocks of navigation links.

This tag is very useful in browsers and in screen readers for disabled users. Browsers can use this element to determine whether to omit the initial rendering of the content.

You can give it an ID or class, but it’s not a requirement. Refer to Figure 31-46.

<nav id="navigation">Content for  id "navigation" Goes Here</nav>

You could insert your navigation images <img> using CSS or rollover links for the webpage to other webpages.

When selected, the Properties panel allows you to add CSS formatting. Refer to Figure 31-47.

Main

The <main> element refers to the main content of the document or the main story. The content inside of the <main> tag should be unique to the document and should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. It should also be noted that there must not be more than one <main> element in a HTML document. The <main> element must NOT be a descendant or child of an <article>, <aside>, <footer>, <header>, or <nav> element, though it could be the container (parent) for these elements.

Figure 31-48 shows how this might look.

You can give it an ID or class, but it’s not a requirement. Refer to Figure 31-49.

<main id="main-story">

   <div class="section1">

       <figure><img src="images/dome_1.gif" width="195" height="138" alt="A glass dome paperweight"/>

         <figcaption>Figure 1-2. A glass dome paperweight.</figcaption>

       </figure>

    </div>

    <div class="section2">Some text...

    </div>

</main>

Then you can insert your images, text, or other semantic elements into the <main> tag.

The Properties panel allows you to add CSS formatting. Refer to Figure 31-50.

Aside

The <aside> tag defines content aside from the page content. The aside content should be related to the surrounding content. It is on its own or it could be placed as a sidebar in an <article>. You can give it an ID or class, but it’s not a requirement. Refer to Figure 31-51.

<aside id="related-info">Content for  id "related-info" Goes Here</aside>

You can insert your images, text, or other semantic elements into the <aside> tag. When selected, the Properties panel allows you to add CSS formatting. Refer to Figure 31-52.

Article

The <article> element defines an article. The <article> tag specifies independent, self-contained content. It should make sense on its own and it should be possible to distribute it independently from the rest of the site. The following are some of uses of the <article> element.

• Forum posts

• Blog posts

• News stories

• Comments

More than one article element can appear within the <main> tag. It is often confused with the <section> tag; in some cases they are interchangeable, depending on how your website is constructed. You can give it an ID or class, but it’s not a requirement. Refer to Figure 31-53.

You can insert your images and text into the <article> tag.

<article id="article-a">Content for  id "article-a" Goes Here</article>

When selected, the Properties panel allows you to add CSS formatting. Refer to Figure 31-54.

Section

The <section> tag defines a section of a document. It can be chapters, headers, footers, or any other section of a document. More than one section element can appear within the <main> tag. It is often confused with the <article> tag; in some cases, they are interchangeable, depending on how your website is constructed. Articles are inserted inside sections. You can give it an ID or class, but it’s not a requirement. Refer to Figure 31-55.

<section id="section-b">Content for  id "section-b" Goes Here</section>

You can insert your images and text into the <section> tag.

The Properties panel allows you to add CSS formatting. Refer to Figure 31-56.

Footer

The <footer> element defines the footer of a document or section. A section can have more than one footer. A <footer> element should contain information about its containing element or tag.

A <footer> element typically contains the following:

• authorship information

• copyright information

• contact information (inside an <address> tag)

• sitemap

• back to top links

• related documents

When it appears at the bottom of a webpage, it can contain navigational images and links. Footers and headers are often used together. You can give it an ID or class, but it’s not a requirement. Refer to Figure 31-57.

<footer id="contact-copyright">Content for  id "contact-copyright" Goes Here</footer>

You can insert your images <img> and text into the <footer> tag.

When selected, the Properties panel allows you to add CSS formatting. Refer to Figure 31-58.

While semantic elements are good to use, there may be times when your content does not fall into any other category, or you need to add navigation somewhere else. In these cases, there is nothing wrong with using a <div> tag; perhaps in time, more semantic elements will become available. In the meantime, it is important to practice using them to build your website to make it more accessible to all users. in the next chapter, you look at how these tags can be altered further using CSS.

For more information, on semantic elements make sure to check out www.w3schools.com/html/html5_semantic_elements.asp .

Are Tables Obsolete in Web Design?

Developers have shifted from using tables to a div-based structure, which has made the responsive-based website cleaner with more reliable code and functionality. Nevertheless, tables are not gone for good. Tables and their cells are now used for their true purpose: to hold data and images like a Microsoft Excel spreadsheet. Do you want to show company profits or a product sheet? You can insert a table somewhere in your <main> tag and display the data. Refer to Figure 31-59.

Here you can set the rows <tr> and columns <td>. You can also add the attributes of width (pixel or percent), border thickness, cell padding or spacing. Be aware that these attributes are not supported by HTML5. After you create the table, you should alter it using CSS instead. Refer to Figure 31-60.

Table tags are better manipulated using CSS for a mobile site. You can still run into formatting issues, depending on what is within the table, so you need to take this into account and test the pages for each device size that the table could be viewed on. For example, while rows and columns can get narrower, a row of data needs to be kept on the same row for it to make sense. At some point, the cells might wrap or appear broken. With CSS, you can modify this for smaller screens, but done incorrectly, the table can still look broken. So developers continue to struggle with table formatting for each unique site.

In the Properties panel, you can see many of the settings that are in the Insert Table dialog box, including icons that allow you to clear the column width, clear row height, and convert to either pixels or percentage. Refer to Figure 31-61.

Settings like cellpad, cellspace alignment, and border are better controlled using classes in CSS.

The properties of rows and cells are accessed in the lower half of the Properties panel when they are selected. Alignment, width, height, and background color should be controlled with CSS rather than typed into the panel. You can still use the settings when two or more cells or rows are selected to split or merge, and you can determine whether a row or column is a header <th> or has the attribute of no wrap (nowrap=nowrap) to alter text wrap. Refer to Figure 31-62.

You can still add images to table cells, but a better idea is to add them to the background using CSS.

Before you look at CSS, let’s look at a few other tags that also work with images.

Image Maps <area> and <map> Tags

If you have a large image on your site, such as a map of various countries, a chart of the constellations, or any elements that are collectively part of one picture, you can add an image with clickable areas, rather than make individual navigation buttons. Any JPEG, GIF, PNG, SVG, or BMP file can be the background for an image map. When you plan to create an image map to access the tools in the Properties panel, make sure that you are in Design view; otherwise, these properties are inaccessible. Refer to Figure 31-63.

You need to select your image in Design view to access the tools. They allow you to draw a transparent hotspot or <area> on the map. This area can have a link and a target. An image can have many hotspots. Figure 31-64 shows an example.

Once the hotspots are drawn in Design view, they preview on top of the image as light-blue squares. In the actual browser, they are invisible, and only the cursor changes so that you know they are there.

When you select the <img> tag in Code view, you see that a name has automatically been added to the map and the image now has an attribute link: usemap=#Map. It is important that these remain the same name, or the link between them can become corrupt and fail to work. Refer to Figure 31-65.

Notice that when you select an <area> tag in the Properties panel, the tool changes to a hotspot. This is the same for all hotpot types. Refer to Figure 31-66.

Here you can add a link to another page on the site (local) and/or external site. Use the target or browse folders to locate a page.

Besides a link, your image map should have an alt attribute that names what the hotspot links to; for example, alt=Information about Glass. Refer to Figure 31-67.

If you do not add an alt attribute, Dreamweaver displays a warning symbol and a message appears in your Output panel to remind you to add this information in your code or via the Properties panel. Refer to Figure 31-68.

After you save the file, the warning disappears and returns to a green check.

Recently, HTML5 has added a few more attributes to the <area> tag; they currently do not show up in Dreamweaver’s Properties panel but could be added via Code view. If you would like to look at the new settings for media, you can view them at www.w3schools.com/tags/tag_area.asp .

Be aware that not all new HTML5 features are available for older browsers or your current browser, always read the documentation on the W3Schools website to see if the HTML5 feature is supported by your target browsers.

Another good website to check is Can I Use ( https://caniuse.com ), which provides more information on tags.

Let’s look a few more HTML5 tags you can add images to. Some are supported by most browsers and others are still experimental.

The <picture> and <source> Element

The most common use of the <picture> element is art direction in mobile-responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to nicely fill the browser’s viewport; for example, one size for a desktop, another size for a tablet, and a third size for a smartphone.

The <picture> element must hold two different tags: one or more <source> tags and one <img> tag.

The browser uses the attribute values to load the most appropriate image. The browser uses the first <source> element with a matching hint and ignores any following <source> tags.

The <img> element is required as the last child tag of the <picture> declaration block. The <img> element is used to provide backward compatibility for browsers that do not support the <picture> element, or if none of the <source> tags matched.

The <picture> element works like the <video> and <audio> elements, which you look at in Chapter 36. In all cases, you set up various sources, and the first source that fits the preferences is the one being used by the browser.

The <details> and <summary> Elements

The <details> tag is used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag, including images. Normally, you have to use CSS and JavaScript to create this type of widget, but now you can do it with HTML5. It is currently supported by all modern browsers, except for Microsoft Edge and Internet Explorer.

The content of a <details> element should not be visible unless the open attribute is set; for example, <details open>. For the default closed option, remove the word open.

The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to view or hide the details.

The <dialog> Element

The <dialog> tag defines a dialog box or window.

The <menu> and <menuitem> Elements

The menu item tag is still in the experimental stage for most browsers and has currently been removed from HTML5; it is only supported by Firefox for use in context menus. Its purpose is to define a command/menu item that the user can invoke from a pop-up menu using a combination of HTML and JavaScript.

The <menu> tag defines a list/menu of commands. It is used for context menus, toolbars, and listing form controls and commands.

Perhaps in the future menus will also include images.