个人网站制作过程

2017-03-27

11742

个人网站制作流程一、站建设方案书的内容个人网站建设方案书是将个人网站建设成为一个优质网站首先要考虑，网站建设方案能反应出网站的建设构想，初步形态及网站推广计划。个人网站建设方案适合个体户和中小型企业，

个人网站制作流程

一、站建设方案书的内容

个人网站建设方案书是将个人网站建设成为一个优质网站首先要考虑，网站建设方案能反应出网站的建设构想，初步形态及网站推广计划。个人网站建设方案适合个体户和中小型企业，它有自己独特的风格设计。风格设计主要体现在本人个性特点的凸显，分析. 策划并制定出一套适合自身的网站建设的设计风格方案。设计首页要明确主次，主要的可放在显要位置、加粗或变颜色等，再列出最吸引浏览者的信息以及内容，用最精炼的语言表达出浏览者想了解的信息。

二、建站目的及功能定位

对于个人网站建设前期的定位是相当重要，你必须了解你做这个网站的目的，是为了宣传自己还是展示自己的爱好，本人感觉最好是定位在自己感兴趣或者自己工作的行业中，这样自己可能会对所确定的主题行业了解的更多些，很多人在建站初期总是喜欢在主页里堆积大量感兴趣的内容，但个人的精力总是有限的，因为无力维护而导致站点更新缓慢、内容匮乏，与其这样，不如选定一个主题做出自己的风格，不求大而全，但求小而精。

三、网站主要内容介绍：

1. 构成网页的基本要素

1.1文字（标题、字号、字型... ）

1.2 图形（网页上经常使用的图片格式：jpg 、jpeg 、Gif 、Swf... ）

1.3. 交互功能（菜单按钮、链接、表单、数据交换... ）

超文本标识语言（HTML ）

HTML （Hypertext Markup Language）是一种专门用于Web 页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。在HTML 中，所有的标记符都用尖括号括起来。

例如，表示HTML 标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。

如：…<／HTML> .

HTML 文档的基本结构

一个典型的HTML 文本的基本结构形式如下：

