从ps切片到做成网页具体的操作步骤?初学者,望高手指点!!!
发布网友
发布时间：2022-04-23 16:17
共1个回答
热心网友
时间：2022-04-19 18:31
静态页面制作的步骤一般是：
1.搭建目录
根据需要建立设计的目录文件夹，如：css(存放css样式文件)，js（存放javascript文件），images（存放网站风格的图片文件），demo/uploads（存放演示数据）
【注意：这里有两个大的图片目录，网站的修饰图片存放在images目录下，演示的图片存放在demo或uploads目录下，很多程序员都不愿意去动你的静态目录，直接后果是很多演示图片数据被当作网站图片上传了。导致上传的时候压缩包很大！】
2.建立首页页面和全局样式
接下来就是在根目录新建index.html文件，并引用对应的css文件，js文件资源。
在这一步，你要制作好页面的版式布局，一般是使用css书写，例如，可以建立一个layout.css来放置这些样式，内容就是侧边宽度，内容区域宽度，左浮动、右浮动，清除浮动等内容。
你还要设计一下全局样式，一般放在common.css中，主要定义全局字体、字号，颜色，链接颜色，各种颜色的文本，各种修饰的文本，等...
然后你还需要为页面添加样式，页面比较少可以直接在common.css继续添加，页面比较多，则可以建立新的css，例如：index.css首页的样式，about.css关于我们的样式，ucenter.css用户中心的样式。这里你要设置页面内容的样式，如标题、边框、背景、图片宽高等~
【注意：html的书写尽量整洁，规范，注释齐全，css同样如此】
3.分离模板，完善其他页面
当你的首页完成后，差不多页面的模板已经出来了，通常，我们会把页面的头部，内容和页脚分离为：header.html,page.html,footer.html。这样，你就无需重复书写头部和页脚的模板代码了，当然，如果你的侧边栏也是固定的，你还可以分离出sidebar.html这样的模板页。
根据你的模板页，你就可以新增和完善其他页面的制作了。
4.兼容性测试，代码优化
兼容性测试可以分散在制作过程中，也可以最后统一验证。通常，你需要验证多个浏览器，IE6、IE8、chrome、火狐等~
代码优化，你要适当的精简你的代码，把重复的代码整合起来，把冗余的标签优化好，同时，你还要注意好命名的规范，尽量使用英文命名，而不是拼音或简拼命名。
到这儿你的静态目录就搭建好了，程序人员看到后就明白是怎么回事了，他可以很轻松的分离你的html到程序中，另外你的注释齐全，他或许还会夸你几句！：）
