GWDA223 Intermediate Web Page Scripting :: Art Institute

Week 2: Dreamweaver Review

Student Showcase

We will take a look at any of your new work which is ready to share.

  • Review Site
  • Company Overview

Exercise: Dreamweaver Review

In this Exercise, you will be creating a simple web page in Dreamweaver.

Your page will end up similar to this one: Otter

To prepare, find a topic on Wikipedia. It should have an introduction of a couple of paragraphs, and it should have at least one photo. You are going to use these resources for your page content.

Create the folder structure for your web site.

  1. On the desktop, right+click and choose New > Folder.
  2. Name the folder a short name which reflects your page topic. Use all lower case letters, and no spaces or special characters. This folder will be known as your site's root folder.
  3. Open this folder and create another new folder called images. Most web designers keep all of the images files for their site in a folder called images.
  4. Save a topic image from Wikipedia into this images folder. Rename the file but don't change the file extension (.jpg, .gif, etc.)—same rules as before: lowercase, no spaces or special characters.

Now you will create a web page for your topic. We will review the following skills in Dreamweaver as you build your page:

  1. Define a site.
  2. Create a new HTML page, title it, and save it.
  3. Enter text into the page.
  4. Define a Heading 1.
  5. Insert an image into the page.
  6. Enclose the content in a "wrapper" <div> element.
  7. Create a new CSS style sheet and save it.
  8. Link the HTML page to the CSS page.
  9. Redefine the styling for the <body> element.
  10. Redefine the styling for the <h1> element.
  11. Style the wrapper <div>.
  12. Style the <img> inside the wrapper <div>.
  13. Create a link to another website.
  14. Create a list.

Before you turn this site in, go back into the CSS and go crazy. Make the site style all your own (but try to make it look attractive, too.)

Dreamweaver Tidbits

Find & Replace

  1. Edit > Find & Replace
  2. Find In allows you to search within:
    • the Selected Text
    • the Current Document
    • all Open Documents
    • a given Folder
    • Selected Files within the Files panel
    • the Entire Current Local Site (the one currently in the Files panel)
  3. Search: allows you to choose to search within the code or within the design view
  4. You can simply Find Next or Find All.
  5. Most useful is to Replace or Replace All.
  6. You can jump between files while the Find dialog is open.

Check Links Sitewide

  1. Site > Check Links Sitewide
  2. A list of broken links will appear in the Link Checker panel.
  3. Fix the broken links:
    1. Open up the file listed in the left column (you can double-click on the file name right in the Link Checker panel.)
    2. Find the broken path listed in the right column (look in Code View, use Find Next)
    3. Correct the path and save the file.
  4. Run the Check Links Sitewide command again.
  5. Repeat until there are no results.

Spell Check

Commands > Check Spelling

This will check the spelling on the current document.

Create Meta Tags

Insert > HTML > Head Tags

Writing Meta Data for your Documents
Good Meta Data can Increase Website Traffic

Meta Data consists of a title, description, and keywords that are placed into the code of every web page to be seen and read mainly by search engines.

The goal of writing meta data is to enable search engines like Google, Bing, and Yahoo to accurately index a web page. Search engines index all web pages on the Internet by looking at the meta data (and the content) listed on each individual web page.

The more accurately the meta data (title, description, keywords) matches or reflects the unique content on a page, the better the ranking of that page will be in search engine search results.

Below is an example of meta data in the head element of a web page:

<title>Chilliwack BC Canada - Chilliwack Life</title>

<meta name="description" content="Your source for living, working and playing in Chilliwack BC.">

<meta name="keywords" content="Chilliwack, BC, British Columbia, Canada, recreation, residence, resources">

How to Write Meta Data
  1. Review the content on your page and list the words, phrases, and themes that best represent the content of that page.
  2. Try to choose words or short phrases that people might type into search engines to find that page or information about that subject.
  3. Now write for each web page as follows:
