项目9 实战开发学院首页的设计与制作_第1页
项目9 实战开发学院首页的设计与制作_第2页
项目9 实战开发学院首页的设计与制作_第3页
项目9 实战开发学院首页的设计与制作_第4页
项目9 实战开发学院首页的设计与制作_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务9实战开发学院首页的设计与制作Web前端开发项目式教程HTML5+CSS3实战开发学院首页的设计与制作任务9任务描述

本学期我们学习了网页的基础知识，并制作了一些简单的网页效果。本任务中，我们将通过制作辽宁轻工职业学院的网站来学习网站的开发流程。从规划网站开始，到制作网站，我们的目标是让网站效果达到更好的用户体验。学习目标知识目标学习网站规划的步骤掌握网页整体布局的结构掌握CSS样式的应用技能目标能够根据效果图设计合理的布局能够灵活应用<div>、<ul>、<li>等HTML元素素质目标引导学生做好职业规划，在课程学习中树立职业理想激发学生的爱国热情，为科技强国而努力学习培养学生具备良好的职业道德和职业操守，遵守职业规范，具备良好的职业道德素养和观念知识点效果图分析01

首页详细制作02实战开发学院首页的设计与制作任务9一、

效果图分析HTML结构分析观察学院首页效果图9.1，可以看出整个页面大致分为头部、导航、主体内容、版权信息等4个模块，具体如图9.2所示。仔细观察页面的各个模块，可以看出：“导航”和“版权信息”模块是通栏显示的，而其他模块的宽度均为1200px，并且居中显示。也就是说，页面的版心宽度为1200px。接下来，我们将分析页面中的共同样式，并提前定义它们，以减少代码的冗余。CSS样式分析

一、

效果图分析页面布局对于改善网站的外观非常重要，它是为了使页面的结构更清晰、用户体验更佳而进行的页面“排版”。对学院首页的整体进行布局.

页面布局一、

效果图分析观察学院首页效果图9.1，不难看出：网页的“头部”可以分为学院logo和下拉菜单两部分；“导航”菜单结构清晰，可以通过无序列表来定义。接下来准备“头部”和“导航”模块所需要的图片。准备工作完成后，开始搭建网页的“头部”和“导航”结构。打开“index.html”文件，在文件内编写“头部”和“导航”的HTML结构代码。

制作头部和导航二、

首页详细制作

制作主体内容二、

首页详细制作观察学院首页效果图9.1的底部“版权信息”模块可以看出：此模块主要分为两部分内容，分别是学院地址、联系方式和2023年单独考试报名入口二维码图片。

制作底部“版权信息”区域二、

首页详细制作任务

制作淘兴趣网站首页任务实现任务效果任务效果任务

制作淘兴趣网站首页任务8任务小结本任务通过制作一个实战网站，较为系统地学习了网页布局的布局结构和样式的设计，学习了典型页面布局结构“div-u

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论