Upload
sergey-skudaev
View
221
Download
0
Embed Size (px)
Citation preview
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.mspx8/7/2019 CSS template for web
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%23a8/7/2019 CSS template for web
3/27
Accept License Terms and click the Next button.
Enter a username, organization (optional) and click Next button.
3
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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%23a8/7/2019 CSS template for web
5/27
Then click Next button.
Accept License terms and Click the Next button.
5
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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
http://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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
http://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
14/27
Click the Next button. The Synchronization Setup Wizard window is displayed
Click The Next button. The Synchronization options window is displayed.
14
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
16/27
Select Pocket PC and click Start from the main menu. Select Internet Explorer.
16
http://www.configure-all.com/mobile_screen.php#a%23ahttp://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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
http://www.configure-all.com/mobile_screen.php#a%23a8/7/2019 CSS template for web
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
8/7/2019 CSS template for web
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
8/7/2019 CSS template for web
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
8/7/2019 CSS template for web
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
8/7/2019 CSS template for web
22/27
menu.php
8/7/2019 CSS template for web
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.
8/7/2019 CSS template for web
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/8/7/2019 CSS template for web
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
8/7/2019 CSS template for web
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/8/7/2019 CSS template for web
27/27
Copyrighted 2010, By Sergey Skudaev