Highlighted

Need to convert DW 2004 Static Site to CC 2018 'Responsive' Site

New Here ,
May 21, 2018

Copy link to clipboard

Copied

OK...

Was using Pinegrow Pro for a bit...just downloaded Dreamweaver CC 2018; & it looks like it's way better suited to my design methods (especially since I cut my teeth in Macromedia DW 2004).  So...a real nice lady/coding genius from the Adobe forum (as I had also tried Muse) hooked me up w/ a bootstrap template, which I've been somewhat successful in customizing.  The site I'm designing (from that template) is here:

NEW 'RESPONSIVE' SITE

On that home page...the MEETINGS link (from my old, DW 2004 designed site)...had a dropdown list w/ all the days in the week...which when clicked, opened up a 'Meetings List' page, displaying the selected day's meetings.  Once at that page, the user could then select any other day...which would display that selected day's meetings....try it for yourself...at the original, DW 2004 created site:

ORIGINAL 'NON-RESPONSIVE' SITE

What I am very much hoping to do is:
1) Redesign the new home page's 'Meetings' link to have that same type of dropdown menu...which leads to...

2) A redesigned 'Meetings List' page that looks somewhat similar; & functions the same way...but is coded to contemporary responsive design protocol (like the new home page)

any ideas...???...thanx,

mark4man

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

1. Have a look at the dropdown menu item in http://getbootstrap.com/docs/4.1/components/navbar/​. The hover effect in the original website, will not work for touch screen devices. Bootstrap uses an on-click event instead of the hover event. When the item is touched on a touch screen, a single (short) touch will expose the dropdown.

2. A link will take you to the relevant Events page. e.g. <a class="dropdown-item" href="monday.html">Monday</a>

TOPICS
Learn Dreamweaver

Views

486

Likes

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

Need to convert DW 2004 Static Site to CC 2018 'Responsive' Site

New Here ,
May 21, 2018

Copy link to clipboard

Copied

OK...

Was using Pinegrow Pro for a bit...just downloaded Dreamweaver CC 2018; & it looks like it's way better suited to my design methods (especially since I cut my teeth in Macromedia DW 2004).  So...a real nice lady/coding genius from the Adobe forum (as I had also tried Muse) hooked me up w/ a bootstrap template, which I've been somewhat successful in customizing.  The site I'm designing (from that template) is here:

NEW 'RESPONSIVE' SITE

On that home page...the MEETINGS link (from my old, DW 2004 designed site)...had a dropdown list w/ all the days in the week...which when clicked, opened up a 'Meetings List' page, displaying the selected day's meetings.  Once at that page, the user could then select any other day...which would display that selected day's meetings....try it for yourself...at the original, DW 2004 created site:

ORIGINAL 'NON-RESPONSIVE' SITE

What I am very much hoping to do is:
1) Redesign the new home page's 'Meetings' link to have that same type of dropdown menu...which leads to...

2) A redesigned 'Meetings List' page that looks somewhat similar; & functions the same way...but is coded to contemporary responsive design protocol (like the new home page)

any ideas...???...thanx,

mark4man

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

1. Have a look at the dropdown menu item in http://getbootstrap.com/docs/4.1/components/navbar/​. The hover effect in the original website, will not work for touch screen devices. Bootstrap uses an on-click event instead of the hover event. When the item is touched on a touch screen, a single (short) touch will expose the dropdown.

2. A link will take you to the relevant Events page. e.g. <a class="dropdown-item" href="monday.html">Monday</a>

TOPICS
Learn Dreamweaver

Views

487

Likes

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
May 21, 2018 0
Adobe Community Professional ,
May 21, 2018

Copy link to clipboard

Copied

1. Have a look at the dropdown menu item in http://getbootstrap.com/docs/4.1/components/navbar/​. The hover effect in the original website, will not work for touch screen devices. Bootstrap uses an on-click event instead of the hover event. When the item is touched on a touch screen, a single (short) touch will expose the dropdown.

2. A link will take you to the relevant Events page. e.g. <a class="dropdown-item" href="monday.html">Monday</a>


Ben

