Web前端大作业2.0.zip

1、设计的目的 做个棋手类网站以怀念个人围棋的时光。还有此刻的美丽,以及无限的未来向往。 2、设计布局 主页设计布局是在网站的右上角是标准的导航栏,包括主页、国内风云、风云人物、国外盛况、国外四位棋手简介、比赛报名等,点击相应的导航标签,跳转到相同模块对应的详情页展示,其网站左上角是网站标题,中间穿插背景图来突出适应网站风格。网站中央是图片跟内容简介,主要介绍国内棋手界风云,左边是图片,突出主题。接下来是风云人物链接资料,点击对应人物会弹出DIV文本框显示每个棋手的风云人物资料简介,点击右边的关闭按钮会关闭整个弹出的文本框,非常方便适宜网站的总体要求。接下来是国外盛况介绍,下面依次是四张围棋手的图片一字排开设计,鼠标悬停在上面会出现棋手姓名以及简介,点击图片会把棋手图片放大到中屏居中显示,还可以实现左右切换棋手图片,点击左上角的关闭按钮即可关闭弹出的图片。接下来拉到下面的国外四位棋手简介可以发现这是树形布局的四个div框,依照树形结构错落有致排开,分别展示上面四位棋手对应的资料简介,以及人物生平获奖资料等。网站靠近底部的位置就是国内群雄争霸比赛报名的Form表单,有棋手姓名、棋手电话、邮箱、比赛宣言等四项内容,并在提交前会依次检验文考框是否已经按照格式要求填写,如果没有按照要求规则填写会提示请修改该内容,直到符合要求为止,才能报名,填写完毕后点击报名,会弹出“恭喜棋手,报名成功,请等待组委会后续短信通知比赛规则”提示框,点击确定即可关闭报名成功提示框。 3、网站具体设计过程 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径,创建好的项目工程目录结构如下所示。 首先设计网站主页也就是核心内容index.html,先要设计总体的导航条栏目,并点击对应主题来到其链接的详情页,这里采用href标签,用id进行位置定位。页面总体采用 CSS+DIV 布局,最外层DIV为框架,导航条设计。