Highlighted

A little worried :) Dreamweaver cc

Enthusiast ,
Nov 27, 2017

Copy link to clipboard

Copied

I am going to design a landing page for our e learning portal. I have experience designing websites, however, I have not designed one in a few years. And I worked primarily in tables not divs.

Since it's just one page I'm not too worried. However, my knowledge of java-script is extremely limited.

So wish me luck as I use Dreamweaver cc to make a masterpiece out of HTML, CSS, Java-Script and the rest.

Oh yeah, and I would appreciate any rah rahs and words of encouragement and advice.

Views

257

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

A little worried :) Dreamweaver cc

Enthusiast ,
Nov 27, 2017

Copy link to clipboard

Copied

I am going to design a landing page for our e learning portal. I have experience designing websites, however, I have not designed one in a few years. And I worked primarily in tables not divs.

Since it's just one page I'm not too worried. However, my knowledge of java-script is extremely limited.

So wish me luck as I use Dreamweaver cc to make a masterpiece out of HTML, CSS, Java-Script and the rest.

Oh yeah, and I would appreciate any rah rahs and words of encouragement and advice.

Views

258

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
Nov 27, 2017 0
LEGEND ,
Nov 27, 2017

Copy link to clipboard

Copied

My advice is that if you are worried about javascript, then do not use it. Even animations can now be done using css, (though i would not recommend a beginner try doing so).

As for using tables, don't. Divs are o/k but html5 semantics are better.

The question is though, what do you wish to do, even a screen shot of a sketch with notes would enable us to advise you better, (though expect lots of disagreement about the 'how to').

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...
Nov 27, 2017 0
Adobe Community Professional ,
Nov 27, 2017

Copy link to clipboard

Copied

HTML = content

CSS = style

JavaScript = interactivity

What do you need JavaScript for?

Nancy O'Shea, ACP
Alt-Web.com

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...
Nov 27, 2017 0
Enthusiast ,
Nov 27, 2017

Copy link to clipboard

Copied

I might need JavaScript for things such a drop down menus.

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...
Nov 27, 2017 0
LEGEND ,
Nov 27, 2017

Copy link to clipboard

Copied

AnotherMe  wrote

I might need JavaScript for things such a drop down menus.

Not required, even making the menu fade-in/out, or bounce, can now be done with css animations.

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...
Nov 27, 2017 0
Adobe Community Professional ,
Nov 27, 2017

Copy link to clipboard

Copied

Dropdown menus are not used much anymore because mobile devices don't have a mouse.  But if you really need one, you can do it simply with Bootstrap dropdown classes.  No custom JS or jQuery needed.

Copy & paste into a new, blank document.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

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

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

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

body {padding-top:75px}

.center-block {float:none}

</style>

</head>

<body>

<!--begin top nav bar with dropdown-->

<nav class="navbar navbar-default navbar-fixed-top">

<div class="container-fluid">

<div class="navbar-header"> <a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

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

<ul class="nav navbar-nav navbar-right">

<li class="active"><a href="#">MENU 1</a></li>

<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">submenu 1-1</a></li>

<li><a href="#">submenu 1-2</a></li>

<li><a href="#">submenu 1-3</a></li>

</ul>

</li>

<li><a href="#">MENU 3</a></li>

<li><a href="#">MENU 4</a> </li>

<li><a href="#">MENU 5</a> </li>

<li><a href="#">MENU 6</a></li>

</ul>

</div>

</div>

<!--/top nav--> </nav>

<div class="container">

<div class="row">

<div class="col-md-10 center-block">

<h3>PAGE CONTENT GOES HERE...</h3>

<!--/col--></div>

<!--/row--></div>

<!--/container--></div>

<!--latest jQuery JS-->

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

<!--Latest Bootstrap JS-->

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

</body>

</html>

Nancy O'Shea, ACP
Alt-Web.com

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...
Nov 27, 2017 1
Enthusiast ,
Nov 28, 2017

Copy link to clipboard

Copied

@Nancy OShea that' s very good point.

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...
Nov 28, 2017 0
Enthusiast ,
Nov 27, 2017

Copy link to clipboard

Copied

The first thing I should do is create a outline with divs correct?

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...
Nov 27, 2017 0
LEGEND ,
Nov 27, 2017

Copy link to clipboard

Copied

AnotherMe  wrote

The first thing I should do is create a outline with divs correct?

It depends.

If you wish your site to have the built in accessibility feature of html5, then you should outline your sites structure, complete with the relationship between the parts of the page, e.g.-

If you are showing different sections to the offered e-learning tutorials, then each one could be a seperate section of the home page, each section could be a complete 'self contained' section with its own articles, headings or even menu and footers if you wish.

(don't confuse the use of section above with the html5 semantic element by the same name).

Html and css has moved on dramatically since table layouts were used, try reading selected parts of -

https://developer.mozilla.org/en-US/docs/Learn

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...
Nov 27, 2017 0