• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Website changing appearance when previewing

New Here ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

Looks like this in dreamweaver

Kade33523366mhlv_0-1699610205328.pngKade33523366mhlv_1-1699610243883.pngKade33523366mhlv_2-1699610269421.png

But looks completely different in the real time preview

Kade33523366mhlv_3-1699610396637.pngKade33523366mhlv_4-1699610426138.pngKade33523366mhlv_5-1699610455219.png

All code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
<link href="file:///G|/games design/a1 - career focused/website/new website/css/bootstrap-4.4.1.css" rel="stylesheet">
 
  </head>
  <body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent1">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a> </div>
        </li>
        <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
 
  <div class="row">
    <div class="col-xl-4">
      <h5><strong>About Us</strong></h5>
<p>Enter Text Here&nbsp;</p>
    </div>
    <div class="col-xl-4"><img src="file:///G|/logo.svg" alt=""/></div>
    <div class="col-xl-4">
      <h5><strong>What We Represent</strong></h5>
Enter Text Here</div>
  </div>
  <div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color: grey">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active"> <img class="d-block mx-auto" src="images/Carousel_Placeholder.png" alt="First slide">
        <div class="carousel-caption">
          <h5>First slide Heading</h5>
          <p>First slide Caption</p>
            </div>
          </div>
      <div class="carousel-item"> <img class="d-block mx-auto" src="images/Carousel_Placeholder.png" alt="Second slide">
        <div class="carousel-caption">
          <h5>Second slide Heading</h5>
          <p>Second slide Caption</p>
            </div>
          </div>
      <div class="carousel-item"> <img class="d-block mx-auto" src="images/Carousel_Placeholder.png" alt="Third slide">
        <div class="carousel-caption">
          <h5>Third slide Heading</h5>
          <p>Third slide Caption</p>
            </div>
          </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
  <div class="row">
    <div class="col-xl-4"><img src="file:///g|/Placeholder Image.jpg" width="474" height="355" alt=""/><h6>Describe Image Above</h6><h4>Subject Title</h4>
      <div class="card col-md-4 col-xl-12">
        <div class="card-body">
          
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Page 2</a> </div>
      </div>
    </div>
    <div class="col-xl-4"><img src="file:///g|/Placeholder Image.jpg" width="474" height="355" alt=""/><h6>Describe Image Above</h6><h4>Subject Title</h4>
      <div class="card col-md-4 col-xl-12">
        <div class="card-body">
          
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Page 3</a> </div>
      </div>
    </div>
    <div class="col-xl-4"><img src="file:///g|/Placeholder Image.jpg" width="474" height="355" alt=""/><h6>Describe Image Above</h6><h4>Subject Title</h4>
      <div class="card col-md-4 col-xl-12">
        <div class="card-body">
          
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Page 4&nbsp;</a> </div>
  
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xl-4">
      <div class="card col-md-4 col-xl-12">
        <div class="card-header"> Image and Reference Sources&nbsp; </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Link 1</li>
          <li class="list-group-item">Link 2</li>
          <li class="list-group-item">Link 3</li>
            </ul>
          </div>
    </div>
    <div class="col-xl-4">
      <div class="card col-md-4 col-xl-12">
        <div class="card-header"> Social Media&nbsp; </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">"Facebook" link</li>
          <li class="list-group-item">"Instagram" Link&nbsp;</li>
          <li class="list-group-item">"X"Link</li>
        </ul>
      </div>
    </div>
    <div class="col-xl-4">
      <div class="card col-md-4 col-xl-12">
        <div class="card-header"> Contact Us At&nbsp; </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">CareerFocused123123123123@gmail.com&nbsp;</li>
          <li class="list-group-item">+14243141 079582748923&nbsp;</li>
          <li class="list-group-item">F13 7UP - 678 Flair Road&nbsp;</li>
            </ul>
          </div>
        &nbsp;</div>
  </div>
  <script src="file:///G|/games design/a1 - career focused/website/new website/js/jquery-3.4.1.min.js"></script>
 
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="file:///G|/games design/a1 - career focused/website/new website/js/popper.min.js"></script> 
  <script src="file:///G|/games design/a1 - career focused/website/new website/js/bootstrap-4.4.1.js"></script>
  </body>
</html>
TOPICS
Preview

Views

95

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

Looks like you may have forgotten to Define a Site as your first (very important) step.

The evidence is the link to your .CSS file, which is missing from your RTP view, starting with "file". It's an absolute link to a location on your computer. RTP uses Adobe's servers to preview your page in an iFrame, they don't have access to that kind of file path.

You'll need to use a document relative link to your .css file in order for RTP to (maybe) work, which DW will automatically do if you have a Site Definition set up correctly.

RTP is typically a very glitchy function however. You may like using the standard browser preview by going to Edit > Preferences > Real Time Preview > check the box at the top for Use Static Browser Preview.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2023 Nov 10, 2023

Copy link to clipboard

Copied

LATEST

All assets are pointing to your computer's G: drive.   That's the path contained in your code.  It won't work online like that.

Nobody can see those assets except you.

 

<link href="file:///G|/games design/a1 - career focused/website/new website/css/bootstrap-4.4.1.css" rel="stylesheet">

 

You'll need to define a local site folder on your primary hard drive.  Save with Ctrl + S to resolve paths.  Then upload assets to your remote server.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines