css template for web

8/7/2019 CSS template for web

1/27

How to install Pocket PC emulator on your Windows PC

and make your web site viewable on mobile screen

Contents:

1. How to install Pocket PC emulator on your Windows PC

2. Three columns CSS styles for regular PC browsers

3. One column layout CSS styles for mobile device

1. How to install Pocket PC emulator on your Windows PC

Copyrighted 2010, By Sergey Skudaev Visit my web site www.configure-all.com

Many Internet visitors use mobile devices to access Internet. If you do not want to miss that huge partof Internet visitors you have to adjust your web site layout for mobile screen. Just to start, install on

your Windows PC a pocket PC emulator and look at your web site.

If you have Windows XP use the following links:

1. Install Active Synchhttp://www.microsoft.com/windowsmobile/en-

us/help/synchronize/activesync-download.mspx

2. Install Virtual PC 2007,http://www.microsoft.com/downloadS/details.aspx?

FamilyID=04d26402-3199-48a3-afa2-2dc0b40a73b6&displaylang=en

3. Install Standalone Device Emulator 1.0 with Windows Mobile OS Images,

http://www.microsoft.com/downloads/details.aspx?familyid=c62d54a5-183a-4a1e-a7e2-

cc500ed1f19a&displaylang=en

click the "Instructions" link.

For Windows Vista or Windows 7 installhttps://codes007.com/windowsmobile/en-

us/downloads/microsoft/device-center-download.mspx

I have Windows XP and will show you details of installation of a pocket PC emulator on Windows

XP. If you have different version of Windows, I hope, it will help you anyway

Active Synch Installation

On the page ActiveSync 4.5 Download, click the Accept and Download button.

The File Download dialog box appears.

1
http://www.microsoft.com/windowsmobile/en-us/help/synchronize/activesync-download.mspxhttp://www.microsoft.com/windowsmobile/en-us/help/synchronize/activesync-download.mspxhttp://www.microsoft.com/downloadS/details.aspx?FamilyID=04d26402-3199-48a3-afa2-2dc0b40a73b6&displaylang=enhttp://www.microsoft.com/downloadS/details.aspx?FamilyID=04d26402-3199-48a3-afa2-2dc0b40a73b6&displaylang=enhttp://www.microsoft.com/downloadS/details.aspx?FamilyID=04d26402-3199-48a3-afa2-2dc0b40a73b6&displaylang=enhttp://www.microsoft.com/downloads/details.aspx?familyid=c62d54a5-183a-4a1e-a7e2-cc500ed1f19a&displaylang=enhttp://www.microsoft.com/downloads/details.aspx?familyid=c62d54a5-183a-4a1e-a7e2-cc500ed1f19a&displaylang=enhttps://codes007.com/windowsmobile/en-us/downloads/microsoft/device-center-download.mspxhttps://codes007.com/windowsmobile/en-us/downloads/microsoft/device-center-download.mspxhttps://codes007.com/windowsmobile/en-us/downloads/microsoft/device-center-download.mspxhttp://www.configure-all.com/mobile_screen.php#a%23ahttp://www.microsoft.com/windowsmobile/en-us/help/synchronize/activesync-download.mspxhttp://www.microsoft.com/windowsmobile/en-us/help/synchronize/activesync-download.mspxhttp://www.microsoft.com/downloadS/details.aspx?FamilyID=04d26402-3199-48a3-afa2-2dc0b40a73b6&displaylang=enhttp://www.microsoft.com/downloadS/details.aspx?FamilyID=04d26402-3199-48a3-afa2-2dc0b40a73b6&displaylang=enhttp://www.microsoft.com/downloads/details.aspx?familyid=c62d54a5-183a-4a1e-a7e2-cc500ed1f19a&displaylang=enhttp://www.microsoft.com/downloads/details.aspx?familyid=c62d54a5-183a-4a1e-a7e2-cc500ed1f19a&displaylang=enhttps://codes007.com/windowsmobile/en-us/downloads/microsoft/device-center-download.mspxhttps://codes007.com/windowsmobile/en-us/downloads/microsoft/device-center-download.mspx


