情境1书法家庄辉个人网站模板效果图的设计与制作概要.ppt

第四章 网站的色彩与布局 项目展示与项目目标 4. 项目实施 9）设置前景色为浅褐色（edd15e），添加一个新层并命名为“布局线”，首先执行“选择”→“全选”命令（快捷键Ctrl+A）完成全部选择，然后执行“编辑”→“描边”命令，用前景色进行描边，大小为1像素。使用“单行选框工具”，按住Shift键，参照参考线（图4-12）依次选取横向的3条横向选区，调整使用“单列选框工具”，仍然按住Shift键，沿着纵向的辅助线继续选择单列选区，如图a所示，松开Shift键，按Alt+Del键来填充选区，然后用橡皮（或其他方法也可以）删除纵向的0-250以及896-996之间的线段，如图b所示。 a b 4. 项目实施 10）在左侧导航区使用“横排文本工具”输入“网站首页 个人简介 书法作品 国画作品 楷书作品 篆书作品 草书作品 行草作品 扇面作品 联系方式”（颜色：白色，字体：方正大黑简体，大小：14点，在后期编辑一般采用宋体），调整位置后如图所示。 添加导航文字的效果 4. 项目实施 11）新建一个图层，命名为“方框”，然后使用“矩形选框工具”选取一个宽4像素，高4像素的正方形选区（样式为：固定大小，宽4像素，高4像素），然后填充为白色。调整方框图层的位置在“网站首页”正前方，在图层面板，使用鼠标左键将方框拖至“新建图层”按钮即可完成一个方框的复制，共复制9个方框，将最后复制的方框放在“联系方式”正前方，按住Shift选择“方框”到“方框 副本9”，在图层面板点击“连接图层”按钮完成图层“方框”到“方框 副本9”的连接，使用使用“移动工具”，在属性状态栏中点击“左对齐”按钮和“垂直居中分布”按钮后10个小方框就整齐的布局在导航文字的前方，如图所示。 给导航文字添加小方框符号 4. 项目实施 12）新建一个图层，命名为“主标题”，然后在效果图右侧使用“矩形选框工具”选取一个宽9像素，高35像素的正方形选区（样式为：固定大小，宽9像素，高35像素），然后填充为浅褐色（#edd15e），使用铅笔工具在小矩形下方划一条浅褐色（#edd15e）的横线，最后添加文本“草书作品”（与导航相同），效果如图所示。 4. 项目实施 13）打开图片“竹兰生意气.jpg”文件（如图a，图像宽和高都为440像素），首先执行“选择”→“全选”命令（快捷键Ctrl+A）完成全部选择，然后执行“编辑”→“描边”命令，将前景色设置为6d4418，位置设置为内部，大小为2像素。执行“图像”→“画布大小”，修改画布大小为宽和高都为480像素，完成后按Ctrl+A键执行全选命令，然后执行“选择”→“修改”→“收缩”命令，收缩量为2像素，最后再次执行“编辑”→“描边”命令，位置设置为居中，大小为1像素，效果如图b所示。 a b 4. 项目实施 14）使用“移动工具”将修改后的“竹兰生意气.jpg”图像拖至效果图中，调整图像位置，最后添加文本“草书 蔡树农诗句 竹兰生意气”，同时也在效果图的页脚处添加版权信息与联系方式文本，效果图完成如图所示。 5.项目检查与评估 能应用网页版式布局方法到项目 掌握网页版式布局的方法 了解网页版式构成的类型，能理解掌握网页版式布局的要点 掌握网页版式布局理论 能将常用的网页配色方法应用到项目中 掌握常用的网页配色方法 能理解色彩的基本理论并应用配色的原则 掌握色彩的基本理论 评价项目 学习目标 地址:北京百万庄大街22号 邮编:100037 编辑热线: (010)机 械 工 业 出 版 社 CHINA MACHINE PRESS 地址:北京百万庄大街22号 邮编:100037 编辑热线: (010)机械工业出版社 基于工作过程的网页设计与制作教程 主编：张洪斌 季春光 刘万辉 机械工业出版社 基于工作过程的网页设计与制作教程 主编：张洪斌 季春光 刘万辉 情境1：书法家庄辉个人网站模板效果图的设计与制作 基于工作过程的 网页设计与制作教程 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 6. 强化拓展实训:画笔的使用技巧 1项目展示与项目目标 掌握色彩的基本理论 了解网页配色的原则 掌握网页常用的配色方法 掌握网页版式布局的要点 掌握网页版式布局的方法 了解网页版式构成的类型 了解网页布局结构 深入学习效果图的设计方法 色彩的基本理论: RGB颜色 网页颜色主要有3种基本颜色组成的，他们是红（Red）、绿（Green）、蓝（Blue），其他的颜色是由这3种颜色调和而成的。 例如，黄=红+绿，紫色=红+蓝，白色=红+