网站制作教程 .pptVIP

仿制网站 网站制作基础 1.将要参照的网页,另存为:网页全部类型,英文命名 2.查看源文件,查找相应的CSS文件位置 3.将缺少的图片利用CSS查找到或者在网站上直接保存的图片文件夹 4.打开下载的网页,删除原文字部分,换成自己的文字或代码 5.将修改好的代码应用 于网站 独立制作 网站制作基础 以PHPCMS为例 1.进入网站后台,模版风格,方案管理中,看采用的哪套方案 2.在网站根目录下寻找templates文件夹,并定位到相应的方案文件夹 3.在相应的版块下添加新的模版页 文章频道对应的是article 图片频道对应的是picture 实际应用 网站制作基础 以PHPCMS为例 PHPCMS后台模版结构(templates目录下) 首页 对应目录phpcms 对应文件 index.html 文章频道首页 对应目录article 对应文件 index.html 图片频道首页 对应目录picture 对应文件 index.html 下载频道首页 对应目录down 对应文件 index.html 实际应用 网站制作基础 PHPCMS的模版基本分三种模版类型 首页 (网站首页 频道首页) index.html 频道栏目列表页(多栏目列表category.html 单栏目列表category_list.html) 内容显示页 content.html 独立制作 网站制作基础 1.进入网站后台,模版风格,方案管理中,看采用的哪套方案 2.在网站根目录下寻找templates文件夹,并定位到相应的方案文件夹 3.在相应的版块目录下添加新的模版页 同类型模板都以模板类型为前缀,后面以中划线分割（命名规则：模板类型-特征名，同类型模板特征名不同）。 如index-newyear .html index-shiwu.html 独立制作 网站制作基础 1.进入网站后台,模版风格,方案管理中,看采用的哪套方案 2.在网站根目录下寻找templates文件夹,并定位到相应的方案文件夹 3.在相应的版块目录下添加新的模版页 同类型模板都以模板类型为前缀,后面以中划线分割（命名规则：模板类型-特征名，同类型模板特征名不同）。 如index-newyear .html index-shiwu.html 实际应用 网站制作基础 为了修改方便,每种模版都分成3部分 头部内容 header.html 中间主体 页角内容 footer.html Index.html {template phpcms,header} {template phpcms,‘footer} Css 盒模型 网站制作基础 每个HTML元素都可以看做是装了东西的盒子，盒子里面的东西与盒子的边框之间的距离即填充（padding）,盒子本身有边框（border）,每个盒子与其它盒子之间的距离称为边界（margin） Css 盒模型 网站制作基础 填充，边框，边界都有上右下左四个方向，即可以一起定义，也可以分别定义 Css 盒模型 网站制作基础 Css 盒模型 网站制作基础 注意：如盒中没有内容，即使定义为100也不会显示 BUG Css在IE6,IE7,FIREFOX中有显示不同，需要分别测试 缩写 网站制作基础 由程序生成的代码啰嗦，如padding属性，系统会自动分成四部分实际可以写在一起。 .new { padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; } .new { padding： 2px; } 类似的还有背景background 边界margin,边框border等式 缩写 网站制作基础 缩写 网站制作基础 多用组合 body,.menu,table{border:0} 图片及动画 网站制作基础 Jpg gif swf 页面设计师 网站制作基础 页面设计 网站制作基础 规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 　　1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；　　2、内容部分又可分为侧边栏、主体内容；　　3、底部，包括一些版权信息。 页面设计 网站制作基础 页面设计 网站制作基础 根据上图，画一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。  页面设计 网站制作基础 DIV结构如下：　　│bod