web实验1指导书.doc

实验一 网站主页版面的设计 一、实验目标 1、要求学生掌握网站设计基本知识。如何规划网站Photoshop软件的使用。 二、实验内容 1、学生自行下载素材，设计某网站主页版面。 三、实验参考步骤 （一）画布处理 1、启动软件，新建一个画布大小为1002pxX810px，颜色模式：RGB，分辨率72. 2、渐变工具：淡蓝-白色，从上向下垂直线形渐变填充整个画布。 、 3、 为进行网页的布局比例，按“视图”选择“标尺”，设置相应标尺，已被布局使用 （二）、创建上方的TOP和导航条、LOGO 1、将素材图片“top”插入到画布的最顶端，与标尺对齐；TOP（此背景及建筑可自由进行合成，使用抠图命令进行合成处理）由素材TOP1、TOP2合成处理完成： 使用了魔棒工具进行选取白色区域，工具属性栏，填加到选区，补充选区其他白色区域。 选择菜单-反选，选择建筑物区域 选择移动工具，编辑菜单-拷贝将选区内容粘贴到TOP2背景中。再使用移动工具进行位置调整。 2、在图片上用文本工具在图片中间插入文字“品质成就价值 专业成就品质”，使用华文行楷，30号， 3、制作公司LOGO；新建48*52点画布，前景色使用蓝色填充， 新建图层组，继续新建图层：使用椭圆选取工具制作一个椭圆选区，进行描边2象素白色 使用动作命令及文字工具制作LOGO：打开动作调板：窗口菜单-动作，，新建动作，开启动作记录，，复制椭圆图层 编辑菜单-自由变换，旋转+30°，回车应用，动作停止记录，选择动作1，点击播放按钮进行复制播放输入文字COME 使用移动工具将LOGO放入合适位置 4、导航条制作：使用圆角矩形工具绘制一个圆角的长方形，两个图层进行颜色渐变，颜色和效果如下 具体：使用工具箱圆角矩形工具，设置半径45象素，绘制圆角矩形 双击属性工具栏上的，调出渐变编辑器，进行线性渐变编辑填充 按CTRL单击矩形选区图层取得圆角矩形选区，通过选区布尔减选区运算制作选区 新建图层2填充白色、降低图层部透明度 5、文字效果，使用横排文字工具，输入文字，并设置为加粗 插入文字后的效果为 6、素材图标制作：圆角矩形、描边：橘色；正方形通过变形制作成菱形描边：红色，输入文字，使用移动工具调整合适位置。 新建文档，新建图层，按住SHIFT+ALT制作正方形选区，填充白色，编辑菜单-描边。选择菜单-取消选区（CTRL+D） Ctrl+单击选择图形，通过编辑-自由变换菜单进行自由变形至菱形，回车完成，输入文字完成。 （三）、左侧的产品类别板块 1、 将图片“中间背景”插入到“TOP”的下面，边缘对齐 2、 在画布的左侧插入小的标识符（图片素材）和文字（字体颜色为#00385a，宋体，12号），效果如下 线条制作：新建文档，新建图层组LINE，在图层组中建立图层进行管理。 新建图层（图层名称：线条）使用渐变编辑器编辑渐变,对椭圆形选区进行对称渐变，使用编辑菜单-自由变化，进行变化。 复制多个线条图层，使用移动工具调整位置 （四）、中间的公司简介和产品展示板块 1、文字工具插入公司简介的文字（字体颜色为#00385a，宋体，12号），从文字素材中取得文字内容，进行编辑。 2、 调整效果，company颜色为#e8b312，加粗 3、在公司简介的下部（距离画布顶端500px）插入如下温习和图片，字体效果同上 （五）、右边的功能板块的设计以及底部的信息 1、 绘制圆角方块，作为新品推荐的板块。设置混合选项，插入相对应的文字。 2、 下部4个功能板块的布局必须对齐，间距相等。字体颜色为#306599，加粗 3、 在底部插入图片，紧贴画布底部边缘。插入对应的文字，图片和logo，效果如下 四、实验课后习题 1、课下学生通过自学学习Photoshop软件的使用； 2、上网有哪些信誉好的足球投注网站、浏览各类网站，并从以下方面对你喜欢的网站进行分析，以予以借鉴。1）、网站题材、名称、内容及表现形式2）、网站的CI形象3）、网站风格、创意 4）、网页色彩搭配 5）、网站栏目 6）、站的链接结构 7）、网页版面布局