网页设计教学课件-项目2 制作简单网页.pptVIP

项目二 制作简单网页 制作简单网页 一、项目描述及分析 二、进行网站功能设计 三、设计网站首页草图 四、网页的制作与上传 五、知识链接 目 录 项目描述： 制作一个简单的企业网站页面，熟悉Photoshop、Dreamweaver软件以及网站的基本建设流程。 项目分析： 河南恒升钢铁有限公司是一家中小型冶炼企业，其主导产品是优特钢线材、优特钢棒材、建筑用线材、建筑用棒材、商品钢坯等。其网站主要用于展示公司产品和宣传公司形象，因此在结构上比较简单。 项目描述及分析 主要任务 规划网站。 用Photoshop制作页 面草图，并切片、导出。 在Dreamweaver中建立站点，并上传页面。 页面效果图 任务1. 进行网站功能设计 企业网站的主要功能是向目标消费群体传递与企业产品、服务相关的信息，因此在页面设计上无需太过花哨和标新立异，而应注重其实用性，遵循快速、简洁、吸引人、信息概括能力强、易于导航的原则。 企业主要产品为钢铁材料，这类企业网站，在整体色调上应以简洁大方为原则，不宜选择过于有冲击力的颜色，如红色、绿色、紫色等，而应选择有行业代表性的色彩作为页面的主色调。 河南恒升钢铁有限公司是一家中小型钢铁冶炼企业，其网站主要用于展示产品、宣传品牌形象和发布一些新闻公告（如会议信息、培训信息、招聘信息等）。因此，在首页上应设置“公司介绍”、“产品展示”、“新闻动态”和“招聘信息”等子栏目。 经过与企业沟通，确定以蓝色为网站的主色调。 通过对恒升钢铁公司的主要经营范围和主要客户群体进行调研，完成了网站的构思创意即总体设计方案，并对网站的整体风格和特色做出了定位。最终确定的网站组织结构如图2-2所示。 1、认识Photoshop 任务2. 设计网站首页草图 Photoshop CS6 运行界面 工具栏 Photoshop的常用工具 选取工具集 移动工具 套索工具集 快速选择工具集 裁剪工具集 污点修复画笔工具集 画笔工具集 图章工具集 任务2. 设计网站首页草图 历史画笔工具集 橡皮擦工具集 油漆桶和渐变工具 色调处理工具集 文字工具 多边形工具集 缩放工具 2、制作公司LOGO LOGO 的左侧由6个蓝色方块组成，表示公司是一家与建筑相关的企业。 中间的红色 S 变形寓意冶炼钢铁的火焰，整个图形标志为H、S，即“恒升”两个汉字首字母的变形。 右侧则是“恒升钢铁”的中英文名称。 任务2. 设计网站首页草图 （1）启动Photoshop，选择“文件”→“新建”命令，新建一个500*150大小、背景透明的文档； （2）制作左侧图形标志。新建“图层1”，绘制一个正方形（约30×30像素），填充蓝色（#00a2e9）。 （3）复制“图层1”，使之排列如下。 任务2. 设计网站首页草图 （4）用同样的方法制作出其余4个蓝色方块，然后新建图层，选择钢笔工具 （快捷键为P），绘制出S的变形。 （5）打开“形状”面板，载入选区，填充前景色为红色（#e62129）。 （6）输入文字“恒升钢铁”和“HENG SHENG IRON STEEL”，并利用直线稍加装饰， 任务2. 设计网站首页草图 3. 制作首页草图 （1）新建文档，大小为1000*750。 （2）导入LOGO，调整位置、大小，输入导航文字。 （3）制作首页Banner。新建图层，利用矩形选框工具绘制一个高150像素的矩形，并制作出渐变效果（#1e81de→#a2eaf8）。 （4）输入公司的经营理念“树一流品牌，立百年企业”，颜色设置为白色，字体为汉仪综艺简体。 （5）添加公司标志性建筑。为了使图像与Banner更加融合，可在照片图层上添加图层蒙版，并利用渐变工具在图像上拖动，使其边缘模糊。 （6）制作其他部分。 任务2. 设计网站首页草图 4、首页草图的切片与导出 提示： 大面积的色块单独切成一块；尽可能在水平方向上保持整齐；内容独立的部分要单独切开；作为背景的图像只需要切其中一部分即可。 切片工具在制做网站过程中使用较多，可多做练习。 任务2. 设计网站首页草图 切片一个扩展名为.html的网页文件，及一个images文件夹。其中的文件如下 任务3. 网页的制作与上传 1、认识 Dreamweaver CS6 建立站点 添加文字信息 任务3. 网页的制作与上传 2、建立站点 3、向页面中添加文字及图片 4、域名和空间的申请 5、网站文件的上传 5.知识链接 网页中的色彩 色彩运用的原则是“总体协调，局部对比”。 （1）确定网站的主色调 一个网站必须有一种或两种主题色。