网页设计实训报告

电子商务网页设计与制作实训报告班级：电商1302班姓名:张涛学号：08041302392015年1月7日目录一、网站基础识.............................31.网站与网页的关系.................................32.网站、域名、空间的关系...........................33.网站的制作方式...................................3二、所做网页内容...........................41.女娲网站.........................................42.休闲食品项目网站食品页面.........................4三、所做网页详解............................41.女娲网站所做工作...................................42.休闲食品项目网站所做工作...........................5四、实训网站制作思路.........................51.女娲网站思路........................................52.休闲食品项目网站思路................................5五、实训网站详细制作过程.....................5六、实训总结.................................7七、.对课程及实训环节的建议..................8一、网站基础知识1.网站与网页的关系网站是一个整体，网页是一个个体，一个网站是由很多网页构建而成。网站和网页的关系就像家庭和家人一样。网页与网站的区别简单的来说：网站是由网页集合而成的，而大家通过浏览器所看到的画面就是网页，网页说具体了是一个html文件，浏览器是是用来解读这份文件的。也可以这样说：网页是有许多html文件集合而成。至于要多少网页集合在一起才能称作网站，这可就没有规定了，即使只有一个网页也能被称为网站。而我们想要制作一个网站，就需要单独编辑若干个html文件，然后通过“超链接”把它们连接在一起，这样一个属于自己的网站就制作出来了。总体来说就是网站有网页组成。

2.网站、域名、空间的关系域名（DomainName），是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位网站空间英文名：Webhost。简单地讲，就是存放网站内容的空间，网站空间也称为虚拟主机空间，通常企业做网站都不会自己架服务器，而是选择以虚拟主机空间做为放置网站内容的网站空间。网站空间只能存放网站文件和资料，包括文字、文档、数据库、网站的页面、图片等文件的容量。所以它们三个的关系是：网站先储存在网络空间中，访问者需要通过IP地址也就是域名来登录这个空间找到网站存放的地址。那么网站就能打开并能够向浏览者展示自己的能容了。

3.网站的制作方式网站制作通俗的来说就是网站通过页面结构定位，合理布局，图片文字处理，程序设计，数据库设计等一系列工作的总和，也是将网站设计师的图片用HTML方式展示出来，属于前台工程师的一项任务，前台工程师任务包括：网站设计、网站用户体验、网站JAVA效果、网站制作等工作。网站制作是易雅达网站策划师、网络程序员、网页设计师等岗位，应用各种网络程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册查询和主机托管等服务的总称。一、申请域名[CN域名须审核];

二、申请空间[通过接入商进行ICP备案];三、定位网站四、分析网站功能和需求(网站策划)五、网站风格设计;六、网站代码制作;七、测试网站;九、网站维护。网站制作需要网站虚拟空间、域名以及动态网站的数据库这三个最基本的条件。网站虚拟空间是用来存放网站文件，如：图片信息，html文件，php文件等，相当于一个硬盘空间，域名即指访问网站的地址。动态网站的数据库用来存放网站数据的空间，这里的网站数据并非网站的html文件、图像信息等，指的是如网站访客提交的留言，个人信息等，传统的静态网站无需数据库支持。随着浏览器和W3C标准一致性的改善，以及无表格网页设计的认同性增加，超文件标示语言与层叠样式表共同用作网页内容的设计已经被广泛的接受和使用。最新的标准和建议则是朝着浏览器的能力扩充和改善发展，使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。

二、所做网页内容1.女娲网站女娲首页以深色调为主，显示LadyKing(女娲)品牌女式服装的高贵、魅力。女娲网站主要包括三个网页，一个首页，两个子页。首页内容包括导航栏，女娲动态，新闻资讯，产品图片，等。新品上市子页主以产品图片为主。来客留言主要有呢称，E-mail，联系方式，备注等。2.休闲食品项目网站食品页面休闲食品网页以以绿色主色调，辅助色为白色，黑色。总体呈现热情、鲜明、简洁的特征。网站的标准字体:以宋体为主，楷体为辅。网站的宣传标语:休闲生活，自然美味。主要包括一个首页，7个子页。

