How to create SEO friendly, responsive "Coming Soon" page? [was:Help please! I am very new!]

Hi Guys,
First off, this is my first post, and will be one of many, as the Dreamweaver bug his bitten, and bitten hard!
I am new to web design, and am learning Dreamweaver and want to become a web designed after hours as a second job/hobby.
I am currently (unsuccessfully) working on getting a "coming soon" page up and running.
I would like the image to be scalable - however then all my text goes everywhere. I cant have it as a image as then Google doesn't index it, as well as i need to have a hyperlink in the body of the text.
If someone could point me into the right direction, I would be forever thankful!
I have attached the code:
<html>
<head>
<title>coming soon page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
          background-image: url(background.jpg);
          background-repeat: no-repeat;
#content {
          position: absolute;
          left: 70px;
          top: 468px;
          width: 912px;
          height: 120px;
          z-index: 1;
          font-family: calibri;
          font-size: 30px;
          color: rgba(255,255,255,1);
a:link {
          color: rgba(255,255,255,1);
          text-decoration: none;
a:visited {
          text-decoration: none;
          color: rgba(255,255,255,1);
a:hover {
          text-decoration: none;
          color: rgba(255,255,255,1);
a:active {
          text-decoration: none;
          color: rgba(255,255,255,1);
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="content">The webstie for Hurstar Investments is currently under construction and will be live shortly. If you have any enquiries in the interim, please email us at <a href="mailto: [email protected]">[email protected]</a>. We look forward to hearing from you.</div>
<table id="Table_01" width="1025" height="768" border="0" cellpadding="0" cellspacing="0">
          <tr>
                    <td width="1024" height="29" colspan="5">
                              <img src="images/spacer.gif" width="1024" height="29" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="29" alt=""></td>
          </tr>
          <tr>
                    <td width="708" height="339" colspan="3" rowspan="2">
                              <img src="images/spacer.gif" width="708" height="339" alt=""></td>
                    <td>
                              <img src="images/logo.jpg" width="274" height="229" alt=""></td>
                    <td width="42" height="739" rowspan="8">
                              <img src="images/spacer.gif" width="42" height="739" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="229" alt=""></td>
          </tr>
          <tr>
                    <td width="274" height="211" rowspan="3">
                              <img src="images/spacer.gif" width="274" height="211" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="110" alt=""></td>
          </tr>
          <tr>
                    <td width="70" height="400" rowspan="6">
                              <img src="images/spacer.gif" width="70" height="400" alt=""></td>
                    <td>
                              <img src="images/header.jpg" width="414" height="79" alt=""></td>
                    <td width="224" height="101" rowspan="2">
                              <img src="images/spacer.gif" width="224" height="101" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="79" alt=""></td>
          </tr>
          <tr>
                    <td width="414" height="22">
                              <img src="images/spacer.gif" width="414" height="22" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="22" alt=""></td>
          </tr>
          <tr>
                    <td colspan="3"> </td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="121" alt=""></td>
          </tr>
          <tr>
                    <td width="912" height="35" colspan="3">
                              <img src="images/spacer.gif" width="912" height="35" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="35" alt=""></td>
          </tr>
          <tr>
                    <td colspan="3">
                              <img src="images/footer.jpg" width="912" height="59" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="59" alt=""></td>
          </tr>
          <tr>
                    <td width="912" height="84" colspan="3">
                              <img src="images/spacer.gif" width="912" height="84" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="84" alt=""></td>
          </tr>
</table>

</body>
</html>
PS: Using Dreamweaver CS6 if that makes any difference.
Again, thank you sooo much!
SiD24

I would like the website to ajust automatically to different brower sizes without having white on the sides, and the text moving all over the place.
Try this % width layout. Copy & paste code into a new, blank document in DW. SaveAs test.html. Preview in browsers at various viewport widths and text sizes.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document, 1-Col</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
img {
    max-width: 100%;
    vertical-align: baseline
body {
    padding: 0;
    width: 90%; /**adjust width in px or % as required**/
    margin: 0 auto; /**this is centered**/
    background: #F5DD83;
    color: #505050;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    box-shadow: 2px 2px 4px #333;
header {
    margin: 0;
    padding: 0 1%;
    width: 100%;
    background: #B00202;
    color: #FFF;
header h1, header h2 {
    display: inline;
    color: #F5DD83;
    padding: 0 1%;
/**top menu**/
nav {
    background: #69C;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold
nav ul {
    margin: 0;
    padding: 0;
nav li {
    list-style: none;
    display: inline-block;
    margin: 0 1%
/**menu link styles**/
nav li a {
    color: #FFF;
    text-decoration: none;
    line-height: 2.5em;
    padding: 6px;
    border: 1px solid #CCC;
/**on select or mouseover**/
nav li a:hover, nav li a:active, nav li a:focus {
    background: #CCC;
    color: #505050;
/**main content**/
article {
    padding: 2%;
    background: #FFF;
article h3 {
    color: #2294AE;
    margin-bottom: 0
article p { margin: 0 0 1em 0 }
figure {
    text-align:center;
figcaption {
    text-align: center;
    font-style: oblique;
    font-size: small
footer {
    background: #B00202;
    color: #FFF;
    text-align: center;
    margin: 0;
</style>
</head>
<body>

<header> <h1>Sitename</h1>
<h2>Some pithy slogan...</h2>
</header>

<nav>
<ul>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
</ul>
</nav>

<article> <h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<figure> <img src="http://placehold.it/500x325" alt="placeholder">
<figcaption>Figure 1 Caption</figcaption>
</figure>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</article>

<footer> <small>© 2014 Your Site Name. All rights reserved</small> </footer>
</body>
</html>
Within the body of the contect, there needs to be a email link - so I assume that would be a div section.
Publishing your e-mail address is an open invitation to spammers and e-mail harvesters who will flood your inbox with junk. If you want people to contact you, use a contact form and a form-to-email processing script that hides your e-mail address from robots.
Nancy O.

Similar Messages

How to create more instances for this text game. Help please!

Hey guys, so far this code works great, but I'm trying to add more questions and answers to this and I'm having trouble doing that. I've tried using different methods and just going from method to another, but I can't seem to get it to work right. Should I be able to do it with different methods or is there another way I should be doing this?? I also want to add a score to this game as well. Adding points for each correct guess and I searched online trying to find a point to start, but couldn't quite get a hold on it. This is just something that would be cool to add, but isn't necessary if you don't think you can help me out. Thanks for checking this out and for the help!!
public class TextShuffleGame
     private CinReader reader;
     public TextShuffleGame ()
          reader = new CinReader();
     public void go ()
          System.out.println("");
          System.out.println("Welcome to Text Shuffle.");
          int tries = 0;
          boolean correctGuess = false;
          while (correctGuess == false && tries < 5)
          System.out.println("What 6-letter word is made up from the letters \"dunops\"?");
          String guess3 = reader.readString();
          String answer3 = "pounds";
                    if (guess3.equalsIgnoreCase(answer3))
                         System.out.println("Hooray! You are correct!");
                         correctGuess = true;
                    else
                         System.out.println("Sorry, Try again!");
                         tries++;
          public static void main(String[] args)
          TextShuffleGame thisClass3 = new TextShuffleGame();
               thisClass3.go();
}

If I understand you correctly, you want to add more words to the program. If so, then create an array or some other Collection to store a bunch of words. Then you need to randomly select a word from the list. Create another method to randomly shuffle the letters and display that instead of hardcoding it. Then when a user types a guess you compare it to the word in the list, once again instead of hardcoding it.

How to create Service and response profiles

Hello Gurus
I have configured the IC Web Client in solution manager 4.0 system. But in sservice ticket i am not able to see the SLA info. Please tell me
where to give these SLA parameters ?
How to create service and response profiles?
Shuold i use SLF1 instead of SLFN to maintain SLA ?
Please tell me how to do these it will be very helpful....

Hi Naveen
The Service and Response Profiles can be created in the easy access menu using the path
SAP Menu> Service> Service Contracts and Service Plans--> Maintain availability and Response Time
Availability time is also know as service profile
And then assign these service and response profiles to your Servie Product Master which will be used in the service ticket.
For the field to be available to enter teh service and response profile in the product master, assign the set types COMM_PR_SRV to the category in which the product will be created
Hope this would help.
Regards,
Rekha Dadwal
<b>
You gain a point for every point that you reward. So reward helpful answers generously</b>

How To Create On Submit Button For Master_detail Page ?

I have adf page that is master And detail view.
i want to have one submit button for master and detail block

Duplicate of How To Create On Submit Button For Master_detail Page ?
Please don'r post your question multiple times.
Timo

Coming Soon page for iPhone

any chance that apple would update the Coming Soon page for iPhone in other countries, coz the list seems to be the exact same since forever !!

Hi
you may do better in the Developer or even the iWeb sections - but possibly the iPhone is designed to display regular (much wider than 480) pages w/o scrolling, so defaults to 'squeezing' yours to suit that.

How to create mail labels, Avery 5160, using Pages?

How to create mail labels, Avery 5160, using Pages?

The application Contacts holds all your addresses and telephone, email etc details.
It has a comprehensive set of Avery labels in its print dialog.
You select the Contacts or groups of Contacts you want to print then in the Print dialog click on Show Details where you can choose Style : Mailing labels and choose which labels you want.
Peter

How to create booklet from ordinary text in pages?

Can anyone tell me how to create a booklet from ordinary A4 pages either in Microsoft Office with Parallell Desktop or in Iwork pages?

See Imposing booklets.
Peter

I'm finding it difficult creating exporting EPUB from pages. Help please!

Hello,
I'm finding it quite complicating on how to create and export EPUB files from pages so I can use these to send to iBooks on the iBook store.
Can someone please tell me in the simplest term, how to create and export an EPUB file in pages please???
Thank you!

That's fine. If I wrote my book on pages on iPad, could I send via email as pages doc to my mac then open in pages on my mac and then export to EPUB from my mac?
I like writing on the move.
Thanks

I don't know if this is a Firefox problem so I ask, When printing how come it always prints so small I nearly need a magnafing glass? Is this caused by something else I may have set incorrectly? help please, from a very satisfied Firefox user

I don't know if this is a Firefox problem so I ask, When printing how come it always prints so small I nearly need a magnifying glass? Is this caused by something else I may have set incorrectly? help please, from a very satisfied Firefox user

This only happens when I'm in my browser. Ex. when I'm on a site and I decide I like what I see and want to print it text that is, my printer always prints tiny. When I'm in Microsoft Word for ex. I print it and it looks like what I expect. So I don't know if somehow my printer got set to print tiny when on the web. If you can help me I would be most appreciative. Thanks again for your response.

When I click on a web page link, it creates a bookmark does not open page, need to right click and open new page or tab

When I click on a web page link, it creates a bookmark does not open page, need to right click and open new page or tab

My own problem not a system one

Crawlable SEO Friendly Responsive Flash player

I want to have a responsive flash player that has an alternate HTML version (crawlable for search engines) and so far i have challenges with the integration.
I'm able to have the html version working but i am struggling with the responsive part. Here's my code:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="movie_name" align="middle">
    <param name="movie" value="movie_name.swf"/>
    
    <object type="application/x-shockwave-flash" data="movie_name.swf" width="550" height="400">
        <param name="movie" value="movie_name.swf"/>
    
        <a href="http:www.spytronic.com/fr-ca/liste/cameras-de-surveillance">
            Video link about cameras de surveillance
        </a>
    
    </object>
    
</object>
So that's pretty straight forward, now the part i'm struggling with is the original width and height as attributes in the object tag. What i think i need is a
jQuery function that runs once the document markup has loaded. With the selector object[type="application/x-shockwave-flash"], jQuery would pick up all flash objects on the page.
The way that i see it is each object in the array tube will store the object reference itself, its width and height. So i have so far:
var tube = [];
$(document).ready(function() {
    $('object[type="application/x-shockwave-flash"]').each(function (){
        tube.push({
            element: $(this),
            height: $(this).attr('height'),
            width: $(this).attr('width')
And
$(window).resize(function() {
    clearTimeout(rebuild);
    rebuild = setTimeout(function() {
        $.each(tube, function (i, value) {
            tube[i].element.height(tube[i].element.width() / tube[i].width * tube[i].height);
    }, 100);
Do you think this approach is good (cross-browser), resizable and seo friendly ?

Your going about this all wrong. You should be using HTML5 video with MP4, OGV and WEBM files. You'll find lots of file converters online. This covers the largest target audience and works in all modern web devices. So you don't need Flash anymore.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Video</title>

</head>
<body>

<video controls>
<source src="YourVideo.mp4" type='video/mp4' />
<source src="YourVideo.webm" type='video/webm' />
<source src="YourVideo.ogv" type='video/ogg' />
NOTE: If you see this message, you're using an outdated
browser that doesn't support this type of video.
For a better web experience, please switch to a modern browser.
</video>

</body>
</html>
Nancy O.

How to create ePUB with full size images/pages to adjust according to device?

Friendly Greetings,
        I have been trying, for nigh on two months, to convert/create my 7 books that are in print into eBooks; with first publishing scheduled to be Nook, with Kindle on the eventually list. I am, sadly still working on just getting the first one published! And I could really use any assistance to get this figured out. My intent was to publish several weeks ago...now my desperation is to publish before the weather gets too warm and kids are outside most of the time...or at least no later than Easter. :0)
        First and foremost, my books are picture/poetry books for kids of all ages. They were fully designed in Photoshop, where I also created the full size images for the first eBook. I received the specifications from B&N for the various Nook devices. Under the assumption that it would be best to create the largest of the files, thus allowing smaller sized devices to adjust the page accordingly to fit and the largest would not overstretch a smaller image, I sized my pages to 1280px x 1920px at 72dpi. (now I hear 150 is standard??)
        My text is included within the image as the design is one image = one page. I included a full text only version of the story/poem at the end for those wishing to adjust text or use a voice reader. I obviously have all the original files, but for publishing they were all saved as JPGs.
        After quite a struggle and a whole lot of frustration I managed to complete the manuscript in Barnes and Noble's Nook Press Manuscript Editor. My internet is molasses and thus much of this was done in the wee hours of the morning when the rest of the time zone is asleep. I only had one page with an issue, of an extra blank line/space that was irreparable. I published, and found it was completely botched in publish, though the preview looked a-okay. Only about the top left 1/6 of each image/page was visible in either my laptop's Nook for PC or my Android Tablet's Nook App. So I agonizingly awaited another 10 hours, hoping no one would buy my book during that time, for it to be removed from sale.
        I downloaded a trial of InDesign CC, and after two weeks of not even being able to create a single new document for some screwy reason, I bought a month's subscription. So far I'm not entirely convinced of this whole Creative Cloud malarkey, especially considering...as like I said my internet is slow...it took me nearly 20 hours just download the software. (Is it really that difficult to offer disc, seriously?) After a chat and phone call I can, in theory, now use InDesign.
        I created a New Document for Digital Publishing at the aforementioned specs (1280 x 1920 px). I made the rectangle placeholders the full size of the page, and place one image per page. This usually inserted the image at about 50% and I would have to select 100% and then move as necessary in to place.
        Thus, my first question is: Is there a way to place an image at 100% without having to do that extra resizing step? Or if there is an alternative way to place the image to the full size of the page without any of those other steps that would be lovely too.
        Okay, after placing several pages/images I also selected each and went to Object Export Options and Checking the Custom Rasterization and "Resize to Text Flow". I then exported a trial ePUB to see what it would look like. On both the PC and Tablet in landscape mode it was a far cry better than the other, but about oh a 1/3 of the bottom of each page was cut off. On the tablet I rotated to portrait and voila full page. Woohoo! But alas, I don't want to limit it.
        Is there something I am doing wrong? Did I miss a step or two somewhere so that the full image will fit on the page? I feel like I'm just about to turn the page on this thing, but it's stuck to the one after that.
        I would greatly appreciate any insight, tips, help that anyone can offer. I have run the gauntlet of Barnes and Noble...cough, cough...support and apparently I ask questions which no Nook Press rep can answer and the forums over there have no clue about InDesign. It's almost as if with all the fantastic beautiful screens out there today nobody wants picture books! How does National Geographic do it?!
        Thank you very kindly.
In case it is necessary: My laptop uses Window 7 Pro 64-bit, InDesign CC is 64-bit and my 10.1 tablet uses Android. I can view the EPUB files in Nook for PC and Nook for Android. I also have Kindle, LumiRead, and various other apps on the tablet. I can also have someone preview the finished epub, if need, on a Mac, iPad, and/or Android phone...though I do not have any of these. Not sure who has a Nook I can look at though. Thanks again.

Q: Is there a way to place an image at 100% without having to do that extra resizing step?
I think here you want your images to fit in the full page size frame automatically. For this you can try the follwoing steps:
1. Create a new doc
2. Goto Object menu and choose Frame fitting options
3. Select Autofit and from Fitting drowdown, select "Fit content to frame". Refer the screenshot below:
After this you images should automatically fit in the entire page placeholder frames. Please let me know if this does not work or if the problem you are facing is different and I did not understand your problem correctly.
Regards,
Pooja

How To create a message Choice for a page?

Hi,
I need to create a message choice for a page and on selection of that it should navigate me to next page..like
ex:
If iam havng 10 locations like Delhi,Hyderabad,Chennai....
I need to select one of them and it should be navigated to next page based on the above selection...These values are to be retrieved from database...
Can u gimme any idea..how to proceed?

Maybe something like this will help.
On your <af:selectOneChoice/> component configure a valueChangeListener and set autosubmit to true.
In your valueChangeListener change the current view like :
public void handleValueChanged(ValueChangeEvent valueChangeEvent) {
// Add event code here...
if (!PhaseId.INVOKE_APPLICATION.equals(valueChangeEvent.getPhaseId())) {
valueChangeEvent.setPhaseId(PhaseId.INVOKE_APPLICATION);
valueChangeEvent.queue();
} else {
// add additiional app functionality here
ControllerContext controllerContext = ControllerContext.getInstance();
ViewPortContext viewPortContext = controllerContext.getCurrentViewPort();
viewPortContext.setViewId("test");
Regards,
Kenneth
The deferred execution of ValueChangeEvent is necessary as the ViewID can only be changed in INVOKE_APPLICATION phase.

How to create a radio button on OA Page using Personalization

I am trying to create a radio button on OA Page using Personalization. The item style , I can see is Message Radio Group.
How to create Message Radio Button and bring them under one group.
Thanks

You should use jdev to define a radiogroup and radio buttons under that, wrap that definition inside a stackLayout in jdev, use personalization to add a stackLayout and extend the region which you had created earlier in jdev.

How to create a Table of content in pages?

I am using iPad pages, and figuring out how to create a table of content.

I would say: Try and Error. Create a copy of your document and unmark in the copied document in the document inspector all boxes for the TOC. Then mark them again. Maybe you should also delete the paragraph styles and mark them again. If that doesn't work, try to copy the complete text of your document to a new created one. Maybe that works.
Good luck!
P.S.: If that doesn't work look here. Maybe this helps.

How to create SEO friendly, responsive "Coming Soon" page? [was:Help please! I am very new!]

Similar Messages

Maybe you are looking for