How to generate the layout of an existing webpage? - html

I recently started working on some wordpress themes.
I usually have to change themes for my clients. Most of the time I need to analyze the theme first. I know that I can use inspecting feature in Google Chrome but I need a designing tool (preferably a chrome extension) that draws the layout of the theme I'm working on (by the main divs).
I need the name of the main divs and their class (or id) on the chart.
Can anyone please help me?

try to use mozila firefox developer edition. This is the best way to analyze your project

Related

Change look of website

Our office has an email/filing system that is web based (runs on our local servers/intranet) and whilst the functionality is mostly there, it looks like an absolute pig; something that the creators of it appear to have no interest in fixing as it's looked awful for years.
Is there any way I can force the page to load with my own style applied? I use google chrome and have a decent (though not advanced) knowledge of creating web pages.
As far as I can tell, the system doesn't use CSS. I think it's all HTML?
I think you could use JavaScript and CSS to add your own style to the pages on load. Chrome has an extension called Tampermonkey that lets users create userscripts, which are scripts run automatically on pages you specify.
If you create your own style, you can use it on the page with a script like this (this is the jQuery function, I'll try to find out how to do it in plain JS):
$('head').append("<style>//your style</style>");
This should apply the style. If you set the script as a userscript in Tampermonkey, it will run automatically.
Tell me if you would like more details or if I need to be more clear! You can find Tampermonkey at this link on the Chrome store- their website is here.

Design yii framework page

So, I'm a beginner in this yii framework.
But my job is only too design the view.
I've experienced in designing static webpage using Adobe Dreamweaver. But I can't find how to configure dreamweaver to yii.
What is the best way to design it's view?
Your question was not around which IDE or tool to serve your purpose, but you have asked the best way on your problem, then I vote to PHPStorm anyway. In your case, you can use Live Edit.
It allows you to view your changes in an actual browser window
instantly without a page refresh, reload corresponding browser pages
(related to opened file in IDE) and highlight corresponding element.
Currently only Google Chrome is supported (extensions for Firefox &
Safari are still postponed).
See demo
http://blog.jetbrains.com/webide/2012/08/liveedit-plugin-features-in-detail/#more-4098
And here is references how to configure LiveEdit
PHPStorm - How to setup live editing

A webkit to make html/css of a website

I remember that sometime ago there was a project of a webkit designed to, for example, if you want to put some images of you website then you can choose the options and the webkit and then just copy the html/css code and it's functional on your site, modifying with php and that's all. You don't have to know css at all, it was great. But i miss the link and I don't have any idea what's the name of the website.
It doesn't work only for images but also menus, links...etc. Thank you!
Sounds like you're talking about an SDK like Dreamweaver.

how to mobilize an already existing website?

I'm trying to create a mobile version of my school website is there a simple way to do this? I'd rather not pay money to get some website to do it for me. can I load an external html template instead of just an external css file.
You can find many free and paid tools that help you create mobile sites. Have a look at this list. I am sure there are many more. If you don't want to pay a penny and you are planning to get some programming experience, you will need some knowledge on HTML5 and CSS.
If you plan for some big and fancy ideas, have a look at jQuery Mobile or Sencha Touch
Sure you can. However, this is no task that can be done automatically. You need to sit down and maybe create a new HTML and/or new CSS. But you can also just leave it as is, because you can view them on the most smartphones without any problems.
Are you using a Content Management System (CMS) such as Wordpress Joomla, or Drupal? If so, look for a responsive template created in the last year. Another option with some CMSs is a plugin/addon that renders a different template when detecting a mobile device.
If you aren't using a CMS it'll take more work, there are lots of responsive frameworks out there, the two big ones are Bootstrap and Zurb Foundation.

Formatting problem on Webpage with IE

I inherited a webpage to manage at work. I needed to add a new button so simply edited the existing jpeg to include the button and added a hyperlink to the jpg to open the link.
In Chrome, Firefox etc. all is well but now I get a weird formatting on IE.
I am NOT a web developer and am perplexed.
Thank you in advance for your help and advice.
The website is www.kimberleyjackson.com.
Sincerely,
Jason
That page is not really HTML, it's using Word-generated VML which as you see is ancient and deprecated technique.
The only thing I can suggest is to rewrite the page using "pure" HTML without all this fancy and deprecated stuff.
As you're not a web developer I fear you'll have to hire one - web page should be developed by web developer, not by document processing software.
Like above people have said, this is not going to be an easy page to maintain. That being said... is your new image the same size as the old image? If not, that may be causing misalignment. What changes exactly did you make?