[理学]网页设计入门教程.doc
《[理学]网页设计入门教程.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.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 理学 网页 设计 入门教程
链接地址:https://www.31doc.com/p-1987171.html