2/27

Click the Run button.

Click the Next button.

2
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a


3/27

Accept License Terms and click the Next button.

Enter a username, organization (optional) and click Next button.

3


4/27

Do not change default path, click the Next button.

Click the Finish button on the next Finish window.

Select start, All Program, display menu and find the Microsoft ActiveSync. Do not start it yet. Just

make sure that it is installed.

Virtual PC 2007 Installation

On the Virtual PC 2007 web page click the Instructions link or scroll down to the Files in This

Download. Select 32 bit/setup or 64bit/setup.

To know if your Windows are 32 or 64 bit version, right click My Computer, then select properties. If

you don't see "x64 Edition" listed, then you're running the 32-bit version of Windows XP.

Click Download button. When the File Download dialog appears, click Run button.

4
http://www.configure-all.com/mobile_screen.php#a%23a


5/27

Then click Next button.

Accept License terms and Click the Next button.

5


6/27

Enter a username, organization and click the Next button.

Accept default installation path, click the Next and then click the Finish button.

6


7/27

Install Standalone Device Emulator 1.0 with Windows Mobile OS Images

On the Standalone Device Emulator 1.0 with Windows Mobile OS Images web page, click

Instructions link and the Files in This Download title will be displayed.

Download to your desktop the V1Emulator.zip file, unzip it and double click the

Standalone_emulator_V1.exe to start installation.

Click the Run button, accept terms, and finish installation. Then click Download button for efp.msi

file.

Click the Run button, the Next button, Then the Finish button. When you install all 4 components, you

will see them in the start menu:

7


8/27

Create a virtual Machine

Start Microsoft Virtual PC. The Virtual PC console is displayed.

Click New button. Welcome to the New Virtual Machine Wizard window is displayed.

8


9/27

Click the Next button. Create a virtual machine windows is displayed.

By default, Create a virtual machine option is selected.

Click the Next button. The Virtual Machine Name and Location window is displayed.

9


10/27

Enter a virtual machine name and click the Next. Select Virtual OS window is displayed.

Select Other and click the Next. Complete the New Virtual Machine Wizard window is displayed.

Click the Finish button.

Setting for window is displayed. Click OK. Virtual PC Console window is displayed.

10


11/27

Click X in the upper right corner to close the window. Virtual PC Console window is closed.

Click Start, Microsoft ActiveSync. Microsoft ActiveSync window is displayed.

Click Start, Microsoft Windows Mobile 5.0 MSFP Emulator Images, and Select Device Emulator

manager.

The Device Emulator manager window is displayed.

11


12/27

Click Start, Microsoft Windows Mobile 5.0 MSFP Emulator Images, Pocket PC ColdBoot. Pocket PCis displayed.

On the Device Emulator manager window click Refresh button.

Select record in curly brackets { } and click right mouse button. Select Cradle from drop down menu.

On the ActiveSync window click File, Connection setting.

12


13/27

The Connection setting window is displayed

Mark all check boxes and Select DMA under check box "Allows connection to one of the following:".

Select "Internet" in the "This computer connected to" drop down list. Click Connect button.

Two messages will display about mail. Just click OK. Get connected window displayed.

13


14/27

Click the Next button. The Synchronization Setup Wizard window is displayed

Click The Next button. The Synchronization options window is displayed.

14


15/27

Unmark all check boxes and click the Next button. Finish synchronization and saving setting window

is displayed

The ActiveSync window displays connected and synchronized text.

15


16/27

Select Pocket PC and click Start from the main menu. Select Internet Explorer.

16


17/27

Internet Explorer is displayed. Type http://www.google.com and click a curved arrow on the right.

Google page is displayed!

Click File, Save and exit. Pocket PC is closed. Start it again. Google page still is displayed!

WE GOT IT!!!

Now you can type URL of your web site and see how it looks on the mobile screen!

