第31章 项目实战-PC端固定布局[1]

学习要点:

1.准备工作

2.创建项目

3.网站结构

4.CSS选择器

5.完成导航

主讲教师:李炎恢

本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现。

一.准备工作

1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制;因为,1024根本无法容纳最低宽度的页面;页面采用1280的最低宽度设计,去掉滚动条为1263像素。

2.第一个项目是PC端的固定布局,会采用像素(px)单位。

3.项目素材图片,是课外独立设计好的,课程不会去设计,至于怎么设计的,我会简单的说明一下,让不懂美工的程序员,能设计出还能看的格调。

4.目前互联网大部分还是PC端页面为主,后面两个项目,会根据这个PC端改成流体移动端和响应式兼容模式。

二.创建项目

1.创建index.html文件,添加html5基本格式;

2.创建img和css两个目录;

3.创建style.css文件,存放在css目录,并在html5引入css;

三.网站结构 

在没有任何思路的情况下,可以参考大量同类型的网站,了解一下大致结构。我们将要做的网站是一个旅行社的企业网站。经过大量参考,首页上,我们选择了最基本的四个模块。

//四个基本模块:nav导航、header头部、section首页主体、footer尾部

<nav></nav>
<header></header>
<section></section>
<footer></footer>

四.CSS选择器

当四个模块建立起来,我们首先考虑的是应该选用哪种选择器。选择器有很多种方式,

核心分为三种:1.元素选择器;2.id选择器;3.class选择器。我们分别具体分析一下。

1.元素选择器

元素选择器一般用于通用的CSS定义,在局部或某个单一样式不适用。除非你的网站 非常小,小到整个页面的元素标签不超过5个,那倒是可以使用的。

//元素定义型

body {
}

2.id定义型 

id定义型的特点,就是表明这个元素是唯一性的,不能再当前页面的其它元素再定义

相同的id。对于中小型网站,一般是单人设计制作,元素标签不太多,可以在布局元素上 使用id定义型。比如<nav>、<header>、<section>、<footer>的顶层元素上。

//id定义型

#nav {
}

3.class定义型 

class定义型的特点,就是可以定义多个实现相同的效果。而实际应用中,比较适合大中型Web项目。首先在多人维护的项目中,使用class也避免定义冲突;其次在一个元素 需要多个样式切换或同时使用时,也只有class才能实现。再此项目偏大时,使用class 也避免多个模块切换的冲突。

//class定义型

.center {
}

通过上面的简单分析:我们这个旅行社的网站属于中小型网站,通用样式采用元素定义  型;顶层的布局元素可以使用id定义型;其他标签一律class定义型。

五.完成导航 

项目的第一节课,我们先完成如下的导航,LOGO已经提供。

//最终完成版本的html,期间可能会有几次转换过程

<nav id="nav">
    <section class="center">
        <h1 class="logo"> 瓢城旅行社</h1>
        <ul class="link">
            <li class="active">
                <a href="###"> 首页</a>
            </li>
            <li>
                <a href="###"> 旅游资讯</a>
            </li>
            <li>
                <a href="###"> 机票订购</a>
            </li>
            <li>
                <a href="###"> 风景欣赏</a>
            </li>
            <li>
                <a href="###"> 公司简介</a>
            </li>
        </ul>
    </section>
</nav>

//最终版本的CSS部分,期间可能会有几次转换过程

body, h1, ul {
    margin: 0;
    padding: 0;
}
body {

    background-color: #fff;
}
ul {
    list-style: outsidenonenone;
}
a {
    text-decoration: none;
}
#nav {
    width: 100%;
    height: 70px;
    background: #333;
}
#nav .center {
    width: 1263px;
    margin: 0auto;
}
#nav .logo {
    width: 240px;
    height: 70px;
    background-image: url(../img/logo.png);
    text-indent: -9999px;
    float: left;
}
#nav .link {
    width: 650px;
    height: 70px;
    line-height: 70px;
    font-size: 18px;
    float: right;
}
#nav .link li {
    width: 120px;
    height: 70px;
    text-align: center;
    float: left;
}
#nav .link a {
    display: block;
    color: #eee;
}
#nav .active a, #nav .link a:hover {

}

