PC端静态网页开发及项目，注意流程以及步骤

时间：2023-07-16 17:36:01 | 来源：网站运营

时间：2023-07-16 17:36:01 来源：网站运营

PC端静态网页开发及项目，注意流程以及步骤：

开发流程

需求分析：对要开发的产品进行定位对比如产品类型，产品功能，面向的客户群，达到的目的等。

整体规划：根据需求分析的结论，确定网站中要展示的内容，层次，展示形式等，然后给出对应内容的文案。

界面设计：由设计师根据整体规划的结果，将网站的各个页面进行设计，最终给出设计图，颜色，数据信息等。

前端程序设计:前端开发人员将根据得到的设计图，进行代码的编写，实现网页的界面和功能。

前后端系统整合：后端开发人员进行数据设计，将程序功能与界面进行整合，前后端配合进行功能调试。

测试验收：项目经理和相关测试人员根据项目前期策划为指导对产品进行测试验收，测试产品的交互效果，功能实现效果等。

页面开发常见概念和布局流程

版心：是指网页中主要内容所在的区域。一般在浏览器窗口中水平居中显示，从而让用户的视线更集中。常见宽度：100px,1200px

制作方法：margin居中。

布局流程：

1.确定页面的版心。

2.分析页面中的行模块，以及每个行模块中的列模块。

3制作HTML页面，CSS文件。

4.css初始化，然后开始利用盒子模型原理，通过DIV+CSS布局来控制网页的各个模块。

head内部配置

文件结构：

文件基本结构包括：css文件夹，inages文件夹，index.html。

标签页icon图标

大部分网页在标签页标题位置会添加网站的icon图标。

图标的文件名要求以favicon.ico命名，文件需要与index.htmhttps://www.lgstatic.com/lg-www-fed/common/static/favicon_faed927.icol文件同级存储。

使用方法，通过link标签进行引用，设置的恶属性包括：

<link rel="dhortcut icon" href="favicon.ico" type="image/x-icon">复制代码

CSS分级引入

css文件设置需要根据功能进行分层管理：目的是为了提取出多个页面公共部分，提供讴多个HTML同时引用。公共部分也可以划分范围，有的是所有网站能用，有的是某几个网站的公共部分。

css常见分层组织：清除默认样式的css，每个页面自己独有的css。

清除默认样式：

使用范围：所有的网站都能使用。

制作方法：自己工作中进行积累，或者使用网络已有资源。

命名习惯：reset.css

引入时必须作为第一层引入，网页中独有的样式可以层叠掉reset中的样式。

注意、；reset.css写完后不允许更改。

公共样式：

适用范围：单独的一个网站所有的页面，几个页面。

制作方法：从设计图观察，找到所有页面或者多个页面公共部分，划分成不同的模块分别进行.css文件书写。

命名习惯：common.css或者模块名.css

多个网站页面的公共部分书写完之后不允许后期更改，一旦更改，多个运用的HTML页面都会发生变化。需要注意类名的使用，公共文件的类名一般不要在其他的css文件中再用。

引入顺序：一般在reset.css后面，单独样式文件前面。

首页布局

header区域

header:网页顶部结构常用命名，通常包括logo，导航nav等内容。

布局类型：通栏背景，内容包括版心居中的主要内容，内容包括左右浮动两部分。

整体结构：100%的div>版心的div

注意：为了避免更改公关版心样式，div需要重新添加一个class属性值。

logo：使用h1>a结构，可以适当添加SEO搜索的关键字。

nav导航：常用ul>li>a列表结构搭建。

login-banner区域

login:登录

布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左右浮动两部分

注意：实际网页中，部分表单效果通常使用其他标签+css样式的效果进行模拟，比如按钮，下拉菜单等。

search区域

search：搜索框部分。

布局类型：通栏背景，内部包含居中的主要内容。

搜索框区域表单：需要添加form标签，保证数据能提交数据库。

补充：文本框input标签可以通过一个placeholder属性，设置默认提示文本，点击文本框输入文字之后，placeholder属性内容会自动消失。

content区域

content:网页的主要内容区域，用于展示更多的产品，信息等。

布局类型：通栏，底部设置边框，内容为版心居中。

content内部包括四个部分：main主要区域列表焦点图，.hot_recruit热门职位，hot-company热门公司，hot_links热门链接。

main部分

布局类型：左窄右宽的两列布局，通过浮动实现。

aside:侧边栏常用命名，整体为无序列表结构，表现为一种特殊的下拉菜单效果，鼠标移上li之后显示内部的子级元素。下拉菜单列表中，推荐使用定义列表结构搭建。

注意：侧边栏aside这种结构中的数据是可能动态发生变化的，我们需要搭建好HTML结构和正确的css样式，让HTML结构足够清晰，方便后期后端开发人员传入数据。

banner：焦点图部分为滚动轮播图效果，点击滚动特效等待学完JavaScript后制作。

布局方式：整体使用定位制作，与淡入淡出轮播图不同的是图片所在的无序列表中，图片需要浮动显示，而不是定位到同一点。特殊的需要添加魔术替换图片。

补充：box-shadow

CSS3新增的盒子属性box-shadow

box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 内、外阴影；

box-shadow:3px 3px 5px 4px rgb(0,0,0);

