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

Dreamweaver CS5で作ったサイトをbootstrapを使ってレスポンシブにしたい

Community Beginner ,
Jan 21, 2022 Jan 21, 2022

Copy link to clipboard

Copied

こんにちは。13年ほど前にDreamweaver CS5で作ったサイトがあります。このサイトをbootstrapテンプレートを使ってレスポンシブ対応にしたいのですが、可能かどうか情報探していたのですが、わかりません。

 

ページ数が750ページほどあるので、最初から作り変えるのは困難です。方法があればご教授いただければ幸いです。

 

ちなみにCSSは当時、フリーのCSSをいただいて作成しております。よろしくお願いいたします。

Views

159

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 ,
Jan 21, 2022 Jan 21, 2022

Copy link to clipboard

Copied

Assuming that you will be using a more up to date IDE, you are left with one major problem; 750 pages.

 

If I were to work on that site, I would use Wappler and I would make the site

  1. use a master template system - NodeJS/Express - see: https://youtu.be/ee4iwQpUQ2U
  2. database driven - SQLite - see: https://youtu.be/SwxSasKTUeY
Wappler, the only real Dreamweaver alternative.

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 Beginner ,
Jan 22, 2022 Jan 22, 2022

Copy link to clipboard

Copied

LATEST

レスポンシブ対応ページを作るのは難しそうですね。別の方法考えます。ありがとうございます。

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 ,
Jan 22, 2022 Jan 22, 2022

Copy link to clipboard

Copied

There is no magic button for converting a 13 year old site to responsive with Bootstrap, or any other responsive framework.  Your HTML code will need to be re-written to work with Bootstrap's built-in classes.  And you may need to re-think how content will be accessed from Smartphones and Tablets.

 

As an example, this is a basic Bootstrap 5 starter page with minimal structure of "container," "row" and "col" <div> tags. 

 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest minified CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!--latest minified JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
<!--navbar-->
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col-sm-4 mx-auto">

<!--SVG STOP SIGN-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
  <text x="50" y="63" font-size="32" fill="#FFF" text-anchor="middle"><![CDATA[やめる]]></text>
  <text x="50" y="80" font-size="10" fill="#FFF" text-anchor="middle"><![CDATA[STOP]]></text>
</svg>
</div>
</div>

<div class="row">
<div class="col-md-10 mx-auto">

<h3 class="mt-3">Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
</div>
</div>
<footer class="container-fluid">
<div class="row bg-dark text-light text-center">
<div class="col-md-4">
<p>Footer text</p>
</div>
<div class="col-md-4">
<p>Footer text</p>
</div>
<div class="col-md-4">
<p>Footer text</p>
</div>
</div>
</footer>
</body>
</html>

 

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
Community Beginner ,
Jan 22, 2022 Jan 22, 2022

Copy link to clipboard

Copied

大変参考になりました。ありがとうございます。

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