从头编写操作系统_从头开始编写一个美丽的网站

最新推荐文章于 2021-08-23 21:58:03 发布

daique1908

最新推荐文章于 2021-08-23 21:58:03 发布

阅读量748

点赞数

文章标签： html css java 脚本语言 math.h

从头编写操作系统

作为流行教程“从头开始设计漂亮的网站”的续篇，我们将把漂亮的设计转换为有效HTML / CSS网站。即使我们使用了960.gs模板，我们也不会使用其CSS框架来构建站点。相反，我们将从头开始对此设计进行编码！

首先创建强大清晰的标记始终很重要，这为什么呢？原因之一是因为，如果我们需要更改设计或重新排列网站中的某些内容，则只需要对CSS文件进行修改，而无需触摸标记。

介绍

今天，我们将学习如何准备此设计以进行编码，并将其编码到有效的（X）HTML / CSS跨浏览器网站上。我们将仅覆盖网站的主页，如果您有兴趣进行更多练习，可以在Themeforest.net上获得该设计。这是一个非常详细的教程。因此，您最好准备一大杯茶和一些饼干。我们从3,2,1开始......

第1步-组织文件夹

在开始新项目之前，我们将需要创建一个新文件夹，以保存所有数据。通常，我会为每个以我设计的网站命名的项目创建一个文件夹。在内部，我创建了一组用于各种目的的文件夹，例如“文件”，“ PSD”，“ HTML”，“ pdf”等。我们现在仅需要一个文件夹，您可以将其称为“ HTML”。在该文件夹中，再创建3个文件夹，并将其分别命名为“ css”，“ js”和“ images”。然后打开“ css”文件夹并创建另一个文件夹，并将其简称为“ i”（代表images ）。我们为什么要这样做？嗯...之所以这样做，是因为我想将内容图像与创建网站布局的图像分开。如果我需要在服务器上移动我的文件夹，那么这将派上用场，那么我的图像的路径将不会受到影响，并且我不需要再次修改CSS文件来更正它。

第2步-分析设计

这样，我们就完成了整理文件夹的工作。现在，我们可以仔细看看我们的设计。像我一样，拍摄“美丽的网站设计”屏幕截图，然后尝试思考“幕后”。我们未来网站的每个元素都需要编码并包装在HTML标记内。我们还应该记住，这将是一个模板，以后有人会使用它并对其进行修改以适应他们的需求，因此我们需要使其对我们的用户尽可能地灵活。我们需要确保，如果用户希望放一个更大的徽标而不是这个徽标，则徽标所在的占位符（div）是可扩展的。网站的其他部分也需要扩展内容。这就是为什么我们可能需要几个额外的占位符（div）来完成此操作的原因。如果要为客户端编码站点，则可能无法以这种方式对其进行切片，因为它可能会保持原样。让我们一步一步去看看哪些元素在哪个标签中。

首先是背景。我们需要将顶部分成两个较小的部分：顶部_top（用于徽标和搜索字段）和顶部_bottom（用于放置导航）。此外，还有一个很大的页眉支架，主要内容和页脚。注意，页脚导航有一个额外的框。这是因为我们也希望页脚也可扩展，因为有人可能希望最近发表10条帖子或评论，而不是像我设计的那样只有3条。这样，页脚内容将使页脚导航进一步向下，并且始终会有更多空间容纳更多内容。

现在的界面。徽标通常包裹在H1标签内，因此我们将在此处执行相同的操作。搜索表单将被包装在“ form”标签内，该标签将获得背景图片，如屏幕截图所示。在继续之前，我建议我们看看可以在哪里使用所有6个标题（H1至H6）。 H1完成了，我们说这将是我们的徽标，因为它是最重要的，并且始终是第一位。 H2是第二重要的标题，我们将使用它来包装标记行图像。不过请放心，我们将为屏幕阅读器提供替代文本。我决定将第三个标题用于显示我们的服务描述或标记行。所以做吧。因为客户对我们的评价非常重要。我决定，即使它看起来像一个段落文本，它也应该放在H4标签内，而不仅仅是一个段落。 H5用于页脚标题，H6用于最新博客条目。好了，我们的H消失了，我们可以继续前进。如您所见，每个具有一个或多个句子的元素都放在一个段落中，链接当然是
“如。像主要内容中的项目符号列表一样，项目符号列表是一个简单的无序列表“ ul”，其中“ li”上的项目符号被替换为自定义图像。同样，我们所有的导航，顶部，中间和底部都放置在无序列表中-只是样式不同。

