Bayside Beat tutorial

How do you clear or delete files in the "Local Files" section? In step 1, when I selected the "Browse for Folder" button, all the files from my desktop were copied to "Local Files". When I edit and delete a file, it is also deleted from my desktop. I would like to start the Bayside Beat tutorial over from the beginning.

The best way to work with this (or any other) tutorial is to make a copy of the files, and make the folder that contains the copy the Local Site Folder.
If you want to edit the current site definition, go to Site > Manage Sites. In the dialog box that opens, select the name of the site you want to edit, and click the Edit button (it looks like a pencil):

Similar Messages

Bayside Beat Tutorial--Paragraph Has No p Tags

While in the third session of the Bayside Beat tutorial for Dreamweaver CC titled Adding images and links, in the third paragraph of the imported article titled Riding the Cable Cars, the <p> tags are missing. Therefore, at the step of adding the Figure tag, there is no space between the caption text and the beginning of the third paragraph. Why would the <p> tags be missing?
It appears that Dreamweaver didn't convert the text properly to HTML.

The most likely reason is that you didn't select the closing paragraph symbol when copying from the rtf file. Paste Special's ability to generate the correct HTML tags depends entirely on how the text was formatted in the original document, and on what is actually selected.
When copying and pasting from an rtf document, Dreamweaver wraps everything in paragraph tags, as long as there is a blank line between each paragraph in the original document. If you don't copy the closing paragraph symbol, the last line is not formatted by Dreamweaver.
When copying and pasting from a Word document, Dreamweaver preserves the Word formatting, but only if the Word document has been styled correctly. A lot of Word documents are incorrectly styled (simply changing font size, instead of using heading styles), so it's always a good idea to check the HTML after pasting into Dreamweaver.
With both Word and rtf documents, there needs to be a blank line between paragraphs. If there isn't, Dreamweaver wraps everything in a single pair of <p> tags, and the line breaks are represented by <br> tags. Cleaning this up can be a major pain if a lot of text has been formatted this way.
That's why it's so important to check the HTML generated after copying and pasting from an external file.

Bayside Beat tutorial not saving properly? [subject edited by moderator]

I'm only on the first step of the trial, and have saved 'Bayside Beat' to the Sites folder, but it's empty - there are no images, nor anything in the js folder - what's happened??

The tutorial says -
Copy the bayside_beat folder into the Sites folder.The bayside_beat folder is the folder you will use as the root folder (main folder) for your Dreamweaver site. The content folder contains two rich text format (.rtf) files with text content for the web pages you'll build in this tutorial. The bayside_beat_comp.jpg image shows the design for the main page of the website (see Figure 2).
Did you add this bayside_beat folder as the root folder of the site in your site definition?

Trying to create and save a new site for the Bayside Beat tutorial but am having trouble

trying to create a new site as explained by David Powers in this tutorial but I am already getting hung up.
It tells me to go to site and then to New Site. I do that and type in Bayside Beat on the first line. (as soon as I do that you notice a red X on the right side of Bayside Beat.)
I'm told to Browse for my folder which is on my desktop and click ok. When I press SAVE another window pops up.
This time it tells me another site is named Getting Started and I'm asked to enter a different name.
Question, where is this other site that is named Getting Started? What name do I call it now!?
So I rename the site name San Francisco and press SAVE and another window pops up.
This time it tells me I may have further problems still...What am I suppose to do?

Do you mean, are the contents still in the original folder or was it transferred to a new folder?
Does it make a difference if it’s in the original folder?
Ralph Fujiwara
Graphic Designer
5 Revere Drive, Suite 206 | Northbrook, IL 60062
Direct: 847.849.2968 | EFax: 847.897.0768
[email protected]

Bayside Beat tutorial stuck at the same point over and over

