静态网页设计实训教学项目指导书

《静态网页设计实训教学项目指导书》由会员分享，可在线阅读，更多相关《静态网页设计实训教学项目指导书（29页珍藏版）》请在金锄头文库上搜索。

1、精选优质文档-倾情为你奉上 静态网页设计实训教学项目指导书 三门峡职业技术学院信息工程系计算机教研室（实训室） 2013年 8月 30日目 录分项任务 任务 1：项目前期策划 任务 2：网站主页效果图设计制作 任务 3：模板效果图的设计与制作 任务 4：网站切片与导出 任务 5：网站动画的设计与制作 任务 6：网站后期的编辑 任务 7：HTML编辑静态页面 任务 8：网站 CSS样式表的设计专心-专注-专业任务解析：本项目属于名人名家个人站点，内容不是特别多，规模也并不大，功能相对比较简单，属于静态网站开发，这类静态页面通常的开发流程可以简化为：项目前期策划-效果图设计与模版页设计-网页的切片

2、-动画的制作-后期编辑-网站 HTML的编辑-CSS 样式表网页美化。当然与常规的企事业站点也有相似之处，经过对项目的分析，决定本项目进行分解为以下 8 个子项目来完成，如图 2-1 所示。 任务 1：项目前期策划任务提示： 项目的前期策划主要包括：需求分析，网站的风格定位，以及主页草图与模版页的草图的设计等。 2.1.1 网站需求分析 庄辉，号无名山人。1959 年 7 月生，籍江苏泗阳。现为中国书法家协会会员，国家高级美术师，江苏省 淮安书画院专职画师。 庄辉个人网站项目主要是通过网络媒体使书法家本人知名度进一步提高。 网站建设中主要包含个人简介、 国画作品、书法作品、联系方式等。 庄辉个

3、人网站在作品展示中主要展示国画作品与书法作品，其书法作品包括楷书作品、行书作品、草书 作品、篆书作品、扇面作品、行草作品等。网站需求模块示意图如图 2-2 所示。书法家庄辉个人网站需求模块个人简介书法作品国画作品联系方式2.1.2 网站风格定位 网站要能够反映出书法艺术的文化气息，在保证功能完善的基础上考虑形态。本项目以褐色为主色调反 映网站的特征，因为褐色具有表现原始、古老、古典的感觉，主页与模版的设计也可采用褐色为主色调。风 格定位策划方案如图 2-3 和 2-4 所示。2.2 任务 2：书法家庄辉个人网站主页效果图设计与制作 2.2.1 任务解析 任务提示：网站效果图的设计主要使在理解用

4、户的需求的基础上，通过技术手段（Photoshop 图像处理）来完成设计者的创意。2.2.2 任务实施 庄辉个人网站项目的设计制作根据计划，实现的简要步骤为： 1） 启动 Photoshop 软件， 然后执行 “文件” “新建” 命令， 创建 “书法家庄辉个人网站主页效果图.psd” 文件，宽度：984 像素，高度：600 像素，分辨率：72 像素/英寸，颜色模式：RGB 颜色，背景内容：白色。 2）在背景层中，从工具箱中选择“渐变工具” ，取前景色为深褐色（#b27516），背景色# 浅黄色# （#c9ac78） ，接着在选项栏中选取渐变填充（对称渐变 ），拖动鼠标后形成渐变的背景图像，如图

5、 2-24 中的背景。3）打开图片“书法 1.jpg” ，然后对齐执行“图像”“调整”“反相”命令（快捷键为） ，最后将其拖入效果图，设置层名为“书法” ，设置混合模式为：柔光，不透明度为 24%（图 2-23b 所示），采用同样的方法将“国画.jpg”进行类似的操作，调整图层的大小与位置后的效果如图 2-25 所示。4）打开图片“墨迹.jpg” ，使用魔术棒工具 ，选择白色区域，然后执行“选择”“反向”命令（快捷键），选取墨迹将其复制并粘贴到效果图中：打开图片“毛笔.jpg” ，同样的方法选取图中的毛笔图像， 同样将其复制并粘贴到效果图中， 调整好毛笔与墨迹的位置， 墨迹与毛笔图层合成的效果

