I want to know if there is a way to create a form that will keep all styles of a webpage, while changing the content of the content of the page. Ex: When you submit a question to Stackoverflow, it keeps the all stylistic parts of the page, i.e. Header and sidebars, while changing the title and majority of page's content. Also if you can would a server-side languange, such as php, be best or would a web-side languange, such as Javascript, be best
You can do this by css also you can devide the page into many files
such as putting the header in another page (header.html) and include it in the main page using php (include_once('header.html'))
Style sheets (CSS) exist for exactly this task. Ideally, the HTML for a page contains only its content, while style sheets contain all presentation (the "look"/"format" of the page). Reusing the same style sheet(s) on most or all pages results in a consistent look across an entire website.
See http://www.w3schools.com/css/ for more general information and tutorials.
Edit If you're referring more to reusing "structural" markup across pages, that is accomplished using a template engine. Using templates things like primary navigation, sidebars, etc. can be defined in one file and used on any page that extends the base template. Many web frameworks have a template engine built-in (Django, for example has one I personally use and like).
This is handled using CSS. Basically, websites are built using HTML, CSS, and JavaScript.
HTML builds the structure of the website. It creates the basic building blocks of the site.
CSS takes care of how the website looks. It stylizes the building blocks.
JavaScript takes care of the functionality of the website. It can manipulate the building blocks in order to make something happen.
In order to maintain the same look of certain elements on a website, it is best to create a so called pattern library. A pattern library is a document consisting of pieces of code—these pieces can be reused throughout the website in order to maintain consistence. In this document, you specify the formatting of the essential elements (headings, body text, blockquotes, buttons, form elements etc. (Pattern libraries are sometimes also referred to as "style guides", however, style guides are usually visual documents, while pattern libraries are consisting of pieces of code.)
Of course you can specify the look of your website without using a pattern library, however, it might get a bit harder to maintain the same style throughout the whole website or keep the styling the same when handing the project over to another developer.
You can read more about pattern libraries in this post if you feel like it.
Related
I know that this question is not more coding based. But this can cause many problems practically.
I have a website with 10 pages. Each page has the same navigation. Now if I want to change the navigation a little to include a hamburger menu, I will have to make this change in each page one by one. Is there any way in which I can make this common change to all the pages at the same time?
I browsed for this on SO but the answers to a similar question asked to use PHP or WordPress. Is there any method or tool other than them for my requirements?
With HTML, I don't think there's any support for that kind of dynamic feature yet.
However, if you seek to want to make changes on a portion of your website and see it apply to every other page on your website that has the same portion, there are frameworks, libraries and even template engines that support such.
You may need to use HTML alongside these tools or just use them to replace HTML. For instance, when building a website with Node and Express, there are a good number of template engines that you can make use of that can be used alongside HTML to make your website dynamic. I would recommend that you try out one of the following: pug, ejs, handlebars. I believe you can achieve that level of dynamism with one of them.
You can also decide to use front end libraries or frameworks like react, vue and angular. These tech tools enable you to create a portion of a website(called a component) once and reuse it on as many pages as you want. Anytime you make a change to that component, it automatically adjust itself on every other page it has been inserted.
When it comes to styling a forms based web app (or pages, components, etc.), how do I build it using the least amount of CSS, style tags, style classes, and style attributes possible?
My understanding was that the paper-* elements implement an opinionated material design style that can be used to build components with similar material design out-of-the-box.
I'm trying to build an internal app for employees at my company (thus, as long as it's not bad, styling is not that important). It's basically a bunch of forms pages that look like many of the protoypical menu-driven web sites (like the polymer docs pages):
Nav menu on the left
Menu selected content on the right - text reports and forms mostly
header/logo on top
However, when I tried to copy some things (like item list boxes) out of the elements catalog like the paper-item demos I couldn't match the look in my components simply by copying the HTML. The demo HTML referenced classes for which I had to copy a bunch of <style> tags in order to get them to work.
It felt like a lot of re-inventing the wheel to copy an often repeated look.
I'm not sure if I understand your problem. The paper-* elements aren't meant to build components, they ARE components. If you want to use them you have to go the full way. If you use them as intended, they look like in the demos out of the box. You can't just copy the HTML. A more traditional way to get the material-design-look is Materialize or Googles own MaterialDesignLite.
I am converting mockups to HTML + CSS. Then this will be used as a template for a PHP system by other people (actually it can be any server side language, PHP is not important)
There are, for example, 10 different type of pages. But in each page, many blocks can differ in many cases. For example a block can be displayed differently for anonymous and logged in users. But I dont want to copy the whole html file and just change that block and have another html file. I know php can be written to include parts of the page from many files. But there is no php yet in my design workflow, and I want to have full HTML design before ever passing the files to PHP guys.
Basically, what I want is a "CASCADED" html structure for design purposes. So in a "container" html file, I can include all the different parts from different HTML files.
Does anyone know a method / tool / process to design dynamic pages?
I can think of two ways of accomplishing this. First pull in each of the various components on the page with ajax calls, jquery will make this relatively easy.
Or if you don't want to use javascript then iframes. But the iframes method is extremely prone to buggyness and in some layouts just will not work. Also keep in mind that since you aren't directly injecting html into the page each page would have to keep track of its own styles.
I am newbie to Jquery Mobile, so far what ever examples i searched contains only one html page for whole application, with multipe div tags where each page/screen is defined as div tag with data-role as page with some header and footers optionally. Based on user actions, we are hiding some div's(pages) and showing only expected page. Also, this multi-page template seems to be standard design, as written by some blogs. Are there any other designing ways? what I would like to have is multipe html pages, for ex one for login, one for home, one for contact etc. Other wise it is difficult to understand/code/debug issues, especially people from Java background like me.So, what I want is some kind of MVC design with JQueryMobile, like each view/screen as sepearate html associated with one js (Controller). Can we have multiple html pages in JqueryMobile app? If possible how to pass data/ maintain session between them? Any samples are most welcome. Thanks In Advance.
Note: Also I don't want server side includes, may app contains 10 to 15 screens, each page will make a webservice call and fetch some data and map it to UI.
As jerone mentioned above, the jQuery Mobile documentation clearly says
We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
See http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html
Each page (which can be a static HTML file or anything produced by a script (e.g PHP, Python or whatever)) is thus standalone and transitions from one page to another are done using AJAX calls.
There is no such thing as a controller except if you assume that your browser is one!
You can use multiple html files if you want. jQuery Mobile will automatic include these with AJAX: http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
Anyways, jQuery Mobile recommends one big html file with multiple pages.
From http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html
This template is standard HTML document with a single "page" container inside, unlike a multi-page template that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
I have made a couple of simple Joomla websites before. Those are using a custom template made by myself. They are easy websites as they have a simple linear menu, all pages have the same layout, just some articles are changing between pages.
But in my new project, I have a ready html website that I have to convert to Joomla. The problem is, there is no one repeating menu and there is no consistent layout. To simplify a bit: there are 10 pages and they all have different layouts. Between pages background changes, menu position changes, menu content changes, content box positions change, everything changes. This means I'm not able to do this site as I've done before, using one template index.php which simply contained my repeating page structure.
I am dreaming of a way to simply change ready_page1.html to ready_page1.php, adding some modules inside the php (which are then available for online editing, which is the reason switching to Joomla). I would do this to each page. The custom menus inside each page I would "manually" point to the according php files instead of the old html files. Is this method possible somehow? I couldn't figure out how to do this.
I don't care loosing lots of Joomla basic functionality due to this crude method, I just want the simplest way to do this.
In the end, I just want the exact same website I already have on html, but I want some chosen rectangular areas in the html pages to be editable Joomla modules. The modules would have the pen icon for editing. That's it, no other functionality is necessary.
Sounds like the site you are converting is a usability nightmare. Consistency is part of giving the user a positive experience. That said, if you have to make it exactly the same, then the easiest way is to do it the right way to begin with.
First, you need to learn about page class suffixes. You can add those to a menu item so that you can control the CSS on a per page basis. This will allow you to change backgrounds and other elements on each page.
Documentation - http://docs.joomla.org/Page_Class_Suffix
Next, you will need to make a template so that each of the module positions is collapsible. If you plan out the positions, you should be able to use a single index.php for the entire site. We have a custom template that we use for every site we do and it rarely needs to be touched because all of the positions we would possibly want to use are already there, they just don't get used until a module is put in the position.
Documentation - http://docs.joomla.org/Collapsing_columns
You will also want to make sure you understand menu assignments. You should be able to assign the modules to the pages as needed to create the layout you want for each page. If you are using 2.5.x, then you can probably get by with the built in menu assignment features. If you are using 1.5.x then (you really should upgrade) you will probably want to use Advanced Module Manager as it makes menu assignments much easier and more flexible.
Documentation - http://docs.joomla.org/Help15:Screen.modules.edit.15#Menu_Assignment
Once you get a good grasp of how Joomla templates work and how they are supposed to be used you will find that you can basically do anything you want within the framework so you don't lose any functionality.
build your website and create those 10 pages (contents, heirarcy, and so on..).
then create your templates based on those html files. this is where you adapt the html into a joomla template. after this step, you should end up with at most 10 templates depending on your styles (crude but quick)
as far as i know and from the documentation, Joomla 1.7 supports "template per page" (see the screenshot). you can pick out which style will be applied to which item. it even applies to subpages. another documentation here