I'm getting stuck again and again at the point where it asks to insert the Word text in the 3 placeholders. First one OK, and then it's like: "figure the rest out for yourself". What exactly goes in container 2 and in container 3? For instance I think the part with the 'links' should not be inserted. And the last paragraph does not appear in the example in the first part of the tutorial. If the creator of the tutorial feels it necessary to tell us that it's no problem if you've never built a website before, then he should keep it step by step and keep the learning curve for a first timer in mind! I HAVE built a few websites before, but this one keeps me puzzled over and again, because the result is not what is shown in the tutorial, and the images do not correspond fully to what I get to see in the Dreamweaver CC panels. One does not learn from just "do this and do that", but only if the reasons why are given as well.

This forum does not support email attachments. If you want to show a screenshot of your problem(s), you need to log into the web-based forum, and use the camera icon at the top of the message field to insert an image into your post.
Images embedded in posts are usually scaled down, but they can be viewed full size by clicking the image.
I'm sorry you're still having difficulty with my video tutorial. When Adobe asked me to create it, the brief was to provide a series of short videos showing how to use Dreamweaver to create a simple web page. Web design is a complex subject, so attempting to cover absolutely everything in half an hour of videos is impossible, but the target audience is subscribers to Creative Cloud, who might already be familiar with other Adobe programs, but are new to Dreamweaver. It's intended to provide a brief sampler of what Dreamweaver is capable of. The written tutorial is aimed at beginners who need more detailed help.
As I mentioned earlier, the videos were recorded using the original version of Dreamweaver CC. The colour picker was updated in Dreamweaver 13.1, which explains why you don't see the colour swatches shown in the video. However, the updated colour picker brings Dreamweaver in line with other Adobe programs, so it was felt that the change would be sufficiently familiar to designers. I'm sorry if it confused you.
Although you say you have built websites before, I wonder if you have a good knowledge of HTML and CSS? Understanding both technologies is essential to success with Dreamweaver. If you feel uncomfortable with code or don't want to learn it, you might be better off using Adobe Muse, which is also part of the Creative Suite. It's designed to build websites without a need for working with the code.
On the other hand, if you would like to persevere with Dreamweaver, I suggest that you take a look at Approaches to learning web design. It's a short video (less than 3 minutes) created by James Williamson, and is one of the free videos in Dreamweaver CC: Essential Training in the lynda.com Online Training Library. As James explains, his course doesn't cover the fundamentals of HTML and CSS. Yet his "essential training" course runs for more than eight hours. My own Dreamweaver CC: Learn by Video course (published by Peachpit/Adobe Press) runs for approximately 12 hours, and it still doesn't cover every aspect of web design or Dreamweaver functionality. It's a massive subject, but one that can be fascinating. Your age should be no impediment. Many of the most active people providing help in the main Dreamweaver support forum are in their sixties and seventies (including me).

Bayside Beat tutorial missing a java script in the files

So I opened the file and I unzipped it. Figure 4. http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/ first_website_pt1/first_website_cc_pt1_fig04.jpg
shows a JS and it is not in the file...I'll work around it, but want to know if is a problem.

The HTML5 shiv is hosted on Google Code's CDN. You can safely link to the external file to save having to download & host it yourself.

Nancy O.

Bayside Beat Tutorial - Part 4 - Absolute positioning

I am stuck on the Absolute positioning section. My image is supposed to be spread out across the screen and the text is supposed to be at 36% as a layer on top of the image. Here are the instructions:
To keep related styles together, select #wrapper in the Selectors pane, and click the plus button to create a new selector called #hero after it.
In the Layout category, set the position property to relative.
With #hero still selected in the Selectors pane, create a new selector called #hero article to style the <article>element nested inside the hero <div>.
In the Layout category, set the width property to 36%, and left and right padding to 10px.
Set the position property to absolute.
The moment I set steps 4 & 5, I get the following layout:
It should look like this:

Looking at your screenshot, it looks as though you have wrapped the <article> around the hero <div> in the underlying HTML. The problem isn't with your CSS, but the HTML structure.
Compare your HTML file with the version in the completed folder.

Assets for Bayside Beat video.

I do not see where to find the assets referred to at the beginning of the Bayside Beat video.

