Disclosure : This is an affiliate link, which means that if you visit Bluehost. April - April Licensing You can install the free version on as many computers as you like. Installation Step 1 : Once you have downloaded the program file, double click on the file to start the installation. Step 2 : Accept the license agreement. Step 4 : Select which of the programs you wish to install. An e-book also: eBook, ebook is an electronic or digital version of a book.
Many of them were written by my good friend Tina Clarke. Since I have chosen to use BlueHost as my hosting company, I will be adding tutorials for setting up your server space and using Expression Web with BlueHost.
Expression Web 4. Expression Web has a group on Facebook. If you are a FB user, come join us. Disclosure : This is an affiliate link, which means that if you visit Bluehost.
April - April Expression Web 4 This section will show you how to setup the program so you get started on the right foot. Tutorials This section offers tutorials on how to accomplish various tasks in Expression Web and more detail on various parts of the program. Migrating from FrontPage to Expression Web is the newest tutorial on our site. It will take you through some of the steps necessary if you are going to move your site from FrontPage any version to a standards compliant web editor, Expression Web.
Expression Web and Broken Dynamic Web Templates and hidden metadata files will give you some tips on what to do when you edit and save your Dynamic Web Template and all of the attached pages do NOT update. General Web Design Tutorials This section will offer articles and tips on web deisgn in general and includes such things as working with forms, and working with lists and tables. A few basic tips in selecting the font size for your web pages. Expression Web Add-ins Expression Web Add-ins are programs you install on your computer that add functions to EW that were not part of the original program.
By this, I mean that your web page will not automatically adapt to a modern smartphone's small screen, with the result that your visitors will have to zoom into the different parts of your web page just to be able to read your content.
Since this is not really desirable in a modern age where more and more people surf the Internet using a mobile phone, we will instead use the Layout Wizard to produce the page we need. Don't worry. It's free. And it produces a mobile-friendly web page using a method nowadays referred to as responsive web design , which is just a jargon-laden way of saying that your web page will automatically adjust itself to fit the different screen sizes of say mobile phones, tablets and desktop computers.
Since you will be switching between two web browser tabs and the Expression Web window in this section, I recommend that you highlight the step that you're currently reading each time you reach it, otherwise it's easy to accidentally skip a step.
Just drag your mouse over one or two words in that particular step to highlight it, so that you can locate where you were when you switch back. Doing this will save you the frustration of having to redo this entire section because you missed a few steps.
Many of the steps are similar, so it doesn't take much to get confused. Using your web browser, go to the Layout Wizard. Click the link in the previous sentence to go there. Do not close Expression Web. Just leave it running while you surf to that page in your browser. Scroll down to "Step 1 of 2", and click on the button for "Two columns with the side column on the left, a header on top, and a footer at the bottom" in the "Choose a Layout" section see picture below.
Nothing, of course, prevents you from choosing whichever layout you like. However, for the purpose of this tutorial, I will assume that you have selected the one I mentioned above. If you choose a different one, you will have to adapt my instructions to your site in the chapters that follow.
For complete novices, you may want to just follow my instructions for now, since it will be less confusing for you. You can always go back and redo things when you are more familiar with Expression Web and website designing. The wizard will show its "Step 2 of 2" page. Most of the items here can be left at their default values, since you can change things you don't like later in Expression Web itself.
In reality, this step is probably unnecessary for most people. However, it will make it easier for you if you happen to create some pages directly with Expression Web in the future, and mix and match them with pages generated by this wizard. As I said, it's just to simplify things for you in the future. Note, though, that this tutorial assumes that you have done this step. Read the condition s there, and if you agree, click the checkbox to indicate it.
The Results page will appear. Switch to Expression Web. Do not close the browser window containing the results. We're not done with it yet. A blank page will appear. You should see a series of tabs at the bottom of the blank page saying "Design", "Split" and "Code". Click the "Code" tab. The editor will now show you the underlying HTML code for that blank page. Click anywhere on that page. It doesn't matter where. You should see a blinking text cursor at or near the spot you clicked.
By this, I mean that you should hold down the "Ctrl" key on your keyboard, and while that key is still held down, type "a".
If you do it correctly, you will find that everything on the page is highlighted. Now hit the delete key on your keyboard. Everything should be erased and the portion of the screen that used to show the HTML code should now be completely blank. The code should automatically be highlighted.
Right click the section that is, click your right mouse button while the mouse pointer is hovering over the highlighted text. A menu should appear. Click the "Copy" line in that menu. Click "Edit Paste" from the menu. Click the "Design" tab near the bottom of Expression Web window. You will see a one column page instead of the expected two columns. That is because we have not completed copying and saving all the required code from the Wizard. A new blank page will appear. It's easy to miss it because the next few steps are similar to those above, and you may overwrite your HTML code with your CSS code if you don't.
This is especially the case if you have not been highlighting the steps as you take them. Switch back to the Wizard in your browser. Scroll down the page and click somewhere in the box in the "CSS Code" section.
The code should be automatically highlighted. Switch to Expression Web and click "Edit Paste" from the menu. The code you copied should appear in what was previously a blank area. A dialog box with the title "Save As" will appear. Type "styles. Make sure you type it exactly as I stated, with no spaces or capital uppercase letters. And remember, it's "styles. Click "Save" at the bottom of the dialog box.
When the dialog box disappears, you will see that the tab at the top of your code has changed to say "styles. Click "File Close" from the menu. You will now be returned to the HTML page you copied earlier. Type "index. Make sure you type it as I said, without capital letters or spaces. That is, it's "index. HTML" or anything else. When you do that, you will be returned to your web page.
It should now be formatted as two columns with some placeholder text and a heading of "Welcome". Don't worry about the plainness of it all. We will replace the dummy text with your real content and spruce up its appearance over the course of these few chapters. If you do not see two columns, it may mean that you missed the steps where you saved the CSS code into "styles.
If so, you should return to the start of the section and redo everything. This time, I suggest that you highlight the steps as I mentioned in the initial paragraph, so that you do not accidentally skip anything. Another possibility is that you saved the "index. If the latter is the case, close all files by clicking "File Close All". You should now be looking at Expression Web's Site View. There should be two files listed there: "index. If there is only one, it means you missed several steps above.
Return to the start of this section and do everything again. Otherwise, if both the files are there, doubleclick ie, click twice in quick succession on the same spot "index. It should be fine now. Before you do anything else, let me explain some of the common terms that webmasters use to refer to the different sections of your web page. This will make it easier for you to understand me when I refer to those things throughout this tutorial series.
At the top of your page, you should see the words "Placeholder content for your header section [etc]". This section, which spans both the left and right columns, is sometimes referred to as the header section or the masthead.
In chapter 2, you will be placing your website's logo here. Below that are the two columns of your site. The left column is narrower, and functions as the "side column". It is also variously referred to as the "side bar" or "navigation column". You will be placing your navigation menu like the buttons you see at the side of thesitewizard. The right column is where your main content will be placed.
It is sometimes referred to as the content or main column. You will be working on this portion of the page in this chapter itself. At the bottom of the page is another section that spans both columns. This is the footer of the page. Webmasters typically place their copyright notice here. Websites that don't put a navigation menu in the side column also sometimes put a list of links here that function as a navigation menu.
You will also be replacing the words in the footer in this chapter. Note that although the page looks similar but not identical to how it will appear in a web browser, with the links underlined in blue, remember that Expression Web is not actually a browser but a web editor.
0コメント