如果您注意的话，您会注意到我仅使用了5个HTML元素/标签来创建布局。例如，我将“注册”按钮直接放在“ a”标签内，因为毕竟它是一个链接，无论它后面是否有按钮图形。没有必要先创建带有按钮图形的div，然后再在其中放置链接“ a”。完成分析后，我们可以打开Photoshop并准备要切片的PSD。

步骤3-准备PSD

在本教程中，我们将使用“ 切片工具”剪切出布局图像。是的，您没听错，切片工具。我仅在创建供他人使用或在Themeforest上出售的模板时才使用它，因为并非每个人都有技巧来更改其徽标图像或其他图形并在不破坏布局的情况下进行替换。基本上，每个人都还需要在CSS文件中进行一些修改（更改尺寸等）。

请记住，我们在谈论的是如何使某人稍后更轻松地对其进行修改，这就是实现它的方法之一。

如果您觉得不需要这样做，请跳过此步骤。
由于我们的设计中有很多图形，因此我们需要将它们分开以使其易于分割。我通常隐藏所有内容和按钮等，只保留背景并将该文件另存为backgrounds.psd。没有背景的按钮等也一样。因此，现在我们有两个psd文件。一有背景，一有按钮，项目符号，标题等。

psd

content.psd

步骤4-切片图像

现在，我们可以开始对布局进行切片。我们有“ background.psd”和“ content.psd”。我们将首先从“ background.psd”开始。如前所述，您可以像我有时一样从一个psd文件中剪切出图形，但是这次将其分开很重要，这样我们的客户以后更容易进行修改。

打开“ background.psd”文件。在左侧的“工具”面板中，选择“ 切片工具” 。

第5步

选中“ 切片工具”后 ，从文档顶部到下一个条纹（导航部分）绘制一个切片。使切片约20像素宽。注意：有时最好使重复的背景图像更宽。其原因是因为我们的浏览器将重复图像以创建背景，并且浏览器渲染引擎需要计算背景宽度并添加图像以创建完整背景。如果我们的图像为1px，请想象需要完成多少计算，并且您的CPU使用率当然会增加更多。话虽这么说，明智的做法是使用更大的文件大小（仅几千字节）制作更宽的背景图像，以节省CPU使用率。

将切片拉到深灰色线附近，因为这是我们的导航背景开始的地方。请注意，我们如何始终在每个切片的底部保留纯色。这是因为通过这种方式我们使该区域可扩展。稍后，我们将为占位符和此重复的图像添加背景色，如果我们的内容更大，我们的网站就不会损坏！

第6步

我们不需要每次都绘制切片，只需复制现有的切片并调整其大小即可。按住Shift键并从上方向下拖动切片。仅调整高度！使它的切片的底部为浅灰色纯色。

步骤7

标题背景是唯一保持高度固定的部分。这就是我们要分割此背景图像的方式。再次从上方复制切片，然后调整高度以适合整个蓝色标题部分，包括小阴影。

步骤8

主要内容背景不需要全高分割。我们需要查找出现在渐变中的最后一个纯色，即#ffffff（白色）。使用颜色选择器工具查找渐变的该部分，并将切片的高度调整到该点。

步骤9

页脚。从上方复制切片，将其向下移动并调整高度以适合深灰色页脚背景。

第10步

现在，我们只剩下底部的小导航背景了。再次从上方复制切片并调整高度，直到到达文档末尾。

步骤11

我们还没有背景知识。我们还有相框和灯光效果。要对图片框架进行切片，我们需要禁用所有背景图层，因此最终只有该框架。然后画一个切片并放大。调整切片，使整个图像放置在该切片内。

步骤12

