There are a variety of Web Page Layouts and Menu options:

MENUS

Once you have learned to create 1 HTML page - you want a way to create links/Menu for the other pages. W3schools.com has lots of great tutorials. They can be found in the top-navigation HowTO under MENU on the Left-Nav.

https://www.w3schools.com/howto

Responsive TopNav - Horizontal navigation becomes ||| 3 bar when screen narrows https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

which does not have a dropdown

if we combine it with the dropdown example https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp that isn't responsive

We get a Responsive TopNav with Dropdown:

Responsive Header - Puts logo and menu on the same horizontal bar https://www.w3schools.com/howto/howto_css_responsive_header.asp as the screen narrows then menu becomes vertical

But don't stop there - scroll down the Left-Navigation for tons of other HowTo's

PHP makes Headers & Footers consistant

Menu's can create redundant code

use PHP Includes to solve this

.php file

<!-- By renaming this file to .php instead of .html you can run PHP code -->

<?php include 'menu-JilMac.html'; ?>

<!-- The new menu-Jilmac.html file can be created by using the EXACT lines of code in the program to reduce redundancy -->

<!-- <div class="sidenav">

<ul>

<li><a href="Homes.html">Homes</a></li>

<li><a href="Furniture.html">Furniture</a></li>

<li><a href="deck.html">Deck/Patio</a></li>

<li><a href="">Siding</a></li>

<li><a href="Event+Map.html">Reviews</a></li>

<li><a href="reviewus.html">Review Us</a></li>

</ul>

</div>

-->

menu-JilMac.html

<div class="sidenav">

<ul>

<li><a href="Homes.html">Homes</a></li>

<li><a href="Furniture.html">Furniture</a></li>

<li><a href="deck.html">Deck/Patio</a></li>

<li><a href="">Siding</a></li>

<li><a href="Event+Map.html">Reviews</a></li>

<li><a href="reviewus.html">Review Us</a></li>

</ul>

• • JilMac reviews & demonstrates several types of Menus that students can use to set up their Web-Page (this is a CIS-1151 Web Dev Refresher)

• • These are the Menus from the video: http://jam08260.classweb.ccv.edu/WebDev/Menu/ This ZIP file contains the Menu used in the Adv-WebDev class: http://jam08260.classweb.ccv.edu/AdvWD/Assign02/AdvWebDev-Menu.zip

  • You can use any of the Menu systems demonstrated or another for your index page. I want you to organize the assignments on a separate page each. The LINK to this page - is all you need to post to Canvas. Unless you have a question or comment. I want all your work to reside on your WebSite. Canvas is for the school - once the class is OVER - you no longer have access to your work. With a website you will have access as long as you are at CCV, plus you can easily zip and download the site. Put your work for Assign01 on an Assig01 page, put your work for Assign02 on an Assign02 page on ClassWeb. And each Assignment after this. This is taking everything you learned from Web Development and moving it to Adv Web Development. Plus you will be adding new PHP & MySQL knowledge. It will take time - be patient with yourself. If you get stuck CALL - we can walk through it together. The faster you learn to ASK questions and APPLY the answer - the faster you progress.

    • Do these PHP Tutorials: Select 3 code examples for your Before & After examples to upload to ClassWeb & display on your Assign02 webpage

      • Variables https://www.w3schools.com/php/php_variables.asp

      • Echo/Print https://www.w3schools.com/php/php_echo_print.asp

      • Data Types https://www.w3schools.com/php/php_datatypes.asp

      • Strings https://www.w3schools.com/php/php_string.asp

      • Constants https://www.w3schools.com/php/php_constants.asp

      • Operators https://www.w3schools.com/php/php_operators.asp

Helpful HINT about ELFileManager: Your can change the THEME in the ELFileManager that may make it work better on Mac Computers (Hint from a Student). Or even Windows. CONFIG button top left chose a different theme ie Moono theme and refresh our page I was able to delete files using an icon on the windows tool bar without right clicking. Then I could set it back to the default theme. Right clicking was making additional copies of files so there ended up being a mess of files in the folders on the sentora server instead of the few that we need for an assignment. It has been overly annoying and this solved it.

Wireframing is NOT just for Apps -

it is a great way to get consensus on a Website before you do all the coding

https://artjoker.net/blog/why-is-wireframing-mobile-apps-important

Social Media links are very important