© Jennifer Harder 2018
Jennifer HarderGraphics and Multimedia for the Web with Adobe Creative Cloudhttps://doi.org/10.1007/978-1-4842-3823-3_37

37. Additional Options to Apply Images in Dreamweaver

Jennifer Harder1 
(1)
Delta, BC, Canada
 

In this chapter, you look at a few other options that you may not have considered while working in Dreamweaver to apply images to your site.

Note

This chapter does not have any actual projects; however, you can use the files in the Part 6 folder to practice opening and viewing for this lesson. They are at https://github.com/Apress/graphics-multimedia-web-adobe-creative-cloud .

Target Attributes

Target attributes in HTML allow you to specify where to open a linked document, like a PDF, but with CSS selectors, they are a useful way you can display linked files that do not have an image preview or thumbnail, such as PDF files.

So far in in Part 6, you have not dealt with how to work with file types such as PDFs that don’t show up as a graphic unless you click the link. CSS has a snippet that uses target attributes to get around this issue, so that you can at least see a thumbnail of the type of file type you are looking at if you have a lengthy list.

You can find this example under Snippets Panel CSS Snippets ➤ Style Links based on file type. Figure 37-1 shows a preview of the code and css_target_test.html.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig1_HTML.jpg
Figure 37-1

Modifying some snippet code for targets

I made some modifications to the CSS code that you can see here.
/* external links */
/* external links */
ul li{
        list-style: none;
        display:inline-block;
}
ul a{
        display:block;
        min-height: 15px;
        padding-left: 20px;
        background-repeat: no-repeat;
        background-position: 0 3px;
}
a[href^="http://"] {
        padding-right: 13px;
        color: #1abc9c;
}
/* emails */
a[href^="mailto:"] {
        padding-right: 20px;
        color: #000000;
        background: url(../images/icon_mail.gif) no-repeat left;
}
/* pdfs */
a[href$=".pdf"] {
        padding-right: 18px;
        color: #808080;
        background: url(../images/icon_pdf.gif) no-repeat left;
}
By targeting the <a> tag and the href attribute, you can target file extensions such as .pdf or the "mailto" link, and add a helpful graphic beside the link. You can see an example in Figure 37-2.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig2_HTML.jpg
Figure 37-2

Add an icon beside files that need a small thumbnail preview

The HTML code looks like this:
<ul>
<li> <a href="file1.pdf" target="_blank">PDF File 1</a></li>
<li> <a href="file2.pdf" target="_blank">PDF File 2</a></li>
<li> <a href="mailto:[email protected]">Email Me</a></li>
<li> <a href="http://www.your_site.com">Some Site</a></li>
</ul>

Note that these are just temporary links for testing; there are no actual PDF files currently linked in my site. You can replace the links with your own file to test further. When adding a document like a PDF, always remember to add a "_blank" value to open the linked document in a new window or tab. This is a best practice when you open a PDF or are directing your user to a resource link that is not a page on your site.

Graphs and Charts

Other JavaScript libraries included with jQuery also allow you to create live pie charts and graphs that you can further edit in Dreamweaver using the <canvas> element. Just bear in mind that these might be in the form of third-party plug-ins (not created by Dreamweaver), so read the documentation carefully to understand how to set it up (see https://canvasjs.com/jquery-charts/ ).

Google Charts is free. You can learn how to edit and use it on W3Schools ( www.w3schools.com/howto/howto_google_charts.asp ) and then apply it to your page in Dreamweaver in Code view. Examples are at https://developers.google.com/chart/ .

Web Fonts

Like Photoshop, Illustrator, and Animate, Dreamweaver allows you to add web fonts. If possible, work with web fonts so that your site appears consistent for as many users as possible. Rather than embedding fonts, Google Fonts and Adobe Edge Web Fonts (formerly Typekit) are two examples.

Using two or three fonts for your site is usually enough. These fonts allow you to add creative headers to your webpages, even if your viewers’ computers do not have those fonts installed. In the past, if you wanted a fancy script heading, you had to either make sure that you had a generic backup font family referenced in the CSS file in case your viewer did not have your font (New Times Roman or Helvetica), or you had to put a graphic in place of the font. However, this led to formatting issues, and it was difficult to update the graphic. When web fonts came along, it solved the issue.

In most cases, you use the fonts that are supplied by Adobe, but you can also use Google Fonts, which are considered the most compatible, as well if you add the correct external links to the <head> section of your HTML5 web page.
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>

There are many Google web fonts, and they are free and easy to use.

If you want to use the Adobe web fonts on your website, you can access them at Properties panel ➤ Font ➤ Manage Fonts. Refer to Figure 37-3.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig3_HTML.jpg
Figure 37-3

Use the Properties panel to access and manage web fonts

Or via the Tools ➤ Manage Fonts from the main menu.

This brings up all the available fonts that you can use, and you can apply them to your sites. Refer to Figure 37-4.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig4_HTML.jpg
Figure 37-4

You can search through many available Adobe Edge Web Fonts

Not all web fonts are free. Choosing the right font takes time and research if you want to create a professional user experience. When selecting a web font, you must, consider such things as licensing, and whether you need to pay once or if there is another agreement, such as a Creative Cloud subscription. If you are on a budget, you might gravitate toward a free font ; however, consider Table 37-1.
Table 37-1

Advantages and Disadvantages of Free and Paid Web Fonts

Free Fonts

Paid Fonts

They are free to use

They can be expensive

If overused by others, they can dilute your brand’s image

Can make you stand out from your competition

Often only found in one weight and may be difficult to italicize or bold accurately

Come in more font weights, but you may need to pay more for extra ones

May or may not be a high quality font

If they are a higher quality, there may be support for multi-language symbols, and the typography creators will get paid

When downloading them from a site, you may want to host them on your own site rather than use Adobe Edge or Google’s hosting services. You add them in the Local Web Fonts tab. Refer to Figure 37-5.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig5_HTML.jpg
Figure 37-5

You can add fonts that are on your computer to your site if you have them properly licensed

When you add a web font, you need to make sure that first you list the font name and that it is available in at least four formats.

  • Embedded OpenType Fonts (EOT) : Designed by Microsoft and for use as embedded fonts on all webpages. You may see it as OpenType Fonts (OTF), which is used by Mac and Window computers.

  • The Web Open Font Format (WOFF or WOFF 2.0) : This font was added as a recommendation by W3C. It is OpenType or TrueType with extra metadata and added compression to support a variety of bandwidths. WOFF 2.0 is the next version and provides better compression, which is useful when working with mobile devices.

  • TrueType Fonts (TTF) : These are for both Mac and Windows computers. They are the most common format found on both operating systems. This format allows basic digital rights management and is supported by all major browsers. A lesser known format is the TrueType Collection(TTC), which allows many fonts in a single file to save space or fonts where many glyphs are common.

  • SVG Fonts/Shapes : SVG is used to display various glyph shapes. Being in an uncompressed format, the size can be large, and there is no provision for font-hinting (lines up with a rasterized grid so that it can be legible at low-res sizes).

To learn which browsers support which fonts, go to www.w3schools.com/css/css3_fonts.asp .

Once you have a collection of custom web fonts to store in your root site, you can store them in a fonts folder. For example, depending on the version of Bootstrap if you use a widget from the Insert Panel Bootstrap tab, Dreamweaver automatically creates a fonts folder and then stores the fonts for that widget or other Bootstrap widgets in that location. Likewise, you can store your own web fonts there too. Refer to Figure 37-6.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig6_HTML.jpg
Figure 37-6

Web fonts are added to the fonts folder

You apply them within your external CSS file using the @font-face rule. First, define a name for the font (e.g., myFirstFont) and then point to the font file.
@font-face {
     font-family: myFirstFonts;
     src: url(somefont.woff);
}
@font-face {
     font-family: myFirstFont;
     src: url(somefont_bold.woff);
     font-weight: bold;
}
 div {
     font-family: myFirstFonts;
}

Note

Keep the font name in the URL in lowercase to avoid conflicts in the browser.

In addition, you can add a @font-face when you want to apply bold or italic styles.

If you have different formats for the same font, they are separated by commas. You can see how this might appear with the Bootstrap font.
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
You can see how this appears in the CSS Designer panel in the Properties section, where two sources show each separated by a semicolon; both are connected to the same font family. Refer to Figure 37-7.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig7_HTML.jpg
Figure 37-7

The CSS Designer panel with the fonts src listed

Note

To view web fonts in Dreamweaver correctly, you need to set the viewing to Live view. Also, some newer versions of Bootstrap CSS rely on system fonts, so if you are using the web fonts I supplied for practice, make sure to add the @font-face to your own external CSS file and follow the earlier code examples.

Returning to the Manage Fonts dialog box, you can also organize your fonts further for a font family in Custom Font Stacks to determine which fonts on your desktop you want to preview for text, or use as alternatives if older browsers do not support the CSS3 @font-face web font. You can add or remove fonts using the double arrows in the dialog box, as well as add or remove the Font List stack using the plus or minus icons. Refer to Figure 37-8.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig8_HTML.jpg
Figure 37-8

Manage Fonts in the Custom Font Stacks tab

When complete, click Done to exit this area. You can use these new families with your CSS.

CC Libraries Panel

This CC Libraries panel is shown in Figure 37-9.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig9_HTML.jpg
Figure 37-9

CC Libraries panel

It is a panel that was introduced with the Creative Cloud with Dreamweaver. You can store in the CC Libraries your most commonly used assets, like images, colors, and text styles that you use in projects. To increase your workflow, you can go back to a program like Photoshop, and the colors and graphics are stored there so that you can refer to them during your project upon returning to Dreamweaver.

By working through the cloud, you can insert linked assets to keep your pages updated. Note that Library CC is the same as the Library panel found in Photoshop, Illustrator, and Animate (CC Libraries). The reason for the slight name change is because Dreamweaver already has a Library Item folder that stores your library items. This can be a bit confusing when working between programs; however, use this panel if you want to move objects to the creative cloud and share between other adobe programs.

Dreamweaver ➤ Extract PSD

There is a final panel that Dreamweaver offers for working with your images, the Extract PSD panel. This is a great resource if you have Photoshop images (PSD) that allow you to extract CSS, images, fonts, colors, gradients, and measurements into your site. You don’t have to have Photoshop open at the time because files are uploaded to the Creative Cloud console in a collaborative folder. You can work on them in that environment to get the information that you need. There is also drag-and-drop support to create image tags from PSD layers. And you can paste styles directly into Live view and the work with the CSS Designer panel. Refer to Figure 37-10.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig10_HTML.jpg
Figure 37-10

Extract panel

For more information, visit https://helpx.adobe.com/ca/dreamweaver/using/dreamweaver-integration-extract.html .

If you uploaded a PSD that you want to remove from Creative Cloud, under Assets ➤ Files. Under Open Folder click View on Web. Once inside this area you need to move the files found in the Files section to the Deleted folder; only this area can you permanently delete the file from the Creative Cloud. Refer to Figure 37-11 to see the View on Web folder link so that you can view your Creative Cloud files stored on-line.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig11_HTML.jpg
Figure 37-11

The Adobe Creative Cloud panel allows you to access uploaded images that you may want to delete later

In Dreamweaver, you can further adjust how your images will be extracted by going to Edit ➤ Preferences Extract tab. They can be extracted as PNG or JPEG. Refer to Figure 37-12.
../images/466782_1_En_37_Chapter/466782_1_En_37_Fig12_HTML.jpg
Figure 37-12

Preferences setting for extracting images

Summary

In this chapter, you looked at a few code resources and panels—such Web Fonts, CC Libraries, and Extract—that can be used to work with images in Dreamweaver.

In the next chapter, you adjust and validate the settings in your files before uploading your site.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.221.165.246