《Web应用开发》课件-01 个人网页

本章简介：个人网页是许多初学网页制作的读者非常感性兴趣的话题。它是各人根据自己的爱好，自由制作出来的网站。对网站设计初学者来说，制作个人网站无疑是一件今人愉悦的事情。个人网站通常在结构、内容上都比较简单、随意。本章以多个类型的个人网页为例，讲解个人网页的设计方法和制作技巧。第13章个人网页课堂学习目标了解个人网页的特色和功能掌握个人网页的设计流程掌握个人网页的设计思路和布局掌握个人网页的制作方法13.1个人网页概述个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。网站内容强调以个人信息为中心。个人网站包括博客、个人论坛、个人主页等，网络的发展趋势就是向个人网站发展。13.2妞妞的个人网页案例分析案例设计案例制作案例分析妞妞是个快乐活泼的小女孩，她的个人网页主要表现的是她成长中的点点滴滴，这其中有生动的个人记录，可爱的生活照片等。通过个人网页可以表现出妞妞的快乐童年和精彩生活。在网页设计制作过程中，使用蓝天、白云和星球作为背景，给人天高云阔、自然闲适的印象。悬浮在空中的页面主体与云朵有异曲同工之妙，在突出孩子天真活泼个性的同时，体现出孩子无限的想象空间和天马行空的童年生活。路标式导航栏、卡通游乐园、自由活泼的人物图像组合成一幅快乐幸福的网站画面，生动活泼且让人印象深刻。案例设计本例将使用表格布局网页，使用页面属性命令改变网页的字体、大小、颜色、边距和页面标题，使用CSS样式命令设置单元格的背景图像及文字的颜色大小和行距的显示，使用属性面板改变单元格的宽度及高度。效果图13.3李明个人网站案例分析案例设计案例制作李明是个喜欢接近自然、热爱生活的男孩，他希望自己的个人网页充满自然舒适感。网页设计上要针对自己的爱好和专业特长，按自己的想法来收集资料和制作网页。网页的风格要现代时尚，能感受到自由和创造的力量。在网页设计制作的过程中，蓝灰的色调给人温柔平和、成熟可靠的印象。不同的风景照片和排列方式在将页面分割的同时，简洁直观的展现出李明的爱好和专业特长，让人一目了然。上方的导航栏简单实用，方便浏览。整个页面简洁时尚、个性突出。案例分析本例将使用页面属性设置文档的页边距和页面标题。使用属性面板设置单元格和文字颜色制作导航效果。使用CSS样式设置文字的颜色及行距。使用手动输入代码设置图片的间距。效果图案例设计13.4美琪的个人网页案例分析案例设计案例制作美琪是一个快乐活泼的女孩，她希望自己的个人网页充满青春和活力感。网页设计上要现代时尚，以体现青年人的个性和特色。在网页设计制作过程中，自然闲适的背景起到衬托的作用，突出前方的页面主体。青春活泼的写真照片及简单的个人资料展示，给人直观率真、活泼个性的印象，让人一目了然。整个页面表现出年青人追求自我的个性风格。案例分析本例将使用页面属性命令修改页面的页边距和页面标题，使用属性面板设置单元格宽度和高度，使用CSS样式制作表格背景和文字的行距效果。效果图案例设计课堂练习—娟娟的个人网站使用“页面属性”命令，设置背景颜色、页面边距和文字颜色大小；使用“属性”面板，改变单元格的高度和宽度；使用“CSS样式”命令，设置单元格的背景图像。效果图课后习题—李梅的个人网页使用“属性”面板，设置单元