Skip to main content
M
markf26988182
Known Participant
May 21, 2018
Answered

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

  • May 21, 2018
  • 2 replies
  • 846 views

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

This topic has been closed for replies.
Correct answer BenPleysier

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>

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
May 22, 2018

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

Tryit Editor v3.5

Nancy O'Shea— Product User & Community Expert
M
markf26988182Author
Known Participant
May 22, 2018

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] 

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
May 23, 2018

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.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
May 22, 2018

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>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
M
markf26988182Author
Known Participant
May 22, 2018

thanx!

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices