How To Create Style Guides for Web Pages

I need to create style guides for websites. I will be provided with the assets (images and required measurements). It will be my job to create style guides using In Design.
I have never used In Design, but I am a member of Lynda and Total Training online. Neither seem to address simple style guides for websites. Both seem to address designing from scratch for print and newsletter creation.
Any links to tutorials? This seems straight-forward, but because I have never done it, I would appreciate direction.
Thanks!

I received a sample of what I'll be working on. Attached is one screenshot (blurred areas to conceal confidential info).
Overall, I will be given web page images (as seen below and as an original sized attachment) like screenshots.
I will be given measurements.
I will create a web style guide with text and the placement of images, and pinpoint where the objects are placed on the pages in pixels. e.g. Hero section - 80 pixels, padding - 40 pixels, etc. You can see this below in the (tiny, or see the larger attachment) text on the sides of the web page image.
The original designer also added some type of padding. You can see it below in blue at the bottom of the page. Is this the norm? How is that done?
Big Question: There are no pixels in InDesign. Are points equivalent, or should I set this (pixel notations) part up in Photoshop?
I hope this provides more details for you to help me, and I know this is a lot to ask. Thanks in advance!

Similar Messages

How to create progress bar in web page!!!

Dear,
I do not know how to create progress bar in web page?
Please show me the way to solve it.
Best regards,
Huy

God your lucky/lazy
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
import javax.swing.*;
import java.util.*;
import java.io.*;
public class ProgressBar extends Applet
private boolean isStandalone = false;
private int width;
private int height;
private double percentComplete;
private double fundsTarget;
private double fundsRaised;
private Properties values;
private String propertiesFile;
private JPanel jPanel1 = new JPanel();
private JProgressBar PB_FUNDS_PROGRESS = new JProgressBar();
private GridLayout gridLayout1 = new GridLayout();
private BorderLayout borderLayout1 = new BorderLayout();
private JPanel jPanel2 = new JPanel();
private JLabel jLabel1 = new JLabel();
private JLabel jLabel2 = new JLabel();
private JLabel jLabel3 = new JLabel();
private GridBagLayout gridBagLayout1 = new GridBagLayout();
private JPanel jPanel3 = new JPanel();
private JLabel jLabel4 = new JLabel();
//Construct the applet
public ProgressBar()
//Initialize the applet
public void init()
    try
      jbInit();
    catch(Exception e)
      e.printStackTrace();
//Component initialization
private void jbInit()
throws Exception
    fundsTarget = new Double( 100 ).doubleValue();
    fundsRaised = new Double( 50 ).doubleValue();
    PB_FUNDS_PROGRESS.setBackground(Color.green);
    PB_FUNDS_PROGRESS.setForeground(Color.red);
    this.setLayout(gridLayout1);
    jPanel1.setLayout(borderLayout1);
    jPanel2.setLayout(gridBagLayout1);
    jPanel1.setBackground(Color.white);
    jPanel2.setBackground(Color.white);
    jPanel3.setBackground(Color.white);
    jLabel2.setBackground(Color.white);
    jLabel1.setBackground(Color.white);
    jLabel3.setBackground(Color.white);
    jLabel4.setText(" ");
    jLabel1.setText(" ");
    jLabel2.setText(" ");
    jLabel3.setText(" ");
    this.setBackground(Color.white);
    this.add(jPanel1, null);
    jPanel1.add(PB_FUNDS_PROGRESS, BorderLayout.CENTER);
    jPanel1.add(jPanel2, BorderLayout.SOUTH);
    jPanel2.add(jLabel2, new GridBagConstraints(1, 0, 1, 1, 0.0, 0.0,
     GridBagConstraints.WEST, GridBagConstraints.NONE, new Insets(5, 0, 5, 0), 0, 0));
    jPanel2.add(jLabel1, new GridBagConstraints(2, 0, 1, 1, 0.0, 0.0,
     GridBagConstraints.CENTER, GridBagConstraints.NONE, new Insets(5, 150, 5, 5), 0, 0));
    jPanel2.add(jLabel3, new GridBagConstraints(0, 0, 1, 1, 0.0, 0.0,
     GridBagConstraints.WEST, GridBagConstraints.NONE, new Insets(6, 5, 4, 150), 0, 0));
    jPanel1.add(jPanel3, BorderLayout.NORTH);
    jPanel3.add(jLabel4, null);
    propertiesFile = this.getCodeBase().getFile().replaceAll("%20", " ")+"funds.properties";
    System.out.println("Properties file at " + propertiesFile);
    values = new Properties();
    try
      values.load(new FileInputStream(propertiesFile));
      fundsTarget = new Double( values.getProperty("TARGET", "100").toString() ).doubleValue();
      fundsRaised = new Double( values.getProperty("RAISED", "50").toString() ).doubleValue();
      System.out.println("target: " + fundsTarget + " raised: " + fundsRaised);
    catch (IOException ioe)
      System.err.println(ioe.getMessage());
    percentComplete = (fundsRaised/fundsTarget)*100;
    System.out.println(percentComplete);
//Start the applet
public void start()
    PB_FUNDS_PROGRESS.setMaximum(new Double(fundsTarget).intValue());
    PB_FUNDS_PROGRESS.setMinimum(0);
    repaint();
//Stop the applet
public void stop()
public void paint(Graphics g)
    Graphics2D g2 = (Graphics2D)g;
    PB_FUNDS_PROGRESS.setValue(new Double(fundsRaised).intValue());
    String percent = Double.toString(percentComplete).substring(0, 4);
    jLabel4.setText("Currently At " + percent + "%");
    jLabel1.setText("100%");
    jLabel2.setText("50%");
    jLabel3.setText("0%");
//Destroy the applet
public void destroy()
public String getAppletInfo()
    return "Funds progress applet by A really nice person";
}

How to create a link to web page (URL) to a billing document

Hi,
I have an urgent requirement of creating a link to web page (URL) to a billing document.
I call the function module "GOS_EXECUTE_SERVICE" with :
ip_service = 'URL_CREA'
is_object-objkey = no billing document
is_object-objtype = 'VBRK'
is_object-logsys = 'BO'
ip_rwmode = 'E'
Then, I enter the title and the address.
And, I have the message : "The attachment was successfully created".
But when there's nothing in the attachment list of the billing document.
(Tha table SOOD contains the record )
If any one has some idea about his , how to achieve this functionality, can you please help me.
Thanks
Virginie
geoge bush
Posts: 6
Questions: 0
Points: 6
Registered: 7/9/04
Re: Attaching a file to a purchase Order from EP6 to R/3 4.6C
Posted: Jul 13, 2004 2:46 AM Reply E-mail this post
Hi Somaraju,
I am also looking for A CODE EXAMPLE TO ATTACH A DOCUMENT TO A AN sap OBJECT E.G. BUS222 AND ISUACCOUNT.
IF YOU'VE AN Example code that you can email me . it would be great.
thanks for the help.
geoge.

Hey,
If you are using Portal (not Framework), the below tag will do the trick
<wcdc:userProfile id="profileUserLink" immediate="false" text="#{security.userDisplayName}" shortDesc="#{security.userDisplayName}" xmlns:wcdc="http://xmlns.oracle.com/webcenter/spaces/taglib"/>
-K

How to create search help for Web Dynpro?

Hi all,
I have troubles when creating search help for web dynpro. I have visited this link /people/dirk.rehberg/blog/2006/12/27/generic-search-help-for-web-dynpro-for-java but I can't find this generic search help plug-in for download. If u have this plug-in can u share it for me or upload somewhere for download. Or anyone has already done this search help please help me solve this problem! Thanks in advance!

Hi Dinh Thieu Thien,
please place such a request to the appropriate forum "[Web Dynpro for Java|Web Dynpro Java;".
Thanks and regards,
Boris

How to get Upgrade Guide for Web AS 6.40 SP19

Hello,
Is there any one can help me to find the Upgrade Guide for Web AS 6.40 SP19 (Java, Windows)?
Thanks,

check
http://service.sap.com/instguides
Thanks
Prince Jose

How to create Chart within a web page NOT as seperate page?

Hi, I am using JCharts and am trying to figure out how (or if it is even possible) to create a chart and then place it in a web page. All the examples I've seen show you how to create a JPEG of the chart and then link to this image from your web page. Is it not possible to surround the JPEG chart with other HTML so that I can keep my web page logo and menu etc on the same page as the chart?
I can't find any examples which show how to surround your images with HTML as JCharts creates a JPG file and returns that in the Http Response e.g. "ServletEncoderHelper.encodeJPEG13(axisChart, 1.0f, response);".
My environment is Java 1.4.2, Struts and Tomcat 4.1.30.
Is there a way of drawing charts directly into a web page rather than displaying them on a seperate page as an image file?
many thanks in advance,
James.

Hi Hatton,
in html, there exists an img-tag. this tag contains a parameter called src. And if you want to embedd an image in your html-page, you will put the source of the image you want to display to the src-parameter. The same with servlets or java server pages. For the browser it doesn't matter where the html comes from. it doesn't matter if it has to be generated by an servlet-container like tomcat. So you write a servlet, which will create an image and make it accessible to your servlet container and then insert an tag like
<html>
<body>
<img src="http://yourdomain/servlet?param=value" width=aNumber height=aNumber>
</body>
</html>This can be done because servlets can be configured to response with images which can be created by java2d or something else...
I hope, this will help you...

How to create rounded corners for web site

I am interested in any help with creating rounded header and
rounded columns like at adobe home page. Whats the best way to go
about creating a page with rounded text boxes, rounded nav bars,
rounded logo box, etc..
Thanks,
Dennis

Rounded corners in Web pages now can be done best with CSS3. A lot of contemporary browsers support them -- Firefox, Opera, Chrome, Safari. IE doesn't support rounded corners (not yet), but this will happen somewhere in the future...
CSS3 rounded corners: a basic how-to:
http://www.css3.info/preview/rounded-border/
Of course, you can also use rounded corners in a Fireworks image, then apply the corners to the HTML elements via CSS; this will work in all browsers, including IE. There are a lot of tutorials over the Web which cover this topic, too

How To Create A Technical For Web AS ABAP ???

Hi experts,
How to Create a Technical System For Web AS ABAP in SLD, Using "SLDAPICUST" And RZ70 Transaction Codes.
Please Give me Complete Steps And Support to Create TS in SLD Successfully
If Ur Answers Are Help full Means Points will be Rewarded
Regards
Khanna

Hi Prateek,
I Did the Things Which is Presented By Michal in This Blog.
But When I Executed RZ70 With My Gateway Service as "sapgw01" And the Gateway Host As "Server Host Name".
I Got the Error When I Click on "start Data Collection" After Execution of the Program As Follows
"Used RFC destination :SLD_NUC"
"RFC call failed : Error opening an RFC connection"
"Batch job not scheduled"
All Other Are Success Like Data Collection ......
Please let me Know What to Do Now...
Regards
Khanna

How to create HD Video for Web

After watching HD movie trailers on the Apple Web site I was wondering if anyone has information on how I can create 480P Video clips of my own work for my website? At the moment, I use compressor and the settings for Large DSL. It's good, but I'd like to basically copy the apple site, and give viewers the option of watching my work in HD if they want to.

I agree with Mr. Wolsky's advice for YouTube. However, I get the feeling sampan would rather have small file sizes for quick upload rather than high quality.
Without Compressor, it seems the smallest file can be generated using Share->Apple Devices... and selecting the iPhone option. If you want smaller than that you need Compressor unless you have another non-Apple compression tool that could be used to further compress the output.

How to create an url for bsp page to access in IE?

hi friends,
I am new to BSP topic.
I have created 4 BSP pages. and 1 Main BSP page. Now in Main BSP page i attached all the 4 BSP pages links.
Now when i test the Main BSP page it will show all the 4 BSP page links. All are working fine.
But the end user has to access this through IE by typing Main BSP page full path. It's some what becoming critical to enter full path. It will be access in internally(intranet) only not outside.
For this i want create an URL like http://empess.
When the user type this URL http://empess in IE and press enters then my main BSP page has to open.
How to do this. any helps will appreciate...
Regards,
Shree.