The most likely reason is that you didn't select the closing paragraph symbol when copying from the rtf file. Paste Special's ability to generate the correct HTML tags depends entirely on how the text was formatted in the original document, and on what is actually selected.
When copying and pasting from an rtf document, Dreamweaver wraps everything in paragraph tags, as long as there is a blank line between each paragraph in the original document. If you don't copy the closing paragraph symbol, the last line is not formatted by Dreamweaver.
When copying and pasting from a Word document, Dreamweaver preserves the Word formatting, but only if the Word document has been styled correctly. A lot of Word documents are incorrectly styled (simply changing font size, instead of using heading styles), so it's always a good idea to check the HTML after pasting into Dreamweaver.
With both Word and rtf documents, there needs to be a blank line between paragraphs. If there isn't, Dreamweaver wraps everything in a single pair of <p> tags, and the line breaks are represented by <br> tags. Cleaning this up can be a major pain if a lot of text has been formatted this way.
That's why it's so important to check the HTML generated after copying and pasting from an external file.

How do I get my page to change to two column in DW CC?

I have a main page with a flash picture and article as "hero" and a picture of our Pastor as "main". After that, I'm trying to get the following article to start a second column, then create an additional article since "permanent pastor" article is so short. I followed the Bayside Beat tutorial but I am stymied. Attached is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SRBC Pastor</title>
<link href="styles/main.css" rel="stylesheet" type="text/css">
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<header id="top">
    <h1>Strangers Rest Baptist Church</h1>
    <nav class="thispage" id="mainnav">
      <ul><ul></ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="About.html">About</a></li>
        <li><a href="#">Calendar</a></li>
        <li><a href="#">Ministries</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
</header>
<div id="hero">
    <article>
      <p align="center"><strong>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480" id="FlashID" title="srbc hero">
          <param name="movie" value="file:///C|/Users/howcheat/Desktop/srbc hero.swf">
          <param name="quality" value="high">
          <param name="wmode" value="opaque">
          <param name="swfversion" value="7.0.70.0">
          
          <param name="expressinstall" value="Scripts/expressInstall.swf">
          
          
          <object type="application/x-shockwave-flash" data="file:///C|/Users/howcheat/Desktop/srbc hero.swf" width="640" height="480">
            
            <param name="quality" value="high">
            <param name="wmode" value="opaque">
            <param name="swfversion" value="7.0.70.0">
            <param name="expressinstall" value="Scripts/expressInstall.swf">
            
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            
          </object>
          
        </object>
      </strong></p>
      <p align="center"><strong>November 2014</strong><br>
        <strong>73rd Church Anniversary Month Celebration</strong></p>
      <p><strong>Celebrating 73 years of service to the Almighty, the community of Como, City of Fort Worth and state of Texas!! Come join us on any Sunday morning worship services. All are welcome. Speakers for the 10:15 morning worship service are Rev Mark Harris, Nov 2; Rev Lafayette Kelly, Nov 9; Our own Rev Eddie Brown Sr, Nov 16; Evangelist Debra Sykes West, Nov 23; and Sis Carrie Tunson, Nov 30.</strong></p>
      <p><strong>Anniversary Committee</strong><br>
        <strong>Sis Bonnie Cheatham, Chair</strong><br>
        <strong>Sis Patricia Howard, Co Chair</strong><br>
        <strong>Rev Eddie Brown Sr, Advisor</strong></p>
    </article>
</div>
<article id="main">
    <p><strong>Interim Pastor: Rev Eddie Brown Sr</strong></p>
    <p>On 28 August 2014, Rev Eddie Brown Sr became Interim Pastor of our Church and within a matter of a few weeks became a sensation at Strangers Rest Baptist Church. His folksy tales of his past experiences transition smoothly into scriptural passages of his sermons. His calm, receptive demeanor appears to be a perfect fit for SRBC. </p>
    <p>Brought out of retirement specifically to lead SRBC during an interim period, Rev Brown declares that his objective is “To serve in the capacity as Pastor to feed the children of God according to his word” (John 21:15-17) He brings over 29 years of experience in various Pastorial positions with a degree in Religion/Christian Education from Southern Bible Institute.</p>
    <figure><img src="Images/Pastor-and-Wife.gif" width="576" height="768" alt=""/>
      <figcaption>Pastor Eddie Sr and Sister Marilyn Brown</figcaption>
    </figure>
    <p>His wife, Marilyn is highly motivated and staunchly supportive of his new role as Interim Pastor. They have three children and seven grandchildren.</p>