.hot_recruit部分

热门职位部分是一种tab选项卡结构，并且与后面的热门公司和热门链接有类似的结构和样式，需要谨慎提取公共样式通过公共类名设置CSS，热门职位独有的样式需要独立的类名设置，避免影响其他的两个部分。

布局类型：tab栏选项卡结构，整体为上下对齐的版心结构。

标题部分：浮动设置，当前展示的部分标签使用current的类名进行标记，设置特殊样式。

详细内容布局类型：平均分步型，使用浮动制作。

补充：多余文字显示成...省略号形式，通过三行代码实现。

补充：多余文字显示成...省略号。

.word_cut{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

<!-- 文字溢出以小圆点形式 -->

}复制代码

footer区域

footer:页面底部的常用名

布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左右浮动的两部分。

其他登录方式:左浮动，注意其中鼠标移上显示定位元素效果。

其他链接服务：使用定义列表制作结构。

backtop区域

返回顶部的设置。通常使用a标签进行结构搭建。

定位方式：固定定位，位置保持与版心固定的位置，避免由于分辨率标题元素位置差异太大。

动画效果：后期用javascript实现。

快速搭建公共结构

首先制作完毕之后，分析其他页面的共同之处，按照模块进行拆分复制选择。

方法：直接复制index.html文件，删除不需要的结构，保留公司页需要的公共结构结构，同时删除不需要的css文件引入的link标签，保留需要的公共样式。

注意：记得更改nav导航中当前选中页的class.

公共结构搭建完毕后，可以继续书写公司页面独有结构和样式。

作者：小辉同学的笔记本 链接：https://juejin.im/post/6894045433220464654

来源：掘金 如有侵权联系删除




最新Java教程全套




第1阶段 ：Java基础

1.认知基础课程2. java入门阶段3. 面向对象编程4. 飞机小项目5. 面向对象和数组6. 常用类7. 异常机制8. 容器和数据结构9. IO流技术10. 多线程11. 网络编程12. 手写服务器13. 注解和反射14. GOF23种设计模式15. 正则表达式16. JDBC数据库操作17. 手写SORM框架18. JAVA10新特性19.数据结构和算法20. JVM虚拟机讲解21. XML技术解析

第2阶段：数据库开发全套课程

1.Oracle和SQL语言2.Mysql快速使用3.PowerDesigner使用4.JDBC数据库5.Mysql优化6.oracle深度讲解

第3阶段：网页开发和设计

1.HTML基础2.CSS基础3.JavaScript编程4.jQuery5.easyUI

第4阶段：Servlet和JSP实战深入课程

1.Servlet入门和Tomcat2.request和response对象3.转发和重定向_Cookie4.session_Context对象5.JSP6.用户管理系统7.Ajax技术8.EL和JSTL标签库9.过滤器10.监听器

第5阶段：高级框架阶段

1.Mybatis2.Spring3.Spring MVC4.SSM框架整合5.RBAC权限控制项目6.Hibernate37.Hibernate48.jFinal9.Shiro安全框架10.Solr搜索框架11.Struts212.Nginx服务器13.Redis缓存技术14.JVM虚拟机优化15.Zookeeper

第6阶段：微服务架构阶段

1.Spring Boot2.Spring Data3.Spring Cloud

第7阶段：互联网架构阶段

1.Linux系统2.Maven技术3.Git4.SVN5.高并发编程6.系统和虚拟机调优7.JAVA编程规范8.高级网络编程9.Netty框架10.ActiveMQ消息中间件11.单点登录SSO12.数据库和SQL优化13.数据库集群和高并发14.Dubbo15.Redis16.VSFTPD+NGINX

第8阶段：分布式亿级高并发电商项目

1.基于SOA架构介绍2.VSFTPD和Nginx和商品新增3.商品规格参数管理4.Jsonp5.CMS模块6.广告位数据缓存7.SolrJ和SolrCloud8.商品搜索9.商品详情10.单点登录11.购物车12.订单系统13.分库和分表14.分布式部署

第9阶段：毕设项目第1季

1. 电子政务网2. 企业合同管理系统3. 健康管理系统4. 商品供应管理系统5. 土地档案管理系统6. 聊天室设计和实现7. 码头配套和货柜管理系统8. 百货中心供应链系统9. 病历管理系统10. 超市积分管理系统11. 动漫论坛12. 俄罗斯方块13. 个人博客系统14. 固定资产管理系统15. 影视创作论坛16. 屏幕截图工具17. 超级玛丽游戏18. 飞机大战游戏19. 雷电

第10阶段：毕设项目第2季

1. 微博系统2. 写字板3. 坦克大战4. 推箱子5. 电脑彩票系统6. 记账管理系统7. 新闻发布系统8. 医院挂号系统9. 仓库管理系统10. 停车场管理系统11. 网络爬虫12. 酒店管理系统13. 企业财务管理系统14. 车辆管理系统15. 员工信息管理系统16. 旅游网站17. 搜索引擎18. 进销存管理系统19. 在线考试系统20. 物流信息网21. 住院管理系统22. 银行柜员业务绩效系统

“ 全套视频教程 ”

作者：小辉同学的笔记本 来源：掘金 如有侵权联系删除