网页设计实训报告详解.doc

《动漫网站设计》 实训报告 设计题目: 网站设计实训 专 业： 计算机网络技术 班 级： 14计网一班 姓 名： 指导教师： 吴 建 梅 二０一六 年 一 月 七 日 目 录 一．实训目的与要求 3 1.1实训目的 3 1.2实训的基本内容和要求 3 二．实训项目总体设计 5 2.1网站设计描述 5 2.2 网站设计说明 5 三．实训项目详细设计 6 3.1 网页的整体布局结构 6 3.2 网站主页设计 6 3.3 网站中每个页面设计 7 3.4 功能测试 8 四．总结 9 附录 网站源代码 9 实训目的与要求 1.1实训目的1.2实训题目描述和要求 根据自己的兴趣，设计一个个人站点或介绍一个集体的站点，围绕一个主题并能够体现出自己的个性，有整体框架结构，表格布局，层次定位等。布局合理，色彩搭配协调统一，内容丰富多彩，页面风格独特。? 掌握网页设计基本概念和HTML的基本结构，了解网页技术要点、HTML的编辑和运行环境。掌握文字版面的编辑，掌握网页的超链接技术的应用。了解列表的各种使用，了解表格的基本语法，掌握整合与发布网站的技术，掌握表格的定义、控制、分组、标题等的应用，了解表单在网页中的应用，了解网页中CSS的基础知识，掌握CSS的各种属性应用，了解一个整体网站建立的过程。 实训的要求2.1网站设计描述 确定本网站的整体风格，突出标准色彩，相同类型的图像采用相同效果。网页色彩的搭配、窗体、框架等。 必须准确概括网页的主题内容，和主题无关的内容我们一律要去掉，必须准确概括网页的主题内容。描述的一定要非常通顺简要，符合逻辑的，傻瓜化，尽量少用非常专业之术语。 2.2 网站设计说明 我设计网页的是一个婚纱的简介网站，网站选用的图片为婚纱的线条和视觉。网页整体为表格框架结构，运用了大量运用了高清图片，以婚纱的的优美和高贵，突出主题，，用以避免给人一种杂乱的感觉根据各部分内容的不同适当的自由设计。文字以主，标题简洁明了 实训项目详细设计 3.1 网页的整体布局结构 网页的整体布局结构网页的板块从整体上分为主页和副页，主要是由导航、文字和图片组成；而副页就相对简洁些，主要为图片内容。 通过网站子页，你可以了解到婚纱的历史发展和选择技巧等内容。同时主页可以连接到各个子页查看到相关的内容信息。 3.2 网站主页设计 网站主页设计： 网页首页顶部的设计：网页顶部以图片和文字链接，还有灰色背景图片，没有使用过多的修饰，给人一种简洁明了的感觉。截图如下： 导航设计：导航设计较为简单，主页上的链接作为导航，更进一步的突出了本次网站的简洁感 技术运用：主要应用了表格进行布局，网站采用滚动设计，使网站整体布局提升一个层次。 截图如下： 3.3 网站中每个页面设计 所创建的站页面，分为层，第一层为首页，第二层为子页。 采用了局，必须包含导航栏； 子页分别为框架网页、利用布局表格制作的网页； 个页面插入合适的。 所有页面要求布局理搭配协调美观。 3.4 功能测试body table width=1200 border=0 align=center cellpadding=0 cellspacing=0 tr td width=498 height=203 bgcolor=#C9C9C9img src=images/02.png width=441 height=203 //td td width=457 align=center valign=middle bgcolor=#C9C9C9p class=anbsp;/p p class=a历史为骨，艺术为翼/p p class=a中华文明，弘扬百世/p/td td width=245 align=center valign=top bgcolor=#C9C9C9 class=bpa href=收藏成功 target=_self加入收藏/a | a href=设为首页 target=_self设为首页/a/p/td /tr /table table width=1200 border=0 align=center tr td height=5/td /tr /table table width=1200 border=0 align=center cellpadding=0 cellspacing=0 tr td height=50 bgcolor=#333333span class=c a name=top id=top/a