Title
  • The meta title should be under 10 words, summarizing the content on the page.
  • Ideally the meta title will include one or two of the most important keywords from the content of that page.
  • The meta title should be 30-60 characters, including spaces, be engaging and interesting, causing people to want to visit that page.
  • Don’t confuse this “meta title” with the page heading that website visitors see. The public does not see any meta data in the content of a web page (except when viewing the page title in the tab or title bar.)
  • The meta title you write will often be the same title search engines will use to list your web page.
  • Of all three types of meta data, the title is most important – so make sure it clearly explains the content of your page.
Description
  • In a sentence, write the meta description by expanding upon the meta title, describing in more detail what’s on the page.
  • Again, use key words and make it interesting.
  • This will appear on the search engine’s search results page “describing” your web page.
  • A description under 15 words—or 110-150 characters—is best.
Keywords
  • List meta keywords in priority, from most important to least important, separating each keyword or key phrase with commas.
  • Never repeat a keyword more than 3 times.
  • Using approximately ten keywords is more effective than having a long list of keywords.
  • Never use keywords that have nothing to do with the content of the page they’re put on, but instead use meta keywords that match the content (actual words) on each individual page.
Take Care of Your Meta Data!

Poorly written, inaccurate or absent metadata on a web page will result in poor search engine listings for that page—and fewer people visiting that page.

Search engine placement research shows that 8 out of 10 times, search engine listings actually dissuade web searchers from clicking on a link because the meta title and meta descriptions are written poorly. Write interesting meta data that directly relates to the page it describes and you'll be on your way to generating more free "organic" search engine traffic.

Abusing the meta data system can get your web page—or entire web site—knocked way down in the serach engine rankings. In fact, keyword abuse was so rampant in the 90's that Google stopped looking at keyword meta data. Google does still pay a great deal of attention to titles and descriptions, however.

Editing Images in Dreamweaver

  1. Click on an image which is placed in the HTML document (rather than appearing as a background image in the CSS.)
  2. In the Properties panel, review the image editing tools.
    • Edit in Photoshop/Fireworks: will open the file in your default image editing program.
    • Edit Image Settings (Optimize): allows you to change the file format and specific settings within that format such as quality of compression or number of colors.
    • Crop: allows you to crop the image right in the Dreamweaver image window.
    • Brightness/Contrast: allows you to change the light levels in the image.
    • Sharpen: allows you to create the illusion of a sharper image.
  3. If you edit an image within Dreamweaver, the image fille will be permanently altered. You cannot undo your changes.
  4. Escape any unsaved changes using the Esc key.

Dreamweaver image editing tools

Preferences

  • PC: Edit > Preferences...
  • Mac: Dreamweaver > Preferences...

The Dreamweaver preference dialog allows you change all kinds of things about how you view and edit files. Here are some useful preferences to set for starters:

Category Setting Why
General Show Welcome Screen You can control whether or not the Welcome Screen appears when Dreamweaver loads.
  Maximum number of history steps Yes, like Photoshop, Dreamweaver has a History panel. You can set how many steps back you can undo. The higher the number, the more RAM is required.
Copy/Paste Edit > Paste from other applications into design view pastes: You can select whether the default for pasting text from elsewhere pastes the text only, or a varying degree of formatting as well.
Fonts Code View Allows you to change how large the text is in code view.
Invisible Elements Show Decide which bits of code that don't appear in the browser window will nontheless appear in the Dreamweaver design view.
New Document all Set what kind of document will be created if you simply create a new document. Also allows you to turn off the dialog box that typically appears when you select File > New...
Preview in Browser Browsers Identify which browsers will be available for previewing your files, and which one is the default.

Image Maps

You can link different areas of the same image to different destinations, using an image map. It's not commonly used anymore, but can still come in handy in some cases.

Dreamweaver image map

  1. Select the image.
  2. In the Properties panel, give the image map a name.
  3. Select one of the area drawing tools and create a hotspot shape.
  4. Enter a URL/path for the hotpoint, and Alt text.
  5. Use the Selection tool to move, resize or delete hotpoint shapes.

Named Anchors

Named anchors are anchors within your page that you can link to. You can see this in action when you click on links within Wikipedia's Contents box. The links jump you down to lower on the same page. Named anchors can jump to higher on a page to: check this out.

