静态网页开发基础

时间：2023-09-16 19:18:01 | 来源：网站运营

时间：2023-09-16 19:18:01 来源：网站运营

静态网页项目开发基础

开发流程

• 需求分析：对要开发的产品进行定位比如产品类型、产品功能、面向的客户群、达到的目的等
  
• 整体规划：根据需求分析的结论。确定网站中要晨示的内容、层次、展示形 式等，然后始出对应内容的文案
  
• 界面设计：由设计师根据整体规划的结果。将网站的各个页面进行设计。最终给出设计图、颜色、数酒信息等
• 前端程序设计：前端开发人员将根据得到的设计图，进行代码的编写，实现 网页的界面、功能
• 前后端系统整合：后端开发人员进行数据库设计，将程序功能与界面进行整合，前后端配合进行功能调试
• 测试验收：项目经理及相关测试人员，根据项目前期策划为指导对产品进行测试 验收。测试产品的交互效果、功能实现效果等

版心

• 阅读报纸时我们会发现，虽然其中内容很多很丰富，但是经过合理的排版布局，版面整体依然清晰、易读
• 同样,在制作网页过程中，如果要让页面结构清晰、有条理，也需要对网页内容 进行“排版”
• 版心:是指网页中主要内容所在的区域。一般在浏览器窗口中水平居中显示，从 而让用户的视线更集中
• 常见的版心宽度值包括960px、980px、 1000px、 1200px 等
• 制作方法:使用标准流中的margin居中方法

页面布局流程

• 为了高网页制作的效率，布局时通常要遵守一定的布局流程，具体如下:
• 确定页面的版心(可视区域)
• 分析页面中的行模块，以及每个行模块中的列模块
• 制作HTML页面，CSS文件
• CSS初始化，然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块

标签页icon图标

• 大部分网站在标签标题位置会添加网站的icon图标
  
• 图标的文件名要求已favicon.ico命名，文件需要与index.html文件同级存储
  
• 使用方法，通过/标签进行引用，设置的属性包括：
  
• <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分层引入的顺序

header区域

• header :网页顶部结构常用命名，通常包含logo、导航nav等内容
• 布局类型:通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分
• 整体结构: 100%的div >版心的div
• 注意:为了避免更改公共的版心样式，/ 需要重新添加一个class属性值
• logo:使用h1> a结构，可以适当添加SEO搜索的关键字
• nav导航:常用ul>li> a列表结构搭建

login-banner 区域

• login :登录
• 布局类型:通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分
• 注意:实际网页中，部分表单效果通常使用其他标签+ css样式的效果进行模拟，比如按钮、下拉菜单等

search 区域

• search :搜索框部分。
• 布局类型:通栏背景，内部包含居中的主要内容
• 搜索框区域表单:需要添加/标签保证数据能够提交数据库
• 补充:文本框/标签可以通过一个placeholder属性，设置默认提示文本，点击文本框输入文字后，placeholder 属性的内容会自动消失

content区域

• content:网页的主要内容区域，用于展示更多的产品、信息等
• 布局类型:通栏，底部设置边框，内容为版心居中
• content内部包括四个部分: .main 主要区域列表焦点图、.hot recruit 热职 位、.hot. company热]公司、.hot links 热门链接

补充：box-shadow

• CSS3中新增的盒子阴影属性box- shadow
• box- shadow:水平阴影位置垂直阴影位置模糊距离阴影尺寸阴影颜色内/外阴影;
• box- shadow:3px 3px 5px 4px rgb(0,0,0);

多余文字显示成...省略号

快速搭建公共结构

• 首页制作完毕后 ，分析与其他页面的公共之处，按照模块进行拆分复制选择
• 方法：直接复制index.html文件，删除不需要的结构，保留公司页需要的公共结构部分，同时删除不需要的css文件引入的/标签，保留需要的公共样式文件
• 注意：记得更改nav导航中当前选中页的class
• 公共结构搭建完毕后，可以继续书写公司页面独有的结构和样式