运用HBuilder软件利用DIV+CSS网页布局设计以静态页面为主的网站

通过使用网页制作相关软件，制作小型网站，通过实践以下步骤：确定网站主题、收集素材资源、构建站点、组建网站、制作美化网页并设置链接及测试网站，达到熟练使用网页制作软件，掌握DIV+CSS网页布局技术，熟悉网站开发设计的流程，独立完成小型网站规划、设计与制作的目的。

能够熟练的综合运用HBuilder软件，利用DIV+CSS网页布局技术开发设计以静态页面为主的小型网站。

网页主题

在给定主题中自由选取。

1、传统文化：剪纸、风筝、灯笼、年画、书法、传统节日、传统艺术等

2、旅游：云贵、川藏、江浙沪、港澳台等

3、运动：足球、篮球、乒乓球、瑜珈、跆拳道等

4、美食类：粉面、巧克力、蛋糕、咖啡、茶、各地小吃等

5、生活休闲：汽车、服装时尚、养生、购物网站等

6、文学：小说、唐诗宋词元曲、现代诗词等

7、我的家乡：介绍你的家乡，包括旅游、饮食、风俗、民族等

8、我的学校：从学生角度去展现校园生活、校园文化等

9、弘扬爱国主义的主题网站

网页要求

自选主题制作一个小型网站，内容不限，网站至少包含两个网页（一个首页和一个子页）。利用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、主页中包含版权声明、网站更新时间、制作人员简介，注意合法使用网络转载的资源。可以学习、借鉴网上的案例或资源，在掌握了其技术方法后可以将这些方法运用到自己的作品中。