X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Creating Great Text With CSS3 in Dreamweaver

If you have been using the CSS Styles panel to style your webpages in Dreamweaver then you will be aware of the restrictions placed upon you with regards to the design. Solid colors, Standard fonts, Block shapes etc. All interesting, but not really challenging CSS’ ability. 

So in this article I’m going to show you some CSS to add to your Styles in Dreamweaver that will really create some great designs. 

Let's start by creating a Div Tag that will contain this stupendous Style you're about to create. 


Step 1 - Add an AP Div

Starting with a blank HTML document open the Insert Panel and set it to Layout. From the Layout options choose Draw AP Div. 

Div drawn

Div drawn


Use the tool to draw an AP Div (which is just a Div Tag with an #ID style automatically applied containing position and size parameters). Use the Property Panel to size the AP Div with Height: 400px and Width: 400px. 


Step 2 - Name the AP Div

Open the AP Elements panel and re-name the APDiv1 to “MyStyle”. Open the CSS Style panel and you will se that renaming the AP Div also renames the ID Style “MyStyle”; this is the style that you will be editing. 


Step 3 - Find the CSS Code

Switch over to the Split view so that you can see both the image and the code you’ve created. Scroll up to the section and you will see a section of code highlighted pink that says: #MyStyle { }. This is your CSS and all the settings for it that you are about to create will sit in-between the two {  }.


Step 4 - Add some content

To save time typing, copy and paste about a Paragraph of text into the Div by clicking on the drawn AP Div in the Design view, so the cursor becomes active and pressing Command-V to paste. 

border & text

border & text


Add a 3px border all the way around by adding this line of code between the { }:

border: 3px solid #999;


Step 5 - Round the Corners

Add these lines of code to the style named #MyStyle to create 20px rounded corners in a range of Browsers:

-webkit-border-radius:20.0px;

-moz-border-radius:20.0px;

-o-border-radius:20.0px;

-ms-border-radius:20.0px;

border-radius:20.0px;


Dreamweaver won't display these corners so to see them save the page and preview in a Browser.

rounded corners

rounded corners


TIP: Increase the radius size to exactly half of your width and height (so in this case 200px) and preview again.... Hey you get a perfect Circle!


Step 6 - Gradient Background

Adding a gradient background is a really nice design effect, however you should always bear in mind that not all versions of all browsers support it. So only ever use it to enhance an image. Always design things with multiple browsers in mind and have a solid fill available as well.

gradient background

gradient background


The following code will create this gradient background:

background-color:#666666;

background-image: -moz-linear-gradient(top , #666666, #333333 40.0%);

background-image: -webkit-linear-gradient(top , #666666, #333333 40.0%);

background-image: -o-linear-gradient(top , #666666, #333333 40.0%);

background-image: -ms-linear-gradient(top , #666666, #333333 40.0%);

background-image: linear-gradient(top , #666666, #333333 40.0%);


Test it in a few browsers if you can, to see the effect. Lastly let's add some punch to the text.


Step 7 - Enhance the Text

I’ve added White to the text, to make it stand out better against the gradient. Also I’ve added Drop Shadow to it. As with the Gradient, Drop Shadow only works with more recent versions of some web browsers. Don’t always rely on it. 

drop shadow

drop shadow


This code adds the Color and Drop Shadow:

color: #FFFFFF;

text-shadow: 2px 2px 3px #000000;


Step 8 - Better Font?

Lastly, I added a better font and some padding, to create some space around the text. 

Better text

Better text


By adding these lines:

font-weight: normal;

text-align: left; 

font-family: Georgia, serif;

font-size: 18.0px;

line-height: 140%;

padding: 10px;


Here is the code I added to achieve that. Again it’s worth checking for browser compatibility to see where some code won't work for some browsers and bearing that in mind when you're designing your pages. 

Browsers are being updated all the time to support CSS3 and HTML 5 so don’t be too frightened to use them; just be aware. What’s more it's not just the traditional web browsers you're able to aim for with this code (Safari, Chrome and Firefox). It also works perfectly well on iOS and Android. If that doesn’t make it worth your while, then what will?



David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link