web page design the easy way

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic by 2 people | Log in to rate

Ranked #561 in Work At Home, #87,684 overall

Web Page Design

So first off let me introduce myself, my name is Dave, a little over a year ago I was made unemployed by the "economic struggles" of the company where I had worked for over 10 years. This has made me for the large part unemployable, and as time slipped by I realized that I had to do something or I would go out on my mind. For the completion of my quest I wrote an e-book Web page design the easy way.

So like many people I turned to the Internet and I decided that websites were pretty cool and building them for a living and working for myself would have to be better than no job at all.

You also have to admit the job title Webmaster sounds pretty cool at parties, lol.

One problem was that I did not know any HTML, PHP, JavaScript or any other scripting language, hell I'd only been using the Internet for about a year. This put me in a bit of a sticky situation I can tell you and to date I've literally read hundreds of books and eBooks on these subjects.

Over the last year I've become pretty proficient in HTML and PHP. I'm still pretty sketchy on JavaScript but hey two out of three isn't bad!

So I figured that if I wanted to be a Webmaster I would need the tools of the trade so I spent some money and bought Dreamweaver, which is a fantastic tool which has made it less of a struggle to achieve my goal.

Not saying it's easy! There is still a learning curve with every piece of software especially one as complicated as Dreamweaver, see I thought "what you see is what you get" would mean that once I had unwrapped my software I would be throwing together websites within a matter of days, but this is just not the case.

There's a whole bunch of languages that you will have to learn to become a proficient Webmaster.

But what if there was an easier way! 

See now I've achieved my goal, I work from home and I work the hours that I choose on the jobs that I choose. Don't get me wrong I'm not a millionaire and I probably never will be, but I earn a better living now than I did for those 10 years working in a job that I hated.

Another thing is I've never advertised my services the work finds me from referrals of the people that I've worked for in the past. I've started my own company and will be looking at taking on staff in the next six months.

Today I am going to show you how you can create websites easily and with little or no coding whatsoever, you don't need to read hundreds of e-book's and learn HTML, PHP and JavaScript.

I am going to help you shorten the learning curve, earn money and learn as you go! 

Most of the jobs I do are five or six page websites to give companies an identity on the web, bear in mind that these are bricks and mortar businesses that need a website because their competitors have one. I charge £450 for one of these sites and in a minute I'll surprise you by telling you exactly how long it takes me to complete one of these five or six page websites.

To date I have completed four e-commerce websites for which I've charged £1200 each and again I'll shock you at how quickly I can put one of these sites together.

Okay let's get on with Web page design. 

If you've read any books or e-books on web design you will know that a web page is made up of HTML code and the look and feel of the website is controlled by cascading style Sheets or CSS for short, I'm not here today to teach you about HTML or CSS. I'm here today to show you how easy it is to create a website without needing to know either HTML, CSS, PHP, JavaScript or any other scripting language.

To create websites I mainly use two pieces of software that are easy to use and very cheap when you consider the time savings and productivity increases achieved. Let me ask you a question:

If typing out the HTML and CSS code for a web page layout took you let's say two hours and I told you I knew of a piece of software that could get the job done in ten minutes would you be interested?

Your answer would have to be yes because if your time is worth let's say £10 an hour that software is just saved you close to £20, now if you multiply that by 10 websites you can see that the savings soon add up.

CSS layout software for web page design 

Below you will see a layout that I created in 10 minutes, the picture is a little grainy but you get the idea, if you hand coded a layout like this it will at least take you an hour maybe two.

layout that I created in 10 minutes 

create standards compliant CSS websites in minutes. 

Ten minutes to create the layout and your customer will have provided all the text so all you have to do is turn your layout into a template, insert your navigation and your customers text a few little tweaks here and there and your website is good to go.

So now you've seen what can easily be created in 10 minutes let's go over the controls of the software so you can see how easy it is to use. This software comprises off six tabs each controlling a different aspect of your CSS layout design, once you get the hang of the process it really is easy to create standards compliant CSS websites in minutes.

The Layout Tab 

In the layout tab you choose from over 40 different presets to give you a basic structure of your website, every aspect of which is totally customizable.

From this Tab you control the weight, position, the header, the top navigation, how many columns and the footer.

As you can see there is a preview window at the bottom of this Tab to show you what your new website will look like.

At any time you can click on the preview window and it will launch your layout in your default browser to show you what your CSS layout will look like on the web.

The Box Tab 

In the box Tab you control every aspect of each individual div whether it is the name, height, width, margins and padding.

In this section of the wizard your website really starts to take shape.

Also you can add or subtract divs anywhere you want, for example if you want your company logo inside your header just select your header in the layout component window and press the add button, then input the width and height of your logo and padding so your logo doesn't touch the edge of the div.

It really is that simple to use this software.

The Type Tab 

In the type tab you control every aspect of the type for your website whether it be the website as a whole or each individual div, for example if you wanted your company slogan to be white and 22 pixels in height just select your header div then select h1 Tab in the middle of the user interface and set your size to 22 and choose the color from the palette picker.

The Design Tab 

In the design Tab you control background colors and images, image repeat and image position. Also any borders you might wish to add to individual div are controlled in this Tab.

The Print Tab 

In the print tab you control how you would like your page to look if it was printed out on paper whether it is full color or black and white.

The Output Tab 