这是所有背景层都关闭时的灯光效果。创建切片时，请确保您留在960网格内。顶部灯（1）和底部灯（3）将作为透明PNG输出，中间部分（2）作为JPEG输出。我们可以用Background将整个光效果切成薄片并保存为JPEG，但我更喜欢这样做。

步骤13

现在打开您的“ content.psd”文件，因为我们现在将删除按钮，图像，导航等。

就像之前一样创建切片。确保放大很多以为每个对象精确创建一个切片。这就是它的外观。

切片时，始终可以使背景获得更好的对比度。

步骤14

将页眉中的两个按钮放大100％，以查看阴影的结束位置并在其周围绘制一个切片。在这里非常精确是很重要的，因为我们不希望阴影被割断。在浏览器中看起来很尴尬。

步骤15

是时候将我们的切片导出为透明的PNG。转到“ 文件”>“保存为Web” 。从下拉列表中选择PNG 24 。

步骤16

现在按住Shift键并选择我们创建的所有切片，因为我们不会仅导出这些切片。也许您需要再次从下拉菜单中选择PNG 24。点击保存。对话框窗口打开时，从窗口底部的下拉菜单中选择仅保存选定的切片 。确保指定要将图像导出到的文件夹。

步骤17

我们将滑动门技术用于导航按钮。如果您想了解更多信息，请确保您在A List Apart中访问了本文。我们需要确保按钮的左侧部分足够长，以适合菜单中最长的单词（PORTFOLIO）。这就是为什么我们必须在设计中扩展：hover /：active状态以适合该单词。最好使它宽几个像素，而不是如果不适合再重新切片。

步骤18

对于选项卡式导航，我们将使用CSS Sprites。有关CSS Sprites的更多信息，请阅读确切地如何使用CSS Sprites 。我们需要为非活动和活动状态创建一个按钮。这样做是为了使我们可以将非活动标签移动到活动标签上方，并用两种状态对每个标签进行切片。

这就是一个选项卡切片的外观。确保标签之间留出1px的间距。

步骤19-命名图像

现在该给导出的图像起有意义的名称了。我已经对所有图像及其名称进行了屏幕截图，因此您可以按照我的示例进行操作。这些图像都放置在“ CSS / i”文件夹中，因为它们是我们网站布局的一部分。其他图像（如页脚“广告”或“特色作品”图像）位于根目录下的“ / images”文件夹中。

第20步-准备HTML和CSS模板

我们准备关闭Photoshop，并开始编写此精美设计的代码。在这样做之前，让我们做一个很小的准备工作。这只是可选步骤，您可以根据需要跳过。我通常为每个项目准备HTML和CSS文件。一旦完成该操作，您只需要将它们复制到您的工作文件夹中。我喜欢这样的空白HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="description" content="#" /> 
<meta http-equiv="cahe-control" content="cache" /> 
<meta http-equiv="Content-Language" content="en" /> 
<meta http-equiv="Copyright" content="Copyright #" /> 
<meta name="keywords" content="PLEASE ENTER YOUR KEYWORDS HERE" /> 
<meta name="robots" content="index" /> 
<meta content="all/follow" name="robots" /> 
<meta content="general" name="rating" /> 
<meta content="7days" name="revisit" /> 
 
<!--CSS --> 
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" /> 
 
<!--JAVASCRIPT --> 
 
<!--PAGE TITLE --> 
<title>BVD - Beautiful Website Design</title> 
</head>  
 
<!--BEGIN BODY --> 
<body> 
 
</body> 
</html>

在CSS文件中，我想写一些有关我正在编码的网站的信息，因此它看起来像这样：

/*  CSS Document for BVD */ 
/* 
 
 
Title:			main.css 
Browser(s): 	All  
 
Author: 		Marko Prljic (http://www.markoprljic.iz.hr) 
Created: 		11.05.2009 
 
*/

第21步-标记

