运用HBuilder使用DIV CSS布局设计静态网页

运用HBuilder软件,自选主题制作一个小型网站,内容不限,网站至少包含两个网页(一个首页和一个子页)。利用DIV对网站页面进行结构设计,充分运用CSS的浮动、绝对定位、相对定位等技术,完成网页各个模块的布局;综合运用CSS样式对列表和超链接进行修饰,完成网页导航;灵活运用类样式、标签样式、ID样式以及交集、包含等复合CSS样式对网页中的文字、图片、背景、表单等内容进行修饰;辅以Photoshop等图像处理软件对网页Logo、图标、导航、图片等元素进行设计与制作。

1、制作出的网页要求图文并茂,文字要有字体格式和颜色上的变化,图形要与网页的内容相关。

2、页面要求使用DIV+CSS进行页面设计布局,不能用表格进行布局(可以在局部地方使用表格展示那些按行按列排列的数据,但是页面的整体结构不能使用表格来布局)。

3、网站至少包含2个页面(一个首页和一个子页,文件大小要适当,图像文件不能太大),各页面之间要求有统一的导航机制,超链接的设置可实现在网站各页面中合理跳转,不出现死路。链接结构合理,下一层必须有返回上层或首页的链接。

4、主页统一用index.html命名,并放在站点根目录下;站点内文件夹合理规划,文件夹分类层次合理,如将图像和声音文件等项目归类存放于文件夹中,便于文件的查找定位。图像文件夹用images命名,媒体文件夹用media命名,CSS文件夹用styles或者css命名,javascript脚本文件夹用scripts或者js命名,字体文件夹用fonts命名

5、网页布局不能过于简单,其中必须包含LOGO、导航、页脚等内容。

6、网页的主体内容至少要分2列布局,内容中包含文字、图片、超链接、表单等元素。

7、可以根据网页布局与美化的需要,增加适当的CSS3效果,如圆角框(border-radius)、过渡(transition)、变换(transform)等。

8.、有能力的同学可以给网页添加响应式效果,使网页在不同的屏幕尺寸下呈现不同的布局,此项可以加分。

9、在完成2个基本页面后,可以单独再做一张移动端(手机端)的页面,效果好的适当加分。

10、作品中可以适当添加Javascript特效,但是此项不作为主要加分项目。

11、主页中包含版权声明、网站更新时间、制作人员简介,注意合法使用网络转载的资源。可以学习、借鉴网上的案例或资源,在掌握了其技术方法后可以将这些方法运用到自己的作品中。

本站提供的网页作品主要为个人学习参考使用。若网页框架中的素材或文字侵犯了您的权益,请联系在线客服投诉删除。
学生网页模板

原创学生水平网页设计成品模板

静态网页 动态网站