Member Avatar for tactfulsaint

hello Everyone I am new into web design and i need to learn how to develop web application using dreamwaver, any tutorial on dream waver and what is css(what is it used for and why is it needed).

how to make popups.

  • 5 Contributors
  • 6 Replies
  • 103 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by rexibit

Dani AI

Generated

A compact, hands-on plan to learn Dreamweaver and implement popups without random copy/paste: build a single-page “card” (title, paragraph, button) and add one of these popup patterns. That gives practice with editing HTML, connecting an external CSS file, and placing a tiny JS file — all things , and point toward but without a concrete example. Type the files yourself in Dreamweaver, preview in a real browser, then inspect the console if something breaks.

New browser window (easy, but often blocked by browsers):

<button id="open">Open popup window</button>

<script>
document.getElementById('open').addEventListener('click', function(){
  window.open('popup.html','popup','width=500,height=400');
});
</script>

Better UX: in-page modal or native dialog. Modern option using the HTML5 <dialog> element (works in most modern browsers; polyfill optional):

<button id="show">Show info</button>

<dialog id="dlg">
  <p>Popup content here.</p>
  <button id="close">Close</button>
</dialog>

<script>
const d = document.getElementById('dlg');
document.getElementById('show').onclick = () => d.showModal();
document.getElementById('close').onclick = () => d.close();
</script>

If you want styled, battle-tested components, use Bootstrap’s modal (data attributes or JS). See the Bootstrap modal docs for the exact markup and JS usage: Bootstrap modal docs. For accessibility patterns (focus trap, ESC-to-close, aria roles), follow WAI-ARIA examples: WAI-ARIA dialog example.

Quick troubleshooting: if nothing appears, check browser console and script paths, confirm scripts run after DOM load, and remember that window.open can be blocked. For best results, prefer in-page modals for mobile and accessibility, test in multiple browsers, and keep markup tidy by finalizing in Dreamweaver’s Code view.

Recommended Answers

All 6 Replies

Member Avatar for Shanti C

you just copy and paste the examples from w3schools and any other and then run then in IE or firefox,then you will get the output...
and try to edit the code in which way you want...
read the materials about html and css...
www.w3schools.com is best for begginners...

Member Avatar for peter_budo

you just copy and paste the examples from w3schools

Copy & paste is not a way to learn for begginer. Always, always re-type the code. It doesn't matter if it is html, css, Java, C++ or any other. By typing it, you pay more attention what is happening inside the code, you built up on already existing knowledge by adding new blocks...

commented: Completely agree with you. Very good advice. +3
Member Avatar for tactfulsaint

Thanks Shanti Chepuru i think you have a point anyway thanks so much for the advise..

Member Avatar for Shanti C

welcome tactfulsaint....

Member Avatar for rexibit

There are some great tutorials on the Internet about how to use Dreamweaver. The thing you should remember is that Dreamweaver is only an application for building web pages. It is not a language in itself.

You must first learn XHTML and CSS, then use the application to build pages. Dreamweaver is great on highlighting code to make it easier to develop. It also has a fairly decent visual builder, but the code generated from that is unorganized. So, when you have a problem, you need to go to Code view and decipher it. This is why a decent understanding of programming in XHTML and CSS helps.

------------

What is CSS? it is a Cascading Style Sheet that allows you to apply presentation to ID and Classes. This way you only need to make a basic structure of your page in XHTML, then go to your style sheet to say how you want that code to look. It allows you to make changes quickly and in one place without having to go to every page and change the design.

In fact, it is so effective if done right, you can take the XHTML your developed for one site, add a new style sheet and the content is arrange to make an entirely new site that looks nothing like the original except for the content of the page.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.