Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Dive deep into key typographic concepts and learn how to manipulate type in Dreamweaver. Author Joseph Lowery introduces Dreamweaver type tools and shows how to perform basic text modifications, establish the appropriate type unit, integrate custom web fonts, and apply drop shadows, gradients, and other effects. The course also provides in-depth tutorials on structuring text with headings, paragraphs, columns, and lists, and offers a preview of Adobe's proposed CSS Regions.
While every designer generally does his or her level best to make their sites legible, there's no way you can please everyone. One option is to let the users of your site set the size of the type themselves, as you'll see in this example. So I'm in Live view and if I move over the larger A and click once, the type gets bigger. I'll click again and it gets even bigger still. I can go to the smaller A, click again to make it smaller one more time, so that it is back to the original size and then let's click one last time to make it even smaller.
So I'll give it an ID of typeSize. Now I already have a CSS rule that will float these to the right for this particular ID. So it's important to get that right, and I'll close out the span tag and let Dreamweaver's auto-complete do its magic for me. Now we're going to put in the two images, so I'll put my cursor between the opening and closing of the span tag and go up to the menu and choose Insert > Image and I'm here in my _images folder of Chapter 2 > 02_04 > _images and let's put in the small one first.
I'll let code hints help me out there. And next we're going to give it the source attribute, and then you pass in an absolute URL, http://code.jquery.com/ jquery-latest.min, for minified, .js.
Let's go to fontSize.js, and I'll go to Code View, so that you can see the code itself. Now explaining it fully is really beyond the scope of this course, but I'll definitely give you the high points here. So first, after setting up the click method that indicates what should happen when each image is clicked. So the first line in the actual code function is an array that holds all the elements I want to modify. You can include or exclude whatever you'd like. Next, I set up another variable that will save the reference for the clicked element as we go through the loop, which is established next with the keyword "each" and this will be applied to each of the array elements: h1, h2, h3, and so on.
So in the primary function, I get the current size, change it to a number, and then get the measurement unit with the slice function. Next, there are two if statements that increase or decrease the font size, depending on which of the two images are clicked, and here is where those IDs come into play. Finally, we put it all together and create a new font size. Okay, let's try this out and see how it works.
So I'll go back to Design view, make sure that you're in Live view, and move your mouse over the larger A and give it a click, and I do have larger text here. Everything is looking pretty good. What about going smaller? Yes, I'm definitely going smaller. Everything seems to be working and the design is basically expanding smoothly to compensate for larger text. Feel free to incorporate this code and technique into your own sites.
There are currently no FAQs about Typography with CSS in Dreamweaver.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.