[理学]网页设计入门教程.docVIP

第一章：网页布局 1.1画出页面的整体布局 制作网页之前，我们首页要先设想出网页的样子，就是网页的大体布局形式，根据布局来设计网页能加快我们的设计速度。 对网站页面整体布局就意味着，我们在设计的时候要根据我们布局的来设计，所以我们在网站整体布局的时候要考虑清楚，要根据方案书的具体分析和栏目要求来布局，要体现出简洁、大方，所以我们在首页的布局上面不能有太多的栏目块，banner图要稍微比一般网站要大点，这样能衬托大方的味道，至于简洁嘛？我们就在首页上体现几个重点的栏目块，一般体现的是企业的公司简介、公司产品、联系方式、新闻中心等。所以我们就选择3个栏目块来布局，3个栏目块布局在一排，具体页面整体布局规划图如图1.1所示。 图1.1 勾画出布局草稿 1.2新建网页大小 布局出来后，接下了就是要确定网页的大小，标准的网页大小宽度一般的1003PX，高度不定，只要不超过1003PX的网页都是正常的，超过1003PX后，在800*600的宽屏电脑的浏览器下面会出现左右条,会影响页面浏览, 如图1.2所示。 图12 大于1003PX的页面，浏览器显示方式 步骤：打开【文件】菜单，选择【新建】菜单，在弹出的【新建】对话框中输入网页的名称为“家家洁纸业”，宽带1003像素，高度720像素，然后点确定按钮，如图1.3所示。 图1.3 新建网页文件 1.3 填充网页背景颜色 在定义完网页大小后，需要给网页填充一个主题颜色，这里选择主题颜色为绿色，填充方式选择渐变，并且是上下渐变，图1.4和图1.5为处理前后的效果。 图1.4 填充前的网页背景 图1.5 填充后的网页背景 步骤一：打开【窗口】菜单下的【图层】面板，如图1.6所示，点击图层面板中的新建图层按钮，新建一图层。在点击图层面板中的样式按钮，选择样式中的渐变叠加，如图1.7所示。 图1.6 图层面板 图1.7 选择图层面板中的渐变叠加 步骤二：打开样式面板中的【渐变叠加】，如图1.8所示，点击渐变，设置渐变值为# cde4b7到# ffffff，如图1.9所示。 图1.8 样式面板 图1.9 设置渐变颜色 第二章：制作网页头部 2.1处理LOGO 对于LOGO来说，客户给我们的只是一张图片，我们需要通过抠图工具把我们需要的部分提取出来，这样可以增强页面美观性。图2.1和图2.2为处理前后的LOGO效果。 图2.1 处理前的LOGO 图2.2 处理后的LOGO 步骤一：点击【文件】菜单下的【打开】菜单，打开我们将处理的LOGO图片，点击Photoshop的【向下还原窗口】，此时就出现了两个文件，如图2.3所示。按住鼠标左键，将LOGO拖至“家家洁”的PS文件中，如图2.4所示,此时就可以关闭刚刚所打开的LOGO文件了，后面的操作就直接在网页文件中完成，然后点最大化窗口进行操作。 图2.3 向下还原后出现的两个窗口 图2.4 将打开的LOGO文件拖至网页文件中 步骤二：用PS左侧的【魔棒工具】，点击LOGO图片，图片将出现虚线形状的选取，如图2.5所示，出现选取后按键盘上的【Delete】键，将选中的白色区域删除掉，得到如图2.6所示的效果。 图2.5 使用魔棒工具得到的选取 图2.6 删除选取后的效果 步骤三：点击【图层】面板中的样式按钮，选择样式中的描边，设置描边的大小为2，颜色为白色，如图2.7所示，设置后的效果如图2.8所示。并把LOGO放在左上角合适的位置。 图2.7 设置描边的参数 图2.8 处理后的LOGO 2.2制作网站联系方式 留下联系方式能够让网站访问者很快联系到公司，所以联系方式能够突出，最好放在网页的左上角位置，具体放在什么位置自己因情况而定，为了达到和页面统一，所以颜色上和样式上应该和页面相符合。图2.9为制作好的联系方式。 图2.9 制作好的联系方式 步骤一：点击工具栏中的【自定义形状工具】，如图2.10所示，在菜单栏下面将出现其属性，点击形状，将出现一系列形状，找到电话的形状，如图2.11所示，没有的话到网上下载其形状，并在页面上画一个适当大小的电话形状，并添加描边，描边大小为2，颜色为白色，设置如图2.12所示，最终效果如图2.13所示。 图2.10 自定义形状工具 图2.11 自定义形状选择 图2.12 电话形状的描边设置 图2.13 最终效果 步骤二：在工具栏中选择【文字】工具，在步骤一中做好电话形状后面点击并输入“全国统一免费热线”，设置文字的大小15px，字体为华文细黑，具体设置如图2.14所示，并添加描边，描边大小为2px，颜色为白色，最终效果如图2.15所示。 图2.14 文字的样式设置 图2.15 最终效