In the output Tab you control where you would like your CSS style sheets to be stored, placeholder content, if you would like to include CSS comments.

You can also store your layout as a preset so that you can come back to it any time.
And finally which doctype you would like your pages to be generated in.

Once you click finish the software will work its magic and create your layout for you, the best thing about this software is that the HTML and CSS is very clean producing a standards compliant website layout in minutes.

Web page design software 

What do you think?

Could you use a tool that saves you time and money and produces standards compliant website layouts in minutes?

CSS Sculptor video 

See how easy CSS Sculptor is to use in this short video.

We show you how to put together a simple standards compliant website layout using the software.

creating a page layout with the Dreamweaver extension CSS Sculptor 2

Runtime: 394
230 views
0 Comments:

curated content from YouTube

Dynamic web page design 

You will remember earlier that I said I'd created four e-commerce sites in the past and each one was paid £1200 for. Now would it surprise you if I told you that each e-commerce site that though I've built in one day?

With this piece of software that can show your dynamic page creation is just so easy, I really couldn't believe it when I started using this software. With it you can create an administrative backend or dynamically generated catalogue pages complete with search.

Dynamic websites pose a major problem to someone who doesn't know PHP. For those of you who don't know most e-commerce and social network sites are dynamically generated from a database, it would be impossible to create these sorts of sites if they weren't connected to a database.

PHP is one of the most common and widely used ways for your HTML pages to communicate with your database.

The software creates all the pages you require for your dynamic website with no hand coding involved whatsoever you run through a simple wizard which step-by-step configures your pages for you and at the end your pages are generated.

One of the e-commerce sites have created was centered around badges, so for example if somebody was to search for badge clips from the drop-down menu the badge clips in the database would be shown on a dynamically generated page which you can see above.

Not bad for one day and that included inserting all the products into this dynamic website

Dynamic web page design 

Step one of the wizard

There are 10 steps in all but the first one you setup your connection to the database and the table you try to use, which template to base your pages around and which pages you want generated.

Step two of the wizard

In step two you choose from the six drop-down menus to create your forms look and feel.

Step three of the wizard

In step three you choose whether your pages are public or administrative and how many records per page and the columns to display your records.

Steps 4 to 7 

Step four of the wizard

In step four you set relationships between your page and the database, so you link your item name with your item name table in your database.

Step five of the wizard

In step five you select which criteria your users will be able to search by.

Step six of the wizard

In step six you choose from the three preset drop-down menus to specify layout options of your detail pages.

Step seven of the wizard

In step seven you specify which information from your database will be shown on the details page.

Steps 8 to 10 

Step eight of the wizard

In step eight you specify which form fields will be created on your update page.

Step nine of the wizard

In step nine you specify which form fields will be created when you insert page.

Step 10 of the wizard

In step 10 you specify which form fields will be created when you delete page.

There you have it 

As you can see with this software it really is easy to create dynamic websites with no hand coding whatsoever. How much time and energy could use a with Andy piece of software that creates pages in one operation.

There you have it two pieces of software that will make your life so much easier and save you a lot of time which you can spend doing other things like Grow your business or watch your kids grow.

Data Assist Video 

In this video we show you how easy it is to use Data Assist to create dynamic web pages.

using the dreamweaver extension dataassist

Runtime: 521
79 views
0 Comments:

curated content from YouTube

Now lets make your pages look Flashy 

Did you know you have 8 seconds to catch your users attention?

According to the powers that be this is how long it takes someone to decide whether or not to stay on your page.

To make my pages look a bit polished I use a piece software called flash to add animations to the page.

Now flash is hard to learn as you need to learn actionscript but never fear I have a handy piece of software that will do all the heavy lifting for you so you don't have to do any hand coding of actionscript at all.

Its called Flasheff.

Flasheff - Animation made easy 

FlasheffFlasheff is a Flash extension to easily animate images or dynamic text.

Flasheff is the easiest way to animate with flash, saving you hours because there is no need to input complex actionscript 3 code to achieve the effects you desire.

It's this easy to use Flasheff 

In this section we are going to walk you through creating a simple banner with flasheff, what we describe here is what is going on in the video:

1. Right click on the document.
2. Change your document properties to suit(height, width, and background color)
3. Insert the text "Great animation tool for Flash" and position it close to the top of your banner.
4. Import your image. and place it on the stage.
5. Insert the text "Get it now CLICK HERE..." and position it to the left of the image.
6. Convert your image to a symbol and embed the characters of the text.
7. Drag the flasheff component over each of the items you want to animate and drop, it will snap to the corner of the item.
8. Select each flasheff component in turn and in the flasheff panel select the animation effect that you want each object to have.
9. Save and preview your animation.

That's it you have created your first animation.

Flasheff Video 

flash animation tutorial

Runtime: 308
217 views
0 Comments:

curated content from YouTube

Featured Lenses 

Webpages you might like 

Super Suite
Everything you need to create complex websites
Ecart
add e-commerce functionality to your website
Universal Email
Add e-mail capabilities to your website
Security Assist
Complete user registration and protection for your site

Please help me make this lens better 

Give me your feedback on how to improve this lens.

submit

by dreamweaverex

Hi there Ive been using dreamweaver for 2 years now to create websites, and I can tell you it was a bit of a learning curve.

Untill i found some grea... (more)

Explore related pages

Create a Lens!