Here's how to do it yourself in Dreamweaver:

  1. Decide where you want to place a named anchor midway through your page.
  2. Click at the beginning of that line in the Design view.
  3. Insert > Named Anchor
  4. In the dialog box, gived the anchor a simple but descriptive name. It's best to use lower case and no spaces.
  5. Click OK. An anchor code hint icon appears.

Dreamweaver named anchor code hint

  1. Elsewhere on the page, select some text to be your link label.
  2. Scroll so that the anchor icon is visible in the window.
  3. Use the Point to File icon in the Properties panel to click-and-drag from the Link text box to the anchor icon.

Dreamweaver named anchor point-to-file

  1. You can also link to a named anchor from another page entirely. Type in the file name, followed by a pound sign, and then the anchor name. For example: week09.php#preferences

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
2 Dreamweaver Review dw-review
.zip
Proposal Proposal.doc

Assignment Details

Dreamweaver Review

Complete the exercise detailed on the left under "Exercise: Dreamweaver Review."

Proposal

Write a proposal for your final project site. Pretend you are working for a real client/company who needs to have a clear idea of what you plan to create for them, how long it will take, what you need from them, and how much it will cost.

Much of this will require that you make stuff up, but a lot of it will be shaped by your Project Overview and by the requirements/schedule of the Final Project.

  1. Put a nice logo or typed company name at the top of the design brief with your real or imagined design company name. Add in real or imagined contact info.
  2. Create a heading that says Proposal and the name of the project.
  3. Create a subheading for the name of the client and the date of the design brief.
  4. Create headings for each of the following topics and give details as outlined in the table below.
Topic Description
Summary Write a 1- to 2-sentence summary of the web design project. Why do they need a website or redesign, and why now? What problems are driving this new project?
Company Profile Briefly describe the organization for whom the site is being built. What do they do, how long have they been in business, how big is their staff? What is their niche market?
Stakeholders Who is overseeing this project and will be deciding whether your design is approved?
Audience Give specific demographic descriptions of your primary target audience. Some ways you can narrow your demographic focus include age range, gender, income, peer group, education level, location, and occupation.
Site Owner Goals What are the primary goals of the site owners? What do they want the website to accomplish for them? Give at least two specific goals.
Visitor Goals What are the most common tasks the average visitor would hope to complete on your site? Give at least two specific goals.
Competitive Overview What other sites will be competing for this audience for this type of product? How successful are they with their web designs (some guesswork will be required here)? How will your site design stand apart from the competition?
Social Marketing Will this site be a part of a web presence that includes social networks such as Facebook? If so, how will you integrate your social online presence into your site, or vice-versa?
Look and Feel What design elements will be incorporated to appeal to the audience as outlined above, and to accomplish both the goals of the site owner(s) and visitors. This is where you can specify colors, fonts, texture, imagery, mood, etc. Mention specific page elements desired on the home page. You can also reference sites with similar aesthetics to what you plan.
Technical Functionality What special functionality will be required beyond static HTML pages with some CSS applied? You do not need to create this functionality yourself, but if this were real-world, what would the site ultimately need?
Specifications What languages will you use to create this site (e.g. HTML5, CSS3, jQuery, etc.)? How many wireframes, moodboards, storyboards, mockups, copywriting, and revisions are included in your price?
Will-Nots Describe what you will not include in this project that a client might assume is. Describe what the client does not want to have or use on the site, such as specific colors, or features like a slideshow.
Price How much will you charge to complete the site design as outlined here? Come up with a realistic dollar amount as if you were doing this freelance.
Schedule What project components will be submitted to the client on what dates? Think in terms of which parts of this project you need to turn in to me on given dates, and make it look like a project schedule submitted to a client instead. Refer to your specifications above.
Collateral What specific things will you need the client to provide for you? E.g. text, logos, product photos, branding Pantone values, feedback and sign-off on project components. Now go back to your schedule above and include dates for when they need to get each of these things to you.
Hosting Who will provide hosting for the site? Will it be included in your price (if so, for how long,) or will the client pay separately for it? Who will arrange for the hosting and domain name registration?
Maintenance Who will update content on the site? If the designer, what will the ongoing cost be?