静态网页制作实例

静态网页制作步骤

静态网页制作步骤：

第一步：制作一个静态网页之前，我们需要先制作一个网页1:1的效果图，又称静态网页效果图。制作静态网页效果图可以使用Photoshop CS4破解中文版制作。

第二步：将制作好的静态网页效果图进行PS切片。通过PS切片可将一张大的效果图切成多张小图片，以后可直接用在网页上。

第三步：使用HTML5和CSS3进行网页布局，网页布局遵从“先大后小，先外后里”的原则，先将整个静态网页大结构写出来，然后再按照效果图写各个部分的小版块。（这个部分需要有代码基础，可先学习HTML入门教程）

第三：制作网页上的特效，例如轮播图，需要使用JS代码制作。再将PS切片出来的小图片通过代码插入网页中，并且使用测试数据填充各个小版块，达到与效果图一样的效果。

第四：最后优化网页代码，删除冗余的文件，整理出一个简洁的静态网页，这样静态网页就制作好了。

扩展资料：

静态网页是标准的HTML文件，它的文件扩展名是。htm、.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。我们就叫做静态页面。

静态页面一般都是html格式，鼠标双击这个静态页辩型面，就可以打开这张网页，效果会跟图片设计的效果一样。那么这个静态页面就是一个网站了吗？这些静态页面掘高其实只是做网站或者做模板的材料而已。

在网站设计中，判灶尺静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含建站程序和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。

做一个简单的静态网页.

这个太简单了

你把下面的伍历代码复制到记事本上

然后把记事本的名字改为

你想要的名字

加上

点

加上html举例名字：

静态页面.html 注意：一定要让记事本显示扩展名

txt

然后再改

实在不会

加我QQ：1441773001htmlheadtitle很简单的一个静察橘纯态页面/title/headbody这就是一个简单败咐的静态页面body/html

静态网页制作

方法/步骤

1、新建一个txt文本文档，先不要急着修改文件后缀名，有基础的朋友手动输入HTML代码，不会也没有关系，百度搜索让兆“网页HTML代码”。

代码：

!Doctype html

html

head

title静态网页制作教程/title

meta charset="gbk" /

link href="css.css" rel="stylesheet" type="text/css" media="all" /

/head

body

/body

/html

2、基础的静态网页代码写出来了，下面在body/body中间添加网页需要的数据内容（链空文字、图片、表格、视频等），然后将txt文本文档的后缀名.txt修改为.html。现在点击打开看看效果！小编在body中间加入的文字：静态网页制作教程。

3、这样的文字太单调了，需要用CSS样式定义，小编在桌面上新建一个文件夹“web”，把index.html文件放进去，然后在web文件件里面新建一个txt文本文档，修改为“css.css”。

4、使用鼠标右键“打开方式”，选择txt文本文档编辑css.css文件。用CSS定义网页字体大小12像素，网页背景色为红色，字体颜色为白色。

代码：

body{font-size:12px;background:red;color:white}

保存，然后打开web文件夹中的index.html文件，查看效果。

5、下面在web文件下面新建一个images文件夹，然后打开软件Fireworks，设计自己需要的图片（没有就去百度搜索自己需要的图片，使用QQ截图功能，截取自己需要的图片），把设计好的图片存入web文件夹下面的images文件夹里面。现在我们在body中放入图片，让图片在网页里面居中。

代码：

div align="center"

img src="images/pic.png" alt="logo" title="静态网页制作教程" /

/div

把上面的代码放入index.html的body中，保存后打开看看效果！

小编在这里省略了表格和视频的制作，小伙伴棚滑瞎不知道的话，可以百度搜索一下。

整个简单的静态网页制作完毕。

用CSS样式制作一个简单的静态网页

html

head

titleCSS简单网页/title

style

#box{width:500px;height:500px;position:relatively;top:50%;left:50%;margin-top:-250px;left:-250px;background:#f00;color:#fff;}

/style

/head

body

div 差蠢id="box"这是一个简单的虚神陪水平，垂直居瞎弯中的盒子/div

/body

/html

如何用html写出一个静态的网页

如何用写出一个静态的网页

headtitle标题/title/headbody网站的内容部分，大概框架就是这样了/body/

如何搞一个静态的网页设计

会用Dreamweaver这个软体就可以了，百度一下peyoyo你就知道。

用Dreamweaver制作一个静态的网页

个性就自己做.不管好坏烂搜.就有个性了

如何用PSD做广告，静态的

用Photoshop软体设计就可以了，不过你本身要会用Photoshop软体才行，或是找个设计师帮你做了

如何用PS做出静态的飘动旗帜

用photoshop制作旗帜飘动效果，可以用变形，新增渐变，和时间轴设定动画帧及显示时间，用档案~储存为web格式~预览~图片另存为gif图片就可以了！详细制作过程建议网上搜有关教程学习！

谁能帮我做一个静态的网页，

网上有免费的留言本，你可以去申请缺孝个，静态的留言本不是不可能，可以用xml+做。至于其他页面，也不知道你是什么要求，光是一个连结用 a href="留言本的地址"留言本/a 就行了。要好看点，可以去下载原始码或者模板，网上很多免费的。

怎么发给你，百度HI你

如何用ruby做一个静态网页页面

重复就行了。滑鼠往下拉或者第二个也重复。 HTML 框架例项 HTML 框架例项伏历稿 1234

用VB写个网页程式，有静态的

Private Sub Command1_Click()

If Text1.Text "" Then

WebBrowser1.Navigate2 Text1.Text

WebBrowser1.Visible = True

Text2.Visible = False

End If

End Sub

JSP如何生成静态的页面?

public class HTMLMaker {

final static Object lock = new Object();

public static void makeHtml(String page, String filePath){

makeHtml(page,filePath,"UTF-8");

}

public static void makeHtml(String page, String filePath,String chartset) {

synchronized (lock) {

HttpURLConnection huc = null;

BufferedReader br = null;

BufferedWriter bw = null;

try {

huc = (HttpURLConnection)new URL(page).openConnection();

System.setProperty("sun..client.defaultConnectTimeout", "30000");

System.setProperty("sun..client.defaultReadTimeout", "30000");

huc.connect();

InputStream stream = huc.getInputStream();

bw = new BufferedWriter(new OutputStreamWriter (new FileOutputStream(filePath),chartset));

br = new BufferedReader(new InputStreamReader(stream, chartset));

String line;

while((line = br.readLine())!= null){

if(line.trim().length() 0){

bw.write(line);

bw.newLine();

}

}

}catch (Exception e) {

e.printStackTrace();

}finally {

try {

br.close();

bw.close();

huc.disconnect();

}catch (Exception e) {

e.printStackTrace();

}

}

}

}

}

引数解释:

page:jsp页面的网路地址，比如:www.qnphp.com:8080/xxx/index.jsp

filePath：生成的档案的储存路径

chartset：编码，不填预设utf-8。

思想：

把jsp档案开流读入，再用输出流写入到目标档案。