三、所做网页详解1.女娲网站所做工作在photoshop中制作首页，做宽1003px高：85px的导航栏背景，用渐变填充，用图形工具做出LOGO，做中间的背景图，从资料中选取素材，添加新闻动态的几行文字，右边导入资料中的图片进行修正并输入文字。滚动栏部分从资料中选择4个图片进行裁剪放到合适位置，底栏部分填充颜色并添加文字。2.休闲食品项目网站所做工作在photoshop中制作首页，首先用图形工具做出LOGO，接着做宽1003px高：85px的导航栏背景，用渐变填充，在用文字工具在导航栏做出7个子页的链接。

打开标尺，把首页分成四个不烦并在各个区域内注入预定的内容。最后再尾页写入专利号及相关信息。

四、实训网站制作思路1.女娲网站思路女娲网页以深色调为主，显示LadyKing(女娲)品牌女式服装的高贵、魅力。字体以宋体为主，楷体为辅，主色调以深红色为主，灰色和黑色为辅。以红色调为主是为了彰显品牌服饰的高贵，大气，简单，富有魅力。2.休闲食品项目网站思路休闲食品网页以以绿色主色调，辅助色为白色，黑色。总体呈现热情、鲜明、简洁的特征。以天然绿为主色调，让浏览者重回大自然，绿意盎然，食欲大开。主要起到以大自然为主题，休闲美食，品味生活，让购买者有一种眼前一亮的感觉，视觉和味觉的双重冲击。四、实训网站详细制作过程1、女娲网站：首页一、新建PS文件二、ctrl+alt+0查看实际像素（只提一遍），在图层面板中新建组top。三、在top组中新建图层1。四、做宽1003px高：85px颜色：#8f783e到#fbe9ac的线性渐变，（提示：先做选区，再渐变）五、在top组中新建图层2用钢笔工具做出网页右上脚的带弧线图，填充颜色为：#786736。（提示：钢笔绘制出的是路径，按ctrl+Enter变成选区后再填充，绘制时注意

选择：）六、在top组中新建图层3，用渐变、蒙版做出斜小条，如果感觉颜色还有差异，可调节色相/饱和度、曲线、色彩平衡，快捷键ctrl+U、ctrl+M、ctrl+B(记忆方法：键盘上三角布局)，（注：简便方法在步骤十二，三十二中均有详细介绍）七、输入文字：关于女娲女娲文化女娲动态新品上市会员优惠来客留言联系女娲。八、在top组上边新建组logo。九、新建图层4，并选择自定义形状工具，LadyKinglogo的皇冠部分，在图层4上点击右键选择混合选项，做斜面和浮雕，渐变叠加。记住把路径变换成选区（注意：矩形工具至自定义形状工具所绘制的是形状或者路径，路径转换为选区在步骤五中已经提及），并填充颜色#ff0000，再做浮雕等效果。在图层4上点击右键选择混合选项，做斜面和浮雕，渐变叠加。十、输入文字女娲（字体为黑体）颜色为#690101LadyKing，颜色纯黑，并新建图层5做出1像素黑色细线。十一、新建组middle背景,并新建图层6，如图t20，做一颜色：#cfc49c，大小：1003px-498px的背景图。十二、新建图层7，做斜条，颜色：#d7cdaa。确定选中图层7中的条（按住Crrl，左键单击图层7前的小窗口，就可以选择图层7中的条）Ctrl+alt+t,出现变形小框，用键盘的左右键移动变形框，确定位置后，Enterctrl+alt+shift+t,做出多个条，最后完成整个页面。十三、新建组左侧图，新建图层8，并制作渐变图（先做选区再渐变）：渐变颜色：纯黑：#000000到纯红：#ff0000可选择对称渐变，大小位置等自己观察，注意：此红区为两圆角，两直角。可利用圆角矩形工具（自己思考如何做出两圆角，两直角）十四、打开“资料”中的人物图片z1.jpg,抠图（可根据需要只扣某一部分），并导入到左侧图组中，并用蒙版让鞋子变淡些（因为主题是女装）。十五、十五、输入文字LadyKing颜色：#fa828。十六、新建组新闻动态，新建图层10，做纯黑到纯红的渐变条，调节图层模式为正片叠底，如图,