首页建站经验 网页制作规范及流程

网页制作规范及流程

--主页备份 Works 1、txt 文本 2、scan 扫描图片 3、psd 设计原图(包括AI、Flash、Banner等等) 4、htm 网页文件 5、htm_old* 旧的网页文件备份 --html的目录结构 1、打开网页…

--主页备份 Works
1、txt 文本
2、scan 扫描图片
3、psd 设计原图(包括AI、Flash、Banner等等)
4、htm 网页文件
5、htm_old* 旧的网页文件备份

--html的目录结构
1、打开网页排版软件Dreamweaver的site网站管理视窗,按栏目内容建立子目录;
2、在每个主目录下都建立独立的images目录,不要将所有文件都存放在根目录下;
3、所有的文件夹名和文件名用小写字母,并取与中文意义对应的英文文件名。

--HTML源代码
1、字符集的设定:中文版用GB简体码gb2312,英文版用iso-8859-1字符集;
2、每个页面都要写标题,不同页面根据其主题注不同的标题; <BR>3、外国公司的首页面注上<meta>字段便于搜索引擎查找(如:description、keyword); <BR>4、要包含全部图标<img>的长宽值和alt属性(注释文本)。 </P><P>--表格的应用 <BR>1、整个页面不要都套在一个表格里,尽量拆分成多个表格; <BR>2、表格嵌套层次尽量要少; <BR>3、能用表格定位的尽量少用层。 <BR>--使用分栏(frame) <BR>避免分栏边界被隐藏,使一些栏目内容也被隐藏起来。 </P><P>--文字 <BR>1、用css定义字体大小、行间距(建议使用"外部链接"方式,将css的设定作成一个单独的文件,在每个页面里都调用它); <BR>2、避免文字错误和内容放置错误(以客户资料和制作要求为准); <BR>3、中文文本每行开始空两格。 </P><P>--图片 <BR>颜色丰富或渐变的图片(如产品图片等),建议用JPG格式;颜色单调的图片(如LOGO、文字按钮等),建议用GIF格式。 </P><P>--链接 <BR>1、不要有错误链接、出不来的图像(包括由于文件名大小不一致或路径不对引起的错误); <BR>2、所有次页面包含一个返回首页的链接。 </P><P>--效果与速度 <BR>1、网页应该保持较小的字节数,过大的文件分成若干个页面; <BR>2、在不影响图片效果的前提下合理压缩图形文件。 </P><P>--浏览器兼容性 <BR>同时兼顾IE和Netscape两种浏览器及多种分辨率等情况,避免排版出错。 </P><P>--其它 <BR>确认公司简介包含公司全部相关信息,包括通信地址、电话、E-mail和联系人等。</P> </SPAN> </div> <nav class="navigation pagination" aria-label="文章" style="display: block;padding: 0px;border: 0px;"> <h2 class="screen-reader-text">文章导航</h2> <div class="nav-links"></div> </nav> <div class="single-credit"> 本文来自网络,不代表1号站长-站长学院|资讯交流平台立场。转载请注明出处: <a href="https://www.1cn.cc/jianzhan/jingyan/10536.html">https://www.1cn.cc/jianzhan/jingyan/10536.html</a></div> <div class="entry-footer clear"> <div id="myModal" class="modal"> <div class="modal-content clear"> <h3>给这篇文章的作者打赏</h3> <div class="ht_grid_1_2_custom"> <img src="https://www.1cn.cc/skin/ecms312/images/weixin-code.png" alt="微信扫一扫打赏"/> 微信扫一扫打赏</div> <div class="ht_grid_1_2_custom"> <img src="https://www.1cn.cc/skin/ecms312/images/alipay-code.png" alt="微信扫一扫打赏"/> 支付宝扫一扫打赏</div> <span class="close">×</span></div> </div> <div class="entry-footer-right"> <span class="entry-sponsor"> <span id="myBtn"><i class="fa fa-jpy"></i> 打赏</span> </span> <span class="entry-like"> <span class="sl-wrapper"><a href="JavaScript:makeRequest('https://www.1cn.cc/e/public/digg/?classid=34&id=10536&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');" class="sl-button sl-button-87" title="点赞这篇文章"><span class="sl-count" id="diggnum"><i class="fa fa-thumbs-o-up"></i> <script src=https://www.1cn.cc/e/public/ViewClick/?classid=34&id=10536&down=5></script><em>赞</em></span></a><span class="sl-loader"></span></span> </span></div> </div> <div class="entry-bottom clear"> <div class="entry-tags"> <span class="tag-links"><span>标签:</span></span></div> <span class="custom-share"> <span class="social-share" data-sites="wechat, weibo, qq, qzone"></span> </span></div> </article> <div id="zhutibaba-ad-13" class="single-bottom-ad widget_ad ad-widget"> <div class="adwidget"><div class="pcd_ad"><script src=https://www.1cn.cc/d/js/acmsd/thea16.js></script></div><div class="mbd_ad"><a href='https://www.1cn.cc/e/public/ClickAd?adid=17' target=_blank><img src='/d/file/2022/03-28/de6866d1e77780db6e0337db1bcfe8ac.png' border=0 width='468' height='60' alt=''></a></div></div> </div> <div class="post-nav clear"> <div class="post-nav-previous"><i class="fa fa-angle-left"></i> 上一篇<a href='https://www.1cn.cc/jianzhan/jingyan/10535.html'>DEDE和帝国要赶超动易的几个建议</a></div> <div class="post-nav-next">下一篇 <i class="fa fa-angle-right"></i><a href='https://www.1cn.cc/jianzhan/jingyan/10537.html'>Godaddy域名“伪”转发介绍</a></div> </div> <div class="author-box clear"> <img alt="admin" src="https://www.1cn.cc/skin/ecms312/images/avatar.jpg" class="avatar avatar-120 photo" height="120" width="120" /> <div class="author-meta"> <h4 class="author-name">作者: <span class="hover-underline"><a target="_blank" href="https://www.1cn.cc/">admin</a></span></h4> <div class="author-desc"> 这里可以再内容模板定义一些文字和说明,也可以调用对应作者的简介!或者做一些网站的描述之类的文字或者HTML!</div> </div> </div> <div class="entry-related clear"> <h3 class="section-title">为您推荐</h3> <div class="related-loop clear"> <div class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="https://www.1cn.cc/jianzhan/jingyan/10525.html" target="_blank"> <div class="thumbnail-wrap"> <img width="300" height="180" src="https://www.1cn.cc/e/extend/timthumb.php?src=https://www.1cn.cc/skin/ecms312/images/notimg.gif&w=300&h=180&zc=1" class="attachment-post_thumb size-post_thumb wp-post-image" alt="网页制作规范" /></div> </a> <h2 class="entry-title"><a href="https://www.1cn.cc/jianzhan/jingyan/10525.html" target="_blank">网页制作规范</a></h2> </div> <div class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="https://www.1cn.cc/jianzhan/jingyan/11386.html" target="_blank"> <div class="thumbnail-wrap"> <img width="300" height="180" src="https://www.1cn.cc/e/extend/timthumb.php?src=https://www.1cn.cc/skin/ecms312/images/notimg.gif&w=300&h=180&zc=1" class="attachment-post_thumb size-post_thumb wp-post-image" alt="网页制作中字体设计规范细节!" /></div> </a> <h2 class="entry-title"><a href="https://www.1cn.cc/jianzhan/jingyan/11386.html" target="_blank">网页制作中字体设计规范细节!</a></h2> </div> <div class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="https://www.1cn.cc/jianzhan/jingyan/11369.html" target="_blank"> <div class="thumbnail-wrap"> <img width="300" height="180" src="https://www.1cn.cc/e/extend/timthumb.php?src=https://www.1cn.cc/skin/ecms312/images/notimg.gif&w=300&h=180&zc=1" class="attachment-post_thumb size-post_thumb wp-post-image" alt="网页制作与页面设计的要点" /></div> </a> <h2 class="entry-title"><a href="https://www.1cn.cc/jianzhan/jingyan/11369.html" target="_blank">网页制作与页面设计的要点</a></h2> </div> <div class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="https://www.1cn.cc/jianzhan/jingyan/12340.html" target="_blank"> <div class="thumbnail-wrap"> <img width="300" height="180" src="https://www.1cn.cc/e/extend/timthumb.php?src=https://www.1cn.cc/skin/ecms312/images/notimg.gif&w=300&h=180&zc=1" class="attachment-post_thumb size-post_thumb wp-post-image" alt="网页制作需要学习的知识" /></div> </a> <h2 class="entry-title"><a href="https://www.1cn.cc/jianzhan/jingyan/12340.html" target="_blank">网页制作需要学习的知识</a></h2> </div> <div class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="https://www.1cn.cc/jianzhan/jingyan/13456.html" target="_blank"> <div class="thumbnail-wrap"> <img width="300" height="180" src="https://www.1cn.cc/e/extend/timthumb.php?src=/d/file/20220708/22i2gw15uw55171.jpg&w=300&h=180&zc=1" class="attachment-post_thumb size-post_thumb wp-post-image" alt="网页制作需要遵循的四大原则 这样做网站更完美" /></div> </a> <h2 class="entry-title"><a href="https://www.1cn.cc/jianzhan/jingyan/13456.html" target="_blank">网页制作需要遵循的四大原则 这样做网站更完美</a></h2> </div> <div class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="https://www.1cn.cc/jianzhan/jingyan/20678.html" target="_blank"> <div class="thumbnail-wrap"> <img width="300" height="180" src="https://www.1cn.cc/e/extend/timthumb.php?src=/d/file/20220708/iijw1gjchp26220.jpg&w=300&h=180&zc=1" class="attachment-post_thumb size-post_thumb wp-post-image" alt="网页制作需要遵循的四大原则 这样做网站更完美" /></div> </a> <h2 class="entry-title"><a href="https://www.1cn.cc/jianzhan/jingyan/20678.html" target="_blank">网页制作需要遵循的四大原则 这样做网站更完美</a></h2> </div> </div> </div> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"></div> <script src="https://www.1cn.cc/e/extend/infocomment/commentfrom.php?classid=34&id=10536&titleurl=https://www.1cn.cc/jianzhan/jingyan/10536.html"></script> <h3 class="comments-title"> 评论列表(<i id="infocommentnumarea"></i>)</h3> <ol class="comment-list" id="infocommentarea"></ol> <script src="https://www.1cn.cc/e/extend/infocomment/commentajax.php?classid=34&id=10536"></script> </div> </main> </div> <aside id="secondary" class="widget-area sidebar"> <div class="widget widget_ad ad-widget"> <div class="adwidget"><script src="https://www.1cn.cc/d/js/acmsd/thea11.js"></script></div> <h2 class="widget-title">广告</h2> </div> <div id="damenhu-views-2" class="widget widget-damenhu-views widget_posts_thumbnail"> <h2 class="widget-title">浏览最多的文章</h2> <ul> <li class="clear"><a href="https://www.1cn.cc/jianzhan/jingyan/39015.html" rel="bookmark"> <div class="thumbnail-wrap"><img width="300" height="150" src="https://www.1cn.cc/e/extend/timthumb.php?src=/d/file/2022/08-15/732d15f6dd1d47f7b5d9fc4fe2c81ff3.png&w=300&h=150&zc=1" class="attachment-widget_thumb size-widget_thumb wp-post-image" alt="小程序搭建对接教程" loading="eager" /></div> </a> <div class="entry-wrap"><a href="https://www.1cn.cc/jianzhan/jingyan/39015.html" rel="bookmark">小程序搭建对接教程</a></div> </li> <li class="post-list"><span>1</span><a href="https://www.1cn.cc/jianzhan/jingyan/39016.html" rel="bookmark">去水印小程序用户隐私保护指引设置教程</a></li> <li class="post-list"><span>2</span><a href="https://www.1cn.cc/jianzhan/jingyan/39017.html" rel="bookmark">小程序服务器域名request合法域名和downloadFile合法域名填写教程</a></li> <li class="post-list"><span>3</span><a href="https://www.1cn.cc/jianzhan/jingyan/786.html" rel="bookmark">企业和个人网站公安备案流程超详细图文讲解</a></li> <li class="post-list"><span>4</span><a href="https://www.1cn.cc/jianzhan/jingyan/39014.html" rel="bookmark">微信小程序注册教程【详细图文教程】</a></li> <li class="post-list"><span>5</span><a href="https://www.1cn.cc/jianzhan/jingyan/39023.html" rel="bookmark">帝国源码登陆后台时,弹出Cann't connect to DB!</a></li> </ul> </div> <div class="widget widget_ad ad-widget"> <div class="adwidget"><script src="https://www.1cn.cc/d/js/acmsd/thea12.js"></script></div> <h2 class="widget-title">广告</h2> </div> <div id="damenhu-popular-2" class="widget widget-damenhu-popular widget_posts_thumbnail"> <h2 class="widget-title">评论最多的文章</h2> <ul> <li class="clear"><a href="https://www.1cn.cc/jianzhan/jingyan/38979.html" rel="bookmark"> <div class="thumbnail-wrap"><img width="300" height="150" src="https://www.1cn.cc/e/extend/timthumb.php?src=/d/file/2022/07-14/050a136f1528e0b63d51626ec13ce374.png&w=300&h=150&zc=1" class="attachment-widget_thumb size-widget_thumb wp-post-image" alt="网站没有备案会被收录吗?" loading="eager" /></div> </a> <div class="entry-wrap"><a href="https://www.1cn.cc/jianzhan/jingyan/38979.html" rel="bookmark">网站没有备案会被收录吗?</a></div> </li> <li class="post-list"><span>1</span><a href="https://www.1cn.cc/jianzhan/jingyan/371.html" rel="bookmark">淘宝:960 时代的终结</a></li> <li class="post-list"><span>2</span><a href="https://www.1cn.cc/jianzhan/jingyan/770.html" rel="bookmark">360蜘蛛IP列表(可通过ctrl+F进行查找)</a></li> <li class="post-list"><span>3</span><a href="https://www.1cn.cc/jianzhan/jingyan/933.html" rel="bookmark">网站使用“微软雅黑”字体也会涉及版权问题</a></li> <li class="post-list"><span>4</span><a href="https://www.1cn.cc/jianzhan/jingyan/370.html" rel="bookmark">使用xampp搭建运行php虚拟主机的详细步骤</a></li> <li class="post-list"><span>5</span><a href="https://www.1cn.cc/jianzhan/jingyan/369.html" rel="bookmark">基于PHP安装zip拓展,以及libzip安装的问题</a></li> </ul> </div> <div class="widget widget_ad ad-widget"> <div class="adwidget"><script src="https://www.1cn.cc/d/js/acmsd/thea13.js"></script></div> <h2 class="widget-title">广告</h2> </div> <div id="tag_cloud-1" class="widget widget_tag_cloud"> <h2 class="widget-title">标签</h2> <div class="tagcloud"> <a href="/tag/SEO.html" class="tag-cloud-link" title="SEO (6013个项目)">SEO</a> <a href="/tag/jiaocheng.html" class="tag-cloud-link" title="教程 (2364个项目)">教程</a> <a href="/tag/fuwuqi.html" class="tag-cloud-link" title="服务器 (1863个项目)">服务器</a> <a href="/tag/xitong.html" class="tag-cloud-link" title="系统 (1150个项目)">系统</a> <a href="/tag/shezhi.html" class="tag-cloud-link" title="设置 (1105个项目)">设置</a> <a href="/tag/lianjie.html" class="tag-cloud-link" title="链接 (962个项目)">链接</a> <a href="/tag/qiye.html" class="tag-cloud-link" title="企业 (933个项目)">企业</a> <a href="/tag/wenjian.html" class="tag-cloud-link" title="文件 (856个项目)">文件</a> <a href="/tag/diguo.html" class="tag-cloud-link" title="帝国 (788个项目)">帝国</a> <a href="/tag/diguoCMS.html" class="tag-cloud-link" title="帝国CMS (724个项目)">帝国CMS</a> <a href="/tag/FTP.html" class="tag-cloud-link" title="FTP (563个项目)">FTP</a> <a href="/tag/Discuz.html" class="tag-cloud-link" title="Discuz (457个项目)">Discuz</a> <a href="/tag/diannao.html" class="tag-cloud-link" title="电脑 (315个项目)">电脑</a> <a href="/tag/shujuku.html" class="tag-cloud-link" title="数据库 (215个项目)">数据库</a> <a href="/tag/zhuce.html" class="tag-cloud-link" title="注册 (200个项目)">注册</a> <a href="/tag/xiazai.html" class="tag-cloud-link" title="下载 (173个项目)">下载</a> <a href="/tag/Discuzjiaocheng.html" class="tag-cloud-link" title="Discuz教程 (144个项目)">Discuz教程</a> <a href="/tag/aliyun.html" class="tag-cloud-link" title="阿里云 (141个项目)">阿里云</a> <a href="/tag/com.html" class="tag-cloud-link" title="com (123个项目)">com</a> <a href="/tag/woijingtai.html" class="tag-cloud-link" title="伪静态 (122个项目)">伪静态</a> <a href="/tag/jilu.html" class="tag-cloud-link" title="记录 (111个项目)">记录</a> <a href="/tag/beian.html" class="tag-cloud-link" title="备案 (99个项目)">备案</a> <a href="/tag/diguocmsjiaocheng.html" class="tag-cloud-link" title="帝国cms教程 (86个项目)">帝国cms教程</a> <a href="/tag/yidongduan.html" class="tag-cloud-link" title="移动端 (78个项目)">移动端</a> <a href="/tag/cunchu.html" class="tag-cloud-link" title="存储 (74个项目)">存储</a> <a href="/tag/guzhang.html" class="tag-cloud-link" title="故障 (67个项目)">故障</a> <a href="/tag/bijibon.html" class="tag-cloud-link" title="笔记本 (64个项目)">笔记本</a> <a href="/tag/jiage.html" class="tag-cloud-link" title="价格 (61个项目)">价格</a> <a href="/tag/sitemap.html" class="tag-cloud-link" title="sitemap (60个项目)">sitemap</a> <a href="/tag/lingdongbiaoqian.html" class="tag-cloud-link" title="灵动标签 (54个项目)">灵动标签</a> <a href="/tag/lanping.html" class="tag-cloud-link" title="蓝屏 (51个项目)">蓝屏</a> <a href="/tag/wangzhanditu.html" class="tag-cloud-link" title="网站地图 (50个项目)">网站地图</a> <a href="/tag/dedecmsjiaocheng.html" class="tag-cloud-link" title="dedecms教程 (42个项目)">dedecms教程</a> <a href="/tag/paixing.html" class="tag-cloud-link" title="排行 (39个项目)">排行</a> <a href="/tag/kehuduan.html" class="tag-cloud-link" title="客户端 (28个项目)">客户端</a> <a href="/tag/xiaochengxu.html" class="tag-cloud-link" title="小程序 (25个项目)">小程序</a> <a href="/tag/zizhujianzhan.html" class="tag-cloud-link" title="自助建站 (22个项目)">自助建站</a> <a href="/tag/request.html" class="tag-cloud-link" title="request (19个项目)">request</a> <a href="/tag/shoujiduan.html" class="tag-cloud-link" title="手机端 (19个项目)">手机端</a> <a href="/tag/HTML5.html" class="tag-cloud-link" title="HTML5 (17个项目)">HTML5</a> </div> </div> </aside> </div> </div> <div class="clear"></div> <footer id="colophon" class="site-footer container"> <div id="site-bottom" class="clear"> <div class="menu-botom-container"> <ul id="footer-menu" class="footer-nav"> <li><a href="https://www.1cn.cc/zixun/" target="_blank">资讯</a> </li><li><a href="https://www.1cn.cc/zhineng/" target="_blank">智能</a> </li><li><a href="https://www.1cn.cc/chuangye/" target="_blank">创业</a> </li><li><a href="https://www.1cn.cc/biancheng/" target="_blank">编程</a> </li><li><a href="https://www.1cn.cc/xiazai/" target="_blank">下载</a> </li><li><a href="https://www.1cn.cc/fwq/" target="_blank">服务器</a> </li><li><a href="https://www.1cn.cc/yunying/" target="_blank">运营</a> </li><li><a href="https://www.1cn.cc/jianzhan/" target="_blank">建站</a> </li><li><a href="https://www.1cn.cc/diannao/" target="_blank">电脑</a> </li><li><a href="https://www.1cn.cc/shouji/" target="_blank">手机</a> </li><li><a href="https://www.1cn.cc/yule/" target="_blank">娱乐</a> </li><li><a href="https://www.1cn.cc/cc/" target="_blank">储存</a> </li><li><a href="https://www.1cn.cc/dd/" target="_blank">待定</a> </li> </ul> </div> <div class="site-info"> © 2022 <a href="https://www.1cn.cc/">1号站长-站长学院|资讯交流平台</a> - <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id: "JiLN6KXc4tiqOcQr",ck: "JiLN6KXc4tiqOcQr",autoTrack:true,hashMode:true})</script>-- - <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id: "JiLN6KXc4tiqOcQr",ck: "JiLN6KXc4tiqOcQr",autoTrack:true,hashMode:true})</script>统计代码<a href="https://www.1cn.cc/sitemap/news_1.xml"><font color="#0000FF">百度地图</font></a>.<a href="https://www.1cn.cc/sitemap/news_2.xml"><font color="#0000FF">sitemap</font></a> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?344031d17476ebc7ab3a7975ded42d83"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </div> </footer> </div> <div class="bottom-right"> <div class="icon-contact tooltip"> <span class="icon-link"> <span class="icon"><i class="fa fa-phone"></i></span> <span class="text">联系我们</span> </span> <div class="left-space"> <div class="left"> <div class="contact-info"> <h3>联系我们</h3> <strong>0898-88888888</strong> <p>在线咨询: <a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes" target="_blank"><img src="https://www.1cn.cc/skin/ecms312/images/qqchat.gif" alt="QQ交谈"/></a></p> <p>邮箱: email@wangzhan.com</p> <p>工作时间:周一至周五,9:00-17:30,节假日休息</p> </div> <i></i></div> </div> </div> <div class="icon-weixin tooltip"> <span class="icon-link"> <span class="icon"><i class="fa fa-wechat"></i></span> <span class="text">关注微信</span> </span> <div class="left-space"> <div class="left"> <img src="https://www.1cn.cc/skin/ecms312/images/weixin-qrcode.png" alt="微信扫一扫关注我们"/> <h3>微信扫一扫关注我们</h3> <i></i></div> </div> </div> <div class="icon-weibo"> <a href="https://weibo.com/" target="_blank"> <span class="icon"><i class="fa fa-weibo"></i></span> <span class="text">关注微博</span> </a></div> <div id="back-top"> <a href="#top" title="返回顶部"> <span class="icon"><i class="fa fa-chevron-up"></i></span> <span class="text">返回顶部</span> </a></div> </div> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.sidebar').theiaStickySidebar({ // Settings additionalMarginTop: 30 }); }); </script> <script>// Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }</script> <script>(function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; $(window).resize(function() { }); }); })(jQuery);</script> <script defer src="https://www.1cn.cc/skin/ecms312/js/main.js"></script> </body> </html>