6、如图2-26所示，将毛笔图层设置图层样式，设置投影效果增加立体感，具体参数是：不透明度：44%，角度：90，距离：8 像素，大小：2 像素，放入效果图中的效果如图 2-27 所示。5）打开图片“无名山人.jpg” ，使用魔术棒工具，选择黑色字体区域局部区域，例如选中“山”字，然后执行“选择”“选取相似”命令选中“无名山人作品集”的题字的黑色区域（如图 2-28 所示），复制黑色区域，粘贴到效果图中，最后将“无名山人作品集”文字图层执行“描边”图层样式（颜色：白色，大小：3 像素），效果如图 2-29 所示。6）打开图片“庄辉原图.jpg” ，由于照片曝光不足，所以照片的亮度不够，人物不够清晰，

7、执行“图像” “调整”“色阶”命令，在“色阶”对话框中调亮照片，然后使用“多边型套索工具”将照片中人物选取出来（如图 2-30 所示），复制并粘贴到的效果图中，调整人物的大小与位置，最后设置人物的图层样式：外发光效果（不透明度 50%，颜色：白色渐变为透明，扩展：14%，大小：21 像素），如图 2-31 所示。7）新建一个图层，选择“椭圆套索工具” ，设置工具属性（样式：固定大小，宽度：10 像素，高度10 像素），然后在新图层中选择四个选区并对齐填充为红色，分别给每个小红点设置外发光效果（与人物发光相似），最后添加“个人简介” 、 “书法作品” 、 “国画作品” 、 “联系方式”文字（方正

8、大黑简体，18 点，白色），并对文字添加描边效果，如图 2-32 所示。8）打开“落款.psd”与“印章.jpg”照片分别将它们拷贝到效果图中，并将其大小进行调整，整个效果图完成。2.3 任务 3：书法家庄辉个人网站模板效果图的设计与制作2.3.1 任务解析 任务提示 ：通过学习网页的色彩理论知识，掌握网页的配色原则，运用网页的配色方法与网页的布局理论知识来进行网页效果的设计。2.3.2 任务实施 书法家庄辉个人网站模板页效果图设计与制作根据初步的设计制作步骤如下： 1）启动 Photoshop 软件,新建 “书法家庄辉个人网站模板效果图.psd”文件，宽度和高度为 996 像素， 分辨率：7

9、2 像素/英寸，颜色模式：RGB 颜色，背景颜色填充为褐色（#6d4418）。 2）执行“视图”“标尺”命令显示标尺（快捷键），然后执行“视图”“新参考线”命令，在弹出“新建参考线”对话框中分别添加水平（65px，250px，896px）和垂直（160px）的四条参考线，如图 2-77 所示。3）打开图片“无名山人.tif”文件，执行“图像”“调整”“反相”命令（快捷键），使用 “移动工具” 将“无名山人.tif”图像拖至效果图中，执行“编辑”“自由变换”命令（快捷键）调整“无名山人作品集”大小和位置使其放在效果图的左上角。4）新建一个图层命名为“褐色背景” ，设置前景色为褐色（#c99011

10、），使用“矩形选框工具” 选择第 1 条和第 2 条水平参考线中的矩形区域，填充前景色，效果如图 2-78 所示。5）打开图片“夕阳.tif”文件，使用“移动工具”将“夕阳.tif”图像拖至效果图中，执行“编辑” “自由变换”命令（快捷键）调整“夕阳”图片大小和位置，调整图层“夕阳”在“褐色背景”图 层之上，把鼠标放在图层“夕阳”与图层“褐色背景”之间，鼠标会变成形状，然后点击鼠标左键完成图层的剪贴蒙版技术，效果如图 2-79b 所示。6）采用第 5 步的方法将“松树.jpg”执行同样的操作，如图 2-80 所示（松树在夕阳之上）。7）选择“松树”图层，设置该图层的混合模式为“变暗”模式，在图

