重学前端之PC端静态网页应用开发
时间：2023-09-06 20:12:01 | 来源：网站运营
时间：2023-09-06 20:12:01 来源：网站运营
重学前端之PC端静态网页应用开发：前端学习路径及基础学习教程目录
1、网页项目开发流程需求分析
对要开发的产品进行定位，比如产品类型、产品功能、面向的客户群、达到的目的等。
整体规划
根据需求分析的结论，确定网站中要展示的内容、层次、展示形式等，然后给出对应内容的文案。
界面设计
由设计师根据整体规划的结果，将网站的各个页面进行设计，最终给出设计图、颜色、数据信息等。
前端程序设计
前端开发人员将根据得到的设计图，进行代码的编写，实现网页的界面、功能。
前后端系统整合
后端开发人员进行数据库设计 ，将程序功能与界面进行整合，前后端配合进行功能调试。
测试验收
项目经理及相关测试人员，根据项目前期策划为指导，对产品进行测试验收，测试产品的交互效果、功能实现效果等。
2、页面开发的常见概念及布局流程版心
阅读报纸时我们会发现，虽然其中内容很多很丰富，但是经过合理的排版布局，版面整体依然清晰、易读。
同样，在制作网页过程中，如果要让页面结构清晰、有条理，也需要对网页内容进行“排版”。
版心：是指网页中主要内容所在的区域。一般在浏览器窗口中水平居中显示，从而让用户的视线更集中。
常见的版心宽度值包括960px，980px，1000px，1200px等。
制作方法：使用标准流中的margin居中方法。
页面布局流程
为了提高网页制作的效率，布局时通常要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区域）
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML页面，CSS样式。
4、CSS初始化，然后运用盒子模型的原理，经过DIV+CSS布局来制作网页的各个模块。
几种常见的布局类型
一列固定宽度且居中
两列左窄右宽型
通栏平均分布型
一个网页中可能以上几种布局类型都有。
3、项目实战-head内部配置文件结构
网站中会包含多个.html文件和.css文件以及图片等多媒体文件，我们需要使用不同的文件夹分类进行管理。
文件夹最基本的结构包括：
<head>的配置
<title>网页标题</title>
标签页icon图标
大部分网站在标签页标题位置会添加网站的icon图标。
图标的文件名要求以favicon.ico命名，文件需要与index.html文件同级存储。
使用方法，通过<link>标签进行引用，设置的属性包括：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
CSS分级引入
CSS文件设置需要根据功能进行分层管理：目的是为了提取出多个页面公共的部分，提供多个HTML同时引用。公共的部分也可以划分范围，有的是所有网页能用的，有的是某几个网页公共的部分。
CSS常见的分层组织：清除默认样式的CSS，网站的公共样式CSS，每个页面自己独有的CSS。
注意书写顺序，引入多层CSS时，需要按照后面的层叠前面的CSS进行设置，使用页面独有的样式层叠公共的样式。
清除默认样式
使用范围：所有网页都能使用。
制作方法：自己工作中进行积累，或者使用网络上已有的资源。
命名的习惯：reset.css
引入时必须作为第一层引入，网页中独有的样式可以层叠掉reset中的样式。
注意：reset.css文件写完后不允许再次更改。
公共样式
使用范围：单独的一个网站所有的页面、几个页面。
制作方法：从设计图中观察，找到所有页面或多个页面公共的部分，划分成不同的模块分别进行.css文件的书写。
命名习惯：common.css或者模块名.css
多个网站页面的公共部分书写完之后不允许后期更改，一旦更改，多个引用的HTML页面都会发生变化 。需要注意类名的使用，公共文件中的类名一般不要在其他的CSS文件中再用。
引入顺序：一般在reset.css后面，单独的样式文件前面。
页面独有样式
使用范围：单独的一个HTML页面
制作方法：找到页面独有的而其他页面没有的样式，单独书写在一个.css文件中，只有对应的HTML文件能够引用。
命名习惯：一般文件名与HTML的文件名保持一致，例如index.css，如果拆分的更细致可以使用多个单词的拼写，例如index_banner.css等。
引入顺序：在所有公共样式后面。
注意：使用单独样式文件去层叠前面公共样式时，需要注意选择器权重。
整个CSS分层引入的顺序
<link rel="stylesheet" href="css/reset.css" type="text/css"><link rel="stylesheet" href="css/common.css" type="text/css"><link rel="stylesheet" href="css/index.css" type="text/css">4、项目实战-base.css首页index.html结构布局
header区域
header：网页顶部结构常用命名，通常包含logo、导航nav等内容。
布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。
整体结构：100%的div>版心的div
注意：为了避免更改公共的版心样式，<div>需要重新添加一个class属性值。
logo：使用h1>a结构，可以适当添加SEO搜索的关键字。
nav导航：常用ul>li>a列表结构搭建。
5、项目实战-header整体布局6、项目实战-logo和选择城市7、项目实战-导航nav8、项目实战-导航右侧9、项目实战-login-banner大结构login-banner区域
login：登录
布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。
注意：实际网页中，部分表单效果通常使用其他标签+css样式的效果进行模拟，比如按钮、下拉菜单等。
10、项目实战-login-form部分一11、项目实战-login-form部分二12、项目实战-login-form下拉菜单13、项目实战-search区域search：搜索框部分
布局类型：通栏背景，内部包含居中的主要内容 。
搜索框区域表单：需要添加<form>标签，保证数据能够提交数据库。
补充：文本框<input>标签可以通过一个plackholder属性，设置默认提示文本，点击文本框输入文字后，plackholder属性的内容会自动消失。
14、项目实战-content区域content：网页的主要内容区域，用于展示更多的产品、信息等。
布局类型：通栏，底部设置边框，内容为版心居中。
content内部包括四个部分：
.main主要区域列表焦点图，
.hot-recruit热门职位，
.hot_company热门公司，
.hot_links热门链接
15、项目实战-main区域大结构布局类型：左窄右宽的两列布局，通过浮动实现
aside：侧边栏常用命名，整体为无序列表结构，表现为一种特殊的下拉菜单效果，鼠标移上<li>后显示内部的子级元素。下拉菜单的列表，可以使用定义列表结构搭建。
注意：侧边栏aside这种结构中的数据是动态变化的，前端做好HTML结构和CSS样式，让HTML结构足够清楚，方便后期开发。
焦点图部分为滚动轮播图效果，点击滚动效果后期JS配合完成。
16、项目实战-aside侧边栏部分17、项目实战-banner焦点图部分18、项目实战-热门职位选项卡1热门职位部分是一种tab选项卡结构，并且与后面的热门公司和热门链接有类似的结构和样式，需要做好公共样式，经过公共类名设置CSS，热门职位独有的样式需要使用单独的类名设置，避免影响其他两个部分。
布局类型：tab栏选项卡结构，整体为上下对齐的版心结构。
标题部分：浮动制作，当前展示的部分标签使用current的类名进行标记，设置特殊样式。
详细内容布局类型：平均分步型，使用浮动制作。
补充：多余文字显示成……省略号形式，通过三行代码实现。
19、项目实战-热门职位选项卡220、项目实战-热门职位列表内容1多余文字显示成……省略号
.word_cut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}21、项目实战-热门职位列表内容222、项目实战-查看更多按钮23、项目实战-快速生成热门公司部分24、项目实战-热门公司列表部分25、项目实战-热门链接部分26、项目实战-footer区域大结构27、项目实战-其他登录方式28、项目实战-二维码定位效果29、项目实战-service部分30、项目实战-copyright部分31、项目实战-返回顶部32、项目实战-快速搭建公共页面首页制作完毕后，分析与其他页面的共同之处，按照模块进行拆分复制选择。
方法：直接复制index.html文件，删除不需要的结构，保留公司页需要的公共结构部分。同时删除不需要的CSS文件引入的<link>标签，保留需要的公共样式文件。
在线咨询