Likes

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
Reply
Loading...
May 21, 2018 0
New Here ,
May 22, 2018

Copy link to clipboard

Copied

thanx!

Likes

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
Reply
Loading...
May 22, 2018 0
Adobe Community Professional ,
May 22, 2018

Copy link to clipboard

Copied

It looks like your current website uses Dynamic Tabbed Panels for the meetings calendar.

Tryit Editor v3.5

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
May 22, 2018 0
New Here ,
May 22, 2018

Copy link to clipboard

Copied

Nancy...

It was the template you provided that I used to get started down the road to site rebuild (see link for NEW 'RESPONSIVE' SITE)...& thanx again a million times over for that (btw...did you code that?...it's really fine).  Anyhow...that's working out very well in terms of design changes (& I'm sure I'll need some coaching on specific easier functions, as noted in this post)...but could you please point me to a template that looks similar to the 'MEETINGS SCHEDULE' page from my 2nd link (ORIGINAL 'NON-RESPONSIVE' SITE)...???  Our site is basically very simple...the home page...& 6 other pages that look almost identical to that meetings schedule page.  So, if I had a template for that page, I could then use that to recode all the pages at the site...& be more or less home free.  I know this is asking  a lot; & will be most appreciative for anything to help.

thanx...lemme know,

mark4man

UPDATE: Just so you guys don't think me the lazy type...I've actually been working on my own on this...found a bootstrap 4 template in DW...& this is what I have thus far:

Burlington County Area of NA / MEETINGS SCHEDULE

[can't seem to figure out how to move the two images & text closer to the top, tho (along w/ reducing the height of the jumbotron div).  would also like to have it be the same color & transparency as the bluish header on the new home page...but am lost at the moment there, as well] 

Likes

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
Reply
Loading...
May 22, 2018 0
Adobe Community Professional ,
May 22, 2018

Copy link to clipboard

Copied

For the Jumbotron, try the following

<div class="container mt-2 jumbotron">

  <div class="row">

    <div class="col-md-3 text-center">

      <img src="http://www.moonjams.net/John-Woolman-House-II.gif" class="img-fluid" alt="logo" width="300" height="233">

    </div>

    <div class="col-md-6 text-center">

      <h1>Burlington County Area of NA</h1>

      <h2 class="h1">MEETINGS SCHEDULE</h2>

      <p>CLICK HERE for a PDF of the MEETING DIRECTORY</p>

    </div>

    <div class="col-md-3 text-center">

      <img src="http://www.moonjams.net/NA-Logo_CentIND-11.gif" class="img-fluid" alt="logo" width="185" height="185">

    </div>

  </div>

</div>

This is a quick mock-up to give you an idea. You will need to adjust the column widths for the different screen sizes.


Ben

Likes

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
Reply
Loading...
May 22, 2018 1
Adobe Community Professional ,
May 23, 2018

Copy link to clipboard

Copied

This is how I would do navigation to Tabbed Panels on the same page.  When linking from other pages, you must change the URL to meetings.html#mon, meetings.html#tues, etc....

Copy & paste this into a NEW, BLANK document.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 4 -  Meetings</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap 4 CSS-->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-<DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<style>

body { padding-top: 100px; }

.jumbotron {

    margin: 0;

    padding: 0;

    background: url(http://www.moonjams.net/SAM_5626-II.jpg) no-repeat center center;

    background-size: cover;

}

header .container {

    background-color: rgba(0,0,0,0.4);

    padding-top: 2rem;

}

.nav-tabs { font-size: 0.8rem }

i { font-size: 2.5rem }

</style>

</head>

<body>

<!--responsive navbar-->

<nav class="navbar navbar-dark navbar-expand-lg bg-dark justify-content-center fixed-top"> <a class="navbar-brand" title="Burlington County Area of Narcotics Anonymous" href="#"><img src="http://www.moonjams.net/John-Woolman-House-II.gif" class="img-fluid" alt="logo" width="100" height="78"> <img src="http://www.moonjams.net/NA-Logo_CentIND-11.gif" class="img-fluid" alt="logo" width="78" height="78"> </a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

<div class="collapse navbar-collapse" id="navbarsExampleDefault">

<ul class="navbar-nav ml-auto">

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Meetings </a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<a class="dropdown-item" href="#sun" data-toggle="tab">Sunday</a>

<a class="dropdown-item" href="#mon" data-toggle="tab">Monday</a>

<a class="dropdown-item" href="#tues" data-toggle="tab">Tuesday</a>

<a class="dropdown-item" href="#wed" data-toggle="tab">Wednesday</a>

<a class="dropdown-item" href="#thurs" data-toggle="tab">Thursday</a>

<a class="dropdown-item" href="#fri" data-toggle="tab">Friday</a>

<a class="dropdown-item" href="#sat" data-toggle="tab">Saturday</a>

</div>

</li>

<li class="nav-item"><a class="nav-link" href="#">Committees</a></li>

<li class="nav-item"><a class="nav-link" href="#">Events</a></li>

<li class="nav-item"><a class="nav-link" href="#">Menu4</a></li>

<li class="nav-item"><a class="nav-link" href="#">Menu5</a></li>

</ul>

</div>

</nav>

<header class="jumbotron text-light">

<div class="container text-center rounded">

<div class="row">

<div class="col-md-8 mx-auto text-center">

<h1>Burlington County Area of NA</h1>

<h2 class="display-4">Meetings Schedule</h2>

<p><a class="btn btn-lg btn-light" href="link-to-PDF-file"  title="Download Meetings on PDF (file size KB)"><i class="fas fa-file-pdf"></i> Download PDF</a></p>

</div>

</div>

</div>

</header>

<div class="container">

<div class="row">

<div class="col mx-auto">

<!-- Nav Tabs -->

<ul class="nav nav-tabs nav-justified">

<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#sun">SUNDAY</a></li>

<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#mon">MONDAY</a> </li>

<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tues">TUESDAY</a> </li>

<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#wed">WEDNESDAY</a> </li>

<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#thurs">THURSDAY</a></li>

<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#fri">FRIDAY</a></li>

<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#sat">SATURDAY</a></li>

</ul>

<!-- Tab panels -->

<div class="tab-content mx-auto">

<div class="tab-pane container active" id="sun">

<h3>Sunday Meetings</h3>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

</div>

<div class="tab-pane container fade" id="mon">

<h3>Monday Meetings</h3>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

</div>

<div class="tab-pane container fade" id="tues">

<h3>Tuesday Meetings</h3>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

</div>

<div class="tab-pane container fade mx-auto" id="wed">

<h3>Wednesday Meetings</h3>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

</div>

<div class="tab-pane container fade" id="thurs">

<h3>Thursday Meetings</h3>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

</div>

<div class="tab-pane container fade" id="fri">

<h3>Friday Meetings</h3>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

</div>

<div class="tab-pane container fade" id="sat">

<h3>Saturday Meetings</h3>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

<dl>

<dt>Title</dt>

<dd>Details</dd>

</dl>

</div>

</div>

<!--/Tab Panels-->

</div>

</div>

</div>

<!--footer-->

<footer class="container-fluid bg-dark">

<div class="row">

<div class="col text-center text-light">

<p>&copy; Company Name 2017-2018</p>

</div>

</div>

</footer>

<!--latest jQuery Core-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--latest Bootstrap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
May 23, 2018 1
New Here ,
May 23, 2018

Copy link to clipboard

Copied

Good God, lady...!!!...you are really something.  You do not know how much you have helped me...& by proxy...helped our local area.  I (& they) are extremely grateful.  W/ those two templates, I'll be able to work my way through a complete site rebuild...& LEARN in the process! (which I already am...also w/ the help of DW CC).  & I have to say...I believe DW CC to be a better web authoring app than Pinegrow Pro (or Muse, for that matter).  & I don't even think it's because I worked in it prior...it just seems more intuitive, to me.

thanx again...very, very much,

mark4man

Likes

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
Reply
Loading...
May 23, 2018 0
New Here ,
May 23, 2018

Copy link to clipboard

Copied

Thanx, Ben!

Likes

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
Reply
Loading...
May 23, 2018 0