11、层面板点击“添加图层蒙版”按钮 ，按键盘上的键恢复前景的黑色与背景的白色，使用画笔工具（采用柔角画笔，大小稍大些如 300px）设置蒙版效果，如图 2-81 中 a 和 b 所示，选择“夕阳”图层，在图层面板点击“添加图层蒙版”按钮 ，使用画笔工具设置蒙版效果，如图 2-81 中 c和 d所示，整个设置完成后的效果如图 2-81 中 e所示，f图为是设置完成后图层之间的关系。8）使用“横排文本工具” 输入“中国书法家协会会员” （字体：方正大黑简体，大小：36 点），同时对“中国书法家协会会员”图层设置描边效果（颜色为白色，粗细为 3 像素）。9）设置前景色为浅褐色（#edd15e），添加一个

12、新层并命名为“布局线” ，首先执行“选择”“全选”命令（快捷键）完成全部选择，然后执行“编辑”“描边”命令，用前景色进行描边，大小为 1 像素。使用“单行选框工具” ，按住键，参照参考线（图 2-77）依次选取横向的 3 条横向选区，调整使用“单列选框工具” ，仍然按住键，沿着纵向的辅助线继续选择单列选区，如图 2-83 所示，松开键，按键来填充选区，然后用橡皮（或其他方法也可以）删除纵向的 0-250 以及 896-996 之间的线段，如图 2-84 所示。10）在左侧导航区使用“横排文本工具” 输入“网站首页 个人简介 书法作品 国画作品 楷书作品 篆书作品 草书作品 行草作品 扇面作品

13、联系方式” （颜色：白色，字体：方正大黑简体，大小：14 点，在后期编辑一般采用宋体），调整位置后如图 2-85 所示。 11）新建一个图层，命名为“方框” ，然后使用“矩形选框工具” 选取一个宽 4 像素，高 4 像素的正方形选区（样式为：固定大小，宽 4 像素，高4 像素），然后填充为白色。调整方框图层的位置在“网站首页” 正前方，在图层面板，使用鼠标左键将方框拖至“新建图层”按钮即可完成一个方框的复制，共复制 9 个方框，将最后复制的方框放在“联系方式”正前方，按住选择“方框”到“方框 副本 9” ，在图层面板点击“连接图层”按钮完成图层“方框”到“方框 副本 9”的连接，使用使用“移动

14、工具” ，在属 性状态栏中点击“左对齐”按钮和“垂直居中分布”按钮后 10 个小方框就整齐的布局在导航文字的前方，如图 2-86 所示。12）新建一个图层，命名为“主标题” ，然后在效果图右侧使用“矩形选框工具” 选取一个宽 9 像素，高 35 像素的正方形选区（样式为：固定大小，宽 9像素，高 35 像素），然后填充为浅褐色（#edd15e），使用铅笔工具在小矩形下方划一条浅褐色（#edd15e）的横线，最后添加文本“草书作品” （与导航相同）。 13）打开图片“竹兰生意气.jpg”文件（如图 2-88，图像宽和高都为 440 像素），首先执行“选择”“全选” 命令 （快捷键） 完成全部选择

15、， 然后执行 “编辑” “描边” 命令， 将前景色设置为淡黄色 （#6d4418） ，位置设置为内部，大小为 2 像素。执行“图像”“画布大小” ，修改画布大小为宽和高都为 480 像素，完成后按键执行全选命令，然后执行“选择”“修改”“收缩”命令，收缩量为 2 像素，最后再次 执行“编辑”“描边”命令，位置设置为居中，大小为 1 像素，效果如图 2-89 所示。14）使用“移动工具”将修改后的“竹兰生意气.jpg”图像拖至效果图中，调整图像位置，最后添加文本“草书 蔡树农诗句 竹兰生意气” ，同时也在效果图的页脚处添加版权信息与联系方式文本，效果图完成如图 2-90 所示。2.4 任务 4：书法家庄辉个人网站切片与导出2.4.1 主页效果图的导出 在 Photos