</article>
<aside id="sidebar">
    <p><strong>SRBC Permanent Pastor Position not currently open</strong></p>
    <p><strong> </strong>SRBC is in the midst of a transtitional period and are actively pursuing major policy and procedural changes. Therefore, our search for a Permanent Pastor will not commence until after the first of next year. An announcement to this effect will be disemminated prior to the selection opening period. Applications previously submitted will be considered.</p>
</aside>
<footer>
    <p>© Copyright 2014 Strangers Rest Baptist Church </p>
</footer>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Use CSS Floats.
http://css-tricks.com/all-about-floats/
Nancy O.

Navigation menu active page color not behaving as it should

I created an unordered list for the mainnav links. I use the following lines in the code:
<li><a href="../index.html" class="thispage">Home</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Agenda</a></li>
        <li><a href="../Pages/artists.html">Artists</a></li>
The Home button shows the color for 'active', but if I go to the artists page it first shows the hover color, then the page opens but does not show the active color.... I.o.w. the Home button stays on active though it is not active.
Please see the effect on my testsite: www.adrianrooymans.nl

armona22 wrote:
I'm sorry, but I tried that already, and it does not solve the problem. If I do that I get TWO active pages, but clicking anywhere on the artists page makes the blue color go away, except for the Home button.... I could temporarily put that on the testserver so that you could see what happens (unless you beleive me).
You will get two active menu items unless the class is removed from the links that you don't want it on.
If you look at the example page code in the 'completed' folder of the Bayside Beat tutorial you will see on the 'index' page the class has been added to the 'index' link:
<nav id="mainnav">
      <ul>
        <li><a href="index.html" class="thispage">Home</a></li>
        <li><a href="sightseeing.html">Sightseeing</a></li>
        <li><a href="#">Eating Out</a></li>
        <li><a href="#">What's On</a></li>
        <li><a href="#">Where to Stay</a></li>
      </ul>
    </nav>
Whilst on the 'sightseeing' page the class has been moved to the 'sightseeing' link:
<nav id="mainnav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="sightseeing.html" class="thispage">Sightseeing</a></li>
            <li><a href="#">Eating Out</a></li>
            <li><a href="#">What's On</a></li>
            <li><a href="#">Where to Stay</a></li>
        </ul>
    </nav>

"Server-side includes" equivalent in DW CC

I am a long-time HTML coder, having been hand-writing HTML since the days of Mosaic. However, I am a complete newbie with DreamWeaver CC. I have gone through the entire "Bayside Beat" tutorial.
I am used to using "server-side includes" to include common sections of code on all of my pages. For example, I include this at the top of every body:

and this at the end:

Following along with the "Bayside Beat" tutorial, I see how to copy those sections from one page to another. However, what happens if I need to make a change in one of those sections?
For example, if I were to add a 6th page, I would need to edit the menu, and then manually propogate that change to every page. Or, next year, when I want to change the copyright to "2014", I again need to manually edit every page.
Is there any way to say "this section is to be identical on every page that includes it, and automatically propogate any changes to all of those pages"?

I can't remember when Adobe loused this up. Probably in DW CS6.
My workaround is to create my own SSI code in my Custom Snippets folder. I have one for .shtml/.asp pages and another for .php pages. One click inserts the code.

<?php require_once('includes/my-include-file.php'); ?>
Once inserted, click on the include statement in code view and you'll see a small properties box where you can browse to the actual file or Edit the include file. It takes a lot longer to explain than it does to do it. Bottom line, it's quick and you don't need any 3rd party extensions.
Nancy O.

