论坛 › 天涯杂谈 › 怎么样设计和编码制作个人网站？

l14107cb 发表于 2024-7-27 22:17:18

怎么样设计和编码制作个人网站？

    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/e743fda3e487462e9a228e6b34f67a68~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=l6UvDzaZvMDnpS%2BTI8JeO9DoVRM%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">许多<span style="color: black;">研发</span>人员认为<span style="color: black;">善于</span>设计是一种天生的能力，而创造力是与生俱来的。<span style="color: black;">然则</span>设计是一项<span style="color: black;">能够</span>像其他任何东西<span style="color: black;">同样</span>学习的技能。你不必天生就<span style="color: black;">能够</span>创建一个<span style="color: black;">美丽</span>的网站的艺术家，这需要实践。</strong>在身边的小伙伴的博客，自己的网站来看，<span style="color: black;">非常多</span>人都是用了开源后台的网站模板，熟不知局限太大，自己想要的内容板式<span style="color: black;">亦</span>要跟着模板走，越往后看着自己的站点越不顺眼，<span style="color: black;">无</span>一点成就感。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">本文将介绍<span style="color: black;">怎样</span><span style="color: black;">经过</span>从头<span style="color: black;">起始</span>设计个人网站并将其转换为代码的过程来实践设计。</strong></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/dfic-imagehandler/137656e6-edcc-4203-85cd-b65ffe048f91~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=wB6c4JUl5VQGsmSyfX3N28kYqm8%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">为何</span>要自己设计？</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">当您<span style="color: black;">能够</span><span style="color: black;">运用</span>Bootstrap之类的UI库或预制模板时，<span style="color: black;">为何</span>要自己设计？以下是设计网站的<span style="color: black;">有些</span>好处</strong>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">●<strong style="color: blue;">①在人群中脱颖而出。</strong>许多<span style="color: black;">研发</span>人员博客都<span style="color: black;">运用</span>类似的模板，很容易看出它不是自己设计的。<span style="color: black;">倘若</span>个人网站的目的是展示你的能力，<span style="color: black;">那样</span><span style="color: black;">运用</span>模板可能会降低别人对你的肯定，自己设计的独特风格，让你站点在众多的站点中脱颖而出。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">●<strong style="color: blue;">②练习技巧。</strong>设计它会<span style="color: black;">帮忙</span>你练习设计原则，工具，HTML和CSS。你将<span style="color: black;">更易</span><span style="color: black;">研发</span>用户界面并将其引入网络。设计出独特且符合现代潮流的个人站点。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以前接私活的时候，不会设计页面，搬运其它站点页面，<span style="color: black;">引起</span>自己修改<span style="color: black;">照片</span>和部分页面的时候，不会<span style="color: black;">运用</span>工具，设计出来的页面死板不灵活，客户不满意，自己看了<span style="color: black;">亦</span>觉得很普通，<span style="color: black;">无</span>给你心意的感觉。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">●<strong style="color: blue;">③更好的应用程序性能。</strong>你的网站将是轻量级的，并且<span style="color: black;">运用</span>自定义CSS会<span style="color: black;">拥有</span>更好的性能。<span style="color: black;">倘若</span>要<span style="color: black;">包含</span>UI库或模板，则它可能<span style="color: black;">包括</span><span style="color: black;">海量</span>代码，以涵盖您未<span style="color: black;">运用</span>的各种可能的自定义。<span style="color: black;">倘若</span>未<span style="color: black;">运用</span>的代码发送给用户，则会对你网站的性能产生<span style="color: black;">消极</span>影响。加载慢，打开网页慢，被<span style="color: black;">非常多</span>人不接受。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">●<strong style="color: blue;">④发展职业技能。</strong>在Web<span style="color: black;">研发</span>角色中，你可能不必从头<span style="color: black;">起始</span>实现完整的网站设计，<span style="color: black;">然则</span>你应该能够制作与现代设计一致的外观精美的界面。<span style="color: black;">作为</span>“全栈<span style="color: black;">研发</span>人员”<span style="color: black;">一般</span><span style="color: black;">寓意</span>着精通后端语言或前端JavaScript框架，<span style="color: black;">同期</span>能够<span style="color: black;">熟练</span>设计，<span style="color: black;">制品</span>方面的知识。全栈<span style="color: black;">研发</span>人员应<span style="color: black;">拥有</span><span style="color: black;">有些</span>基本的设计知识，并能够为用户<span style="color: black;">供给</span>一致的体验。当然从中学习到<span style="color: black;">非常多</span>的技能知识，这是毋庸置疑的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●⑤可能会<span style="color: black;">特别有</span>趣。</strong>创造出令自己感到骄傲的东西是一种有趣的经历。<span style="color: black;">倘若</span>您花<span style="color: black;">有些</span>时间练习它，琢磨它，打造出属于自己的页面，岂不是更好，生活中<span style="color: black;">发掘</span>美是一件很美好的事，但我觉得创造美更让人觉得骄傲。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/dfic-imagehandler/815bb05d-2e59-4d17-b6ea-67692c2e43a4~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=n9GSgWp285l9U0MgjqlU9TXTCp4%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">起始</span>设计你的网站，不要直接写页面，从代码里设计页面。很难从代码编辑器中可视化设计，我<span style="color: black;">意见</span>先<span style="color: black;">运用</span>可视化设计工具，<span style="color: black;">而后</span>将结果转换为代码。<span style="color: black;">此刻</span>有<span style="color: black;">有些</span>快速的代码生成模板，我觉得小项目<span style="color: black;">能够</span>用一下，就<span style="color: black;">例如</span>说<span style="color: black;">咱们</span>的个人站点，大型项目追求性能，就不合适了。</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">▲制作界面原型的软件，我最<span style="color: black;">爱好</span>的是 Balsamiq Mockups，一个手绘风格的、轻量级的小软件。我<span style="color: black;">爱好</span>它的理由是：</p>快——它能让我以最快的速度把界面原型画出来。手绘风格——用它画出来的界面是不折不扣手绘风格，很酷。都是现成的——它<span style="color: black;">已然</span>内置了常用的控件和图标，基本够用了。<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">起始</span>你的<span style="color: black;">扮演</span></h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●①创建线框</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第1</span>步是<strong style="color: blue;">创建站点的低保真线框</strong>。创建线框有助于在添加视觉设计和内容之前<span style="color: black;">创立</span>页面的结构。线框不必很<span style="color: black;">美丽</span>，它应该专注于内容的布局。您<span style="color: black;">能够</span>手工绘制它，<span style="color: black;">亦</span><span style="color: black;">能够</span><span style="color: black;">运用</span>设计工具的基本功能。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为了创建线框，我<span style="color: black;">爱好</span>将设计视为一系列矩形。网页上的元素是从上到下流动的矩形块。从矩形<span style="color: black;">起始</span>不需要任何艺术<span style="color: black;">才可</span>。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/4ecd9b1b80e1471fb719ac79766e947b~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=FvPLKA0WeFQOWs3d8H7I4a%2F1L74%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●②网站结构</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">安置</span>在线框中的元素由您决定。您<span style="color: black;">能够</span><span style="color: black;">思虑</span>添加导航栏，页眉，博客<span style="color: black;">文案</span>和页脚。您可能不需要所有的这些内容，<span style="color: black;">能够</span>将其<span style="color: black;">保存</span>为基本内容，以后再添加。确定要<span style="color: black;">包含</span>的内容并将这些部分合并到线框中。<span style="color: black;">倘若</span>你在布局这块遇到问题，<span style="color: black;">能够</span>查看一个类似的网站，模仿网站内容的结构，<span style="color: black;">而后</span>对其进行修改以适合你的<span style="color: black;">需要</span>。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/58fb5d30948a471f8bece46f00debbed~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=KR8spIJFsUO2wxTog65EqNQTb9Q%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">线框不<span style="color: black;">必定</span>是完美的。在<span style="color: black;">持有</span>合适位置的网站结构之后，就<span style="color: black;">能够</span>转向视觉设计。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●③应用视觉设计</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">要将低保真线框转换为设计，<span style="color: black;">能够</span><span style="color: black;">运用</span>免费的设计工具，例如 <strong style="color: blue;">Figma</strong>（<strong style="color: blue;">下一代的设计神器</strong>）。<span style="color: black;">倘若</span>你从未<span style="color: black;">运用</span>过设计程序，你<span style="color: black;">亦</span><span style="color: black;">能够</span>用ps来实现，<span style="color: black;">不外</span>会有点慢，但在国内我还<span style="color: black;">无</span>找到类似 Figma 这么好用的工具。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/0c0592c5661b4526a8e2958e0a2b961b~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=%2BOzRbv1EfaS9sr9B6NJiJsVyyrk%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●④实施布局</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>，创建一个空白画布以<span style="color: black;">表率</span>空白浏览器页面。<span style="color: black;">经过</span>为内容创建容器，在设计工具中实现线框。我<span style="color: black;">意见</span>先从黑白<span style="color: black;">起始</span>，以便你<span style="color: black;">能够</span>专注于布局。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">优化您的布局，以使元素<span style="color: black;">体积</span>适当，对齐并在它们之间留出空间。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/b84c143620da4892b634e41913ffc3c0~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=ifKBAqvpbXX7a2SsS%2BfBQqb2K3E%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●⑤添加部分和占位符内容</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在看起来像一个网站之后，使其看起来更<span style="color: black;">美丽</span>。<span style="color: black;">经过</span>弄清楚是什么使布局看起来有吸引力，<span style="color: black;">能够</span>模仿其他网站的逼格样式来添加到自己的网站。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这里</span><span style="color: black;">周期</span>，请<span style="color: black;">思虑</span>形状，<span style="color: black;">体积</span>，边界和<span style="color: black;">暗影</span>。用你<span style="color: black;">爱好</span>的样式<span style="color: black;">逐步</span>升级基本矩形。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/pgc-image/c2b21284e748487c80388943a28d90c2~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=DHPatF7CEzmKiQ7b4XrLsUKD%2Fow%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●⑥更新版式</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">字体和间距的设计对美观大有<span style="color: black;">帮忙</span>。<span style="color: black;">倘若</span>排版得当，即使是简单的设计<span style="color: black;">亦</span><span style="color: black;">能够</span>是高质量的。<span style="color: black;">一样</span>，你<span style="color: black;">能够</span>模仿另一个网站或搜索字体和字体资源，以将其纳入你的设计中。<span style="color: black;">然则</span><span style="color: black;">必定</span>要<span style="color: black;">重视</span>版权。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">记得有家企业，不管字体版权问题，在自家网站<span style="color: black;">运用</span>方正字体，被告侵权，这是需要赔偿的。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/pgc-image/fa1ebb26224d4f389aa16e10193ca75c~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=cfi%2FHVmCGe%2BrF%2BIT0FiIcv%2Bo2K4%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●⑦给它上色</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接下来，为站点添加颜色。<span style="color: black;">经过</span><span style="color: black;">创立</span>品牌来赋予网站<span style="color: black;">特殊</span>。<span style="color: black;">思虑</span>一下你<span style="color: black;">期盼</span>网站<span style="color: black;">怎样</span>吸引读者。<span style="color: black;">倘若</span>你<span style="color: black;">期盼</span>它看起来干净且极少，请<span style="color: black;">选取</span>不太亮的颜色，渐变保持微妙，并<span style="color: black;">选取</span>易于阅读的字体。<span style="color: black;">倘若</span>你<span style="color: black;">期盼</span>它看起来有趣，请<span style="color: black;">选取</span>明亮的颜色，<span style="color: black;">运用</span>鲜艳的渐变，应用背景纹理，<span style="color: black;">运用</span>圆形元素，<span style="color: black;">而后</span><span style="color: black;">选取</span>醒目的字体。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/7ba1df63490a4d19b53e2ec7624b8d1b~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=8xW3OpbjTQ7t0%2FEP9MTm8Ilogvg%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">添加颜色似乎令人生畏，但你无需<span style="color: black;">认识</span>颜色原理<span style="color: black;">就可</span>。<span style="color: black;">倘若</span>您的设计是从黑白<span style="color: black;">起始</span>的，则<span style="color: black;">能够</span><span style="color: black;">选取</span>一种单色来强调元素，以赋予设计生命。<span style="color: black;">倘若</span>你想超越此范围，<span style="color: black;">意见</span>您<span style="color: black;">选取</span>一种或两种您<span style="color: black;">爱好</span>的颜色，<span style="color: black;">而后</span><span style="color: black;">运用</span>该颜色的<span style="color: black;">区别</span>亮度变化。这有助于创建一个<span style="color: black;">拥有</span>凝聚力的主题，而不必<span style="color: black;">作为</span>色彩专家。<span style="color: black;">选取</span>背景色和前景色时，请<span style="color: black;">经过</span><span style="color: black;">检测</span>颜色对比来牢记可读性。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如，将深蓝色设置为背景，<span style="color: black;">而后</span>将较浅的蓝色设置为文本。<span style="color: black;">针对</span>白色背景色，<span style="color: black;">能够</span>将蓝色的中等亮度用作标题。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/352112ec0c6f40f098781bf313e10dfe~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=2Cw3y%2Fx5cEj3Sbzz9SvAlUU%2Fmr8%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/d92c50fcfdc74a769efac9b93e115693~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=15EUqrpmY7C%2BAasFYp1JpRwsGYk%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">将颜色合并到设计中后，请继续<span style="color: black;">检测</span>总体设计感并进行<span style="color: black;">调节</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●⑧<span style="color: black;">重视</span>细节</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在设计时，你应该退后一步来查看<span style="color: black;">全部</span>设计并进行完善。<span style="color: black;">经过</span>用简单的语言描述您所看到的内容来批判你的设计，<span style="color: black;">而后</span>将该<span style="color: black;">描述</span>转换为需要<span style="color: black;">处理</span>的技术问题。</p><strong style="color: blue;">看起来紧凑吗？</strong><span style="color: black;">增多</span>填充和边距。<strong style="color: blue;">文字难读？</strong><span style="color: black;">选取</span>更清晰的字体或<span style="color: black;">增多</span>字体<span style="color: black;">体积</span>。<span style="color: black;">增多</span>背景和前景之间的颜色对比度。<strong style="color: blue;">内容难识别？</strong>添加<span style="color: black;">拥有</span>较高字体粗细的标题。在标题和段落之间添加<span style="color: black;">更加多</span>间距。<strong style="color: blue;">看起来草率或不一致？</strong>在水平和垂直的直线上对齐元素。在设计程序中设置指南<span style="color: black;">能够</span><span style="color: black;">帮忙</span><span style="color: black;">保证</span>元素正确对齐。<span style="color: black;">调节</span>填充和边距，以保持垂直方向上一致的间距。<span style="color: black;">经过</span><span style="color: black;">创立</span>标题和段落的字体和<span style="color: black;">体积</span>来使文本一致。避免文本变化太多。<span style="color: black;">保证</span>所有颜色都符合你的调色板。<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/d10c1cc97d324ab5b3841510f6f7b6d3~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=seKcXgm3e6En4SGK9H1hdn5%2Bw9E%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">完成设计后，就<span style="color: black;">能够</span><span style="color: black;">起始</span>将其转换为代码</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●①创建HTML结构</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Github上有个项目是 <strong style="color: blue;">pix2code ，</strong>它<span style="color: black;">能够</span>直接将页面生成HTML结构并附加CSS代码，<span style="color: black;">已然</span>开源了，感兴趣的<span style="color: black;">能够</span>去<span style="color: black;">瞧瞧</span>，确实很吊。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">国内暂时还<span style="color: black;">无</span><span style="color: black;">这般</span>的项目，<strong style="color: blue;">想搞拖拽<span style="color: black;">研发</span></strong>的老板真是不少，但没见过谁家真正做出来了，做不出来肯定不是技术<span style="color: black;">不可</span>实现，<strong style="color: blue;">拖拽的本质是在组件库<span style="color: black;">基本</span>上加了一层交互界面，<span style="color: black;">因此</span>组件化是拖拽<span style="color: black;">研发</span>的<span style="color: black;">第1</span>步</strong>，剩下的其实<span style="color: black;">便是</span>"layoutit"了，但要真正落地，就有<span style="color: black;">非常多</span>限制。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">可拖拽的组件应该是封装了<span style="color: black;">掌控</span>层和视图层的，原则上耦合越低越好，内聚越高越好，自己浑然一体最好，</strong>只对外暴露配置项，<span style="color: black;">亦</span><span style="color: black;">便是</span>说将一个组件拖拽到界面上之后，得有一个动态生成配置面板的机制，"layoutit"<span style="color: black;">亦</span>有一个简单的配置机制，但远远不是生产级别的，<span style="color: black;">这儿</span><span style="color: black;">能够</span>统一约定一个规则，让组件的配置项<span style="color: black;">能够</span>被读取，<span style="color: black;">亦</span><span style="color: black;">能够</span>按组件枚举，硬做到界面上，都<span style="color: black;">能够</span>，都有优缺点；</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">互相依赖的组件之间的数据交互会有问题，<span style="color: black;">由于</span>各组件的输入输出不可能完全一致</strong>，<span style="color: black;">亦</span>就做不到依赖组件之间无缝接入，常规<span style="color: black;">研发</span>中<span style="color: black;">研发</span>者会手动做<span style="color: black;">有些</span>"适配"工作，<span style="color: black;">例如</span>将A组件的输出剪裁或修饰一下传给B组件，但<span style="color: black;">此刻</span>是搞拖拽，这个数据修饰没法做了，<span style="color: black;">能够</span>修改组件做到<span style="color: black;">能够</span>互相适配，<span style="color: black;">或</span>一步到位在拖拽系统上做一套数据修饰的中间功能，让操作者自己适配，都<span style="color: black;">能够</span>，都有很大的缺点。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span>在<span style="color: black;">这儿</span><span style="color: black;">咱们</span><span style="color: black;">亦</span>只好一步步的自己切页面了，<strong style="color: blue;">尽可能是响应式的</strong>，<span style="color: black;">同期</span>按设计稿填充的内容在HTML结构填充元素。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/54cbe1b669484464bb723bd311c16db2~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=nWgImKIjt0Vwp8k7lWCwNHI%2FDMc%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●②小技巧</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">将布局变成完整的设计时，我<span style="color: black;">爱好</span><span style="color: black;">思虑</span>将设计从上到下划分为多个部分的水平线。顶部的导航栏可能是<span style="color: black;">第1</span>个切片。中间的可能是一个切片，底部的是一个切片，我会将<span style="color: black;">她们</span>用<span style="color: black;">显著</span>的线条区<span style="color: black;">掰开</span>来，<span style="color: black;">运用</span><span style="color: black;">不消</span>的颜色，美观而又清晰。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/e020f5d25c1e4967a190d1437fd30c69~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=zZteeVy1I%2FjLzY56v74tSCc1APk%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/cebe6e274bd44e11b5fd6da7798ad924~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=TXkJkHjTEFkCR7K7yQXVoTy6fDI%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">通常</span>在企业的工作的时候，都是设计师给设计稿，叮嘱效果，<span style="color: black;">咱们</span><span style="color: black;">根据</span>设计师的稿子从头到下附带交互效果直接切页面，</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">●③后续<span style="color: black;">过程</span></strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面设计完成并用代码制作了个人网站，接下来配置后台和网站在服务器的<span style="color: black;">安排</span>了，<span style="color: black;">这儿</span><span style="color: black;">咱们</span><span style="color: black;">运用</span><strong style="color: blue;">SiteServer CMS</strong> 内容管理系统来<span style="color: black;">做为</span><span style="color: black;">咱们</span>网站的后台。<span style="color: black;">怎样</span><span style="color: black;">运用</span>，<a style="color: black;">点击阅读<span style="color: black;">更加多</span></a>，既然是自己设计网站，<span style="color: black;">咱们</span>就<span style="color: black;">不睬</span>会它里面的免费模板了。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">至于后期的网站速度优化，代码优化之前我<span style="color: black;">亦</span>提过了，写过<span style="color: black;">文案</span><span style="color: black;">仔细</span>说明过，<span style="color: black;">大众</span><span style="color: black;">亦</span><span style="color: black;">能够</span>看一下。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">你不<span style="color: black;">晓得</span>的「前端性能优化」知识，我都给你总结好了</a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">网站打开速度慢，这些</a>是关键，不要以为不重要</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/cfe001515f7343b798f879adb810c6da~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722663601&amp;x-signature=%2FyLsSf04O9DvtYuF9QehrM5RhSU%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">总结</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>自己设计和代码编写，以及后期的上线，你将会学到这些。</p>自己设计网站将<span style="color: black;">帮忙</span>你练习设计技巧，并让你的网站脱颖而出创建线框以构造内容和功能<span style="color: black;">运用</span>设计工具将线框变成视觉设计。从您<span style="color: black;">爱好</span>的设计中获取灵感对页面的HTML结构进行编码，以<span style="color: black;">帮忙</span><span style="color: black;">认识</span>需要<span style="color: black;">运用</span><span style="color: black;">那些</span>CSS来转换这些元素<span style="color: black;">运用</span>CSS设置页面样式以完善匹配你的设计<span style="color: black;">经过</span><span style="color: black;">安排</span>，将其用作实践项目或继续改进设计，将其<span style="color: black;">提高</span>到一个新的水平<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有<span style="color: black;">无</span>正在自己设计搭建站点的小伙伴啊？<span style="color: black;">或</span>感觉自己<span style="color: black;">机构</span>的设计师无非<span style="color: black;">便是</span>模仿还是模仿，不管设计啥都千篇一律的？<span style="color: black;">一块</span>交流下。</p>

nykek5i 发表于 2024-10-18 05:32:26

谷歌网站排名优化 http://www.fok120.com/

nqkk58 发表于 2024-10-21 15:06:37

真情实感，其含义为认真了、走心了的意思，是如今的饭圈常用语。

b1gc8v 发表于 2024-10-24 08:22:34

大势所趋，用于讽刺一些制作目的就是为了跟风玩梗，博取眼球的作品。

nqkk58 发表于 2024-11-8 09:45:57

谷歌外链发布 http://www.fok120.com/

查看完整版本: 怎么样设计和编码制作个人网站？