How can I create standard layout for multiple pages? [closed] - html

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Currently, I am working on my first web page using HTML and CSS. I want to use the same layout like background and header etc but I can't find a way. Today I found a couple of website telling about the template. Is this the related to what I want to do.
Thank you for helping a beginner.
Sam

I would recommend you a few things:
Find websites that make you feel as it is what you wanted to build.
Check their source code and try to find the semantics they have maintained.
Once you figured it out, you should try to create similar one.
You should follow HTML5 specifications , as it will help you build solid foundation. while doing this you will also understand best practices.
HTML or designing mostly depends on requirements. so you might not get one rule to follow, just invest time understanding some great works out there and practice alot.
In case you are very concern to layout, search for website layout images and you will get plenty of images having typical elements like header, navigation/menu, body (left/right sub menu + main content), footer.
You can consider templates for learning but it may lead you to trap of copying-pasting.

You can use Microsoft Expression Web application, which handles template. You make one page and save it as template and declare editable parts for sites. Then You can create multiple empty HTML pages. Finally you attach template, then it works.
Or if you can use PHP, you can create different parts of your Web Site, like: header.php, footer.php, banner.php and include them in every page where modifying the body and not writing the same footer, header, banner

Related

Simple website (HTML & CSS) - what is the best way to simplify subpages editing? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last month.
Improve this question
I'm trying to get back into HTML & CSS coding and learn JS. I found so many tutorials which are very helpful, now I would like to develop some simple websites. Many years ago the only way to make subpages (I hope it is a correct translation) was to use iframe or just copy whole content from homepage (so with need of editing every page to change ex. logo or footer). What is the best way to do it now?
Typing "HTML CSS webpage tutorial" in YT returns a lot of awesome results, but it gives me only the solution how to make a design, not a website with working menu etc.
What do you suggest? I prefer to work on separate files instead keeping all code in one "index.html".
Thank you in advance,
Happy New Year!!!
Regards, Mariusz
I have no solution yet.
Nowadays different frameworks are used for that purpose. If you don't want to use one, the easiest way would be to still use PHP and use its include method to load "subfiles" like header, footer, navigation sidebar and other content / website parts that are identical on all pages.
BTW, just a note aboute a detail in your question: The "ancient" method for this didn't use iframes, but frames – that's a big difference: iframes load external webpages, frames (as parts of framesets) load parts of the own website.

How do I create a website template using html and css? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Maybe I'm not using the correct terminology because I can't seem to find an appropriate answer. I have built a header and a footer using html and css. This will not change from page to page and so I want to make it the template and simply change the content in between the header and the footer for each page of my website. I know I could simply copy and paste the code but if I wanted to change the header for some reason I would then have to change the header on each of my pages! Super inefficient. Coding is all about reuse. surely there's a way to do what I'm saying. Help me web developers!
You could do one of many things:
Use PHP files and require() the headers and footers in the main page, though you'll have to use a server on your localhost to test the pages.
You could maybe take a look into creating single page applications, using AJAX.
AJAX Introduction here.
You could go a step further and pick one of the very popular JavaScript MVC frameworks.
Read more about them here.
Finally, you could also do it the "old way" and use iframes, but that is honestly bad practice and will bring more harm than good.

Responsive design using Dreamweaver and help to find another program than Dw [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I am using Dreamweaver, but now I am thinking about trying another program. I am kind of new to html and css, but I feel I have kind of control using html and css3. Now I am learning how to creative responsive webdesign using bootstrap.
Might be a stupid and simple question; When I want to create a new html page, I can choose "create a responsive page using Boostrap". If I just select html and makes a css sheet, will I still be able to make a responsive design? Thinking about using "insert" and then choose "Bootstrap Components".
I have made pages with bootstrap templates now. It's ok and I am managing to style the template. Still I feel more comfortable making it from scratch. I feel I am learning more and have more control doing it this way.
--
I guess I should just stick to Dw, but I want to learn more. I am kind of a learning-by-doing-girl and want to try out another program. I like the ability to use "Show code and design" in Dw, so a program with this included would be great.
Which programs have this capability?
I have downloaded Atom, and I know you can refresh the website to see the result, but that means I have to connect the site to a server? Right now I don't want to connect the site to a server of different reasons.
You should try out a standard text editor like Sublime Text or Atom. Do your code editing there and open your page in the browser. Refresh to see changes as you make them.
I like Notepad++.
The problem with programs like DreamWeaver is that they can instill some pretty bad habits in novices. You are absolutely right in wanting to learn without it first.
The reason I like Notepad++ is that it has great code highlighting, one of the things I think draws people in to DW, too.

From Code Editor to Wordpress [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I recently created a webpage for my using the Codepen online editor. I made it responsive and have everything in place to migrate it to my Wordpress page.
The only problem is I'm not sure how to migrate pure html/css to Wordpress. It seems by it's nature that Wordpress is structured around themes.
What suggestions do you have for migrating the code over so it works in Wordpress?
Also, since most of the coding I do is by hand (not using themes) is Wordpress the best site to use?
If that's ALL the site, then there's not much point in using wordpress - just make it static.
If you want to expand it later and think you'll need a CMS's data management tools, with Wordpress you will have to create a theme. But the bare minimum for that is only a index.php (put your code there) and a style.css (for the stylesheet, obviously).
Just make sure to also add the head markup to your site and you're good to go.
Any time you add a database -- wordpress, joomla or other -- you're slowing things down. If you're expecting to be managing over 50 pages, that's a good trade-off, but if not, you're probably not making use of the best parts of wordpress.
One thing with Codepen: It has a few helpers -- autoprefixer, normalizer, maybe you're using Sass? Built-in helpers. Make sure they are compiled into your final CSS/HTML.

getting rid of redundant code between html pages [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
So I'm working on producing my own version of a web/db project my friend was given in school. This is my first project in either area and I'm still learning. Part of the project description mentions all of the pages the client wants. I'm solving this by making an unordered list of links to the different pages with appropriate labels. Complex, I know.
Then I realized that every page will have this. My question is this: is there a way to class certain portions of code in html, so I can just have a "navigation list" in each page, instead of the full code of the list and everything associated with it, in every page?
I want the code to be clean and efficient. That's my motivation in this question.
Your question provides little detail, but it sounds like you want something like a php include. If you are running your site on your local, change the .html files to .php and do <?php include('includes/navigation.php') ?> where includes/navigation.php is a path to JUST your navigation code.
What you are talking about is templates. You cannot do it in plain html... You would need to use a server side language like php. You could also do it with a JavaScript templating language like handlebars or similar, but not in plain html.
If you don't want to use PHP or some other server side technology for a simple menu, you can try various Javascript plugins like MenuCool.