《[理学]网页设计入门教程.doc》由会员分享，可在线阅读，更多相关《[理学]网页设计入门教程.doc（30页珍藏版）》请在三一办公上搜索。
1、第一章：网页布局1.1画出页面的整体布局制作网页之前，我们首页要先设想出网页的样子，就是网页的大体布局形式，根据布局来设计网页能加快我们的设计速度。对网站页面整体布局就意味着，我们在设计的时候要根据我们布局的来设计，所以我们在网站整体布局的时候要考虑清楚，要根据方案书的具体分析和栏目要求来布局，要体现出简洁、大方，所以我们在首页的布局上面不能有太多的栏目块，banner图要稍微比一般网站要大点，这样能衬托大方的味道，至于简洁嘛？我们就在首页上体现几个重点的栏目块，一般体现的是企业的公司简介、公司产品、联系方式、新闻中心等。所以我们就选择3个栏目块来布局，3个栏目块布局在一排，具体页面整体布局规
2、划图如图1.1所示。图1.1 勾画出布局草稿1.2新建网页大小 布局出来后，接下了就是要确定网页的大小，标准的网页大小宽度一般的1003PX，高度不定，只要不超过1003PX的网页都是正常的，超过1003PX后，在800*600的宽屏电脑的浏览器下面会出现左右条,会影响页面浏览, 如图1.2所示。图12 大于1003PX的页面，浏览器显示方式步骤：打开【文件】菜单，选择【新建】菜单，在弹出的【新建】对话框中输入网页的名称为“家家洁纸业”，宽带1003像素，高度720像素，然后点确定按钮，如图1.3所示。图1.3 新建网页文件1.3 填充网页背景颜色在定义完网页大小后，需要给网页填充一个主题颜色
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来说，客户
4、给我们的只是一张图片，我们需要通过抠图工具把我们需要的部分提取出来，这样可以增强页面美观性。图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文件拖至网页文件中步骤二：
5、用PS左侧的【魔棒工具】，点击LOGO图片，图片将出现虚线形状的选取，如图2.5所示，出现选取后按键盘上的【Delete】键，将选中的白色区域删除掉，得到如图2.6所示的效果。图2.5 使用魔棒工具得到的选取图2.6 删除选取后的效果步骤三：点击【图层】面板中的样式按钮，选择样式中的描边，设置描边的大小为2，颜色为白色，如图2.7所示，设置后的效果如图2.8所示。并把LOGO放在左上角合适的位置。图2.7 设置描边的参数图2.8 处理后的LOGO2.2制作网站联系方式 留下联系方式能够让网站访问者很快联系到公司，所以联系方式能够突出，最好放在网页的左上角位置，具体放在什么位置自己因情况而定，为
6、了达到和页面统一，所以颜色上和样式上应该和页面相符合。图2.9为制作好的联系方式。图2.9 制作好的联系方式步骤一：点击工具栏中的【自定义形状工具】，如图2.10所示，在菜单栏下面将出现其属性，点击形状，将出现一系列形状，找到电话的形状，如图2.11所示，没有的话到网上下载其形状，并在页面上画一个适当大小的电话形状，并添加描边，描边大小为2，颜色为白色，设置如图2.12所示，最终效果如图2.13所示。图2.10 自定义形状工具图2.11 自定义形状选择图2.12 电话形状的描边设置图2.13 最终效果步骤二：在工具栏中选择【文字】工具，在步骤一中做好电话形状后面点击并输入“全国统一免费热线”，
7、设置文字的大小15px，字体为华文细黑，具体设置如图2.14所示，并添加描边，描边大小为2px，颜色为白色，最终效果如图2.15所示。图2.14 文字的样式设置图2.15 最终效果步骤三：在工具栏中选择【文字】工具，输入“400”电话，在图层中选择图层样式中的【渐变叠加】，渐变颜色为# 326d1e到# 58ac33；具体设置如图2.16所示，并设置描边为2px，颜色为白色，如图2.17所示，最终效果如图2.18所示。图2.16 设置电话号码的渐变叠加图2.17 设置电话号码的描边图2.18 最终效果2.3菜单的制作 菜单的制作主要是体现出网站的几大分类，让浏览者一目了然的了解网站的几大板块内
8、容，方便浏览者了解公司和了解网站，菜单的制作不需太复杂，注意的是做出来的菜单要和整个页面的样式和颜色要符合、要协调。图2.19为最终的菜单样式。图2.19 菜单的最终样式步骤一：选择工具栏中的【矩形】工具下面的【圆角矩形工具】，设置圆角矩形工具的属性如图2.20所示，并在PS中画出一个圆角矩形，效果如图2.21所示。图2.20 圆角矩形工具的属性设置图2.21 圆角矩形画出的形状步骤二：选择工具栏中的转换点工具，如图2.22所示，并点击步骤一中画好的形状，在点击一下形状的圆角，出现如图2.23所示的样式，四个角会出现远点，用鼠标左键点击左下角的圆点，按键盘上的Del键进行删除，重复此步骤，在点
9、击右下角的圆点，同样按Del键删除，得到图2.24的效果。图2.22 选择转换点工具图2.23 用转换点工具点击后的效果图2.24 删除圆点后的效果步骤三：点击图层面板中的【渐变叠加】样式，为其添加渐变颜色，点击渐变，如图2.25所示，弹出2.26所示的对话框，并设置其渐变值，分别是#4d9733，#4d9633，#58ac33，#58ac33，点击确定，得到最终效果如图2.27所示。图2.25 点击渐变图2.26 设置渐变颜色值图2.27 添加渐变后的效果步骤三：在做好的菜单背景后，我们需在此背景上添加文字，选择文字工具，点击步骤二中做好的背景，并输入文字，文字的大小和字体如图2.28所示，
10、添加好文字后的效果如图2.29所示。图2.28 字体的样式设置图2.29 添加好后的文字步骤四：选择工具栏中的【直线工具】如图2.30，在文字中间部位点击鼠标左键拖拉出一条直线，最终效果如图2.31所示。图2.30 选择直线工具图2.31 在文字中间添加竖直线步骤五：选择工具栏中的【矩形工具】，画一条合适高度的矩形线条，放在在上面步骤做好的图形的下方，最终效果如图2.32所示。图2.32 做好后的菜单样式2.4摆放做好的图形，调节头部的美观性 通过上面几节的操作，我们已经把LOGO、联系方式、菜单都做好了，现在就需要把做好的按照布局样式摆放到合适的位置就OK了，最终效果如图2.33所示。图2.
11、33 头部的最终效果第三章：网站Banner的制作3.1找时候网站性质的素材 找到一张合适的素材对网站的banner设计很有用，提供的素材如果3.1所示。图3.1 banner素材图片3.2用选取工具截取一部分需要的图片 找好的素材不一定要全部都用上，有的素材图片很大，我们需要进行截取，截取我们想要的那一部分，图3.2和图3.3就是截取前后的效果。 图3.2 banner素材截取前 图3.3 banner素材截取后步骤四：选择工具栏中的【矩形选择】工具，在素材图片中选择一定区域，按Ctrl+x裁切，再按Del键删除剩余的，在案Ctrl+v粘贴，就得到如图3.4所示的效果。图3.4 素材截取后的
12、效果3.3在处理好的素材上添加文字装饰 素材处理好以后，还需要对素材进行修饰，修饰方法一般就是采用公司的标语来进行修饰，最终效果如图3.5所示。图3.5 最终效果步骤一：选择工具栏中的【文字】工具，输入“家家洁纸业”，并设置文字的大小和颜色等样式，如图3.6所示，设置好以后得到如图3.7所示的样式，点击图层面板中的，为文字添加【斜面和浮雕】效果，设置参数的值如图3.8所示，最终效果如图3.9所示。图3.6 文字的属性设置图3.7 添加文字后的效果图3.8 设置样式图3.9 设置样式后的效果步骤三：选择工具栏中的【文字工具】，输入“汲取蜀竹精华，传承中华文化”，设置文字的属性如图3.10所示，在
13、选择图层面板中的样式按钮，为文字添加描边样式，描边样式设置如图3.11所示，最终效果如图3.12所示。图3.10 设置文字的属性图3.11 设置文字的描边样式图3.12 banner图的最终效果3.4 放置banner的位置 做好banner后，我们根据页面的布局形式，静banner放置在头部下面适合的位置，最终效果如图3.13所示。图3.13 banner放置后的效果第四章：新闻中心栏目的制作 新闻中心主要是体现网站中的日常最新新闻，主要的体现形式是文字的形式，新闻中心栏目的最终效果如图4.1所示。图4.1 新闻中心栏目最终效果4.1 制作标题图标步骤一：选择工具栏中的【矩形工具】，画出一个
14、小矩形，并在图层面板中选择样式中的【颜色叠加】样式，颜色值为#5e8247,其样式的设置如图4.2所示，填充好颜色后，在矩形块上面输入“新闻中心”，新闻中心的字体样式等设置如图4.3所示，并把文字放置在矩形块的中间位置，最终效果如图4.4所示。图4.2 矩形颜色叠加图4.3 文字的属性设置图4.4 标题图标的最终效果4.2 添加MORE图标素材在百度中搜索“more图标”找到一些适合的more图标，将其导入到PS中，并将素材图标放置在“新闻中心标题图标”的后面适当位置，并用工具栏中的【矩形工具】在图标下方画出一条线，最终效果如图4.5所示。图4.5 标题的最终效果4.3 添加文字在做好的标题栏
15、下面添加文字，也就是新闻标题，主要用到的工具还是文字工具，最终效果如图4.6所示。图4.6 添加文字后的最终效果步骤一：选择工具栏中【文字】工具，点击鼠标的左键拖出一块区域，如图4.7所示，在选框内输入“祝贺家家洁纸业新网站正式发布. 2009-08-10”，复杂此字样，按Enter键换行，然后粘贴，直到输入五行字体，最终效果如图4.8所示。图4.7 拖出的文字选框图4.8 输入文字后的效果步骤二：选择工具栏中的【椭圆工具】，按键盘中的Shift键，画出一个小圆点，并选择样式按钮中的【颜色叠加】，为其添加颜色，设置如图4.9所示，图4.9 为圆点添加颜色步骤三：搜索“虚线”素材，并导入到PS中
16、，并将其摆放在文字的下方，最终效果如图4.10所示。选择“远点”和“虚线”并按住键盘中的Alt键进行复杂，复杂4个分别放在其他的文字下方，最终效果如图4.11所示。图4.10 添加远点和虚线后的文字图4.11 文字的最终样式步骤四：将做好的文字和标题图标防止好位置，最终效果如图4.12所示。图4.12 制作好的新闻中心栏目第五章：最新产品栏目的制作5.1 制作“最新产品”栏目最新产品栏目主要是展示公司的新产品，所以这里是一个放置图片的区域，为了突出产品，用一个方块来作为产品的背景，最终效果如图4.13所示。图5.1 产品栏目的最终效果步骤一：选择工具栏中的【矩形工具】，画出一条竖形，并在样式中
17、添加其颜色值为#339933，用【文字】工具，输入“最新产品”字样，设置其属性如图5.2所示，并在文字后面适当位置添加more素材，得到的最终效果如图5.3所示。图5.2 “最新产品”字体属性图5.3 标题的最终效果步骤二：选择【矩形】工具，画出一个矩形，点击样式按钮，添加【颜色叠加】为白色和【描边】大小为4px，位置为“内部”，样式设置如图5.4和图5.5所示，并导入产品图片，放在矩形框上面，最终效果如图5.6所示。图5.4 颜色叠加样式图5.5 描边样式图5.6 最新产品栏目最终效果第六章：关于我们栏目的制作6.1 制作“关于我们”栏目 关于我们栏目其实是公司简介的一部分，没体现完的后面部
18、分通常用省略号表示，此栏目的最终效果如图6.1所示。图6.1 “关于我们”栏目最终效果步骤一：选择工具栏中的【文字工具】，文字的属性设置如图6.2所示。图6.2 文字属性设置步骤二：选择【矩形工具】，画出一个矩形，点击【样式】按钮，为其添加颜色叠加样式，颜色值为：# dde9c1，设置如图6.3所示，按住Alt键用鼠标拖动此矩形框进行复制，将其颜色填充为白色，然后按快捷键Ctrl+T，对复制出的矩形框进行缩小，缩小后放置在前面矩形框的上方并放置在其当中，最终效果如图6.4所示。图6.3 设置矩形框的颜色样式图6.4 矩形框最终效果步骤三：选择【文字工具】，用鼠标拖出一块选取，并在其中输入公司简
19、介，并放置在矩形框的上方，最终效果如图6.5所示。图6.5 输入文字后的效果第七章：版权的制作7.1 制作“版权”栏目 首页的最后一个步骤，就是版权的设计，版权的设计一般都是很简单的，主要能在版权体现出网站的所有者、联系方式、地址等，也可以加上logo等来修饰版权，版权不是很复杂，本实例的版权效果图如图7.1所示。图7.1 版权的最终效果步骤一：复制头部的LOGO，点击【图像】菜单中的【模式】菜单，将模式改为【灰度】，如图7.2所示，更改后的LOGO样式如图7.3所示。图7.2 更改LOGO模式图7.3 更改模式后的LOGO步骤二：用【矩形工具】，画出一个矩形框，样式填充为灰色，填充值为：#e
20、bebeb，并放置在最下方，如图7.4所示。图7.4 版权的背景颜色步骤三：用【直线工具】，在灰色的LOGO后面画上一条竖线，最终效果如图7.5所示。图7.5 添加竖线后的版权步骤四：用【文字工具】，在版权板块上选取一块空间，输入版权，设置字体的颜色和大小如图7.6所示，放置好文字位置，得到版权的最终效果如图7.7所示。图7.6 版权文字属性设置图7.7 版权最终效果第八章：页面整合8.1 整合各栏目板块 前面的章节已经把网页中的各栏目板块设计完成了，最后我们需要把各个板块的元素整合到一起，让其形成工整的页面，为了能够完全的对齐，选择【视图】菜单下的【标尺】菜单，此时PS中的左边和上边将出现如图8.1的样子，并用鼠标拉出标尺，对齐网页的两边，如图8.2所示，再将各元素按照标尺线对齐，就得到一个完整的网页了，网页的最终效果图如图8.3所示。图8.1 标尺图8.2 有标尺的效果图8.3 网页的完整样式