首先是第一件事。我们将从标记开始。正如引言中所述，创建强大而简洁的标记非常重要。这就是为什么我们在开始编码之前首先分析我们的设计，做一些注释并考虑我们的标记结构的原因。我建议您每次开始编码任何项目之前都要这样做。如果该站点稍后将在某种CMS上采用，那么最好坐在开发人员旁边并再次进行标记，并最终根据需要进行一些更改。由于我们不会在任何CMS中采用此方法，因此我们可以坚持使用第2步中的注释。

步骤22

让我们从背景开始。为此，我们需要为内容创建占位符。将此代码放在体内。

<div id="top_content"> 
    <div class="center" id="top_light1"> 
    	   
    </div> 
</div> 
<div id="nav_content"> 
    <div class="center" id="top_light2"> 
    	 
    </div> 
</div> 
<div id="header"> 
    <div class="center" id="top_light3"> 
    	 
    </div> 
</div> 
<div id="main_content"> 
    <div class="center1" id="top_light4"> 
         
    </div><!--end center 1 --> 
</div><!-- end main content--> 
<div id="footer"> 
    <div class="center" id="top_light5"> 
         
    </div> 
</div> 
<div id="footer_nav"> 
	<div class="center"> 
     
    </div> 
</div>

还记得我们是如何从PSD文件中切片图像的吗？首先，我们先切割顶部背景，然后再切割导航背景，再切割主要内容背景等。现在，当我们创建标记时，将按照与切割图像相同的顺序进行。所以我先创建了“ top_content” div，然后创建了“ nav_content”，然后创建了“ main_content”，“ footer_content”和“ footer_nav”。您会注意到，我立即创建了一些额外的div，称为“ center”。我这样做的原因是因为这些“中心” div是我们真正的内容所有者，可以这么说。 “ top_content” div用于显示我们重复的背景图像，并将通过CSS文件设置为100％宽。我们需要创建一个将居中的额外div，以便我们的内容也可以在浏览器中居中显示。

步骤23

现在，我们已将所有主要占位符都用于内容。下一步是一步一步地开始为其他元素添加一些代码。在“ top_content” div中，我们有一个徽标和一个搜索输入字段。让我们将它们装箱。

<div id="top_content"> 
    <div class="center" id="top_light1"> 
    	<h2><a href="#">BVD-Beautiful Website Design</a></h2> 
        <form id="search" action="" method="post"> 
        	<fieldset> 
            	<label for="search">Search</label> 
                <input  name="search" type="text" id="search" tabindex="1" /> 
           </fieldset> 
        </form>     
    </div> 
</div> 
<div id="nav_content"> 
    <div class="center" id="top_light2"> 
    	<ul id="nav"> 
        	<li><a href="#"><span>home</span></a></li> 
            <li><a href="#"><span>about</span><</a></li> 
            <li><a href="#"><span>service</span></a></li> 
            <li><a href="#"><span>portfolio</span></a></li> 
            <li><a href="#"><span>blog</span></a></li> 
            <li><a href="#"><span>contact</span></a></li> 
            <li><a href="#"><span>pricing</span></a></li> 
        </ul> 
        <p ><a href="#">Log in</a> <span >or</span></p><a href="#">Sign up</a> 
    </div> 
</div> 
<div id="header"> 
    <div class="center" id="top_light3"> 
    	 <h2>We make beautiful websites at affordable prices </h2> 
         <p>Because web design is our passion and that’s what we do </p> 
	 <p><strong>Gratuitous octopus </strong> niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.  </p> 
         <a href="#">Get a qoute </a> <a href="#">View portfolio </a> 
         <img src="images/header_images.png" alt="featured work" width="471" height=

最低0.47元/天解锁文章

daique1908

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
从头编写操作系统_从头开始编写一个美丽的网站

作为流行教程“从头开始设计漂亮的网站”的续篇，我们将把漂亮的设计转换为有效HTML / CSS网站。即使我们使用了960.gs模板，我们也不会使用其CSS框架来构建站点。相反，我们将从头开始对此设计进行编码！首先创建强大而干净的标记始终很重要，为什么呢？原因之一是因为，如果我们需要更改设计或重新排列网站中的某些内容，则只需要对CSS文件进行修改，而无需触摸标记。介绍今天，...
复制链接

扫一扫