B/S结构用户界面设计

【实验编号】
10003809548j 　　Web界面设计
【实验学时】
8学时
【实验环境】
 所需硬件环境为微机；
 所需软件环境为dreamweaver
【实验内容】
这次实验要设计一个B/S结构的用户界面，题目自拟，我看样例都是做了一个小说网站，而且这个感觉也好做一点，所以我也做了一个小说网站的用户界面。

【关键步骤】
网页设计与开发流程

1. 项目规划与信息架构设计
   首先进行整体页面规划，明确页面数量、层级关系及统一的设计规范，建立完整的信息架构。
2. 首页原型设计
   优先完成首页布局设计，确定视觉层次与内容分区，确立全站的设计基准。
3. 导航系统与内容框架搭建
   开发顶部导航栏，构建内容区域模块化结构，确保功能完整性与扩展性。
4. 品牌视觉元素设计
   设计Logo及辅助图标：基于精选字体进行艺术化加工，通过Photoshop添加装饰纹样，强化品牌识别度。
5. 设计细节优化
   进行全局视觉微调，包括间距、配色、字体规范等，提升整体质感。
6. 书架功能模块实现
   采用真实书架素材作为背景，使用Photoshop精修后嵌入"+"按钮，实现图书添加与页面跳转功能。
7. 阅读界面动效设计
   运用图层位移技术模拟翻页效果；选用羊皮卷纹理制作对称背景，营造沉浸式阅读体验。
8. 页面路由与交互逻辑开发
   完成全站页面间的跳转逻辑，确保导航流畅性与用户体验一致性。
9. 全局组件标准化
   统一顶部标题栏与底部版权栏设计，形成贯穿全站的视觉规范。

主页：
登录注册：

排行榜：

【实验体会】
本次B/S小说网站UI设计让我深刻认识到前期规划的重要性。从首页布局确立风格，到Photoshop制作Logo、书架素材，再到羊皮卷阅读背景与图层移动翻页效果，每个环节都需注重细节。统一标题栏与版权栏的设计强化了品牌一致性，整体过程让我体会到艺术性与功能性的完美融合。初步了解了div的用法以及ul ，li的一些用法，明白了class id 之间的关系与区别，也明白了js css各自的功能。