备注:LOGO采用的是h1标签,一般为了让搜索引擎更好的抓取关键字,我们建议一个 页面只有一个h1,而且是最重要的关键词放在里面。在首页上,最重要的关键词就是旅行 社的名称。当然,如果在其他页面,比如新闻网站的单个新闻,最重要的应该是新闻标题, 网站的名称就其次了。

时间: 2024-10-15 01:59:33

第31章 项目实战-PC端固定布局[1]的相关文章

第31章 项目实战-PC端固定布局8

第31 章项目实战-PC 端固定布局[8]学习要点:1.归类合并2.子导航 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.归类合并在前面几节课中,有一部分HTML 代码比较松散,没有统一到一个类别块里.比如:很多的标签超链接没有归类到UL 里,导致一些问题等.//松散的<a>标签<a href="###">曼谷(12)</a><a href="###">东京

第31章 项目实战-PC端固定布局7

第31 章项目实战-PC 端固定布局[7]学习要点:1.侧栏制作2.详细代码 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.侧栏制作本节课,主要设计一下内容页面的侧栏部分,分三个小块.经过思考,侧栏会包含一些图片,而主要部分也会包含图片,那么侧栏放在左边可能会和主栏的图片冲突导致不协调,所以,我们把侧栏更换到右边.//实际上,还去掉了高度,让其自适应#container {width: 1263px;margin: 30px auto

第31章 项目实战-PC端固定布局3

第31 章项目实战-PC 端固定布局[3]学习要点:1.搜索区2.插入大图3.搜索框 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.搜索区本节课,我们接着header 头部往下,来设计一块搜索区.这个区域,可以是广告大图,也可以是用户注册,也可以是一个搜索条,都是一个大幅背景,内嵌一个表单.具体造型如下:从表面上来分析,就是插入一张背景大图,然后居中一个搜索条.但是,我们要求最小在1280 分辨率.最大在1920 分辨率能保持最佳的观

第31章 项目实战-PC端固定布局5

第31 章项目实战-PC 端固定布局[5]学习要点:1.底部区域2.说明区域3.版权及证件区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.底部区域本节课,我们将探讨一下首页中最底部的区域.这部分区域由两个部分组成,一个是说明内容,有:合作伙伴.旅游FAQ 和联系方式,还有一个就是版权声明及各种手续证件编号.//底部区域父元素<footer id="footer">...</footer>//底部父元

第31章 项目实战-PC端固定布局4

第31 章项目实战-PC 端固定布局[4]学习要点:1.热门旅游区2.标题介绍区3.旅游项目区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.热门旅游区本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下://热门旅游区父元素<div id="tour">...</div>//旅游父元素#tour {width

第31 章项目实战-PC 端固定布局10

第31 章项目实战-PC 端固定布局[10]学习要点:1.机票预定2.代码详解 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.机票预定机票预定页面,具体如下:二.代码详解//全部代码<form action="###"><h2>机票预定</h2><div class="type"><p>航程类型<mark>单程</mark>

第31章 项目实战-PC端固定布局9

第31 章项目实战-PC 端固定布局[8]学习要点:1.资讯内容2.代码详解 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.资讯内容和首页一样,只不过这里,布局方式有所不同,具体如下:二.代码详解//全部代码<figure class="tour"><img src="img/tour1.jpg" alt="曼谷-芭提雅6 日游"><figcaption&

第31章 项目实战-PC端固定布局6

第31 章项目实战-PC 端固定布局[6]学习要点:1.分离CSS2.头部区域3.内容区域 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.分离CSS本节课,我们将要创建一个新的页面:旅游资讯.那么,现在需要解决的问题是,如果把首页重复的部分移植到新的页面而减少冗余.最恰当的方法就是:将CSS 部分中重复的部分分离出来,单独创建一个CSS,以便后续的页面重复调用.而首页的HTML 重复的部分,一般是通过动态网页,比如PHP 等解决重复问

第 31 章 项目实战-PC 端固定布局[4]

学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.热门旅游区 本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下: //热门旅游区父元素 <div id="tour"> ... </div> //旅游父元素 #tour { w