hi,
As u said i created External Alias as /ITCESS to my BSP application.
And i select my BSP application name from the Target Element tab. Then i selected the alias name i right clicked on it, i selected TestExt. Alis option. It's working fine.
But now the problem is, i want this to display in IE direclty, when user type the /ITCESS in Internet Explorer addres bar.
Regards,
shankar.

How To Create An Excel like Web Page?

Hi All,
Apex 4.1
I have created n interactive report which was converted from a spreadsheet. This is a very long report of 100 columns display. So the user got tired in scrolling it left to right and vice versa.
How can I make it behave like excell spreadsheet in which the selected first 3 primary-key columns will be displayed fixed on the left most region and the succeeding columns will be displayed by batch of 10 columns.
which will just fit on 1 page and no need to scroll too long to the right most part. Maybe there is a button "next>" or "<previous" to scroll from left to right and vice versa?
Can you give me links to sample demo apps that demonstrate this kind of usage?
Thanks a lot,

KinsaKaUy? wrote:
Yes, thats exactly what I wanted....but why not free :(If you want it free, then create a Classic Report instead and use this solution by Jari
http://dbswh.webhop.net/dbswh/f?p=BLOG:READ:0::::ARTICLE:59900346164562
http://dbswh.webhop.net/dbswh/f?p=BLOG:READ:0::::ARTICLE:303800346302715
I got an Idea... Say I will divide the 100-column report into 10-column report and each has the 3 primary key columns on the right attached. so I will have 10 individual pages but sharing same Tab?
How do I create a button "Next>" and "<Previous" so that the page will be displayed sequentially?You need to maintain the current page in session state and on "Next>" and "<Previous" action increment and decrement the value

How do i fix my printer when it won't show the print preview for web pages? it worked and now not.

how do i fix my printer when it won't show the print preview for web pages? it worked for a while and now it doesn't. printer is an hp officejet 7310 all-in-one.

I would suspect this is a hardware issue. The rollers are probably having issues picking up the relatively smooth thick media. You might have better results be cleaning the paper pickup rollers with a damp paper towel. Also make sure the paper is snugly loaded and the paper guides have been correctly positioned.
Regards,
Bob Headrick, MS MVP Printing/Imaging
Bob Headrick, HP Expert
I am not an employee of HP, I am a volunteer posting here on my own time.
If your problem is solved please click the "Accept as Solution" button ------------V
If my answer was helpful please click the "Thumbs Up" to say "Thank You"--V

I want Full Documentation for Web Page Composer to Create Full Fledged site

Hi Experts ,
I want to know the Full fledged Information And Docs how to make Intranet website Using WEb Page Compopser .
Send me ur Docs and pdf * ANy screenshots to : venkat685atgmail.com
Regards ,
Venkat

Hi Venkat,
You might want to check the following resources for creating web sites:
- SAP Help [Creating and Publishing web sites|http://help.sap.com/saphelp_nw70/helpdata/EN/46/792f9b608c0ad3e10000000a11466f/frameset.htm]
- Web Page Composer content creation [blog|https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/5924] by Roland Wilfer (check also Christopher Kaestner blogs about additional WPC features)
Hope this helps.
Best Regards,
Joseph

How can i see visitor statistics for web page hosted on osx lion server

Hello
how can i see visitor statistics for web page hosted on osx lion server
Thanks
Adrian

Just click inside the url address bar. Full url address highlighted, will appear.
Best.

How to guide for Web Dynpro

Could u please tell abt " How to guide for Web Dynpro ".
Where i can get details for webDynpro
Regards,
Vibhuti

Hi,
Check with SDN link.
Getting Started with Web Dynpro [original link is broken]
Also Check with the SAP Help link.
http://help.sap.com/saphelp_nw04/helpdata/en/a5/1a1e3e7181b60ae10000000a114084/content.htm
Regards,
Maha

How To Create Style Guides for Web Pages

Similar Messages

Maybe you are looking for