Caution: If you need to reboot Pocket PC, select File, Reset, Soft. Your setting and software (if

any additional installed on your pocket PC will be saved. If you select hard reset, your setting

and additional software installed on your pocket PC will be erased

Install NET Framework 2.0 SP2 and NET COMPACT FRAMEWORK 2.0 SP2 on you PC and when

you will synchronize your pocket PC, NET COMPACT FRAMEWORK 2.0 will be installed on your

pocket PC.

17


18/27

2. Three columns layout CSS styles for PC browsers.

An example of the same page viewed in Firefox and Pocket PC Emulator IE browser.

18


19/27

First, let us create 3 columns layout for a regular browser in such a way that in HTML file the

middle column content would come first, and then would come right column or left column.

I use left column for Google ads and right column for navigation that is why I place right column

before the left column. It is hard to understand from the picture. Let me explain you how I

achieved it.

First, I created a page div (yellow). Inside it, I placed a header div, a content (green) div and a footer

div. Inside the content (green) div, I put the middle-right (red) div float: right. Inside the red

middle-right div I put the middle div float: left. That way, content of the middle div is coming

first.

Below the middle div, I put the right div float: right; and closed the red middle-right div.

Below the middle-right red div, I put the left div float: left and closed the content div.

In other words, inside the content div I put two divs: the middle-right div float: right and the left div

float: left. But in HTML file before putting content of the left div, I put two divs inside the

middle-right div: the middle div (float: left) and then the right div (float: right). Then I closed

the middle-right div. Then I put the left div floating left. Closed the content div. Put footer div

and closed the page div. The whole page architecture is shown below without any contents.

19


20/27

Here, I give you real page architecture. The page has content, Google ad on the left and navigation on

the right column. Usually, navigation is located on the left column. I placed it on the right because

visitors make much more clicks on the ad if it is placed on the left column. I performed

experiments with different ad location and for my site the left column for ads works much better

than the right.

HTML PAGE:

Mobile CSS Layout

Header

20


21/27

Introduction to Programming

Programming in PHP, as programming in any computer

languages or scripts is not as impossible as you may think. An averageperson can master computer programming. You maybe think that to be agood computer programmer you should be very good in math, but it is not

necessary true.

I, was a biologist in my country and when came toUS, computer programmers were in great demand. All immigrants,regarding their previous background rushed to learn computerprogramming. I was hesitated, because I thought biology and computerprogramming are to different, but my wife convinced me that I couldmaster computer programming and I grateful to her, because I loveprogramming much more than biology. I became addictive toprogramming.

You do not have to be good in math to be good in computer programming.It was noticed that among immigrants musicians appeared a goodprogrammers, probably, because they used to write music in notes and itis coding.

Actually, programming is closer to packaging than to math. You aresurprise that I compare programming with packaging? Yes, it is similarand I will show you how.

Any programming language deals with variables. Variables are used tohold different pieces of data. What is a variable? You may think of avariable as of a packaging box. Different type of data requireddifferent type of boxes. In computer programming we have to deal withnumbers and text. So we have to use variables that hold numbers andpieces of text or strings of text.

There may be whole numbers and numbers with fractions. Variable thatholds the whole number is called INTEGER. Variable that holds numberwith decimal points is called float or double.

Variable that holds a piece of text is called string. Any programusually starts with declaration variables and their data types. Forexample, in C++ or Java you have to declare variable name and exactdata type:

footer

21


22/27

menu.php


23/27

position:relative;top:0;text-align:left;width:950px;height:900px;background:#ff0000;margin:0

}

DIV#middle_right {float:right;width:770px;height:900px;padding-left:0px;padding-right:0px;margin:0;background:#00eeff;}

DIV#middle {float:left;top:0;width:555px;height:900px;padding-top:1px;margin-left:0px;margin-right:0px;background:#cyan;margin-bottom:0;padding-left:25px;padding-right:10px;

}

