Janine
Hi Barry,
Janine
Hi Barry,
→ No CommentsTags: Browser Testing · CSS · Dreamweaver 8 · Dreamweaver CS3 · Dreamweaver CS4 · Dreamweaver CS5 · Dreamweaver MX · Dreamweaver MX 2004 · Fireworks · Images · Links · Random things you should know · Search Engine Optimization (SEO) · Teacher's Corner · Web design · Web graphics
Hi Janine,
I’m one of your students. Thank you for your very helpful online courses.
I am writing to ask your opinion. I am a graphic designer and illustrator. I am putting together my own website and would like to show samples of my work. My thought is to have a table of 15 thumbnails and a large mage to the left of the grid. The table would have 2 columns, one with the thumbnail images and one with the big version. Then using the swap image feature in Dreamweaver I would set them up to swap out each image as the viewer rolls over each thumbnail. Does that sound like the most efficient way to do that?
Otherwise, I thought I would have to create a series of Div tags using margins and padding to arrange them, but that seems like a lot of div tags, if each div tag had to contain an image.
Thank you for your help. Yours truly,
Mike
Hi Mike,
Thank you for your kind words about my training . I understand why you think tables might be a good solution to this design challenge, but trust me, they’re not. The only time Tables are still recommended in web design, is when you’re formatting ‘tabular data’ — in your case, I would not recommend a table.However, it’s not as hard as you might think, and you DO NOT need a to create a div for each thumbnail image. Consider this. You can create two divs, one for the big image, and another one for all of the thumbnail images. Then insert all of the thumbnails in that one div, each separated by a single space. Then use a style to add as much space as you want between each image.A compound style works well here. Ex: Create a class style for the div called .thumbnails, then create a compound style called .thumbnails img and set the margins to something like 10 pixels on the left and right, or top and bottom (depending on your design). That will put 20 pixels between each image. It’s like magic how that works instantly to spread the images apart, and it’s super easy to change if you decide you want more or less space between your thumbnails later.I hope that helps you find the best solution for your website.Janine
→ No CommentsTags: Behaviors · CSS · Dreamweaver 8 · Dreamweaver CS3 · Dreamweaver CS4 · Dreamweaver CS5 · Dreamweaver MX · Dreamweaver MX 2004 · Fireworks · Images · Links · Web design · Web graphics
Hi Janine,
I created a drop down menu with Dreamweaver CS3 ( I am waiting to upgrade soon. )
Your directions were great. When I F12 the page to preview it, it looks awesome!
However, when I upload the page, does not look the way it should or function at all.
I have searched the internet high and low for answers to no avail.
Do you have any suggestions, or a quick fix?
Thank you so much for you help.
Shari
Hi Shari,
When you create a drop-down menu with the Spry features in Dreamweaver, Dreamweaver generates the HTML and CSS code, as well as the scripts that make it all work.
Those scripts are usually saved in a folder with a name like SpryAssets and you need to upload the scripts for your drop-down menu to work.
Look in the Files panel for a new folder created by Dreamweaver that has .js files in it (these are JavaScript files). Upload the entire folder to your server with the HTML page that has your drop-down menu and everything should work on the server, just like it does on your hard drive.
You can learn more on my site about creating a drop-down menu in Dreamweaver, as well as editing a drop-down menu in Dreamweaver.
Hope that helps you solve the problem,
Janine
→ No CommentsTags: Behaviors · Browser Testing · CSS · Dreamweaver CS3 · Dreamweaver CS4 · Dreamweaver CS5 · Random things you should know · Spry · Teacher's Corner · Web design · web servers & hosting
Something tells me you’re not an idiot, but there are a few reasons that your new site may not be showing up. Here are a some things to check.
1. Make sure you uploaded your site to the right place. On many web servers, if you use the FTP info they send, you enter the main folder on the server where they keep your email, web folder, etc, but you need to then open the web folder and upload your files into that folder. It’s often called something like htdocs, or webdocs, or it could be named the URL of your site. It depends on your server, but the key thing to know is that you need to upload the files for your new site into that folder for them to become visible at your URL.
On a related note, a good way to make sure you’re in the right folder is to look for the pages of your old site, make sure you find the main page of the site, and then replace it with the main page of the new site and all of your other files.
2. Make sure you named the main page of your site correctly. On most servers, the main page of your site should be named index.html, but some servers are set up for default.html. It’s often okay to use .html or .htm — they work the same. However, if the main page of your old site is called, say, default.htm and you upload the new version with a main page named index.html, you won’t see the new page if the server is still ‘serving’ the old default.htm page.
Whatever the main page of your old site was called, assume that’s what you should name the main page of the new site and make sure you replace the old page with the new page.
I hope that helps and I wish you all be best with your newly redesigned site.
Janine
→ No CommentsTags: Blogs · Browser Testing · Dreamweaver 8 · Dreamweaver CS3 · Dreamweaver CS4 · Dreamweaver CS5 · Dreamweaver MX · Dreamweaver MX 2004 · expression web · Links · Teacher's Corner · Web design · web servers & hosting
I strongly recommend Appearance (CSS). That option will cause Dreamweaver to create CSS styles that correspond to the Page Properties settings, which is the recommended way to define page properties today. To see how this works, create a new blank page, set the page properties with the CSS option selected, and then you can study the styles DW automatically creates by looking for them in the CSS Styles Panel.
If you choose Appearance (HTML) DW uses the HTML attributes, which are no longer recommended.
Janine
→ No CommentsTags: CSS · Dreamweaver 8 · Dreamweaver CS3 · Dreamweaver CS4 · Dreamweaver CS5 · Random things you should know · Teacher's Corner · Templates · Web design
Skype automatically highlights any phone numbers displayed in a web browser to make it easy to ‘click to call’ the numbers. Just because you see this formatting on your computer, doesn’t mean other people see it. Skype formatting on phone numbers is specific to each person’s computer, not to the general formatting of a web page.
That means you can’t really control whether other people see phone numbers on your web pages with skype formatting, but you can remove it on your own computer. I for one, found they formatting — and the way skype changed the size and display of phone numbers — annoying!
It can also be problematic that if you copy and paste a phone number that skype has highlighted, you get a bunch of skype code when you paste it, which means you have to delete a bunch of unecessary characters if you do something like copy and paste a number from a web page into an email message.
So how do you get rid of skype formatting on phone numbers?
The easiest way is to uninstall the skype “click to call’ app. That doesn’t mean you have to uninstall skype, you can still use skype to make call, chat, etc, you’ll just keep skype from formatting numbers on your computer — but you can still copy and paste numbers into skype to make it easy to call any number you see on your screen. Uninstalling Skype Click to Call just removes the program that creates Skype shortcuts.
On a windows computer, you can uninstall the skype click to call feature the same way you’d uninstall any program.
1. Click on the start button
2. Choose Control Panel
3. Choose Uninstall a Program
4. Select Skype Click to Call (make sure you don’t remove the actual Skype program unless you really want to get rid of Skype completely)
5. Click the Remove button.
As soon as the program is removed from your computer, the Skype formatting should go away with it.
Note: You may need to vary these steps slightly, depending on the version of Windows you are using,
→ No CommentsTags: Dreamweaver 8 · Dreamweaver CS3 · Dreamweaver CS4 · Dreamweaver CS5 · Dreamweaver MX · Dreamweaver MX 2004 · Links · Random things you should know
One of the things that makes it hard to ‘get’ the hierarchy or specificity of CSS that was written by someone else is that there are so many different ways to write CSS. I sometimes compare it to the art of writing prose. Not everyone who has learned to spell and understands the basics of grammar, can write like Stephen King or Gabriel Garcia Marquez or William Shakespeare.
Even if you haven’t read those authors, you can quickly appreciate that Marquez was a master at magic realism, which is quite different from the science fiction and horror that Stephen King is famous for in books like Carrie and The Shining. To further complicate matters, the way many of us write CSS has changed over time. William Shakespeare is still considered a master, but few teachers would recommend you write the way he did anymore. Similarly, even well-written CSS, if it’s a few years old, may read like Old English today.
ThemeForest and Woo Themes are considered some of the better sources for templates and WordPress themes, but as soon as you find yourself reviewing someone else’s CSS, you have to take into consideration that every author has their own style, that there are many ways to create the same design effects with CSS, and that if you really want to write the cleanest, best code possible, you’ll spend hours on the details — in much the way a great writer can spend an afternoon looking for just the write word.
The more you learn about CSS, the better you’ll get at writing (and reading) it, but at the end of the day, some of the differences in style sheets come down to, well, style.
You can learn more about the basics from my CSS training videos.
Janine
→ No CommentsTags: CSS · Teacher's Corner · Templates · Web design · WordPress
Hello Janine,
I have watched all of your Dreamweaver and CSS training videos numerous times and worked all of the projects, and I am getting the hang of css styles and rules, etc.
However, I have noticed that the pre-made CSS templates in Dreamweaver have <style> in the CSS panel, which I presume is an “internal” style sheet. You keep saying in your training that adding an “external” <style.css> to the html page is better, but where do these “external” style sheets come from?
Is there a basic external style sheet you can attach? Can you change the internal style sheet that came with the template to an external style sheet?
Thanks,
Tom
Hi Tom,
Yes, you can change an internal style sheet into an external style sheet. Here’s what you do.
1. Create a new CSS file by choose File > New, then in the New dialog, choose Blank Page on the left, and choose CSS, and then choose Create.
2. Save that file by choose File > Save, and name it style.css, or main.css (or something like that)
3. Open the HTML page that has the internal styles (the ones that are in the <styles> tags), and attach the new blank external style sheet to that HTML page. You can do that by choosing Format > CSS Styles > Attach Stylesheet.
Now you should see the blank external style sheet in the CSS Styles panel, just above or below the list of styles in the page.
4. To move the styles into the new blank style sheet, just click and drag them in the styles panel from the internal style sheet to the external one, as you see in this screenshot.
Note, you can Shift+Click, or Cmd + Click, to select multiple styles and drag them all at once.
After you move all of the styles into the external style sheet, save the CSS file, and you can then attach that new external CSS file to any or all of the other pages in your site to apply the sames styles to every page.
If you already have internal styles on a page that are the same as the styles in the external style sheet, make sure to delete them — having duplicate styles can cause conflicts.
I hope that helps you finish your site.
Janine
→ No CommentsTags: Browser Testing · CSS · Dreamweaver CS3 · Dreamweaver CS4 · Dreamweaver CS5 · Teacher's Corner · Web design
Janine,
I just watched your class on E-Commerce on Kelby Training. It was an excellent class for someone like me, but I am experiencing a little difficulty in adding the Google checkout to my site. I have no problems adding the code for the items, but that 2nd piece of code that you said to put at the bottom of every page is causing me problems. I am using iWeb and I am not quite sure where to insert that code, or if it is even possible.
Thank you in advance,
Joe
Hi Joe,
Thanks for the kinds words about my training videos. I don’t know much about iweb specifically, but some web services — especially those that over simply web design and limit you to templates — make it difficult, or even impossible, to get to the right place in the code to use Google Checkout.
If that’s your situation, you may need to use PayPal instead. Unlike Google, which gives you a small piece of code for each button, and another small piece of code to put at the bottom of each page, when you use the shopping cart service from PayPal, you get all of that code in one big chunk. I still prefer the interface of Google Checkout, but in your case, PayPal may be your best (or only) choice.
I know many people prefer to learn with training videos, but I also have a written tutorial on how to use Google Checkout that may help you find the place you’re having trouble.
I hope that helps you find the right solution for your website and I wish you all the best with your online sales,
Janine
DigitalFamily.com
→ No CommentsTags: Blogs · CMS · Contribute · Dreamweaver 8 · Dreamweaver CS3 · Dreamweaver CS4 · Dreamweaver CS5 · Dreamweaver MX · Dreamweaver MX 2004 · eCommerce · Teacher's Corner · Templates · Web design
Dear Janine,
While adding pages to my site, I have been organizing them via subfolders locally on my hard drive. This results in web pages URL’s appearing long and messy. Is there a way to enter a tag, style, or code to change the display URL on my website?
Thank you for your time,
Mike
Hi Mike,
→ No CommentsTags: CMS · CSS · Dreamweaver 8 · Dreamweaver CS3 · Dreamweaver CS4 · Dreamweaver CS5 · Dreamweaver MX · Dreamweaver MX 2004 · Links · Search Engine Optimization (SEO) · Teacher's Corner · Traffic · Web design · web servers & hosting