闫华华-网页设计实践设计

《闫华华-网页设计实践设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计（含html,三剑客）设计说明书姓名：闫华华班级：11电商1班指导教师：李淑娟完成日期：2012年6月25日设计要求考核目的通过课程设计，考查学生对dreamweaver网页设计的综合应用能力，要求学生能够独立制作出独特的网页作品，突出强调知识的系统性与制作方法的实用性。考核项目要求1、制作主题明确，内容健康。2、网页色彩搭配协调，布局合理。3、创意新颖，风格独特，具有现实意义。4、网站的层次结构和链接结构合理。5、整体效果好，实用性较强。6、站点命名准确，网站的可移植性强。7、网站必须由作者本人亲自构思，采集素材，整理加

2、工，不得抄袭他人作品。目录第一章规划网站11.1策划网站主题11.2确定网站风格11.3构思网站栏目结构11.4规划网站目录结构和链接结构21.5设计主要页面的布局2第二章准备素材32.1准备文本32.2准备logo32.3准备图片42.4准备动画42.5建立库项目5第三章创建网站53.1创建本地站点53.2网站目录结构的搭建5第四章网站首页的设计与制作54.1网站首页的布局设计54.2编辑CSS样式文件64.3编辑美化网站首页6第五章制作二级栏目网页和内容网页75.1制作模板75.2制作基于模板的二级栏网页75.3制作框架网页7

3、参考文献8青岛食品股份有限公司网页设计（含html,三剑客）设计说明书第一章规划网站1.1策划网站主题在山东半岛南端，依山傍海，风光秀丽，气候宜人，是一座独具特色的海滨城市。她是中国东部重要的海滨城市，是中国重要的经济中心城市和港口城市，国家历史文化名城和风景旅游胜地。是中国的品牌之都，曾经获得“中国人居环境奖”。旅游资源濒临黄海，环抱胶州湾，是一座著名的旅游城市——青岛。在这个城市之中有一个著名的食品厂是青岛食品股份有限公司。青岛食品股份有限公司创建于1950年1月。历经50多年发展，现已成为全国轻工行业、食品行业中的重点企业。

4、公司拥有20多条国内外食品生产线，主要生产饼干面食品、花生制品、豆制品、巧克力糖果、乳制品及婴幼儿方便食品等6大类100多个系列品种，最高年产量5万多吨。产品畅销全国，远销日、韩、美、俄、澳大利亚、新西兰及东南亚等近20个国家和地区。为了更好的宣传青食企业，所以设计了只做了这个网站的主题，是为了宣传青岛，宣传青岛食品股份有限公司。为消费者提供一个资讯的网页，更加了解青食的产品。1.2确定网站风格因为青岛食品股份有限公司是以饼干为主，所以在网站的背景选取上采用的是一个橙色背景色。主色调为（#FF8040）橙黄色，辅助色调为(#FF9

5、900)橙黄色。橙黄色给人一种想吃的感觉，所以使用橙黄色可以勾起消费者的食欲。1.3构思网站栏目结构banner导航栏企业概况商品世界8企业图片企业介绍文字焦点图片广告联系方式新闻中心主要的联系内容青食新闻内容图片滚动展示版权信息1.4规划网站目录结构和链接结构规划网站imageFlashPic.jsIndex.html1.5设计主要页面的布局网页布局模式采用二分栏结构，具有简洁大方的效果，各个分栏清晰明了，便于查找。主页如下图1-1所示8图1-1第二章准备素材2.1准备文本从网页中搜索关于青食的图片和文字的相关素材，为设计的网页

6、准备充分的素材资料。2.2准备logoLogo在photoshop中建立一个964*170的矩形，填充为橙黄色，将图片引入后融入其中，然后放入Dreamweaver那个运用。STEP1在Photoshopzhong新建立一个“宽度”和“高度”为964像素*170像素，分辨率为72像素/英寸的白色背景文档，命名为“青岛食品股份有限公司logo”。STEP2设置“前景色”为橙色(#ff5a00)，新建图层1，选择“矩形工具”，在工具选项栏中激活“填充像素”按钮，设置“矩形选项”为固定大小964像素*170像素STEP3首先设置好文字字

7、体、大小、颜色。新建图层2，用“横排文字工具”写上青食二字，在创建新的图层3，用“椭圆工具”，画一个椭圆，再用“自定义形状工具绘制栈桥标志物，，再删除背景层，最后选择“图层”→“合并可见图层”，合并成一个新的图层1,这个图就完成了。8STEP4从上一步合成的新图层开始，新建图层2，在写字之前先调好文字字体、大小、颜色等，用“横排文字工具”写上青岛食品股份有限公司，再用“添加图层样式”改变字的效果，最后用“移动工具”调整好字的位置。新建图层3，选择“横排文字工具”，用英语写上qingdaofoodsco.ld，再用“添加图层样式”，

8、改变字的效果，最后用“移动工具”调好字的位置。STEP5打开网页素材images“字母饼干.jpg”图片，将图片拖拽至新建文档中，再用“图像”→“图像大小”进行调制图像的的大小，知道合适为止。至此，该网站的logo就制作完成了。Logo如下图2-1