DIV#left {float:left;width:159px;height:900px;color:#ffffff;background:#993366;padding-left:10px;padding-right:10px;margin:0;}

DIV#right {float:right;width:159px;height:900px;padding-left:10px;padding-right:10px;margin:0;color:#ffffff;background:#465D7C;}

DIV#footer {margin-top:-20px;padding-top:20px;width:950px;

23

I set the footer margin-top to 20px because for some

unknown reason in Firefox the footer was displayed 20px

lower than my 3 columns bottom edge. As a result, the

content of the footer was moved up. To fix it, I set

padding-top to 20px. That way negative margin and

positive padding cancel each other and footer content is

displayed as if it does not have margin and padding.


24/27

height:90px;background:#9999ff;}

h1 {font-size:150%;color:#465D7C;

font-family:Arial, Helvetica, sans-serif;}

h2 {font-size:100%;color:#465D7C;}

li {list-style-type:none;line-height:120%;font-size:83%;

color:#ff9966;}

ul li a.menu {color:#dddddd;font-family:Verdana, sans-serif;font-size:83%;background:#465D7C;text-decoration:underline;}

li {

list-style-type:none;line-height:120%;font-size:82%;color:#ff9966;margin-left:-40px;padding-left:5px;}

It is important to set the same background color for left div, right div and middle_right div in

production version. That way you do not have to set height for any div except header and footer.

The length of the page div, content div, middle_right div and middle div will be determined by length

of your main contents. If the left and right columns contents are shorter than main contents, page

div will be seen under the left div and middle_right div will be seen under the right div, but if you

set the same background color for all of them, then they will not be seen. On my site

www.poetry-anthology.com I leave middle column white and for all the rest divs I set

background color to #465D7C;

3. One column layout CSS styles for mobile device

Mobile CSS

Since, mobile browsers do not support floating blocks, in mobile.css, I set all blocks to position:

absolute. The left properties for all blocks were set to 0px. The header height was set to 12px, and the

24
http://www.poetry-anthology.com/http://www.poetry-anthology.com/


25/27

middle column top to 12px; as well, so that it would be displayed right away after the header. The left

block and the footer block are set to display: none. So, they are not displayed. The whole mobile.css

file is displayed below.

DIV#header{

position:absolute;left:0px;top:0px;height:12px;text-align:center;background:#ffff00;}

#middle {position:absolute;left:0px;top:12px;

padding-left:5px;margin-left:10px;padding-right:0px;margin-right:0px;}#right {position:absolute;left:0px;padding-left:0px;margin-left:0px;background:#993366;}

#left {display:none;}

#footer {display:none;}

li {list-style-type:none;line-height:120%;font-size:83%;color:#ff9966;}

ul li a.menu {color:#dddddd;font-family:Verdana, sans-serif;font-size:77%;background:#993366;text-decoration:none;}table {align:left;width:200px;}

25


26/27

li {list-style-type:none;line-height:100%;font-size:120%;color:#ff9966;margin-left:-40px;

padding-left:5px;}

a.menu2:visited {font-family:Arial, Helvetica, sans-serif;color:#336699;font-size:85%;text-decoration:underline;background:#C898B2;}

a.menu2:hover {

font-family:Arial, Helvetica, sans-serif;color:#465DBB;font-size:85%;text-decoration:underline;background:#C898B2;}

a.menu2:link,a.menu2:active {font-family:Arial, Helvetica, sans-serif;background:#C898B2;color:#336699;font-size:85%;

text-decoration:underline}

h1, h2, h3{font-size:77%; font-family:Arial, Helvetica, sans-serif;color:#993366;}

You can change background colors and font colors for all blocks to what ever you like. I made them

different in color on purpose, so that you could better see each block (div). You can play with font

sizes as well and choose what is better for you. Be creative! Good Luck!

Visit my web site www.configure-all.comfor similar articles

26
http://www.configure-all.com/http://www.configure-all.com/


27/27

Copyrighted 2010, By Sergey Skudaev

css template for web

Documents