网站制作流程及界面交互设计研究探讨<／TITLE></p><p><／HEAD></p><p><BODY>文本内容：<／BODY></p><p><／HTML></p><p>2制作及美化的基本工具</p><p>2.11．超文本标识语言（HTML ）</p><p>编辑工具：editplus 、dreamweaver 、记事本、FrontPage 、</p><p>2.2．页面设计及美化工具</p><p>使用工具：所有可制作平面的软件</p><p>推荐使用Photoshop 、FireWorks 、Flash</p><p>3、网页制作的基本步骤</p> ,<p>3.1、整体规划</p><p>需要完成的规划：网站主题、风格、页面元素、逻辑结构等</p><p>3.2、资料收集</p><p>收集内容：</p><p>a 、跟主题相关的文字图片资料</p><p>b 、一些优秀的页面风格</p><p>c 、下载一些你喜欢的交互页面</p><p>d 、开放的源代码</p><p>3.3、伪界面设计</p><p>根据事先规划的结构，在平面软件里设计你想要的最终效果，利用平面图片的形式先展示一次，设计时要注意宜人性、人机、心理等各方面因素</p><p>3.4、代码转换及交互添加</p><p>把平面的伪界面转化为HTML 代码，添加相应的交互功能Js 、按纽、表单，以及一些与数据库相连接的代码。</p><p>3.5、测试网页兼容性</p><p>你可以不必严格按照W3C 标准来制作页面，但是你必须保证让所有现有的浏览器能比较好的展示你的作品。</p><p>3.6、发布站点</p><p>测试完毕，符合你的要求，当然就可以开始发布你的网站了，发布的服务器可以是远程，也可以是本地，各个语言有各自的相应的服务器，比如ASP ，就应该对应的是ASP 服务器，上传可利用远程FTP 工具。</p><p>4、界面设计及交互研究探讨</p><p>4.1、导航栏设计</p><p>导航要素设计的好坏决定着用户是否能方便使用网站导航要素要设计的直接而明确，并最大限度为用户的方便考虑。</p><p>4.2、网页布局</p><p>网页的布局是整个界面的核心，这里体现了一切以用户为中心、以及制作者如何与欣赏着沟通的思想在里面，你必须知道自己要传达什么样的信息，别人使用起来合适不，字体的大小、型号、字间距、行间距，以及配色所有的一切都在这个阶段完成，所以如何表现功能以及美感就是你研究的重点。</p><p>PS:布局之前要紧密连接你网站的主题，要注意把握整体风格，你可以事先在纸上勾画草图，利用你习惯的元素来表现你想要的效果</p><p>网页布局--主要构成原则</p><p>醒目性：指用户把注意力集中到你诱导起浏览的部分和内容</p><p>可读性：指网站的内容让人容易读懂</p><p>明快性：指准确、快速转达网站的构成内容</p><p>造型性：维持整体外型上的稳定感和均衡性</p><p>创造性：有鲜明个性，创意是必不可少的</p><p>布局的构成原则上是:统一、协调、流动、强调、均衡</p><p>4.3、交互研究</p><p>我这边的交互主要集中在人机操作方面，研究用户浏览网站心理我个人认为一个成功的个人主页，单纯的美观是不够的，重要的是宜人性方面应该注重，喜欢Google 、Douban 就居于这。</p><p>5、实例制作演示(略）</p> ,<p>5.1、页面制作整体规划</p><p>对象：一个打印商业宣传主页</p><p>格调:活泼，色彩，简单，大方</p><p>5.2、资料收集</p><p>a 、商标、网址、公司宣传册、了解企业文化，了解负责人的品位、他们的案例、跟负责人沟通掌握信息</p><p>b 、网上下载相似印刷行业的公司主页，了解现有行业的的一些设计特点</p><p>c 、下载一些色彩比较华丽的图片，或跟印刷相关连的图片</p><p>d 、如果你自己不会动态语言，下载一个满足你功能的新闻发布系统和留言源码</p><p>5.3、伪界面设计</p><p>a 、在PS 设计伪界面</p><p>b 、切片工具对整体进行合理的分割</p><p>注意点：隐藏你要通过输入的文字，分割时要保持他的整体意义，尽量让每一部分是完整的，注意一些交互上操作。</p><p>c 、导成WEB 格式-直接导成HTML 格式—步骤:</p><p>1、. 点击文件存储为WEB 文件格式</p><p>2、在界面里面调整理想参数</p><p>3、导出保存PS 能自动生成一些HTML 代码，但是他不是很标准，你必须在Dreamweave 里面进行加工</p><p>d 、在Dreamweave 里面进行代码加工</p><p>具体步骤：</p><p>1、先修改标题</p><p>2、修改页面属性：背景颜色、背景图片.....</p><p>3、把页面调整为布局格式（这个可以按照自己习惯来设置，有标准的表格方式，也有布局类型）</p><p>5.4、把要添加文字的图片转化为背景形式</p><p>a 、找到对应图片路径</p><p>b 、拷贝路径后删除图片</p><p>c 、转化为标准形式</p><p>d 、把路径粘贴到背景属性上</p><p>e 、回到布局界面</p><p>5.5、添加具体文字连接设置等操作</p><p>5.6、CSS 设置</p><p>5.7、修整代码，发布预览按F12即可预览效果</p><p>4、测试网页兼容性</p><p>按照你设计时的对象, 根据IE 版本以及浏览器的不同，调整理想的效果，但是大部分出现问题的是JSVB等代码，如果只是单纯静态图片，基本不会有很大的差别，推选大家尽量往W3C 标准靠</p><p>5、发布站点</p><p>购买自己的空间域名，其实事先就应该购买的，利用FTP 上传软件，把你的页面上传到你的网上服务器上推荐一款FTP 上传工具</p><p>四，具体设计过程</p> ,<p>个人在设计时考虑的多为个人的兴趣喜好，而不注重商业的展示。内容以反映个人为中心，从而使个人网站真正的成为展示自己的网络名片。在网页制作中，我借鉴了韩国个人网站的设计风格，着重于给浏览者以强烈的视觉冲击。运用了photoshop 和fireworks 强大的图像制作和处理能力。进行了大量的图片制作，从而给人以强烈的美感。并利用Flash 进行片头动画的制作，给予浏览者一种强烈的时代动感。整个网站的架构是由Dreamwave 完成的。</p><p>、在这次课业中我制作了关于自己的网页，下面介绍下制作过程。首先使用Dreamweaver8来创建站点。打开Dreamweaver8软件，执行站点- 站点管理命令，在弹出的站点管理对话框中选择新建，然后创建站点存放到我的文档，然后设置地址为www.maqunchao.com 。站点创建完成后，在Dreamweaver8软件右侧就会出现站点资源列表，然后我分别建立了images 、Scripts 、和若干子文件，主要用于存放主网站架构图片、音乐、日志链接模块素材、网络模块素材、照片匣子模块素材。</p><p>要领一：确定网站主题</p><p>做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。兴趣是制作网站的动力，没有创作热情，很难设计制作出优秀的作品。对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。记住：在互联网上只有第一，没有第二！</p><p>要领二：选择好域名</p><p>域名是网站在互联网上的名字。一个非产品推销的纯信息服务网站，其所有建设的价值，都凝结在其网站域名之上。失去这个域名，所有前期工作就将全部落空。要把域名起得形象、简单、易记。</p><p>要领三：掌握建网工具</p><p>网络技术的发展带动了软件业的发展，所以用于制作Web 页面的工具软件也越来越丰富。从最基本的HTML 编辑器到现在非常流行的Flash 互动网页制作工具，各种各样的Web 页面制作工具。</p><p>要领四：确定网站界面</p><p>界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界面时要注意以下三点：</p><p>①栏目与板块编排</p><p>②目录结构与链接结构</p><p>③进行形象设计</p><p>要领五：确定网站风格</p><p>“风格”是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI （标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语气、内容价值等等</p> ,<p>诸多因素，网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局，还是交互方式，只要你能由此让浏览者明确分辨出这是你网站独有的，这就形成了网站的“风格”。风格是有人性的，通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性：是粗犷豪放的，还是清新秀丽的；是温文儒雅的，还是执著热情的；是活泼易变的，还是墨守成规的。总之，有风格的网站与普通网站的区别在于：在普通网站上你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量多少，浏览速度快慢等；在有风格的网站上你可以获得除内容之外的更感性的认识，比如站点的品位，对浏览者的态度等。</p><p>要领六：有创意的内容选择</p><p>好的内容选择需要有好的创意，作为网页设计制作者，最苦恼的就是没有好的内容创意。网络上的最多的创意即是来自于虚拟同现实的结合。创意的目的是为了更好的宣传与推广网站，如果创意很好，却对网站发展毫无意义，那么，网站设计制作者也应当放弃这个创意。另外，主页内容是网站的根本之所在，如果内容空洞，即使页面制作地再怎样精美，仍然不会有多少用户。从根本上说，网站内容仍然左右着网站流量，内容为王（Content Is King）依然是个人网站成功的关键。</p><p>要领七：推广自己的网站</p><p>网站的推广有以下几种方式：</p><p>（1）搜索引擎注册与搜索目录登录技巧</p><p>（2）广告交换技巧</p><p>（3）目标电子邮件推广</p><p>要领八：支撑网站日常运行</p><p>通常来说，个人网站获取资金通常有以下两个渠道：</p><p>（1）销售网站的广告位</p><p>（2）与大型网站合作</p><p>五、总结语</p><p>在整个的学习过程中，我学习了Flash 、Dreamwave 、Fireworks 、Html 语言、IIS 、网站建设的基本思想等重要内容。到现在为止，我还是很庆幸能够学到这么多的内容。整个网站的制作是我一个人完成的。虽然整个网页的结构还有很多不足，还有一些板块没有开通，但是我的确能够感到在我制作过程中技能的提高。整个网站的不足我想是没有使用到一些动态网页的知识，使得日后网站的维护较为繁杂。希望明年可以选到动态网站的课程，从而弥补自己在动态网络语言方面的不足。</p> </div>   <footer class="article-footer"> <div class="tags"> <span class="tag-label">标签：</span> </div> <div class="share-box"> <span class="share-label">分享到：</span> <button class="share-btn weixin" title="分享到微信"> <i class="ri-wechat-fill"></i> </button> <button class="share-btn qq" title="分享到QQ"> <i class="ri-qq-fill"></i> </button> </div> </footer> </article> <div class="ad-container ad-footer"> <div class="ad-wrapper"> <div id="adshow2"></div> <script type="text/javascript" src="/js/adshow2.js"></script>  </div> </div>  <nav class="context-nav"> <a href="/news/10266.html" class="nav-item prev"> <i class="ri-arrow-left-s-line"></i> <span class="nav-text"> <span class="label">上一篇</span> <span class="title">网站设计与评价</span> </span> </a> <a href="/news/10268.html" class="nav-item next"> <span class="nav-text"> <span class="label">下一篇</span> <span class="title">2014年新出试题淘宝天猫商城入驻考试如何向淘宝商城索要发票</span> </span> <i class="ri-arrow-right-s-line"></i> </a> </nav>  <section class="related-articles"> <h2 class="section-title"> <span>相关推荐</span> </h2> <div class="articles-grid"> <a href="/news/4708994.html" class="article-item"> <span class="article-title">张家界一周天气(张家界几月份天气最好？)</span> <span class="article-date">2022-12-25</span> </a> <a href="/news/4708995.html" class="article-item"> <span class="article-title">一台电脑的耗电量电脑一个小时耗电多少？</span> <span class="article-date">2022-12-25</span> </a> <a href="/news/4708996.html" class="article-item"> <span class="article-title">手机来电秀怎么设置(手机怎么设置炫酷的来电秀效果或者视频？)</span> <span class="article-date">2022-12-25</span> </a> <a href="/news/4708997.html" class="article-item"> <span class="article-title">世纪佳缘怎么注销账号(怎么注销世纪佳缘账号？)</span> <span class="article-date">2022-12-25</span> </a> <a href="/news/4708998.html" class="article-item"> <span class="article-title">美术字体大全(一句话总结七种字体的艺术特征？)</span> <span class="article-date">2022-12-25</span> </a> <a href="/news/4708999.html" class="article-item"> <span class="article-title">蓄电池回收县城收电瓶需要办什么手续？</span> <span class="article-date">2022-12-25</span> </a> <a href="/news/4709000.html" class="article-item"> <span class="article-title">徐州是哪个省的徐州在什么省？</span> <span class="article-date">2022-12-25</span> </a> <a href="/news/4709001.html" class="article-item"> <span class="article-title">丰田花冠汽车(新车丰田花冠2022落地价？)</span> <span class="article-date">2022-12-25</span> </a> </div> </section>  <button class="back-to-top" aria-label="返回顶部"> <i class="ri-arrow-up-line"></i> </button> </div> </div> </main>   <footer class="footer"> <div class="footer-content">  <div class="footer-main">  <div class="footer-links"> <div class="footer-column"> <h4>帮助支持</h4> <ul> <li><a href="/help/bzzx.html">帮助中心</a></li> <li><a href="/Home/User/">用户中心</a></li> <li><a href="/sitemap.xml">网站地图</a></li> </ul> </div> <div class="footer-column"> <h4>支付服务</h4> <ul> <li><a href="/help/fkfs.html">付款方式</a></li> <li><a href="/help/fkfs.html">域名账户</a></li> <li><a href="/help/jyfl.html">服务费率</a></li> </ul> </div> <div class="footer-column"> <h4>规则条款</h4> <ul> <li><a href="/help/jygz.html">交易规则</a></li> <li><a href="/help/yssm.html">隐私声明</a></li> <li><a href="/help/fwxy.html">服务协议</a></li> </ul> </div> <div class="footer-column"> <h4>联系我们</h4> <ul> <li><a href="/help/lxjjr.html">业务咨询</a></li> <li><a href="//wpa.qq.com/msgrd?v=3&uin=7665999&site=qq&menu=yes">投诉建议</a></li> <li><a href="/help/lxwm.html">联系我们</a></li> </ul> </div> <div class="footer-column"> <h4>关于我们</h4> <ul> <li><a href="/help/gywm.html">关于我们</a></li> <li><a href="/help/cpyc.html">诚聘英才</a></li> <li><a href="/Home/agent/login.html">经纪登录</a></li> </ul> </div> </div>  <div class="qr-codes"> <div class="qr-item"> <img src="/styles/images/z-p2.jpg" alt="微信公众号"> <p>微信公众号</p> </div> <div class="qr-item"> <img src="/styles/images/z-p3.jpg" alt="微信小程序"> <p>微信小程序</p> </div> </div> </div>  <div class="company-info"> <p> 大连酷米科技有限公司 <span class="separator">|</span> 电话: 0411-88255560 <span class="separator">|</span> 员工舞弊举报: mi@kmw.com <span class="separator">|</span> 地址: 辽宁省大连市甘井子区华南广场中南大厦A座612 </p> </div>  <div class="certificates"> <p class="license"> <a href="https://beian.miit.gov.cn/" target="_blank">辽ICP备2023003160号-1</a> <span class="separator">|</span> 增值电信业务经营许可证：辽B2-20230432 <span class="separator">|</span> 在线数据处理与交易许可证：辽B2-20230432 <span class="separator">|</span> <a href="http://www.beian.gov.cn/" target="_blank">辽公网安备 21021102000934号</a> </p> <p class="copyright">Copyright © 2014-2025 酷米科技版权所有</p> </div>  <div class="cert-icons"> <img src="/styles/images/icon-1.png" alt="认证图标1"> <img src="/styles/images/icon-2.png" alt="认证图标2"> <img src="/styles/images/icon-3.png" alt="认证图标3"> <img src="/styles/images/icon-4.png" alt="认证图标4"> <img src="/styles/images/icon-5.png" alt="认证图标5"> <img src="/styles/images/icon-6.png" alt="认证图标6"> </div> </div> </footer> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?a11e6c50414ba01af35e173204275ab0"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  <script src="/styles/js/jquery-3.6.0.min.js"></script>  <script src="/styles/js/newsinfo.js"></script> <script src="/styles/js/header.js"></script>  <script src="/styles/js/qrcode.min.js"></script> </body> </html>