Images on sightseeing.html won't align with the column margins.

All six parts of the Bayside Beat tutorial were great!!! The only problem I had was the images on the sightseeing.html page won't align with the column margins. They won't move all the way to the left or right. In design view they align with the margins correctly, but in Live view mode or when viewed in a browser there is a space between the margin and the images. The space is constant and doesn't vary with the width of the browser.
I unzipped the final version of the site to a new folder. I viewed it in Chrome and in Explorer 11 and the images still won't align with the margins. I'm using window 8.1 and DW CC6.
It's not a big deal, because I learned many things from the tutoral, but I still would like to know what I'm doing wrong.
Thanks for any help.
Design View
Live View

Glad you enjoyed the tutorial videos.
Just looking at the screenshot of Live view, I would say that the problem is you haven't set the left margin in the floatleft class to zero. The image is wrapped in a <figure> element. Most browsers add a default 40px left margin to <figure>. Setting the margin to zero in a class overrides the default.

Where is the titlefield now

I updated my dreamweaver cc - but where is my titlefield now? And are there any tutorials about the updated version?

It has been moved to the Property inspector, which is displayed by default only in the Design workspace.
There are links to tutorials about the new features in Dreamweaver CC 2014 in Dreamweaver Help | New features summary. I'm not sure when the Bayside Beat tutorial will be updated.

Can't find Part 4 of CC version of David Powers tutorial - help?

Was happily working away in the David Powers tutorial for Dreamweaver CC. Got through Parts 1 through 3, and started 4. Bookmarked part 4 on my browser. Came back to it this morning, and now that same URL is showing me the CS6 version of the training, which is completely different content. I can not find the URL for Part 4 of the CC version of this training any more... Help?
(Note the header indicates Dreamweaver CC, but the body of instruction indicates CS6, and the fictional project being built is "Check Magazine" instead of the "Bayside Beat" project of the CC training...)
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt4.html

Hi,
Thanks for the heads up!
I'm noticing the link is incorrect for part 4. I'll check with our documentation team to sort this out.
Once I get more details I'll update you once corrected.
Kind regrards,
-Sidney

Bayside Screenshot

David,
This screenshot got me thinking....
How can we get images to be 100% browser width?
How can we get the navigation and header on top of an image? Are the steps similar to the bonus video?
Thank you for your time and help with these issues!

You can make an image 100% of the browser width by removing the width and height attributes from the <img> tag, and giving the image a class that sets the width property to 100%.
In the HTML:
<div><img src="images/morro1.jpg" alt="Morro Rock" class="wideimg"/></div>
In the style sheet:
.wideimg {
    width: 100%
The image will fill the full width of its parent element (in this case, a div). If the parent element is the full width of the browser window, the image will be too. The problem with this is that the image could become badly blurred on a large screen.
Another way of making a image fill the width of the browser window is to use a background image, and set the background-size CSS property to cover.
#mydiv {
    background-image: url(images/morro1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
Again, the problem is that the image might become blurred if it's not big enough. The other issue is that background images don't control the height of the element they're applied to. If there's only a small amount of content in the div, the background image will cover the full width, but it won't expand the height of the div. You could apply a min-height value to the div, but you have no way of knowing (without using JavaScript) how wide the browser window will be. One other consideration: background-size is not supported by Internet Explorer 8 and earlier.
As for the screenshot, I don't know how it was created. When I was commissioned to create the video tutorial, I created the text, images, and design for the Bayside Beat case study. Adobe decided it wanted some changes, so another designer sent me a composite of the revised design, which is what I created in the tutorial. I suspect that the screenshot of the sky extending behind the title and navigation bar was probably one of the ideas the other designer was experimenting with, and it somehow ended up in the tutorial web page. I quite like the effect of the sky going behind the title and navigation bar. The problem is that it won't work on other pages.
From the technical viewpoint, if the image is in the HTML, you would position the navigation menu over it using the same technique as in the bonus video.

Bayside Beat tutorial

Similar Messages

Maybe you are looking for