7 Replies Latest reply on Jul 3, 2013 1:16 AM by David_Powers

    Bayside Beat Tutorial--Paragraph Has No <p> Tags

    WCarp Level 1

      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.

        • 1. Re: Bayside Beat Tutorial--Paragraph Has No <p> Tags
          David_Powers Adobe Community Professional (Moderator)

          If the <p> tags are missing, click anywhere inside that line of text in Design view, and select Paragraph from the Format menu on the left of the Property inspector.

           

          paragraph.jpg

          Dreamweaver does a pretty good job of creating the HTML when you use Paste Special, but the formatting isn't always preserved perfectly. This can often happen if there's no (hidden) return character at the end of a line when copying from Word. That's why I recommend keeping Split view open when adding HTML content to a page. It helps you ensure that elements are being inserted in the correct place. You can also see if text hasn't been wrapped in <p> tags.

          • 2. Re: Bayside Beat Tutorial--Paragraph Has No <p> Tags
            WCarp Level 1

            I checked the content.rtf file and there is a paragraph symbol immediately before the paragragh and immediately after it with no space--just like the other paragraphs which were converted properly. So this would mean that Dreamweaver did not properly convert the text from Word to HTML just for the last paragraph, for some reason.

            • 3. Re: Bayside Beat Tutorial--Paragraph Has No <p> Tags
              David_Powers Adobe Community Professional (Moderator)

              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.

              • 4. Re: Bayside Beat Tutorial--Paragraph Has No <p> Tags
                WCarp Level 1

                Ok. When I selected the text, I selected all that was visable, including the period at the end of the paragraph while the option to show paragraph symbols and hidden formatting symbols was set to hide, so I could not see the paragraph code. If it is possible to copy and paste-special, without including all the codes, then a person would have to select the option in Word to show the codes before copying the text so this problem doesn't occur.

                • 5. Re: Bayside Beat Tutorial--Paragraph Has No <p> Tags
                  David_Powers Adobe Community Professional (Moderator)

                  There is a difference in perceptions here. You regard this as a problem. I regard it as a fact of life.

                   

                  When you copy and paste from an external source, Dreamweaver generates HTML based on the data it receives. If the external text source is badly formatted, or if a hidden formatting symbol isn't selected, you need to clean up the formatting in Dreamweaver. While this adds extra work, it's much quicker than importing plain text and having to reformat everything from scratch.

                   

                  To avoid the problem of the last paragraph not being wrapping in <p> tags, I could have added an extra line at the bottom of the file. But that might have resulted in an empty paragraph being created, which would have been another problem.

                   

                  In real life, text documents are often badly formatted. It's the web designer's job to make sure the final formatting is correct. Dreamweaver provides the tools for you to do that. Click anywhere inside the line that isn't wrapped in <p> tags, and set the Format menu in the Property inspector to Paragraph.

                  • 6. Re: Bayside Beat Tutorial--Paragraph Has No <p> Tags
                    WCarp Level 1

                    When a person is following a tutorial or some instructions, it is expected that things work as the instructor says and or shows--if it doesn't, then something is wrong. Since Dreamweaver does not necessarily format Word documents correctly when cutting and pasting if the paragraph symbols are hidden, then in the tutorial, it needs to be mentioned that the option to show paragraph symbols and hidden formatting symbols should be turned on and to try to copy the paragraph symbols also. I suggest also that you add to the tutorial what you mentioned above to "Click anywhere inside the line that isn't wrapped in <p> tags, and set the Format menu in the Property inspector to Paragraph." Doing these things will help make learning Dreamweaver a better, less frustrating experience.

                    • 7. Re: Bayside Beat Tutorial--Paragraph Has No <p> Tags
                      David_Powers Adobe Community Professional (Moderator)

                      Fair point, but it's very difficult to predict where problems might occur. That's why Adobe has provided this forum: to provide answers to issues not covered by the videos. A tutorial that tries to mention every single issue would be much longer and potentially more frustrating if it mentions issues that don't arise.

                       

                      You'll also find a more in-depth description of how the Bayside Beat website was built in the six-part tutorial series I have written. You can find part 1 here: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.edu.html.