HTML网页设计 教学课件 ppt 作者 翁高飞、王鹏 chapter8
CSS布局应用实例解析,Learning HTML&CSS 第七章,目标,了解网站开发流程 掌握如何使用DIV和CSS布局,综合案例,网站开发,网站开发流程,步骤二: 网页制作,1.网站定位,例:购物网站,(网站类型,如 公司网站、个人网站、电子商务网站等),步骤二: 网页制作,2.网站框架导航,程序员和设计师具体讨论网站整体制作 包括网站栏目、结构层次、连接内容。首页中的各功能按钮、 内容要点、友情连接等都要体现出来,一定要切题,并突出重点,步骤二: 网页制作,3.网站LOGO制作,既要体现网站的特色,又要有创意,能吸引客户,给客户留下 深刻的印象,以下举例,步骤二: 网页制作,4.网站内容采集,采集内容必须与标题相符,在采集内容的过程中,应注重特色。主页中 的特色应该突出自己的个性,并把内容按类别进行分类,让人一目了然。 栏目不要设置太多,最好不要超过10个,层次上最好少于5层,要灵活运用表格、层、帧、CSS样式表设置网页的版面,步骤二: 网页制作,5.网站排版,步骤二: 网页制作,6.网站标准色彩设置,例:婚恋网站主色为红色,1.本地服务器测试,2.网络服务器测试,FTP 上 传 至 服 务 器,3.网站备案,步骤四:正式上线,制作网上购物网站,分析架构,本例的网上商店主要以出售鲜花为主,这种类型网站的特点就是绚丽,让人感觉琳琅满目而又美丽大方。 结合花店的主题,因此采用粉红色为主色调。 又考虑到鲜花的各式各样,因此站点还包含鲜花导购等小知识。,排版架构-页面框架,排版架构- #left 块与#main 块的框架,模块分析,总结,CSS排版要求设计者首先对页面有一个整体的框架规划,包括整个页面分为哪些模块,各个模块之间的父子关系等等。 整理好页面的框架后便可以利用CSS对各个块进行定位,实现对页面的整体规划,然后再往各个模块中添加内容。,