《【长篇单元】《七十二小时速通大学各科》》防爆灯蔻

4、网站设计与开发

　　第一章网站设计的准备

　　一、 网站主题网站主题是
　　（1）宗旨：品质至上，坚持诚信
　　（2）选题意义：仅仅是活着是不够的，还需要阳光，自由和花的芬芳

　　二、 网站素材我们网站素材来源主要是
　　1. 综合类UI素材下载平台
　　2. UI领域素材下载网站
　　3. UI原型素材下载
　　4. 平面素材下载
　　5.网站资源素材

　　三、 网站规划我的网站共有1个主页面，6个二级页面，3个三级页面，分别是（框架图如下）

　　1、 主页面框架图
　　图1鲜花店主页面

　　2、 二级页面

　　3.三级页面

　　第二章 网站设计的实训

　　（实训中实训中出现的问题，分析以及解决方法)

　　一、HTML的问题
　　1、单行文本溢出显示省略号
　　（1）为文字所在的盒子设置宽度
　　（2）让多行文字不换行显示
　　（3）设置溢出隐藏
　　（4）文本多余部分显示省略号
　　2、Margin父元素盒子元素粘连的问题
　　（1）给父元素加上边框
　　（2）不使用margin，使用padding
　　（3）给父元素加上overflow使其触发BFC

　　3、如何清除浮动
　　（1）额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。不推荐。
　　优点：通俗易懂，书写方便。
　　缺点：添加许多无意义的标签，结构化比较差。
　　（2）父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。必须定义宽度，但是不能定义height，使用overflow:hidden时，会触发BFC，浏览器会自动检查浮动区域的高度。

　　优点：简单、代码少、浏览器兼容性比较好
　　缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。注意使用时如果在里面的子元素使用定位的话，超除部分会被隐藏

　　（3）使用after伪元素清除浮动。
　　优点：符合闭合浮动思想，结构语义化正确，不容易出问题，许多大厂都在使用
　　缺点： IE6-7不支持，兼容性不好

　　4、其他
　　(1)标签嵌套的顺序要正确，典型错误：a中不能嵌套p
　　(2)设置超链接:
　　href:用于指定连接目标的url地址；
　　target（新窗口中打开）
　　设置整个页面中超链接的打开方式
　　(3)ul标签type值:disc(黑点)，square(方黑点),circle(空心圆)
　　(4)ol标签的type属性
　　(5)如果a标签不闭合，会多出很多a标签

　　二、css的问题
　　(1)父盒子没有设置高度，子盒子都都设置了浮动，此时需要清除浮动

　　方法一:再加一个子元素，其css设置clear

　　方法二：给父元素设置：

　　(3)几个隐藏的占位问题
　　元素隐藏，超出部分占i原来位置；
　　元素隐藏，元素占原来位置;
　　元素隐藏，但是占用原来位置；
　　(4)opacity设置半透明效果

　　(5)类名定义问题：
　　类名不能以数字开头或者以纯数字开头定义类名;
　　类名不推荐(不允许)使用汉字定义类名；
　　不能以特殊符号或者以特殊符号开头定义类名(_除外)；
　　不要使用标签名定义类名

　　(6)设置font-family:”“;要用”“括起来。可以一次设置多个字体，字体与字体之间使用逗号隔开。
　　防止某些浏览器不识别某些字体，会按设置的字体顺序查找，找到能显示的字体。
　　(7)font属性连写中，必须有size和family
　　(8)vertical-align:只适用于图片和表格
　　(9)只有定位的元素才能设置z-index值

　　第三章网站设计的展示（实训作品展示（页面截图＋主要实现代码）

　　1、登录界面
　　（1）登录界面页面截图如下
　　（2）登录界面代码如下

　　2、 花店主界面
　　（1）花店主界面截图
　　（2）花店主界面代码如下

　　第四章网站设计的总结

　　在实训中，我学习到了关于网站设计的知识点，在提高了我独立思考的水平
　　与锻炼我做项目能力的同时，也让我认识到什么是探索精神

　　以下是我收获的心得

　　一、由点到面，终身学习
　　学习网站设计，离不开三驾马车，即HTML、JavaScript、css
　　最重要的一点，那就是学习HTML、JavaScript、css相关知识点，打好编写代码的根基，做好学习的准备

　　二、理论结合，实践到位
　　理论与实践相结合，做到实时记忆性运用
　　首先，学习在sublime软件中的固定代码格式，主要有头文件名，网页标题与一些基本设置，如添加颜色、浮动或者图片的代码操作
　　其次，学习jc语言，css内联样式的代码，并对所学代码操作并加以复习
　　最终，通过积累的知识点，一点点实现网站设计

　　三、目标明确，完善总结
　　学习设计网站，需要了解相关的知识点
　　比如，在学习HTML5中，我们需要明确HTML的重点，如，HTML不是一种编程语言，而是一种标记语言 ，标记语言是一套标记标签 (markup tag)
　　HTML使用标记标签来描述网页，是用来描述网页的一种语言，指的是超文本标记语言

　　在学习Css中，我们要了解基本的知识点
　　比如，标准文档流元素分类，分为行内元素和块级元素；

　　行和块的互相转换，需要用到Display，block inline，inline-block，none这四个元素

　　在学习JavaScript中，我们要了解基本的知识点
　　比如，javaScript的概念:是一种表述语言，也是一种基于对象(Object)和事件驱动(EventDriven)的，安全性好的脚本语言，运行在客户端，从而减轻服务器端的负担；

　　网页中引入javaScript三种方式，比如，使用Script标签内部样式，使用外部js文件，或者直接在HTML标签中的行内样式

　　最后简单总结以下，网站设计实训让我认识到了一个崭新世界，通过这次网站开发实训，我独立思考与实践操作的能力得到了很大程度的提升，也为未来就业提供了一个很好的方向